/* ═══════════════════════════════════════════════════════════════
   APEX POSTERS — Shared Styles
   Design system: "race programme / timing screen meets print shop"

   Every selector from the previous stylesheet is preserved, so all
   of shared.js (cart, modals, checkout, filters, masonry, toasts)
   keeps working untouched. What changed is the visual language:

     · line, not box    — hairlines instead of bordered dark cards
     · flat red         — #E10600, never a glow
     · Archivo wide     — the squared grotesque F1 actually uses
     · JetBrains Mono   — timing-screen numerals for all data
     · one hover effect — never four at once
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Ground */
  --black:#0A0A0B; --dark:#101114; --panel:#131417; --panel2:#191A1E;
  --paper:#F1EFEA; --paper-ink:#141414;

  /* Line, not box */
  --border:rgba(255,255,255,.13);
  --border2:rgba(255,255,255,.24);
  --line-soft:rgba(255,255,255,.07);
  --line-paper:rgba(0,0,0,.15);

  /* Ink */
  --silver:#6C6E75; --light:#B9BBC0; --white:#FFFFFF; --faint:#3A3C42;

  /* One red. Flat. */
  --red:#E10600; --red2:#FF1A0D; --red-dim:#8E0400;
  --red-glow:rgba(225,6,0,.16); --red-subtle:rgba(225,6,0,.07);
  --gold:#C9A84C; --green:#1F7A3C;

  /* Geometry — square. The radius was a big part of the old "AI card" look. */
  --radius:0px; --radius-lg:0px;
  --shear:10px;                    /* the F1 trailing-edge cut */

  --ease:.18s ease;
  --ease-med:.32s cubic-bezier(.4,0,.2,1);
  --ease-spring:.5s cubic-bezier(.34,1.56,.64,1);
  --shadow-card:0 18px 50px rgba(0,0,0,.55);
  --shadow-red:none;

  --gut:clamp(20px,4vw,56px);
  --max:1520px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { background:var(--black); color:var(--light); font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.6; overflow-x:hidden; }
::selection { background:var(--red); color:#fff; }
::-webkit-scrollbar { width:9px; }
::-webkit-scrollbar-track { background:var(--black); }
::-webkit-scrollbar-thumb { background:#2A2C31; }
::-webkit-scrollbar-thumb:hover { background:var(--red); }
img { display:block; } a { text-decoration:none; color:inherit; }

/* Display + data type helpers */
.d, .display { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; text-transform:uppercase; line-height:.88; letter-spacing:-.015em; color:var(--white); }
.mono { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--silver); }

/* ── Topbar ── */
.topbar { background:var(--red); color:#fff; text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; padding:8px 16px; position:relative; overflow:hidden; }
.topbar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent); animation:topbar-shine 4.5s linear infinite; }
@keyframes topbar-shine { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ── Nav ── */
nav { position:sticky; top:0; z-index:100; background:rgba(10,10,11,.86); backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 var(--gut); height:66px; transition:background var(--ease),box-shadow var(--ease); }
nav.scrolled { background:rgba(10,10,11,.97); box-shadow:0 1px 0 var(--border); }
.nav-logo img { height:34px; filter:none; }
.nav-links { display:flex; align-items:center; gap:30px; list-style:none; }
.nav-links li { position:relative; }
.nav-links a { color:var(--silver); font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; transition:color var(--ease); position:relative; padding-bottom:3px; }
.nav-links > li > a::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:var(--red); transform:scaleX(0); transition:transform .22s; transform-origin:left; }
.nav-links a:hover, .nav-links a.active { color:var(--white); }
.nav-links > li > a:hover::after, .nav-links > li > a.active::after { transform:scaleX(1); }

/* ── Nav dropdowns (Wallpapers / Pictures) ── */
.has-sub > a { display:inline-flex; align-items:center; gap:5px; }
.has-sub .sub-chevron { transition:transform .2s ease; }
.has-sub:hover .sub-chevron { transform:rotate(180deg); }
.has-sub::before { content:''; position:absolute; left:-16px; right:-16px; top:100%; height:26px; display:none; }
.has-sub:hover::before { display:block; }
.sub-menu {
  position:absolute; top:calc(100% + 18px); left:50%;
  transform:translateX(-50%) translateY(6px);
  background:rgba(12,12,14,.98); backdrop-filter:blur(20px);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:8px 0; min-width:210px; list-style:none;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:150; box-shadow:var(--shadow-card);
}
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity:1; pointer-events:all; transform:translateX(-50%) translateY(0); }
.sub-head { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.22em; color:var(--red); text-transform:uppercase; padding:10px 18px 5px; }
.sub-menu li a { display:block; padding:9px 18px 9px 28px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--silver); white-space:nowrap; transition:color var(--ease),background var(--ease); }
.sub-menu li a:hover { color:var(--white); background:var(--red-subtle); }
.nav-right { display:flex; align-items:center; gap:12px; }

