/* ============================================================
   OOWIA - PRODUCT PAGE (product.css)  ?p=tee|hoodie|bodycon|tote
   Shared tokens, type, nav, buttons, footer live in public.css.
   This file carries only PDP-specific rules + tiny nav additions.
   ============================================================ */

/* --- additions on top of public.css --- */
header.nav{transition:transform .55s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent}
header.nav.solid{background:rgba(247,244,239,.82);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-color:var(--line)}
body.menu-open .nav-cta .btn-crimson{background:var(--crimson)}

/* ============================================================
   PDP-SPECIFIC - stacked gallery + buy box + blocks + modal
   ============================================================ */
.pdp{padding-top:calc(var(--navh) + clamp(16px,2.4vh,28px))}
.crumb{display:flex;align-items:center;gap:12px;margin-bottom:clamp(16px,2.2vw,26px);
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
  flex-wrap:wrap;row-gap:8px}
.crumb a{color:var(--ink-60);transition:color .3s;white-space:nowrap}@media(hover:hover){
.crumb a:hover{color:var(--crimson)}}
.crumb i{font-style:normal;opacity:.4;flex:none}
.crumb span{color:var(--ink);min-width:0}

.pdp-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(22px,3.2vw,56px);align-items:start}
/* gallery viewer: ONE fixed-height photo, never a stacked scroll */
.gal-col{position:sticky;top:calc(var(--navh) + 22px);min-width:0}
.gal-view{position:relative;border-radius:clamp(16px,2vw,24px);overflow:hidden;background:#e9e4dc;
  /* Full-column 4/5 frame: fills the grid column as before, height derived
     from the ratio so 4:5 images show with zero cropping. max-height keeps
     the buy-box CTAs in the first fold on short viewports (then only the
     bottom crops, top stays pinned). isolation keeps the in-photo chrome
     (flag/counter/thumbs) above the slides but below the fixed site nav. */
  width:100%;aspect-ratio:4/5;height:auto;
  min-height:300px;
  max-height:calc(100svh - var(--navh) - 110px);
  touch-action:pan-y;isolation:isolate;
  box-shadow:0 30px 60px -30px rgba(11,11,12,.25),0 10px 24px -12px rgba(11,11,12,.14)}
.gal-view::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.06)}
/* Grid-stacked slides (not absolute): every slide owns the same grid cell,
   so exactly one photo frame exists on mobile, thumbs/arrows switch slides
   in place via .on instead of extending the page into a long image list.
   Longhand offsets ride along with inset for older mobile WebViews. */
.gal-stage{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;display:grid}
.gitem{position:relative;grid-area:1/1;min-width:0;min-height:0;margin:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s;background:#e9e4dc;border-radius:inherit;overflow:hidden}
.gitem.on{opacity:1;visibility:visible;transition:opacity .45s ease;z-index:1}
.gitem.gi-vid{background:var(--ink)}
.gitem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* Colour variant photos (swapped into slide 0 by product.js) are not shot
   for the 4/5 hero frame, so cover crops most of them. Contain shows the
   whole image, letterboxed on the slide background when ratios differ.
   The hero keeps cover; product.js adds this class on swap and removes
   it in restoreHeroImage() when the hero comes back. */
.gitem.variant-fit img{object-fit:contain;object-position:50% 50%}
.gi-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;background:var(--ink);display:block}
.gi-idx{position:absolute;top:12px;right:12px;z-index:3;padding:7px 12px;border-radius:99px;
  font-family:"Inter Tight";font-weight:600;font-size:.68rem;letter-spacing:.14em;
  background:rgba(253,252,250,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink)}
