/* =============================================================================
   CoinsHawk theme — dark navy by default with a light scheme behind the header
   switch (data-scheme on <html>, Theme::scheme()), built on the tokens in
   magic.css. Both schemes are token sets in section 1; components only use
   tokens, so a component looks right in both without its own light rules.
   Layout follows docs/design-brief.md (2026-10-17): header with logo, search,
   cart and country flag; square product tiles with a price range; brand page
   with a blurred hero, product cards ("Buy now"), sidebar boxes and an SEO text;
   three-point trust strip; footer with link columns, the whole brand logo grid,
   the coin row, the trademark note and the company line.
   1. Tokens (dark) · 1b. Light scheme  2. Base  3. Shell (header, sheets, footer, sidebar)  4. Components
   5. Storefront  6. Cart & checkout  7. Order  8. Account / admin  9. Utilities
   10. Responsive
   ========================================================================== */

/* -- 1. Tokens ------------------------------------------------------------ */
:root {
  --bg: var(--mg-bg);
  --bg-2: var(--mg-surface);
  --surface: var(--mg-card);
  --surface-2: var(--mg-muted);
  --border: var(--mg-border);
  --border-2: var(--mg-input);
  --text: var(--mg-fg);
  --text-2: #b7c3d4;
  --muted: var(--mg-muted-fg);
  --accent: #4c8dff;
  --accent-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  --primary: #24497a;          /* button fill, steel blue */
  --primary-border: #3a72c2;
  --primary-hover: #2b5894;
  --primary-fg: #ffffff;      /* text on --primary (a skin with a light button sets it dark) */
  --ok: var(--mg-success);
  --ok-bg: color-mix(in srgb, var(--mg-success) 14%, transparent);
  --warn: var(--mg-warning);
  --warn-bg: color-mix(in srgb, var(--mg-warning) 16%, transparent);
  --bad: var(--mg-destructive);
  --bad-bg: color-mix(in srgb, var(--mg-destructive) 12%, transparent);
  --info: var(--mg-info);
  --info-bg: color-mix(in srgb, var(--mg-info) 12%, transparent);
  --wait: var(--mg-c3);
  --wait-bg: color-mix(in srgb, var(--mg-c3) 12%, transparent);
  /* Hawk Coins: the gold of the coin in the logo. --gold is for text and numbers. */
  --gold: #ffc35a;
  --gold-bg: color-mix(in srgb, #ffc35a 12%, transparent);
  --gold-border: color-mix(in srgb, #ffc35a 38%, transparent);
  --gold-glow: radial-gradient(closest-side, rgba(255, 190, 80, .34), rgba(255, 190, 80, .1) 55%, rgba(255, 190, 80, 0) 100%);
  --header-bg: #070b11;
  /* Header search: a filled navy field without a frame, one step lighter than
     the header, like the rest of the right-hand tools. */
  --nav-search-bg: #111a27;
  --nav-search-hover: #172233;
  --footer-bg: #0a0f17;
  /* Logo plates: a raised navy surface lit from the top. The brand images are
     whole card renders (dark slate Amazon, black Razer, bright Google), so the
     card gets an edge of its own: a hairline that follows its shape and a soft
     shadow under it (--card-edge on the image, --card-edge-sm on thumbnails).
     Whole pixels only: WebKit rounds a .6px blur down to 0 and the edge is gone. */
  --plate: radial-gradient(120% 90% at 50% 8%, #2a3a52 0%, #19243a 46%, #111a28 100%);
  --plate-border: rgba(255, 255, 255, .12);
  --card-edge: drop-shadow(0 0 1px rgba(255, 255, 255, .42)) drop-shadow(0 10px 14px rgba(0, 0, 0, .5));
  --card-edge-sm: drop-shadow(0 0 1px rgba(255, 255, 255, .38));
  --flag-ring: rgba(255, 255, 255, .16);
  --hero-shade-from: rgba(11, 16, 23, .55);
  --hero-shade-to: rgba(11, 16, 23, .85);
  --hero-title: #ffffff;
  --hero-text: #e9eef6;
  /* Home carousel (.showcase): a dark banner in both schemes, because its art
     is dark navy; only the shadow around it follows the scheme. */
  --showcase-bg: #070b15;
  --showcase-bg-2: #0c1426;
  --showcase-text: #f2f6fc;
  --showcase-muted: #b4c1d6;
  --showcase-line: rgba(255, 255, 255, .13);
  --showcase-glass: rgba(10, 16, 30, .62);
  --showcase-shade: rgba(7, 11, 21, .78);
  --showcase-bar: rgba(5, 8, 15, .78);
  --showcase-cta-bg: #ffffff;
  --showcase-cta-text: #0b1322;
  --showcase-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .07);
  --footer-logo-filter: grayscale(1) brightness(1.7) contrast(.85);
  --backdrop: rgba(3, 6, 10, .6);
  --radius: var(--mg-radius);
  --radius-lg: 14px;
  --radius-sm: 6px;
  --shadow: var(--mg-shadow);
  --shadow-sm: var(--mg-shadow-xs);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --container: 1180px;
  --container-wide: 1380px;
  --container-narrow: 760px;
  --header-h: 66px;
}

/* -- 1b. Light scheme -----------------------------------------------------
   White cards on a soft grey-blue page, navy text, the same steel-blue
   buttons. Status colours are darker than in the dark set so text in them
   keeps a contrast of at least 4.5:1 on white. Logo plates are near-white
   with a visible border, because white on white has no edge. */
:root[data-scheme="light"] {
  --mg-bg: #f3f6fa;
  --mg-fg: #0f1a2a;
  --mg-card: #ffffff;
  --mg-muted: #eaf0f6;
  --mg-muted-fg: #56667c;
  --mg-border: rgba(15, 35, 65, .11);
  --mg-input: rgba(15, 35, 65, .2);
  --mg-ring: #2f6fe4;
  --mg-surface: #f8fafc;
  --mg-destructive: #c9302c;
  --mg-success: #13814a;
  --mg-warning: #a85f00;
  --mg-info: #1d64d1;
  --mg-c3: #1f6fd6;
  --mg-fg-rgb: 15, 26, 42;
  --mg-bg-rgb: 243, 246, 250;
  --mg-shadow-xs: 0 1px 2px 0 rgba(15, 30, 55, .07);
  --mg-shadow-sm: 0 1px 3px 0 rgba(15, 30, 55, .1), 0 1px 2px -1px rgba(15, 30, 55, .08);
  --mg-shadow: 0 6px 16px -6px rgba(15, 30, 55, .16);
  --mg-shadow-lg: 0 18px 40px -14px rgba(15, 30, 55, .25);
  --mg-dot: rgba(30, 55, 95, .09);
  --mg-line: rgba(30, 55, 95, .06);
  --mg-spot: rgba(47, 111, 228, .07);
  --mg-glass: rgba(255, 255, 255, .82);

  --text-2: #33445a;
  --accent: #1f63d6;
  --primary: #24497a;
  --primary-border: #24497a;
  --primary-hover: #1c3c66;
  --header-bg: #ffffff;
  --nav-search-bg: #eef2f7;
  --nav-search-hover: #e5ebf2;
  --footer-bg: #e9eef5;
  --plate: linear-gradient(180deg, #ffffff 0%, #ffffff 35%, #edf1f7 100%);
  --plate-border: rgba(15, 35, 65, .12);
  --card-edge: drop-shadow(0 7px 10px rgba(15, 30, 55, .2));
  --card-edge-sm: none;
  --flag-ring: rgba(15, 35, 65, .16);
  --hero-shade-from: rgba(255, 255, 255, .62);
  --hero-shade-to: rgba(255, 255, 255, .9);
  --hero-title: var(--mg-fg);
  --hero-text: #2a3a50;
  --showcase-bg: #070b15;
  --showcase-bg-2: #0c1426;
  --showcase-text: #f2f6fc;
  --showcase-muted: #b4c1d6;
  --showcase-line: rgba(255, 255, 255, .13);
  --showcase-glass: rgba(10, 16, 30, .62);
  --showcase-shade: rgba(7, 11, 21, .78);
  --showcase-bar: rgba(5, 8, 15, .78);
  --showcase-cta-bg: #ffffff;
  --showcase-cta-text: #0b1322;
  --showcase-shadow: 0 26px 50px -26px rgba(15, 30, 55, .55), 0 0 0 1px rgba(15, 35, 65, .08);
  --footer-logo-filter: grayscale(1) contrast(.9);
  --backdrop: rgba(15, 26, 42, .38);
  --gold: #8a5300;
  --gold-bg: color-mix(in srgb, #e09a1b 12%, transparent);
  --gold-border: color-mix(in srgb, #c98510 42%, transparent);
  --gold-glow: radial-gradient(closest-side, rgba(224, 154, 27, .3), rgba(224, 154, 27, .08) 55%, rgba(224, 154, 27, 0) 100%);

  color-scheme: light;
}
/* One frame without transitions while the switch runs (theme.js), so every
   surface changes at once instead of fading at its own speed. */
.scheme-switching, .scheme-switching *, .scheme-switching *::before, .scheme-switching *::after { transition: none !important; }

/* -- 2. Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text); font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none;
}
body.layout--default { background-image: radial-gradient(var(--mg-dot) 1px, transparent 1px); background-size: 24px 24px; background-attachment: fixed; }
::selection { background: var(--accent); color: var(--accent-fg, #fff); }
img, svg { display: inline-block; vertical-align: middle; max-width: 100%; }
a { color: var(--text); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
.prose a, .faq__a a, .page__lead a, .field__hint a, .muted a, .notice p a, .alert a, .empty a, .seo a,
.footer__legal a, .summary__note a, .order-note a, .list a, .card > p a, .steps a, .region-note a, .auth-foot a, .side-box__text a {
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
a.btn[href] { text-decoration: none; } /* buttons inside those blocks (empty states, notices) stay buttons */
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.03em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .9rem; }
code, pre, .mono { font-family: var(--mono); font-size: .92em; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mg-ring); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Hidden by a vertical transform, not by an off-screen left: in a right-to-left
   document the left side is the scrollable one, and left:-999px gave every
   Arabic page a kilometre of empty horizontal scroll. */
.skip { position: absolute; inset-inline-start: 8px; top: 8px; background: var(--primary); color: var(--primary-fg); padding: .5rem .8rem; border-radius: var(--radius); z-index: 100; transform: translateY(-200%); opacity: 0; }
.skip:focus { transform: none; opacity: 1; }
[hidden] { display: none !important; }
.js [data-hide-with-js] { display: none !important; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.icon { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.14em; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* Country flags are round SVG images (flag_icon(), assets/flags), never emoji.
   The size comes from the width/height attributes; the ring keeps white flags
   (Japan, Korea) visible on a white surface. */
.flag { display: inline-block; flex: 0 0 auto; vertical-align: -.22em; border-radius: 50%; box-shadow: 0 0 0 1px var(--flag-ring); }
.flags-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
/* A select with the chosen option's flag in front of it (prefs sheet, brand sidebar). */
.select-flag { position: relative; display: block; }
.select-flag > .flag { position: absolute; inset-inline-start: .9rem; top: 50%; transform: translateY(-50%); pointer-events: none; }
.select-flag > select.field__input, .sheet .select-flag > select.field__input { padding-inline-start: 2.75rem; }
.sheet .select-flag > .flag { inset-inline-start: .8rem; }
.sheet .select-flag > select.field__input { padding-inline-start: 2.45rem; }

/* -- 3. Shell ------------------------------------------------------------- */
/* Side padding only: .container sits on elements that bring their own vertical
   padding (.layout__body, .alerts), and a shorthand here would wipe it. */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: 20px; }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.layout__main { flex: 1 0 auto; padding-bottom: 3.5rem; }
.layout--default .layout__main > .page:first-child, .layout--default .alerts + .page { padding-top: 1.6rem; }
.layout__main--centered { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 20px; }
/* align-content: start keeps the rows at their content height. The body grows to
   fill the screen (flex: 1 0 auto); without it the spare height was shared out to
   the rows, which put a large empty band under the phone menu. */
.layout__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; padding-top: 1.6rem; padding-bottom: 3rem; align-items: start; align-content: start; flex: 1 0 auto; }
.layout--app .layout__main { padding: 0; min-width: 0; }
.layout--app .alerts { padding: 0; margin: 0 0 1.2rem; max-width: none; }

/* Header: logo, search, links, cart, flag */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid var(--border); }
.nav { display: flex; align-items: center; gap: 1.2rem; min-height: var(--header-h); flex-wrap: wrap; }
.nav__brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; text-transform: uppercase; }
.nav__brand:hover { text-decoration: none; }
.nav__logo { width: 36px; height: 36px; border-radius: 9px; }
.nav__links { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav__link { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: var(--radius); color: var(--text-2); font-weight: 500; font-size: .95rem; white-space: nowrap; }
.nav__link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav__link.is-active { color: var(--text); background: var(--surface-2); }
.nav__tools { display: flex; align-items: center; gap: .3rem; margin-inline-start: auto; }
.nav__tool { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); background: transparent; border: 0; color: var(--text); }
.nav__tool:hover { background: var(--surface-2); text-decoration: none; }
.nav__tool .icon { width: 26px; height: 26px; stroke-width: 2; }
.nav__cart-count { position: absolute; top: 2px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .74rem; font-weight: 700; line-height: 20px; text-align: center; }
.nav__flag .flag { width: 26px; height: 26px; }
/* Light/dark switch: both icons are in the markup, the scheme picks one. */
.nav__scheme { display: inline-flex; margin: 0; }
.nav__scheme .icon { width: 24px; height: 24px; }
.nav__scheme-moon, [data-scheme="light"] .nav__scheme-sun { display: none; }
[data-scheme="light"] .nav__scheme-moon { display: inline-block; }
/* Desktop search sits on the right, next to the tools (skine.com): the auto
   margin takes the free space, so it stays beside the cart whether the links
   share its row or not. Between 170 and 300 px wide; theme.js counts it at its
   170 px basis when it decides whether the links fit on the same row. */
.nav__search { position: relative; flex: 1 1 170px; max-width: 300px; margin-inline-start: auto; }
.nav__search .icon { position: absolute; inset-inline-start: .85rem; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.nav__search-input { width: 100%; height: 40px; padding-block: 0; padding-inline: 2.4rem .9rem; border-radius: var(--radius); border: 1px solid transparent; background: var(--nav-search-bg); color: var(--text); font-size: .92rem; transition: background-color .15s, border-color .15s; }
.nav__search-input::placeholder { color: var(--muted); opacity: 1; }
.nav__search-input:hover { background: var(--nav-search-hover); }
.nav__search-input:focus { outline: none; background: var(--surface); border-color: var(--mg-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-ring) 30%, transparent); }
/* The suggestions open under the field towards the page, at least 360 px wide. */
.nav__search--desktop .suggest { inset-inline: auto 0; width: max(100%, 360px); }
/* Space under the phone row is a margin, not padding, so the icon's top: 50%
   centres it on the field. */
.nav__search--phone { display: none; flex: 1 1 100%; max-width: none; margin-inline-start: 0; margin-bottom: .7rem; }
.site-header.search-open .nav__search--phone { display: block; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); display: inline-grid; place-items: center; font-weight: 600; font-size: .74rem; }
.icon-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); width: 36px; height: 36px; border-radius: var(--radius); display: inline-grid; place-items: center; }
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn .icon { width: 17px; height: 17px; }

