/* ---------------------------------------------------------------------------
   Game account store
   ---------------------------------------------------------------------------
   Design language: angular dossier, not dashboard. Corners are chamfered with
   clip-path (never border-radius), depth comes from hard offset colour blocks
   (never blur/glass), and each game gets its own ink temperature rather than
   sharing one neutral blue-grey. --ga-chamfer is the single source of truth for
   the corner cut so every surface bevels identically.
   --------------------------------------------------------------------------- */
.ga-store {
    /* Apex: warm ember over an oxblood-tinted black. */
    --ga-bg: #0b0709;
    --ga-panel: #150d0f;
    --ga-panel-2: #1d1315;
    --ga-line: rgba(255,225,215,.13);
    --ga-text: #fff6f3;
    --ga-muted: #b09a96;
    --ga-accent: #ff4526;
    --ga-accent-rgb: 255,69,38;
    --ga-accent-2: #ffb020;
    --ga-accent-2-rgb: 255,176,32;
    --ga-ink: #0b0709;
    /* The hero is a dark art stage in BOTH themes — the duotoned art needs an ink
       backdrop to read. So it carries its own colours that the light theme must
       not flip, or the headline turns dark-on-dark and vanishes. Kept separate
       from --ga-ink, which doubles as text colour on accent-filled buttons. */
    --ga-hero-bg: #0b0709;
    --ga-hero-text: #fff6f3;
    --ga-hero-muted: #c2aaa5;
    /* Light theme darkens --ga-accent for contrast on white; the hero is never
       white, so it keeps the bright accent or the kicker goes muddy on ink. */
    --ga-hero-accent: #ff4526;
    --ga-chamfer: 14px;
    min-height: 100vh;
    background: var(--ga-bg);
    color: var(--ga-text);
    font-family: Montserrat, Inter, system-ui, sans-serif;
}

.ga-store--rivals {
    /* Rivals: cold cyan over deep indigo, with a magenta counterpoint. */
    --ga-bg: #05070e;
    --ga-panel: #0c1120;
    --ga-panel-2: #121a2d;
    --ga-line: rgba(215,230,255,.13);
    --ga-text: #f2f7ff;
    --ga-muted: #93a4c2;
    --ga-accent: #22dcff;
    --ga-accent-rgb: 34,220,255;
    --ga-accent-2: #ff3d7f;
    --ga-accent-2-rgb: 255,61,127;
    --ga-ink: #05070e;
    --ga-hero-bg: #05070e;
    --ga-hero-text: #f2f7ff;
    --ga-hero-muted: #9fb0cc;
    --ga-hero-accent: #22dcff;
}

/* The hub lists every game, so it commits to neither game's temperature: a warm
   charcoal that lets the per-game cards supply the colour. */
.ga-hub {
    --ga-bg: #0a0909;
    --ga-panel: #141212;
    --ga-panel-2: #1c1918;
    --ga-line: rgba(255,240,235,.13);
    --ga-text: #f8f5f3;
    --ga-muted: #a29691;
    --ga-accent: #ff6a3d;
    --ga-accent-rgb: 255,106,61;
    --ga-accent-2: #ffb020;
    --ga-accent-2-rgb: 255,176,32;
    --ga-ink: #0a0909;
    --ga-chamfer: 14px;
    min-height: 100vh;
    background: var(--ga-bg);
    color: var(--ga-text);
    font-family: Montserrat, Inter, system-ui, sans-serif;
}

html[data-theme="light"] .ga-store,
html[data-theme="light"] .ga-hub {
    --ga-bg: #eeeae6;
    --ga-panel: #ffffff;
    --ga-panel-2: #f4f0ec;
    --ga-line: rgba(24,14,12,.16);
    --ga-text: #17100f;
    --ga-muted: #6b5a56;
    --ga-ink: #17100f;
}

html[data-theme="light"] .ga-store--rivals {
    --ga-bg: #e9edf4;
    --ga-panel: #ffffff;
    --ga-panel-2: #eef2f8;
    --ga-line: rgba(10,18,36,.16);
    --ga-text: #0b1220;
    --ga-muted: #5a6884;
    --ga-ink: #0b1220;
}