.vid-badge{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:99px;background:rgba(11,11,12,.58);color:var(--ivory);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:"Inter Tight";font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.vid-badge svg{width:9px;height:9px;fill:#FF5570;animation:livePulse 1.6s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.gitem::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.06);border-radius:inherit;z-index:2}

/* buy box, compact so name + price + variants + BOTH ctas fit the first fold */
.buy{position:sticky;top:calc(var(--navh) + 22px);min-width:0}
.buy h1{font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1;margin-bottom:8px}
.p-tag{margin:0 0 12px;font-family:"Instrument Serif";font-style:italic;font-size:1.08rem;line-height:1.4;color:var(--ink-60)}
.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:14px}
.p-price{display:flex;align-items:baseline;gap:12px}
.pp-l{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-40)}
.p-price b{font-family:"Inter Tight";font-weight:600;font-size:clamp(1.7rem,2.4vw,2.3rem);letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}
.pp-note{margin:0;font-size:.72rem;color:var(--ink-40);text-align:right}
.variant{margin-bottom:14px}
.v-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.v-l{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40)}
.v-l b{color:var(--ink);font-weight:600}
.sc-link{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;color:var(--ink-60);
  padding:7px 13px;border:1px solid var(--line);border-radius:99px;background:var(--ivory-pure);
  transition:color .3s,border-color .3s,transform .3s var(--ease)}@media(hover:hover){
.sc-link:hover{color:var(--crimson);border-color:rgba(200,16,46,.35);transform:translateY(-1px)}}
.sc-link:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.sw{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--ink-15);cursor:pointer;
  padding:0;background:none;transition:transform .35s cubic-bezier(.34,1.45,.44,1)}
.sw i{position:absolute;inset:4px;border-radius:50%;display:block}@media(hover:hover){
.sw:hover{transform:scale(1.1)}}
.sw.on{border-color:var(--ink)}
.sw.on::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--crimson);
  animation:swRing .45s cubic-bezier(.34,1.45,.44,1)}
@keyframes swRing{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.sw:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
/* Colour tooltip: name + hex, instant on hover/focus/tap (no delay, no fade). */
.sw::before{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,0);
  padding:6px 10px;border-radius:99px;background:var(--ink);color:var(--ivory);font-family:"Inter Tight";
  font-size:.68rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;visibility:hidden;
  pointer-events:none;z-index:20;box-shadow:0 10px 24px -12px rgba(11,11,12,.45)}
@media(hover:hover){.sw:hover::before{opacity:1;visibility:visible}}
.sw:focus-visible::before,.sw:active::before{opacity:1;visibility:visible}
.sizes{display:flex;gap:8px;flex-wrap:wrap}
.sz{min-width:46px;padding:10px 14px;border:1px solid var(--line);border-radius:99px;background:var(--ivory-pure);
  font-family:"Inter Tight";font-weight:600;font-size:.84rem;color:var(--ink-60);text-align:center;cursor:pointer;
  transition:all .35s var(--ease)}@media(hover:hover){
.sz:hover{border-color:var(--ink-40);color:var(--ink);transform:translateY(-2px)}}
.sz.on{background:var(--ink);border-color:var(--ink);color:var(--ivory);transform:none;
  box-shadow:0 10px 22px -12px rgba(11,11,12,.5)}
.sz .zd{display:block;font-size:.56rem;font-weight:500;color:inherit;opacity:.65;letter-spacing:.06em}
.sz:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.micro{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:0}
.micro li{padding:6px 12px;border-radius:99px;border:1px solid var(--line);background:rgba(253,252,250,.7);
  font-size:.72rem;font-weight:500;color:var(--ink-60)}
.ctas{display:flex;flex-direction:column;gap:10px}
.ctas .btn{justify-content:center;width:100%;padding:15px 26px}
.meta-mini{margin:14px 0 0;font-size:.76rem;line-height:1.6;color:var(--ink-40);border-top:1px dashed var(--line);padding-top:12px}

/* blocks */
.blk{padding-top:clamp(64px,8vw,130px)}
.blk-head{margin-bottom:clamp(26px,3.4vw,48px)}
.blk-head .kicker{margin-bottom:12px}

/* fabric */
.fab{display:grid;grid-template-columns:1fr .9fr;gap:clamp(22px,3vw,56px);align-items:stretch}
/* No figure to show (product has no photo and no fabric swatch): let the
   specs take the full row instead of leaving an empty grid cell. */
.fab.no-fig{grid-template-columns:1fr}
.fab-main{min-width:0}
.fab-specs{border-top:2px solid var(--ink);align-self:start}
.fab-desc{margin:0 0 14px;font-size:.95rem;line-height:1.65;color:var(--ink-80);max-width:62ch;padding-top:16px}
.fab-row{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:16px;padding:16px 6px;border-bottom:1px solid var(--line);
  transition:background .3s}@media(hover:hover){
.fab-row:hover{background:var(--ivory-pure)}}
.fab-row span{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-40);align-self:center}
.fab-row b{font-family:"Inter Tight";font-weight:600;font-size:1.02rem;letter-spacing:-.02em}
.fab-fig{position:relative;border-radius:clamp(16px,2vw,24px);overflow:hidden;min-height:320px;background:#e9e4dc;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease) .1s;
  box-shadow:0 30px 60px -30px rgba(11,11,12,.35),0 10px 24px -12px rgba(11,11,12,.18)}
