/* =====================================================================
   PRODUCT PAGE (/shop/<slug>) · ported from static product.html
   .pdp            orange product band (extends .hero-band: dots, glow, ink extrusion)
   .crumbs         breadcrumb row
   .gallery        gallery: vertical thumbs + 4:5 stage
   .buy            ink buy box: title, price tag, size radios, CTA
   .pdp-sizes      big size picker (renamed from .sizes: shop.css owns that for cards)
   .buy-btn        big juice-type CTA
   .kh-note        member early-access note with holo sheen
   .acc            details/summary accordion on the orange band
   ===================================================================== */
.pdp.hero-band{overflow:clip; padding-bottom:calc(var(--section-y) + 40px)}
.pdp::after{content:"GET UNLOCKED · GET UNLOCKED"; position:absolute; z-index:-1; left:-1%; bottom:-.12em; white-space:nowrap; font-family:var(--font-display); font-size:clamp(96px, 12vw, 190px); line-height:1; color:rgba(0,0,0,.065); pointer-events:none}
.pdp .crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-bottom:clamp(20px, 2.6vw, 32px); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-orange-muted)}
.pdp .crumbs a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.pdp .crumbs span[aria-hidden]{opacity:.5}
.pdp .crumbs [aria-current]{color:var(--ink)}
.pdp__grid{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); grid-template-areas:"g b" "a b"; gap:clamp(32px, 3.4vw, 48px) clamp(28px, 4vw, 64px); align-items:start}
.pdp__grid > .gallery{grid-area:g}
.pdp__grid > .buy{grid-area:b}
.pdp__grid > .acc{grid-area:a; margin-top:0}
@media (min-width:981px) and (min-height:900px){ .pdp__grid > .buy{position:sticky; top:calc(var(--hdr-t, 0px) + 24px)} }

/* gallery */
.gallery{position:relative; display:grid; grid-template-columns:88px minmax(0,1fr); gap:16px; align-items:start}
.gallery:not(:has(.gallery__thumbs)){grid-template-columns:minmax(0,1fr)}
.gallery__thumbs{display:flex; flex-direction:column; gap:14px}
.thumb{position:relative; display:block; width:100%; aspect-ratio:1; padding:0; border:0; border-radius:14px; overflow:hidden; background:var(--juice-deep); box-shadow:0 0 0 3px var(--ink); cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s}
.thumb img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
/* Not shown: flat, full brightness (no dimming, so it never reads as pressed). Shown: title-yellow ring + lift. */
.thumb:not([aria-pressed="true"]):hover{transform:translate(-1px,-1px); box-shadow:0 0 0 3px var(--ink), 3px 3px 0 3px var(--ink)}
.thumb[aria-pressed="true"]{transform:translate(-2px,-2px); box-shadow:0 0 0 3px var(--yellow), 0 0 0 6px var(--ink), 6px 6px 0 6px var(--ink)}
.thumb:focus-visible{outline:3px solid var(--cream); outline-offset:6px}
.gallery__stage{position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:var(--juice-deep); box-shadow:var(--frame)}
.gallery__stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .45s var(--ease), transform .9s var(--ease)}
.gallery__stage img.is-active{opacity:1; transform:none}
.gallery__stage .chip{position:absolute; z-index:2}
.gallery__drop{left:16px; top:16px}
.gallery__shown{left:16px; bottom:16px}
.gallery__wrap{position:relative}
.gallery .sticker{position:absolute; z-index:3; right:-34px; top:-38px; width:132px; margin:0}
.gallery .sticker__ring text{font-size:16.5px; letter-spacing:2.2px}

