/* Product detail page only. Depends on tokens.css + base.css. */

/* ============ NAV OVERRIDE (solid, not transparent-over-hero) ============ */
.nav{position:sticky;top:0;background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 1px 0 var(--line)}

/* ============ BREADCRUMB ============ */
.crumb{padding:22px 0 8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:var(--silver);display:flex;gap:9px;flex-wrap:wrap}
.crumb a:hover{color:var(--ink)}
.crumb span{opacity:.45}

/* ============ PDP LAYOUT ============ */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);padding-bottom:clamp(48px,6vw,80px)}

/* --- gallery --- */
.gal{position:sticky;top:92px;align-self:start}
.gal__main{position:relative;aspect-ratio:1/.9;background:linear-gradient(155deg,#F8F9FA 0%,#E4E8EB 100%);border-radius:var(--r-xl);display:grid;place-items:center;padding:6%;overflow:hidden}
.gal__main svg{width:82%;height:auto;transition:transform .5s var(--ease)}
.gal__main:hover svg{transform:scale(1.04)}
.gal__view{display:none;place-items:center;width:100%}
.gal__view.on{display:grid}
.gal__tag{position:absolute;top:20px;left:20px;height:28px;padding:0 14px;border-radius:var(--pill);background:var(--red);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center}
.gal__zoom{position:absolute;bottom:20px;right:20px;height:34px;padding:0 15px;border-radius:var(--pill);background:rgba(255,255,255,.82);backdrop-filter:blur(8px);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--silver);display:flex;align-items:center;gap:7px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.thumb{aspect-ratio:1;background:var(--mist);border-radius:var(--r-md);border:2px solid transparent;display:grid;place-items:center;padding:12%;transition:border-color .18s var(--ease),background .18s var(--ease)}
.thumb:hover{background:var(--cloud)}
.thumb.on{border-color:var(--graphite);background:#fff}
.thumb svg{width:100%;height:auto}

/* --- info column --- */
.info{display:flex;flex-direction:column;gap:22px;padding-top:4px}
.info__sku{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.12em;color:var(--silver)}
.info h1{font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.05;margin-top:8px}
.rating{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--silver);margin-top:12px}
.stars{display:flex;gap:2px}
.info__lede{font-size:16px;line-height:1.6;color:var(--silver);max-width:46ch}

.priceRow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.priceRow b{font-family:'Outfit',sans-serif;font-size:38px;font-weight:600;line-height:1}
.priceRow s{color:var(--silver);font-size:19px}
.priceRow em{font-style:normal;background:var(--go-bg);color:var(--go);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--pill)}
.priceRow small{width:100%;color:var(--silver);font-size:13px;font-family:'JetBrains Mono',monospace}

/* --- option groups ---
   These are <fieldset><legend> with native radios inside the labels. They were
   <button>s carrying selection in a CSS class only, which meant a screen reader
   announced every choice identically whether it was picked or not. Radios also
   bring arrow-key navigation within the group for free.
   The visual is unchanged: the input is hidden and :has(:checked) does the work. */
.opt{border:0;padding:0;margin:0}
.opt__lbl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px;width:100%;padding:0}
.opt__lbl span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver)}
.opt__lbl b{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600}
.opt__row{display:flex;gap:10px;flex-wrap:wrap}

/* Never display:none — that removes the radio from the tab order entirely. */
.sw input,.pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

