/* VIVA SCENTA — product pages (build-pdp.py). Buy rail + accordion stack, round 3. Inter only; headline = var(--head).
   Motion law (relaxed 2026-09-29): transform/opacity only, ≤400ms ease-out, all inside the no-preference block at
   the end, with a reduce override. Colours via tokens only. Pairs with site.css (.pdp-hero grid, .pdp-sticky, .meter,
   .card, .trust, .faq-item). */
main.pdp{padding:0 0 var(--s7)}
main.pdp .ps{padding:0}
.pdp-body{gap:var(--s5)}
.pdp-note{color:var(--ink-soft);font-size:var(--fs-small)}

/* ── fold 1: gallery box (sticky, same height as the rail up to one viewport) + rail (scrolls) ── */
.pdp-hero{max-width:calc(var(--max-w) + 2*var(--pad-x));margin:0 auto;--pdp-top:4.5rem}
.pdp-gcol{min-width:0}
.pdp-gallery{display:flex;flex-direction:column;gap:.75rem}
.pdp-stage{position:relative;flex:1;min-height:0;aspect-ratio:3/4;background:var(--surface-2);border:0.0625rem solid var(--line);border-radius:16px;overflow:hidden}
.pdp-stage .slide{position:absolute;inset:0;margin:0;padding:1rem;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
.pdp-stage .slide.is-on{opacity:1;pointer-events:auto}
.pdp-gallery .slide img{width:auto;max-width:100%;height:100%;aspect-ratio:auto;object-fit:contain;border:0;background:transparent;border-radius:12px}
.pdp-stage .crop{height:100%;aspect-ratio:3/4;max-width:100%;overflow:hidden;border-radius:12px}
.pdp-stage .crop img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.5)}   /* CSS close-crop of the flat lay, no new asset */
.pdp-stage .boxwrap{height:100%;aspect-ratio:3/4;max-width:100%;background:var(--bg);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:2rem}
.pdp-stage .boxwrap img{height:auto;max-height:100%;width:100%}
/* proof card slide (HTML, not an image) */
.proofcard{background:var(--bg);border-radius:16px;box-shadow:0 12px 32px rgba(5,5,5,.10);padding:2.25rem 2rem;width:min(22rem,100%);text-align:left}
.proofcard .eyebrow{margin-bottom:.75rem}
.proof-n{font-weight:700;font-size:4.5rem;line-height:1;color:var(--head);letter-spacing:-.03em}
.proof-l{font-size:1rem;color:var(--ink-deep);margin:.35rem 0 1.25rem}
.proofcard ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:var(--fs-small);color:var(--ink);border-top:0.0625rem solid var(--line);padding-top:1rem}
.pdp-thumbs{flex-wrap:wrap}
.pdp-thumbs .thumb{padding:0;border:none;background:none;cursor:pointer;width:3.75rem;height:3.75rem;border-radius:8px;overflow:hidden}
.pdp-thumbs .thumb img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border:0.0625rem solid var(--line);border-radius:8px;background:var(--surface-2)}
.pdp-thumbs .thumb.is-active img,.pdp-thumbs .thumb.is-active .thumb-proof-n{border-color:var(--h2)}
.pdp-thumbs .thumb .crop{height:100%;aspect-ratio:auto}
.pdp-thumbs .thumb .boxwrap{padding:.4rem;aspect-ratio:auto}
.thumb-proof-n{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:0.0625rem solid var(--line);border-radius:8px;background:var(--bg);color:var(--head);font-weight:700;font-size:1.1rem}
.pdp-buy{position:static;gap:.75rem}
.pdp-name{font-family:var(--font-body);font-weight:600;color:var(--head);font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.1;letter-spacing:-.01em}
.pdp-pitch{font-size:1rem;line-height:1.6;color:var(--ink)}
.pdp-rating{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-small);color:var(--ink-soft);text-decoration:underline;text-underline-offset:.15em}
.pdp-rating:hover{color:var(--h2)}
.pdp-proof{font-size:var(--fs-small);color:var(--ink-deep);border-left:0.0625rem solid var(--h2);padding-left:.75rem}
.pdp-price{font-size:1.5rem;display:flex;align-items:center;gap:.4rem}
.pdp-off{font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--on-brand);background:var(--brand);padding:.2rem .5rem;border-radius:999px;line-height:1.2}
.pdp-offer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--fs-small);color:var(--ink)}
.pdp-offer .pill{border:0.0625rem solid var(--line);padding:.3rem .65rem;line-height:1.3}
.pdp-offer .pill:hover{border-color:var(--h2);color:var(--h2)}
.pdp-offer a{color:var(--h2);text-decoration:underline;text-underline-offset:.15em;margin-left:.25rem}
.pdp-ctas{display:flex;gap:.625rem;width:100%}
.pdp-ctas .cta{flex:1;text-align:center}
.pdp-buynow{width:100%;text-align:center}
.pdp-qty{display:inline-flex;align-items:center;gap:.5rem;border:0.0625rem solid var(--line);padding:0 .75rem;min-height:44px;
  font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.pdp-qty input{width:2.75rem;border:none;font:inherit;font-size:16px;color:var(--ink-deep);text-align:center;background:none;letter-spacing:0}   /* 16px = iOS no-zoom floor */
.pdp-delivery{font-size:var(--fs-small);color:var(--ink);line-height:1.6}
.stock{border:0.0625rem solid var(--line);padding:.6rem .8rem}

/* assurance rows */
.pv-assure{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;width:100%;
  padding:var(--s2) 0;border-top:0.0625rem solid var(--line);border-bottom:0.0625rem solid var(--line)}
.pv-assure li{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-small);color:var(--ink);line-height:1.4}
.pv-assure svg{flex:none;width:20px;height:20px;stroke:var(--h2);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* accordion stack — native <details>, no JS */
.pv-acc{width:100%}
.pv-acc-item{border-bottom:0.0625rem solid var(--line)}
.pv-acc-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;min-height:44px;padding:.75rem 0;
  font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--ink-deep);cursor:pointer;list-style:none}