/* buy box */
.buy{--jt-depth:var(--juice-deep); position:relative; background:var(--ink-2); color:var(--text); border-radius:var(--r-lg); box-shadow:var(--frame); padding:clamp(22px, 2.6vw, 34px)}
.buy .kicker{color:var(--juice); display:block}
.buy__head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-top:12px}
.buy__title{font-size:clamp(52px, 5.4vw, 84px)}
.price-tag{flex:none; margin-top:6px; padding:12px 18px 9px; border-radius:999px; background:var(--yellow); color:var(--ink); text-align:center; font-family:var(--font-display); font-size:36px; line-height:.9; transform:rotate(4deg); box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--yellow), 0 14px 34px -12px rgba(255,217,2,.6)}
.buy__sub{margin-top:14px; color:var(--muted); font-size:15.5px; max-width:44ch}
.opt{border:0; margin:24px 0 0; padding:0; min-width:0}
.opt legend{display:flex; float:left; width:100%; justify-content:space-between; align-items:baseline; gap:12px; padding:0; margin-bottom:12px; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.opt legend b{color:var(--text); margin-left:10px}
.opt legend + *{clear:both}
.opt__link{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--juice); background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.pick input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.pdp-sizes{display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0,1fr)); gap:8px}
.pdp-sizes[data-one] .pdp-size span{font-size:22px}
.pdp-size{position:relative; display:block}
.pdp-size span{position:relative; display:grid; place-items:center; height:58px; border-radius:12px; cursor:pointer; font-family:var(--font-display); font-size:27px; letter-spacing:.03em; padding-top:3px; background:rgba(255,247,238,.05); box-shadow:inset 0 0 0 1px var(--line-2); transition:background .15s, box-shadow .15s, transform .15s, color .15s}
.pdp-size span:hover{box-shadow:inset 0 0 0 2px var(--text)}
.pdp-size input:checked + span{background:var(--juice); color:var(--ink); box-shadow:0 0 0 2px var(--ink), 4px 4px 0 2px var(--ink); transform:translate(-2px,-2px)}
.pdp-size input:disabled + span{cursor:not-allowed; color:rgba(255,247,238,.3); background:linear-gradient(to top right, transparent calc(50% - 1px), rgba(255,247,238,.22) 50%, transparent calc(50% + 1px)), rgba(255,247,238,.02); box-shadow:inset 0 0 0 1px var(--line)}
.pdp-size input:disabled + span:hover{box-shadow:inset 0 0 0 1px var(--line)}
.pdp-sizes[data-soon] .pdp-size input:disabled + span{color:rgba(255,247,238,.55); background:rgba(255,247,238,.04)}
.pdp-size input:focus-visible + span{outline:3px solid var(--cream); outline-offset:3px}
.opt__note{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:12px; font-size:13.5px; color:var(--muted)}
.opt__note .stock{font-size:11px; font-family:var(--font-mono); font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.opt__note a{color:var(--cream); font-weight:700}
.buy-btn{--jt-depth:var(--ink); position:relative; display:flex; align-items:center; justify-content:center; gap:14px; width:100%; height:78px; margin-top:26px; border:0; border-radius:999px; padding:0 28px; background:var(--juice); box-shadow:0 0 0 3px var(--ink), 6px 6px 0 3px var(--juice-deep), var(--glow); transition:transform .18s var(--ease), box-shadow .18s, background .18s; overflow:hidden}
.buy-btn .juice-type{font-size:44px; line-height:1; padding-top:.06em}
.buy-btn:not(:disabled):hover{transform:translate(-2px,-2px); background:var(--juice-bright); box-shadow:0 0 0 3px var(--ink), 8px 8px 0 3px var(--juice-deep), 0 22px 50px -16px rgba(255,93,0,.95)}
.buy-btn:not(:disabled):active{transform:translate(3px,3px); box-shadow:0 0 0 3px var(--ink), 2px 2px 0 3px var(--juice-deep)}
.buy-btn:not(:disabled)::after{content:""; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,241,116,.55) 48%, transparent 60%); transform:translateX(-120%); animation:btnSheen 3.6s var(--ease) 1s infinite}
@keyframes btnSheen{55%,100%{transform:translateX(120%)}}
.buy-btn.is-added .juice-type{--jt-fill:var(--cream)}
.buy__alt{margin-top:12px}
.buy__msg{min-height:0; margin-top:12px; font-size:14px; color:var(--cream); font-weight:600}
.buy__msg:empty{display:none}