.sw{width:52px;height:52px;border-radius:var(--pill);position:relative;border:2px solid var(--line);padding:4px;cursor:pointer;
  display:block;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.sw i{display:block;width:100%;height:100%;border-radius:var(--pill)}
.sw:hover{transform:scale(1.06)}
.sw:has(input:checked){border-color:var(--graphite)}
.sw:has(input:focus-visible){outline:3px solid var(--red);outline-offset:3px}

.pick{height:50px;padding:0 22px;border-radius:var(--pill);border:1.5px solid var(--line);background:#fff;font-size:14.5px;font-weight:600;cursor:pointer;
  position:relative;display:inline-flex;align-items:center;gap:9px;transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
.pick:hover{border-color:var(--graphite)}
.pick:has(input:checked){background:var(--graphite);border-color:var(--graphite);color:#fff}
.pick:has(input:focus-visible){outline:3px solid var(--red);outline-offset:3px}
.pick small{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.6}

/* --- fitment box (signature) --- */
.fitbox{border-radius:var(--r-lg);padding:22px;background:var(--graphite);color:#fff}
.fitbox__t{display:flex;align-items:center;gap:10px;font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;margin-bottom:15px}
.fitbox__form{display:grid;grid-template-columns:1fr 1fr auto;gap:9px}
.fsel{position:relative}
.fsel select{-webkit-appearance:none;appearance:none;width:100%;height:50px;padding:0 36px 0 17px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer}
.fsel select:focus{border-color:#fff;outline:none}
.fsel option{color:#111;background:#fff}
.fsel::after{content:'';position:absolute;right:18px;top:20px;width:8px;height:8px;border-right:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);transform:rotate(45deg);pointer-events:none}
.fitbox .btn{height:50px;padding:0 26px}
.verdict{display:none;align-items:center;gap:13px;padding:15px 18px;border-radius:var(--r-md);font-size:14.5px;font-weight:600;line-height:1.4}
.verdict.on{display:flex}
.verdict--yes{background:rgba(18,138,75,.18);color:#5FE3A1}
.verdict--no{background:rgba(227,25,55,.16);color:#FF8B9E}
.verdict button{margin-left:auto;font-size:12px;font-weight:600;text-decoration:underline;opacity:.75;white-space:nowrap}

/* --- buy row --- */
.buy{display:flex;gap:12px;align-items:stretch}
.stepper{display:flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:var(--pill);padding:3px;flex:none}
.stepper button{width:42px;height:52px;border-radius:var(--pill);display:grid;place-items:center;font-size:19px;transition:background .16s var(--ease)}
.stepper button:hover{background:var(--mist)}
.stepper span{min-width:30px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:15px}
/* Was a <span>; now a real input so the value is announced and typeable.
   Spinners hidden — the − / + buttons are the visual control. */
.stepper input{width:44px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:15px;
  border:0;background:none;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fit-err{color:var(--red);font-size:13px;font-weight:600;margin-top:10px}
.fit-err:empty{display:none}
.buy .btn{flex:1}

.assure{display:flex;flex-direction:column;gap:11px;padding-top:4px}
.assure div{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--silver)}
.assure svg{flex:none}
.assure b{color:var(--ink);font-weight:700}

/* ============ DETAIL SECTIONS ============ */
.sec{padding:clamp(52px,6vw,86px) 0}
.sec--mist{background:var(--mist)}
.sec__h{font-size:clamp(24px,3vw,36px);font-weight:600;margin-bottom:30px}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px)}
.prose p{font-size:16.5px;line-height:1.7;color:var(--silver);margin-bottom:16px;max-width:56ch}
.prose p strong{color:var(--ink);font-weight:700}

.spectable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.spectable tr{border-bottom:1px solid var(--line)}
.spectable tr:last-child{border-bottom:0}
.spectable th{text-align:left;padding:15px 22px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silver);font-weight:400;width:52%}
.spectable td{padding:15px 22px;font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:600;text-align:right}

.boxlist{list-style:none;display:flex;flex-direction:column;gap:13px}
.boxlist li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.boxlist svg{flex:none;margin-top:3px}

.install{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.icard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.icard span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--silver);display:block;margin-bottom:9px}
.icard b{font-family:'Outfit',sans-serif;font-size:21px;font-weight:600;display:block}
.icard p{font-size:13.5px;color:var(--silver);margin-top:6px;line-height:1.5}

/* --- reviews --- */
.revhead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.score{display:flex;align-items:center;gap:16px}
.score b{font-family:'Outfit',sans-serif;font-size:52px;font-weight:600;line-height:1}
.score small{display:block;color:var(--silver);font-size:13.5px;margin-top:5px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:12px}
.rev__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev__who b{font-family:'Outfit',sans-serif;font-size:15px;font-weight:600;display:block}
.rev__who span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--go)}
.rev p{font-size:15px;line-height:1.6;color:var(--silver)}
.rev__car{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--silver);padding-top:10px;border-top:1px solid var(--line);margin-top:auto}