/* Inset hairline mirrors .gitem::after: defines pale swatches against the ivory bg. */
.fab-fig::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);border-radius:inherit}
/* Parent-driven reveal: a self-clipped target reports zero intersection to
   IntersectionObserver, so observing .fab-fig itself deadlocks (it can never
   earn .is-in). The unclipped .fab parent carries data-r instead. */
.fab-fig.is-in,.fab.is-in .fab-fig{clip-path:inset(0 0 0% 0)}
.fab-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.fab-cap{position:absolute;left:12px;bottom:12px;z-index:2;padding:8px 14px;border-radius:99px;
  background:rgba(253,252,250,.9);font-size:.66rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* fulfilment timeline */
.ftl{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.ftl::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink-08)}
.ftl::after{content:"";position:absolute;left:0;top:7px;height:2px;width:100%;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .3s}
.ftl.is-in::after{transform:scaleX(1)}
.ftl-i{position:relative;padding-top:30px}
.ftl-i::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--ivory-pure);
  border:2.5px solid var(--crimson);transition:transform .5s cubic-bezier(.34,1.45,.44,1);transition-delay:var(--d,0ms)}
.ftl-i:not(.is-in)::before{transform:scale(0)}
.ftl-i b{display:block;font-family:"Inter Tight";font-weight:600;font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:-.03em;margin-bottom:5px}
.ftl-i span{font-size:.82rem;color:var(--ink-60);line-height:1.5;display:block;max-width:22ch}
.ftl-note{margin:clamp(24px,3vw,40px) 0 0;padding:13px 18px;border-radius:14px;background:var(--crimson-soft);
  border:1px solid rgba(200,16,46,.2);font-size:.84rem;color:var(--ink-80);max-width:72ch}
.ftl-note b{font-weight:600;color:var(--crimson)}

/* print option cards: fill the row however many methods exist */
.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(10px,1.2vw,18px)}
.pcard2{position:relative;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--ivory-pure);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}@media(hover:hover){
.pcard2:hover{transform:translateY(-4px);border-color:rgba(200,16,46,.4);box-shadow:0 22px 44px -26px rgba(200,16,46,.35)}}
.pcard2 h4{display:flex;align-items:center;gap:9px;font-family:"Inter Tight";font-weight:600;font-size:1rem;letter-spacing:-.03em}
.pcard2 .pm{font-family:"Instrument Serif";font-style:italic;font-size:1.05rem;color:var(--crimson)}
.pcard2 p{margin:8px 0 0;font-size:.78rem;line-height:1.5;color:var(--ink-60)}
.pcard2 .ok-ic{width:22px;height:22px;border-radius:50%;background:var(--crimson-soft);color:var(--crimson);
  display:grid;place-items:center;position:absolute;top:16px;right:16px}
.pcard2.off{opacity:.42;filter:saturate(.3)}@media(hover:hover){
.pcard2.off:hover{transform:none;border-color:var(--line);box-shadow:none}}
.pcard2.off .ok-ic{background:var(--ink-08);color:var(--ink-40)}
.pcard2 .na{display:inline-block;margin-top:10px;font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-40)}

/* write-up: text + facts side by side so the block owns the full width */
.write-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(22px,3vw,56px);align-items:start}
.write{max-width:72ch;font-size:1.02rem;line-height:1.75;color:var(--ink-80)}
.write p{margin:0 0 1.2em}
.write p:first-child::first-letter{font-family:"Instrument Serif";font-style:italic;font-size:2.9em;line-height:.78;
  float:left;padding:.06em .12em 0 0;color:var(--crimson)}
.write em{font-family:"Instrument Serif";font-style:italic;font-size:1.06em}
.facts{position:sticky;top:calc(var(--navh) + 22px);border:1px solid var(--line);border-radius:20px;
  background:var(--ink);color:var(--ivory);padding:clamp(22px,2.4vw,32px)}
