/* The Prize House — the pages beyond the home page.
 *
 * Nothing here redefines a token. Everything is built from the v2 scale and
 * brand.css, the same way site.css is, so a brand change still lands in one
 * place. Loaded after site.css.
 */

/* ---------------------------------------------------------- breadcrumb --- */
.crumbs{ border-bottom:1px solid var(--line); background:var(--bg) }
.crumbs .wrap{ display:flex; align-items:center; gap:var(--space-2);
  min-height:44px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--text-3) }
.crumbs a{ color:var(--text-2); transition:color 120ms ease-out }
.crumbs a:hover{ color:var(--flame) }
.crumbs__sep{ color:var(--text-3); opacity:.5 }
.crumbs [aria-current]{ color:var(--text) }

/* ------------------------------------------------------ page masthead --- */
.phead{ padding:var(--space-10) 0 var(--space-6); border-bottom:1px solid var(--line) }
.phead h1{ font-size:clamp(30px,4.4vw,56px); line-height:1.02; margin-top:var(--space-2) }
.phead__sub{ margin-top:var(--space-4); max-width:62ch;
  color:var(--text-2); font-size:var(--fs-md); line-height:1.55 }
.band--tight{ padding:var(--space-10) 0 }
/* a centred masthead, for a page whose content is a centred column */
.phead--mid{ text-align:center }
.phead--mid .phead__sub{ margin-inline:auto }

/* ------------------------------------------------- single competition --- */
/* Three areas: the gallery, the tabs under it, and the buy column beside
   both. On one column the buy box jumps ahead of the tabs, because reading
   the spec is not what someone came to do. */
.prod__in{ display:grid; grid-template-columns:1.15fr 1fr;
  grid-template-areas:"gal buy" "tab buy"; gap:var(--space-10) var(--space-12);
  align-items:start; padding-block:var(--space-10) }
/* padding-block, never the padding shorthand: this element also carries .wrap,
   and a shorthand here silently zeroes the side gutter that .wrap set. */
.prod__left{ grid-area:gal }
.prod__tabs{ grid-area:tab }
.prod__right{ grid-area:buy; position:sticky; top:calc(92px + var(--space-6)) }
.prod__h1{ font-size:clamp(28px,3.6vw,46px); line-height:1.04; margin-top:var(--space-2) }

/* gallery */
.gal__main{ position:relative; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface-3) }
.gal__main img{ width:100%; height:100%; object-fit:cover; display:block }
.gal__chips{ position:absolute; top:12px; left:12px; display:flex; gap:8px; flex-wrap:wrap }
.gal__strip{ display:flex; gap:var(--space-3); margin-top:var(--space-3) }
.gal__t{ width:84px; aspect-ratio:4/3; padding:0; border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-3);
  cursor:pointer; transition:border-color 120ms ease-out, opacity 120ms ease-out;
  opacity:.6 }
.gal__t img{ width:100%; height:100%; object-fit:cover; display:block }
.gal__t.is-on{ border-color:var(--flame); opacity:1 }
.chip--quiet{ background:transparent; color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line) }

/* the four facts, 2x2 */
.pstats{ display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:var(--space-5) }
.pstat{ padding:var(--space-4); border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--surface-1);
  display:flex; flex-direction:column; gap:6px; min-width:0 }
.pstat__k{ font-family:var(--font-display); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3) }
.pstat__v{ font-size:23px; font-weight:800; color:var(--text); line-height:1.05 }
.pstat--cd .pstat__v{ display:flex; align-items:baseline; gap:2px; font-size:21px }
.pstat--cd b{ font-weight:800 }
.pstat--cd i{ font-style:normal; font-size:11px; color:var(--text-3); margin-right:4px }

/* buy box */
.buy{ margin-top:var(--space-6); border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface-1); overflow:hidden }
.buy__block{ padding:var(--space-5); border-top:1px solid var(--line) }
.buy__block.is-off{ opacity:.45; pointer-events:none }
.buy__hd{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3) }
.buy__cap,.buy__req{ font-family:var(--font-display); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3) }
.buy__req{ color:var(--flame) }
.buy__note{ margin-top:var(--space-3); font-size:var(--fs-xs); color:var(--text-3);
  line-height:1.55 }
.prog{ padding:var(--space-5) }
.prog__row{ display:flex; justify-content:space-between; gap:var(--space-3);
  font-size:var(--fs-sm); color:var(--text-2); margin-bottom:var(--space-2) }
.prog__row .num:last-child{ color:var(--text) }

/* the ticket slider: drag the bar, pick a number of tickets. Not a number
   picker, and not a stepper you have to tap forty times. */
