/* Chase The Hits — site design system
   Premium UK TCG retailer: dark brand bands, warm paper body, gold accents,
   official card artwork as the visual language. */

:root {
  --ink: #0b0b10;
  --ink-2: #14141c;
  --ink-3: #1f1f2a;
  --paper: #f6f5f1;
  --paper-2: #edebe4;
  --white: #ffffff;
  --text: #15151c;
  --muted: #5f6170;
  --faint: #9a9caa;
  --line: #e4e2da;
  --line-dark: rgba(255,255,255,.08);
  --gold: #f5c400;
  --gold-2: #ffd93d;
  --gold-ink: #7a6000;
  --red: #e0242a;
  --green: #1f8a4c;
  --shadow-sm: 0 1px 2px rgba(20,20,30,.06), 0 1px 1px rgba(20,20,30,.04);
  --shadow: 0 10px 30px -12px rgba(20,20,30,.25);
  --shadow-lg: 0 30px 60px -20px rgba(0,0,0,.45);
  --r: 16px;
  --r-sm: 10px;
  --max: 1200px;
  --font-display: "Sora", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font: 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.lede { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-tight { padding: 56px 0; }
.eyebrow { font: 700 .75rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); border-radius: 2px; }
.band-dark .eyebrow { color: var(--gold); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.section-head h2 { margin-bottom: 6px; }
.section-head p { margin: 0; color: var(--muted); max-width: 56ch; }
.section-head .link { white-space: nowrap; }
.link { font-weight: 600; color: var(--text); border-bottom: 2px solid var(--gold); padding-bottom: 1px; }
.link:hover { border-color: var(--text); }
.band-dark .link { color: #fff; }
.band-dark .link:hover { border-color: #fff; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font: 600 .95rem/1 var(--font-body); border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--gold); color: var(--ink); box-shadow: 0 6px 18px -8px rgba(245,196,0,.9); }
.btn-primary:hover { background: var(--gold-2); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }
.btn-ghost { background: transparent; color: inherit; border-color: rgba(127,127,127,.4); }
.btn-ghost:hover { border-color: currentColor; }
.band-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.band-dark .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-lg { padding: 16px 28px; font-size: 1rem; }
.btn-sm { padding: 9px 16px; font-size: .85rem; }
.btn[disabled] { opacity: .6; cursor: default; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Announcement bar */
.bar { background: var(--gold); color: var(--ink); font-size: .85rem; font-weight: 600; text-align: center; padding: 9px 16px; }
.bar a { text-decoration: underline; text-underline-offset: 3px; }
.bar span + span::before { content: "·"; margin: 0 12px; opacity: .6; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(140%) blur(10px); color: var(--text); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px -18px rgba(0,0,0,.25); }
.site-header .container { display: flex; align-items: center; gap: 24px; height: 84px; }
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand img { height: 74px; width: auto; }
.brand .brand-text { display: none; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav a { padding: 10px 13px; border-radius: 8px; font-weight: 500; font-size: .93rem; color: var(--muted); }
.nav a:hover { color: var(--text); background: var(--paper-2); }
.nav a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.header-cta .btn { padding: 11px 18px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.nav-toggle svg { display: block; }

/* Bands */
.band-dark { background: var(--ink); color: #fff; }
.band-dark .muted { color: rgba(255,255,255,.66); }
.band-dark .lede { color: rgba(255,255,255,.72); }
.band-ink2 { background: var(--ink-2); color: #fff; }
.band-paper2 { background: var(--paper-2); }
.band-white { background: var(--white); }

/* Hero (home) */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% 20%, rgba(245,196,0,.16), transparent 60%), radial-gradient(800px 500px at 10% 100%, rgba(224,36,42,.14), transparent 60%), linear-gradient(180deg, #0f0f16 0%, var(--ink) 100%); color: #fff; }
.hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%); pointer-events: none; }
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; min-height: 600px; padding-top: 64px; padding-bottom: 64px; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero-logo-wrap { position: relative; display: block; width: fit-content; margin: 0 0 22px -6px; }
.hero-logo-wrap::before { content: ""; position: absolute; inset: -30% -25%; background: radial-gradient(closest-side, rgba(255,235,120,.55), rgba(245,196,0,.22) 55%, transparent 75%); filter: blur(6px); z-index: 0; }
.hero-logo { position: relative; z-index: 1; height: 150px; width: auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,.6)); }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede { color: rgba(255,255,255,.76); margin-bottom: 30px; }
.hero-stats { display: flex; gap: 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.hero-stats div { display: flex; flex-direction: column; gap: 2px; }
.hero-stats b { font-family: var(--font-display); font-size: 1.5rem; }
.hero-stats span { font-size: .8rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; }

/* Card fan */
.fan { position: relative; height: 520px; perspective: 1400px; }
.fan .c { position: absolute; left: 50%; top: 50%; width: 220px; aspect-ratio: 5/7; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06); transform-origin: 50% 100%; background: #111; pointer-events: none; }
.fan .c img { width: 100%; height: 100%; object-fit: cover; }
.fan .c::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.18) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.08) 100%); mix-blend-mode: screen; pointer-events: none; }
.fan .c1 { transform: translate(-50%,-50%) translateX(-160px) rotate(-16deg) translateY(30px); z-index: 1; }
.fan .c2 { transform: translate(-50%,-50%) translateX(-80px) rotate(-8deg) translateY(8px); z-index: 2; }
.fan .c3 { transform: translate(-50%,-50%) translateY(-6px); z-index: 3; width: 232px; }
.fan .c4 { transform: translate(-50%,-50%) translateX(80px) rotate(8deg) translateY(8px); z-index: 2; }
.fan .c5 { transform: translate(-50%,-50%) translateX(160px) rotate(16deg) translateY(30px); z-index: 1; }
.fan .glow { position: absolute; left: 50%; top: 58%; width: 520px; height: 220px; transform: translate(-50%,-50%); background: radial-gradient(closest-side, rgba(245,196,0,.32), transparent); filter: blur(30px); }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust > div { display: flex; gap: 14px; align-items: flex-start; }
.trust .ic { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--paper-2); display: grid; place-items: center; color: var(--ink); }
.band-dark .trust .ic { background: rgba(255,255,255,.08); color: var(--gold); }
.trust > div > div { display: block; }
.trust b { display: block; font-family: var(--font-display); font-size: .98rem; margin-bottom: 2px; }
.trust span { font-size: .875rem; color: var(--muted); }
.band-dark .trust span { color: rgba(255,255,255,.62); }

/* Category tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tile { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink-2); color: #fff; min-height: 390px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; isolation: isolate; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile .art { position: absolute; inset: 0; z-index: -1; }
.tile .art img { position: absolute; width: 50%; left: 50%; top: 5%; transform: translateX(-50%) rotate(-6deg); border-radius: 10px; box-shadow: var(--shadow-lg); transition: transform .4s ease; }
.tile .art img.b { transform: translateX(-24%) rotate(9deg) translateY(6%); width: 48%; opacity: .95; }
.tile:hover .art img { transform: translateX(-50%) rotate(-3deg) translateY(-2%); }
.tile:hover .art img.b { transform: translateX(-30%) rotate(10deg) translateY(8%); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,16,0) 0%, rgba(11,11,16,.15) 38%, rgba(11,11,16,.97) 64%); }
.tile h3 { color: #fff; margin: 0 0 4px; font-size: 1.25rem; }
.tile p { margin: 0 0 12px; color: rgba(255,255,255,.7); font-size: .9rem; }
.tile .count { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tile.soon .art img { filter: saturate(.6) brightness(.85); }
.tile .pill { position: absolute; top: 16px; left: 16px; background: var(--gold); color: var(--ink); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; }

/* Product cards */
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.products.cols-5 { grid-template-columns: repeat(5, 1fr); }
.prod { background: var(--white); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.prod:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.prod .ph { position: relative; aspect-ratio: 1/1.05; background: linear-gradient(180deg, #f3f2ed, #e9e7df); display: grid; place-items: center; padding: 16px; overflow: hidden; }
.prod .ph img { max-height: 100%; max-width: 100%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 12px 18px rgba(20,20,30,.28)); transition: transform .3s ease, opacity .35s ease; opacity: 0; }
.prod .ph.loaded img, .sealed .ph.loaded > img:not(.setlogo) { opacity: 1; }
.prod .ph:not(.loaded)::before, .sealed .ph:not(.loaded)::before { content: ""; position: absolute; inset: 14% 22%; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.05) 25%, rgba(0,0,0,.09) 50%, rgba(0,0,0,.05) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; }
.prod:hover .ph img { transform: translateY(-4px) scale(1.02); }
.prod .ph .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.badge { display: inline-block; background: var(--ink); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.badge.gold { background: var(--gold); color: var(--ink); }
.badge.red { background: var(--red); }
.badge.soft { background: var(--paper-2); color: var(--text); }
.prod .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.prod .name { font-weight: 600; font-size: .95rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod .meta { font-size: .78rem; color: var(--muted); }
.prod .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prod .price { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.prod .foot .btn { padding: 8px 14px; font-size: .8rem; }

/* Shelf (horizontal) */
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.shelf > * { scroll-snap-align: start; }


/* Sealed catalogue tiles */
.sealed { background: var(--white); border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.sealed:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sealed .ph { position: relative; aspect-ratio: 1/1.05; display: grid; place-items: center; padding: 18px; background: linear-gradient(180deg, #ffffff, #f3f2ed); overflow: hidden; }
.sealed .ph > img:not(.setlogo) { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 14px 20px rgba(20,20,30,.22)); transition: transform .3s ease, opacity .35s ease; opacity: 0; }
.sealed:hover .ph > img:not(.setlogo) { transform: translateY(-4px) scale(1.02); }
.sealed .ph .badge { position: absolute; top: 12px; left: 12px; z-index: 2; }
.sealed .ph .setlogo { position: absolute; right: 10px; bottom: 10px; max-width: 34%; max-height: 22%; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); z-index: 2; }
/* Chase The Hits mark on every product image */
.cth-mark { position: absolute; left: 10px; bottom: 10px; width: 40px; height: 31px; background: url("/assets/img/logo.webp") center/contain no-repeat; opacity: .92; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); z-index: 2; pointer-events: none; }
.sealed .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sealed .name { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.sealed .meta { font-size: .78rem; color: var(--muted); }
.sealed .foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sealed .foot .btn { width: 100%; }
.sealed .notify-form { margin-top: 10px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sealed .notify-form[hidden] { display: none; }
.sealed .notify-form input { font: 400 .85rem var(--font-body); padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--line); outline: none; min-width: 0; }
.sealed .notify-form input:focus { border-color: var(--gold); }
.sealed .notify-form .msg { grid-column: 1 / -1; min-height: 0; }
.sealed .notify-form .msg.ok { color: var(--green); font-weight: 600; }
.sealed .notify-form .msg.err { color: var(--red); font-weight: 600; }

/* Feature grid / values */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.band-dark .feature { background: rgba(255,255,255,.04); border-color: var(--line-dark); }
.feature .num { font-family: var(--font-display); font-weight: 800; color: var(--gold-ink); font-size: .85rem; letter-spacing: .1em; margin-bottom: 14px; }
.band-dark .feature .num { color: var(--gold); }
.feature h3 { margin-bottom: 8px; }
.feature p { margin: 0; color: var(--muted); font-size: .95rem; }
.band-dark .feature p { color: rgba(255,255,255,.66); }

/* Split (text + image) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .visual { position: relative; }
.split .visual img { border-radius: var(--r); box-shadow: var(--shadow-lg); }
.checks { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 36px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0b10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/13px no-repeat; }

/* Stats row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.band-dark .stat { background: rgba(255,255,255,.04); border-color: var(--line-dark); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.stat span { color: var(--muted); font-size: .875rem; }
.band-dark .stat span { color: rgba(255,255,255,.62); }

/* Facts table */
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.band-dark .facts, .band-dark .facts div { border-color: var(--line-dark); }
.band-dark .facts dt { color: rgba(255,255,255,.6); }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; position: relative; }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--gold); line-height: 1; display: block; margin-bottom: 14px; }
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; }

/* Forms */
.form { display: grid; gap: 14px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.form input, .form select, .form textarea { width: 100%; font: 400 .95rem/1.4 var(--font-body); padding: 12px 14px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--white); color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s; }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245,196,0,.22); }
.form .msg { min-height: 1.4em; font-size: .9rem; }
.form .msg.ok { color: var(--green); font-weight: 600; }
.form .msg.err { color: var(--red); font-weight: 600; }
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; box-shadow: var(--shadow-sm); }
.inline-form { display: flex; gap: 10px; }
.inline-form input { flex: 1; font: 400 1rem var(--font-body); padding: 14px 16px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; outline: none; }
.inline-form input::placeholder { color: rgba(255,255,255,.5); }
.inline-form input:focus { border-color: var(--gold); }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 20px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-ink); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 16px; margin: 0; }
.faq details p + p { padding-top: 0; }