/* Sheets: the settings panel behind the flag (full screen on phones, right panel on desktop) */
.sheet { position: fixed; inset: 0; z-index: 90; display: none; }
.sheet.is-open { display: block; }
.sheet__backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.sheet__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--bg); border-left: 1px solid var(--border); padding: 1.1rem 18px 1.6rem; overflow-y: auto; box-shadow: var(--mg-shadow-lg); }
/* The panel takes the focus on open (theme.js), so no control shows a focus ring before it is used. */
.sheet__panel:focus { outline: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.sheet__title { margin: 0; font-size: 1.45rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.sheet__close { background: transparent; border: 0; color: var(--text); width: 40px; height: 40px; margin-inline-end: -8px; display: inline-grid; place-items: center; border-radius: var(--radius); }
.sheet__close:hover { background: var(--surface-2); }
.sheet__close .icon { width: 22px; height: 22px; }
/* The form's own gap spaces the groups; the fields add nothing, or the space doubles. */
.sheet .form { gap: 1.05rem; }
.sheet .field { margin-bottom: 0; gap: .45rem; }
.sheet .field__label { font-size: .98rem; font-weight: 700; }
.sheet .field__input { padding: .55rem .85rem; font-size: .92rem; line-height: 1.35; background-color: var(--surface); }
/* background-color, not the shorthand: the shorthand wiped the select arrow (a background image). */
.sheet select.field__input { padding-inline-end: 2.4rem; }
.sheet__note { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .75rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--mg-warning) 55%, transparent); background: color-mix(in srgb, var(--mg-warning) 22%, var(--surface)); color: var(--text); font-size: .84rem; line-height: 1.45; margin: -.4rem 0 0; }
.sheet__note .icon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: .15rem; }
.sheet .field__hint { font-size: .8rem; line-height: 1.45; }
.sheet .btn--block { padding: .62rem 1rem; font-size: .95rem; margin-top: .3rem; }
.sheet__select { display: flex; align-items: center; gap: .6rem; }
/* Appearance in the settings sheet: two cards, each with a small preview swatch. */
.schemes { border: 0; padding: 0; margin: 0; min-width: 0; }
.schemes legend { padding: 0; }
.schemes__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .45rem; }
.schemes__option { position: relative; display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); font-weight: 600; font-size: .92rem; cursor: pointer; }
.schemes__option:hover { border-color: var(--accent); }
.schemes__option input { position: absolute; opacity: 0; pointer-events: none; }
.schemes__option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-bg); }
.schemes__option:has(input:focus-visible) { outline: 2px solid var(--mg-ring); outline-offset: 2px; }
.schemes__swatch { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px; display: inline-grid; place-items: center; border: 1px solid var(--border-2); }
.schemes__swatch .icon { width: 15px; height: 15px; }
.schemes__swatch--dark { background: #0b1017; color: #e8eef7; }
.schemes__swatch--light { background: #ffffff; color: #0f1a2a; }

/* Footer */
.site-footer { background: var(--footer-bg); border-top: 1px solid var(--border); padding: 2.6rem 0 2.2rem; margin-top: auto; font-size: .95rem; }
.footer__brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; text-transform: uppercase; color: var(--text); }
.footer__brand:hover { text-decoration: none; }
.footer__copy { color: var(--text-2); margin: .6rem 0 0; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2.4rem 0 2.6rem; }
.footer__col { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.footer__col a { color: var(--text-2); font-size: 1rem; }
.footer__col a:hover { color: var(--text); }
.footer__title { font-weight: 700; color: var(--text); margin: 0 0 .4rem; font-size: 1.15rem; }
.footer__products { margin: 0 0 2.4rem; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.footer__logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 1.6rem 1rem; align-items: center; }
.footer__logo { display: block; position: relative; height: 54px; }
.footer__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--footer-logo-filter); opacity: .78; transition: filter .2s ease, opacity .2s ease; }
.footer__logo:hover img { filter: none; opacity: 1; }
.footer__logo .brand-tile__fallback { font-size: .8rem; border-radius: var(--radius); }
.footer__coins { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 0 0 2.2rem; }
.footer__legal { text-align: center; color: var(--muted); font-size: .95rem; max-width: 72ch; margin: 0 auto; }
.footer__legal p { margin: 0 0 .9rem; }
.site-footer--compact { padding: 1.4rem 0; }
.site-footer--compact .footer__legal { text-align: left; max-width: none; font-size: .86rem; }

