/* 404: Worry Not Found — storefront stylesheet
   ============================================================================
   This file was consolidated: every declaration that an earlier rule already
   superseded (the layered "v2 → v9" override stack) has been removed, so what
   is left is exactly what the browser was already applying. Rule order and
   selectors were NOT changed, which keeps the cascade identical.

   Editing rules (see ../LAYOUT-GUARDRAILS.md):
   - Change the DECLARATION THAT IS ALREADY HERE. Do not append a new rule to
     re-declare the same property: a later rule of equal specificity silently
     wins and that is how responsive breakage has happened before.
   - After any layout change run: node tools/check-layout.mjs
   ============================================================================
   Outline of this file:
      1. refinement layer (premium details, motions)
      2. PDP v3 (premium, consistent design language)
      3. footer links, logo-home, module shrink
      4. lifestyle accordion + promo modal
      5. model pile + curtain carousel
      6. XP model windows, closable, 200% hover
      7. NTB asset pack wiring
      8. calm refinements
      9. hero arrows alone, centered
     10. bg path fix, scene decor, rounded art plates, Win97 gallery
     11. page decor, full-fit cards, overlapping Win97 model windows
     12. 3-up grids everywhere, draggable big model windows
     13. pixel frames, round card dots, bigger calm model windows
     14. clickable nav tools, search pop, track link
     15. compact model windows (all four visible)
     16. cart & model cascade
     17. Shop All grouped by series
     18. PDP refinement
     19. nav dots, mini bag drawer, search note
     20. model windows — horizontal cascade, double size
     21. model strip fully visible, footer clear
     22. cross-device responsive layer
 */

/* 404: Worry Not Found — storefront prototype v2
   Concept v3 style frozen: saturated vaporwave, black pixel edges, pixel fonts.
   Real pixel webfonts: Press Start 2P (display) + VT323 (body/mono). */
