/* ===== Halaman Pilihan Produk ===== */
.dian-ph, .dian-pk { overflow: hidden; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.dian-ph { background: #f3eee2; }
.dian-pk { background: #cfdcc6; }
.dian-ph-stage, .dian-pk-stage { position: relative; container-type: inline-size; aspect-ratio: 1672 / 941; }
.dian-ph-picture, .dian-pk-picture { display: contents; }
.dian-ph-bg, .dian-pk-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.dian-ph br, .dian-pk br { display: block; content: ''; }
.dian-ph svg, .dian-pk svg { flex: none; }
.dian-pk-photo { display: none; }

/* hero */
.dian-ph-copy { position: absolute; left: 5.44%; top: 14.24%; width: 39.474cqw; color: #2b2d2a; }
.dian-ph-eyebrow { position: relative; padding-bottom: 0.957cqw; font-size: 0.921cqw; font-weight: 500; letter-spacing: .36em; text-transform: uppercase; color: #3f4a3f; }
.dian-ph-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 3.230cqw; height: 1.5px; background: #3f5b47; }
.dian-ph-heading { margin: 1.077cqw 0 1.316cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 4.426cqw; font-weight: 700; line-height: .98; letter-spacing: -.035em; color: #14171a; }
.dian-ph-heading span { color: #2f4a37; }
.dian-ph-copy .p1 { width: 38.876cqw; margin: 0 0 1.077cqw; font-size: 1.435cqw; line-height: 1.3; color: #2b2d2a; }
.dian-ph-copy .p2 { width: 35.885cqw; margin: 0; font-size: 1.100cqw; line-height: 1.32; color: #3f433b; }
.dian-ph-btn { position: absolute; left: 5.44%; top: 73.11%; width: 27.811cqw; height: 7.44%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 1.794cqw; border-radius: 999px; background: #3f5b47; color: #fff; font-size: 1.400cqw; font-weight: 500; text-decoration: none; transition: transform .2s, background .2s; }
.dian-ph-btn:hover { background: #324a39; color: #fff; transform: translateY(-1px); }
.dian-ph-btn svg { width: 1.435cqw; height: 1.435cqw; }
.dian-ph-note { position: absolute; left: 5.44%; top: 82.47%; width: 35.885cqw; margin: 0; font-size: 1.053cqw; line-height: 1.34; color: #3f433b; }
.dian-ph-tags { margin: 0; padding: 0; list-style: none; }
.dian-ph-tags li { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 999px; background: rgba(120, 144, 112, .94); color: #fff; font-size: 1.100cqw; font-weight: 600; white-space: nowrap; box-shadow: 0 0.359cqw 0.957cqw rgba(40, 60, 45, .18); }
.dian-ph-tags .t1 { left: 49.28%; top: 18.38%; width: 6.579cqw; height: 2.273cqw; }
.dian-ph-tags .t2 { left: 82.24%; top: 16.26%; width: 9.928cqw; height: 2.392cqw; }
.dian-ph-tags .t3 { left: 48.56%; top: 50.05%; width: 7.416cqw; height: 2.392cqw; }
.dian-ph-tags .t4 { left: 82.78%; top: 48.46%; width: 9.270cqw; height: 2.392cqw; }
.dian-ph-tags .t5 { left: 77.93%; top: 72.58%; width: 13.218cqw; height: 2.392cqw; }

/* kategori */
.dian-pk-intro { position: absolute; left: 6.04%; top: 3.19%; width: 56.220cqw; color: #2b2d2a; }
.dian-pk-eyebrow { position: relative; padding-bottom: 0.837cqw; font-size: 0.825cqw; font-weight: 500; letter-spacing: .38em; text-transform: uppercase; color: #3f4a3f; }
.dian-pk-eyebrow::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.632cqw; height: 1.5px; background: #2f4a37; }
.dian-pk-heading { margin: 0.120cqw 0 0.359cqw; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 3.708cqw; font-weight: 700; line-height: .98; letter-spacing: -.035em; color: #14171a; }
.dian-pk-intro p { margin: 0; font-size: 1.124cqw; line-height: 1.3; }
.dian-pk-intro .p1 { color: #2b2d2a; font-weight: 500; }
.dian-pk-intro .p2 { margin-top: 0.359cqw; color: #4a4e45; }
.dian-pk-grid { position: absolute; inset: 0; }
.dian-pk-card { position: absolute; box-sizing: border-box; }
.dian-pk-text { position: absolute; color: #2b2d2a; }
.dian-pk-text h3 { margin: 0; padding-bottom: 0.538cqw; position: relative; white-space: nowrap; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 1.854cqw; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #14171a; }
.dian-pk-text h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 1.675cqw; height: 2px; background: #2b2d2a; }
.dian-pk-text .sub { display: block; margin-top: 0.120cqw; font-size: 0.921cqw; font-weight: 500; color: #2b2d2a; }
.dian-pk-text p { margin: 0.598cqw 0 0.478cqw; font-size: 0.873cqw; line-height: 1.26; color: #4a4e45; }
.dian-pk-text ul { margin: 0; padding: 0 0 0 0.778cqw; columns: 2; column-gap: 0.837cqw; width: 12.859cqw; box-sizing: border-box; font-size: 0.730cqw; line-height: 1.023cqw; color: #2b2d2a; }
.dian-pk-text li { break-inside: avoid; margin: 0; padding-left: 0.120cqw; white-space: nowrap; }
.dian-pk-text li::marker { color: #2f4a37; }
.dian-pk-btn { position: absolute; box-sizing: border-box; display: inline-flex; align-items: center; gap: 1.077cqw; height: 2.273cqw; padding: 0 1.555cqw; border-radius: 999px; background: #3f5b47; color: #fff; font-size: 0.861cqw; font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform .2s, background .2s; }
.dian-pk-btn:hover { background: #324a39; color: #fff; transform: translateY(-1px); }
.dian-pk-btn svg { width: 0.897cqw; height: 0.897cqw; }
.dian-pk-card.skincare { left: 1.50%; top: 34.64%; width: 32.596cqw; height: 31.46%; }
.dian-pk-card.skincare .dian-pk-text { left: 1.794cqw; top: 1.435cqw; width: 12.261cqw; }
.dian-pk-card.skincare .dian-pk-btn { left: 1.555cqw; top: 14.773cqw; }
.dian-pk-card.body { left: 35.11%; top: 34.64%; width: 30.861cqw; height: 31.46%; }
.dian-pk-card.body .dian-pk-text { left: 1.794cqw; top: 1.435cqw; width: 12.261cqw; }
.dian-pk-card.body .dian-pk-btn { left: 1.555cqw; top: 14.773cqw; }
.dian-pk-card.hair { left: 66.93%; top: 34.64%; width: 31.639cqw; height: 31.46%; }
.dian-pk-card.hair .dian-pk-text { left: 1.794cqw; top: 1.435cqw; width: 14.055cqw; }
.dian-pk-card.hair .dian-pk-btn { left: 1.555cqw; top: 14.773cqw; }
.dian-pk-card.personal { left: 1.50%; top: 67.06%; width: 32.596cqw; height: 30.18%; }
.dian-pk-card.personal .dian-pk-text { left: 1.794cqw; top: 1.435cqw; width: 12.859cqw; }
.dian-pk-card.personal .dian-pk-btn { left: 1.555cqw; top: 13.876cqw; }
.dian-pk-card.deco { left: 35.11%; top: 67.06%; width: 30.861cqw; height: 30.18%; }
.dian-pk-card.deco .dian-pk-text { left: 1.794cqw; top: 1.435cqw; width: 12.859cqw; }
.dian-pk-card.deco .dian-pk-btn { left: 1.555cqw; top: 13.876cqw; }
.dian-pk-card.frag { left: 66.93%; top: 67.06%; width: 31.639cqw; height: 30.18%; }
.dian-pk-card.frag .dian-pk-text { left: 1.794cqw; top: 1.435cqw; width: 12.859cqw; }
.dian-pk-card.frag .dian-pk-btn { left: 1.555cqw; top: 13.876cqw; }
.dian-pk-card.hair .dian-pk-text h3 { font-size: 1.651cqw; }
.dian-pk-card.deco .dian-pk-text h3 { font-size: 1.531cqw; }
.dian-pk-card.frag .dian-pk-text h3 { font-size: 1.734cqw; }
.dian-pk-card.frag .dian-pk-text ul { width: 16.447cqw; }
.dian-pk-card.personal .dian-pk-text ul { width: 14.952cqw; }
.dian-pk-card.deco .dian-pk-text p, .dian-pk-card.frag .dian-pk-text p, .dian-pk-card.personal .dian-pk-text p { margin: 0.419cqw 0 0.359cqw; font-size: 0.849cqw; line-height: 0.957cqw; }
.dian-pk-card.deco .dian-pk-text ul, .dian-pk-card.frag .dian-pk-text ul { line-height: 0.969cqw; }
.dian-pk-card.hair .dian-pk-text ul { width: 16.447cqw; }
.dian-pk-card.deco .dian-pk-text, .dian-pk-card.frag .dian-pk-text { top: 0.837cqw; }
.dian-pk-card.deco .dian-pk-text h3, .dian-pk-card.frag .dian-pk-text h3 { padding-bottom: 0.359cqw; }
.dian-pk-card.deco .dian-pk-text .sub, .dian-pk-card.frag .dian-pk-text .sub { margin-top: -0.120cqw; }
.dian-pk-card.deco .dian-pk-text p, .dian-pk-card.frag .dian-pk-text p { margin: 0.179cqw 0 0.239cqw; line-height: 0.897cqw; }
.dian-pk-card.frag .dian-pk-text { width: 14.653cqw; }

@media (max-width: 1180px) {
    .dian-ph-stage, .dian-pk-stage { aspect-ratio: auto; container-type: normal; display: flex; flex-direction: column; padding: 48px clamp(20px, 5.74vw, 120px) 44px; }
    .dian-ph-stage { background: #f3eee2; }
    .dian-pk-stage { background: #d9e3d1; }
    .dian-ph-copy, .dian-ph-btn, .dian-ph-note, .dian-pk-intro { position: static; width: auto; height: auto; }
    .dian-ph-bg { position: relative; order: 9; display: block; width: calc(100% + 2 * clamp(20px, 5.74vw, 120px)); height: auto; margin: 26px calc(-1 * clamp(20px, 5.74vw, 120px)) -44px; aspect-ratio: 992 / 851; max-height: 540px; }
    .dian-pk-bg { display: none; }
    .dian-ph-eyebrow, .dian-pk-eyebrow { margin-bottom: 14px; padding-bottom: 14px; font-size: 12px; letter-spacing: .24em; }
    .dian-ph-eyebrow::after, .dian-pk-eyebrow::after { width: 44px; }
    .dian-ph-heading, .dian-pk-heading { margin: 0 0 14px; font-size: clamp(1.9rem, 7.2vw, 3.2rem); line-height: 1.08; }
    .dian-ph-heading br, .dian-pk-heading br, .dian-ph-note br { display: none; }
    .dian-ph-copy .p1, .dian-ph-copy .p2, .dian-pk-intro p { width: auto; margin: 0 0 14px; font-size: 1rem; line-height: 1.55; }
    .dian-ph-btn { justify-content: space-between; margin-top: 8px; padding: 17px 22px; border-radius: 16px; font-size: .98rem; font-weight: 600; }
    .dian-ph-btn svg { width: 18px; height: 18px; }
    .dian-ph-note { margin-top: 16px; font-size: .92rem; line-height: 1.55; }
    .dian-ph-tags { order: 10; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .dian-ph-tags li, .dian-ph-tags .t1, .dian-ph-tags .t2, .dian-ph-tags .t3, .dian-ph-tags .t4, .dian-ph-tags .t5 { position: static; width: auto; height: auto; padding: 9px 16px; font-size: .86rem; box-shadow: none; }
    .dian-pk-grid { position: static; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 10px; }
    .dian-pk-card, .dian-pk-card.skincare, .dian-pk-card.body, .dian-pk-card.hair, .dian-pk-card.personal, .dian-pk-card.deco, .dian-pk-card.frag { position: static; width: auto; height: auto; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fbf9f4; box-shadow: 0 8px 26px rgba(60, 80, 60, .1); }
    .dian-pk-photo { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: right center; }
    .dian-pk-card .dian-pk-text, .dian-pk-card.skincare .dian-pk-text, .dian-pk-card.body .dian-pk-text, .dian-pk-card.hair .dian-pk-text, .dian-pk-card.personal .dian-pk-text, .dian-pk-card.deco .dian-pk-text, .dian-pk-card.frag .dian-pk-text { position: static; width: auto; order: 2; padding: 20px 22px 6px; }
    .dian-pk-photo { order: 1; }
    .dian-pk-text h3 { padding-bottom: 8px; font-size: 1.5rem; }
    .dian-pk-text .sub { margin-top: 2px; font-size: .95rem; }
    .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-text ul, .dian-pk-card.hair .dian-pk-text ul, .dian-pk-card.frag .dian-pk-text ul, .dian-pk-card.personal .dian-pk-text ul { width: auto; padding-left: 18px; columns: 2; column-gap: 16px; font-size: .9rem; line-height: 1.6; }
    .dian-pk-text li { white-space: normal; }
    .dian-pk-card .dian-pk-text h3, .dian-pk-card.hair .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card .dian-pk-text .sub { font-size: 1rem; margin: 6px 0 0; }
    .dian-pk-card.hair .dian-pk-text ul { columns: 1; }
    .dian-pk-card.skincare .dian-pk-text { top: auto; left: auto; width: auto; }
    .dian-pk-card.skincare .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card.skincare .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-card.skincare .dian-pk-text ul { width: auto; font-size: .9rem; line-height: 1.6; columns: 2; }
    .dian-pk-card.body .dian-pk-text { top: auto; left: auto; width: auto; }
    .dian-pk-card.body .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card.body .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-card.body .dian-pk-text ul { width: auto; font-size: .9rem; line-height: 1.6; columns: 2; }
    .dian-pk-card.hair .dian-pk-text { top: auto; left: auto; width: auto; }
    .dian-pk-card.hair .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card.hair .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-card.hair .dian-pk-text ul { width: auto; font-size: .9rem; line-height: 1.6; columns: 1; }
    .dian-pk-card.personal .dian-pk-text { top: auto; left: auto; width: auto; }
    .dian-pk-card.personal .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card.personal .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-card.personal .dian-pk-text ul { width: auto; font-size: .9rem; line-height: 1.6; columns: 2; }
    .dian-pk-card.deco .dian-pk-text { top: auto; left: auto; width: auto; }
    .dian-pk-card.deco .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card.deco .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-card.deco .dian-pk-text ul { width: auto; font-size: .9rem; line-height: 1.6; columns: 2; }
    .dian-pk-card.frag .dian-pk-text { top: auto; left: auto; width: auto; }
    .dian-pk-card.frag .dian-pk-text h3 { font-size: 1.45rem; padding-bottom: 8px; }
    .dian-pk-card.frag .dian-pk-text p { margin: 8px 0 12px; font-size: .95rem; line-height: 1.55; }
    .dian-pk-card.frag .dian-pk-text ul { width: auto; font-size: .9rem; line-height: 1.6; columns: 2; }
    .dian-pk-text h3::after { width: 32px; height: 2px; }
    .dian-pk-card .dian-pk-text p { font-size: .95rem; line-height: 1.55; }
    .dian-pk-card .dian-pk-btn, .dian-pk-card.skincare .dian-pk-btn, .dian-pk-card.body .dian-pk-btn, .dian-pk-card.hair .dian-pk-btn, .dian-pk-card.personal .dian-pk-btn, .dian-pk-card.deco .dian-pk-btn, .dian-pk-card.frag .dian-pk-btn { position: static; order: 3; justify-content: space-between; height: auto; margin: 10px 22px 22px; padding: 14px 20px; font-size: .95rem; font-weight: 600; }
    .dian-pk-btn svg { width: 18px; height: 18px; }
}
@media (min-width: 700px) and (max-width: 1180px) {
    .dian-pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .dian-pk-text ul { columns: 1; }
}