.qty{ display:flex; align-items:baseline; gap:var(--space-2); margin:var(--space-3) 0 }
.qty__n{ font-size:40px; font-weight:800; color:var(--text); line-height:1;
  font-variant-numeric:tabular-nums }
.qty__u{ color:var(--text-3); font-size:var(--fs-sm) }
.slider{ -webkit-appearance:none; appearance:none; width:100%; height:26px;
  background:transparent; cursor:pointer; display:block }
.slider::-webkit-slider-runnable-track{ height:6px; border-radius:99px;
  background-color:var(--surface-3); background-image:var(--sweep);
  background-repeat:no-repeat; background-size:var(--fill,10%) 100% }
.slider::-moz-range-track{ height:6px; border-radius:99px; background:var(--surface-3) }
.slider::-moz-range-progress{ height:6px; border-radius:99px; background:var(--flame) }
.slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:26px; height:26px; margin-top:-10px; border-radius:50%;
  background:var(--text); border:5px solid var(--flame); box-sizing:border-box;
  transition:transform 120ms ease-out }
.slider::-moz-range-thumb{ width:26px; height:26px; border-radius:50%;
  background:var(--text); border:5px solid var(--flame); box-sizing:border-box }
.slider:active::-webkit-slider-thumb{ transform:scale(1.12) }
.slider:focus-visible{ outline:2px solid var(--text); outline-offset:4px; border-radius:99px }
.qps{ display:flex; gap:6px; margin-top:var(--space-3); flex-wrap:wrap }
.qp{ flex:1 1 0; min-width:52px; min-height:40px; padding:0 10px; cursor:pointer;
  background:transparent; color:var(--text-2); border:1px solid var(--line);
  border-radius:var(--radius-sm); font-family:var(--font-display); font-weight:700;
  font-size:13px; font-variant-numeric:tabular-nums;
  transition:color 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out }
.qp.is-on{ color:var(--text); border-color:var(--flame); background:var(--surface-3) }

/* skill question */
.skq__q{ margin:var(--space-3) 0; font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-md); line-height:1.3 }
.skq{ display:flex; flex-direction:column; gap:8px }
.skq__o{ display:flex; align-items:center; gap:10px; min-height:48px; cursor:pointer;
  padding:0 var(--space-4); border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg); font-size:var(--fs-sm);
  transition:border-color 120ms ease-out, background-color 120ms ease-out }
.skq__o input{ width:18px; height:18px; accent-color:var(--flame); flex:0 0 auto }
.skq__o:has(input:checked){ border-color:var(--flame); background:var(--surface-3) }
.skq__o:focus-within{ border-color:var(--text-2) }

.buy__foot{ padding:var(--space-5); border-top:1px solid var(--line);
  background:var(--surface-2) }
.buy__total{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-3); margin-bottom:var(--space-4); font-size:var(--fs-sm);
  color:var(--text-2) }
.buy__sum{ font-size:23px; font-weight:800; color:var(--text) }
.lnk{ color:var(--flame); text-decoration:underline; text-underline-offset:3px }
.lnk:hover{ color:var(--text) }

/* how this draw is run */
.drows{ border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-1); overflow:hidden }
.drow{ display:grid; grid-template-columns:260px 1fr; gap:var(--space-6);
  padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--line);
  align-items:baseline }
.drow:last-child{ border-bottom:0 }
.drow__k{ display:flex; flex-direction:column; gap:4px }
.drow__v{ font-size:var(--fs-md); font-weight:800; color:var(--text) }
.drow__p{ color:var(--text-2); font-size:var(--fs-sm); line-height:1.6 }

/* ---------------------------------------------------------- data tables --- */
.tbl__wrap{ overflow-x:auto; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface-1) }
.tbl{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:720px }
.tbl th{ text-align:left; padding:var(--space-4) var(--space-5);
  font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  border-bottom:1px solid var(--line); white-space:nowrap }
.tbl td{ padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--line);
  color:var(--text-2); vertical-align:middle }
.tbl tr:last-child td{ border-bottom:0 }
.tbl tbody tr{ transition:background-color 120ms ease-out }
.tbl__nm{ color:var(--text); font-weight:500 }
@media (hover:hover){ .tbl tbody tr:hover{ background:var(--surface-2) } }

/* ------------------------------------------------------------- content --- */
.prose{ max-width:72ch }
.prose__s{ padding:var(--space-6) 0; border-bottom:1px solid var(--line) }
.prose__s:last-child{ border-bottom:0 }
.prose h2{ font-size:var(--fs-lg,21px); margin-bottom:var(--space-3) }
.prose p{ color:var(--text-2); font-size:var(--fs-base); line-height:1.7;
  margin-bottom:var(--space-3) }
