/* Dedicated product detail page */
/* Per product theming: override --pdp-mat-1 / --pdp-mat-2 / --pdp-mat-border
   with a modifier class on <main> (e.g. .pdp--barrier) to retint the pack mats. */
.pdp{
  --pdp-mat-1:#DDEEF2;
  --pdp-mat-2:#EEF6F6;
  --pdp-mat-border:#CADFE3;
  --pdp-line:#DCD9CF;
  background:var(--cream);
  color:var(--ink);
}
.pdp--barrier{
  --pdp-mat-1:#DDEEF2;
  --pdp-mat-2:#EEF6F6;
  --pdp-mat-border:#CADFE3;
}
.pdp--collagen{
  --pdp-mat-1:#E2F5EA;
  --pdp-mat-2:#F0FDF6;
  --pdp-mat-border:#C7E8D4;
}
.pdp--brightening{
  --pdp-mat-1:#FFEFD6;
  --pdp-mat-2:#FFFBF0;
  --pdp-mat-border:#F2DDB6;
}
.pdp--depuff{
  --pdp-mat-1:#DCEEF7;
  --pdp-mat-2:#F0F8FF;
  --pdp-mat-border:#C3DEEC;
}
.pdp--copper{
  --pdp-mat-1:#F3E2D2;
  --pdp-mat-2:#FDFAF5;
  --pdp-mat-border:#E6CFB8;
}
.pdp--overnight{
  --pdp-mat-1:#ECE0F5;
  --pdp-mat-2:#FDF5FF;
  --pdp-mat-border:#DCC7EC;
}
.pdp-nav{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(247,245,238,.9);
  border-bottom:1px solid var(--hair);
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
}
.pdp-nav-in{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.pdp-brand img{
  width:126px;
  height:auto;
  display:block;
}
.pdp-nav-links{
  display:flex;
  align-items:center;
  gap:28px;
}
.pdp-nav-links a{
  color:var(--ink);
  font-size:14px;
  font-weight:500;
}
.pdp-nav-links a:hover{ color:var(--yellow-dk); }
.pdp-nav-cta{
  min-height:42px;
  border-radius:999px;
  padding:10px 18px;
}
.pdp-nav-actions{ display:flex; align-items:center; gap:10px; }
.pdp-nav-toggle{ display:none; }
.pdp-nav-mobile{ display:none; }
.pdp-hero{
  min-height:calc(100svh - 64px);
  padding:clamp(18px,3vw,40px) 0 clamp(26px,4vw,46px);
  display:flex;
  align-items:center;
}
.pdp-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(520px,1.24fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;
}
.pdp-back{
  display:inline-flex;
  margin-bottom:18px;
  color:var(--muted);
  font-size:14px;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
}
.pdp-back:hover{
  color:var(--ink);
  text-decoration-color:var(--yellow);
}
.pdp-back::before{
  content:"←";
  margin-right:8px;
}
.pdp-series,
.pdp-section-label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow-dk);
}
.pdp-hero h1{
  max-width:13.5ch;
  margin-top:12px;
  font-family:var(--f-heading);
  font-size:clamp(42px,4.6vw,64px);
  line-height:.98;
  letter-spacing:-.046em;
  color:var(--black);
}
.pdp-deck{
  max-width:34rem;
  margin-top:18px;
  color:var(--ink-2);
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.45;
}
.pdp-reserve{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px 22px;
  align-items:center;
  max-width:560px;
  margin-top:24px;
  padding:16px;
  border:1px solid var(--pdp-line);
  background:var(--cream-2);
  border-radius:12px;
}
.pdp-reserve-price strong{
  display:block;
  font-family:var(--f-heading);
  font-size:42px;
  line-height:1;
  letter-spacing:-.05em;
}
.pdp-reserve-price span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:13px;
}
.pdp-reserve-copy p{
  color:var(--ink-2);
  font-size:14px;
  line-height:1.48;
}
.pdp-primary{
  grid-column:1 / -1;
  min-height:52px;
  width:100%;
  justify-content:center;
  border-radius:10px;
  font-size:15px;
}
.pdp-primary[disabled],
.pdp-nav-cta[disabled]{
  cursor:wait;
  opacity:.75;
}
.pdp-primary.is-loading::before{
  content:"";
  width:14px;
  height:14px;
  border:2px solid rgba(15,15,15,.22);
  border-top-color:var(--black);
  border-radius:50%;
  animation:pdp-spin .7s linear infinite;
}
@keyframes pdp-spin{ to{ transform:rotate(360deg); } }
.pdp-status{
  min-height:20px;
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
}
.pdp-reserve-trust{
  grid-column:1 / -1;
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
}
.pdp-reserve-trust li{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--ink-2);
  font-size:12.5px;
  font-weight:500;
}
.pdp-reserve-trust li::before{
  content:"";
  width:15px;
  height:15px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--yellow);
  border:1px solid var(--yellow-dk);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2 2 4.8-4.8' fill='none' stroke='%230F0F0F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}