/* Sidebar (account + admin) */
.sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
.sidebar__nav { display: flex; flex-direction: column; gap: .1rem; }
.sidebar__title { text-transform: uppercase; letter-spacing: .09em; font-size: .68rem; font-weight: 600; color: var(--muted); margin: 1rem 0 .3rem; margin-inline-start: .7rem; }
.sidebar__title:first-child { margin-top: 0; }
.sidebar__link { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: var(--radius); color: var(--text-2); font-weight: 500; font-size: .92rem; background: transparent; border: 1px solid transparent; width: 100%; text-align: left; }
.sidebar__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.sidebar__link.is-active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: inset 3px 0 0 var(--accent); }
.sidebar__ico { width: 16px; height: 16px; color: var(--muted); }
.sidebar__link.is-active .sidebar__ico, .sidebar__link:hover .sidebar__ico { color: var(--text); }
.sidebar__logout { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.sidebar__text { min-width: 0; }
/* Phone toggle (shown under 900 px): icon of the current page, section + page name, "Menu" chevron. */
.sidebar__toggle { display: none; width: 100%; align-items: center; gap: .75rem; padding: .55rem .6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); text-align: start; transition: border-color .16s ease, background-color .16s ease; }
.sidebar__toggle:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.sidebar__toggle-ico { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); }
.sidebar__toggle-ico .icon { width: 18px; height: 18px; }
.sidebar__toggle-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.sidebar__toggle-kicker { font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__toggle-label { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__toggle-hint { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .55rem .35rem .7rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: .85rem; font-weight: 500; }
.sidebar__toggle-chev { transition: transform .2s ease; }
.sidebar.is-open .sidebar__toggle { border-color: var(--border-2); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sidebar.is-open .sidebar__toggle-chev { transform: rotate(180deg); }

/* -- 4. Components -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .6rem 1rem; border-radius: var(--radius); border: 1px solid var(--border-2);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: .95rem; line-height: 1.25;
  letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.btn:hover { text-decoration: none; background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary-border); }
.btn--primary:hover { background: var(--primary-hover); border-color: color-mix(in srgb, var(--primary-border) 80%, #fff); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.btn--danger:hover { background: color-mix(in srgb, var(--bad) 20%, transparent); }
.btn--link { background: none; border: 0; padding: .2rem .3rem; color: var(--muted); font-weight: 500; }
.btn--link:hover { color: var(--bad); background: none; text-decoration: underline; }
.btn--sm { padding: .4rem .75rem; font-size: .86rem; border-radius: var(--radius-sm); }
.btn--lg { padding: .85rem 1.5rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn.is-disabled { opacity: .5; pointer-events: none; }

.card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1.25rem; }
.card--flush { padding: 0; overflow: hidden; }
.card--flush .card__head { padding: 1rem 1.2rem .8rem; }
.card--flush .empty--inline { padding: 1.5rem; }
.card--muted { background: var(--bg-2); }
.card--warn { border-color: color-mix(in srgb, var(--mg-warning) 55%, transparent); }
.card__title { font-size: 1.05rem; margin-bottom: .9rem; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; flex-wrap: wrap; }
.card__head .card__title { margin-bottom: 0; }
.card__head--tools { align-items: center; }
.card__link { font-size: .9rem; font-weight: 500; color: var(--text-2); }
.card--auth { width: 100%; max-width: 440px; padding: 1.8rem; }
.card__brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.03em; color: var(--text); margin-bottom: 1.4rem; }
.card__brand:hover { text-decoration: none; }
.auth-foot { margin-top: 1.2rem; color: var(--muted); font-size: .9rem; }

.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 500; letter-spacing: .01em; line-height: 1.5; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.badge--ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge--wait { background: var(--wait-bg); color: var(--wait); border-color: color-mix(in srgb, var(--wait) 30%, transparent); }
.badge--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--mg-warning) 35%, transparent); }
.badge--bad { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.badge--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.badge--muted { background: var(--surface-2); color: var(--muted); }
.badge--lg { font-size: .9rem; padding: .32rem .85rem; }
.pill { display: inline-block; padding: .08rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .76rem; color: var(--text-2); margin: .1rem .1rem .1rem 0; white-space: nowrap; }

.alerts { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.2rem; }
.alert { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); font-size: .93rem; }
.alert__icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .15rem; }
.alert__text { flex: 1; min-width: 0; }
.alert__text a, .alert a { font-weight: 500; }
.alert__close { background: none; border: 0; color: inherit; opacity: .6; line-height: 1; padding: 0 .1rem; display: inline-grid; place-items: center; }
.alert__close .icon { width: 16px; height: 16px; }
.alert__close:hover { opacity: 1; }
.alert--success { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); } .alert--success .alert__icon { color: var(--ok); }
.alert--info { border-color: color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 10%, var(--surface)); } .alert--info .alert__icon { color: var(--info); }
.alert--warning { border-color: color-mix(in srgb, var(--mg-warning) 40%, transparent); background: color-mix(in srgb, var(--mg-warning) 12%, var(--surface)); } .alert--warning .alert__icon { color: var(--warn); }
.alert--danger { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); } .alert--danger .alert__icon { color: var(--bad); }
.alert p:last-child { margin: 0; }
p.alert { display: block; }
/* Alerts written into a page (not the flash stack) keep their distance from what follows. */
.page .alert:not(:last-child) { margin-bottom: 1.2rem; }
.page .form > .alert { margin-bottom: 0; }

.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: .5rem; z-index: 95; max-width: min(360px, calc(100vw - 32px)); }
.toast { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: .75rem 1rem; box-shadow: var(--mg-shadow-lg); font-size: .92rem; animation: toast-in .2s ease-out; }
.toast--ok { border-left-color: var(--ok); } .toast--bad { border-left-color: var(--bad); }
.toast a { font-weight: 500; text-decoration: underline; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Forms */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem; }
.form--inline .field__input { flex: 1; min-width: 180px; }
.form__actions { display: flex; gap: .8rem; align-items: center; justify-content: flex-end; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field--span2 { grid-column: span 2; }
.field__label { font-size: .9rem; font-weight: 600; color: var(--text); }
.field__input { width: 100%; padding: .6rem .85rem; border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font-size: .97rem; transition: border-color .16s ease, box-shadow .16s ease; }
.field__input:focus { outline: none; border-color: var(--mg-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-ring) 30%, transparent); }
.field__input::placeholder { color: var(--muted); opacity: .8; }
.field__input--code { font-family: var(--mono); font-size: .86rem; line-height: 1.5; }
textarea.field__input { resize: vertical; min-height: 6rem; }
select.field__input, .filters__field select, .rail select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
/* A select is as wide as its longest option; keep that text inside the box (WebKit
   counted it as overflow and widened the page). */
select.field__input { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Date fields get the same height as the text fields even when empty. */
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { display: block; min-width: 0; max-width: 100%; }
input.field__input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { min-height: calc(1.55em + 1.2rem + 2px); }
/* iPhone and iPad (Safari and every other iOS browser). Two platform fixes:
   1. iOS draws date fields as a menu button and, when the width is a percentage,
      switches them to box-sizing: content-box with a minimum width (WebKit,
      RenderThemeIOS::adjustInputElementButtonStyle). width: 100% plus padding
      then sticks out of the form. Without the native appearance that rule does
      not run and the field is sized like every other input.
   2. iOS zooms the page into any field whose text is smaller than 16 px. */
@supports (-webkit-touch-callout: none) {
  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { -webkit-appearance: none; appearance: none; box-sizing: border-box; }
  /* Without the native look an empty date field is a blank box; a calendar icon says what it is. */
  :root input:is([type="date"], [type="datetime-local"], [type="month"]) { padding-inline-end: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b97a8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9.5h18M8 3v3M16 3v3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 18px 18px; background-position: right .85rem center; }
  :root[dir="rtl"] input:is([type="date"], [type="datetime-local"], [type="month"]) { background-position: left .85rem center; }
  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value { text-align: start; margin: 0; min-height: 1.55em; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), select, textarea { font-size: 16px !important; }
}
.field__hint { color: var(--muted); font-size: .85rem; margin: 0; }
.field__hint a { font-weight: 500; }
.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; margin: 0; display: flex; flex-direction: column; gap: .8rem; }
.fieldset legend { padding: 0 .4rem; font-weight: 600; font-size: .9rem; color: var(--text); }
.input-group { display: flex; align-items: stretch; }
.input-group .field__input { border-radius: 0; flex: 1; min-width: 0; }
.input-group .field__input:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.input-group .field__input:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.input-group__addon { display: inline-flex; align-items: center; padding: 0 .8rem; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); font-size: .9rem; font-weight: 500; }
.input-group__addon:first-child { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.input-group__addon:last-child { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--accent); }
.check--top { align-items: center; margin-top: 1.4rem; }
.check--required span::after { content: " *"; color: var(--bad); }
.captcha { margin: .4rem 0; }
.links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1.2rem; font-size: .92rem; }
.links a { color: var(--text-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.search { display: flex; gap: .5rem; align-items: stretch; }
.search__field { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.search__field > .icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.search__input { flex: 1; width: 100%; min-width: 0; padding: .7rem 1rem .7rem 2.5rem; border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-size: 1rem; }
.search__input:focus { outline: none; border-color: var(--mg-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-ring) 30%, transparent); }
.search .btn { flex: 0 0 auto; }
.search__input { text-overflow: ellipsis; }
.search__submit-ico { display: none; }
.search--lg .search__input { padding: 1rem 1.1rem 1rem 3.2rem; font-size: 1.08rem; border-radius: var(--radius-lg); }
.search--lg .search__field > .icon { left: 1.1rem; width: 1.3rem; height: 1.3rem; }
.search--lg .btn { border-radius: var(--radius-lg); }

/* Brand suggestions under a search box (theme.js [data-suggest]). The list is
   absolutely placed under the field; .is-suggesting lifts the field (and the
   page header it sits in) above the content that follows. Logo plates follow
   the plate rule: a definite box and an absolutely placed image. */
.is-suggesting { z-index: 60; }
.shop-head:has(.is-suggesting) { position: relative; z-index: 40; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain; padding: .35rem; background: var(--mg-card); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: var(--mg-shadow-lg); text-align: start; }
.suggest[hidden] { display: none; }
.suggest__item { display: flex; align-items: center; gap: .75rem; padding: .45rem .55rem; border-radius: var(--radius); color: inherit; text-decoration: none; min-width: 0; }
.suggest__item:hover, .suggest__item[aria-selected="true"] { background: var(--mg-muted); }
.suggest__logo { position: relative; flex: 0 0 40px; width: 40px; height: 40px; display: block; border-radius: 8px; background: var(--plate); border: 1px solid var(--border); overflow: hidden; }
.suggest__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 3px; filter: var(--card-edge-sm); }
.suggest__abbr { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: var(--text-2); }
.suggest__text { display: flex; flex-direction: column; min-width: 0; }
.suggest__name { font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__name mark { background: none; color: var(--accent); font-weight: 800; }
.suggest__meta { color: var(--muted); font-size: .8rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__all { display: block; margin-top: .25rem; padding: .6rem .55rem; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); color: var(--accent); font-weight: 600; font-size: .9rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest__all:hover, .suggest__all[aria-selected="true"] { background: var(--mg-muted); }
.suggest__none { margin: 0; padding: .7rem .6rem; color: var(--muted); font-size: .92rem; }
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.qty__btn { width: 2.1rem; background: transparent; border: 0; color: var(--text-2); font-size: 1rem; display: grid; place-items: center; }
.qty__btn:hover { background: var(--surface); color: var(--text); }
.qty__btn:disabled { opacity: .4; }
.qty__input { width: 2.6rem; text-align: center; border: 0; background: transparent; color: var(--text); padding: .4rem 0; -moz-appearance: textfield; font-size: .97rem; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.card .table-wrap, .card--flush .table-wrap { border: 0; border-radius: 0; background: transparent; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 500; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tfoot td { border-bottom: 0; border-top: 1px solid var(--border); padding-top: .5rem; padding-bottom: .3rem; color: var(--text-2); }
.table tfoot tr:first-child td { padding-top: .9rem; }
.table__total td { font-weight: 600; color: var(--text); font-size: 1rem; }
.table--compact { font-size: .86rem; }
.table--compact th, .table--compact td { padding: .5rem .7rem; }
.table--hover tbody tr:hover { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap, .nowrap { white-space: nowrap; }
.table .is-dim { opacity: .55; }
.table .badge { margin-block: .1rem; } /* badges that wrap in a narrow cell do not touch */
.table .inline { display: inline; }
.table .inline + .inline { margin-left: .3rem; }
.table form { margin: 0; }
.brand-cell { display: inline-flex; align-items: center; gap: .5rem; color: var(--text); font-weight: 500; }
.brand-cell img { border-radius: 6px; background: var(--plate); padding: 2px; border: 1px solid var(--border); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; margin: 0; font-size: .92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv--grid { grid-template-columns: 1fr auto; }
.kv--grid dd { text-align: right; font-weight: 500; }
.kv--stack { grid-template-columns: 1fr; gap: .2rem; }
.kv--stack dt { margin-top: .7rem; font-weight: 500; color: var(--text-2); }
.kv--stack dt:first-child { margin-top: 0; }
.kv--stack dd code { font-size: .8rem; }
.raw summary { cursor: pointer; color: var(--text-2); font-size: .85rem; }
.raw pre { margin-top: .4rem; padding: .6rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: .78rem; max-height: 280px; overflow: auto; }
.wrap { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.notes { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .8rem; font-size: .85rem; margin-bottom: .8rem; max-height: 260px; overflow: auto; }

/* Chips, tabs, seg, filters, crumbs, pagination */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.chips--sub { margin-top: -.4rem; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-size: .88rem; font-weight: 500; }
.chip small { color: var(--muted); font-weight: 500; }
.chip:hover { text-decoration: none; color: var(--text); background: var(--surface-2); }
.chip--active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip--active small { color: var(--bg); opacity: .7; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin: 1.2rem 0 1rem; overflow-x: auto; }
.tab { padding: .55rem .9rem; color: var(--text-2); font-weight: 500; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab small { color: var(--muted); font-weight: 500; margin-left: .25rem; }
.tab:hover { color: var(--text); text-decoration: none; }
.tab--active { color: var(--text); border-bottom-color: var(--accent); }
.tabs--acp { margin-top: 0; }
.seg { display: flex; gap: .3rem; padding: .25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 1rem; max-width: 100%; overflow-x: auto; }
.seg__item { padding: .45rem .9rem; border-radius: var(--radius-sm); color: var(--text-2); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.seg__item:hover { color: var(--text); text-decoration: none; }
.seg__item.is-active { background: var(--surface); color: var(--text); }
.seg__item small { color: var(--muted); font-weight: 500; margin-left: .2rem; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; margin: 0 0 1.4rem; }
.filters__field { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--muted); font-weight: 500; }
.filters__field select, .filters__field input { padding: .55rem .8rem; border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); min-width: 160px; font-size: .92rem; }
.filters__field--grow { flex: 1; min-width: 200px; }
.filters__field--grow input { width: 100%; }
.filters__reset { font-size: .88rem; color: var(--muted); align-self: center; padding: .55rem 0; text-decoration: underline; }
.filters--acp { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .9rem 1rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--muted); font-size: .88rem; margin-bottom: 1rem; }
.crumbs a { color: var(--text-2); }
.pagination { display: flex; gap: .3rem; justify-content: center; margin: 1.4rem 0; flex-wrap: wrap; }
.pagination__link { min-width: 2.2rem; padding: .4rem .6rem; text-align: center; border-radius: var(--radius); border: 1px solid var(--border); color: var(--text-2); font-weight: 500; background: var(--surface); font-size: .9rem; }
.pagination__link:hover { text-decoration: none; background: var(--surface-2); color: var(--text); }
.pagination__link.is-active { background: var(--primary); color: var(--primary-fg); border-color: var(--primary-border); }
.pagination__gap { padding: .4rem .3rem; color: var(--muted); }

/* Page scaffolding */
.page__header { margin-bottom: 1.6rem; }
.page__header--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.page__title { margin-bottom: .35rem; }
.page__lead { color: var(--text-2); font-size: 1rem; margin: 0; max-width: 70ch; }
.page__kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; color: var(--muted); margin: 0 0 .2rem; }
.section { padding: 2.4rem 0 0; }
.section--tight { padding: 1.8rem 0 0; }
.section__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.section__title { font-size: 1.35rem; color: var(--text-2); font-weight: 600; }
.section__link { font-weight: 500; color: var(--text-2); font-size: .95rem; display: inline-flex; align-items: center; gap: .3rem; }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.empty { text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--border-2); border-radius: var(--radius-lg); color: var(--muted); }
.empty--inline { padding: 1.6rem; border: 0; }
.empty__title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.empty__icon { font-size: 2.4rem; margin: 0 0 .6rem; line-height: 1; color: var(--muted); font-weight: 500; letter-spacing: -.04em; }
.empty .btn { margin-top: .8rem; }
.empty .actions { justify-content: center; margin-top: 1rem; }
.list { padding-left: 1.2rem; margin: 0; }
.list li { margin-bottom: .5rem; }
.list--plain { list-style: none; padding: 0; }
.list--tight li { margin-bottom: .15rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.row-between > * { min-width: 0; }
.stack { display: flex; flex-direction: column; gap: .6rem; }
.stack form { margin: 0; }
.announce { background: var(--primary); color: var(--primary-fg); font-weight: 500; text-align: center; padding: .55rem 0; font-size: .92rem; }
.back { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); font-size: 1rem; margin: 0 0 1rem; }
.back:hover { color: var(--text); text-decoration: none; }

/* -- 5. Storefront -------------------------------------------------------- */
/* Shop head: title + search (home and catalogue) */
.shop-head { display: flex; flex-direction: column; gap: 1rem; margin: 1.2rem 0 1.6rem; }
.shop-head__title { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text-2); font-weight: 700; }
.shop-head__lead { color: var(--muted); font-size: .98rem; line-height: 1.55; margin: -.5rem 0 0; max-width: 72ch; }
.shop-head .search__input { background: var(--surface); }
.shop-head--after-showcase { margin-top: 1.6rem; }

/* Home carousel (HeroSlides, views/home/_showcase.php, theme.js [data-showcase]).
   All slides share one grid cell, so the banner is as tall as its tallest slide.
   The image covers the slide (focus = the point kept in view when it crops);
   the text sits on its dark left side. Phones: image on top, text under it.
   The banner itself stays left-to-right (the art has the cards on the right);
   only the text follows the page direction. */
.showcase { position: relative; display: flex; flex-direction: column; margin: 1.2rem 0 0; border-radius: 20px; overflow: hidden; isolation: isolate; direction: ltr; background: var(--showcase-bg); color: var(--showcase-text); box-shadow: var(--showcase-shadow); }
.showcase__viewport { order: 1; display: grid; touch-action: pan-y; }
.showcase__slide { grid-area: 1 / 1; position: relative; display: flex; align-items: center; min-height: clamp(360px, 34vw, 480px); opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.showcase__slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .7s ease, visibility 0s; }
.showcase:not(.is-ready) .showcase__slide:not(:first-child) { display: none; }
.showcase:not(.is-ready) .showcase__bar { display: none; }
.showcase__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(55% 90% at 74% 50%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), linear-gradient(160deg, var(--showcase-bg-2) 0%, var(--showcase-bg) 70%); }
.showcase__media picture { position: absolute; inset: 0; }
.showcase__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 72%) 50%; transform: scale(1.045); transition: transform 7.5s cubic-bezier(.2, .6, .3, 1); }
.showcase__slide.is-active .showcase__img { transform: scale(1); }
/* Keeps the text readable on any uploaded image. */
.showcase__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--showcase-shade) 0%, color-mix(in srgb, var(--showcase-shade) 45%, transparent) 34%, transparent 58%); }
.showcase__content { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; width: min(48%, 580px); padding: clamp(28px, 4vw, 56px) clamp(24px, 3.6vw, 56px) calc(clamp(28px, 4vw, 56px) + 52px); }
.showcase:not(.showcase--multi) .showcase__content { padding-bottom: clamp(28px, 4vw, 56px); }
[dir="rtl"] .showcase__content { direction: rtl; }
.showcase__kicker { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .32rem .8rem .32rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .03em; color: var(--showcase-text); background: color-mix(in srgb, var(--accent) 18%, var(--showcase-glass)); border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); }
.showcase__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.showcase__title { margin: 0; font-size: clamp(2.1rem, 4.4vw, 3.7rem); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; color: var(--showcase-text); text-wrap: balance; overflow-wrap: anywhere; }
.showcase__title::after { content: ""; display: block; width: 64px; height: 4px; margin-top: .85rem; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent)); }
.showcase__facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: .15rem 0 0; padding: 0; list-style: none; }
.showcase__fact { display: inline-flex; align-items: baseline; gap: .4rem; padding: .4rem .72rem; border-radius: 10px; border: 1px solid var(--showcase-line); background: var(--showcase-glass); color: var(--showcase-muted); font-size: .9rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.showcase__fact strong { color: var(--showcase-text); font-size: 1.02rem; font-weight: 700; }
.showcase__fact--price span { font-size: .8rem; }
.showcase__body { margin: .1rem 0 0; max-width: 46ch; color: var(--showcase-muted); font-size: 1.02rem; line-height: 1.5; }
.showcase__cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: .45rem; padding: .82rem 1.3rem; border-radius: 12px; background: var(--showcase-cta-bg); color: var(--showcase-cta-text); font-weight: 700; box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--accent) 75%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.showcase__cta:hover { color: var(--showcase-cta-text); text-decoration: none; transform: translateY(-2px); box-shadow: 0 18px 38px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
.showcase__cta .icon { transition: transform .2s ease; }
.showcase__cta:hover .icon { transform: translateX(3px); }
[dir="rtl"] .showcase__cta .icon { transform: scaleX(-1); }
[dir="rtl"] .showcase__cta:hover .icon { transform: scaleX(-1) translateX(3px); }
.showcase__cta:focus-visible, .showcase__bar button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Text comes in when its slide does. */
.showcase.is-ready .showcase__content > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.showcase.is-ready .showcase__slide.is-active .showcase__content > * { opacity: 1; transform: none; }
.showcase.is-ready .showcase__slide.is-active .showcase__content > :nth-child(2) { transition-delay: .07s; }
.showcase.is-ready .showcase__slide.is-active .showcase__content > :nth-child(3) { transition-delay: .14s; }
.showcase.is-ready .showcase__slide.is-active .showcase__content > :nth-child(4) { transition-delay: .21s; }
.showcase.is-ready .showcase__slide.is-active .showcase__content > :nth-child(5) { transition-delay: .28s; }
/* Controls: pause, one chip per slide (the active one fills while it plays), arrows. */
.showcase__bar { order: 2; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: .6rem; padding: 26px clamp(16px, 2.6vw, 30px) 16px; background: linear-gradient(0deg, var(--showcase-bar), transparent); }
.showcase__chips { position: relative; display: flex; gap: .5rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.showcase__chips::-webkit-scrollbar { display: none; }
.showcase__chip { position: relative; display: inline-flex; align-items: center; gap: .55rem; flex: 0 1 196px; min-width: 0; min-height: 48px; padding: 6px 12px 8px 7px; border-radius: 12px; border: 1px solid var(--showcase-line); background: var(--showcase-glass); color: var(--showcase-muted); font: inherit; font-size: .88rem; font-weight: 600; text-align: start; cursor: pointer; overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.showcase__chip:hover { color: var(--showcase-text); border-color: color-mix(in srgb, var(--showcase-text) 30%, transparent); }
.showcase__chip.is-active { color: var(--showcase-text); border-color: color-mix(in srgb, var(--accent) 62%, transparent); background: color-mix(in srgb, var(--accent) 18%, var(--showcase-glass)); }
.showcase__thumb { position: relative; display: block; flex: 0 0 auto; width: 26px; height: 34px; }
.showcase__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.showcase__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase__fill { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; overflow: hidden; background: var(--showcase-line); opacity: 0; transition: opacity .2s ease; }
.showcase__chip.is-active .showcase__fill { opacity: 1; }
.showcase__fill i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(1); transform-origin: 0 50%; }
.showcase.is-playing .showcase__chip.is-active .showcase__fill i { animation: showcase-fill var(--showcase-interval, 7s) linear forwards; }
.showcase.is-held .showcase__chip.is-active .showcase__fill i { animation-play-state: paused; }
@keyframes showcase-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.showcase__pause, .showcase__arrow { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--showcase-line); background: var(--showcase-glass); color: var(--showcase-text); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .2s ease, border-color .2s ease; }
.showcase__pause:hover, .showcase__arrow:hover { border-color: color-mix(in srgb, var(--showcase-text) 34%, transparent); background: color-mix(in srgb, var(--showcase-text) 12%, var(--showcase-glass)); }
.showcase__arrows { display: flex; gap: .45rem; flex: 0 0 auto; }
.showcase__ico-play { display: none; }
.showcase.is-ready:not(.is-playing) .showcase__ico-pause { display: none; }
.showcase.is-ready:not(.is-playing) .showcase__ico-play { display: block; }
@media (max-width: 1023px) {
  .showcase__content { width: min(58%, 520px); }
  .showcase__chip { flex-basis: 160px; }
}
@media (max-width: 719px) {
  .showcase { margin-top: .8rem; border-radius: 16px; }
  .showcase__slide { flex-direction: column; align-items: stretch; min-height: 0; }
  .showcase__media { position: relative; inset: auto; z-index: 0; width: 100%; aspect-ratio: 16 / 10; }
  .showcase__media::after { background: linear-gradient(0deg, var(--showcase-bg) 0%, transparent 38%); }
  .showcase__content { width: auto; gap: .6rem; margin-top: -30px; padding: 0 18px 18px; }
  .showcase:not(.showcase--multi) .showcase__content { padding-bottom: 20px; }
  .showcase__title { font-size: clamp(1.8rem, 8.4vw, 2.3rem); }
  .showcase__title::after { margin-top: .6rem; }
  .showcase__body { font-size: .96rem; }
  .showcase__cta { align-self: stretch; justify-content: center; }
  .showcase__bar { position: static; padding: 2px 14px 16px; background: none; }
  .showcase__chips { gap: .4rem; }
  .showcase__chip { flex: 0 0 auto; padding: 6px 8px 9px; }
  .showcase__chip-name { display: none; }
  .showcase__arrows { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase__slide, .showcase__img, .showcase.is-ready .showcase__content > *, .showcase__cta, .showcase__cta .icon { transition: none !important; }
  .showcase__img, .showcase__slide.is-active .showcase__img { transform: none; }
}

/* Product tiles (brands) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.6rem 1.4rem; }
.tiles--row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; gap: .6rem; color: var(--text); min-width: 0; }
.tile:hover { text-decoration: none; }
.tile__art { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--plate); border: 1px solid var(--border); transition: transform .18s ease, border-color .18s ease; }
.tile:hover .tile__art { transform: translateY(-2px); border-color: var(--border-2); }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10%; filter: var(--card-edge); transition: transform .18s ease; }
.tile:hover .tile__img { transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .tile__art, .tile__img { transition: none; }
  .tile:hover .tile__art, .tile:hover .tile__img { transform: none; }
}
.tile__name { font-weight: 700; font-size: 1.1rem; line-height: 1.25; margin-top: .3rem; }
.tile__range { color: var(--text-2); font-weight: 600; font-size: .98rem; }
.tile__fee { color: var(--muted); font-size: .76rem; margin-top: -.15rem; }
.tile__regions { color: var(--muted); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-tile__fallback, .brand-card__fallback { display: none; position: absolute; inset: 0; place-items: center; font-weight: 700; font-size: 1.4rem; color: var(--primary-fg); background: var(--primary); letter-spacing: .04em; }
.brand-card__fallback--sm { font-size: 1rem; border-radius: var(--radius); }
.brand-card__fallback--xs { font-size: .66rem; border-radius: 6px; width: 24px; height: 24px; inset: auto; position: static; }
.is-broken > img, .is-broken .tile__img, .is-broken .brand-tile__img { display: none !important; }
.is-broken > .brand-tile__fallback, .is-broken > .brand-card__fallback { display: grid !important; }

/* Brand page */
.hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); margin: 0 0 1.4rem; isolation: isolate; }
.hero__bg { position: absolute; inset: -30%; width: 160%; height: 160%; object-fit: cover; filter: blur(40px) saturate(1.4); opacity: .55; z-index: -2; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--hero-shade-from), var(--hero-shade-to)); z-index: -1; }
.hero__inner { display: flex; gap: 1.4rem; align-items: center; padding: 1.4rem 1.4rem; }
.hero__logo { position: relative; flex: 0 0 auto; width: 150px; height: 150px; border-radius: var(--radius-lg); background: var(--plate); overflow: hidden; border: 1px solid var(--plate-border); box-shadow: var(--mg-shadow-lg); }
.hero__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; filter: var(--card-edge); }
.hero__body { min-width: 0; }
.hero__title { font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--hero-title); margin-bottom: .4rem; }
.hero__summary { font-size: 1.1rem; color: var(--hero-text); margin: 0; max-width: 56ch; }
.brand-desc { color: var(--text-2); font-size: 1.02rem; max-width: 74ch; margin: 0 0 .9rem; }
.facts { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; margin: 0 0 1.5rem; }
.fact { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 600; font-size: .98rem; }
.fact .icon { width: 1.2rem; height: 1.2rem; color: var(--text-2); }
.region-note { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .95rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: .92rem; margin: 0 0 1rem; }
.region-note .icon { flex: 0 0 auto; margin-top: .2rem; color: var(--muted); }
.region-note strong { color: var(--text); }