/* --- related --- */
.rel{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.rcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.rcard__img{aspect-ratio:1/.86;background:linear-gradient(160deg,#F7F8F9,#E7EAEC);display:grid;place-items:center;padding:20px}
.rcard__img svg{width:72%}
.rcard__b{padding:18px 20px 22px}
.rcard__b span{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--silver)}
.rcard__b b{font-family:'Outfit',sans-serif;font-size:16.5px;font-weight:600;display:block;margin:6px 0 12px;line-height:1.25}
.rcard__b em{font-style:normal;font-family:'Outfit',sans-serif;font-size:20px;font-weight:600}

/* --- sticky buy bar --- */
.stickybar{position:fixed;left:0;right:0;bottom:var(--cc-h);z-index:75;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
  box-shadow:0 -1px 0 var(--line),0 -12px 40px rgba(15,17,18,.07);
  /* visibility, or #stickyAdd is a focusable invisible "Add to cart" from load */
  transform:translateY(110%);visibility:hidden;
  transition:transform .34s var(--ease),visibility 0s linear .34s}
.stickybar.on{transform:translateY(0);visibility:visible;
  transition:transform .34s var(--ease),visibility 0s}
.stickybar__in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:18px}
.stickybar__l{display:flex;align-items:center;gap:16px;min-width:0}
.stickybar__l svg{width:48px;height:48px;flex:none;background:var(--mist);border-radius:var(--r-sm);padding:6px}
.stickybar__l>span:first-child{flex:none;display:block}
.stickybar__l b{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stickybar__l span{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--silver)}
.stickybar__r{display:flex;align-items:center;gap:16px}
.stickybar__r b{font-family:'Outfit',sans-serif;font-size:22px;font-weight:600}

/* --- toast --- */
.toast{position:fixed;bottom:calc(24px + var(--cc-h));left:50%;transform:translate(-50%,140%);z-index:90;background:var(--graphite);color:#fff;
  padding:15px 26px;border-radius:var(--pill);font-size:14.5px;font-weight:600;box-shadow:var(--shadow-3);
  visibility:hidden;
  transition:transform .34s var(--ease),visibility 0s linear .34s;display:flex;align-items:center;gap:10px}
.toast.on{transform:translate(-50%,0);visibility:visible;
  transition:transform .34s var(--ease),visibility 0s}
.toast__x{margin-left:4px;color:#fff;opacity:.7;font-size:18px;line-height:1}
.toast__x:hover{opacity:1}

/* --- footer --- */
.foot{background:var(--graphite);color:#fff;padding:clamp(48px,6vw,74px) 0 32px}
.foot__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
.foot__brand p{color:rgba(255,255,255,.55);font-size:14.5px;line-height:1.6;max-width:34ch;margin-top:16px}
.foot h4{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px;font-weight:400}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{color:rgba(255,255,255,.82);font-size:14.5px}
.foot ul a:hover{color:#fff}
.foot__bar{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.45);font-family:'JetBrains Mono',monospace}

/* --- reveal --- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .rel{grid-template-columns:repeat(2,1fr)}
  .revs{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .pdp{grid-template-columns:1fr}
  .gal{position:static}
  .nav__links{position:fixed;top:70px;left:12px;right:12px;background:#fff;border-radius:var(--r-lg);flex-direction:column;padding:12px;box-shadow:var(--shadow-3);opacity:0;pointer-events:none;transform:translateY(-10px);transition:all .26s var(--ease)}
  .nav__links.on{opacity:1;pointer-events:auto;transform:none}
  .nav__links a{padding:14px 18px;font-size:16px}
  .burger{display:grid}
  .cols{grid-template-columns:1fr}
  .install{grid-template-columns:1fr}
}
@media(max-width:620px){
  .fitbox__form{grid-template-columns:1fr}
  .rel{grid-template-columns:1fr 1fr;gap:12px}
  .rcard__b b{font-size:14.5px}
  .buy{flex-wrap:wrap}
  .buy .btn{width:100%;flex:auto}
  .stickybar__l span,.stickybar__r b{display:none}
  .foot__grid{grid-template-columns:1fr}
  .priceRow b{font-size:32px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}