.pdwrap{padding-top:112px;padding-bottom:80px;display:flex;flex-direction:column;gap:56px}
.pdwrap>.pcrumb{margin-bottom:-32px}

/* ---------- hero ---------- */
.pd-hero{display:grid;grid-template-columns:1fr 460px;gap:48px;align-items:start}
.pd-gallery{position:sticky;top:96px}
.pd-mainimg{background:var(--soft);border-radius:16px;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pd-mainimg img{width:100%;height:100%;object-fit:cover}
.pd-mainimg .pph-icon{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#b9b9b9}
.pd-mainimg .pph-icon svg{width:30%;height:30%}

.pd-buy{display:flex;flex-direction:column;gap:12px}
.pd-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pd-pill-verified{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.4px;padding:5px 12px;border-radius:9999px}
.pd-pill-verified svg{width:11px;height:11px}
.pd-brand{font-size:11px;font-weight:700;letter-spacing:.8px;color:#5f5e5e;text-transform:uppercase}
.pd-name{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.8px;color:var(--ink);line-height:1.25}
.pd-rate{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pd-rate svg{width:14px;height:14px;color:#000}
.pd-rate b{color:var(--ink);font-weight:600}
.pd-compat{background:#f3f3f3;border-radius:10px;padding:10px 14px;font-size:13px;color:var(--ink)}
.pd-compat b{font-weight:700}
.pd-sub{font-size:14px;color:var(--muted);line-height:22px}
.pd-size-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.pd-size-pill{background:#000;color:#fff;padding:5px 14px;border-radius:9999px;font-size:12px;font-weight:600}
.pd-price-row{padding:4px 0}
.pd-price{display:flex;align-items:baseline;gap:10px}
.pd-price b{font-size:28px;font-weight:700;color:var(--ink)}
.pd-price s{font-size:15px;color:#a9a9a9}
.pd-off{background:#eafaf0;color:#1a7f4e;font-size:11px;font-weight:700;padding:3px 9px;border-radius:9999px}
.pd-stock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.pd-stock i{width:6px;height:6px;border-radius:50%;background:#1a7f4e;flex:none}
.pd-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pd-addbag{flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#000;color:#fff;padding:14px 20px;border-radius:10px;font-size:14px;font-weight:600;border:0;cursor:pointer;transition:transform .15s}
.pd-addbag svg{width:14px;height:14px}
.pd-addbag:hover{transform:translateY(-1px)}
.pd-buynow{padding:14px 20px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.pd-wish{width:48px;height:48px;border-radius:10px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex:none}
.pd-wish svg{width:18px;height:18px}
.pd-wish.on{color:#000}
.pd-wish.on svg{fill:#000}
.pd-trust-mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.pd-trust-mini>div{display:flex;align-items:center;gap:8px}
.pd-trust-mini .ico{width:28px;height:28px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;flex:none}
.pd-trust-mini .ico img{width:14px;height:14px}
.pd-chips{display:flex;flex-wrap:wrap;gap:8px}
.pd-chip{font-size:11px;font-weight:600;color:var(--muted);background:var(--soft);padding:6px 12px;border-radius:9999px}

/* ---------- metric bar ---------- */
.pd-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pd-metric{background:#fff;padding:28px 20px;text-align:center}
.pd-metric-big{font-size:30px;font-weight:700;letter-spacing:-1px;color:var(--ink)}
.pd-metric-lbl{font-size:13px;font-weight:600;color:var(--ink);margin-top:6px}
.pd-metric-sub{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- helps with / matching ---------- */
.pd-helps{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
.pd-helps-l h2,.pd-compound h2,.pd-apply h2,.pd-fit h2,.pd-inci h2,.pd-reviews h2,.pd-bundle h2,.pd-fbt-sec h2{font-size:24px;font-weight:600;letter-spacing:-.6px;color:var(--ink);margin-bottom:14px}
.pd-helps-l p{font-size:14px;color:var(--muted);line-height:23px}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.pd-tag{font-size:12px;font-weight:600;color:var(--ink);background:var(--soft);padding:6px 14px;border-radius:9999px}
.pd-progress{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.pd-prog-row{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink);font-weight:500}
.pd-prog-bar{height:6px;border-radius:9999px;background:var(--soft2)}
.pd-prog-bar i{display:block;height:100%;border-radius:9999px;background:#000}
.pd-match{padding:24px;display:flex;flex-direction:column;gap:14px}
.pd-match h3{font-size:15px;font-weight:600;color:var(--ink)}
.pd-match ul{display:flex;flex-direction:column;gap:10px}
.pd-match li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
.pd-match li svg{width:14px;height:14px;color:#1a7f4e;flex:none}
.pd-caution{background:#fff8ec;border:1px solid #f2e2bb;border-radius:10px;padding:12px 14px;font-size:12px;color:#7a5c17;line-height:19px}

/* ---------- compound breakdown ---------- */
.pd-compound-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pd-comp-card{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.pd-comp-badge{align-self:flex-start;background:#000;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:9999px}
.pd-comp-card h4{font-size:15px;font-weight:600;color:var(--ink);margin:4px 0 6px}
.pd-comp-row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px}
.pd-comp-row b{color:var(--ink);font-weight:600}
.pd-compound-empty{font-size:14px;color:var(--muted);line-height:22px;max-width:640px}

/* ---------- apply / fit ---------- */
.pd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pd-step{border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:8px}
.pd-step-n{font-size:22px;font-weight:700;color:#d5d5d5}
.pd-step p{font-size:13px;color:var(--ink);line-height:20px}
.pd-cadence{margin-top:14px;font-size:13px;color:var(--muted)}
.pd-cadence b{color:var(--ink)}
.pd-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pd-tl-step{border:1px solid var(--line);border-radius:14px;padding:18px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted)}
.pd-tl-step.on{background:#000;border-color:#000;color:#fff}
.pd-tl-n{font-size:11px;font-weight:700;letter-spacing:.5px;opacity:.7}
.pd-tl-ic{width:28px;height:28px}
.pd-tl-ic svg{width:100%;height:100%}
.pd-tl-lbl{font-size:13px;font-weight:600}

/* ---------- INCI ---------- */
.pd-inci-list{font-size:13px;color:var(--muted);line-height:22px}

/* ---------- reviews ---------- */
.pd-rev-summary{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.pd-rev-big{font-size:44px;font-weight:700;color:var(--ink);letter-spacing:-1px}
.pd-rev-stars{display:flex;gap:2px;color:#000}
.pd-rev-stars svg{width:16px;height:16px}
.pd-rev-count{font-size:13px;color:var(--muted);margin-top:4px}
.pd-rev-dist{display:flex;flex-direction:column;gap:6px;max-width:420px;margin-bottom:18px}
.pd-dist-row{display:grid;grid-template-columns:24px 1fr 34px;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.pd-dist-bar{height:6px;border-radius:9999px;background:var(--soft2)}
.pd-dist-bar i{display:block;height:100%;border-radius:9999px;background:#000}
.pd-rev-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.pd-rev-pill{font-size:12px;font-weight:600;color:var(--ink);background:var(--soft);padding:7px 14px;border-radius:9999px}
.pd-rev-pill.on{background:#000;color:#fff}
.pd-rev-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pd-rev-card{border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.pd-rev-head{display:flex;align-items:center;gap:10px}
.pd-rev-avatar{width:34px;height:34px;border-radius:50%;background:#000;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.pd-rev-name{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px}
.pd-rev-name svg{width:11px;height:11px;color:#1a7f4e}
.pd-rev-tag{font-size:11px;color:var(--muted)}
.pd-rev-stars-sm{margin-left:auto;display:flex;gap:1px;color:#000}
.pd-rev-stars-sm svg{width:12px;height:12px}
.pd-rev-h{font-size:14px;font-weight:600;color:var(--ink)}
.pd-rev-b{font-size:13px;color:var(--muted);line-height:20px}
.pd-rev-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.pd-rev-helpful{font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);padding:6px 12px;border-radius:8px;border:0;cursor:pointer}
.pd-rev-match{font-size:11px;font-weight:600;color:#1a7f4e}
.pd-loadmore{margin-top:20px;width:100%;padding:14px;border-radius:10px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.pd-loadmore:disabled{opacity:.5;cursor:default}

/* ---------- bundle ---------- */
.pd-bundle{padding:28px}
.pd-bundle>p{font-size:13px;color:var(--muted);margin-bottom:18px;max-width:680px}
.pd-bundle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.pd-mini{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}
.pd-mini-ph{background:var(--soft);border-radius:8px;aspect-ratio:1/1;overflow:hidden;margin-bottom:6px}
.pd-mini-ph img{width:100%;height:100%;object-fit:cover}
.pd-mini-step{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.pd-mini-brand{font-size:10px;font-weight:700;letter-spacing:.6px;color:#5f5e5e}
.pd-mini-name{font-size:13px;font-weight:600;color:var(--ink);line-height:1.3}
.pd-mini-price{font-size:13px;font-weight:600;color:var(--ink);margin-top:2px}
.pd-bundle-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.pd-bundle-price{display:flex;align-items:baseline;gap:10px}
.pd-bundle-price b{font-size:20px;font-weight:700;color:var(--ink)}
.pd-bundle-price s{font-size:14px;color:#a9a9a9}
.pd-bundle-add{background:#000;color:#fff;padding:12px 22px;border-radius:10px;font-size:13px;font-weight:600;border:0;cursor:pointer}

/* ---------- FBT ---------- */
.pd-fbt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.pd-fbt-head h2{margin-bottom:0}
.pd-fbt-head a{font-size:13px;font-weight:600;color:var(--muted)}
.pd-fbt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pd-fbtcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px;position:relative}
.pd-fbt-ph{width:56px;height:56px;border-radius:8px;background:var(--soft);overflow:hidden;flex:none;display:block}
.pd-fbt-ph img{width:100%;height:100%;object-fit:cover}
.pd-fbt-info{min-width:0;flex:1}
.pd-fbt-info .pd-mini-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-fbt-add{width:30px;height:30px;border-radius:50%;background:#000;color:#fff;border:0;font-size:16px;line-height:1;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center;padding:0}

@media(max-width:1000px){
  .pd-hero{grid-template-columns:1fr}
  .pd-gallery{position:static}
  .pd-metrics{grid-template-columns:repeat(2,1fr)}
  .pd-helps{grid-template-columns:1fr}
  .pd-compound-grid{grid-template-columns:1fr 1fr}
  .pd-steps{grid-template-columns:1fr}
  .pd-timeline{grid-template-columns:1fr 1fr}
  .pd-rev-list{grid-template-columns:1fr}
  .pd-bundle-grid{grid-template-columns:1fr 1fr}
  .pd-fbt-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .pdwrap{padding-top:96px;gap:40px}
  .pd-metrics{grid-template-columns:1fr 1fr}
  .pd-compound-grid{grid-template-columns:1fr}
  .pd-timeline{grid-template-columns:1fr 1fr}
  .pd-trust-mini{grid-template-columns:1fr}
  .pd-actions{flex-direction:column;align-items:stretch}
  .pd-wish{align-self:flex-start}
}