/* Product cards: one per denomination, plus the top-up card */
.products { display: flex; flex-direction: column; gap: 1rem; }
.product { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.product__top { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding-bottom: .9rem; border-bottom: 1px solid var(--border-2); }
.product__thumb { position: relative; width: 60px; height: 60px; border-radius: var(--radius); background: var(--plate); overflow: hidden; border: 1px solid var(--border); }
.product__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; filter: var(--card-edge-sm); }
.product__name { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.product__sub { color: var(--muted); font-size: .86rem; margin: .15rem 0 0; overflow-wrap: anywhere; }
.product__price { font-size: 1.35rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Supplier price with "+ x service fee" under it (brand cards, top-ups, cart lines). */
.product__pricebox { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; min-width: 0; }
.product__fee, .price-fee { display: block; color: var(--muted); font-size: .78rem; font-weight: 500; line-height: 1.25; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.product__fee[hidden], .amount__price small[hidden] { display: none; }
.product__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: .9rem; }
.product__meta { display: flex; flex-direction: column; gap: .35rem; color: var(--muted); font-size: .92rem; min-width: 0; }
.product__meta span { display: inline-flex; align-items: center; gap: .45rem; }
.product__meta .icon { width: 1rem; height: 1rem; color: var(--muted); }
.product__form { margin: 0; display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.product__buy { padding: .85rem 1.3rem; font-size: 1.02rem; min-width: 150px; }
.product__buy .icon { width: 1.2rem; height: 1.2rem; }
.product--topup .product__bottom { flex-direction: column; align-items: stretch; }
.product--topup .amount { padding: 0; border: 0; background: transparent; }
.product__hint { color: var(--muted); font-size: .9rem; margin: 1rem 0 0; }
/* "You earn N Hawk Coins with this card" in the meta column (gold, like every coin amount); the card a ?card= link opened. */
.product__meta .product__coins { color: var(--gold); font-variant-numeric: tabular-nums; }
.product--picked { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); scroll-margin-block: 6rem; }

/* Top-up amount form (inside the top-up product card) */
.amount { margin: 0; }
.amount__head { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .75rem; }
.amount__name { font-weight: 600; font-size: 1rem; letter-spacing: -.01em; }
.amount__range { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.amount__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .6rem; align-items: center; }
.amount__input { min-width: 0; margin: 0; }
.amount__input .field__input { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.amount__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 6rem; }
.amount__price .product__price { font-size: 1.25rem; }
.amount__price small { font-size: .76rem; white-space: nowrap; color: var(--muted); }
.amount__add { flex: 0 0 auto; }
.amount__presets { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.amount__presets .chip { cursor: pointer; font-size: .84rem; padding: .32rem .75rem; }
.amount__hint { color: var(--muted); font-size: .86rem; margin: .7rem 0 0; }
.amount.is-invalid .amount__input .field__input { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }
.amount.is-invalid .amount__price .product__price { color: var(--bad); }
.amount.is-invalid .amount__hint { color: var(--bad); }

/* Sidebar boxes (brand page) */
.side-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; margin-bottom: 1rem; }
.side-box__title { display: flex; align-items: center; gap: .65rem; font-size: 1.12rem; font-weight: 700; margin-bottom: .5rem; }
.side-box__title .icon { width: 1.25rem; height: 1.25rem; color: var(--text-2); }
.side-box__text { color: var(--text-2); font-size: .95rem; margin: 0 0 .9rem; }
.side-box__text:last-child { margin-bottom: 0; }
.side-box .field__input { background: var(--surface-2); padding: .85rem 1rem; }
.side-box details summary { cursor: pointer; color: var(--accent); font-weight: 500; list-style: none; }
.side-box details summary::-webkit-details-marker { display: none; }
.side-box details[open] summary { margin-bottom: .6rem; }
.side-box details ol { margin: 0; padding-left: 1.2rem; color: var(--text-2); font-size: .93rem; }
.side-box details li { margin-bottom: .35rem; }

/* Coin logos (brand page "Payment" box, footer row). Logo-plate rule: a block
   with a definite box and an absolutely positioned contain image (WebKit). */
.coins { display: flex; flex-wrap: wrap; gap: .5rem; }
.coin { position: relative; display: block; flex: 0 0 auto; width: 54px; height: 54px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.coin img { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; display: block; }
.coin--more { display: grid; place-items: center; color: var(--text-2); font-size: .85rem; font-weight: 600; }
.footer__coins .coin { width: 48px; height: 48px; background: transparent; border-color: transparent; }
.footer__coins .coin img { top: 7px; left: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }

/* SEO text block under the products */
.seo { margin: 2.6rem 0 0; color: var(--text-2); max-width: 76ch; }
.seo h2 { font-size: clamp(1.6rem, 2.8vw, 2rem); color: var(--text); margin: 0 0 .8rem; }
.seo h3 { font-size: 1.3rem; color: var(--text); margin: 1.8rem 0 .5rem; }
.seo p { font-size: 1.02rem; line-height: 1.65; }

/* Trust strip */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; text-align: center; padding: 3rem 0 2.6rem; }
.trust__item { display: flex; flex-direction: column; align-items: center; }
.trust__item .icon { width: 44px; height: 44px; color: var(--text-2); margin-bottom: .7rem; stroke-width: 1.5; }
.trust__title { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; }
.trust__text { color: var(--text-2); max-width: 32ch; margin: 0; font-size: 1rem; }

/* Catalogue filters */
.catalogue__filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.4rem; }
.catalogue__filters .chips { margin: 0; }
.catalogue__filters select { padding: .55rem 2.2rem .55rem .9rem; border-radius: 999px; border: 1px solid var(--border-2); background-color: var(--surface); color: var(--text-2); font-size: .9rem; font-weight: 500; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.results { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .92rem; margin: 0 0 1rem; }
.results strong { color: var(--text); font-weight: 600; }
.country-note { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: .92rem; color: var(--text-2); margin: 0 0 1.2rem; }
.country-note strong { color: var(--text); }

.faq { display: flex; flex-direction: column; gap: .5rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 0 1.1rem; }
.faq__q { cursor: pointer; padding: .9rem 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--text); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { color: var(--muted); transition: transform .2s; width: 1.1rem; height: 1.1rem; }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }
.faq__a { padding: 0 0 1rem; color: var(--text-2); font-size: .95rem; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.steps li { position: relative; padding-left: 2.3rem; color: var(--text-2); font-size: .93rem; line-height: 1.5; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: .05rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); display: grid; place-items: center; font-size: .78rem; font-weight: 600; color: var(--text); }
.steps strong { display: block; color: var(--text); font-weight: 600; margin-bottom: .15rem; }
.grid { display: grid; gap: 1.2rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.grid--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--order { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid--brand { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 1.6rem; }
.grid--editor { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.grid__main, .grid__side { min-width: 0; }
.grid .card { margin-bottom: 0; }
.grid--order .grid__main > .card, .grid--order .grid__side > .card { margin-bottom: 1.2rem; }

/* -- 6. Cart & checkout --------------------------------------------------- */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.6rem; align-items: start; }
.cart__lines { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.cart-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__logo { position: relative; width: 56px; height: 56px; display: block; background: var(--plate); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.cart-line__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; filter: var(--card-edge-sm); }
.cart-line__name { font-size: 1rem; margin-bottom: .1rem; font-weight: 700; }
.cart-line__meta { color: var(--muted); font-size: .87rem; margin: 0; }
.cart-line__qty { display: flex; align-items: center; gap: .5rem; margin: 0; }
.cart-line__total { font-weight: 700; min-width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.cart-line__total .price-fee { font-size: .76rem; }
.cart-line__remove { margin: 0; }
.cart__continue { margin: .9rem 0 0; font-size: .92rem; }
.cart__continue a { color: var(--text-2); display: inline-flex; align-items: center; gap: .3rem; }
.summary { position: sticky; top: calc(var(--header-h) + 16px); padding: 1.3rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.summary__title { font-size: 1.1rem; margin-bottom: .9rem; }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; color: var(--text-2); font-size: .95rem; border-bottom: 1px solid var(--border); }
.summary__row small { font-size: .8rem; }
.summary__total { border-bottom: 0; color: var(--text); font-weight: 700; font-size: 1.15rem; padding-top: .8rem; }
.summary__note { color: var(--muted); font-size: .85rem; margin: .5rem 0 1rem; }
.summary__items { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-direction: column; gap: .5rem; font-size: .92rem; }
.summary__item { display: flex; justify-content: space-between; gap: 1rem; }
.summary__item-name { color: var(--text-2); min-width: 0; }
.summary__back { margin: .9rem 0 0; font-size: .9rem; text-align: center; }
.summary__back a { color: var(--text-2); }
.summary__seller { margin: .6rem 0 0; font-size: .8rem; line-height: 1.45; text-align: center; color: var(--muted); }
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 1.6rem; align-items: start; }
.checkout__main .card { margin-bottom: 1.2rem; }
.checkout .card .field, .checkout .card .check { margin-bottom: .9rem; }
.checkout .card .check:last-of-type { margin-bottom: .4rem; }
/* Payment method tiles. Narrow: one column, the logos above the name so long
   names never break mid-word. From a 30rem picker two columns (a single tile
   goes on one line); from 44rem the logos sit next to the name again. */
.pay-pick { container: paypick / inline-size; }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: .2rem 0 1rem; }
.pay-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "radio logos fee" "radio name fee"; align-items: center; align-content: center; column-gap: .7rem; row-gap: .35rem; min-height: 4rem; padding: .7rem .85rem; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
@container paypick (min-width: 30rem) {
  .pay-grid:not(.pay-grid--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-grid--one .pay-tile { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "radio logos name fee"; }
}
@container paypick (min-width: 44rem) {
  .pay-tile { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "radio logos name fee"; }
}
.pay-tile[hidden] { display: none; }
.pay-tile:hover { background: var(--surface); }
.pay-tile__input { position: absolute; inset-inline-start: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pay-tile__radio { grid-area: radio; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border: 2px solid var(--border-2); border-radius: 50%; transition: border-color .16s ease; }
.pay-tile__radio::after { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .16s ease; }
.pay-tile__logos { grid-area: logos; display: flex; align-items: center; gap: .25rem; }
.pay-logo { display: block; width: auto; height: 22px; border-radius: 4px; }
.pay-logo--coin { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface-2); }
.pay-logo--coin + .pay-logo--coin { margin-inline-start: -.5rem; }
.pay-logo--icon { width: 22px; height: 22px; color: var(--text-2); }
.pay-tile__name { grid-area: name; min-width: 0; font-weight: 700; font-size: .97rem; line-height: 1.3; overflow-wrap: break-word; }
.pay-tile__fee { grid-area: fee; display: flex; flex-direction: column; align-items: flex-end; text-align: end; line-height: 1.25; }
.pay-tile__fee-label { color: var(--muted); font-size: .72rem; }
.pay-tile__fee-value { color: var(--text-2); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pay-tile:has(.pay-tile__input:checked) { border-color: var(--mg-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mg-ring) 25%, transparent); background: var(--surface); }
.pay-tile:has(.pay-tile__input:checked) .pay-tile__radio { border-color: var(--accent); }
.pay-tile:has(.pay-tile__input:checked) .pay-tile__radio::after { transform: scale(1); }
.pay-tile:has(.pay-tile__input:focus-visible) { outline: 2px solid var(--mg-ring); outline-offset: 2px; }
.pay-note p { margin: 0 0 .5rem; }
/* Admin: Stripe methods as collapsed rows (/acp/payments). */
.acp-subhead { margin: 1.8rem 0 .6rem; font-size: 1.05rem; color: var(--text-2); }
.card.pm-row { padding: 0; }
.pm-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .8rem 1rem; cursor: pointer; list-style: none; }
.pm-row__head::-webkit-details-marker { display: none; }
.pm-row__logos { display: flex; align-items: center; gap: .25rem; min-width: 5.5rem; }
.pm-row__name { flex: 1 1 11rem; min-width: 0; }
.pm-row__badges { display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; max-width: 100%; }
#stripe .badge, .pm-row__badges .badge { white-space: normal; overflow-wrap: anywhere; }
.pm-row__form { padding: 1rem; border-top: 1px solid var(--border); }
.pm-row__note { margin: 0 0 1rem; color: var(--text-2); font-size: .92rem; }
/* Pay with balance (checkout): its own box above the methods, a submit button with name=pay_with. */
.balance-pay { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; margin: .2rem 0 .4rem; border: 1px solid var(--mg-ring); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); }
.balance-pay--short { border-color: var(--border-2); background: var(--surface-2); }
.balance-pay__head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.balance-pay__icon { flex: 0 0 auto; color: var(--accent); }
.balance-pay__label { font-weight: 700; }
.balance-pay__amount { margin-left: auto; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-pay__text { margin: 0; color: var(--text-2); font-size: .92rem; }
.balance-pay--short .balance-pay__text { color: var(--muted); }
.balance-pay__or { margin: .9rem 0 .5rem; color: var(--muted); font-size: .88rem; }
/* Account balance: overview tile, balance page. */
.balance-tile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; }
.balance-tile__main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.balance-tile__icon { color: var(--accent); flex: 0 0 auto; }
.balance-tile__label { font-weight: 700; }
.balance-tile__amount { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.balance-tile__links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.balance-card__amount { margin: .2rem 0 .8rem; font-size: 2.2rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.field__input--giftcode { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* Hawk Coins (docs/shop.md §17): the coin icon, the explainer, the coin shop, summaries.
   The icon is the logo's gold coin as an <img> (hawk_coin()); numbers next to it use --gold. */
.hawk-coin { display: inline-block; flex: 0 0 auto; vertical-align: -.2em; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }
.nav__link--coins { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.nav__link--coins:hover, .nav__link--coins.is-active { color: var(--gold); }
.coins-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .4rem; border-radius: 999px; background: var(--gold-bg); border: 1px solid var(--gold-border); color: var(--gold); font-weight: 600; font-size: .9rem; }
.coins-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.2rem 0 1.6rem; }
.coins-hero__title { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 1rem 0 .8rem; }
.coins-hero__lead { color: var(--text-2); font-size: 1.12rem; line-height: 1.55; max-width: 56ch; margin: 0 0 1.2rem; }
.coins-points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .65rem; }
.coins-points li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text); font-size: 1rem; line-height: 1.45; }
.coins-points .icon { color: var(--gold); flex: 0 0 auto; margin-top: .05rem; }
.coins-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.coins-balance { display: inline-flex; align-items: center; gap: .7rem; padding: .45rem 1.1rem .45rem .5rem; border-radius: 999px; background: var(--gold-bg); border: 1px solid var(--gold-border); color: var(--text); }
.coins-balance:hover { text-decoration: none; border-color: var(--gold); }
.coins-balance span { display: flex; flex-direction: column; line-height: 1.15; }
.coins-balance small { color: var(--muted); font-size: .76rem; }
.coins-balance strong { color: var(--gold); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.coins-hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 380px; width: 100%; justify-self: center; }
.coins-hero__glow { position: absolute; inset: 0; border-radius: 50%; background: var(--gold-glow); }
.coins-hero__coin { position: absolute; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .45)); animation: coin-float 6s ease-in-out infinite; }
.coins-hero__coin--main { width: 58%; height: auto; inset-inline-start: 21%; top: 21%; }
.coins-hero__coin--a { width: 22%; height: auto; inset-inline-start: 4%; top: 10%; animation-delay: -1.5s; transform: rotate(-14deg); }
.coins-hero__coin--b { width: 15%; height: auto; inset-inline-end: 6%; top: 18%; animation-delay: -3s; }
.coins-hero__coin--c { width: 11%; height: auto; inset-inline-end: 16%; bottom: 8%; animation-delay: -4.2s; opacity: .9; }
@keyframes coin-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .coins-hero__coin { animation: none; } }
.coins-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.coins-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.3rem 1.2rem; }
.coins-step__n { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--gold-bg); border: 1px solid var(--gold-border); color: var(--gold); font-weight: 800; margin-bottom: .8rem; }
.coins-step__title { font-size: 1.12rem; margin-bottom: .35rem; }
.coins-step__text { color: var(--text-2); margin: 0; font-size: .96rem; line-height: 1.5; }
.section__lead { color: var(--text-2); margin: -.4rem 0 1rem; max-width: 72ch; }
.coins-table { max-width: 720px; }
.coins-table__note { font-size: .86rem; margin-top: .6rem; max-width: 72ch; }
.coins-amount { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.coin-shop-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin: .4rem 0 1.2rem; }
.coin-shop-head .shop-head__lead { margin: .4rem 0 0; }
.page--coin-shop .search { max-width: 640px; margin-bottom: 1rem; }
.tile__coins { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold); font-weight: 700; font-size: .98rem; font-variant-numeric: tabular-nums; }
.product__price--coins { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold); }
.product__short { color: var(--muted); font-size: .9rem; text-align: end; }
.side-box--coins { border-color: var(--gold-border); }
.side-box__big { font-size: 1.9rem; font-weight: 800; color: var(--gold); margin: 0 0 .3rem; font-variant-numeric: tabular-nums; }
.coins-card__amount { display: flex; align-items: center; gap: .6rem; color: var(--gold); }
.balance-tile--coins .balance-tile__amount { color: var(--gold); }
.summary__coins { color: var(--gold); font-size: .9rem; border-bottom: 0; border-top: 1px dashed var(--gold-border); align-items: center; }
.summary__coins > span:first-child { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.summary__coins-link { color: var(--muted); font-size: .82rem; }
.table__coins td { color: var(--gold); }
@media (max-width: 899px) {
  .coins-hero { grid-template-columns: minmax(0, 1fr); }
  .coins-hero__art { max-width: 240px; order: -1; }
  .coins-steps { grid-template-columns: minmax(0, 1fr); }
}
/* Content pages (docs/shop.md §24): /gift-cards-with, /gift-cards-with/{coin}, /christmas-gift-cards,
   /bitrefill-alternative. They reuse the Hawk Coins hero, points and steps; the picture is the coin
   logos (one large, or all in a ring around the shop logo). Colours from the tokens only. */
.guide-kicker { background: var(--surface-2); border-color: var(--border-2); color: var(--text); }
.guide-kicker img { width: 20px; height: 20px; object-fit: contain; }
.guide-art { position: relative; aspect-ratio: 1 / 1; max-width: 360px; width: 100%; justify-self: center; }
.guide-art__glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 8%, transparent) 55%, transparent 100%); }
.guide-art__main { position: absolute; width: 52%; height: auto; inset-inline-start: 24%; top: 24%; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .35)); }
.guide-art__centre { position: absolute; width: 22%; height: auto; inset-inline-start: 39%; top: 39%; }
.guide-art__coin { position: absolute; width: 13%; height: auto; top: 43.5%; left: 43.5%; transform: rotate(calc(360deg / var(--n) * var(--i))) translateY(-230%) rotate(calc(-360deg / var(--n) * var(--i))); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }
.guide-nets { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; }
.guide-nets .chip { color: var(--text); }
.guide-tip { max-width: 72ch; }
.guide-prose { color: var(--text-2); font-size: 1.02rem; line-height: 1.6; max-width: 72ch; margin: 0; }
.guide-coinlinks { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.guide-coinlinks .chip img { width: 18px; height: 18px; object-fit: contain; }
.guide-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.guide-coin { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); }
.guide-coin:hover { text-decoration: none; border-color: var(--border-2); background: var(--surface-2); }
.guide-coin .coin { width: 46px; height: 46px; }
.guide-coin .coin img { top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.guide-coin__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.guide-coin__body small { color: var(--muted); font-weight: 600; margin-inline-start: .3rem; }
.guide-coin__body span { color: var(--text-2); font-size: .9rem; }
.guide-coin > .icon { color: var(--muted); flex: 0 0 auto; }
.guide-facts { margin-bottom: 0; }
.guide-facts .icon { color: var(--ok); }
.guide-check { margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .6rem; max-width: 72ch; color: var(--text-2); line-height: 1.5; }
.guide-check strong { color: var(--text); }
.guide-more { margin: 1rem 0 0; }
.guide-note { font-size: .86rem; margin: 1.5rem 0 0; max-width: 72ch; }
.footer__coins a.coin:hover, .coins a.coin:hover { border-color: var(--border-2); }
@media (max-width: 899px) {
  .guide-art { max-width: 220px; order: -1; }
}
/* Partner programme (docs/shop.md §20): /partners, /account/partner, the code box in the cart and
   checkout summaries, the discount row. Colours come from the tokens only (dark and light). */
.partner-kicker { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .55rem; border-radius: 999px; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent); font-weight: 600; font-size: .9rem; }
.partner-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.2rem 0 1.8rem; }
.partner-hero__title { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 1rem 0 .8rem; }
.partner-hero__lead { color: var(--text-2); font-size: 1.12rem; line-height: 1.55; max-width: 58ch; margin: 0 0 1.2rem; }
.partner-points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .65rem; }
.partner-points li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; line-height: 1.45; }
.partner-points .icon { color: var(--ok); flex: 0 0 auto; margin-top: .05rem; }
.partner-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.partner-figures { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; }
.partner-figure { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.partner-figure--accent { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.partner-figure__n { flex: 0 0 auto; min-width: 5.5rem; font-size: 2rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--accent); }
.partner-figure--accent .partner-figure__n { color: var(--ok); }
.partner-figure__label { color: var(--text-2); font-size: .98rem; line-height: 1.4; min-width: 0; }
.partner-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.partner-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.3rem 1.3rem 1.2rem; }
.partner-step__n { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--accent-bg); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent); font-weight: 800; margin-bottom: .8rem; }
.partner-step__title { font-size: 1.12rem; margin-bottom: .35rem; }
.partner-step__text { color: var(--text-2); margin: 0; font-size: .96rem; line-height: 1.5; }
.partner-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin: 2rem 0 .4rem; align-items: start; }
.partner-example__rows { margin: .8rem 0; display: flex; flex-direction: column; }
.partner-example__rows > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.partner-example__rows dt { color: var(--text-2); }
.partner-example__rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.partner-example__save dd { color: var(--ok); }
.partner-example__earn { border-bottom: 0 !important; }
.partner-example__earn dt, .partner-example__earn dd { color: var(--text); font-weight: 700; }
.partner-example__earn dd { color: var(--accent); font-size: 1.1rem; }
.partner-rules__list { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; gap: .6rem; }
.partner-rules__list li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; }
.partner-rules__list .icon { flex: 0 0 auto; margin-top: .15rem; color: var(--muted); }
.partner-cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin: 1.6rem 0 .4rem; }
/* Cart and checkout: the discount row and the code box under the summary. */
.summary__discount { color: var(--ok); }
.summary__discount span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.partner-code { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px dashed var(--border-2); font-size: .92rem; }
.partner-code__icon { flex: 0 0 auto; color: var(--accent); }
.partner-code__applied { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--text-2); }
.partner-code__text { flex: 1 1 10rem; min-width: 0; }
.partner-code__text strong { color: var(--text); }
.partner-code__summary { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--text-2); list-style: none; }
.partner-code__summary::-webkit-details-marker { display: none; }
.partner-code__summary:hover { color: var(--text); }
.partner-code__row { display: flex; gap: .5rem; margin-top: .6rem; }
.partner-code__input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.partner-code__input::placeholder { font-family: var(--font); letter-spacing: 0; text-transform: none; }
.partner-code__row .btn { flex: 0 0 auto; }
.partner-code__note { margin: 0 0 .5rem; color: var(--muted); font-size: .86rem; }
/* /account/partner */
.partner-signup { max-width: 760px; }
.partner-code-card__row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .3rem 0 .6rem; }
.partner-code-card__code { font-size: 1.7rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.partner-code-card__sub { font-size: .95rem; margin: .8rem 0 0; color: var(--text-2); font-weight: 600; }
.partner-code-card__link { flex: 1 1 16rem; min-width: 0; padding: .55rem .75rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); overflow-wrap: anywhere; }
.partner-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .8rem; margin: .4rem 0 0; }
.partner-stat { padding: .85rem 1rem; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.partner-stat dt { color: var(--muted); font-size: .84rem; }
.partner-stat dd { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.partner-stat small { display: block; margin-top: .15rem; font-size: .78rem; }
.partner-stat--accent { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--surface-2)); }
.partner-stat--accent dd { color: var(--ok); }
.partner-payout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .6rem; }
.partner-payout__option { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2); margin: 0; }
.partner-payout__option .field { margin: 0; }
.partner-payout__option .btn { margin-top: auto; align-self: flex-start; }
.partner-payout__title { display: flex; align-items: center; gap: .5rem; font-size: 1.02rem; margin: 0; }
.partner-payout__title .icon { color: var(--accent); }
.partner-payout__option p { margin: 0; color: var(--text-2); font-size: .92rem; }
/* Admin: crypto payouts (forms inside table cells, the address may wrap). */
.inline-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0; }
.field__input--sm { padding: .35rem .55rem; font-size: .86rem; min-height: 0; height: auto; width: auto; flex: 1 1 10rem; min-width: 8rem; }
.table code.break, .break { white-space: normal; overflow-wrap: anywhere; word-break: break-all; }
@media (max-width: 899px) {
  .partner-hero, .partner-split, .partner-payout { grid-template-columns: minmax(0, 1fr); }
  .partner-steps { grid-template-columns: minmax(0, 1fr); }
}

