/* ============ PRODUCT DETAIL PAGE ============ */
body{padding-top:0}

.pdp-hero{padding:calc(clamp(96px,12vw,132px)) 0 clamp(30px,4vw,52px);
  background:radial-gradient(1100px 520px at 82% -12%,var(--paint-soft),transparent 62%),
             linear-gradient(180deg,#fff,#FAFBFF)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:.82rem;color:var(--sub);margin-bottom:clamp(18px,3vw,30px)}
.crumbs a{color:var(--sub);border-bottom:1px solid transparent;transition:.25s}
.crumbs a:hover{color:var(--paint);border-bottom-color:var(--paint)}
.crumbs span{opacity:.45}
.crumbs b{color:var(--ink);font-weight:600}

.pdp-hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,58px);align-items:center}
.pdp-shot{position:relative;border-radius:26px;padding:clamp(20px,3vw,34px);display:grid;place-items:center;
  min-height:clamp(260px,32vw,380px);background:var(--shot-bg,var(--mist));box-shadow:var(--shadow-lg)}
.pdp-shot img{max-height:clamp(210px,26vw,320px);width:auto;filter:drop-shadow(0 22px 30px rgba(24,27,58,.34))}
.pdp-shot.noimg::after{content:"Product photo coming soon";font-size:.8rem;font-weight:600;color:#fff;opacity:.85}

.pdp-intro h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:800;margin:.32em 0 .3em}
.pdp-headline{color:var(--paint);font-weight:700;font-size:clamp(1rem,1.6vw,1.15rem);margin-bottom:14px}
.pdp-desc{color:var(--sub);font-size:1.03rem;max-width:44rem}
.pdp-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.pdp-quick{padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(58px,7vw,96px)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px)}
.qcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px 24px;transition:.3s var(--ease)}
.qcard:hover{border-color:var(--paint);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.qcard > span{display:flex;align-items:center;gap:8px;font-family:'Poppins';font-size:.7rem;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fi-fg,var(--paint));margin-bottom:10px}
.qcard b{font-size:.98rem;font-weight:600;line-height:1.45}

.pdp-detail{background:var(--mist)}
.pdp-detail-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,60px);align-items:start}
.pdp-detail h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:20px}
.proplist{list-style:none;display:grid;gap:12px}
.proplist li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;font-weight:600;font-size:.95rem;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.proplist li:hover{border-color:var(--paint);transform:translateX(3px)}
.proplist li svg{flex:none}
.spectable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
.spectable td{padding:14px 20px;border-bottom:1px solid var(--line);font-size:.95rem}
.spectable tr:last-child td{border-bottom:none}
.spectable td:first-child{color:var(--sub);width:44%}
.spectable td:last-child{font-weight:600}
.pdp-note{font-size:.8rem;color:var(--sub);margin-top:16px;line-height:1.6}

.pdp-more .pgrid{margin-top:4px}
.pdp-more .prod{display:flex;flex-direction:column;color:inherit}

@media(max-width:900px){
  .pdp-hero-grid,.pdp-detail-grid{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr}
}

/* tinted icon chip — used by the Benefits list and the quick-info cards */
.fi{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:10px;line-height:0;
  background:var(--fi-bg,var(--paint-soft));color:var(--fi-fg,var(--paint))}
.fi svg{display:block}
.qcard > span .fi{width:32px;height:32px}