.prose p:last-child{ margin-bottom:0 }

.empty{ border:1px dashed var(--line); border-radius:var(--radius-lg);
  padding:var(--space-12) var(--space-6); text-align:center; background:var(--surface-1) }
.empty__h{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-md) }
.empty__p{ margin-top:var(--space-2); color:var(--text-2); font-size:var(--fs-sm) }

/* live page */
.livebox{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-8);
  align-items:stretch }
.livebox__screen{ aspect-ratio:16/9; border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface-3);
  display:grid; place-items:center; color:var(--text-3); font-size:var(--fs-sm) }
.livebox__side{ display:flex; flex-direction:column; align-items:flex-start;
  gap:var(--space-4); justify-content:center }

/* contact */
.cx{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-10); align-items:start }
.cx__form{ margin:0; max-width:none }
.cx textarea{ background:var(--surface-3); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:13px 14px; color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base); resize:vertical;
  transition:border-color 120ms ease-out }
.cx textarea:focus{ outline:none; border-color:var(--flame) }
.cx__side{ display:flex; flex-direction:column; gap:var(--space-6) }
.cx__blk{ padding:var(--space-5); border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--surface-1) }
.cx__v{ margin:var(--space-2) 0; font-size:var(--fs-md); line-height:1.5; color:var(--text) }

/* numbered list used in the free entry modal and on how it works */
.steps--n{ list-style:none; counter-reset:s; margin-top:var(--space-3) }
.steps--n li{ counter-increment:s; position:relative; padding-left:34px;
  margin-bottom:var(--space-3); color:var(--text-2); font-size:var(--fs-sm); line-height:1.6 }
.steps--n li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:0;
  font-family:var(--font-display); font-weight:800; font-size:12px; color:var(--flame);
  font-variant-numeric:tabular-nums }

/* ---------------------------------------------------------------- modal --- */
.modal[hidden]{ display:none }
.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  padding:var(--space-5); background:rgba(1,4,14,.82); backdrop-filter:blur(8px);
  opacity:0; transition:opacity 180ms ease-out; overflow-y:auto }
.modal.is-open{ opacity:1 }
.modal__panel{ position:relative; width:min(760px,100%); max-height:90vh; overflow-y:auto;
  background:var(--surface-1); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-8);
  transform:translateY(8px); transition:transform 180ms var(--ease-out) }
.modal.is-open .modal__panel{ transform:none }
.modal__x{ position:absolute; top:10px; right:10px; width:44px; height:44px;
  background:none; border:0; color:var(--text-2); font-size:26px; line-height:1;
  cursor:pointer; border-radius:var(--radius-sm); transition:color 120ms ease-out }
.modal__x:hover{ color:var(--flame) }
.modal__panel h2{ font-size:clamp(22px,3vw,32px); margin-top:var(--space-2) }
.modal__lead{ margin-top:var(--space-3); color:var(--text-2); font-size:var(--fs-sm);
  line-height:1.6 }
.modal__cols{ display:grid; grid-template-columns:1fr 1.2fr; gap:var(--space-8);
  margin-top:var(--space-6) }
.modal__addr{ margin:var(--space-2) 0 var(--space-3); font-size:var(--fs-md);
  line-height:1.55; color:var(--text) }
.modal__foot{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); margin-top:var(--space-8); padding-top:var(--space-5);
  border-top:1px solid var(--line); flex-wrap:wrap }

/* ----------------------------------------------------------- responsive --- */
@media (max-width:1100px){
  .prod__in{ grid-template-columns:1fr; grid-template-areas:"gal" "buy" "tab";
    gap:var(--space-8) }
  .prod__right{ position:static }
  .livebox,.cx{ grid-template-columns:1fr; gap:var(--space-8) }
}
@media (max-width:860px){
  .phead{ padding:var(--space-8) 0 var(--space-5) }
  .phead__sub{ font-size:var(--fs-sm) }
  .band--tight{ padding:var(--space-8) 0 }
  .prod__in{ padding-block:var(--space-6) }
  /* One column puts the buy box above the marketing copy. `order` needs a flex
     parent, so the column becomes one and every child is placed explicitly. */
  .prod__right{ display:flex; flex-direction:column }
  .prod__h1{ order:2 }
  .pstats{ order:3 }
  .buy{ order:5 }
  .drow{ grid-template-columns:1fr; gap:var(--space-2); padding:var(--space-5) }
  .modal__cols{ grid-template-columns:1fr; gap:var(--space-6) }
  .modal__panel{ padding:var(--space-6) }
  .prose__s{ padding:var(--space-5) 0 }
}
@media (max-width:640px){
  .gal__t{ width:66px }
  /* wrapped to its own line, the retail value should not stay right aligned */
  .buy__block,.prog,.buy__foot{ padding:var(--space-4) }
  .qty__n{ font-size:34px }
  .qp{ min-width:46px; font-size:12px }
  .modal{ padding:0 }
  .modal__panel{ max-height:100vh; height:100%; border:0; border-radius:0 }
  .tbl{ min-width:620px }
}