.pdp-hero-art{
  position:relative;
  align-self:stretch;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pdp-image-mat{
  min-height:clamp(420px,42vw,520px);
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,var(--pdp-mat-1),var(--pdp-mat-2));
  border:1px solid var(--pdp-mat-border);
  border-radius:12px;
  overflow:hidden;
  padding:clamp(10px,2vw,28px);
}
.pdp-image-mat img{
  width:auto;
  max-width:min(54%,320px);
  max-height:440px;
  height:auto;
  display:block;
  filter:saturate(1.02) contrast(1.01) drop-shadow(0 24px 28px rgba(15,15,15,.08));
}
.pdp-spec-strip{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  display:grid;
  grid-template-columns:1.55fr repeat(3,minmax(0,1fr));
  border:1px solid rgba(15,15,15,.14);
  background:rgba(247,245,238,.94);
  backdrop-filter:blur(8px);
  border-radius:10px;
  overflow:hidden;
}
.pdp-spec-strip span{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:9px 10px;
  border-left:1px solid rgba(15,15,15,.12);
  color:var(--ink);
  font-size:12px;
  font-weight:600;
  text-align:center;
}
.pdp-spec-strip span:first-child{ border-left:0; }
.pdp-one-line{
  border-top:1px solid var(--black);
  border-bottom:1px solid var(--black);
  background:var(--yellow);
}
.pdp-one-line-in{
  min-height:54px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.pdp-one-line span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:10px 14px;
  border-left:1px solid rgba(15,15,15,.2);
  color:var(--black);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.pdp-one-line span:first-child{ border-left:0; }
.pdp-editorial,
.pdp-formula,
.pdp-ritual,
.pdp-compare,
.pdp-faq{
  padding:clamp(70px,8vw,120px) 0;
  border-bottom:1px solid var(--hair);
}
.pdp-editorial-grid{
  display:grid;
  grid-template-columns:minmax(320px,.8fr) minmax(0,1fr);
  gap:clamp(34px,6vw,92px);
  align-items:center;
}
.pdp-editorial-image{
  overflow:hidden;
  border-radius:12px;
  background:var(--cream-photo);
  border:1px solid var(--hair);
}
.pdp-editorial-image img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
}
.pdp-editorial-copy h2,
.pdp-formula-head h2,
.pdp-ritual h2,
.pdp-compare-copy h2,
.pdp-faq h2,
.pdp-close h2{
  margin-top:14px;
  font-family:var(--f-heading);
  font-size:clamp(32px,3.6vw,52px);
  line-height:1.04;
  letter-spacing:-.04em;
  color:var(--black);
}
.pdp-editorial-copy p:not(.pdp-section-label){
  max-width:44rem;
  margin-top:22px;
  color:var(--ink-2);
  font-size:18px;
  line-height:1.62;
}
.pdp-formula{
  background:var(--black);
  color:#fff;
}
.pdp-formula .pdp-section-label{ color:var(--yellow); }
.pdp-formula-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:end;
  gap:24px 60px;
  margin-bottom:40px;
}
.pdp-formula-head h2{
  max-width:16ch;
  font-size:clamp(28px,3vw,42px);
  line-height:1.08;
  letter-spacing:-.03em;
  color:#fff;
}
.pdp-formula-head .pdp-formula-note{
  align-self:end;
  max-width:34ch;
  color:#B9B9B1;
  font-size:15px;
  line-height:1.6;
}
.pdp-formula-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #2B2B25;
  border-radius:12px;
  overflow:hidden;
}
.pdp-formula-grid article{
  min-height:286px;
  padding:24px 22px;
  border-left:1px solid #2B2B25;
  display:flex;
  flex-direction:column;
}
.pdp-formula-grid article:first-child{ border-left:0; }
.pdp-formula-grid span{
  color:var(--yellow);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.1em;
}
.pdp-formula-grid h3{
  margin-top:34px;
  color:#fff;
  font-family:var(--f-heading);
  font-size:23px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.pdp-formula-grid p{
  margin-top:auto;
  color:#CFCFC7;
  font-size:15px;
  line-height:1.55;
}
.pdp-ritual{
  background:#F1EFE6;
}
.pdp-ritual-grid{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(34px,6vw,92px);
}
.pdp-ritual h2{
  max-width:20ch;
  font-size:clamp(28px,2.8vw,40px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.pdp-steps{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--hair);
}
.pdp-steps li{
  display:grid;
  grid-template-columns:minmax(160px,.34fr) minmax(0,1fr);
  gap:22px;
  padding:24px 0;
  border-bottom:1px solid var(--hair);
}
.pdp-steps strong{
  font-family:var(--f-heading);
  font-size:20px;
  letter-spacing:-.02em;
  color:var(--black);
}
.pdp-steps span{
  color:var(--ink-2);
  font-size:16.5px;
  line-height:1.56;
}
.pdp-compare-grid{
  display:grid;
  grid-template-columns:minmax(240px,.42fr) minmax(0,1fr);
  gap:clamp(34px,6vw,92px);
  align-items:center;
}
.pdp-mini-pack{
  min-height:460px;
  display:grid;
  place-items:center;
  background:var(--pdp-mat-2);
  border:1px solid var(--pdp-mat-border);
  border-radius:12px;
  padding:28px;
}
.pdp-mini-pack img{
  max-height:430px;
  width:auto;
}
.pdp-use-table{
  margin-top:30px;
  border-top:1px solid var(--hair);
}
.pdp-use-table div{
  display:grid;
  grid-template-columns:minmax(180px,.36fr) minmax(0,1fr);
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid var(--hair);
}
.pdp-use-table span{
  color:var(--black);
  font-family:var(--f-heading);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
}
.pdp-use-table p{
  color:var(--ink-2);
  font-size:16px;
  line-height:1.55;
}
.pdp-faq-grid{
  display:grid;
  grid-template-columns:minmax(0,.54fr) minmax(0,1fr);
  gap:clamp(34px,6vw,92px);
}
.pdp-faq-list{
  border-top:1px solid var(--hair);
}
.pdp-faq-list details{
  border-bottom:1px solid var(--hair);
}
.pdp-faq-list summary{
  cursor:pointer;
  padding:22px 0;
  color:var(--black);
  font-family:var(--f-heading);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  list-style:none;
}
.pdp-faq-list summary::-webkit-details-marker{ display:none; }
.pdp-faq-list summary::after{
  content:"+";
  float:right;
  color:var(--muted);
  font-weight:500;
}
.pdp-faq-list details[open] summary::after{ content:"-"; }
.pdp-faq-list p{
  max-width:48rem;
  padding:0 0 22px;
  color:var(--ink-2);
  font-size:16px;
  line-height:1.62;
}
/* Trust band: derm authority + proof badges */
.pdp-trust{
  padding:clamp(56px,6vw,92px) 0;
  background:var(--cream-2);
  border-bottom:1px solid var(--hair);
}
.pdp-trust-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px);
  align-items:center;
}
.pdp-trust-quote{
  margin:0;
}
.pdp-trust-quote p{
  font-family:var(--f-heading);
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.32;
  letter-spacing:-.02em;
  color:var(--black);
}
.pdp-trust-quote footer{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.pdp-trust-quote .pdp-trust-name{
  font-weight:700;
  font-size:14px;
  color:var(--ink);
}
.pdp-trust-quote .pdp-trust-role{
  color:var(--muted);
  font-size:13px;
}
.pdp-trust-badges{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--hair);
}
.pdp-trust-badges li{
  display:grid;
  grid-template-columns:minmax(72px,auto) minmax(0,1fr);
  align-items:center;
  gap:20px;
  padding:18px 0;
  border-bottom:1px solid var(--hair);
}
.pdp-trust-badges strong{
  font-family:var(--f-heading);
  font-size:clamp(26px,2.6vw,34px);
  line-height:1;
  letter-spacing:-.04em;
  color:var(--black);
}
.pdp-trust-badges span{
  color:var(--ink-2);
  font-size:15px;
  line-height:1.5;
}
.pdp-close{
  padding:clamp(64px,8vw,108px) 0;
  background:var(--yellow);
  color:var(--black);
  text-align:center;
}
.pdp-close-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.pdp-close .pdp-section-label{ color:var(--black); }
.pdp-close h2{ max-width:16ch; }
.pdp-close-deck{
  max-width:46ch;
  color:#3A3705;
  font-size:clamp(16px,1.4vw,18px);
  line-height:1.55;
}
.pdp-close-action{
  display:grid;
  gap:14px;
  justify-items:center;
  width:100%;
  max-width:360px;
}
.pdp-close-action .pdp-primary{
  background:var(--black);
  color:var(--cream);
}
.pdp-close-action .pdp-primary:hover{ background:#000; }
.pdp-close-action p{
  min-height:20px;
  color:#5B5608;
  font-size:13px;
}
.pdp-close-trust{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 22px;
}
.pdp-close-trust li{
  display:flex;
  align-items:center;
  gap:7px;
  color:#3A3705;
  font-size:13px;
  font-weight:600;
}
.pdp-close-trust li::before{
  content:"";
  width:15px;
  height:15px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--black);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2 2 4.8-4.8' fill='none' stroke='%23F0E040' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:11px;
}