/* Accents that carry white text must darken on a light background to keep contrast. */
html[data-theme="light"] .ga-store,
html[data-theme="light"] .ga-hub { --ga-accent: #d5300f; --ga-accent-rgb: 213,48,15; }
html[data-theme="light"] .ga-store--rivals { --ga-accent: #0086ad; --ga-accent-rgb: 0,134,173; }

/* ---------------------------------------------------------------------------
   Sitewide leak guard. bundle.css ships:
       html[data-theme=dark] div[class*=card] {
           background-color: var(--bg-secondary) !important;   (a flat grey)
           color: var(--text-primary) !important;
           border-color: var(--border-color) !important;
       }
   which force-paints ANY div whose class merely contains the substring "card".
   Every BEM child of .ga-offer-card matches that (ga-offer-card__level,
   ga-offer-card__intro, ...), so the store's surfaces get stamped grey and the
   palette above is silently discarded. The card root escaped only because it is
   an <article>, not a div, which is what made this look arbitrary.
   Other pages neutralise the same rule with a page-scoped override
   (.rv-page, .v12-scene); this is the store's. Do not remove without checking
   that the bundle rule is gone. */
html[data-theme="dark"] .ga-store div[class*="card"],
html[data-theme="dark"] .ga-hub div[class*="card"] {
    background-color: transparent !important;
    color: inherit !important;
    border-color: var(--ga-line) !important;
}

.ga-store *,
.ga-hub * { box-sizing: border-box; }
.ga-store a,
.ga-hub a { color: inherit; }
.ga-store button,
.ga-store input,
.ga-store select { font: inherit; }

.ga-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 2px solid var(--ga-accent);
    background: var(--ga-hero-bg);
    color: var(--ga-hero-text);
}

/* Diagonal ember rake across the ink. Two hard-edged bands rather than a soft
   radial bloom: the edge is the point, a blur would read as generic glow. */
.ga-hero__grid {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            114deg,
            transparent 0 62px,
            rgba(var(--ga-accent-rgb), .05) 62px 63px,
            transparent 63px 124px),
        linear-gradient(200deg, rgba(var(--ga-accent-rgb), .16), transparent 52%),
        linear-gradient(0deg, rgba(var(--ga-accent-2-rgb), .07), transparent 38%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.ga-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    padding-top: clamp(1.75rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* Sits inside the always-dark hero, so it tracks the hero palette, not the page. */
.ga-breadcrumbs {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    color: var(--ga-hero-muted);
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ga-breadcrumbs a { text-decoration: none; }
.ga-breadcrumbs a:hover { color: var(--ga-hero-accent); }
/* .ga-kicker is shared with the page sections, so only the hero copy of it
   takes the hero accent. */
.ga-hero .ga-kicker { color: var(--ga-hero-accent); }
.ga-kicker {
    margin: 0 0 .75rem;
    color: var(--ga-accent);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
}

.ga-hero h1,
.ga-section-heading h2,
.ga-process h2,
.ga-trust h2,
.ga-faq h2,
.ga-supporting-copy h2,
.ga-hub h1,
.ga-hub h2 {
    margin: 0;
    font-family: "Chakra Petch", Montserrat, sans-serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.ga-hero h1 {
    max-width: 900px;
    font-size: clamp(2.6rem, 5.4vw, 5.2rem);
    line-height: .96;
    text-transform: uppercase;
}

.ga-hero__lead {
    max-width: 760px;
    margin: 1.5rem 0 0;
    color: var(--ga-hero-muted);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.75;
}

/* Proof reads as a tally strip divided by rules, not a row of pill buttons —
   pills imply something clickable and these are statements. */
.ga-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1rem, 2.4vw, 2rem);
    margin-top: 2.25rem;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 1.1rem;
}

.ga-hero__proof span {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    padding-right: clamp(1rem, 2.4vw, 2rem);
    border-right: 1px solid rgba(255,255,255,.14);
    color: var(--ga-hero-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.ga-hero__proof span:last-child { padding-right: 0; border-right: 0; }

.ga-hero__proof b {
    color: var(--ga-hero-accent);
    font-family: "Chakra Petch", Montserrat, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ---- Hero art stage -------------------------------------------------------
   A chamfered portrait stage for the character art. The art itself is set as a
   background-image on .ga-hero__art so a missing file degrades to the built
   graphic treatment underneath instead of a broken <img>. Drop art in by
   pointing --ga-hero-art at it; the stage is sized and cropped either way. */
/* Single-cell grid: the art and the caption occupy the same cell so the caption
   overlays the art without absolute positioning fighting the chamfer. */
.ga-hero__stage {
    position: relative;
    display: grid;
    grid-template-areas: "stage";
    align-self: stretch;
    min-height: clamp(300px, 34vw, 460px);
    margin: 0;
    isolation: isolate;
}

.ga-hero__stage > * { grid-area: stage; }

/* Same hard offset drop as the offer cards, and for the same reason: the stage
   art is chamfered, so only drop-shadow tracks that silhouette. */
.ga-hero__stage { filter: drop-shadow(14px 14px 0 rgba(var(--ga-accent-rgb), .28)); }

/* The art is duotoned into the game's accent rather than shown as-is. A shared
   stock render would otherwise sit on the page as obvious generic art; forcing
   it through the palette turns it into brand texture and makes one asset work
   for both stores. */
.ga-hero__art {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: inherit;
    align-content: end;
    overflow: hidden;
    background: var(--ga-hero-bg);
    clip-path: polygon(
        var(--ga-chamfer) 0, 100% 0, 100% calc(100% - var(--ga-chamfer)),
        calc(100% - var(--ga-chamfer)) 100%, 0 100%, 0 var(--ga-chamfer));
}

.ga-hero__art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ga-hero-art, none) center 30% / cover no-repeat;
    filter: grayscale(1) contrast(1.25) brightness(.85);
    mix-blend-mode: luminosity;
}

/* Accent wash + a bottom scrim so the caption always has something to sit on,
   art or no art. */
.ga-hero__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 42%, var(--ga-hero-bg) 96%),
        linear-gradient(158deg, rgba(var(--ga-accent-rgb), .62), transparent 58%),
        radial-gradient(85% 65% at 50% 30%, rgba(var(--ga-accent-2-rgb), .28), transparent 70%),
        rgba(var(--ga-accent-rgb), .18);
}

.ga-hero__stage figcaption {
    position: relative;
    z-index: 2;
    align-self: end;
    justify-self: start;
    max-width: 22rem;
    margin: 0 clamp(1.1rem, 2vw, 1.75rem) clamp(1.2rem, 2.2vw, 1.75rem);
    padding-left: .95rem;
    border-left: 3px solid var(--ga-hero-accent);
    text-align: left;
}

.ga-hero__stage figcaption p {
    margin: 0 0 .2rem;
    color: var(--ga-hero-accent);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.ga-hero__stage figcaption strong {
    display: block;
    color: var(--ga-hero-text);
    font-family: "Chakra Petch", Montserrat, sans-serif;
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.1;
}

.ga-hero__stage figcaption small {
    display: block;
    margin-top: .45rem;
    color: var(--ga-hero-muted);
    font-size: .74rem;
    line-height: 1.5;
}

.ga-catalog,
.ga-account-guide,
.ga-process,
.ga-trust,
.ga-faq,
.ga-supporting-copy { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.ga-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-bottom: 2rem;
}
.ga-section-heading h2,
.ga-account-guide h2,
.ga-process h2,
.ga-trust h2,
.ga-faq h2,
.ga-supporting-copy h2 { font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.05; }
.ga-section-heading > p { max-width: 390px; margin: 0; color: var(--ga-muted); line-height: 1.65; }

.ga-shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.ga-filters {
    position: sticky;
    top: 90px;
    display: grid;
    gap: 1rem;
    border: 1px solid var(--ga-line);
    padding: 1.15rem;
    background: var(--ga-panel);
}
.ga-filter__heading,
.ga-results__bar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.ga-filter__heading strong { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.ga-filter__heading button,
.ga-empty button { border: 0; padding: 0; background: transparent; color: var(--ga-accent); cursor: pointer; font-weight: 750; }
.ga-field { display: grid; gap: .45rem; }
.ga-field > span,
.ga-results__bar label span { color: var(--ga-muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.ga-field input,
.ga-field select,
.ga-results__bar select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ga-line);
    border-radius: 0;
    padding: .65rem .7rem;
    background: var(--ga-panel-2);
    color: var(--ga-text);
}
.ga-field input:focus-visible,
.ga-field select:focus-visible,
.ga-results__bar select:focus-visible,
.ga-buy:focus-visible,
.ga-faq summary:focus-visible { outline: 3px solid rgba(var(--ga-accent-rgb),.42); outline-offset: 2px; }
.ga-check { display: flex; gap: .65rem; align-items: center; color: var(--ga-muted); font-size: .82rem; font-weight: 700; }
.ga-check input { width: 18px; height: 18px; accent-color: var(--ga-accent); }
.ga-results { min-width: 0; }
.ga-results__bar { min-height: 52px; margin-bottom: 1rem; border-bottom: 1px solid var(--ga-line); }
.ga-results__bar > span { color: var(--ga-muted); font-size: .85rem; font-weight: 700; }
.ga-results__bar label { display: flex; gap: .65rem; align-items: center; }
.ga-results__bar select { min-width: 178px; }

.ga-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ga-card { position: relative; display: flex; min-width: 0; flex-direction: column; border: 1px solid var(--ga-line); background: var(--ga-panel); overflow: hidden; transition: transform .2s ease, border-color .2s ease; }
.ga-card:hover { transform: translateY(-3px); border-color: rgba(var(--ga-accent-rgb),.47); }
.ga-card--soldout { opacity: .73; }
.ga-card__header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-bottom: 1px solid var(--ga-line); padding: .9rem 1rem; }
.ga-card__game { color: var(--ga-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
/* Stock is a state readout, not a badge: a square tick and tabular figures. */
.ga-stock {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .68rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ga-stock::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.ga-stock--yes { color: #35c47c; }
.ga-stock--no { color: var(--ga-muted); }
/* Scarcity is stated plainly and only when true, mirroring the League store's
   honest "last one" treatment rather than manufacturing urgency. */
.ga-stock--last { color: var(--ga-accent-2); }
.ga-stock--last::before { animation: ga-blink 1.6s steps(1, end) infinite; }
/* Not launched yet, rather than sold through. Reads as anticipation, not failure. */
.ga-stock--soon { color: var(--ga-accent-2); }

@keyframes ga-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
    .ga-stock--last::before { animation: none; }
}
.ga-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.15rem; }
.ga-card__sigil { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(var(--ga-accent-rgb),.52); background: rgba(var(--ga-accent-rgb),.11); color: var(--ga-accent); font-family: "Chakra Petch", sans-serif; font-size: 1.5rem; font-weight: 800; transform: skew(-6deg); }
.ga-card h3 { margin: 0; font-family: "Chakra Petch", Montserrat, sans-serif; font-size: 1.2rem; line-height: 1.18; }
.ga-card__body > div:nth-child(2) > p { margin: .55rem 0 0; color: var(--ga-muted); font-size: .82rem; line-height: 1.55; }
.ga-specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: .35rem 0 0; background: var(--ga-line); border: 1px solid var(--ga-line); }
.ga-specs div { min-width: 0; padding: .7rem; background: var(--ga-panel-2); }
.ga-specs dt { overflow: hidden; color: var(--ga-muted); font-size: .64rem; font-weight: 700; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.ga-specs dd { margin: .35rem 0 0; overflow-wrap: anywhere; font-size: .79rem; font-weight: 750; }
.ga-card__footer { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-top: auto; border-top: 1px solid var(--ga-line); padding: 1rem 1.15rem 1.15rem; }
.ga-price span { display: block; color: var(--ga-muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.ga-price strong { display: block; margin-top: .22rem; font-family: "Chakra Petch", sans-serif; font-size: 1.45rem; }
.ga-price small { color: var(--ga-muted); font-family: Montserrat, sans-serif; font-size: .65rem; }
.ga-buy {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border: 0;
    padding: .7rem 1rem;
    background: var(--ga-accent);
    color: var(--ga-ink) !important;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: background-color .16s ease;
}
.ga-buy svg { transition: transform .16s ease; }
.ga-buy:hover { background: var(--ga-text); }
.ga-buy:hover svg { transform: translateX(4px); }
.ga-store--apex .ga-buy { color: #fff !important; }
.ga-store--apex .ga-buy:hover { color: var(--ga-ink) !important; }
.ga-buy:disabled {
    background: var(--ga-panel-2);
    color: var(--ga-muted) !important;
    box-shadow: inset 0 0 0 1px var(--ga-line);
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .ga-buy svg, .ga-offer-card, .ga-offer-card::after { transition: none; }
}

/* ---- Offer cards ----------------------------------------------------------
   Subgrid is doing the real work here. The grid owns six named row tracks and
   each card spans all six with grid-template-rows: subgrid, so the header,
   level band, title, spec list, includes block and footer of all three cards
   share row lines. Every baseline, badge and CTA lines up across the row no
   matter how long a product name runs — impossible to hold by hand with
   independently-flowing flex columns. */
.ga-offer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr auto auto;
    gap: clamp(1rem, 1.6vw, 1.6rem);
    align-items: stretch;
    /* Contains the cards' negative-z offset blocks. Without a stacking context
       here they paint behind the page background and disappear entirely. */
    isolation: isolate;
}

.ga-offer-card {
    position: relative;
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    min-width: 0;
    border: 1px solid var(--ga-line);
    background: var(--ga-panel);
    /* Chamfer: top-left and bottom-right cut. Asymmetric on purpose — a bevel on
       all four corners just reads as a rounded box again. */
    clip-path: polygon(
        var(--ga-chamfer) 0, 100% 0, 100% calc(100% - var(--ga-chamfer)),
        calc(100% - var(--ga-chamfer)) 100%, 0 100%, 0 var(--ga-chamfer));
    /* Hard offset drop, zero blur: a printed colour block, not a soft glow.
       This has to be drop-shadow rather than box-shadow or a z-index:-1 pseudo.
       box-shadow draws on the border box and gets cropped away by clip-path,
       and clip-path establishes a stacking context, which traps a negative
       z-index child inside the card where it washes the whole surface instead
       of sitting behind it. drop-shadow follows the chamfered silhouette. */
    filter: drop-shadow(7px 7px 0 rgba(var(--ga-accent-rgb), .22));
    transition: transform .18s ease, filter .18s ease, background-color .18s ease;
}

.ga-offer-card:hover {
    transform: translate(-3px, -3px);
    background: var(--ga-panel-2);
    filter: drop-shadow(12px 12px 0 rgba(var(--ga-accent-rgb), .5));
}

.ga-offer-card--featured { filter: drop-shadow(7px 7px 0 rgba(var(--ga-accent-rgb), .4)); }
.ga-offer-card--featured:hover { filter: drop-shadow(12px 12px 0 rgba(var(--ga-accent-rgb), .62)); }

/* The featured card earns its emphasis from a solid accent spine and a warmer
   surface, never from being a different size. Same subgrid rows as its
   neighbours means its bands stay locked to theirs. */
.ga-offer-card--featured {
    border-color: rgba(var(--ga-accent-rgb), .55);
    background:
        linear-gradient(90deg, var(--ga-accent) 0 5px, transparent 5px),
        color-mix(in srgb, var(--ga-accent) 6%, var(--ga-panel));
}

/* Sold out desaturates and drops its colour block; it must not compete with
   cards that can actually be bought. */
.ga-offer-card--soldout {
    opacity: .5;
    filter: grayscale(.85) drop-shadow(7px 7px 0 rgba(0, 0, 0, .35));
}
.ga-offer-card--soldout:hover {
    transform: none;
    filter: grayscale(.85) drop-shadow(7px 7px 0 rgba(0, 0, 0, .35));
}

.ga-offer-card__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.35rem .9rem;
}

.ga-offer-card__type {
    color: var(--ga-accent);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ga-offer-card__featured {
    padding: .3rem .6rem;
    background: var(--ga-accent);
    color: var(--ga-ink);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}

.ga-store--apex .ga-offer-card__featured { color: #fff; }

/* ---- Level band -----------------------------------------------------------
   The numeral is the loudest thing on the card: oversized, tight, and allowed
   to sit on its own baseline with the metadata hung off it. */
.ga-offer-card__level {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 .9rem;
    align-items: center;
    margin: 0 1.35rem;
    border-top: 1px solid var(--ga-line);
    border-bottom: 1px solid var(--ga-line);
    padding: 1rem 0;
    overflow: hidden;
}

.ga-offer-card__level-tag {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: .55rem;
    color: var(--ga-muted);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.ga-offer-card__level strong {
    grid-column: 2;
    grid-row: 1;
    color: var(--ga-text);
    font-family: "Chakra Petch", Montserrat, sans-serif;
    font-size: clamp(3.4rem, 6vw, 4.6rem);
    font-variant-numeric: tabular-nums;
    line-height: .82;
    letter-spacing: -.07em;
}

.ga-offer-card__level strong small {
    color: var(--ga-accent);
    font-size: .38em;
    font-weight: 800;
    vertical-align: super;
}

.ga-offer-card__level p {
    grid-column: 2;
    grid-row: 2;
    margin: .45rem 0 0;
    color: var(--ga-muted);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ga-offer-card__level .ga-stock {
    grid-column: 2;
    grid-row: 3;
    margin-top: .55rem;
}

/* Sale sash: a hard diagonal ribbon cutting the band's top-right corner. */
.ga-sale-sash {
    position: absolute;
    top: 1.15rem;
    right: -2.6rem;
    width: 9rem;
    padding: .22rem 0;
    background: var(--ga-accent-2);
    color: #140b02;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(38deg);
}

.ga-offer-card__intro { padding: 1.25rem 1.35rem 1rem; }
.ga-offer-card__intro h3 {
    margin: 0;
    font-family: "Chakra Petch", Montserrat, sans-serif;
    font-size: 1.25rem;
    line-height: 1.2;
}
.ga-offer-card__intro p {
    margin: .55rem 0 0;
    color: var(--ga-muted);
    font-size: .81rem;
    line-height: 1.6;
}

.ga-preview-note {
    display: inline-flex;
    margin-top: .8rem;
    border: 1px solid rgba(var(--ga-accent-rgb), .32);
    padding: .35rem .5rem;
    background: rgba(var(--ga-accent-rgb), .08);
    color: var(--ga-accent);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Spec rows read as a dossier: hairline-ruled, label left, value hard right in
   tabular figures. The old row of green ticks implied every line was a perk,
   which made "Not available" absurd next to a checkmark. */
.ga-offer-facts {
    display: grid;
    align-content: start;
    gap: 0;
    margin: 0 1.35rem;
    padding: .35rem 0 0;
    list-style: none;
}

.ga-offer-facts li {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: .75rem;
    align-items: baseline;
    padding: .58rem 0;
    font-size: .75rem;
}

.ga-offer-facts li + li { border-top: 1px dashed var(--ga-line); }

.ga-offer-facts span {
    color: var(--ga-muted);
    font-size: .66rem;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ga-offer-facts strong {
    color: var(--ga-text);
    font-size: .76rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.ga-offer-includes {
    display: grid;
    gap: .3rem;
    margin: 1.1rem 1.35rem 0;
    border-left: 3px solid var(--ga-accent);
    padding: .7rem .85rem;
    background: rgba(var(--ga-accent-rgb), .06);
}

.ga-offer-includes strong {
    color: var(--ga-accent);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ga-offer-includes span {
    color: var(--ga-muted);
    font-size: .71rem;
    line-height: 1.45;
}

/* Price block as a torn stub: a perforated rule separates it from the CTA. */
.ga-offer-card__footer {
    display: grid;
    gap: .85rem;
    margin: 1.15rem 1.35rem 1.35rem;
    border-top: 1px dashed var(--ga-line);
    padding-top: 1rem;
}

.ga-offer-card__footer .ga-price {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .55rem;
    align-items: baseline;
}

.ga-offer-card__footer .ga-price > span {
    flex: 1 0 100%;
    margin-bottom: .2rem;
    color: var(--ga-muted);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ga-offer-card__footer .ga-price strong {
    display: flex;
    align-items: baseline;
    gap: .3rem;
    color: var(--ga-text);
    font-family: "Chakra Petch", Montserrat, sans-serif;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -.035em;
}

.ga-offer-card__footer .ga-price strong small {
    color: var(--ga-muted);
    font-family: Montserrat, sans-serif;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.ga-offer-card__footer .ga-price del {
    color: var(--ga-muted);
    font-size: .85rem;
    font-weight: 700;
    text-decoration-color: var(--ga-accent-2);
    text-decoration-thickness: 2px;
}

.ga-offer-card__footer .ga-buy { width: 100%; min-height: 52px; }

/* A coming-soon card is being advertised, so it keeps full colour and its accent
   block. Only the marker changes to the secondary accent. */
.ga-offer-card--soon { border-color: rgba(var(--ga-accent-2-rgb), .45); }
.ga-offer-card--soon { filter: drop-shadow(7px 7px 0 rgba(var(--ga-accent-2-rgb), .22)); }
.ga-offer-card--soon:hover { filter: drop-shadow(12px 12px 0 rgba(var(--ga-accent-2-rgb), .45)); }

/* ---- Notify me (store variant) --------------------------------------------
   Sits in the CTA slot of an unstocked card. Same height rhythm as .ga-buy so
   the subgrid footer row stays level whether a card sells or collects emails. */
.ga-notify { display: grid; gap: .45rem; }

.ga-notify__label {
    color: var(--ga-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ga-notify__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }

.ga-notify__row input {
    min-width: 0;
    min-height: 44px;
    border: 1px solid var(--ga-line);
    border-right: 0;
    padding: .6rem .7rem;
    background: var(--ga-panel-2);
    color: var(--ga-text);
    font-size: .8rem;
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
}

.ga-notify__row input::placeholder { color: var(--ga-muted); }

.ga-notify__row button {
    min-height: 44px;
    border: 0;
    padding: .6rem .9rem;
    background: var(--ga-accent-2);
    color: #140b02;
    cursor: pointer;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    transition: filter .16s ease;
}

.ga-notify__row button:hover:not(:disabled) { filter: brightness(1.12); }
.ga-notify__row button:disabled { cursor: not-allowed; filter: grayscale(.5) brightness(.75); }

.ga-notify__error { color: #f17a72; font-size: .7rem; font-weight: 700; }

.ga-notify--done {
    display: flex;
    min-height: 52px;
    gap: .5rem;
    align-items: center;
    border-left: 3px solid var(--ga-accent-2);
    padding: .6rem .8rem;
    background: rgba(var(--ga-accent-2-rgb), .1);
    color: var(--ga-text);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.35;
}

.ga-notify--done svg { flex: 0 0 auto; color: var(--ga-accent-2); }
.ga-buy--preview:disabled {
    border-color: rgba(var(--ga-accent-rgb), .35);
    background: rgba(var(--ga-accent-rgb), .08);
    color: var(--ga-accent) !important;
}

.ga-account-guide {
    border-top: 1px solid var(--ga-line);
    border-bottom: 1px solid var(--ga-line);
    background: var(--ga-panel);
}

.ga-account-guide__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: clamp(2rem, 7vw, 6rem);
    align-items: start;
}

.ga-account-guide__included > p:not(.ga-kicker) {
    max-width: 720px;
    color: var(--ga-muted);
    line-height: 1.75;
}

.ga-included-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 2rem;
    border: 1px solid var(--ga-line);
    background: var(--ga-line);
}

.ga-included-grid > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .85rem;
    padding: 1.1rem;
    background: var(--ga-bg);
}

.ga-included-grid span {
    grid-row: 1 / 3;
    color: var(--ga-accent);
    font-family: "Chakra Petch", sans-serif;
    font-size: .72rem;
    font-weight: 850;
}

.ga-included-grid strong { font-size: .85rem; }
.ga-included-grid small {
    margin-top: .3rem;
    color: var(--ga-muted);
    font-size: .72rem;
    line-height: 1.5;
}

.ga-important {
    position: relative;
    border: 1px solid rgba(var(--ga-accent-rgb), .4);
    padding: 1.5rem;
    background:
        linear-gradient(145deg, rgba(var(--ga-accent-rgb), .1), transparent 50%),
        var(--ga-bg);
}

.ga-important__label {
    display: inline-flex;
    padding: .38rem .58rem;
    background: rgba(var(--ga-accent-rgb), .13);
    color: var(--ga-accent);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ga-important h3 {
    margin: 1rem 0;
    font-family: "Chakra Petch", Montserrat, sans-serif;
    font-size: 1.45rem;
}

.ga-important ul {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ga-important li {
    position: relative;
    padding-left: 1.2rem;
    color: var(--ga-muted);
    font-size: .8rem;
    line-height: 1.6;
}

.ga-important li::before {
    content: "!";
    position: absolute;
    left: 0;
    color: var(--ga-accent);
    font-weight: 900;
}

.ga-important a {
    display: inline-block;
    margin-top: 1.25rem;
    color: var(--ga-accent);
    font-size: .77rem;
    font-weight: 800;
}

.ga-empty { display: grid; min-height: 380px; place-items: center; align-content: center; border: 1px dashed var(--ga-line); padding: 2rem; text-align: center; background: var(--ga-panel); }
.ga-empty h3 { margin: 1rem 0 .45rem; font-family: "Chakra Petch", sans-serif; font-size: 1.5rem; }
.ga-empty p { max-width: 500px; margin: 0 0 1rem; color: var(--ga-muted); line-height: 1.6; }
.ga-empty__mark { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid var(--ga-line); color: var(--ga-muted); font-size: 1.5rem; font-weight: 800; }
.ga-empty__pulse { width: 34px; height: 34px; border: 3px solid var(--ga-line); border-top-color: var(--ga-accent); border-radius: 50%; animation: ga-spin .8s linear infinite; }
@keyframes ga-spin { to { transform: rotate(360deg); } }

.ga-process { border-top: 1px solid var(--ga-line); border-bottom: 1px solid var(--ga-line); background: var(--ga-panel); }
.ga-process h2 { max-width: 820px; }
.ga-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 2.5rem; background: var(--ga-line); border: 1px solid var(--ga-line); }
.ga-process article { min-height: 230px; padding: 1.4rem; background: var(--ga-bg); }
.ga-process article > span { color: var(--ga-accent); font-family: "Chakra Petch", sans-serif; font-size: .8rem; font-weight: 800; }
.ga-process h3 { margin: 3.5rem 0 .7rem; font-family: "Chakra Petch", sans-serif; font-size: 1.15rem; }
.ga-process article p { margin: 0; color: var(--ga-muted); font-size: .84rem; line-height: 1.65; }
.ga-trust__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: clamp(2rem, 8vw, 7rem); align-items: center; }
.ga-trust__grid > div > p:last-child,
.ga-faq__layout > div > p,
.ga-supporting-copy p { color: var(--ga-muted); line-height: 1.75; }
.ga-trust ul { display: grid; gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--ga-line); }
.ga-trust li { position: relative; padding: 1.15rem 1rem 1.15rem 2.8rem; background: var(--ga-panel); font-size: .88rem; font-weight: 650; }
.ga-trust li::before { content: "OK"; position: absolute; left: 1rem; color: var(--ga-accent); font-size: .66rem; font-weight: 900; }
.ga-warranty-link { grid-column: 2; justify-self: end; color: var(--ga-accent); font-size: .82rem; font-weight: 850; }
.ga-faq { border-top: 1px solid var(--ga-line); background: var(--ga-panel); }
.ga-faq__layout { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1fr); gap: clamp(2rem, 8vw, 7rem); }
.ga-faq__layout > div > a { display: inline-block; margin-top: 1rem; color: var(--ga-accent); font-weight: 800; }
.ga-faq__list { border-top: 1px solid var(--ga-line); }
.ga-faq details { border-bottom: 1px solid var(--ga-line); }
.ga-faq summary { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-family: "Chakra Petch", sans-serif; font-size: 1rem; font-weight: 700; list-style: none; }
.ga-faq summary::-webkit-details-marker { display: none; }
.ga-faq summary span { color: var(--ga-accent); font-size: 1.4rem; transition: transform .2s ease; }
.ga-faq details[open] summary span { transform: rotate(45deg); }
.ga-faq details p { margin: -.35rem 0 1.35rem; color: var(--ga-muted); line-height: 1.75; }
.ga-supporting-copy .container { max-width: 920px; }
.ga-supporting-copy p { font-size: .95rem; }

.ga-hub { padding: clamp(3rem, 7vw, 7rem) 0; background: radial-gradient(circle at 20% 10%, rgba(40,217,242,.09), transparent 31rem), var(--ga-bg); }
.ga-hub .ga-breadcrumbs { margin-bottom: clamp(3rem, 7vw, 6rem); }
.ga-hub h1 { max-width: 1050px; font-size: clamp(2.7rem, 6vw, 5.7rem); line-height: .98; text-transform: uppercase; }
.ga-hub__lead { max-width: 760px; margin: 1.5rem 0 3rem; color: var(--ga-muted); font-size: 1.05rem; line-height: 1.75; }
.ga-hub__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ga-hub__card { position: relative; min-height: 330px; border: 1px solid var(--ga-line); padding: 1.5rem; overflow: hidden; background: var(--ga-panel); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.ga-hub__card:hover { transform: translateY(-4px); border-color: var(--hub-accent); }
.ga-hub__card--apex { --hub-accent: #ff533d; }
.ga-hub__card--rivals { --hub-accent: #28d9f2; }
.ga-hub__card--lol { --hub-accent: #d6ad54; }
.ga-hub__card > span { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--hub-accent); color: var(--hub-accent); font-family: "Chakra Petch", sans-serif; font-size: 1.2rem; font-weight: 850; }
.ga-hub__card h2 { margin-top: 4rem; font-size: 1.65rem; }
.ga-hub__card p { color: var(--ga-muted); line-height: 1.65; }
.ga-hub__card strong { color: var(--hub-accent); font-size: .83rem; text-transform: uppercase; }

@media (max-width: 1050px) {
    .ga-shop-layout { grid-template-columns: 220px minmax(0, 1fr); }
    .ga-grid { grid-template-columns: 1fr; }
    .ga-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ga-process__grid { grid-template-columns: repeat(2, 1fr); }
    .ga-hub__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .ga-hero__inner,
    .ga-account-guide__grid,
    .ga-trust__grid,
    .ga-faq__layout { grid-template-columns: 1fr; }
    .ga-warranty-link { grid-column: 1; justify-self: start; }
    /* Art sits under the copy once the hero is one column; keep it a wide crop
       rather than the tall portrait the two-column layout wants. */
    .ga-hero__stage { min-height: 240px; }
    .ga-hero__inner { align-items: start; }
    .ga-shop-layout { grid-template-columns: 1fr; }
    .ga-filters { position: static; }
    .ga-section-heading { align-items: start; flex-direction: column; }
    .ga-results__bar { align-items: stretch; flex-direction: column; padding-bottom: .8rem; }
    .ga-results__bar label { justify-content: space-between; }
    .ga-results__bar select { width: auto; min-width: 0; }
    .ga-process__grid,
    .ga-offer-grid,
    .ga-hub__grid { grid-template-columns: 1fr; }
    .ga-process article { min-height: 190px; }
    .ga-process h3 { margin-top: 2.4rem; }
}

@media (max-width: 480px) {
    .ga-hero h1 { font-size: clamp(2.25rem, 13vw, 3.4rem); }
    .ga-hero__inner { padding-bottom: 3rem; }
    /* Stacked, the vertical dividers between tally items point the wrong way and
       collide; rule each row underneath instead. */
    .ga-hero__proof {
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }
    .ga-hero__proof span {
        padding: .6rem 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }
    .ga-hero__proof span:last-child { border-bottom: 0; }
    .ga-hero__proof b { font-size: 1.15rem; }
    .ga-card__body { grid-template-columns: 46px minmax(0, 1fr); padding: .9rem; }
    .ga-card__sigil { width: 46px; height: 46px; }
    .ga-card__footer { align-items: stretch; flex-direction: column; }
    .ga-buy { width: 100%; }
    .ga-specs { grid-template-columns: 1fr 1fr; }
    .ga-offer-card__header,
    .ga-offer-card__level,
    .ga-offer-card__intro,
    .ga-offer-facts,
    .ga-offer-includes,
    .ga-offer-card__footer { margin-left: 1rem; margin-right: 1rem; }
    .ga-offer-card__header { margin: 0; padding-left: 1rem; padding-right: 1rem; }
    .ga-included-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ga-card,
    .ga-offer-card,
    .ga-hub__card { transition: none; }
    .ga-empty__pulse { animation: none; }
}