.pv-acc-h::-webkit-details-marker{display:none}
.pv-acc-h:hover{color:var(--h2)}
/* the + is drawn (two hairlines) so it can rotate 45° into an × on open */
.pv-acc-x{position:relative;flex:none;width:.75rem;height:.75rem}
.pv-acc-x::before,.pv-acc-x::after{content:"";position:absolute;background:var(--ink-soft);left:50%;top:50%}
.pv-acc-x::before{width:100%;height:0.0625rem;transform:translate(-50%,-50%)}
.pv-acc-x::after{width:0.0625rem;height:100%;transform:translate(-50%,-50%)}
.pv-acc-item[open] > .pv-acc-h .pv-acc-x{transform:rotate(45deg)}
.pv-acc-inner{font-family:var(--font-body);font-size:.9rem;line-height:1.75;color:var(--ink);padding:0 0 1rem;display:flex;flex-direction:column;gap:.75rem}
.pv-acc-inner ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.pv-acc-inner a{color:var(--h2);text-decoration:underline;text-underline-offset:.15em}
.pv-acc-inner table{font-size:.85rem}
.pv-acc2-item{border-top:0.0625rem solid var(--line);margin-left:1rem;font-size:.85rem}
.pv-acc2-item summary{cursor:pointer;list-style:none;min-height:44px;padding:.6rem 0;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pv-acc2-item summary::-webkit-details-marker{display:none}
.pv-acc2-item summary::after{content:"+";font-weight:400;color:var(--ink-soft)}
.pv-acc2-item[open] summary::after{content:"−"}
.pv-acc2-item summary:hover{color:var(--h2)}
.pv-acc2-item .faq-a{padding:0 0 .8rem}

/* ── mobile sticky ATC (layout in site.css; here the room for it) ── */
.pdp-sticky .price{font-size:1.05rem}
.pdp-sticky .cta{flex:1;text-align:center}
@media (max-width:53.75rem){main.pdp{padding-bottom:6.5rem}}

/* ── visual blocks A–C: soft cards ── */
.vcard{width:100%;background:var(--surface-2);border:0.0625rem solid var(--line);border-radius:16px;padding:1.1rem 1.15rem 1.15rem;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.9rem}
.vcard-h{font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--head);line-height:1.3}
/* A · accords: one rounded bar per accord, label inside-left */
.acc-bars{display:flex;flex-direction:column;gap:.5rem}
.acc-bar{width:var(--w);background:var(--c);color:var(--on-brand);border-radius:999px;padding:.45rem .9rem;font-size:var(--fs-small);font-weight:600;
  transform-origin:left center;white-space:nowrap}
.acc-bar.ink{color:var(--ink-deep)}
/* B · profile facts */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem}
.fact{display:flex;gap:.6rem;align-items:flex-start}
.fact svg{flex:none;width:20px;height:20px;stroke:var(--h2);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-top:.1rem}
.fact dt{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.fact dd{font-size:var(--fs-small);color:var(--ink-deep);font-weight:600;line-height:1.5;display:flex;flex-wrap:wrap;gap:.3rem}
.chip{border:0.0625rem solid var(--line);background:var(--bg);padding:.1rem .5rem;border-radius:999px;font-weight:500}
/* C · notes pyramid with ingredient tiles. Classes are .ingr / .ingr-ph / .ingrs on purpose: site.css owns .tile/.tiles
   (home "Sets" tiles, padding 2rem) and that padding zeroed a 64px image's content box — blank white squares. */
.notes-tier h3{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-bottom:.5rem}
.ingrs{display:flex;flex-wrap:wrap;gap:.75rem}
.note{width:64px;text-align:center;margin:0}
.ingr,.ingr-ph{width:64px;height:64px;padding:0;border-radius:14px;border:0.0625rem solid var(--line);box-shadow:var(--shadow-card);background:var(--bg)}
img.ingr{display:block;object-fit:cover;object-position:center;aspect-ratio:auto}
.ingr-ph{display:flex;align-items:center;justify-content:center;background:var(--tint,var(--surface-2));color:var(--h2);font-weight:600;font-size:1.4rem}
.note figcaption{font-size:.8rem;line-height:1.3;margin-top:.4rem;color:var(--ink)}
.accords b,.pv-acc-inner p > b:first-child{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);font-weight:500;margin-right:.5rem}