/* Page hero */
.page-hero { background: linear-gradient(180deg, #12121a, var(--ink)); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -10%; top: -40%; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(245,196,0,.14), transparent); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; margin-bottom: 12px; font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .lede { color: rgba(255,255,255,.74); margin: 0; }
.crumbs { font-size: .8rem; color: rgba(255,255,255,.55); margin-bottom: 18px; display: flex; gap: 8px; }
.crumbs a:hover { color: #fff; }
.page-hero.with-art .container { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 40px; }
.page-hero .mini-fan { position: relative; height: 260px; }
.page-hero .mini-fan img { position: absolute; width: 150px; border-radius: 8px; box-shadow: var(--shadow-lg); top: 50%; left: 50%; }
.page-hero .mini-fan img:nth-child(1) { transform: translate(-50%,-50%) translateX(-120px) rotate(-14deg); }
.page-hero .mini-fan img:nth-child(2) { transform: translate(-50%,-50%) translateY(-10px); z-index: 2; width: 160px; }
.page-hero .mini-fan img:nth-child(3) { transform: translate(-50%,-50%) translateX(120px) rotate(14deg); }

/* Shop toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); font: 600 .85rem var(--font-body); cursor: pointer; color: var(--text); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.toolbar .spacer { flex: 1; }
.toolbar input, .toolbar select { font: 400 .9rem var(--font-body); padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); outline: none; }
.toolbar input { min-width: 240px; }
.toolbar input:focus, .toolbar select:focus { border-color: var(--gold); }
.result-count { font-size: .85rem; color: var(--muted); }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); border: 1.5px dashed var(--line); border-radius: var(--r); }
.skeleton { background: linear-gradient(90deg, #ecebe6 25%, #f5f4f0 50%, #ecebe6 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r); aspect-ratio: 4/5.4; }
@keyframes sk { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* CTA band */
.cta-band { background: linear-gradient(120deg, #15151f, #0b0b10); color: #fff; border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -80px; top: -120px; width: 420px; height: 420px; background: radial-gradient(closest-side, rgba(245,196,0,.22), transparent); }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.72); }
.cta-band .art { position: relative; height: 240px; z-index: 1; }
.cta-band .art img { position: absolute; width: 150px; border-radius: 8px; box-shadow: var(--shadow-lg); top: 50%; left: 50%; }
.cta-band .art img:nth-child(1) { transform: translate(-50%,-50%) translateX(-90px) rotate(-12deg); }
.cta-band .art img:nth-child(2) { transform: translate(-50%,-50%) translateY(-8px); z-index: 2; width: 160px; }
.cta-band .art img:nth-child(3) { transform: translate(-50%,-50%) translateX(90px) rotate(12deg); }

/* Testimonial-ish quote */
.quote { border-left: 3px solid var(--gold); padding: 6px 0 6px 22px; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; font-weight: 600; }
.quote small { display: block; font: 500 .85rem var(--font-body); color: var(--muted); margin-top: 10px; }

/* Prose */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1em 0 1.5em; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--font-display); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.sticky-aside { position: sticky; top: 100px; }
.aside-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.aside-card h3 { font-size: 1.05rem; }
.aside-card p { font-size: .93rem; color: var(--muted); }
.aside-card .btn { width: 100%; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 64px 0 28px; border-top: 1px solid var(--line-dark); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 44px; }
.foot-grid h4 { color: #fff; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: .93rem; }
.foot-grid a:hover { color: #fff; }
.foot-brand img { height: 96px; margin-bottom: 16px; }
.foot-brand p { font-size: .92rem; max-width: 40ch; }
.foot-bottom { border-top: 1px solid var(--line-dark); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .8rem; color: rgba(255,255,255,.5); }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay span { border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 3px 8px; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.7); }

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.buy-note { background: var(--paper-2); border-radius: var(--r-sm); padding: 12px 16px; font-size: .93rem; margin-bottom: 16px; }
.mt-0 { margin-top: 0 } .mb-0 { margin-bottom: 0 }
.center { text-align: center; }
.mx { margin-left: auto; margin-right: auto; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Responsive */
@media (max-width: 1080px) {
  .products, .products.cols-5 { grid-template-columns: repeat(3, 1fr); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .fan .c { width: 200px; }
  .fan .c1 { transform: translate(-50%,-50%) translateX(-150px) rotate(-16deg) translateY(30px); }
  .fan .c2 { transform: translate(-50%,-50%) translateX(-75px) rotate(-8deg) translateY(8px); }
  .fan .c4 { transform: translate(-50%,-50%) translateX(75px) rotate(8deg) translateY(8px); }
  .fan .c5 { transform: translate(-50%,-50%) translateX(150px) rotate(16deg) translateY(30px); }
}
@media (max-width: 900px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .nav-toggle { display: block; }
  .site-header.open .nav { display: flex; position: absolute; left: 0; right: 0; top: 84px; background: #fff; flex-direction: column; align-items: stretch; padding: 12px 24px 20px; border-bottom: 1px solid var(--line); gap: 2px; box-shadow: 0 20px 30px -20px rgba(0,0,0,.3); }
  .site-header.open .nav a { padding: 12px 10px; font-size: 1rem; }
  .site-header.open .nav a.active { box-shadow: none; color: var(--gold-ink); }
  .hero .container { grid-template-columns: 1fr; min-height: 0; padding-top: 48px; }
  .fan { height: 340px; }
  .fan .c { width: 150px; }
  .fan .c3 { width: 160px; }
  .fan .c1 { transform: translate(-50%,-50%) translateX(-115px) rotate(-16deg) translateY(30px); }
  .fan .c2 { transform: translate(-50%,-50%) translateX(-58px) rotate(-8deg) translateY(8px); }
  .fan .c4 { transform: translate(-50%,-50%) translateX(58px) rotate(8deg) translateY(8px); }
  .fan .c5 { transform: translate(-50%,-50%) translateX(115px) rotate(16deg) translateY(30px); }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .trust, .stats { grid-template-columns: repeat(2, 1fr); }
  .features, .steps { grid-template-columns: 1fr; }
  .split, .two-col, .cta-band, .page-hero.with-art .container { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 28px; }
  .cta-band .art, .page-hero .mini-fan { display: none; }
  .facts { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .products, .products.cols-5, .tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .tile { min-height: 240px; padding: 16px; }
  .tile h3 { font-size: 1rem; }
  .tile p { display: none; }
  .prod .body { padding: 10px 12px 12px; }
  .prod .name { font-size: .85rem; }
  .form .row { grid-template-columns: 1fr; }
  .form-card { padding: 22px; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .trust, .stats { grid-template-columns: 1fr; }
  .brand img { height: 54px; }
  .hero-logo { height: 110px; }
  .inline-form { flex-direction: column; }
  .toolbar input { min-width: 0; width: 100%; }
  .bar span:nth-child(2) { display: none; }
}

/* ---- responsive grid hardening (17 Aug 2026) -----------------------------
   Individual pages used to set grid-template-columns inline. Inline styles beat
   the media queries above, so .stats on the homepage stayed 2-up at 320px; its
   columns could not shrink below their 341px min-content, and that floor pushed
   the whole page 45px wider than the viewport. Column counts now live here as
   modifier classes that collapse properly.

   Every track is minmax(0, 1fr) rather than 1fr. A 1fr track's automatic
   minimum is min-content, which is exactly what let one wide child force the
   overflow; minmax(0, 1fr) lets the track actually shrink. */
.grid-2          { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stats.cols-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.features.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.split, .stats, .trust, .checks, .features, .visual, .facts, .tiles, .products { min-width: 0; }
.split > *, .stats > *, .trust > *, .checks > *, .features > *, .visual > *,
.tiles > *, .products > * { min-width: 0; }

@media (max-width: 900px) {
  .features.cols-4, .features.cols-5 { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .stats, .stats.cols-2, .trust { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Header row at very narrow widths. brand (70) + CTA (150) + burger (44) plus
   two 24px gaps needs 312px inside a 272px content box at 320px wide, so the
   burger pushed 15px past the edge on every page. Tighter gap and a smaller
   CTA at phone widths; min-width:0 lets the button shrink rather than overflow. */
@media (max-width: 600px) {
  .site-header .container { gap: 12px; }
  .header-cta { min-width: 0; }
  .header-cta .btn { padding: 10px 14px; font-size: .9rem; }
}

/* .facts rows are "160px 1fr" — a fixed first column that cannot shrink. At
   320px that is 160px plus the definition's min-content, well past the
   container. Stack the term above the definition on phones instead. */
@media (max-width: 600px) {
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .facts dt { font-size: .85rem; }
}

/* The trade page's spec table has a 303px min-content, which dragged the whole
   page 7px wider than a 320px viewport. Fixed layout makes the columns share
   the container width, and long tokens (email addresses) wrap instead of
   setting an unshrinkable floor. */
.prose table { width: 100%; table-layout: fixed; }
.prose th, .prose td { overflow-wrap: anywhere; word-break: break-word; }