/* Hamburger — hidden on desktop, injected by shared.js */
.nav-toggle { display:none; background:transparent; border:1px solid var(--border); color:var(--light); width:40px; height:40px; border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:0; transition:border-color var(--ease); }
.nav-toggle:hover { border-color:var(--red); }
.nav-toggle span { display:block; width:18px; height:2px; background:currentColor; transition:transform .25s ease, opacity .2s ease; }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.cart-btn { background:transparent; color:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:10px 16px; font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:9px; transition:border-color var(--ease),color var(--ease); }
.cart-btn:hover { border-color:var(--red); }
.cart-count { background:var(--red); color:#fff; border-radius:0; min-width:20px; height:18px; padding:0 5px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.cart-count.bump { animation:bump .35s var(--ease-spring); }
@keyframes bump { 0%,100%{transform:scale(1)} 50%{transform:scale(1.55)} }

/* ── Buttons ── */
.btn { border-radius:var(--radius); padding:15px 26px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; display:inline-flex; align-items:center; gap:11px; border:1px solid transparent; transition:background var(--ease),color var(--ease),border-color var(--ease); }
.btn-primary { background:var(--red); color:#fff; border-color:var(--red); clip-path:polygon(0 0,100% 0,calc(100% - var(--shear)) 100%,0 100%); padding-right:34px; }
.btn-primary:hover { background:var(--red2); border-color:var(--red2); }
.btn-ghost { background:transparent; color:var(--white); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--white); background:var(--white); color:var(--black); }

/* ── Section ── */
.section { padding:clamp(64px,8vw,116px) var(--gut); max-width:var(--max); margin:0 auto; }
.section-label { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; color:var(--red); text-transform:uppercase; margin-bottom:14px; }
.section-title { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:clamp(34px,5.2vw,72px); letter-spacing:-.015em; text-transform:uppercase; color:var(--white); line-height:.88; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:clamp(32px,4vw,52px); padding-bottom:22px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:20px; }

/* ── Footer ── */
.site-footer { background:var(--black); border-top:1px solid var(--border); padding:clamp(48px,6vw,76px) var(--gut) 28px; }
.footer-inner { max-width:var(--max); margin:0 auto; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:44px; margin-bottom:44px; padding-bottom:44px; border-bottom:1px solid var(--border); }
.footer-logo img { height:32px; filter:none; margin-bottom:18px; }
.footer-desc { font-size:13px; color:var(--silver); line-height:1.7; max-width:30ch; }
.footer-col h4 { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; color:var(--red); text-transform:uppercase; margin-bottom:16px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:13px; color:var(--silver); transition:color var(--ease); }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-copy { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.footer-legal { display:flex; gap:22px; }
.footer-legal a { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); transition:color var(--ease); }
.footer-legal a:hover { color:var(--silver); }

/* ── Cart Drawer ── */
.cart-overlay { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:200; opacity:0; pointer-events:none; transition:opacity .3s ease; backdrop-filter:blur(4px); }
.cart-overlay.open { opacity:1; pointer-events:all; }
.cart-drawer { position:fixed; top:0; right:0; width:440px; max-width:100vw; height:100vh; background:var(--dark); border-left:1px solid var(--border); z-index:201; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-header { padding:22px 26px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cart-header h2 { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:22px; letter-spacing:-.01em; text-transform:uppercase; color:var(--white); display:flex; align-items:center; gap:10px; }
.cart-close-btn { background:transparent; border:1px solid var(--border); color:var(--silver); width:34px; height:34px; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:color var(--ease),border-color var(--ease); }
.cart-close-btn:hover { color:var(--red); border-color:var(--red); }
.cart-items { flex:1; overflow-y:auto; padding:20px 26px; }
.cart-empty { text-align:center; padding:64px 20px; color:var(--silver); }
.cart-empty-icon { width:56px; height:56px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; color:var(--faint); font-size:24px; }
.cart-empty p { font-size:14px; line-height:1.6; }
.cart-item { display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.cart-item-img { width:62px; height:78px; object-fit:cover; border-radius:0; flex-shrink:0; border:1px solid var(--border); }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 112,'wght' 700; font-size:15px; text-transform:uppercase; color:var(--white); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-sub { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); margin-bottom:7px; }
.cart-item-res { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; background:transparent; color:var(--gold); border:1px solid rgba(201,168,76,.4); border-radius:0; padding:3px 7px; margin-bottom:8px; }
.cart-item-actions { display:flex; align-items:center; justify-content:space-between; }
.cart-item-price { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; color:var(--white); }
.cart-remove-btn { background:none; border:none; color:var(--silver); font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color var(--ease); }
.cart-remove-btn:hover { color:var(--red); }
.cart-footer { padding:20px 26px; border-top:1px solid var(--border); }
.cart-total-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-total-row span { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--silver); text-transform:uppercase; letter-spacing:.16em; }
.cart-total-row strong { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:30px; letter-spacing:-.02em; color:var(--white); }
.cart-note { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:18px; }
.cart-checkout-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:var(--red); color:#fff; border:none; border-radius:var(--radius); padding:16px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background var(--ease); }
.cart-checkout-btn:hover { background:var(--red2); }

/* ── Product Modal ── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.9);
  z-index:300; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  display:flex; align-items:center; justify-content:center;
  padding:20px; backdrop-filter:blur(6px);
}
.modal-overlay.open { opacity:1; pointer-events:all; }

.modal {
  background:var(--dark); border:1px solid var(--border);
  border-radius:var(--radius-lg); width:100%; max-width:920px;
  max-height:92vh; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  transform:scale(.98) translateY(10px);
  transition:transform .3s cubic-bezier(.3,.9,.3,1);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }

.modal-slideshow { background:var(--black); position:relative; height:560px; overflow:hidden; }
.modal-slide { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.modal-slide.active { opacity:1; }
.modal-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.slideshow-nav-dots { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.slideshow-dot { width:22px; height:2px; border-radius:0; background:rgba(255,255,255,.28); cursor:pointer; border:none; transition:background var(--ease); padding:0; }
.slideshow-dot.active { background:var(--red); }
.slideshow-prev, .slideshow-next {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(8,8,9,.8); border:1px solid var(--border);
  color:var(--white); width:38px; height:38px; border-radius:0;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:3; transition:background var(--ease),border-color var(--ease);
  backdrop-filter:blur(4px);
}
.slideshow-prev { left:12px; } .slideshow-next { right:12px; }
.slideshow-prev:hover, .slideshow-next:hover { background:var(--red); border-color:var(--red); }

.modal-body { padding:30px 30px; display:flex; flex-direction:column; overflow-y:auto; max-height:560px; }
.modal-close { align-self:flex-end; background:transparent; border:1px solid var(--border); color:var(--silver); width:34px; height:34px; border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0; transition:color var(--ease),border-color var(--ease); }
.modal-close:hover { color:var(--red); border-color:var(--red); }
.modal-cat-tag { display:inline-flex; align-items:center; gap:6px; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:10px; }
.modal-subtitle { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--silver); letter-spacing:.16em; text-transform:uppercase; margin-bottom:10px; }
.modal-title { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:38px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); line-height:.9; margin-bottom:16px; }
.modal-desc { font-size:13px; color:var(--silver); line-height:1.72; margin-bottom:22px; }

/* Specs as a timing-board table rather than a grid of little cards */
.modal-specs { display:block; margin-bottom:22px; border-top:1px solid var(--border); }
.modal-spec { background:transparent; border:none; border-bottom:1px solid var(--line-soft); border-radius:0; padding:11px 0; display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.modal-spec-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--faint); letter-spacing:.18em; text-transform:uppercase; margin-bottom:0; }
.modal-spec-val { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--white); font-weight:500; text-align:right; }