/* ── other accordion contents ── */
.wear{max-width:12rem;text-align:center}
.wear img{border:0.0625rem solid var(--line);aspect-ratio:1;width:100%;height:auto}
.wear figcaption{margin-top:.5rem;font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft)}
.journey{list-style:none;counter-reset:step;display:flex;flex-direction:column}
.journey li{position:relative;padding:.5rem 0 .5rem 2rem;border-left:0.0625rem solid var(--line)}
.journey li::before{counter-increment:step;content:counter(step, decimal-leading-zero);position:absolute;left:-.55rem;top:.75rem;
  background:var(--bg);color:var(--h2);font-size:var(--fs-label);letter-spacing:.05em;padding:0 .2rem;font-weight:600}
.pdp-dl{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.pdp-dl > div{border:0.0625rem solid var(--line);padding:.75rem 1rem}
.pdp-dl dt{font-size:var(--fs-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem}
.pdp-dl dd{font-weight:600;color:var(--ink-deep);line-height:1.5}
.promise{background:var(--tint,var(--surface-2));border:0.0625rem solid var(--line);padding:var(--s2) var(--s3)}
.inside{list-style:none;display:flex;flex-direction:column;padding:0}
.inside li{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"sw name" "sw role" "sw notes";column-gap:.75rem;
  align-items:start;padding:.6rem 0;border-bottom:0.0625rem solid var(--line)}
.swatch{grid-area:sw;width:6px;height:6px;display:block;margin-top:.6rem}
.inside b{grid-area:name;font-weight:600;color:var(--ink-deep)}
.inside-role{grid-area:role;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.inside-notes{grid-area:notes;font-size:var(--fs-small)}

/* ── fold 2: Top Note Capture · Heart Note Bridge · Base Note Arrival ── */
.pdp-notecards{display:grid;grid-template-columns:1fr;gap:1rem;max-width:calc(var(--max-w) + 2*var(--pad-x));margin:0 auto;padding:0 var(--pad-x)}
.ncard{background:var(--bg);border:0.0625rem solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgba(5,5,5,.10);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:1rem}
.ncard h2{font-family:var(--font-body);font-weight:600;font-size:1.05rem;color:var(--head);line-height:1.3}
.ntiles{display:flex;flex-wrap:wrap;gap:.9rem}
.ntile{width:56px;text-align:center;margin:0}
.ntile .ingr,.ntile .ingr-ph{width:56px;height:56px;border-radius:12px}
.ntile figcaption{font-size:.75rem;line-height:1.3;margin-top:.35rem;color:var(--ink)}
.ncard p{font-size:var(--fs-small);line-height:1.7;color:var(--ink)}

/* ── below fold 1: reviews · pair · trust ── */
.pdp-pair{padding:0 var(--pad-x);max-width:calc(var(--max-w) + 2*var(--pad-x));margin:var(--s6) auto 0;width:100%}
.pdp-pair .cards{margin-top:var(--s2)}
main.pdp .trustbar{margin-top:var(--s6)}

/* ── wider screens ── */
@media (min-width:53.76rem){
  /* the gallery column stretches to the rail's height; the box inside sticks and is capped at one viewport,
     so its bottom meets the rail's bottom when the rail fits, and stays in view while a taller rail scrolls */
  .pdp-hero{align-items:stretch}
  .pdp-gcol{align-self:stretch;container-type:inline-size}
  /* height = the rail's, capped at one viewport AND at 1.45× the column width (a tall window must not stretch a 3:4 flat lay) */
  .pdp-gallery{position:sticky;top:var(--pdp-top);height:min(100%,calc(100vh - var(--pdp-top) - 1rem),145cqw)}
  .pdp-stage{aspect-ratio:auto}
  .pdp-thumbs .thumb{width:4.5rem;height:4.5rem}
  .pdp-notecards{grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:var(--s5)}
}
@media (max-width:40rem){.pdp-dl{grid-template-columns:1fr}}

/* ── micro-motion: transform/opacity only, ≤400ms ease-out; nothing moves for reduce ── */
@media (prefers-reduced-motion: no-preference){
  /* CTA + card lifts, accordion rise: motion.css (site-wide). Here only the PDP-specific pieces. */
  .pdp-stage .slide{transition:opacity var(--dur-2) ease}   /* gallery crossfade, 300ms */
  .ncard{transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-3) var(--ease-out),box-shadow var(--dur-2) ease}   /* fold-2 rise: .rv/.rv-in stagger from motion.css */
  .ncard:hover{transform:translateY(-4px)}
  .pv-acc-x{transition:transform .3s ease-out}
  .pdp-offer .pill,.pdp-thumbs img,.pv-acc-h{transition:color .2s ease-out,border-color .2s ease-out}
  .pdp-rating{animation:vs-rise .4s var(--ease-out)}
  .acc-bar{animation:acc-grow .4s ease-out}   /* bars grow from 0 on first paint */
  @keyframes acc-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}