/* member early-access note (holo sheen) */
.kh-note{position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; align-items:center; margin-top:22px; padding:14px 16px; border-radius:14px; background:linear-gradient(115deg, rgba(255,93,0,.2), rgba(255,241,116,.08) 55%, rgba(40,132,7,.08)); box-shadow:inset 0 0 0 1px rgba(255,93,0,.5)}
.kh-note::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, transparent 30%, rgba(255,241,116,.22) 42%, rgba(255,93,0,.18) 50%, rgba(160,90,255,.14) 56%, transparent 68%) 0 0/250% 100%; animation:holoSweep 5s linear infinite}
@keyframes holoSweep{from{background-position:120% 0}to{background-position:-120% 0}}
.kh-note__key{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--juice); color:var(--ink); box-shadow:0 0 0 3px var(--ink-2), 0 0 0 4px rgba(255,93,0,.6), 0 0 22px rgba(255,93,0,.6)}
.kh-note__key svg{width:22px; height:22px}
.kh-note p{font-size:14px; color:var(--muted); line-height:1.45}
.kh-note b{color:var(--text)}
.kh-note a{color:var(--cream); font-weight:700; white-space:nowrap}
.kh-note a:hover{text-decoration:underline; text-underline-offset:3px}

/* accordion on the orange band */
.acc{margin-top:clamp(28px, 3vw, 40px); border-top:3px solid var(--ink)}
.acc details{border-bottom:2px solid rgba(11,11,11,.85)}
.acc summary{list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 2px 15px; cursor:pointer; font-family:var(--font-display); font-size:32px; line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--ink)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:""; flex:none; width:36px; height:36px; border-radius:50%; background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5D00' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") 50% 50%/18px no-repeat; transition:transform .25s var(--ease)}
.acc details[open] summary::after{transform:rotate(135deg)}
.acc summary:hover{color:var(--paper)}
.acc summary:focus-visible{outline-offset:2px}
.acc__body{padding:0 2px 22px; color:var(--on-orange-muted); font-size:16px; font-weight:500; max-width:60ch}
.acc__body p + p,.acc__body p + ul,.acc__body ul + p,.acc__body p + table{margin-top:12px}
.acc__body b{color:var(--ink)}
.acc__body ul{margin:0; padding-left:20px}
.acc__body li + li{margin-top:4px}
.acc__body .fine{color:rgba(11,11,11,.62); font-size:12.5px}
.fit-table{width:100%; border-collapse:collapse; margin-top:12px; font-family:var(--font-mono); font-size:13px; color:var(--ink)}
.fit-table th,.fit-table td{padding:8px 6px; text-align:center; border-bottom:1px solid rgba(11,11,11,.25)}
.fit-table th{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase}
.fit-table td:first-child,.fit-table th:first-child{text-align:left}

/* complete the fit */
.pdp-fit .product-card__media{aspect-ratio:4/5}
.pdp-fit .product-card__media img{object-position:50% 40%}
.pdp-fit .drop-grid .product-card{box-shadow:0 0 0 3px var(--ink), 6px 6px 0 3px var(--juice-deep)}

@media (max-width:980px){
  .pdp__grid{grid-template-columns:1fr; grid-template-areas:"g" "b" "a"}
  .gallery{max-width:640px; width:100%; margin-inline:auto}
  .gallery .sticker{right:-14px}
}
@media (max-width:760px){
  .gallery{grid-template-columns:1fr; gap:14px; max-width:none}
  .gallery__thumbs{order:2; flex-direction:row}
  .thumb{width:auto; flex:1; aspect-ratio:1}
  .buy__head{flex-direction:column; gap:14px}
  .price-tag{align-self:flex-start; transform:rotate(-3deg); font-size:32px}
  .buy__title{font-size:clamp(50px, 15vw, 64px)}
  .pdp-size span{height:54px; font-size:24px}
  .buy-btn{height:70px}
  .buy-btn .juice-type{font-size:36px}
  .acc summary{font-size:28px}
}
@media (prefers-reduced-motion: reduce){
  .gallery__stage img{transform:none}
  .buy-btn::after,.kh-note::before{animation:none}
}