/* Admin: home carousel (/acp/slides) — slide thumbnails, image library, image picker */
.slide-thumb { position: relative; display: block; width: 120px; aspect-ratio: 8 / 3; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(70% 120% at 75% 50%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%), var(--showcase-bg); }
.slide-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inline-actions { display: inline-flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.img-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.img-lib__item { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.img-lib__item img { width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--showcase-bg); }
.img-lib__item figcaption { display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; }
.img-lib__item form { margin: 0; }
.img-upload { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .8rem; }
.page--acp .card__subtitle { font-size: .98rem; margin: 0; color: var(--text); }
.img-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .7rem; }
.img-pick__opt { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .4rem; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-2); cursor: pointer; font-size: .85rem; }
.img-pick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.img-pick__opt:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.img-pick__opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.img-pick__art { display: block; aspect-ratio: 8 / 3; border-radius: 8px; overflow: hidden; background: var(--showcase-bg); }
.img-pick__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-pick__none { display: grid; place-items: center; height: 100%; color: var(--showcase-muted); font-size: .8rem; }
.slide-preview { margin-top: .4rem; }
.field__input--color { width: 96px; height: 44px; padding: 4px; cursor: pointer; }
/* A range slider takes no text-field box, and browsers give it a 2px margin
   that pushes a full-width slider past its column. */