@font-face{
  font-family:'Press Start 2P';
  src:url('/assets/fonts/press-start-2p-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'VT323';
  src:url('/assets/fonts/vt323-latin-400-normal.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
:root {
  --ink:#1D1D1F;
  --cream:#FFFBF5;
  --cream-deep:#F5EBE0;
  --pink-hi:#FF88C2;
  --pink-mid:#FF47A3;
  --pink-deep:#FF5C99;
  --pink-soft:#FF9EC4;
  --lav:#D8BFD8;
  --lav-deep:#8E54E9;
  --grid:#70A1FF;
  --mint:#4DB6AC;
  --gold:#FFD700;
  --px:'Press Start 2P','Courier New',monospace;
  --mono:'VT323','Courier New',monospace;
  --bw:2px;
}
* {box-sizing:border-box;}
html,body {margin:0; padding:0;}
body {color:var(--ink); font-family:var(--mono); font-size:19px; line-height:1.45;}
img {image-rendering:pixelated;}
a {color:inherit; text-decoration:none;}
.wrap {max-width:1180px; margin:0 auto; padding:0 18px;}
/* floating decor (concept vibe) */
.fx {position:absolute; pointer-events:none; z-index:0;}
.sun-disc {top:120px; left:6%; border-radius:50%; opacity:.5; display:none;}
.crescent {top:200px; right:7%; border-radius:50%; opacity:.45; display:none;}
.s1 {top:260px; left:3%;}
.s2 {top:90px; left:28%;}
.s3 {top:140px; right:22%;}
.s4 {top:330px; right:4%;}
@media(min-width:1024px) {.sun-disc {display:block;}
.crescent {display:block;}
}
/* ---------- top navbar ---------- */
.nav {position:relative; z-index:2; display:flex; align-items:center; column-gap:16px; row-gap:4px; padding:16px 18px 10px; flex-wrap:wrap;}
.brand {display:flex; align-items:center; gap:16px; flex:1 0 100%; padding-bottom:12px; border-bottom:2px solid rgba(255,255,255,.28);}
.brand img {width:66px; height:auto; display:block;}
.brand .word {font-family:var(--px); color:#fff; font-size:14px; line-height:1.4; letter-spacing:.1em; text-transform:uppercase;}
.nav-links {display:flex; align-items:center; gap:18px; margin-left:auto; flex-wrap:wrap;}
.nav-links a {font-family:var(--px); color:#fff; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:13px 10px;}
.nav-links a:hover,.nav-tools span:hover {background:var(--ink); color:#fff;}
.dot {width:5px; height:5px; background:var(--ink); display:inline-block; opacity:.5;}
.nav-tools {display:flex; align-items:center; gap:16px; color:#fff; font-family:var(--px); font-size:12px; line-height:1.7; letter-spacing:.06em; text-transform:uppercase;}
/* ---------- carousel hero ---------- */
.hero {position:relative; z-index:1; margin:6px auto 0; overflow:hidden; background:var(--cream);}
.track {display:flex; transition:transform .45s ease;}
.slide {position:relative; min-width:100%;}
/* non-hero .slide rules removed 2026-09-10: no such element exists in the markup.
   The hero carousel is controlled by .hero .track and .hero .slide img further down. */
.slide .chip {position:absolute; left:14px; bottom:12px; background:var(--cream); border:var(--bw) solid var(--ink); font-family:var(--px); font-size:10px; padding:6px 10px; text-transform:uppercase;}
.hero-bar {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; background:rgba(255,251,245,.86);}
.btn {font-family:var(--px); border:var(--bw) solid var(--ink); cursor:pointer; text-transform:uppercase; letter-spacing:.04em; transition:transform .08s;}
.btn:active {transform:translate(1px,1px);}
.btn-pill {border-radius:999px; padding:14px 36px; color:#fff; font-size:12px; background:linear-gradient(90deg,var(--pink-deep),var(--lav-deep)); box-shadow:0 3px 0 var(--ink);}
.btn-square {width:40px; height:40px; border-radius:7px; background:var(--cream); font-size:18px; display:inline-flex; align-items:center; justify-content:center;}
.btn-square:hover {background:var(--gold);}
.dots {display:flex; gap:8px; justify-content:center; padding-bottom:2px;}
.dots button {width:10px; height:10px; border:var(--bw) solid var(--ink); background:var(--cream); padding:0; cursor:pointer;}
.dots button.on {background:var(--gold);}
/* ---------- section title ---------- */
.ntb-title {text-align:center; padding:38px 18px 4px;}
.ntb-title h1 {font-family:var(--px); margin:0; font-size:clamp(20px,4vw,34px); letter-spacing:.02em; text-transform:uppercase;}
.ntb-title p {margin:8px 0 0; font-family:var(--mono); font-size:19px; letter-spacing:.3em; text-transform:uppercase; opacity:.85;}
/* ---------- product window cards ---------- */
.cards {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:22px auto 34px; padding:0 18px;}
.win {background:var(--cream); border:var(--bw) solid var(--ink); border-radius:8px; box-shadow:6px 7px 0 rgba(48,25,52,.32); display:flex; flex-direction:column; overflow:hidden;}
.win-bar {
  background:linear-gradient(90deg,var(--pink-deep),#7AC7FF);
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  font-family:var(--px);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.win-bar i {background:#fff; display:inline-block;}
.win-bar .dots {display:flex; gap:5px; margin:0; padding:0; background:none; border:0;}
.win-bar .dots button {background:transparent; border:0; padding:0;}
.win-art {
  position:relative;
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .1s ease-out,box-shadow .25s ease;
}
.win-art::after {content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s ease;}
.win:hover .win-art::after {opacity:1;}
.win-art img {height:94%; width:auto; max-width:none; object-fit:contain; transform:translateZ(0); will-change:transform; transition:transform .14s ease-out,opacity .2s ease;}
.win-art.zooming img {transform:scale(1.12) rotateZ(1.4deg);}
.win-body {padding:14px 12px 16px; display:flex; flex-direction:column; gap:10px; align-items:center; text-align:center;}
.win-body .no {font-family:var(--px); font-size:11px; letter-spacing:.06em;}
.win-body .hint {font-family:var(--mono); font-size:16px; opacity:.8; margin:0;}
.btn-mint {border-radius:999px; padding:10px 20px; font-size:10px; background:var(--mint); color:#fff; display:inline-flex; align-items:center; gap:8px; box-shadow:0 3px 0 var(--ink);}
.btn-mint .ico {font-size:14px;}
.win.swap-anim .win-art img {transition:opacity .2s ease;}
.win.swap-anim .win-art img.fading {opacity:0;}
/* ---------- footer ---------- */
.foot {
  margin-top:24px;
  border-top:3px solid var(--ink);
  padding:20px 12px 30px;
  text-align:center;
  font-family:var(--px);
  font-size:9.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
}
.foot .star {color:var(--gold);}
/* ---------- responsive ---------- */
@media (max-width:1020px) {.cards {grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px) {.nav-links {margin-left:0; width:100%; justify-content:center;}
.nav-tools {margin-left:auto;}
}
@media (max-width:660px) {.cards {grid-template-columns:1fr;}
.brand .word {font-size:11px;}
.hero {margin:6px 8px 0;}
.hero-bar {gap:10px;}
.ntb-title {padding:30px 10px 2px;}
}
/* ---------- sub pages (v3) ---------- */
.page-head {padding:44px 18px 34px; text-align:center;}
.page-head h1 {font-family:var(--px); font-size:clamp(18px,3.4vw,30px); margin:0 0 8px; text-transform:uppercase;}
.page-head .sub {font-family:var(--mono); font-size:19px; letter-spacing:.22em; text-transform:uppercase; opacity:.8; margin:0;}
.crumbs {font-family:var(--px); font-size:9px; letter-spacing:.08em; color:#fff; padding:16px 18px 0; max-width:1180px; margin:0 auto;}
.crumbs a:hover {background:var(--ink); color:#fff;}
.page-main {max-width:1180px; margin:0 auto; padding:8px 18px 30px;}
.cards.grid-page {margin:0 auto 30px; max-width:1180px;}
.win-link {display:block; position:absolute; inset:0; z-index:2;}
.win-art {position:relative;}
.card-name {font-family:var(--px); font-size:10px; letter-spacing:.05em; text-transform:uppercase;}
/* pdp */
.pdp {display:grid;}
.pdp .gal {border:var(--bw) solid var(--ink); background:var(--cream);}
.pdp .gal img {width:100%; aspect-ratio:4/3; object-fit:contain;}
.pdp h1 {font-family:var(--px); margin:6px 0;}
.pdp .no {font-family:var(--px); font-size:11px;}
.price {font-family:var(--px);}
.mem {padding:12px; margin:12px 0;}
.mem b {font-family:var(--px); font-size:9px; letter-spacing:.1em;}
table.spec {width:100%; border-collapse:collapse; font-family:var(--mono); font-size:17px; margin:10px 0 16px;}
.spec td {border:1px solid var(--ink); padding:7px 10px; background:rgba(255,251,245,.75);}
.spec td:first-child {font-family:var(--px); font-size:9px; width:34%;}
.btn-ghost {background:var(--cream); color:var(--ink); border-radius:999px; padding:12px 22px; font-size:10px; box-shadow:0 3px 0 var(--ink);}
/* ntb stage */
.ntb-stage {max-width:560px; margin:18px auto;}
.ntb-row {display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
@media (max-width:860px) {.pdp {grid-template-columns:1fr;}
}
/* ---------- refinement layer (premium details, motions) ---------- */
/* 3D tilt stage: parent perspective + glare driven by CSS vars (JS sets --gx/--gy) */
.art-holder {perspective:950px;}
.win-art {transform-style:preserve-3d;}
.win {will-change:transform;}
.win:hover {transform:translateY(-3px); box-shadow:9px 11px 0 rgba(48,25,52,.34);}
.win .win-art,.win .win-bar {border-radius:0;}
/* entrance stagger */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cards .win {animation:rise .55s cubic-bezier(.2,.7,.3,1) both;}
.cards .win:nth-child(1) {animation-delay:.02s;}
.cards .win:nth-child(2) {animation-delay:.09s;}
.cards .win:nth-child(3) {animation-delay:.16s;}
.cards .win:nth-child(4) {animation-delay:.23s;}
.cards .win:nth-child(5) {animation-delay:.30s;}
.cards .win:nth-child(6) {animation-delay:.37s;}
.page-main,.page-head {animation:rise .5s ease both;}
/* buttons micro */
.btn {position:relative; overflow:hidden;}
.btn::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .55s ease;
}
.btn:hover::after {transform:translateX(120%);}
.btn-pill:hover {transform:translateY(-2px);}
.btn-square {transition:background .15s,transform .1s;}
.btn-square:hover {background:var(--gold); transform:translateY(-2px);}
.nav-links a {position:relative; transition:color .15s;}
.nav-links a::after {content:""; position:absolute; left:4px; right:4px; bottom:2px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;}
.nav-links a:hover::after,.nav-links a.active::after {transform:scaleX(1);}
/* swap anim for cards */
.win.swap-anim .win-bar,.win.swap-anim .card-name,.win.swap-anim .no {transition:opacity .15s ease;}
/* ---------- PDP v3 (premium, consistent design language) ---------- */
.pdp {padding:14px 0 50px; align-items:start;}
.pdp .gal {background:var(--cream); border:var(--bw) solid var(--ink); border-radius:14px; padding:12px; box-shadow:8px 10px 0 rgba(48,25,52,.22);}
.zoom {position:relative; overflow:hidden; border-radius:8px; aspect-ratio:3/4; cursor:zoom-in; background:var(--cream-deep);}
.zoom img {width:100%; height:100%; object-fit:contain; transform-origin:var(--ox,50%) var(--oy,50%); transition:transform .28s cubic-bezier(.2,.7,.3,1);}
.zoom .zoom-hint {
  position:absolute;
  right:10px;
  top:10px;
  background:rgba(255,251,245,.92);
  border:1px solid var(--ink);
  font-family:var(--px);
  font-size:8px;
  padding:4px 7px;
  letter-spacing:.06em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:.85;
}
.pdp .series-chip {
  display:inline-block;
  font-family:var(--px);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  background:var(--cream);
  padding:5px 10px;
  box-shadow:2px 2px 0 var(--ink);
}
.pdp h1 {font-size:clamp(17px,2.4vw,25px); line-height:1.5;}
.pdp .rule {border:0; border-top:1px dashed rgba(29,29,31,.45); margin:16px 0;}
.mem {background:linear-gradient(135deg,#FFF8EF,#F1E7FB); border:1px solid var(--ink); border-left:4px solid var(--pink-deep); border-radius:8px;}
.price-row {display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.price {font-size:20px; margin:0;}
.price .was {color:#A03; font-size:13px; text-decoration:line-through; font-family:var(--mono);}
.actions {display:grid; gap:10px; margin-top:14px;}
.btn-block {display:flex; justify-content:center; width:100%;}
.trust {display:flex; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:17px; opacity:.9; margin-top:12px;}
.trust span::before {content:"\2713 "; color:var(--mint); font-weight:700;}
details.panel {border:1px solid var(--ink); border-radius:8px; background:rgba(255,251,245,.8); margin-top:10px;}
details.panel summary {cursor:pointer; font-family:var(--px); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:12px 14px; list-style:none;}
details.panel summary::-webkit-details-marker {display:none;}
details.panel summary::after {content:"+"; float:right; font-size:13px;}
details.panel[open] summary::after {content:"\2013";}
details.panel .pd {padding:2px 14px 14px; font-size:18px; font-family:var(--mono);}
.related {margin-top:34px;}
.related h2 {font-family:var(--px); font-size:12px; letter-spacing:.12em; margin:0 0 14px;}
@media (max-width:860px) {.pdp {grid-template-columns:1fr;}
}
/* ---------- footer links, logo-home, module shrink ---------- */
.foot-links {display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;}
.foot-links a {
  color:#fff;
  font-family:var(--px);
  font-size:8.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 2px;
  border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s;
}
.foot-links a:hover {color:var(--gold); border-color:var(--gold);}
.foot .dot {background:var(--gold); opacity:.65;}
.foot-tag {margin:0 0 8px;}
.foot-copy {margin:0; font-family:var(--mono); font-size:15px; letter-spacing:.05em; opacity:.82; text-transform:none;}
a.brand img {transition:transform .18s ease;}
a.brand:hover img {transform:scale(1.06);}
/* three-window module: shrink 10% (1180 -> 1062) */
.cards {max-width:1062px;}
/* ---------- lifestyle accordion + promo modal ---------- */
.models-head {display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 14px;}
.models-head h2 {font-family:var(--px); font-size:13px; letter-spacing:.12em; margin:0; text-transform:uppercase;}
.models-head .sub {font-family:var(--mono); font-size:18px; letter-spacing:.12em; text-transform:uppercase; opacity:.75;}
.models-row {display:flex; border-radius:10px;}
.model {position:relative; min-width:0; overflow:hidden;}
.model img {width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; filter:saturate(.96);}
.model .m-chip {
  position:absolute;
  left:12px;
  bottom:10px;
  background:rgba(255,251,245,.92);
  border:var(--bw) solid var(--ink);
  font-family:var(--px);
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 8px;
  opacity:0;
}
.model:hover {flex:3.6 1 0;}
.model:hover img {filter:saturate(1.05);}
.model:hover .m-chip {opacity:1;}
@media (max-width:700px) {.models-head {flex-direction:column; align-items:flex-start; gap:2px;}
.model:hover {flex:2.4 1 0;}
}
/* promo popup (XP window, docked bottom-right, non-blocking)
   Sized around the visual library's canonical product shot: 3:4 portrait (1536x2048).
   The art well is exactly 3:4, so a standard asset fills it with no crop and no dead
   bands; anything off-ratio letterboxes inside the well rather than being cut. */
.promo-overlay {position:fixed; right:22px; bottom:22px; z-index:90; width:min(392px,92vw); pointer-events:none;}
.promo-overlay[hidden] {display:none;}
.promo {
  pointer-events:auto;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:10px;
  box-shadow:8px 10px 0 rgba(29,20,46,.35);
  overflow:hidden;
  animation:promoUp .44s cubic-bezier(.2,.9,.3,1.08);
}
@keyframes promoUp{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.promo.is-closing {animation:promoDown .2s ease forwards;}
@keyframes promoDown{to{opacity:0;transform:translateY(16px) scale(.97)}}
.promo-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:linear-gradient(90deg,var(--pink-deep),#7AC7FF);
  color:#fff;
  font-family:var(--px);
  font-size:9px;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:6px 8px 6px 12px;
}
.promo-bar .btns {display:flex; gap:6px; flex:0 0 auto;}
.promo-bar .btns button {
  width:34px;
  height:28px;
  font-size:15px;
  line-height:1;
  padding:0;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:5px;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
  transition:background .15s,transform .1s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
}
.promo-bar .btns button:hover {background:var(--gold); transform:translateY(-1px);}
.promo-body {display:grid; grid-template-columns:132px 1fr; gap:14px; padding:14px; align-items:start;}
/* the art well: a framed 3:4 plate, contain so the piece is never cropped */
.promo-art {aspect-ratio:3/4; background:var(--cream-deep); border:var(--bw) solid var(--ink); border-radius:6px; overflow:hidden;}
.promo-art img {display:block; width:100%; height:100%; object-fit:contain;}
.promo-copy {display:flex; flex-direction:column; min-width:0;}
.promo-copy .overline {font-family:var(--px); font-size:8px; letter-spacing:.13em; text-transform:uppercase; color:var(--pink-deep);}
.promo-copy h3 {font-family:var(--px); font-size:11px; line-height:1.75; margin:8px 0 6px;}
.promo-copy p {font-size:16px; line-height:1.4; margin:0 0 10px; opacity:.9;}
.promo-copy .promo-item {font-family:var(--px); font-size:8px; line-height:1.6; letter-spacing:.05em; text-transform:uppercase; margin:0 0 12px; padding:5px 8px; background:var(--cream-deep); border-left:3px solid var(--pink-deep);}
.promo-copy .acts {display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:auto;}
.promo-copy .acts .btn {font-size:15px; padding:7px 12px;}
@media (max-width:640px) {.promo-overlay {right:12px; left:12px; bottom:12px; width:auto;}
.promo-body {grid-template-columns:104px 1fr; gap:12px; padding:12px;}
}
/* ---------- model pile + curtain carousel ---------- */
/* --- model module: overlapping 1:1 squares, expand on hover --- */
.models-row {display:flex; justify-content:center; align-items:center; border:none; background:transparent; overflow:visible;}
/* 150% */
.model {flex:0 0 auto; border-radius:8px; overflow:hidden; position:relative; z-index:1;}
.model+.model {border-left:none;}
.model img {width:100%; height:100%; object-fit:cover; display:block; transition:filter .5s ease;}
.models-row:hover .model {width:112px;}
.model:hover {width:min(560px,44vw); z-index:8; box-shadow:10px 13px 0 rgba(48,25,52,.28);}
.model .m-chip {opacity:0; transition:opacity .4s ease .15s;}
.model:hover .m-chip {opacity:1;}
.model:nth-child(odd) {transform:translateY(10px);}
.model:hover {transform:translateY(0);}
.model:nth-child(odd):hover {transform:translateY(0);}
@media (max-width:760px) {.model {width:150px; height:150px;}
.models-row:hover .model {width:96px;}
.model:hover {width:min(70vw,430px);}
.models-row {height:150px;}
}
/* --- carousel: curtain / opening transition --- */
.hero .track {position:relative; aspect-ratio:24/10; background:var(--cream); overflow:hidden;}
.hero .slide {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transform:scale(1.035);
  clip-path:inset(0 100% 0 0);
  transition:opacity .9s cubic-bezier(.33,.66,.3,1),
    clip-path .9s cubic-bezier(.33,.66,.3,1),
    transform 1.1s cubic-bezier(.25,.8,.3,1);
}
/* contain, never cover: the carousel artwork is 1440x600 (24:10) and the frame now
   matches it exactly, so nothing is cropped. If an off-ratio visual is ever dropped
   in, it letterboxes onto the brand backdrop instead of being cut. */
.hero .slide img {display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:contain;}
.hero .slide {background:#2A1435;}
.hero .slide.active {opacity:1; pointer-events:auto; transform:scale(1); clip-path:inset(0 0 0 0); z-index:1;}
/* the hero keeps the artwork ratio at every width: a narrower frame would crop it
   again, a taller one would add empty bands */
@media (max-width:900px) {.hero .track {aspect-ratio:24/10;}
}
@media (max-width:660px) {.hero .track {aspect-ratio:24/10;}
}
/* ---------- XP model windows, closable, 200% hover ---------- */
.models-wrap {padding:22px 18px 48px; overflow:visible;}
.models-row {display:flex; justify-content:center; align-items:center; overflow:visible; border:none; background:transparent; transition:height 1.15s cubic-bezier(.28,.74,.22,1);}
/* 200% */
.model {
  flex:0 0 auto;
  position:relative;
  width:200px;
  height:200px;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:8px;
  box-shadow:4px 6px 0 rgba(48,25,52,.22);
  overflow:hidden;
  cursor:default;
}
.model+.model {margin-left:-102px;}
.mbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:26px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  padding:0 7px;
  background:linear-gradient(90deg,var(--pink-deep),#7AC7FF);
  border-bottom:2px solid var(--ink);
}
.model.closed .mbar {background:linear-gradient(90deg,#9aa0a6,#c9d0d6);}
.mbtn {
  width:18px;
  height:16px;
  font-size:9px;
  line-height:1;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  border:1.5px solid var(--ink);
  border-radius:3px;
  font-family:var(--mono);
}
.mbtn:hover {background:var(--gold);}
.model>img {position:absolute; left:0; top:26px; width:100%; height:calc(100% - 26px); object-fit:cover; object-position:center top; display:block;}
.model .sad {position:absolute; left:0; top:26px; width:100%; height:calc(100% - 26px); display:none; align-items:center; justify-content:center; background:var(--cream-deep);}
.model .sad img {width:56%; height:56%; object-fit:contain; image-rendering:pixelated;}
.model.closed>img {display:none;}
.model.closed .sad {display:flex;}
.model:not(.closed):hover {z-index:9; box-shadow:10px 14px 0 rgba(48,25,52,.3);}
.model.closed:hover {width:200px; height:200px;}
@media (max-width:760px) {.model {width:150px; height:150px;}
.mbar {height:24px;}
.model>img {top:24px; height:calc(100% - 24px);}
.model .sad {top:24px; height:calc(100% - 24px);}
.models-row {height:150px;}
.models-wrap:hover .models-row {height:300px;}
.model.closed:hover {width:150px; height:150px;}
}
/* ---------- NTB asset pack wiring ---------- */
/* retro background (subtle fixed overlay) */
body {position:relative;}
body::before {position:fixed; inset:0; z-index:0; pointer-events:none; background:url("/assets/ext/brand-strategy/brand-assets/backgrounds/retrowave-background.svg") center/cover no-repeat; opacity:.4;}
body>* {position:relative; z-index:1;}
/* real case pngs: full-bleed cover + per-variant crop */
.win-art img.pix-cover,.win-art img.pix-l,.win-art img.pix-r,.win-art img.pix-b {width:100% !important; height:100% !important; object-fit:cover;}
.pix-l {object-position:left center;}
.pix-r {object-position:right center;}
.pix-b {object-position:center bottom;}
/* fx decor from asset pack */
.fx img,.fx {image-rendering:pixelated;}
.sun-disc {background:none !important; box-shadow:none !important; width:96px; height:96px;}
.crescent {background:none !important; box-shadow:none !important; width:64px; height:64px;}
.star {clip-path:none; width:26px; height:26px; background:none; opacity:.9;}
/* nav icons */
.nav-tools .icon {width:26px; height:26px; cursor:pointer; color:#fff; transition:transform .15s ease;}
.nav-tools .icon:hover {transform:translateY(-2px);}
/* ---------- calm refinements ---------- */
/* 1) background = new asset only (no gradient overlay) */
body {background:url("/assets/ext/brand-strategy/brand-assets/backgrounds/retrowave-background.svg")
  center/cover no-repeat fixed #6A4C93;}
body::before {content:none;}
/* text legibility over the asset background */
.ntb-title h1 {color:#fff; text-shadow:3px 3px 0 rgba(29,29,31,.6);}
.ntb-title p {color:#F5F0DC; text-shadow:2px 2px 0 rgba(29,29,31,.45);}
.page-head h1 {color:#fff; text-shadow:3px 3px 0 var(--ink);}
.page-head .sub {color:#F5F0DC;}
/* 2) decor: hidden on narrow, shown in page gutters only; ambient motion */
.fx {display:none;}
@media (min-width:1440px) {.fx {display:block; position:fixed; z-index:0; opacity:.95;}
.sun-disc {top:16vh; left:2.2vw; width:74px; height:74px; animation:spin 26s linear infinite;}
.crescent {top:60vh; right:2.6vw; width:52px; height:52px; animation:driftY 9s ease-in-out infinite;}
.star {width:20px; height:20px; animation:twinkle 3.4s ease-in-out infinite;}
.s1 {top:26vh; right:4.5vw; animation-delay:.2s;}
.s2 {top:14vh; left:6vw; animation-delay:1.1s;}
.s3 {bottom:18vh; left:4vw; animation-delay:2s;}
.s4 {bottom:26vh; right:6vw; animation-delay:.6s;}
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes driftY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce) {.fx {animation:none !important;}
}
/* 3) calmer product tilt: softer glare, gentle zoom */
.win-art::after {background:radial-gradient(320px circle at var(--gx,50%) var(--gy,40%),
  rgba(255,255,255,.12),transparent 55%);}
/* 4) model windows: stable-frame scale (no layout jump under cursor) */
.models-wrap:hover .models-row {height:220px;}
.models-row {height:220px;}
.model {width:200px; height:200px; transition:transform .55s cubic-bezier(.3,.7,.25,1),box-shadow .45s ease; will-change:transform;}
.model+.model {margin-left:-102px;}
.models-row:hover .model:not(.closed) {width:200px;}
.model:not(.closed):hover {width:200px; height:200px; transform:scale(1.4); transform-origin:center; z-index:9;}
.model.closed:hover {width:200px; height:200px; transform:none; z-index:auto;}
@media (max-width:760px) {.model {width:150px; height:150px;}
.model+.model {margin-left:-78px;}
.model:not(.closed):hover {width:150px; height:150px; transform:scale(1.35);}
.model.closed:hover {width:150px; height:150px;}
}
/* PDP zoom calmer */
.zoom:hover img {transform:scale(1.3);}
/* ---------- hero arrows alone, centered ---------- */
.hero-bar {justify-content:center; gap:18px; padding:14px 12px 8px;}
/* ---------- bg path fix, scene decor, rounded art plates, Win97 gallery ---------- */
/* 1) real asset background (correct relative path from css/ -> workspace) */
body {background:url("/assets/ext/brand-strategy/brand-assets/backgrounds/retrowave-background.svg")
  center/cover no-repeat fixed #6A4C93;}
body::before {content:none;}
/* 2) decor: reserved scenic band above hero, always visible, ambient motion */
.scene {position:relative; z-index:0; max-width:1180px; margin:8px auto 0; height:clamp(52px,8vh,86px);}
.scene .fx {display:block; position:absolute; pointer-events:none; opacity:.95; z-index:0;}
.scene .sun-disc {left:1%; top:10px; width:clamp(40px,6vw,72px); height:clamp(40px,6vw,72px); animation:spin 26s linear infinite;}
.scene .crescent {right:1%; top:12px; width:clamp(30px,4.5vw,54px); height:clamp(30px,4.5vw,54px); animation:driftY 8s ease-in-out infinite;}
.scene .star {width:clamp(14px,2.2vw,26px); height:clamp(14px,2.2vw,26px); animation:twinkle 3.6s ease-in-out infinite;}
.scene .s1 {left:30%; top:26%; animation-delay:.1s;}
.scene .s2 {left:46%; top:58%; animation-delay:1.3s;}
.scene .s3 {left:63%; top:22%; animation-delay:.7s;}
.scene .s4 {left:78%; top:52%; animation-delay:2s;}
@media (prefers-reduced-motion:reduce) {.scene .fx {animation:none !important;}
}
/* 3) window-card art: rounded, inset, premium plate */
.win-art {aspect-ratio:3/4; padding:18px; background:linear-gradient(180deg,#FDF9F2,#F0E4D6); border-bottom:1px solid var(--ink); display:flex; align-items:center; justify-content:center;}
.win-art img,.win-art img.pix-cover,.win-art img.pix-l,.win-art img.pix-r,.win-art img.pix-b {width:100% !important; height:100% !important; object-fit:cover; border-radius:14px; box-shadow:0 10px 22px rgba(48,25,52,.22);}
.win-link {border-radius:14px;}
/* 4) Win97 grey window gallery */
.w97 {background:#D4D0C8; border:2px solid #0A0A0A; outline:1px solid #FEFEFE; outline-offset:-4px; box-shadow:4px 5px 0 rgba(0,0,0,.35); padding:4px 4px 6px; max-width:1080px; margin:0 auto;}
.w97-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,#000080,#1084D0);
  color:#fff;
  font-family:var(--mono);
  font-size:16px;
  letter-spacing:.06em;
  padding:3px 5px;
}
.w97-btns {display:flex; gap:2px;}
.w97-btns i {display:inline-block; width:16px; height:14px; background:#D4D0C8; border:1px solid #0A0A0A; box-shadow:inset 1px 1px 0 #fff;}
.w97-btns i:nth-child(1) {position:relative;}
.w97-btns i:nth-child(1)::after {content:""; position:absolute; left:3px; right:3px; bottom:3px; height:1px; background:#0A0A0A;}
.w97-btns i:nth-child(3) {background:linear-gradient(#E8E6E0,#B8B4AC);}
.w97-btns i:nth-child(3)::before,.w97-btns i:nth-child(3)::after {content:""; position:absolute; left:4px; top:6px; width:8px; height:1px; background:#0A0A0A;}
.w97-btns i:nth-child(3)::before {transform:rotate(45deg);}
.w97-btns i:nth-child(3)::after {transform:rotate(-45deg);}
.w97-body {display:grid; grid-template-columns:repeat(4,1fr); gap:6px; background:#D4D0C8; padding:8px 6px 10px;}
.w97-body img {width:100%; aspect-ratio:1/1.1; object-fit:cover; display:block; border:1px solid #0A0A0A; box-shadow:inset 1px 1px 0 #fff; filter:saturate(.92);}
@media (max-width:700px) {.w97-body {grid-template-columns:repeat(2,1fr);}
}
/* ---------- page decor, full-fit cards, overlapping Win97 model windows ---------- */
/* page-edge decorations (JS-injected, all pages) */
.deco-img {position:fixed; z-index:0; pointer-events:none; opacity:.6; animation:twinkle 3.8s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce) {.deco-img {animation:none !important; opacity:.5;}
}
/* scene: keep moon + stars, sun removed */
.scene .sun-disc {display:none;}
/* full-fit window cards & hero (always fully visible on screen) */
html,body {overflow-x:hidden;}
.hero {width:min(1180px,96vw);}
.cards,.cards.grid-page {width:min(1062px,96vw); grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,2vw,24px);}
.win {min-width:0;}
.ntb-stage {width:min(560px,94vw);}
/* @media (max-width:900px) — emptied by consolidation */
@media (max-width:620px) {.cards,.cards.grid-page {grid-template-columns:1fr;}
}
/* overlapping Win97 model windows */
.winstack {display:flex; align-items:flex-start; justify-content:center; overflow:visible;}
.w97w {background:#D4D0C8; border:2px solid #0A0A0A; outline:1px solid #FEFEFE; outline-offset:-4px; box-shadow:3px 4px 0 rgba(0,0,0,.3); z-index:1;}
.w97w:hover {transform-origin:center; z-index:20; box-shadow:6px 8px 0 rgba(0,0,0,.28);}
.w97w.closed:hover {transform:none;}
.w97w-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,#000080,#1084D0);
  color:#fff;
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.05em;
  padding:2px 5px 2px 6px;
}
.w97w-t {text-transform:uppercase;}
.w97w-btns {display:flex; gap:3px;}
.wbtn {
  width:17px;
  height:15px;
  padding:0;
  font-size:9px;
  line-height:1;
  cursor:pointer;
  background:#D4D0C8;
  color:#0A0A0A;
  border:1px solid #0A0A0A;
  box-shadow:inset 1px 1px 0 #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
}
.wbtn:hover {background:#FF6B9D; color:#fff;}
.w97w-body {position:relative; background:#C0BDB4; padding:4px;}
.w97w-body img {width:100%; object-fit:cover; display:block; border:0;}
.w97w .sad {position:absolute; inset:4px; display:none; align-items:center; justify-content:center; background:#D8D4CE;}
.w97w .sad img {width:52%; height:auto; aspect-ratio:auto; image-rendering:pixelated;}
.w97w.closed .w97w-body img {display:none;}
.w97w.closed .sad {display:flex;}
@media (max-width:760px) {.w97w+.w97w {margin-left:-44px; margin-top:24px;}
.w97w:hover {transform:scale(1.5);}
}
/* ---------- 3-up grids everywhere, draggable big model windows ---------- */
/* window cards: always three across on monitors; shrink only on small screens */
@media (max-width:900px) {.cards,.cards.grid-page {grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.win-art {padding:10px;}
}
@media (max-width:760px) {.cards,.cards.grid-page {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:480px) {.cards,.cards.grid-page {grid-template-columns:1fr;}
}
/* model windows: big idle (~175%), calm hover (125%), absolute draggable */
.winstack {position:relative; margin:0 auto; padding:0; overflow:visible;}
.w97w {position:absolute; margin:0; transform-origin:center; will-change:left,top; transition:transform .45s cubic-bezier(.3,.7,.25,1),box-shadow .35s ease;}
.w97w+.w97w {margin-left:0; margin-top:0;}
.w97w.dragging,.w97w.dragging:hover {transform:none; transition:none; cursor:grabbing; box-shadow:8px 10px 0 rgba(0,0,0,.3);}
.w97w:not(.dragging) {cursor:grab;}
.w97w.closed:hover {transform:none;}
/* @media (max-width:760px) — emptied by consolidation */
/* ---------- pixel frames, round card dots, bigger calm model windows ---------- */
/* hero: crisp simple pixel frame */
.hero {border:3px solid var(--ink); border-radius:10px; box-shadow:5px 6px 0 rgba(48,25,52,.3);}
.hero .track {border-radius:7px;}
/* window-card title controls: round dots */
.win-bar i {border-radius:50%; width:9px; height:9px;}
/* model windows: bigger base, calm hover */
.w97w {transform:none;}
.w97w.dragging,.w97w.dragging:hover,.w97w.closed:hover {transform:none;}
.w97w-bar {user-select:none;}
/* @media (max-width:760px) — emptied by consolidation */
/* square model photos keep windows compact for scatter layout */
/* square windows crop the 2:3 model shots; bias the crop upward so the full head
   is kept and only empty sweater is trimmed */
.w97w-body img {aspect-ratio:1/1; object-position:50% 30%;}
/* ---------- clickable nav tools, search pop, track link ---------- */
.nav-tools a {display:inline-flex; align-items:center; color:#fff; font-size:12px; font-family:var(--px); letter-spacing:.06em; text-transform:uppercase;}
.tool-link {font-family:var(--px); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:4px 6px; border-bottom:1px solid transparent; transition:color .15s,border-color .15s;}
.tool-link:hover {color:var(--gold); border-color:var(--gold);}
.nav-tools .icon {width:26px; height:26px; margin-left:2px;}
.nav-search {display:none; width:min(520px,90vw); margin:2px auto 8px;}
.nav-search.open {display:block;}
.nav-search input {width:100%; font-family:var(--mono); font-size:18px; padding:9px 12px; border:2px solid var(--ink); background:#fff; color:var(--ink); outline:none;}
/* model windows: static scatter, no drag affordances */
.w97w {cursor:default;}
.w97w-bar {cursor:default;}
.w97w.dragging {transform:none; transition:none;}
/* ---------- compact model windows (all four visible) ---------- */
@media (max-width:760px) {.w97w {width:clamp(150px,36vw,190px);}
}
/* ---------- cart & model cascade ---------- */
.nav-tools a[aria-label="Cart"],.nav-tools a[aria-label="Search"] {position:relative;}
.cart-badge {
  position:absolute;
  top:-8px;
  right:-10px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:9px;
  background:var(--pink-deep);
  color:#fff;
  font-family:var(--px);
  font-size:8px;
  line-height:17px;
  text-align:center;
  box-shadow:1px 1px 0 var(--ink);
}
.fly-thumb {
  position:fixed;
  z-index:200;
  width:56px;
  height:70px;
  object-fit:cover;
  border:2px solid var(--ink);
  border-radius:6px;
  pointer-events:none;
  transition:transform .58s cubic-bezier(.3,.8,.3,1),opacity .58s ease;
  opacity:1;
  image-rendering:auto;
}
@media (max-width:760px) {.winstack {height:520px;}
}
/* cart page */
.cart-row {display:flex; gap:14px; align-items:center; background:rgba(255,251,245,.9); border:var(--bw) solid var(--ink); border-radius:8px; padding:10px; margin-bottom:10px;}
.cart-thumb {width:64px; height:80px; object-fit:cover; border:2px solid var(--ink); border-radius:6px;}
.cart-info {flex:1; display:flex; flex-direction:column; gap:2px;}
.cart-name {font-family:var(--px); font-size:11px;}
.cart-no {font-family:var(--mono); font-size:16px; opacity:.8;}
.cart-qty {display:flex; align-items:center; gap:8px; margin-top:8px;}
.btn.mini {padding:4px 9px; font-size:11px; border-radius:6px;}
.btn.mini.danger {color:#A33;}
.cart-price {font-family:var(--px); font-size:13px; white-space:nowrap;}
.cart-total {margin:6px 0 14px; font-family:var(--px); font-size:14px; text-align:right;}
.cart-total b {color:var(--pink-deep); font-size:18px;}
/* ---------- Shop All grouped by series ---------- */
.series-all {max-width:1062px; margin:0 auto; padding:6px 18px 40px;}
.serie {margin:0 0 44px;}
.serie .sec-head {margin-bottom:16px; color:#fff; text-shadow:2px 2px 0 var(--ink);}
.serie .sec-head h2 {font-size:clamp(16px,2.6vw,24px);}
/* ---------- PDP refinement ---------- */
/* main visual slightly smaller (image column ~90% of info column) */
.pdp {grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:30px;}
.pdp-tag {font-size:21px; font-style:italic; margin:6px 0 10px; opacity:.9;}
@media (max-width:860px) {.pdp {grid-template-columns:1fr;}
}
/* ---------- nav dots, mini bag drawer, search note ---------- */
.nav-tools .tdot {background:rgba(255,255,255,.9); opacity:.85; width:4px; height:4px; flex:none;}
/* mini bag drawer */
.drawer-ov {position:fixed; inset:0; z-index:120; background:rgba(29,20,46,.45);}
.drawer-ov[hidden] {display:none;}
.drawer {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(380px,92vw);
  z-index:121;
  background:var(--cream);
  border-left:2px solid var(--ink);
  transform:translateX(105%);
  transition:transform .32s cubic-bezier(.25,.8,.3,1);
  display:flex;
  flex-direction:column;
  box-shadow:-8px 0 22px rgba(29,20,46,.25);
}
.drawer.open {transform:none;}
.drawer-head {display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:2px solid var(--ink); font-family:var(--px); font-size:13px;}
.drawer-x {border:2px solid var(--ink); background:#fff; width:34px; height:30px; cursor:pointer; font-size:12px; border-radius:6px;}
.drawer-x:hover {background:var(--gold);}
.drawer-list {flex:1; overflow:auto; padding:12px 14px;}
.drawer-empty {font-family:var(--mono); font-size:19px; opacity:.8;}
.drow {display:flex; gap:10px; align-items:center; border:1px solid var(--ink); border-radius:8px; padding:8px; margin-bottom:10px; background:#fff;}
.dthumb {width:52px; height:64px; object-fit:cover; border:1px solid var(--ink); border-radius:6px;}
.dinfo {flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.dinfo b {font-family:var(--px); font-size:10px;}
.dinfo span {font-family:var(--mono); font-size:15px; opacity:.8;}
.dqty {display:flex; gap:6px; align-items:center; margin-top:4px;}
.dqty button {width:20px; height:20px; border:1px solid var(--ink); background:var(--cream); cursor:pointer; border-radius:4px;}
.dprice {font-family:var(--px); font-size:11px; white-space:nowrap;}
.drm {border:1px solid var(--ink); background:transparent; cursor:pointer; border-radius:4px; width:22px; height:22px; font-size:10px; color:#A33;}
.drm:hover {background:#FFD7DE;}
.drawer-foot {padding:12px 14px; border-top:2px solid var(--ink); display:grid; gap:8px;}
/* shop-all search note */
.search-note {font-family:var(--mono); font-size:19px; opacity:.9; margin:4px 0 16px;}
.search-note a {text-decoration:underline;}
/* ---------- model windows — horizontal cascade, double size ---------- */
@media (max-width:900px) {.winstack {height:500px; overflow-x:auto;}
.w97w:hover {transform:scale(1.03);}
}
/* ---------- model strip fully visible, footer clear ---------- */
.winstack {position:relative; width:100%; height:540px; overflow-x:auto; overflow-y:hidden;}
.w97w {width:clamp(280px,20vw,330px);}
.w97w:hover {transform:scale(1.04);}
.w97w.dragging,.w97w.dragging:hover {transform:none;}
@media (max-width:900px) {.w97w {width:clamp(230px,44vw,300px);}
.winstack {height:500px;}
}
/* ---------- cross-device responsive layer ---------- */
/* One consolidated layer for monitors / laptops / tablets / phones.
   Tiers: >=1600 wide desktop | 1200-1599 desktop | 1024-1199 small laptop
          768-1023 tablet | 481-767 large phone | <=480 phone | <=380 small phone */
/* --- 0. base hardening --- */
html {-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip;}
/* clip, not hidden: overflow-x:hidden on body turns it into a scroll container and
   can make the page scroll inside itself; clip keeps the same guarantee safely */
body {overflow-x:clip;}
img,svg,video {max-width:100%;}
/* NOTE: do not blanket-cap .wrap/.cards/.series-all here. A later max-width:100%
   beats their own 1180px cap (same specificity) and stretches the navbar and the
   grouped grids edge to edge, which reads as a broken, unbalanced page. */
/* --- 1. wide desktop: the layout grows with the screen instead of sitting in a
        fixed 1180px column. These need explicit width, because .hero / .cards set
        width (not just max-width) on the base rules. --- */
@media (min-width:1600px) {.wrap {max-width:1320px;}
.hero {width:min(1320px,94vw); max-width:1320px;}
.cards,.cards.grid-page {width:min(1200px,94vw); max-width:1200px; gap:28px;}
.scene {max-width:1320px;}
.series-all {width:min(1200px,94vw); max-width:1200px;}
.winstack {height:600px;}
.w97w {width:clamp(300px,19vw,352px);}
}
@media (min-width:2000px) {.wrap {max-width:1480px;}
.hero {width:min(1480px,90vw); max-width:1480px;}
.cards,.cards.grid-page {width:min(1340px,90vw); max-width:1340px; gap:32px;}
.scene {max-width:1480px;}
.series-all {width:min(1340px,90vw); max-width:1340px;}
.winstack {height:660px;}
.w97w {width:clamp(330px,16vw,400px);}
body {font-size:20px;}
}
@media (min-width:2400px) {.wrap {max-width:1640px;}
.hero {width:min(1640px,88vw); max-width:1640px;}
.cards,.cards.grid-page {width:min(1480px,88vw); max-width:1480px;}
.scene {max-width:1640px;}
.series-all {width:min(1480px,88vw); max-width:1480px;}
.winstack {height:720px;}
.w97w {width:clamp(360px,14vw,440px);}
}
/* --- 2. small laptop / tablet-landscape: hero stops touching the viewport edges,
        and the model row shrinks so all four stay on one centred, overlapping line --- */
@media (max-width:1199px) {.hero,.scene {margin-left:16px; margin-right:16px;}
.cards,.series-all {padding-left:16px; padding-right:16px;}
.w97w {width:clamp(208px,19.5vw,250px);}
.winstack {height:460px;}
/* vw-based widths ignore the classic scrollbar, so on narrow screens they
     drift past the viewport edge; let margins + max-width govern instead */
.hero {width:auto;}
.cards,.cards.grid-page {width:auto;}
}
/* --- 3. tablet: 2-up model grid, calmer chrome, slightly shorter hero --- */
@media (max-width:1023px) {body {background-attachment:scroll;}
.nav {padding:14px 14px 8px; column-gap:12px; row-gap:4px;}
.nav-links {gap:6px;}
.nav-links a {font-size:10.5px; padding:11px 7px;}
.brand img {width:58px;}
.hero {margin-left:14px; margin-right:14px;}
.cards {padding-left:14px; padding-right:14px; gap:14px;}
.series-all {padding-left:14px; padding-right:14px;}
.scene {height:clamp(44px,7vh,68px);}
.foot {padding:18px 14px 26px; font-size:9px;}
/* model windows: from overlapping cascade to a 2-up grid (inline scatter styles are overridden) */
.winstack {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; height:auto; overflow:visible; padding:0 14px; margin:14px auto 0; align-items:start;}
.w97w {position:static !important; left:auto !important; top:auto !important; z-index:auto !important; width:auto !important; margin:0 !important; transform:none !important;}
.w97w:hover,.w97w.dragging,.w97w.dragging:hover {transform:none !important;}
.w97w-bar {cursor:default;}
}
/* --- 4. large phone / small tablet portrait: 2-up catalog --- */
@media (max-width:767px) {.cards,.cards.grid-page {grid-template-columns:repeat(2,minmax(0,1fr));}
.hero-bar {gap:12px; padding:12px 10px 10px;}
.hero-bar .btn-pill {padding:12px 24px; font-size:11px;}
.ntb-title {padding:28px 14px 2px;}
.page-head {padding:26px 14px 20px;}
.foot {font-size:8.5px; letter-spacing:.08em;}
}
/* --- 5. phone: single column catalog, full-width drawer --- */
@media (max-width:480px) {.cards,.cards.grid-page {grid-template-columns:1fr; gap:16px;}
.hero {margin:6px 10px 0;}
.nav {padding:10px 12px 6px;}
.brand .word {font-size:9px;}
.nav-links {width:auto; justify-content:flex-start; gap:10px;}
.nav-links a {font-size:9px; padding:8px 5px;}
.nav-search {width:100%;}
.drawer {width:100%; border-left:0;}
.winstack {grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:0 10px;}
.cart-row {flex-wrap:wrap;}
.cart-price {width:100%; text-align:right;}
.page-head h1 {font-size:clamp(15px,5vw,20px);}
.ntb-title h1 {font-size:clamp(16px,5.6vw,22px);}
}
/* --- 6. small phone: keep pixel type legible without overflow --- */
@media (max-width:380px) {.nav-links a {font-size:8.5px; padding:7px 4px; letter-spacing:0;}
.brand img {width:44px;}
.win-bar {font-size:8px; padding:7px 9px;}
.win-body .no {font-size:10px;}
.btn-pill {padding:11px 18px; font-size:10.5px;}
.winstack {gap:10px; padding:0 8px;}
}
/* --- 7. landscape phones: trim the chrome, keep the hero artwork intact --- */
@media (max-height:520px) and (orientation:landscape) {.scene {display:none;}
.ntb-title {padding:18px 14px 2px;}
}
/* --- 8. touch devices: real tap targets, no hover-only affordances --- */
@media (pointer:coarse) {.nav-links a {padding:14px 9px;}
.nav-tools a {padding:8px 6px;}
.nav-tools .icon {width:26px; height:26px;}
#dots {gap:14px;}
#dots button {width:20px; height:20px;}
.btn-square {width:44px; height:44px;}
.btn-mint {padding:12px 22px; font-size:11px;}
.btn.mini {padding:8px 12px; font-size:12px;}
.dqty button {width:32px; height:32px; font-size:14px; border-radius:6px;}
.drm {width:32px; height:32px; font-size:13px;}
.drawer-x {width:44px; height:40px;}
.promo-bar .btns button {width:42px; height:36px;}
.win:hover .win-art::after {opacity:0;}
.win-art.zooming img {transform:none;}
}
/* --- 9. fold guard: keep the hero from eating the entire first screen ---
   The hero keeps its artwork ratio, so capping its WIDTH caps its height as well —
   no crop and no empty bands, unlike a max-height cap. This is what puts the first
   row of products inside the opening screen on shorter windows. */
.hero {max-width:min(100%, max(680px, calc((100vh - 330px) * 2.4)));}
@media (max-height:520px) and (orientation:landscape) {.hero {max-width:min(100%, max(560px, calc((100vh - 210px) * 2.4)));}
}
/* when the fold guard narrows the hero, shrink the header / decor band / product
   grid to the same column so left and right edges stay aligned on every screen */
@media (max-height:820px) {.nav.wrap,.scene {max-width:min(1180px, max(680px, calc((100vh - 330px) * 2.4)));}
.cards,.cards.grid-page {max-width:min(1062px, max(680px, calc((100vh - 330px) * 2.4)));}
}