.modal-add { background:var(--red); color:#fff; border:none; border-radius:var(--radius); padding:15px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; transition:background var(--ease); margin-bottom:12px; }
.modal-add:hover { background:var(--red2); }
.modal-add.added { background:var(--green); cursor:default; }
.modal-guarantee { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }

/* ── Per-type modal ratios — the image box matches the product,
      so customers always see the full artwork, uncropped ── */
.modal-slide img { object-fit:contain; background:var(--black); }
.modal.modal-poster .modal-slideshow { height:auto; aspect-ratio:1/1.4142; max-height:74vh; }
.modal.modal-poster .modal-body { max-height:74vh; }
.modal-poster .modal-slide img { object-fit:cover; }
.modal.modal-tall { grid-template-columns:minmax(0,340px) 1fr; max-width:860px; }
.modal.modal-tall .modal-slideshow { height:auto; aspect-ratio:9/16; max-height:80vh; }
.modal.modal-tall .modal-body { max-height:80vh; }
.modal.modal-landscape { grid-template-columns:1fr; max-width:680px; max-height:92vh; overflow-y:auto; }
.modal-landscape .modal-slideshow { height:auto; aspect-ratio:16/9; }
.modal-landscape .modal-body { max-height:none; overflow-y:visible; }

/* ── Modal price row ── */
.modal-price-row { display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.modal-price { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:50px; letter-spacing:-.025em; color:var(--white); line-height:1; }
.modal-price-type { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--silver); letter-spacing:.14em; text-transform:uppercase; }

/* ── Checkout Modal ── */
.checkout-modal { max-width:560px; grid-template-columns:1fr !important; padding:36px 40px; overflow-y:auto; max-height:92vh; }
.checkout-modal h2 { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:32px; letter-spacing:-.02em; text-transform:uppercase; color:var(--white); margin-bottom:8px; display:flex; align-items:center; gap:10px; }
.checkout-modal p.sub { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver); margin-bottom:26px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--silver); }
.form-group input { background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); padding:13px 14px; font-size:14px; font-family:'Inter',sans-serif; transition:border-color var(--ease); outline:none; }
.form-group input:focus { border-color:var(--red); }
.form-group input.error { border-color:var(--red); }
.payment-tabs { display:flex; margin-bottom:22px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.payment-tab { flex:1; padding:13px; background:transparent; border:none; color:var(--silver); font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; transition:background var(--ease),color var(--ease); border-right:1px solid var(--border); }
.payment-tab:last-child { border-right:none; }
.payment-tab.active { background:var(--red); color:#fff; }
.payment-tab:hover:not(.active) { background:var(--panel2); color:var(--white); }
.payment-panel { display:none; } .payment-panel.active { display:block; }
#stripe-card-element { background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius); padding:14px; margin-bottom:16px; transition:border-color var(--ease); }
#stripe-card-element.StripeElement--focus { border-color:var(--red); }
#stripe-error { color:var(--red); font-family:'JetBrains Mono',monospace; font-size:11px; margin-bottom:12px; display:none; }
.checkout-summary { background:transparent; border:1px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:22px; }
.checkout-summary h3 { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:14px; }
.summary-line { display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; color:var(--light); }
.summary-line.total { border-top:1px solid var(--border); padding-top:10px; margin-top:6px; font-weight:600; font-size:15px; color:var(--white); }
.place-order-btn { width:100%; background:var(--red); color:#fff; border:none; border-radius:var(--radius); padding:16px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; transition:background var(--ease); }
.place-order-btn:hover:not(:disabled) { background:var(--red2); }
.place-order-btn:disabled { background:#2A2C31; color:var(--silver); cursor:not-allowed; }
.secure-note-co { text-align:center; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ── Product search ── */
.search-box { position:relative; max-width:340px; width:100%; }
.search-box .search-icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--silver); pointer-events:none; display:flex; }
.search-box input { width:100%; background:transparent; border:1px solid var(--border); border-radius:var(--radius); color:var(--white); padding:12px 36px 12px 38px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; outline:none; transition:border-color var(--ease); }
.search-box input:focus { border-color:var(--red); }
.search-box input::placeholder { color:var(--faint); text-transform:uppercase; letter-spacing:.14em; }
.search-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--silver); cursor:pointer; padding:6px; display:none; align-items:center; }
.search-box.has-value .search-clear { display:flex; }
.search-clear:hover { color:var(--red); }
.no-results { grid-column:1/-1; text-align:center; padding:60px 20px; border:1px dashed var(--border); border-radius:var(--radius-lg); }
.no-results p:first-child { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:26px; letter-spacing:-.01em; text-transform:uppercase; color:var(--white); margin-bottom:8px; }
.no-results p:last-child { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); }