/* ------------------------------------------------------- purchase flow --- */
.bk{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-8); align-items:start }
.bk__list{ border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-1); overflow:hidden }
.bk__row{ display:grid; grid-template-columns:120px 1fr auto auto; gap:var(--space-5);
  padding:var(--space-5); border-bottom:1px solid var(--line); align-items:center }
.bk__row:last-child{ border-bottom:0 }
.bk__img{ aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface-3) }
.bk__img img{ width:100%; height:100%; object-fit:cover; display:block }
.bk__body h3{ font-size:var(--fs-md) }
.bk__meta{ margin-top:6px; font-size:var(--fs-xs); color:var(--text-3) }
.bk__sep{ margin:0 8px; opacity:.5 }
.bk__ok{ display:flex; align-items:center; gap:6px; margin-top:8px;
  font-size:var(--fs-xs); color:var(--lime,var(--flame)) }
.bk__qty{ display:flex; flex-direction:column; gap:4px; text-align:right }
.bk__q{ font-size:21px; font-weight:800; color:var(--text) }
.bk__line{ display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-size:var(--fs-md); font-weight:800; color:var(--text) }
.bk__rm{ font-size:12px; padding:2px 0; min-height:0 }
.bk__sum{ position:sticky; top:calc(92px + var(--space-6));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-1); padding:var(--space-5) }
.bk__line2{ display:flex; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) 0; font-size:var(--fs-sm); color:var(--text-2);
  border-bottom:1px solid var(--line) }
.bk__line2--tot{ border-bottom:0; color:var(--text); align-items:baseline;
  margin-bottom:var(--space-4) }
.bk__big{ font-size:27px; font-weight:800 }

.acct{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); align-items:start }
.acct__f{ margin:0; max-width:none }
.acct__f h2{ font-size:clamp(20px,2.4vw,27px); margin-bottom:var(--space-2) }

@media (max-width:1100px){
  .bk,.acct{ grid-template-columns:1fr }
  .bk__sum{ position:static }
}
@media (max-width:640px){
  .bk__row{ grid-template-columns:82px 1fr; gap:var(--space-4);
    padding:var(--space-4); align-items:start }
  .bk__qty{ grid-column:1; text-align:left; flex-direction:row; align-items:baseline;
    gap:8px }
  .bk__line{ grid-column:2; align-items:flex-end }
}

/* checkout and confirmation */
.pay__frame{ margin-top:var(--space-3); min-height:132px; display:grid; place-items:center;
  border:1px dashed var(--line); border-radius:var(--radius-md); background:var(--bg);
  color:var(--text-3); font-size:var(--fs-sm) }
.oc{ display:flex; flex-direction:column; gap:var(--space-5) }
.oc__blk{ border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface-1); padding:var(--space-6) }
.oc__hd{ display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-4); flex-wrap:wrap }
.oc__hd h3{ font-size:var(--fs-md) }
.oc__n{ color:var(--text-3); font-size:var(--fs-sm) }
.oc__t{ display:flex; flex-wrap:wrap; gap:8px; margin:var(--space-4) 0 }
.oc__tk{ padding:8px 12px; border-radius:var(--radius-sm); background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line); font-size:var(--fs-sm); font-weight:500;
  color:var(--text) }
@media (max-width:640px){
  .oc__blk{ padding:var(--space-5) }
}


/* ------------------------------------------------------------- tabs --- */
.tabs__bar{ position:relative; display:flex; gap:var(--space-6);
  border-bottom:1px solid var(--line) }
.tab{ position:relative; padding:0 0 var(--space-4); background:none; border:0;
  cursor:pointer; min-height:44px; color:var(--text-3);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  letter-spacing:.04em; white-space:nowrap;
  transition:color 120ms ease-out }