@media (max-width:1080px){
  .pdp-hero-grid,
  .pdp-editorial-grid,
  .pdp-ritual-grid,
  .pdp-compare-grid,
  .pdp-faq-grid,
  .pdp-trust-grid,
  .pdp-formula-head{
    grid-template-columns:1fr;
  }
  .pdp-formula-head .pdp-formula-note{
    max-width:46ch;
  }
  .pdp-hero{
    min-height:0;
    align-items:start;
  }
  .pdp-hero-art{
    min-height:0;
    order:-1;
  }
  .pdp-image-mat{
    min-height:auto;
  }
  .pdp-hero h1{
    max-width:12ch;
  }
  .pdp-formula-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pdp-formula-grid article:nth-child(odd){ border-left:0; }
  .pdp-formula-grid article:nth-child(n+3){ border-top:1px solid #2B2B25; }
}
@media (max-width:760px){
  .pdp-nav-links{ display:none; }
  .pdp-nav-toggle{ display:inline-flex; }
  .pdp-nav-mobile:not([hidden]){ display:flex; }
  .pdp-brand img{ width:100px; }
  .pdp-nav-in{ height:60px; }
  .pdp-nav-cta{
    min-height:40px;
    padding:9px 15px;
    font-size:13px;
  }
  .pdp-hero{
    padding-top:20px;
  }
  .pdp-hero-grid{
    gap:28px;
  }
  .pdp-image-mat{
    border-radius:10px;
    padding:10px;
  }
  .pdp-spec-strip{
    position:static;
    margin-top:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pdp-spec-strip span:nth-child(odd){ border-left:0; }
  .pdp-spec-strip span:nth-child(n+3){ border-top:1px solid rgba(15,15,15,.12); }
  .pdp-back{ margin-bottom:18px; }
  .pdp-hero h1{
    font-size:clamp(40px,11.5vw,52px);
    letter-spacing:-.044em;
  }
  .pdp-deck{
    font-size:17px;
  }
  .pdp-reserve{
    grid-template-columns:1fr;
    padding:16px;
  }
  .pdp-one-line-in{
    grid-template-columns:1fr 1fr;
  }
  .pdp-one-line span{
    border-top:1px solid rgba(15,15,15,.2);
  }
  .pdp-one-line span:nth-child(-n+2){ border-top:0; }
  .pdp-one-line span:nth-child(odd){ border-left:0; }
  .pdp-editorial,
  .pdp-formula,
  .pdp-ritual,
  .pdp-compare,
  .pdp-faq{
    padding:62px 0;
  }
  .pdp-editorial-image img{
    aspect-ratio:4/4.3;
  }
  .pdp-editorial-copy h2,
  .pdp-formula-head h2,
  .pdp-ritual h2,
  .pdp-compare-copy h2,
  .pdp-faq h2,
  .pdp-close h2{
    font-size:clamp(30px,8.5vw,38px);
  }
  .pdp-editorial-copy p:not(.pdp-section-label){
    font-size:16px;
  }
  .pdp-formula-head{
    display:block;
  }
  .pdp-formula-grid{
    grid-template-columns:1fr;
  }
  .pdp-formula-grid article,
  .pdp-formula-grid article:first-child,
  .pdp-formula-grid article:nth-child(odd){
    min-height:0;
    border-left:0;
    border-top:1px solid #2B2B25;
  }
  .pdp-formula-grid article:first-child{ border-top:0; }
  .pdp-formula-grid h3{
    margin-top:24px;
  }
  .pdp-formula-grid p{
    margin-top:18px;
  }
  .pdp-steps li,
  .pdp-use-table div{
    grid-template-columns:1fr;
    gap:8px;
  }
  .pdp-mini-pack{
    min-height:360px;
  }
  .pdp-mini-pack img{
    max-height:330px;
  }
}
@media (max-width:390px){
  .pdp-nav-in{ gap:8px; }
  .pdp-nav-actions{ gap:6px; }
  .pdp-nav-cta{ padding:9px 11px; font-size:12px; }
}
@media (max-width:420px){
  .pdp-hero h1{
    font-size:40px;
  }
  .pdp-primary{
    white-space:normal;
    text-align:center;
  }
  .pdp-one-line-in{
    grid-template-columns:1fr;
  }
  .pdp-one-line span,
  .pdp-one-line span:nth-child(-n+2){
    border-left:0;
    border-top:1px solid rgba(15,15,15,.2);
  }
  .pdp-one-line span:first-child{ border-top:0; }
}