/* ── "More Like This" strip in the product viewer ── */
.modal-related { margin-top:18px; border-top:1px solid var(--border); padding-top:16px; }
.modal-related-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.18em; color:var(--red); text-transform:uppercase; margin-bottom:12px; }
.modal-related-row { display:flex; gap:8px; flex-wrap:wrap; }
.modal-related-row img { width:54px; height:76px; object-fit:cover; border-radius:0; border:1px solid var(--border); cursor:pointer; background:var(--black); transition:border-color .2s ease; }
.modal-related-row img.rel-ls { width:96px; height:54px; }
.modal-related-row img:hover { border-color:var(--red); }

/* ── Card image loading shimmer (hidden once the image loads) ── */
@keyframes card-shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.card-img-wrap::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%); animation:card-shimmer 1.1s linear infinite; pointer-events:none; z-index:1; }
.card-img-wrap:has(.card-img[data-loaded])::before { display:none; }

/* ── Cart drawer items slide in with a stagger ── */
@keyframes cart-item-in { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
#cartItems > div { animation:cart-item-in .35s ease both; }
#cartItems > div:nth-child(2) { animation-delay:.05s; }
#cartItems > div:nth-child(3) { animation-delay:.1s; }
#cartItems > div:nth-child(4) { animation-delay:.15s; }
#cartItems > div:nth-child(5) { animation-delay:.2s; }
#cartItems > div:nth-child(n+6) { animation-delay:.25s; }

/* ── Collections (bundles) ── */
.collections-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.collection-card { background:var(--black); border:none; border-radius:0; overflow:hidden; display:flex; flex-direction:column; transition:background var(--ease); }
.collection-card:hover { background:var(--panel); }
.col-montage { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1px; aspect-ratio:16/10; position:relative; background:var(--line-soft); flex-shrink:0; overflow:hidden; }
.col-montage img { width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; display:block; transition:filter .3s ease; filter:saturate(.94); }
.collection-card:hover .col-montage img { filter:saturate(1.05); }
.col-count { position:absolute; bottom:0; right:0; background:rgba(8,8,9,.88); color:#fff; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:6px 11px; border-radius:0; border:none; }
.col-body { padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; border-top:1px solid transparent; transition:border-color var(--ease); }
.collection-card:hover .col-body { border-top-color:var(--red); }
.col-name { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 112,'wght' 700; font-size:19px; letter-spacing:0; text-transform:uppercase; color:var(--white); line-height:1.1; margin-bottom:7px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.col-sub { font-size:12.5px; color:var(--silver); margin-bottom:14px; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.col-price-row { display:flex; align-items:baseline; gap:10px; margin-bottom:16px; margin-top:auto; }
.col-was { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--faint); text-decoration:line-through; }
.col-now { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:28px; letter-spacing:-.02em; color:var(--white); }
.col-save { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:#4ADE80; background:transparent; border:1px solid rgba(74,222,128,.4); border-radius:0; padding:4px 8px; }
.col-actions { display:flex; gap:8px; }
.col-view { flex-shrink:0; background:transparent; border:1px solid var(--border); color:var(--light); border-radius:var(--radius); padding:12px 18px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:color var(--ease),border-color var(--ease); }
.col-view:hover { color:var(--white); border-color:var(--white); }
.col-add { flex:1; background:var(--red); color:#fff; border:none; border-radius:var(--radius); padding:12px 14px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:background var(--ease); }
.col-add:hover { background:var(--red2); }
.col-add.added { background:var(--green); }

/* Collection detail modal */
.modal.modal-collection { grid-template-columns:1fr; max-width:720px; max-height:92vh; overflow-y:auto; }
.colm-head { padding:30px 34px 6px; display:flex; flex-direction:column; }
.colm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:10px; padding:18px 34px 34px; }
.colm-item { cursor:pointer; }
.colm-item img { width:100%; aspect-ratio:1/1.4142; object-fit:cover; border-radius:0; border:1px solid var(--border); background:var(--black); transition:border-color .2s ease; }
.colm-item:hover img { border-color:var(--red); }
.colm-item span { display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--silver); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:600px) { .colm-head { padding:22px 20px 4px; } .colm-grid { padding:14px 20px 24px; } }

/* ── Gallery collection chips ── */
.gallery-cats { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:26px; }
.gcat-chip { background:transparent; border:1px solid var(--border); color:var(--silver); border-radius:0; padding:9px 15px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:7px; transition:color var(--ease),border-color var(--ease),background var(--ease); }
.gcat-chip span { font-size:9.5px; opacity:.6; }
.gcat-chip:hover { color:var(--white); border-color:var(--border2); }
.gcat-chip.active { background:var(--red); border-color:var(--red); color:#fff; }
.gcat-chip.active span { opacity:.8; }

/* ── Load More ── */
.load-more-wrap { display:flex; justify-content:center; margin-top:34px; }
.load-more-btn { background:transparent; border:1px solid var(--border); color:var(--light); border-radius:var(--radius); padding:15px 44px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:color var(--ease),border-color var(--ease),background var(--ease); }
.load-more-btn:hover { border-color:var(--white); color:var(--black); background:var(--white); }

/* ── Back to top ── */
.back-to-top { position:fixed; right:22px; bottom:22px; width:42px; height:42px; border-radius:0; background:rgba(10,10,11,.9); border:1px solid var(--border); color:var(--light); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:150; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .25s ease,transform .25s ease,background var(--ease),border-color var(--ease); backdrop-filter:blur(8px); }
.back-to-top.show { opacity:1; pointer-events:all; transform:translateY(0); }
.back-to-top:hover { background:var(--red); border-color:var(--red); color:#fff; }

/* ── Toast ── */
.toast { position:fixed; bottom:36px; left:50%; transform:translateX(-50%) translateY(80px); background:var(--panel); border:1px solid var(--border2); border-left:3px solid var(--red); color:var(--white); padding:14px 24px; border-radius:0; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; z-index:500; transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease; white-space:nowrap; box-shadow:var(--shadow-card); opacity:0; display:flex; align-items:center; gap:10px; }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.toast.error { border-left-color:var(--red); }
.toast.success { border-left-color:#4ADE80; }

/* ── Spinner ── */
.spinner { display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .65s linear infinite; flex-shrink:0; }
.spinner-lg { width:30px; height:30px; border-width:2.5px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:.08s; } .reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; } .reveal-d4 { transition-delay:.32s; }

/* ── Marquee ── */
.marquee-wrap { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--black); padding:14px 0; position:relative; }
.marquee-wrap::before, .marquee-wrap::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:1; }
.marquee-wrap::before { left:0; background:linear-gradient(to right,var(--black),transparent); }
.marquee-wrap::after { right:0; background:linear-gradient(to left,var(--black),transparent); }
.marquee-track { display:flex; animation:marquee 40s linear infinite; white-space:nowrap; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); padding:0 22px; display:flex; align-items:center; flex-shrink:0; transition:color var(--ease); }
.marquee-item:hover { color:var(--light); }
.marquee-dot { width:3px; height:3px; background:var(--red); border-radius:0; margin:0 22px; flex-shrink:0; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── Responsive ── */
@media (max-width:1100px) {
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  nav { padding:0 16px; }
  .topbar { font-size:9px; letter-spacing:.12em; padding:8px 12px; }
  .nav-toggle { display:flex; }
  /* Nav links become a dropdown panel under the sticky nav */
  .nav-links {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,10,11,.99); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:6px 0 10px;
    opacity:0; pointer-events:none; transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease;
  }
  .nav-links.open { opacity:1; pointer-events:all; transform:translateY(0); }
  .nav-links li a { display:block; padding:14px 24px; font-size:11px; }
  .nav-links a::after { display:none; }
  .nav-links li a:active { background:var(--red-subtle); }
  /* Dropdowns flatten into the mobile panel — always expanded, indented */
  .has-sub::before { display:none !important; }
  .has-sub .sub-chevron { display:none; }
  .sub-menu {
    position:static; transform:none; opacity:1; pointer-events:all;
    background:transparent; backdrop-filter:none; border:none;
    box-shadow:none; padding:0 0 4px; min-width:0;
  }
  .sub-head { padding:8px 24px 2px 36px; }
  .sub-menu li a { padding:11px 24px 11px 48px; font-size:10.5px; }
  .cart-btn { padding:10px 13px; }
  .section { padding:56px 20px; }
  .site-footer { padding:48px 20px 24px; }
  .footer-top { grid-template-columns:1fr 1fr; gap:32px; }
  /* Stack modal to single column on mobile */
  .modal { grid-template-columns:1fr !important; max-height:95vh; overflow-y:auto; }
  .modal-slideshow { height:260px; }
  .modal-body { max-height:none !important; overflow-y:visible; }
  .modal.modal-poster .modal-slideshow { height:auto; aspect-ratio:1/1.4142; max-height:52vh; }
  .modal.modal-tall { grid-template-columns:1fr !important; }
  .modal.modal-tall .modal-slideshow { height:auto; aspect-ratio:9/16; max-height:56vh; }
  .form-row { grid-template-columns:1fr; }
  .checkout-modal { padding:24px; }
  .modal-title { font-size:30px; }
  .modal-price { font-size:40px; }
}

/* ── Product cards (injected by JS on shop / wallpapers / pictures) ──
   One entrance animation, one hover response. The old sheet stacked a
   lift + image scale + shimmer + shine sweep on every card at once. */
@keyframes card-in { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.product-card { animation:card-in .45s cubic-bezier(.3,.8,.3,1) both; }
.product-card:nth-child(1)  { animation-delay:.02s; } .product-card:nth-child(2)  { animation-delay:.05s; }
.product-card:nth-child(3)  { animation-delay:.08s; } .product-card:nth-child(4)  { animation-delay:.11s; }
.product-card:nth-child(5)  { animation-delay:.14s; } .product-card:nth-child(6)  { animation-delay:.17s; }
.product-card:nth-child(7)  { animation-delay:.20s; } .product-card:nth-child(8)  { animation-delay:.23s; }
.product-card:nth-child(9)  { animation-delay:.26s; } .product-card:nth-child(10) { animation-delay:.29s; }
.product-card:nth-child(11) { animation-delay:.32s; } .product-card:nth-child(12) { animation-delay:.35s; }

/* ── Accessibility: respect reduced-motion preference ── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}

/* ═══════════════════════════════════════════════════════════════
   SHOP / GALLERY COMPONENTS
   These used to be duplicated inline across shop, wallpapers,
   wallpapers-landscape, pictures and collections. Defined once here
   in the new system; each page keeps only what is genuinely its own.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page hero (shop / wallpapers / pictures / collections) ── */
.shop-hero { background:var(--black); border-bottom:1px solid var(--border); padding:clamp(40px,5vw,64px) var(--gut) clamp(32px,4vw,48px); position:relative; overflow:hidden; }
.shop-hero::before { display:none; }
.shop-hero-inner { max-width:var(--max); margin:0 auto; position:relative; }
.shop-hero h1 { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 118,'wght' 800; font-size:clamp(40px,7vw,84px); letter-spacing:-.025em; line-height:.88; text-transform:uppercase; color:var(--white); margin-bottom:14px; }
.shop-hero h1 span { color:var(--red); }
.shop-hero p { font-size:15px; color:var(--silver); max-width:56ch; line-height:1.7; }

/* ── Shop layout + category sidebar ── */
.shop-body { max-width:var(--max); margin:0 auto; padding:clamp(32px,4vw,48px) var(--gut) clamp(56px,7vw,88px); display:grid; grid-template-columns:210px 1fr; gap:clamp(28px,3.5vw,48px); align-items:start; }
.sidebar { position:sticky; top:88px; }
.sidebar-section { margin-bottom:26px; }
.sidebar-label { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; color:var(--red); text-transform:uppercase; margin-bottom:14px; }
.cat-list { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line-soft); }
.cat-btn { background:transparent; border:none; border-bottom:1px solid var(--line-soft); color:var(--silver); font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; text-align:left; padding:12px 0; border-radius:0; cursor:pointer; display:flex; align-items:center; gap:9px; transition:color var(--ease); width:100%; }
.cat-btn:hover { background:none; color:var(--white); }
.cat-btn.active { background:none; color:var(--red); }
.cat-count { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--faint); background:none; border:none; border-radius:0; padding:0; }
.cat-btn.active .cat-count { background:none; border:none; color:var(--red); }
.sidebar-divider { height:1px; background:var(--border); margin:20px 0; }
.shop-count { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:24px; }
.shop-count strong { color:var(--white); font-weight:500; }

/* ── The contact-sheet product grid ──
   No card, no radius, no panel fill, no lift, no glow. Artwork edge to
   edge on a 1px grid; the only chrome is a hairline and a caption. */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.product-card { background:var(--black); border:none; border-radius:0; overflow:hidden; cursor:pointer; position:relative; transition:background var(--ease); will-change:auto; }
.product-card:hover { background:var(--panel); transform:none; border-color:transparent; box-shadow:none; }
.product-card.hidden { display:none; }
.card-img-wrap { overflow:hidden; position:relative; aspect-ratio:1/1.4142; background:var(--dark); }
.card-img { width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1), filter .35s; filter:saturate(.94); }
.product-card:hover .card-img { transform:scale(1.035); filter:saturate(1.06); }