.field__input[type="range"] { display: block; margin: 0; padding: 0; height: 1.6rem; border: 0; background: none; box-shadow: none; accent-color: var(--mg-ring); cursor: pointer; }
.slide-preview .showcase { margin-top: 0; }
/* Admin: gift card codes shown once after a batch is created */
.card__body { padding: 0 1.2rem 1rem; display: flex; flex-direction: column; gap: .8rem; }
.card__body > * { margin-bottom: 0; }
.giftcodes { border-color: color-mix(in srgb, var(--mg-warning) 45%, var(--border)); }
.giftcodes .actions { margin: .8rem 0 1rem; }
.giftcodes .actions form { margin: 0; }
.giftcodes__list { margin: 0; padding: 0 0 0 2.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .35rem 1.4rem; }
.giftcodes__list li { padding: .2rem 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.giftcodes__list code { font-family: var(--mono); font-size: .95rem; letter-spacing: .06em; color: var(--text); background: none; padding: 0; overflow-wrap: anywhere; }

/* Admin: dispute evidence (/acp/orders/{id}/evidence). The answer fields sit inside cards, not
   directly in the flex form, so they get their own spacing; long values (policy titles, ids) wrap. */
.evidence .card > .field + .field, .evidence__more > .field { margin-top: 1rem; }
.evidence__more { margin-top: 1rem; }
.evidence__more > summary { cursor: pointer; font-weight: 600; }
.evidence .pill { white-space: normal; }
.evidence .kv dd, .evidence .mono { overflow-wrap: anywhere; }
.evidence__reset { margin-top: .8rem; }

/* Legal */
.doclist { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.6rem; }
.doclist__item { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, background .15s; }
.doclist__item:hover { text-decoration: none; border-color: var(--border-2); }
.doclist__title { font-weight: 700; font-size: 1rem; }
.doclist__summary { color: var(--text-2); font-size: .92rem; }
.doclist__meta { color: var(--muted); font-size: .8rem; }
.address { font-style: normal; line-height: 1.6; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.legal__rail { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 1.3rem; }
.legal__docs, .legal__toc { display: flex; flex-direction: column; gap: .1rem; }
.legal__doc { padding: .45rem .75rem; border-radius: var(--radius); color: var(--text-2); font-weight: 500; font-size: .9rem; border: 1px solid transparent; }
.legal__doc:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.legal__doc.is-active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: inset 3px 0 0 var(--accent); }
.legal__toc { border-top: 1px solid var(--border); padding-top: 1rem; }
.legal__toc a { padding: .25rem .75rem; color: var(--muted); font-size: .85rem; }
.legal__toc a:hover { color: var(--text); text-decoration: none; }
.legal__toc-title { text-transform: uppercase; letter-spacing: .09em; font-size: .68rem; font-weight: 600; color: var(--muted); margin: 0 0 .3rem .75rem; }
.legal__body { min-width: 0; }
.prose { color: var(--text-2); line-height: 1.7; }
.prose h2 { color: var(--text); font-size: 1.2rem; margin: 2rem 0 .6rem; padding-top: .4rem; scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h3 { color: var(--text); font-size: 1.02rem; margin: 1.4rem 0 .4rem; }
.prose p { margin: 0 0 .9rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .35rem; }
.prose strong { color: var(--text); }
.prose--preview { font-size: .92rem; max-height: 72vh; overflow: auto; }
.prose--preview h2 { font-size: 1.02rem; margin-top: 1.2rem; }
.contact-side .card { margin-bottom: 1rem; }

/* -- 7. Order page -------------------------------------------------------- */
.progress { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.progress__step { flex: 1; position: relative; padding-top: .7rem; font-size: .85rem; color: var(--muted); font-weight: 500; }
.progress__step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--border-2); }
.progress__step.is-done::before, .progress__step.is-current::before { background: var(--accent); }
.progress__step.is-done, .progress__step.is-current { color: var(--text); }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; padding: 1.2rem 1.35rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); margin-bottom: 1.25rem; flex-wrap: wrap; }
.notice__body { flex: 1; min-width: 240px; }
.notice__title { font-size: 1.1rem; margin-bottom: .4rem; display: flex; align-items: center; gap: .6rem; }
.notice p { margin: 0 0 .4rem; color: var(--text-2); font-size: .95rem; }
.notice p:last-child { margin: 0; }
.notice form { margin: 0; }
.notice--wait { border-color: color-mix(in srgb, var(--wait) 40%, transparent); background: color-mix(in srgb, var(--wait) 8%, var(--surface)); }
.notice--warn { border-color: color-mix(in srgb, var(--mg-warning) 45%, transparent); background: color-mix(in srgb, var(--mg-warning) 10%, var(--surface)); }
.notice--bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 9%, var(--surface)); }
.notice--muted { background: var(--bg-2); }
.spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--text); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.card--cards { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.vouchers { display: flex; flex-direction: column; gap: 1rem; }
.voucher { padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-2); }
.voucher__head { display: flex; gap: .8rem; align-items: center; margin-bottom: .8rem; position: relative; }
.voucher__logo { width: 44px; height: 44px; border-radius: var(--radius); background: var(--plate); padding: 3px; object-fit: contain; flex: 0 0 auto; border: 1px solid var(--border); }
.voucher__head .brand-card__fallback--sm { position: static; width: 44px; height: 44px; display: none; }
.voucher__head.is-broken .brand-card__fallback--sm { display: grid !important; }
.voucher__name { font-size: 1rem; margin-bottom: .1rem; }
.voucher__meta { color: var(--muted); font-size: .84rem; margin: 0; }
.voucher__field { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: .5rem 0; }
.voucher__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; width: 4rem; }
.voucher__code { font-size: 1rem; letter-spacing: .07em; padding: .45rem .8rem; border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--surface-2); color: var(--text); word-break: break-all; }
.voucher__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.voucher__hint { color: var(--muted); font-size: .84rem; margin: .7rem 0 0; }
.order-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0 .6rem; }
.order-actions form { margin: 0; }
.order-note { font-size: .88rem; }
.table--lines { margin-bottom: 1rem; }