.facts h3{font-size:clamp(1.5rem,2vw,2rem);margin-bottom:18px}
.facts h3::after{content:".";color:var(--crimson)}
.facts ul{list-style:none;margin:0;padding:0}
.facts li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0;border-top:1px solid rgba(247,244,239,.16)}
.facts li span{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,244,239,.55);flex:none}
.facts li b{font-family:"Inter Tight";font-weight:600;font-size:.95rem;letter-spacing:-.01em;text-align:right}
.facts-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:13px 22px;border-radius:99px;
  background:var(--crimson);color:#fff;font-family:"Inter Tight";font-weight:600;font-size:.88rem;
  transition:transform .35s var(--ease),background .3s}@media(hover:hover){
.facts-link:hover{background:#a50d26;transform:translateY(-2px)}}
.facts-link:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* related */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px)}
.rcard{position:relative;display:block;border-radius:18px;overflow:hidden;background:#ece7df;aspect-ratio:4/5;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}@media(hover:hover){
.rcard:hover{transform:translateY(-5px);box-shadow:0 30px 56px -32px rgba(11,11,12,.5)}}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform 1.1s var(--ease)}@media(hover:hover){
.rcard:hover img{transform:scale(1.07)}}
.rcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.75),rgba(11,11,12,.04) 55%)}
.rcard .rmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.4vw,20px);color:var(--ivory);
  display:flex;align-items:flex-end;gap:10px}
.rcard .rt{min-width:0}
.rcard .rname{display:block;font-family:"Inter Tight";font-weight:600;font-size:clamp(.98rem,1.24vw,1.18rem);
  letter-spacing:-.04em;line-height:1.12;transition:transform .5s var(--ease)}@media(hover:hover){
.rcard:hover .rname{transform:translateY(-2px)}}
.rcard .rsub{display:block;font-size:.7rem;color:rgba(247,244,239,.62);margin-top:3px;letter-spacing:.02em}
.rcard .rprice{margin-left:auto;flex:none;font-family:"Inter Tight";font-weight:600;font-size:1rem}
.rcard .rprice i{display:block;font-style:normal;font-family:"Inter";font-size:.56rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(247,244,239,.55);margin-bottom:2px;text-align:right}

/* size chart modal */
.modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
  visibility:hidden;pointer-events:none;transition:visibility 0s .5s}
.modal.open{visibility:visible;pointer-events:auto;transition:visibility 0s 0s}
.modal-bg{position:absolute;inset:0;background:rgba(11,11,12,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .45s}
.modal.open .modal-bg{opacity:1}
.modal-panel{position:relative;width:min(1180px,100%);max-height:min(84vh,720px);overflow-y:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  background:var(--ivory-pure);border-radius:22px;padding:clamp(22px,3vw,34px);
  opacity:0;transform:translateY(34px) scale(.96);transition:opacity .4s,transform .55s var(--ease)}
.modal-panel::-webkit-scrollbar{display:none}
.modal.open .modal-panel{opacity:1;transform:none}
.mp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.mp-head h3{font-size:1.6rem}
.sc-sub{margin:6px 0 0;font-size:.78rem;color:var(--ink-40)}
.mp-x{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-60);transition:all .35s var(--ease)}@media(hover:hover){
.mp-x:hover{background:var(--ink);border-color:var(--ink);color:var(--ivory);transform:rotate(90deg)}}
.sc-tools{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.units{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--ivory)}
.unit{padding:7px 18px;border-radius:99px;font-family:"Inter Tight";font-weight:600;font-size:.78rem;color:var(--ink-60);
  transition:all .3s var(--ease)}
.unit.on{background:var(--ink);color:var(--ivory);box-shadow:0 6px 14px -8px rgba(11,11,12,.5)}
.unit:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.sc-sel{margin:0;font-size:.78rem;color:var(--ink-60)}
.sc-sel b{color:var(--crimson);font-weight:600}
.sc-table{max-height:min(46vh,420px);overflow:auto;scrollbar-width:none;-ms-overflow-style:none;border:1px solid var(--line);border-radius:14px}
.sc-table table{min-width:100%}
.sc-table::-webkit-scrollbar{display:none}
.sc-table table{width:100%;border-collapse:separate;border-spacing:0}
.sc-table thead th{position:sticky;top:0;z-index:2;background:var(--ink);color:var(--ivory);
  font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:13px 14px;text-align:left}