/* Category badge — squared, mono, with the F1 trailing-edge cut */
.card-badge { position:absolute; top:0; left:0; z-index:2; font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; padding:6px 15px 6px 10px; border-radius:0; backdrop-filter:none; clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%); }
.badge-race   { background:var(--red); color:#fff; }
.badge-driver { background:var(--gold); color:#000; }
.badge-team   { background:#F0F0F0; color:#111; }
.badge-car    { background:#1565B4; color:#fff; }

.card-body { padding:14px 14px 17px; border-top:1px solid transparent; transition:border-color var(--ease); }
.product-card:hover .card-body { border-top-color:var(--red); }
.card-circuit { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--red); letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px; }
.card-name { font-family:'Archivo',sans-serif; font-variation-settings:'wdth' 112,'wght' 700; font-size:15.5px; letter-spacing:.005em; text-transform:uppercase; color:var(--white); line-height:1.15; margin-bottom:4px; }
.card-meta { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--silver); margin-bottom:14px; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* price: small, plain, confident — not a 30px display slab */
.card-price { font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--white); }
.card-price sup { font-size:78%; font-family:'JetBrains Mono',monospace; font-weight:400; vertical-align:baseline; }
.atc-btn { background:transparent; color:var(--white); border:1px solid var(--border); border-radius:0; padding:9px 14px; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:background var(--ease),border-color var(--ease),color var(--ease); }
.atc-btn:hover { background:var(--red); border-color:var(--red); color:#fff; transform:none; box-shadow:none; }
.atc-btn.added { background:var(--green); border-color:var(--green); color:#fff; cursor:default; transform:none; }

/* ── Wallpaper / picture gallery layout ── */
.wp-body { max-width:var(--max); margin:0 auto; padding:clamp(28px,3.5vw,44px) var(--gut) clamp(56px,7vw,88px); }
.wp-meta-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.wp-count { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.wp-count strong { color:var(--white); font-weight:500; }
.wp-info-pill { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver); border:1px solid var(--border); border-radius:0; padding:7px 12px; display:inline-flex; align-items:center; gap:7px; }

.wp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.wp-grid .no-results, .wp-grid.masonry-on .no-results { grid-column:1/-1; background:var(--black); }
/* Masonry mode — JS splits cards into .masonry-col children.
   The wrapper HOLDS its ratio as a placeholder until the image reports
   data-loaded, then releases to the image's natural height. Releasing it
   immediately collapses every card to zero and the column jumps as images
   arrive. */
.wp-grid.masonry-on { display:flex; align-items:flex-start; gap:1px; }
.wp-grid.masonry-on .masonry-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.wp-grid.masonry-on .card-img-wrap:has(.card-img[data-loaded]) { aspect-ratio:auto; }
.wp-grid.masonry-on .card-img-wrap:has(.card-img[data-loaded]) .card-img { height:auto; }

/* Portrait phone wallpapers — 9:16.
   The grid needs class="wp-grid portrait" in the markup; without it these
   inherit the A-series poster ratio and render as tall posters. */
.wp-grid.portrait .card-img-wrap { aspect-ratio:9/16; }
/* Landscape wallpapers + pictures — 16:9 (needs class="wp-grid landscape") */
.wp-grid.landscape { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.wp-grid.landscape .card-img-wrap { aspect-ratio:16/9; }

/* Collections page body wrap */
.col-body-wrap { max-width:var(--max); margin:0 auto; padding:clamp(32px,4vw,48px) var(--gut) clamp(56px,7vw,88px); }

@media (max-width:900px) {
  .shop-body { grid-template-columns:1fr; padding:28px 20px 56px; }
  .shop-hero { padding:34px 20px 28px; }
  .sidebar { position:static; }
  .cat-list { flex-direction:row; flex-wrap:wrap; gap:6px; border-top:none; }
  .cat-btn { width:auto; flex-shrink:0; border:1px solid var(--border); border-bottom:1px solid var(--border); padding:9px 13px; }
  .cat-btn.active { border-color:var(--red); }
  .wp-body, .col-body-wrap { padding:24px 20px 56px; }
  .wp-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .wp-grid.landscape { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
}

/* Circuit Series badge — the in-house generated track set */
.badge-circuit { background:#12E6D0; color:#04211E; }

/* Checkout: demo banner + field hint (rendered by renderCheckout) */
.demo-note { border:1px solid rgba(201,168,76,.4); border-left:3px solid var(--gold); padding:13px 16px; margin-bottom:20px; font-size:13px; color:var(--gold); line-height:1.6; }
.demo-note strong { color:var(--gold); font-weight:600; }
.field-hint { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.checkout-modal .modal-close { align-self:flex-end; margin-bottom:14px; }