/* -- 8. Account / admin --------------------------------------------------- */
.page--acp .page__header { margin-bottom: 1.2rem; }
.page--acp .card { margin-bottom: 1.2rem; }
.flags { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.flag-row { display: block; padding: .7rem 1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 500; font-size: .92rem; }
.flag-row:hover { text-decoration: none; background: var(--surface-2); }
.flag-row--bad { border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.flag-row--warn { border-color: color-mix(in srgb, var(--mg-warning) 45%, transparent); background: color-mix(in srgb, var(--mg-warning) 9%, var(--surface)); }
.flag-row--info { border-color: color-mix(in srgb, var(--info) 40%, transparent); background: color-mix(in srgb, var(--info) 8%, var(--surface)); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kpi { position: relative; padding: 1rem 1.1rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: .15rem; }
.kpi__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.kpi__value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi__sub { font-size: .84rem; color: var(--text-2); }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: .5rem; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; min-width: 0; }
.bars__bar { width: 100%; max-width: 32px; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.bars__label { font-size: .68rem; color: var(--muted); }
.toolbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .88rem; }
.toolbar__sep { width: 1px; height: 1.4rem; background: var(--border); margin: 0 .3rem; }
.checks { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.check-row { display: grid; grid-template-columns: 12px 120px 1fr; gap: .8rem; align-items: center; font-size: .92rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.dot--bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.settings .card { margin-bottom: 1.2rem; }
.settings .check { margin-bottom: .8rem; }
.settings .card > .field { margin-bottom: 1rem; }
.settings .fieldset { margin-bottom: 1rem; }
.tabpanel .card__title { margin-bottom: 1rem; }
.brand-head { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.6rem; }
.brand-head__logo { position: relative; flex: 0 0 auto; width: 120px; height: 120px; display: block; background: var(--plate); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); padding: .6rem; }
.brand-head__logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--card-edge); }
.brand-head--acp { margin-bottom: 0; align-items: center; gap: 1rem; }
.brand-head--acp .brand-head__logo { width: 72px; height: 72px; border-radius: var(--radius); padding: .4rem; }
.brand-tile { display: flex; flex-direction: column; gap: .6rem; padding: .85rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.brand-tile__logo { position: relative; display: block; border-radius: var(--radius); background: var(--plate); overflow: hidden; padding: .5rem; border: 1px solid var(--border); }
.brand-tile__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.brand-tile__name { font-weight: 600; font-size: .95rem; }

/* Themes / A/B test (/acp/themes) and the admin's preview bar on the storefront. */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.skin-grid .card { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.skin-card--fixed { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent); }
.skin-card__swatch { position: relative; height: 86px; border-radius: var(--radius); border: 1px solid var(--border); display: flex; align-items: center; padding: 0 14px; }
.skin-card__swatch span:first-child { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; font-weight: 700; font-size: 1.2rem; }
.skin-card__dot { position: absolute; inset-inline-end: 14px; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; }
.skin-card__name { font-size: 1.05rem; }
.skin-card__about { font-size: .88rem; margin: 0; }
.skin-card .field { margin: 0; }
.skin-card .btn { align-self: flex-start; margin-top: auto; }
.skin-note { padding: 0 1.2rem 1rem; font-size: .88rem; }
.skin-note summary { cursor: pointer; color: var(--text-2); }
.skin-preview { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .6rem .9rem; border-radius: 12px; background: #111318; color: #f1f3f6; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); font: 500 .86rem/1.4 ui-sans-serif, system-ui, sans-serif; }
.skin-preview__links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.skin-preview a { color: #f1f3f6; text-decoration: underline; text-underline-offset: 3px; }

/* -- 9. Utilities --------------------------------------------------------- */
.muted { color: var(--muted); }
code, .mono { overflow-wrap: anywhere; }
.table code, .table .mono { overflow-wrap: normal; white-space: nowrap; }
small.muted, .muted small { font-size: .85em; }
.center { text-align: center; }
.small { font-size: .88rem; }

/* -- 10. Responsive ------------------------------------------------------- */
/* Header: logo, search, links and buttons on one row when they fit. When they
   do not (narrow desktops, longer labels in most languages, a signed-in name),
   the links take a second row of their own, so the cart, theme and flag
   buttons never end up alone under the header. theme.js measures and sets
   .nav--stacked; without JS the 1101-1279 px range gets the same layout. The
   top padding keeps the first row where it sits in a one-row header
   (centred in --header-h); without it the logo and search touched the top.
   .nav.nav--stacked, because the "gap" shorthand in the 1399 px block below
   would otherwise put a 16 px row gap back between the two rows. */
.nav.nav--stacked { row-gap: 0; padding-top: calc((var(--header-h) - 44px) / 2); }
.nav--stacked .nav__links { order: 5; flex: 1 1 100%; padding-top: .3rem; padding-bottom: .55rem; }
@media (max-width: 1399px) {
  .nav { gap: 1rem; }
  .nav__link { padding-inline: .55rem; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .nav { row-gap: 0; padding-top: calc((var(--header-h) - 44px) / 2); }
  .nav__links { order: 5; flex: 1 1 100%; padding-top: .3rem; padding-bottom: .55rem; }
}
@media (max-width: 1100px) {
  .grid--order { grid-template-columns: minmax(0, 1fr); }
  .grid--order .grid__side { order: -1; }
  .grid--brand { grid-template-columns: minmax(0, 1fr); }
  .grid--dash { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--editor { grid-template-columns: minmax(0, 1fr); }
  .tiles--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav__links { display: none; }
}
@media (max-width: 900px) {
  .nav { gap: .6rem; }
  .nav__search--desktop { display: none; }
  .nav__search--phone[hidden] { display: none !important; }
  .cart, .checkout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: relative; top: auto; }
  .legal { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .legal__rail { position: static; }
  .legal__docs { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .legal__toc { display: none; }
  .layout__body { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding-top: 1rem; }
  .sidebar { position: static; }
  .sidebar__toggle { display: flex; }
  .sidebar__nav { display: none; padding: .45rem .5rem .6rem; border: 1px solid var(--border-2); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: var(--surface); box-shadow: var(--mg-shadow-lg); }
  .sidebar.is-open .sidebar__nav { display: flex; }
  .sidebar__nav .sidebar__link { padding: .68rem .7rem; font-size: .98rem; }
  .sidebar__nav .sidebar__link.is-active { background: var(--surface-2); }
  .sidebar__nav .sidebar__title { margin-top: .9rem; margin-bottom: .25rem; }
  .sidebar__nav .sidebar__title:first-child { margin-top: .4rem; }
  .grid--contact { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .tiles--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__logo { width: 120px; height: 120px; }
}
@media (min-width: 901px) {
  .nav__search--phone { display: none !important; }
  .nav__tool--search { display: none; }
  /* The desktop search carries the auto margin; the tools follow it directly. */
  .nav__tools { margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .container { padding-inline: 16px; }
  h1 { font-size: 1.55rem; }
  .nav__brand { font-size: 1.3rem; }
  .nav__logo { width: 32px; height: 32px; }
  /* Logo + wordmark + four 44 px buttons were 12 px wider than a 390 px phone,
     so the buttons wrapped under the logo. 42 px wide (still 44 tall) and no
     gap between them leaves room on one row down to 381 px; below that the
     wordmark goes (380 px block). */
  .nav { column-gap: .5rem; }
  .nav__tools { gap: 0; }
  .nav__tool { width: 42px; }
  .section { padding: 2rem 0 0; }
  .search--lg .search__input { padding: .85rem .9rem .85rem 2.8rem; font-size: 1rem; }
  .search--lg .btn--lg { padding-left: 1rem; padding-right: 1rem; }
  .check-row { grid-template-columns: 12px 1fr; }
  .check-row .muted { grid-column: 2; overflow-wrap: anywhere; }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .field--span2 { grid-column: auto; }
  .tiles, .tiles--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
  .tile__name { font-size: 1.05rem; }
  .hero { margin: 0 -16px 1.2rem; border-radius: 0; border-left: 0; border-right: 0; }
  .hero__inner { padding: 1.2rem 16px; gap: 1rem; }
  .hero__logo { width: 96px; height: 96px; }
  .hero__title { font-size: 1.5rem; }
  .hero__summary { font-size: 1rem; }
  .product__top { grid-template-columns: 52px minmax(0, 1fr) auto; gap: .8rem; }
  .product__thumb { width: 52px; height: 52px; }
  .product__name { font-size: 1rem; }
  .product__price { font-size: 1.2rem; }
  .product__buy { min-width: 0; padding: .9rem 1.1rem; flex-direction: column; gap: .2rem; line-height: 1.2; }
  /* Fixed cards on phones: facts on one line, quantity + buy button on the next, full width. */
  .product:not(.product--topup) .product__bottom { flex-wrap: wrap; gap: .8rem; }
  .product:not(.product--topup) .product__meta { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: .35rem 1rem; font-size: .88rem; }
  .product__form { flex: 1 1 100%; justify-content: space-between; }
  .product__form .product__buy { flex: 1 1 auto; flex-direction: row; gap: .5rem; }
  .amount__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "input price" "qty add"; row-gap: .7rem; }
  .amount__input { grid-area: input; }
  .amount__price { grid-area: price; }
  .amount__row .qty { grid-area: qty; justify-self: start; }
  .amount__add { grid-area: add; justify-self: end; }
  .amount__range { white-space: normal; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cart-line { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "logo body total" "logo qty remove"; row-gap: .6rem; }
  .cart-line__logo { grid-area: logo; width: 52px; height: 52px; }
  .cart-line__body { grid-area: body; }
  .cart-line__total { grid-area: total; min-width: 0; }
  .cart-line__qty { grid-area: qty; }
  .cart-line__remove { grid-area: remove; text-align: right; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .kpi { padding: .8rem .85rem; }
  .kpi__label { font-size: .66rem; }
  .kpi__value { font-size: 1.25rem; }
  .kpi__sub { font-size: .8rem; }
  /* Page header buttons: one full-width row, the buttons share it. */
  .page__header--row > .actions { width: 100%; }
  .page__header--row .actions > * { flex: 1 1 auto; }
  .page__header--row .actions > .btn { width: auto; }
  .page__header--row .actions form .btn { width: 100%; }
  /* Admin tables with many columns scroll sideways instead of squeezing each cell to one word per line. */
  .layout--acp .table:has(thead th:nth-child(4)) { min-width: 34rem; }
  .layout--acp .table:has(thead th:nth-child(6)) { min-width: 44rem; }
  /* Customer order list: each row becomes a card (number + status, date + total); the number's
     link covers the card, only the "Pay" button of an unpaid order stays. */
  .table.table--orders thead { display: none; }
  .table.table--orders, .table--orders tbody { display: block; }
  .table.table--orders tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ref status" "date total" "act act"; gap: .3rem .8rem; align-items: center; padding: .8rem .1rem; border-bottom: 1px solid var(--border); }
  .table.table--orders tbody tr:last-child { border-bottom: 0; }
  .table.table--orders td { display: block; padding: 0; border: 0; text-align: start; }
  .table.table--orders .orders__ref { grid-area: ref; font-weight: 600; }
  .table.table--orders .orders__ref a::after { content: ""; position: absolute; inset: 0; }
  .table.table--orders .orders__status { grid-area: status; justify-self: end; }
  .table.table--orders .orders__date { grid-area: date; color: var(--muted); font-size: .85rem; }
  .table.table--orders .orders__total { grid-area: total; justify-self: end; font-weight: 600; }
  .table.table--orders .orders__act { grid-area: act; display: none; }
  .table.table--orders .orders__act.is-pay { display: block; position: relative; z-index: 1; margin-top: .3rem; }
  .table.table--orders .orders__act .btn { width: 100%; }
  .table--hover.table.table--orders tbody tr:hover { background: transparent; }
  /* Order page lines: item + price, then region, quantity and status. */
  .table.table--lines thead { display: none; }
  .table.table--lines, .table--lines tbody, .table--lines tfoot { display: block; }
  .table.table--lines tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "item item price" "region qty status"; gap: .3rem .7rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--border); }
  .table.table--lines td { display: block; padding: 0; border: 0; }
  .table.table--lines .line__item { grid-area: item; font-weight: 600; }
  .table.table--lines .line__price { grid-area: price; text-align: end; font-weight: 600; }
  .table.table--lines .line__region { grid-area: region; color: var(--muted); }
  .table.table--lines .line__qty { grid-area: qty; color: var(--muted); }
  .table.table--lines .line__qty::before { content: "× "; }
  .table.table--lines .line__status { grid-area: status; justify-self: end; }
  .table.table--lines tfoot tr { display: flex; justify-content: space-between; gap: 1rem; }
  .table.table--lines tfoot td { padding: .35rem 0; border: 0; text-align: start; }
  .table.table--lines tfoot td:last-child { text-align: end; white-space: nowrap; }
  .table.table--lines tfoot tr:first-child td { padding-top: .8rem; }
  .table.table--lines tfoot tr:first-child { border-top: 1px solid var(--border); }
  /* Brand hero: logo and title side by side, the long region list below at full width. */
  .hero__inner { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "logo title" "sum sum"; gap: .9rem 1rem; align-items: center; }
  .hero__body { display: contents; }
  .hero__logo { grid-area: logo; width: 76px; height: 76px; }
  .hero__title { grid-area: title; margin: 0; font-size: 1.35rem; }
  .hero__summary { grid-area: sum; font-size: .95rem; }
  /* Search: the button turns into an arrow so the field keeps room for its placeholder. */
  .search--lg .search__submit { flex: 0 0 auto; width: 54px; padding: 0; }
  .search--lg .search__submit-text { display: none; }
  .search--lg .search__submit-ico { display: inline-block; width: 22px; height: 22px; }
  .progress { gap: .4rem; }
  .progress__step { font-size: .78rem; }
  .notice { padding: 1rem; }
  .card { padding: 1.05rem; }
  .card--auth { padding: 1.4rem; }
  .voucher__field { align-items: flex-start; flex-direction: column; gap: .3rem; }
  .voucher__label { width: auto; }
  .page__header--row .btn { width: 100%; }
  .footer__cols { gap: 1.6rem 1.2rem; }
  .footer__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem .8rem; }
  .filters--acp .filters__field { flex: 1 1 100%; }
  .filters__field select, .filters__field input { width: 100%; }
  .table { font-size: .88rem; }
  .table th, .table td { padding: .55rem .6rem; }
  .form__actions { justify-content: stretch; }
  .form__actions .btn { width: 100%; }
  .sheet__panel { width: 100%; border-left: 0; }
  .trust { padding: 2.4rem 0 1.8rem; }
  .seo h2 { font-size: 1.6rem; }
}
@media (max-width: 380px) {
  .tiles, .tiles--row { gap: 1rem .7rem; }
  .nav__brand span { display: none; }
}
@media print {
  .site-header, .site-footer, .nav, .order-actions, .toasts, .sidebar, .btn, .mg-progress, .sheet { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .voucher { border-color: #ccc; }
}

/* Right-to-left languages (<html dir="rtl">, Arabic): flex and grid mirror by themselves; these are the
   physical offsets that do not — icons inside inputs, badges, the settings panel, toasts, tables, lists. */
[dir="rtl"] .balance-pay__amount { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav__cart-count { right: auto; left: 2px; }
[dir="rtl"] .search__field > .icon { left: auto; right: .9rem; }
[dir="rtl"] .search__input { padding: .7rem 2.5rem .7rem 1rem; }
[dir="rtl"] .search--lg .search__input { padding: 1rem 3.2rem 1rem 1.1rem; }
[dir="rtl"] .search--lg .search__field > .icon { left: auto; right: 1.1rem; }
[dir="rtl"] .sheet__panel { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--border); }
[dir="rtl"] .toasts { right: auto; left: 16px; }
[dir="rtl"] .toast { border-left: 1px solid var(--border); border-right: 3px solid var(--accent); }
[dir="rtl"] .toast--ok { border-right-color: var(--ok); }
[dir="rtl"] .toast--bad { border-right-color: var(--bad); }
/* The two halves of the arrow keep their left-to-right order: the 45deg half is the left stroke of the "v". */
[dir="rtl"] select.field__input, [dir="rtl"] .filters__field select, [dir="rtl"] .rail select { background-position: 12px 55%, 17px 55%; padding-right: .85rem; padding-left: 2.2rem; }
[dir="rtl"] .select-flag > select.field__input { padding-right: 2.75rem; }
[dir="rtl"] .sheet .select-flag > select.field__input { padding-right: 2.45rem; }
[dir="rtl"] .input-group .field__input:first-child { border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .input-group .field__input:last-child { border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .input-group__addon:first-child { border-right: 1px solid var(--border-2); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
[dir="rtl"] .input-group__addon:last-child { border-left: 1px solid var(--border-2); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .table .num, [dir="rtl"] .kv--grid dd, [dir="rtl"] .cart-line__total { text-align: left; }
[dir="rtl"] .product__pricebox { text-align: left; }
[dir="rtl"] .table .inline + .inline { margin-left: 0; margin-right: .3rem; }
[dir="rtl"] .tab small { margin-left: 0; margin-right: .25rem; }
[dir="rtl"] .seg__item small { margin-left: 0; margin-right: .2rem; }
[dir="rtl"] .list, [dir="rtl"] .side-box details ol { padding-left: 0; padding-right: 1.2rem; }
[dir="rtl"] .prose ul { padding-left: 0; padding-right: 1.3rem; }
[dir="rtl"] .steps li { padding-left: 0; padding-right: 2.3rem; }
[dir="rtl"] .steps li::before { left: auto; right: 0; }
[dir="rtl"] .sidebar__link { text-align: right; }
[dir="rtl"] .sidebar__link.is-active { box-shadow: inset -3px 0 0 var(--accent); }
[dir="rtl"] .site-footer--compact .footer__legal { text-align: right; }
[dir="rtl"] .back .icon, [dir="rtl"] .cart__continue .icon, [dir="rtl"] .section__link .icon, [dir="rtl"] .auth-foot .icon { transform: scaleX(-1); }
@media (max-width: 767.98px) {
  [dir="rtl"] .cart-line__remove { text-align: left; }
}

/* -- Account: verification page (docs/kyc.md) ------------------------------- */
.tier { display: flex; align-items: center; gap: .5rem; font-weight: 600; margin: 0 0 .6rem; }
.tier--verified { color: var(--ok); }
.tier--blocked { color: var(--bad); }
.page--verification .card__subtitle { font-size: .95rem; margin: 1rem 0 .5rem; color: var(--text-2); }
.table--tiers th { font-weight: 500; width: 46%; }
.table--tiers .is-current th, .table--tiers .is-current td { color: var(--text); background: var(--surface-2); }
.table--tiers .is-current th::before { content: ""; display: inline-block; border-block: .32em solid transparent; border-inline-start: .45em solid var(--primary); margin-inline-end: .45em; vertical-align: .02em; }