.sc-table thead th:first-child{border-radius:0}
.sc-table tbody th[scope="row"]{font-family:"Inter Tight";font-weight:600;font-size:.95rem;text-align:left;
  padding:10px 12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-table tbody td{padding:10px 12px;font-size:.92rem;font-variant-numeric:tabular-nums;border-top:1px solid var(--line)}
.sc-table tbody tr.sel th[scope="row"],.sc-table tbody tr.sel td{background:var(--crimson-soft)}
.sc-table tbody tr.sel th[scope="row"]{color:var(--crimson);box-shadow:inset 3px 0 0 var(--crimson)}
.sc-table thead th.sel{background:var(--crimson);color:var(--ivory)}
.sc-table tbody td.sel{background:var(--crimson-soft)}
@media(hover:hover){
.sc-table tbody tr:hover td,.sc-table tbody tr:hover th[scope="row"]{background:var(--ivory)}}
.sc-foot{margin:18px 0 0;font-size:.76rem;color:var(--ink-40);line-height:1.55}

/* responsive */
@media(max-width:900px){
  .pdp{padding-top:calc(var(--navh) + 12px)}
  .pdp-grid{grid-template-columns:1fr;gap:18px}
  .gal-col,.gal-single .gal-col{position:static;top:auto;min-width:0}
  /* Mobile viewer: one fixed 4/5 frame. The grid cell keeps every slide
     overlaid even if aspect-ratio quirks on old WebViews, never a list. */
  .gal-view{width:100%;aspect-ratio:4/5;height:auto;max-height:none;min-height:min(112vw,440px)}
  .gal-stage{display:grid}
  .gitem{grid-area:1/1}
  .buy{position:static;margin-top:2px}
  .fab{grid-template-columns:1fr}
  .fab-fig{min-height:240px}
  .ftl{grid-template-columns:1fr 1fr;gap:24px 18px}
  .ftl::before,.ftl::after{display:none}
  .ftl-i{padding-top:0;padding-left:28px}
  .ftl-i::before{left:0;top:4px}
  .pcards{grid-template-columns:1fr 1fr}
  .rel{grid-template-columns:1fr 1fr}
  .write-grid{grid-template-columns:1fr}
  .facts{position:static}
  .faq-sec .faq{grid-template-columns:1fr}
}
@media(max-width:520px){
  .pcards{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr}
  /* Small phones: tighter crumb that never breaks a link mid-word, and
     in-photo chrome pinned to its own corner (counter top-right, expand
     bottom-right) so nothing overlaps. */
  .crumb{font-size:.62rem;letter-spacing:.12em;gap:8px;margin-bottom:14px}
  .gi-idx{top:8px;right:8px;font-size:.62rem;padding:6px 10px}
  .gal-nav{padding:0 8px}
  .gal-arrow{width:34px;height:34px}
  .gthumbs{left:8px;bottom:8px;max-width:calc(100% - 64px);gap:6px}
  .gthumb{width:40px;height:50px;border-radius:8px}
  .gal-expand{top:auto;right:8px;bottom:8px;width:36px;height:36px}
  .buy h1{font-size:clamp(1.65rem,8.4vw,2rem)}
  .p-tag{font-size:1rem}
}

/* ============================================================
   PDP REWORK - media-first gallery, buy-box aids, FAQ, sticky ATC
   ============================================================ */
section[id],div[id]{scroll-margin-top:calc(var(--navh) + 12px)}

/* desktop sticky hero from .gal-col base above; mobile reset below (after base) */
#galHeroImg{transition:opacity .35s ease}
#galHeroImg.swap{opacity:0}
/* in-photo thumbnail dock: thumbs sit INSIDE the main photo with no band,
   so they read as floating tiles over the image, never a translucent strip */
.gthumbs{position:absolute;left:12px;bottom:12px;z-index:4;display:flex;gap:8px;max-width:calc(100% - 80px);padding:6px;overflow-x:auto;scrollbar-width:none}
.gthumbs::-webkit-scrollbar{display:none}
.gthumb{position:relative;flex:none;width:46px;height:56px;border-radius:10px;overflow:hidden;padding:0;
  border:2px solid rgba(253,252,250,.9);background:#e9e4dc;cursor:pointer;opacity:.9;filter:saturate(.85);
  box-shadow:0 4px 14px -4px rgba(11,11,12,.45);
  transition:opacity .3s,border-color .3s,box-shadow .3s,transform .3s var(--ease),filter .3s}
.gthumb img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.gthumb.on{opacity:1;filter:none;border-color:#fff;box-shadow:0 0 0 2px var(--crimson),0 6px 18px -6px rgba(11,11,12,.5);transform:translateY(-2px)}
.gthumb-vid{display:grid;place-items:center;width:100%;height:100%;background:var(--ink);color:var(--ivory)}
@media(hover:hover){
.gthumb:hover{opacity:1;transform:translateY(-2px)}}
.gthumb:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* prev/next arrows overlaid on the photo edges */
.gal-nav{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.gal-arrow{pointer-events:auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(253,252,250,.9);color:var(--ink);border:1px solid transparent;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .3s var(--ease),background .3s}
@media(hover:hover){
.gal-arrow:hover{transform:scale(1.08);background:#fff}}
.gal-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gal-view:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
/* fullscreen trigger (gallery box only): JS-gated zoom cursor + expand pill */
.gal-view.js-zoom .gal-stage{cursor:zoom-in}
.gal-expand{position:absolute;top:auto;right:12px;bottom:12px;z-index:4;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(11,11,12,.48);color:#fff;border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s var(--ease),background .3s}
@media(hover:hover){
.gal-expand:hover{transform:scale(1.08);background:rgba(11,11,12,.7)}}
.gal-expand:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* gallery lightbox: whole image, letterboxed (contain, never cropped) */
/* Panel fills the modal's padded grid area (like .modal-panel): a vw-based
   width overshoots the content box on phones (94vw > 100vw - 40px padding)
   and the implicit grid column start-places the overflow, shifting the
   whole viewer right with the close button clipped at the screen edge. */
.gal-lb-panel{position:relative;width:min(1100px,100%);height:min(88svh,880px);max-height:100%;display:grid;place-items:center;
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .4s,transform .55s var(--ease);
  /* swipe between slides: horizontal drag follows the finger, vertical stays browser-handled */
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.modal.open .gal-lb-panel{opacity:1;transform:none}
.gal-lb-panel.dragging{cursor:grabbing}
.gal-lb-panel img,.gal-lb-panel video{max-width:100%;max-height:min(88svh,880px);width:auto;height:auto;
  object-fit:contain;border-radius:18px;background:#0B0B0C;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.gal-lb-panel img{touch-action:pan-y;cursor:grab;will-change:transform;
  -webkit-user-drag:none;-webkit-touch-callout:none}
.gal-lb-panel.dragging img{cursor:grabbing;transition:none}
.gal-lb-count{top:0;right:44px}
.gal-lb-x{position:absolute;top:0;right:0;background:rgba(253,252,250,.12);border-color:rgba(253,252,250,.3);color:var(--ivory)}
@media(hover:hover){
.gal-lb-x:hover{background:var(--ivory);border-color:var(--ivory);color:var(--ink);transform:none}}
.gal-lb-prev{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.gal-lb-next{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media(hover:hover){
.gal-lb-prev:hover{transform:translateY(-50%) scale(1.08)}
.gal-lb-next:hover{transform:translateY(-50%) scale(1.08)}}
@media(max-width:520px){
  .gal-lb-prev{left:-4px}
  .gal-lb-next{right:-4px}
}
/* short desktop viewports (1366x768): keep the taller gallery, but give the
   buy column air instead of squeeze, roomier top, wider rhythm, CTAs riding
   low near the fold instead of bunched up under the price. */
@media(min-width:901px) and (max-height:820px){
  .pdp{padding-top:calc(var(--navh) + 20px)}
  .crumb{margin-bottom:16px}
  .gal-view{max-height:calc(100svh - var(--navh) - 56px)}
  .buy h1{font-size:clamp(1.55rem,2.2vw,2rem);margin-bottom:10px}
  .p-tag{margin-bottom:16px}
  .price-row{padding:12px 0;margin-bottom:18px}
  .variant{margin-bottom:20px}
  .v-head{margin-bottom:14px}
  .fit{margin-top:12px}
  .micro{margin-bottom:20px}
  .ctas{gap:12px}
  .ctas .btn{padding:13px 22px}
  .meta-mini{margin-top:14px;padding-top:14px}
  .blk{padding-top:clamp(48px,7vh,72px)}
  .blk-head{margin-bottom:clamp(20px,3.4vh,30px)}
  .faq-sec{padding-bottom:clamp(56px,8vh,80px)}
}

/* video: lazy (data-src) placeholder until in view */
.gi-vid video{background:var(--ink)}

/* buy box aids */
.buy .p-price-calc{font-family:"Inter Tight";font-weight:600;font-size:1.15rem;letter-spacing:-.02em;line-height:1.25}
.v-count{font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.fit{margin-top:14px;border:1px solid var(--line);border-radius:14px;background:var(--ivory-pure);overflow:hidden}
.fit summary{padding:12px 16px;font-size:.8rem;color:var(--ink-60);cursor:pointer;list-style:none}
.fit summary::-webkit-details-marker{display:none}
.fit summary b{color:var(--crimson);font-weight:600}
.fit summary:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.fit-table{padding:0 16px 14px;overflow-x:auto}
.fit-table table{width:100%;border-collapse:collapse;min-width:100%}
.fit-table thead th.sel{color:var(--crimson)}
.fit-table tbody td.sel{background:var(--crimson-soft)}
.fit-table th,.fit-table td{padding:8px 8px;text-align:left;border-bottom:1px solid var(--line);font-size:.8rem}
.fit-table th{font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40)}
.fit-table td:first-child{font-family:"Inter Tight";font-weight:600}
.fit-table tbody th[scope="row"]{font-family:"Inter Tight";font-size:.8rem;font-weight:600;letter-spacing:normal;text-transform:none;color:var(--ink)}
.fit-more{margin:10px 0 0;font-size:.74rem;color:var(--ink-40)}
.fit-full{background:none;border:0;padding:0;font-size:inherit;font-weight:600;color:var(--crimson);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linklike{background:none;border:0;padding:0;font:inherit;color:var(--crimson);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* FAQ: two columns on desktop, breathing room above the footer; PDP variant scoped */
.faq-sec{padding-bottom:clamp(72px,9vw,140px)}
.faq-sec .faq{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
.faq-i{border:1px solid var(--line);border-radius:16px;background:var(--ivory-pure);overflow:hidden;
  transition:border-color .3s}
.faq-i[open]{border-color:rgba(200,16,46,.35)}
.faq-i summary{padding:18px 20px;font-family:"Inter Tight";font-weight:600;font-size:1rem;letter-spacing:-.02em;
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";margin-left:auto;flex:none;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;font-weight:400;color:var(--crimson);
  transition:transform .35s var(--ease)}
.faq-i[open] summary::after{transform:rotate(45deg)}
.faq-i summary:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
.faq-i p{margin:0;padding:0 20px 18px;font-size:.9rem;line-height:1.65;color:var(--ink-60);max-width:62ch}
.faq-i p b{color:var(--ink)}

/* sticky buy bar: mobile only (desktop keeps the sticky buy box) */
.sticky-atc{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:800;
  display:none;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:18px;
  background:rgba(253,252,250,.92);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 24px 48px -20px rgba(11,11,12,.45);
  transform:translateY(140%);transition:transform .5s var(--ease)}
.sticky-atc.show{transform:none}
.sa-thumb{width:44px;height:54px;object-fit:cover;object-position:50% 0;border-radius:10px;flex:none;background:#e9e4dc}
.sa-meta{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.sa-meta b{font-family:"Inter Tight";font-weight:600;font-size:.86rem;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-meta i{font-style:normal;font-size:.72rem;color:var(--ink-60)}
.sticky-atc .sa-cta{flex:none;padding:12px 20px;font-size:.85rem}
.sa-cta span{pointer-events:none}
.sa-price{flex:none;font-size:.78rem;font-weight:600;color:var(--ink-60);text-decoration:underline;text-underline-offset:3px;padding:10px 6px}
@media(max-width:900px){
  .sticky-atc{display:flex}
  .gal-col,.gal-single .gal-col{position:static;top:auto}
}

/* empty related keeps JS id contract without rendering a hollow block */
.rel-empty{display:none}

@media(prefers-reduced-motion:reduce){
  #galHeroImg{transition:none}
  .sticky-atc{transition:none}
  .faq-i summary::after{transition:none}
}