.tab:hover{ color:var(--text-2) }
.tab.is-on{ color:var(--text) }
.tab:focus-visible{ outline:2px solid var(--text); outline-offset:3px; border-radius:2px }
/* one rule slides between the tabs rather than three borders switching on */
.tabs__ink{ position:absolute; bottom:-1px; left:0; height:2px; width:0;
  background:var(--sweep); border-radius:2px;
  transition:transform 260ms var(--ease-out), width 260ms var(--ease-out) }
/* Panels are visible until the script says otherwise, so with JavaScript off
   all three stack and stay readable instead of two of them vanishing. */
.tabp{ padding-top:var(--space-6) }
.tabs.js-on .tabp{ display:none }
.tabs.js-on .tabp.is-on{ display:block }
.tabs:not(.js-on) .tabs__bar{ display:none }
.tabp__lead{ font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-md); line-height:1.3; color:var(--text) }
.tabp__p{ margin-top:var(--space-3); color:var(--text-2); font-size:var(--fs-sm);
  line-height:1.65 }

.specs{ margin-top:var(--space-5); border-top:1px solid var(--line) }
.spec{ display:flex; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) 0; border-bottom:1px solid var(--line);
  font-size:var(--fs-sm) }
.spec__k{ color:var(--text-3) }
.spec__v{ color:var(--text); text-align:right }

.el__hd{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-5) }
.el__tools{ display:flex; align-items:center; gap:var(--space-4);
  margin:var(--space-5) 0 var(--space-4) }
.el__find{ flex:1 1 auto; min-width:0; min-height:44px; padding:0 14px;
  background:var(--surface-3); border:1px solid var(--line);
  border-radius:var(--radius-sm); color:var(--text);
  font-family:var(--font-body); font-size:16px;
  transition:border-color 120ms ease-out }
.el__find:focus{ outline:none; border-color:var(--flame) }
.el__count{ flex:0 0 auto; color:var(--text-3); font-size:var(--fs-sm) }
.el__wrap{ max-height:330px; overflow-y:auto }
.el__tbl{ min-width:0 }
.el__tbl th,.el__tbl td{ padding:var(--space-3) var(--space-4) }
.el__tk{ color:var(--text); font-weight:500 }
.el__note{ margin-top:var(--space-4); font-size:var(--fs-xs); color:var(--text-3) }
.el__tbl tr[hidden]{ display:none }

.drows--flat{ border:0; background:none }
.drows--flat .drow{ padding:var(--space-4) 0; grid-template-columns:230px 1fr }
.drows--flat .drow:last-child{ border-bottom:0 }

@media (max-width:640px){
  .tabs__bar{ gap:var(--space-5); overflow-x:auto; scrollbar-width:none }
  .tabs__bar::-webkit-scrollbar{ display:none }
  .tab{ font-size:var(--fs-xs) }
  .el__hd{ flex-direction:column; gap:var(--space-3) }
  .el__tools{ flex-wrap:wrap }
  .drows--flat .drow{ grid-template-columns:1fr; padding:var(--space-4) 0 }
}


/* --------------------------------------------------- sticky buy bar --- */
/* Phones only, and only once the real button has scrolled away. It mirrors
   the same figures rather than being a second, different action. */
.sbuy{ display:none }
@media (max-width:1100px){
  .sbuy[hidden]{ display:none }
  .sbuy{ position:fixed; left:0; right:0; bottom:0; z-index:38;
    display:block; background:rgba(1,4,14,.94); backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform 200ms var(--ease-out) }
  .sbuy.is-on{ transform:none }
  .sbuy__in{ display:flex; align-items:center; gap:var(--space-4);
    max-width:var(--measure); margin:0 auto }
  .sbuy__t{ display:flex; flex-direction:column; gap:2px; font-size:11px;
    color:var(--text-3); white-space:nowrap }
  .sbuy__t b{ font-size:19px; font-weight:800; color:var(--text) }
  .sbuy .btn{ flex:1 1 auto; min-height:48px; padding:12px 16px }
}
@media (prefers-reduced-motion:reduce){ .sbuy{ transition:none } }

@media (max-width:640px){
  /* tighter buy box, so the button sits higher without losing a step */
  .pstat{ padding:var(--space-3) }
  .pstat__v{ font-size:20px }
  .pstat--cd .pstat__v{ font-size:17px }
  .buy__block,.prog,.buy__foot{ padding:var(--space-4) }
  .qty{ margin:6px 0 2px }
  .qty__n{ font-size:30px }
  .skq__o{ min-height:44px }
  .skq{ gap:6px }
  .skq__q{ margin:var(--space-2) 0 var(--space-3); font-size:var(--fs-base) }
}