/*
 * Store front stylesheet. Consumes ONLY the theme variables emitted by
 * CssCompiler (--c-*, --font-*, --radius*, --shadow-card, --bg-*, --fg-*).
 * Do not add literal colours here: every colour must come from a token so the
 * owner's theme, the live preview and the published site always agree.
 */

/*
 * Bundled fonts (OFL-1.1, see public/assets/fonts/OFL-*.txt). Served from our
 * own origin because the CSP allows nothing else. A file downloads only when
 * the theme actually uses its family, and only for the scripts on the page.
 */
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/readex-pro-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/readex-pro-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/readex-pro-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Readex Pro"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/readex-pro-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

/*
 * Direction: the ticket counter. What the customer buys is a voucher, so the
 * product card and the delivered code share one silhouette: a ticket with
 * notches cut into its edges and a perforated stub that carries the price.
 * Gold (--c-primary) is reserved for money moving: the pay button, the chosen
 * amount and the balance. Everything else is navy ink on a cool fog.
 * The one orchestrated motion is the page settling in on load; everything
 * else moves only in answer to the customer.
 */
:root {
  /* Motion: scaled by the owner's motion switch, zeroed for reduced motion */
  --dur-fast: calc(120ms * var(--motion, 1));
  --dur: calc(180ms * var(--motion, 1));
  --dur-slow: calc(320ms * var(--motion, 1));
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Space (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem;
  --space: clamp(1rem, 3vw, 1.5rem);
  --container: 1120px;
  --shell: 1400px;
  --content-max: 1200px;
  --side-w: 16.5rem;
  --gutter: clamp(1rem, 2.5vw, 1.75rem);
  --header-h: 4.25rem;
  --tap: 2.75rem;

  /* Type scale (1.25 ratio) */
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5625rem;
  --fs-2xl: clamp(1.6rem, 3.6vw, 1.953rem);
  --fs-3xl: clamp(2rem, 5.6vw, 3.25rem);

  /* Ink: the high-contrast block (ticket, buy bar, balance). In dark mode an
     inverted block would glare, so it becomes the raised surface instead. */
  --ink: var(--c-heading);
  --on-ink: var(--c-surface);
  --on-ink-muted: color-mix(in srgb, var(--c-surface) 72%, var(--c-heading));
  --ink-line: color-mix(in srgb, var(--c-surface) 22%, var(--c-heading));
  --line: var(--c-border);
  --line-strong: color-mix(in srgb, var(--c-heading) 70%, var(--c-border));
  --hover-bg: color-mix(in srgb, var(--c-heading) 5%, var(--c-surface));
  --scrim: color-mix(in srgb, var(--c-heading) 55%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-focus-ring) 35%, transparent);
  --lift: 0 14px 30px -14px color-mix(in srgb, var(--c-heading) 30%, transparent);
  --card-shadow: 0 1px 2px color-mix(in srgb, var(--c-heading) 5%, transparent);

  /* Ticket geometry */
  --notch: .6rem;
  --stub: 3.25rem;

  /* Bootstrap bridge */
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-bg: var(--c-background);
  --bs-body-color: var(--c-text);
  --bs-emphasis-color: var(--c-heading);
  --bs-secondary-color: var(--c-text-muted);
  --bs-border-color: var(--c-border);
  --bs-link-color: var(--c-link);
  --bs-link-color-rgb: initial;
  --bs-link-hover-color: var(--c-link-hover);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-focus-ring-color: color-mix(in srgb, var(--c-focus-ring) 45%, transparent);
  --bs-tertiary-bg: var(--c-surface-alt);
}
:root[data-theme="dark"] {
  --ink: var(--c-surface-alt);
  --on-ink: var(--c-heading);
  --on-ink-muted: var(--c-text-muted);
  --ink-line: var(--c-border);
  --hover-bg: color-mix(in srgb, var(--c-heading) 6%, var(--c-surface));
  --lift: 0 12px 28px -14px color-mix(in srgb, var(--c-background) 90%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --ink: var(--c-surface-alt);
    --on-ink: var(--c-heading);
    --on-ink-muted: var(--c-text-muted);
    --ink-line: var(--c-border);
    --hover-bg: color-mix(in srgb, var(--c-heading) 6%, var(--c-surface));
    --lift: 0 12px 28px -14px color-mix(in srgb, var(--c-background) 90%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; animation-delay: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* Shared keyframes. Entrances use fill-mode "backwards" only, so an element
   whose animation never runs still sits in its final, visible state. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
@keyframes leave { to { opacity: 0; transform: translateY(-8px); } }
@keyframes pop { 40% { transform: scale(1.045); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes stamp { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-background);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-heading); color: var(--c-heading); font-weight: 700; line-height: 1.3; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--c-link); text-underline-offset: .2em; }
a:hover { color: var(--c-link-hover); }
::selection { background: color-mix(in srgb, var(--c-primary) 45%, transparent); color: var(--c-heading); }

/* Text links: the coin edge. A thin gold bar sits under the word; on hover the
   gold rises behind the word until the link reads as a small coin, and the
   text switches to the on-gold ink so it stays legible in both modes.
   Components (cards, chips, buttons) carry a class and are left alone. */
a:not([class]), a.small, a.ms-1, .section-head__more, .link {
  --coin: var(--c-primary);
  color: var(--c-link); font-weight: 600; text-decoration: none;
  padding: .12em .25em .16em; margin-inline: -.25em; border-radius: .35em;
  background-image: linear-gradient(var(--coin), var(--coin));
  background-repeat: no-repeat; background-position: 50% 100%;
  background-size: calc(100% - .5em) 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:not([class]):hover, a.small:hover, a.ms-1:hover, .section-head__more:hover, .link:hover,
a:not([class]):focus-visible, a.small:focus-visible, a.ms-1:focus-visible, .section-head__more:focus-visible, .link:focus-visible {
  color: var(--c-on-primary); background-size: 100% 100%;
}
a:not([class]):active, a.small:active, .section-head__more:active, .link:active { --coin: var(--c-primary-hover); }

/* Navigation-style links stay quiet: no bar at rest, the gold edge on hover */
.breadcrumb a, .site-footer a { font-weight: 500; background-size: 0 2px; }
.breadcrumb a:hover, .site-footer a:hover { color: var(--c-heading); background-size: calc(100% - .5em) 2px; }
.text-muted, .text-secondary { color: var(--c-text-muted) !important; }
.container-store { max-width: var(--container); margin-inline: auto; padding-inline: var(--space); }
dd { margin-inline-start: 0; }
code { color: var(--c-heading); background: var(--c-surface-alt); padding: .1em .4em; border-radius: var(--radius-sm); font-size: .9em; }
.icon { width: 1.1em; height: 1.1em; vertical-align: -.15em; flex-shrink: 0; }
[hidden] { display: none !important; }
.num { font-family: var(--font-heading); font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 2000;
  background: var(--c-surface); color: var(--c-heading); padding: .6rem 1rem; border-radius: var(--radius);
  box-shadow: var(--lift); font-weight: 600; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; }

/* Page settling in: the first blocks of the page rise in sequence, once. */
.shell__main > main > *, .account-main > .account-page > * { animation: rise var(--dur-slow) var(--ease-out) backwards; }
.shell__main > main > :nth-child(2), .account-main > .account-page > :nth-child(2) { animation-delay: calc(50ms * var(--motion, 1)); }
.shell__main > main > :nth-child(3), .account-main > .account-page > :nth-child(3) { animation-delay: calc(100ms * var(--motion, 1)); }
.shell__main > main > :nth-child(4), .account-main > .account-page > :nth-child(4) { animation-delay: calc(150ms * var(--motion, 1)); }
.shell__main > main > :nth-child(n+5) { animation-delay: calc(200ms * var(--motion, 1)); }
body[data-preview] main > *, body[data-preview] .account-page > * { animation: none; }

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-border-radius: var(--radius); --bs-btn-font-weight: 600; --bs-btn-padding-x: 1.15rem;
  min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn-sm { min-height: 2.25rem; --bs-btn-padding-x: .85rem; }
.btn-primary {
  --bs-btn-color: var(--fg-buttons); --bs-btn-hover-color: var(--fg-buttons); --bs-btn-active-color: var(--fg-buttons); --bs-btn-disabled-color: var(--fg-buttons);
  --bs-btn-bg: var(--c-primary); --bs-btn-hover-bg: var(--c-primary-hover); --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-disabled-bg: var(--c-primary);
  --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent;
  background: var(--bg-buttons); font-weight: 700;
}
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-primary:disabled, .btn-primary.disabled { opacity: .55; }
.btn-secondary {
  --bs-btn-color: var(--c-on-secondary); --bs-btn-bg: var(--c-secondary); --bs-btn-border-color: var(--c-secondary);
  --bs-btn-hover-color: var(--c-on-secondary); --bs-btn-hover-bg: color-mix(in srgb, var(--c-secondary) 88%, black); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--c-on-secondary); --bs-btn-active-bg: color-mix(in srgb, var(--c-secondary) 80%, black);
}
.btn-outline-primary {
  --bs-btn-color: var(--c-heading); --bs-btn-border-color: var(--line-strong); --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--c-heading); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: var(--c-heading);
  --bs-btn-active-color: var(--c-heading); --bs-btn-active-bg: var(--c-surface-alt); --bs-btn-active-border-color: var(--c-heading);
  border-width: 1.5px;
}
.btn-outline-danger {
  --bs-btn-color: var(--c-danger); --bs-btn-border-color: color-mix(in srgb, var(--c-danger) 55%, var(--c-border));
  --bs-btn-hover-color: var(--c-surface); --bs-btn-hover-bg: var(--c-danger); --bs-btn-hover-border-color: var(--c-danger);
  --bs-btn-active-color: var(--c-surface); --bs-btn-active-bg: var(--c-danger); border-width: 1.5px;
}
.btn-ghost { --bs-btn-color: var(--c-heading); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-color: var(--c-heading); --bs-btn-border-color: transparent; --bs-btn-active-bg: var(--c-surface-alt); }
.btn:focus-visible { box-shadow: var(--ring); outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
.btn[aria-busy="true"], .btn-buy[aria-busy="true"] { pointer-events: none; }
.btn[aria-busy="true"]::before, .btn-buy[aria-busy="true"]::before {
  content: ""; display: inline-block; width: 1em; height: 1em; flex: none;
  border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: spin calc(700ms / max(var(--motion, 1), .001)) linear infinite;
}

/* The pay button: the only gold, filled control on a product page */
.btn-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.5rem; padding-inline: 1.75rem; border: 0; border-radius: var(--radius);
  background: var(--bg-buttons); color: var(--fg-buttons);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn-buy:hover { background: var(--c-primary-hover); color: var(--fg-buttons); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--c-primary) 80%, transparent); }
.btn-buy:active { transform: scale(.97); }
.btn-buy:disabled { opacity: .7; }
.btn-buy:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 3px; }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: var(--c-surface); color: var(--c-text); border: 1px solid var(--line); border-radius: var(--radius);
  min-height: 2.875rem; padding-inline: .9rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.form-control:hover:not(:focus):not(:disabled), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--line-strong); }
.form-control::placeholder { color: var(--c-text-muted); opacity: .8; }
.form-control:focus, .form-select:focus { border-color: var(--c-focus-ring); box-shadow: var(--ring); background-color: var(--c-surface); color: var(--c-text); }
.form-control:disabled, .form-select:disabled { background-color: var(--c-surface-alt); opacity: .7; }
.form-control[type="file"] { padding-inline: 0; }
.form-control::file-selector-button { background: var(--c-surface-alt); color: var(--c-heading); border: 0; border-inline-end: 1.5px solid var(--line); font-weight: 600; }
.form-select { background-position: left .9rem center; padding-inline: .9rem 2.4rem; }
.form-label { font-weight: 600; color: var(--c-heading); margin-bottom: .4rem; }
.form-text { color: var(--c-text-muted); font-size: var(--fs-sm); }
.invalid-feedback { color: var(--c-danger); font-weight: 500; font-size: var(--fs-sm); }
.invalid-feedback:not(:empty) { display: block; animation: rise var(--dur) var(--ease-out) backwards; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--c-danger); background-image: none; padding-inline-end: .9rem; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-danger) 25%, transparent); }
.form-check-input { border: 1.5px solid var(--line-strong); background-color: var(--c-surface); }
.form-check-input:checked { background-color: var(--c-heading); border-color: var(--c-heading); }
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--c-focus-ring); }

/* ---------- Alerts, chips, tables ---------- */
.alert { border-radius: var(--radius); border: 1px solid transparent; border-inline-start-width: 4px; display: flex; gap: .6rem; align-items: flex-start; color: var(--c-text); padding: .85rem 1rem; }
.alert .icon { margin-top: .3rem; }
.alert-success { background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-success) 30%, transparent); border-inline-start-color: var(--c-success); }
.alert-success .icon { color: var(--c-success); }
.alert-danger { background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-danger) 30%, transparent); border-inline-start-color: var(--c-danger); }
.alert-danger .icon { color: var(--c-danger); }
.alert-warning { background: color-mix(in srgb, var(--c-warning) 12%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-warning) 35%, transparent); border-inline-start-color: var(--c-warning); }
.alert-warning .icon { color: var(--c-warning); }
.alert-info { background: color-mix(in srgb, var(--c-info) 10%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-info) 30%, transparent); border-inline-start-color: var(--c-info); }
.alert-info .icon { color: var(--c-info); }
.text-success-token { color: var(--c-success); }
.text-danger-token { color: var(--c-danger); }

.chip { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; padding: .15rem .65rem; border-radius: var(--radius-pill); color: var(--c-text); background: var(--c-surface-alt); white-space: nowrap; }
.chip::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--c-text-muted); flex: none; }
.chip--pending { background: color-mix(in srgb, var(--c-warning) 13%, var(--c-surface)); }
.chip--pending::before { background: var(--c-warning); animation: pulse calc(1.6s / max(var(--motion, 1), .001)) ease-in-out infinite; }
.chip--ok { background: color-mix(in srgb, var(--c-success) 13%, var(--c-surface)); }
.chip--ok::before { background: var(--c-success); }
.chip--bad { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface)); }
.chip--bad::before { background: var(--c-danger); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .chip--pending::before { animation: none; } }

.table { --bs-table-bg: var(--c-surface); --bs-table-color: var(--c-text); --bs-table-border-color: var(--c-border); --bs-table-hover-bg: var(--hover-bg); }
.table > :not(caption) > * > * { padding: .85rem 1rem; }
.table thead th { color: var(--c-text-muted); font-weight: 600; font-size: var(--fs-sm); background: var(--c-surface); white-space: nowrap; }
.table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.table tbody tr:hover > * { --bs-table-bg-state: var(--hover-bg); }
.table td.c-amount, .table td.c-after { font-family: var(--font-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.pagination { --bs-pagination-color: var(--c-heading); --bs-pagination-bg: var(--c-surface); --bs-pagination-border-color: var(--c-border); --bs-pagination-hover-bg: var(--hover-bg); --bs-pagination-hover-color: var(--c-heading); --bs-pagination-hover-border-color: var(--c-border); --bs-pagination-focus-box-shadow: var(--ring); --bs-pagination-focus-bg: var(--c-surface); --bs-pagination-active-bg: var(--c-heading); --bs-pagination-active-border-color: var(--c-heading); --bs-pagination-active-color: var(--c-surface); --bs-pagination-border-radius: var(--radius); flex-wrap: wrap; gap: .3rem; }
.pagination .page-link { min-width: 2.5rem; min-height: 2.5rem; display: grid; place-items: center; border-radius: var(--radius) !important; font-variant-numeric: tabular-nums; font-weight: 600; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--c-text-muted); --bs-breadcrumb-item-active-color: var(--c-text-muted); font-size: var(--fs-sm); margin-bottom: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb-item.active { overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a { color: var(--c-text-muted); }

/* ---------- Tones: a colour for items that have no picture ----------
   tone() in helpers.php picks one class from the item's name, so the same
   game always gets the same colour. Every tone is a theme token. */
.tone-0 { --tone: var(--c-primary); }
.tone-1 { --tone: var(--c-secondary); }
.tone-2 { --tone: var(--c-info); }
.tone-3 { --tone: var(--c-success); }
.tone-4 { --tone: var(--c-warning); }
.tone-5 { --tone: color-mix(in srgb, var(--c-secondary) 55%, var(--c-danger)); }
[class*="tone-"] {
  --tone-bg: color-mix(in srgb, var(--tone) 15%, var(--c-surface));
  --tone-ink: color-mix(in srgb, var(--tone) 72%, var(--c-heading));
  background-color: var(--tone-bg) !important; color: var(--tone-ink) !important;
}

/* ---------- Header: brand, search, account ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1030; background: var(--bg-header); color: var(--fg-header);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-heading) 3%, transparent);
}
.site-header .container-store { max-width: none; padding-inline: var(--gutter); }
.site-header__bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--fg-header); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); flex: none; letter-spacing: -.01em; }
@media (min-width: 992px) { .brand { width: calc(var(--side-w) - var(--gutter) - 1rem); } }
.brand:hover { color: var(--fg-header); }
.brand img { height: 2.25rem; width: auto; }
.brand__mark {
  width: 2.3rem; height: 2.3rem; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--bg-buttons); color: var(--fg-buttons); transition: transform var(--dur-slow) var(--ease-spring);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.header-search {
  flex: 1 1 auto; min-width: 0; max-width: 36rem; display: flex; align-items: center; gap: .55rem; padding-inline: 1rem;
  min-height: 2.75rem; border-radius: var(--radius-pill); background: var(--c-background); border: 1px solid var(--line);
  color: var(--c-text); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header-search:hover { border-color: var(--line-strong); }
.header-search:focus-within { border-color: var(--c-focus-ring); background: var(--c-surface); box-shadow: var(--ring); }
.header-search .icon { color: var(--c-text-muted); }
.header-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--c-text); padding-block: .45rem; }
.header-search input::placeholder { color: var(--c-text-muted); }
.header-search input:focus { outline: none; }
.account-chip {
  margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding-inline: .35rem 1rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--c-surface); color: var(--c-heading); text-decoration: none; font-weight: 700;
  font-family: var(--font-heading); font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.account-chip .icon { width: 2rem; height: 2rem; padding: .45rem; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); }
.account-chip:hover { border-color: var(--line-strong); color: var(--c-heading); box-shadow: var(--card-shadow); }
.account-chip:active { transform: scale(.97); }
.nav-toggle {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--c-surface); color: var(--c-heading);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover { border-color: var(--line-strong); }
.nav-toggle .icon { width: 1.35rem; height: 1.35rem; }
@media (max-width: 640px) {
  .site-header__bar { flex-wrap: wrap; row-gap: .6rem; column-gap: .6rem; padding-block: .65rem; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  /* The home page already opens on a big search */
  .page-home .header-search { display: none; }
  .brand { font-size: var(--fs-md); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.section--tight { padding-bottom: 0; }
.section--quiet { padding-top: clamp(2.5rem, 6vw, 3.5rem); }
.section--first { padding-bottom: 0; }
.section-title { font-size: var(--fs-xl); margin: 0 0 1rem; letter-spacing: -.01em; }
.section--first .section-title { font-size: var(--fs-2xl); margin-bottom: 1.25rem; }
.section-title--sm { font-size: var(--fs-lg); margin: 1.75rem 0 .85rem; }
.page-title { font-size: var(--fs-2xl); margin: .75rem 0 .4rem; letter-spacing: -.01em; }
.page-lead { color: var(--c-text-muted); max-width: 60ch; margin-bottom: 1.5rem; }
.page-title + :not(.page-lead) { margin-top: 1.25rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head .section-title { margin: 0; }
.section-head__more { flex: none; font-size: var(--fs-sm); }

/* ---------- Home: hero ----------
   A card at the top of the content rather than a full-bleed band, so it
   sits in the same frame as everything under it. */
.hero { padding-top: clamp(1rem, 3vw, 1.75rem); color: var(--fg-hero); }
.hero > .container-store > * { position: relative; }
.hero > .container-store {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg-hero); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3rem);
  max-width: calc(var(--content-max) - 2 * var(--gutter)); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 3rem);
}
/* Coin rings in the far corner */
.hero > .container-store::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -5rem; top: -6rem; width: 22rem; height: 22rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c-primary) 85%, transparent) 0 3.2rem, transparent 3.25rem),
              repeating-radial-gradient(circle, color-mix(in srgb, var(--fg-hero) 12%, transparent) 0 1px, transparent 1px 18px);
}
.hero h1 { color: var(--fg-hero); font-size: var(--fs-3xl); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; max-width: 18ch; margin: 0 0 .75rem; }
.hero__sub { color: var(--fg-hero); opacity: .8; font-size: var(--fs-lg); max-width: 42ch; margin: 0 0 1.75rem; line-height: 1.6; }
.big-search {
  display: flex; align-items: center; gap: .75rem; max-width: 40rem; min-height: 3.5rem; padding-inline: 1.15rem;
  background: var(--c-surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--c-text);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.big-search:focus-within { border-color: var(--c-focus-ring); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-focus-ring) 25%, transparent), var(--lift); }
.big-search .icon { width: 1.3rem; height: 1.3rem; color: var(--c-text-muted); }
.big-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--c-text); font-size: var(--fs-lg); padding-block: .6rem; }
.big-search input:focus { outline: none; }
.big-search input::placeholder { color: var(--c-text-muted); }
.big-search input::-webkit-search-cancel-button { cursor: pointer; }
.hero--compact > .container-store { padding-block: clamp(1.25rem, 4vw, 2rem); }
.hero--compact h1 { font-size: var(--fs-2xl); max-width: none; margin-bottom: 1rem; }
.hero--compact .big-search { min-height: 3.25rem; }

/* ---------- Categories ---------- */
.cat-chips { display: flex; gap: .5rem; margin-top: 1.25rem; overflow-x: auto; scrollbar-width: none; padding-block: .2rem; margin-inline: -.2rem; padding-inline: .2rem; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-tile {
  flex: none; display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding-block: .3rem; padding-inline: .3rem .95rem;
  border-radius: var(--radius-pill); background: var(--c-surface); border: 1px solid var(--line); color: var(--c-heading);
  text-decoration: none; font-weight: 600; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.cat-tile:hover { border-color: var(--line-strong); color: var(--c-heading); box-shadow: var(--card-shadow); }
.cat-tile:active { transform: scale(.98); }
.cat-tile__icon {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none;
  background: var(--c-surface-alt); color: var(--c-heading);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.cat-tile__icon img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile small { color: var(--c-text-muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.cat-tile:not(.cat-tile--tile) small { min-width: 1.6rem; padding: 0 .45rem; border-radius: var(--radius-pill); background: var(--c-surface-alt); text-align: center; }

/* Tiles: a coloured face (picture or icon), the name and the count under it */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
@container main (min-width: 40rem) { .cat-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); } }
.cat-tile--tile {
  position: relative; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem; border-radius: var(--radius-lg);
  white-space: normal; box-shadow: var(--shadow-card);
}
.cat-tile--tile:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.cat-tile--tile .cat-tile__icon {
  width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: calc(var(--radius-lg) - .3rem); position: relative;
}
.cat-tile--tile .cat-tile__icon .icon { width: 2.25rem; height: 2.25rem; transition: transform var(--dur-slow) var(--ease-spring); }
.cat-tile--tile:hover .cat-tile__icon .icon { transform: scale(1.12) rotate(-6deg); }
/* Category pictures are usually logos: shown whole on a quiet backdrop */
.cat-tile--tile .cat-tile__icon:has(img) { background: var(--c-background); }
.cat-tile--tile .cat-tile__icon img { object-fit: contain; padding: .85rem; transition: transform calc(500ms * var(--motion, 1)) var(--ease-out); }
.cat-tile--tile:hover .cat-tile__icon img { transform: scale(1.05); }
/* A faint ring pattern behind the icon, in the tile's own colour */
.cat-tile--tile .cat-tile__icon:not(:has(img))::before {
  content: ""; position: absolute; inset-inline-end: -2.5rem; bottom: -3rem; width: 9rem; height: 9rem; border-radius: 50%;
  background: repeating-radial-gradient(circle, color-mix(in srgb, currentColor 18%, transparent) 0 1px, transparent 1px 12px);
}
.cat-tile--tile .cat-tile__name { font-family: var(--font-heading); font-size: var(--fs-md); line-height: 1.4; padding: .75rem .5rem 0; }
.cat-tile--tile small { padding: .1rem .5rem .4rem; font-size: var(--fs-xs); }
/* Phones: the categories become a tidy list (icon, name, count) */
@media (max-width: 575.98px) {
  .cat-grid { grid-template-columns: 1fr; gap: .5rem; }
  .cat-tile--tile { flex-direction: row; align-items: center; gap: .85rem; padding: .55rem; }
  .cat-tile--tile .cat-tile__icon { width: 3.25rem; height: 3.25rem; aspect-ratio: 1; border-radius: var(--radius); }
  .cat-tile--tile .cat-tile__icon .icon { width: 1.4rem; height: 1.4rem; }
  .cat-tile--tile .cat-tile__icon::before { display: none; }
  .cat-tile--tile .cat-tile__name { flex: 1; padding: 0; }
  .cat-tile--tile small { padding: 0 .5rem; }
  .cat-tile--tile:hover { transform: none; }
}

/* ---------- Banners: a row of offers, image or plain ---------- */
.banner-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(86%, 20rem), 1fr); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius-lg);
}
.banner-strip::-webkit-scrollbar { display: none; }
.banner {
  position: relative; scroll-snap-align: start; min-height: 9.5rem; display: flex; align-items: flex-end; padding: 1.35rem 1.5rem;
  border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; text-decoration: none;
  background: linear-gradient(135deg, var(--c-secondary), color-mix(in srgb, var(--c-secondary) 45%, var(--c-heading)));
  color: var(--c-on-secondary);
}
/* Text-only banners: a gold coin with rings, so an offer reads as an offer */
.banner:not(.banner--image)::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -2rem; top: -2rem; width: 9rem; height: 9rem; border-radius: 50%;
  background: radial-gradient(circle, var(--c-primary) 0 1.4rem, transparent 1.45rem),
              repeating-radial-gradient(circle, color-mix(in srgb, var(--c-on-secondary) 22%, transparent) 0 1px, transparent 1px 13px);
  transition: transform var(--dur-slow) var(--ease-out);
}
a.banner:not(.banner--image):hover::after { transform: scale(1.1) rotate(20deg); }
/* Dark mode: a light accent would glare, so the banner becomes a deep tint of it */
:root[data-theme="dark"] .banner:not(.banner--image) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-secondary) 38%, var(--c-surface)), var(--c-surface-alt)); color: var(--c-heading); }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .banner:not(.banner--image) { background: linear-gradient(135deg, color-mix(in srgb, var(--c-secondary) 38%, var(--c-surface)), var(--c-surface-alt)); color: var(--c-heading); }
}
:root[data-theme="dark"] a.banner:not(.banner--image):hover { color: var(--c-heading); }
.banner img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform calc(600ms * var(--motion, 1)) var(--ease-out); }
a.banner--image:hover img { transform: scale(1.04); }
.banner--image { color: #fff; background: var(--c-heading); }
.banner--image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 70%); }
.banner__body { position: relative; display: grid; gap: .2rem; max-width: 34ch; }
.banner__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl); color: inherit; line-height: 1.3; }
.banner__sub { opacity: .85; font-size: var(--fs-sm); }
a.banner { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); }
a.banner:hover { color: var(--c-on-secondary); transform: translateY(-2px); box-shadow: var(--lift); }
a.banner--image:hover { color: #fff; }

/* ---------- Product cards ----------
   The whole card is the link: a coloured face (picture, or the product's
   initial on its tone), the name, then the price with a go button. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: .85rem; }
@container main (min-width: 40rem) { .product-grid { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 1.1rem; } }
.voucher {
  position: relative; display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  color: var(--c-text); text-decoration: none; box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
a.voucher:hover { border-color: var(--line-strong); color: var(--c-text); transform: translateY(-4px); box-shadow: var(--lift); }
a.voucher:active { transform: translateY(-1px) scale(.99); }
a.voucher:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
.voucher__face {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; margin: .5rem .5rem 0; border-radius: calc(var(--radius-lg) - .3rem);
  background: var(--c-surface-alt); color: var(--c-heading); overflow: hidden;
}
.voucher__img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(500ms * var(--motion, 1)) var(--ease-out); }
a.voucher:hover .voucher__img { transform: scale(1.05); }
/* No image: the product's initial set big, like the face of a gift card */
.voucher__mark {
  position: relative; font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.6rem, 7vw, 3.4rem); line-height: 1;
  transition: transform var(--dur-slow) var(--ease-spring);
}
.voucher__face:not(:has(img))::before {
  content: ""; position: absolute; inset-inline-start: -3rem; bottom: -4rem; width: 11rem; height: 11rem; border-radius: 50%;
  background: repeating-radial-gradient(circle, color-mix(in srgb, currentColor 16%, transparent) 0 1px, transparent 1px 12px);
}
.voucher__face:not(:has(img))::after {
  content: ""; position: absolute; inset-inline-end: 12%; top: 14%; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: currentColor; opacity: .18;
}
a.voucher:hover .voucher__mark { transform: scale(1.08) rotate(-4deg); }
.voucher__top { padding: .8rem 1rem .5rem; flex: 1; display: grid; align-content: start; gap: .15rem; }
.voucher__cat { color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voucher__name {
  font-family: var(--font-heading); font-size: var(--fs-md); font-weight: 600; line-height: 1.45; margin: 0; color: var(--c-heading);
  unicode-bidi: plaintext; text-align: start; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.voucher__bottom { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 1rem .9rem; min-height: 3.25rem; }
.voucher__price { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); color: var(--c-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.voucher__price small { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-xs); color: var(--c-text-muted); }
/* The delivery badge sits on the face's corner */
.voucher__badge {
  position: absolute; top: 1rem; inset-inline-start: 1rem; z-index: 1; max-width: calc(100% - 2rem);
  display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-surface) 92%, transparent); color: var(--c-heading);
  font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-heading) 15%, transparent);
}
.voucher__badge .icon { color: var(--c-primary-hover); flex: none; }
.voucher__go {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-surface-alt); color: var(--c-heading);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.voucher__go .icon { width: 1rem; height: 1rem; }
:root[dir="rtl"] .voucher__go .icon { transform: scaleX(-1); }
a.voucher:hover .voucher__go { background: var(--bg-buttons); color: var(--fg-buttons); transform: translateX(-3px); }
:root[dir="ltr"] a.voucher:hover .voucher__go { transform: translateX(3px); }
.voucher__na { color: var(--c-text-muted); font-size: var(--fs-sm); }
.voucher--off { opacity: .6; }
a.voucher--off:hover { opacity: .8; }
.voucher--featured { border-color: var(--line-strong); }

/* Large cards: three per row on desktop */
@container main (min-width: 40rem) { .product-grid--large { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; } }
.product-grid--large .voucher__face { aspect-ratio: 16 / 10; }
.product-grid--large .voucher__name { font-size: var(--fs-lg); }
.product-grid--large .voucher__price { font-size: var(--fs-xl); }

/* Shelf: one horizontal row that scrolls under the thumb */
.product-grid--row {
  grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: min(46%, 13rem);
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  padding-block: .35rem 1rem; margin-block: -.35rem 0;
}
.product-grid--row > * { scroll-snap-align: start; }

/* Compact list: mark, name, price on one line */
.product-list { display: grid; background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
@container main (min-width: 40rem) { .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; padding-inline: 1rem; } }
.product-row { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--c-text); text-decoration: none; min-height: 4rem; transition: background-color var(--dur-fast) var(--ease); }
@container main (min-width: 40rem) { .product-row { padding-inline: .5rem; margin-inline: -.5rem; border-radius: var(--radius); } }
a.product-row:hover { color: var(--c-text); background: var(--hover-bg); }
.product-row__mark { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: var(--radius); background: var(--c-surface-alt); color: var(--c-heading); font-family: var(--font-heading); font-weight: 800; transition: transform var(--dur) var(--ease-spring); }
a.product-row:hover .product-row__mark { transform: rotate(-6deg); }
.product-row__mark img { width: 100%; height: 100%; object-fit: cover; }
.product-row__name { flex: 1; min-width: 0; display: grid; }
.product-row__name strong { color: var(--c-heading); font-weight: 600; unicode-bidi: plaintext; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-row__name small { color: var(--c-text-muted); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-row__price { flex: none; font-family: var(--font-heading); font-weight: 700; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.product-row__price small { font-family: var(--font-body); font-weight: 500; color: var(--c-text-muted); font-size: var(--fs-xs); }
.product-row__price--na { font-family: var(--font-body); font-weight: 500; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* How it works: three numbered cards */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; counter-reset: st; }
@container main (min-width: 40rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.steps li {
  counter-increment: st; position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: start;
  padding: 1.1rem 1.15rem; background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.steps li::before {
  content: counter(st, arabic-indic); grid-row: span 2; width: 2.6rem; height: 2.6rem; border-radius: var(--radius); display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-lg); line-height: 1;
  color: var(--c-heading); background: var(--c-surface-alt);
}
.steps li:last-child::before { background: var(--c-primary); color: var(--c-on-primary); }
.steps strong { color: var(--c-heading); font-family: var(--font-heading); font-weight: 600; }
.steps span { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* ---------- Panels and states ---------- */
.panel { background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.1rem, 3vw, 1.5rem); box-shadow: var(--shadow-card), var(--card-shadow); }
.panel > h2:first-child, .panel > .h5:first-child, .panel > .h6:first-child { margin-bottom: 1rem; }
/* Tables inside a panel run to its edges, so the panel clips their corners */
.panel.p-0 { overflow: hidden; }
label.panel { cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
label.panel:hover { border-color: var(--line-strong); }
label.panel:has(input:checked) { border-color: var(--c-heading); background: color-mix(in srgb, var(--c-heading) 4%, var(--c-surface)); box-shadow: inset 0 0 0 1px var(--c-heading); }
label.panel:has(input:focus-visible) { outline: 2px solid var(--c-focus-ring); outline-offset: 2px; }
label.panel:has(input:disabled) { cursor: not-allowed; }

/* Sign-in pages: one card in the middle of the page, no sidebar */
.page-auth main { display: grid; align-content: center; padding-block: clamp(1.5rem, 6vw, 3.5rem); }
.page-auth main::before {
  content: ""; position: fixed; z-index: -1; inset-inline-end: -10rem; top: 4rem; width: 34rem; height: 34rem; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, color-mix(in srgb, var(--c-heading) 6%, transparent) 0 1px, transparent 1px 22px);
}
.auth-shell {
  position: relative; overflow: hidden; width: 100%; max-width: 27rem; margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 2.25rem); padding-top: clamp(1.9rem, 5vw, 2.6rem); box-shadow: var(--lift);
}
.auth-shell::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; background: var(--bg-buttons); }
.auth-shell h1 { font-size: var(--fs-xl); margin-bottom: .35rem !important; }
.auth-shell h1 + .text-muted { margin-bottom: 1.5rem; }
.auth-shell .btn-primary { min-height: 3rem; font-size: var(--fs-md); margin-top: .25rem; }
.auth-shell > p:last-child { color: var(--c-text-muted); padding-top: 1.1rem; margin-top: 1.35rem !important; border-top: 1px solid var(--line); }

.state {
  text-align: center; padding: clamp(2.25rem, 7vw, 3.5rem) 1.25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-text-muted);
}
.state > .icon {
  width: 3.5rem; height: 3.5rem; padding: .85rem; border-radius: 50%; color: var(--c-heading); margin-bottom: 1rem;
  background: var(--c-surface-alt);
}
.state--error > .icon { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); }
.state h3 { font-size: var(--fs-lg); margin-bottom: .35rem; }
.state p { max-width: 44ch; margin-inline: auto; }
.state .btn { margin-top: 1rem; }
.panel .state { border: 0; background: var(--c-background); padding-block: 2rem; }
.skeleton { background: linear-gradient(90deg, var(--c-surface-alt) 25%, color-mix(in srgb, var(--c-surface-alt) 50%, var(--c-surface)) 50%, var(--c-surface-alt) 75%); background-size: 200% 100%; border-radius: var(--radius); animation: shimmer calc(1.4s / max(var(--motion, 1), .001)) linear infinite; min-height: 1rem; }
.skeleton--code { height: 4.5rem; border-radius: var(--radius-lg); }
.skeleton--line { height: .9rem; }
.skeleton--short { width: 45%; }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Product page ----------
   The order form is one card (product on top, then the choices); the
   summary is a second card beside it on wide screens, a bar on phones. */
.product-head { display: flex; align-items: center; gap: 1.1rem; }
.product-head__mark {
  width: clamp(4.5rem, 14vw, 6.5rem); aspect-ratio: 1; flex: none; display: grid; place-items: center; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--c-surface-alt); color: var(--c-heading); font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-2xl);
  border: 1px solid var(--line);
}
.product-head__mark img { width: 100%; height: 100%; object-fit: cover; }
.product-head > div { min-width: 0; }
.product-head h1 { font-size: var(--fs-2xl); margin: 0 0 .4rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.product-head p { margin: 0; color: var(--c-text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: var(--fs-sm); }
.product-head__how { display: inline-flex; align-items: center; gap: .3rem; color: var(--c-heading); font-weight: 600; padding: .15rem .65rem; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-primary) 16%, var(--c-surface)); }
.product-head__how .icon { color: var(--c-primary-hover); }
/* Unavailable product: the head stands on its own card */
.container-store > .product-head { background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.1rem, 3vw, 1.5rem); }

.buy { display: grid; gap: 1.25rem; margin-top: .5rem; }
@container main (min-width: 50rem) { .buy { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 1.5rem; } }
.buy__main {
  display: grid; gap: 1.6rem; min-width: 0;
  background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--card-shadow);
  padding: clamp(1.1rem, 3.5vw, 1.75rem);
}
.buy__main > .product-head { padding-bottom: 1.35rem; border-bottom: 1px solid var(--line); }
.buy__group { border: 0; padding: 0; margin: 0; min-width: 0; }
.buy__label { display: block; float: none; width: auto; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-md); color: var(--c-heading); margin-bottom: .6rem; padding: 0; }
.buy__label small { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-muted); }
.buy .form-control, .buy .form-select { min-height: 3.1rem; font-size: var(--fs-md); background-color: var(--c-background); }
.buy .form-control:focus, .buy .form-select:focus { background-color: var(--c-surface); }
/* Amount picker: the numbers themselves are the buttons */
.pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 7.5rem), 1fr)); gap: .6rem; }
.pack {
  position: relative; display: grid; gap: .1rem; padding: .9rem .9rem .8rem; cursor: pointer; text-align: center;
  background: var(--c-surface); border: 2px solid var(--line); border-radius: var(--radius-lg); color: var(--c-heading);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack:hover { border-color: var(--c-heading); }
.pack:active { transform: scale(.97); }
.pack__amount { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pack__price { font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-muted); font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); }
.pack:has(input:checked) { background: var(--bg-buttons); border-color: var(--c-heading); color: var(--fg-buttons); animation: pop var(--dur-slow) var(--ease-out); }
.pack:has(input:checked) .pack__price { color: var(--fg-buttons); }
/* A tick stamped in the corner of the chosen amount */
.pack::after {
  content: "✓"; position: absolute; top: -.55rem; inset-inline-end: -.45rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .75rem; font-weight: 800; background: var(--c-heading); color: var(--c-surface);
  opacity: 0; transform: scale(.5); transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-spring);
}
.pack:has(input:checked)::after { opacity: 1; transform: none; }
.pack:has(input:focus-visible) { outline: 2px solid var(--c-focus-ring); outline-offset: 3px; }

/* Range quantity: one wide field with + and − on its ends */
.stepper-input { display: flex; align-items: stretch; max-width: 20rem; border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--c-surface); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.stepper-input:focus-within { border-color: var(--c-heading); box-shadow: var(--ring); }
.stepper-input:has(.is-invalid) { border-color: var(--c-danger); }
.stepper-input input { flex: 1; min-width: 0; border: 0; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl); color: var(--c-heading); background: transparent; font-variant-numeric: tabular-nums; }
.stepper-input input:focus { outline: none; }
.stepper-input button { width: 3.5rem; min-height: 3.5rem; border: 0; background: var(--c-surface-alt); color: var(--c-heading); display: grid; place-items: center; transition: background-color var(--dur-fast) var(--ease); }
.stepper-input button:hover { background: color-mix(in srgb, var(--c-heading) 12%, var(--c-surface-alt)); }
.stepper-input button:active .icon { transform: scale(.8); }
.stepper-input button .icon { transition: transform var(--dur-fast) var(--ease); }
.stepper-input button:focus-visible { outline-offset: -3px; }

/* Disclosures: details opening slides its content in */
details > summary { list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer; width: fit-content; min-height: var(--tap); }
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: ""; width: .5rem; height: .5rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease); opacity: .7;
}
details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
details[open] > summary ~ * { animation: rise var(--dur) var(--ease-out) backwards; }
details.small > summary, .enrol-steps details > summary { min-height: 0; }

.product-desc { border-top: 1px solid var(--line); padding-top: .5rem; color: var(--c-text); }
.product-desc summary { font-weight: 600; color: var(--c-heading); }
.product-desc > div { margin-top: .4rem; color: var(--c-text-muted); max-width: 65ch; }

/* The buy bar: the order written as a sentence, the total, one button.
   A sticky summary card on wide screens, a bar fixed to the bottom on phones.
   It is a light card, so the ink variables are pointed at the surface. */
.buy-bar {
  --ink: var(--c-surface); --on-ink: var(--c-heading); --on-ink-muted: var(--c-text-muted); --ink-line: var(--line);
  background: var(--c-surface); color: var(--c-text); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--card-shadow); padding: 1.25rem; display: grid; gap: .85rem;
}
@container main (min-width: 50rem) {
  .buy-bar { position: sticky; top: calc(var(--header-h) + 1.25rem); padding: 1.5rem; gap: 1rem; }
  .buy-bar .buy-bar__title { display: block; }
  .buy-bar__row { flex-direction: column; align-items: stretch; gap: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
  .buy-bar .btn-buy { width: 100%; }
}
.buy-bar__title { display: none; margin: 0; font-size: var(--fs-md); padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.buy-bar__sentence { margin: 0; font-size: var(--fs-md); line-height: 1.65; overflow-wrap: anywhere; color: var(--c-text); }
.buy-bar__what { font-family: var(--font-heading); font-weight: 600; color: var(--c-heading); unicode-bidi: isolate; }
.product-head h1, .order-rows strong:first-child { unicode-bidi: plaintext; text-align: start; }
.buy-bar__to { color: var(--on-ink-muted); }
.buy-bar__value { font-weight: 700; color: var(--c-heading); font-variant-numeric: tabular-nums; }
.buy-bar__missing { color: var(--c-danger); text-decoration: underline dotted; text-underline-offset: .3em; }
.buy-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.buy-bar__total { display: grid; min-width: 0; }
.buy-bar__total strong { font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-2xl); line-height: 1.1; color: var(--c-heading); font-variant-numeric: tabular-nums; transition: color var(--dur) var(--ease); }
.buy-bar__total small { color: var(--on-ink-muted); font-size: var(--fs-xs); }
.buy-bar__total small:empty { display: none; }
.buy-bar__wallet { margin: 0; font-size: var(--fs-sm); color: var(--on-ink-muted); display: flex; align-items: center; gap: .45rem; padding: .55rem .75rem; border-radius: var(--radius); background: var(--c-background); }
.buy-bar__wallet::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-success); flex: none; }
.buy-bar__wallet.is-short { color: var(--c-danger); font-weight: 600; background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface)); }
.buy-bar__wallet.is-short::before { background: var(--c-danger); }
.buy-bar__error { padding: .65rem .85rem; border-radius: var(--radius); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); color: var(--c-danger); font-weight: 500; font-size: var(--fs-sm); animation: rise var(--dur) var(--ease-out) backwards; }
.buy-bar__was { font-size: var(--fs-sm); color: var(--on-ink-muted); }
.buy-bar__was s { text-decoration-thickness: 1.5px; }
.buy-bar__was [data-discount-label] { color: var(--c-success); font-weight: 600; }
@container main (max-width: 49.99rem) {
  .buy-bar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 1020; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0;
    padding: .9rem var(--space) calc(.9rem + env(safe-area-inset-bottom)); gap: .5rem;
    box-shadow: 0 -10px 30px -12px color-mix(in srgb, var(--c-heading) 30%, transparent);
    animation: slide-up var(--dur-slow) var(--ease-out) backwards;
  }
  /* Two lines reserved, so the button never moves while the customer types */
  .buy-bar__sentence { font-size: var(--fs-sm); min-height: 3.2em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .buy-bar__total strong { font-size: var(--fs-xl); }
  .buy-bar .btn-buy { min-height: 3.25rem; padding-inline: 1.25rem; font-size: var(--fs-md); }
  .buy-bar__wallet { padding: 0; background: none; }
  /* Room under the form so the fixed bar never covers the last field */
  .buy { padding-bottom: 11rem; }
}
@media (max-width: 991.98px) { body:has(.buy-bar) .site-footer { padding-bottom: 9rem; } }
@keyframes slide-up { from { transform: translateY(100%); } }

/* Coupon: a quiet "have a code?" disclosure; the discount shows in the buy bar */
.coupon { border-top: 1px solid var(--line); padding-top: .5rem; }
.coupon summary { font-weight: 600; color: var(--c-link); transition: color var(--dur) var(--ease); }
.coupon summary:hover { color: var(--c-link-hover); }
.coupon__row { display: flex; gap: .5rem; margin-top: .5rem; max-width: 26rem; }
.coupon__row input {
  flex: 1; min-width: 0; min-height: 3rem; padding-inline: 1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-heading); font-family: var(--font-heading); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.coupon__row input::placeholder { color: var(--c-text-muted); opacity: .6; }
.coupon__row input:focus { outline: none; border-color: var(--c-heading); border-style: solid; box-shadow: var(--ring); }
.coupon__row button { min-height: 3rem; padding-inline: 1.25rem; border: 2px solid var(--c-heading); border-radius: var(--radius); background: transparent; color: var(--c-heading); font-weight: 700; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.coupon__row button:hover { background: var(--c-heading); color: var(--c-surface); }
.coupon__row button:active { transform: scale(.97); }
.coupon__msg { margin: .5rem 0 0; font-size: var(--fs-sm); min-height: 1.4em; color: var(--c-text-muted); }
.coupon__msg.is-ok { color: var(--c-success); font-weight: 600; animation: rise var(--dur) var(--ease-out) backwards; }
.coupon__msg.is-bad { color: var(--c-danger); animation: rise var(--dur) var(--ease-out) backwards; }

/* ---------- Order page ---------- */
/* Head card: what was bought, its status, its progress and, once ready, the code */
.order-hero { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.order-head { display: flex; align-items: center; gap: 1rem; }
.order-head__mark { width: 3.5rem; height: 3.5rem; flex: none; display: grid; place-items: center; border-radius: var(--radius); font-family: var(--font-heading); font-weight: 800; font-size: var(--fs-xl); }
.order-head__text { flex: 1; min-width: 0; }
.order-head h1 { font-size: var(--fs-xl); margin: 0 0 .15rem; unicode-bidi: plaintext; text-align: start; overflow-wrap: anywhere; }
.order-head p { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem 1rem; color: var(--c-text-muted); font-size: var(--fs-sm); }
.order-head .chip { flex: none; align-self: flex-start; }
.order-hero .stepper { margin: 0; padding: .9rem .5rem; border-radius: var(--radius); background: var(--c-background); }
.order-hero .code-card { margin-bottom: 0; }
.code-card__label .icon { color: var(--c-success); margin-inline-end: .2rem; }

/* Waiting for the order: a calm note with a slow progress shimmer */
.order-wait {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem 1.25rem;
  border-radius: var(--radius); background: color-mix(in srgb, var(--c-info) 8%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-info) 25%, transparent);
}
.order-wait__icon { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--c-info) 16%, var(--c-surface)); color: var(--c-info); }
.order-wait__icon .icon { width: 1.25rem; height: 1.25rem; animation: spin calc(6s / max(var(--motion, 1), .001)) linear infinite; }
.order-wait strong { color: var(--c-heading); font-family: var(--font-heading); }
.order-wait p { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.order-wait__bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--c-info), transparent) 0 0 / 40% 100% no-repeat; animation: wait-bar calc(1.8s / max(var(--motion, 1), .001)) var(--ease) infinite; }
@keyframes wait-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { .order-wait__icon .icon, .order-wait__bar { animation: none; } }

.order-layout { display: grid; gap: 1.25rem; align-items: start; }
@container main (min-width: 52rem) { .order-layout { grid-template-columns: minmax(0, 1fr) 20rem; } }
.order-side { display: grid; gap: 1.25rem; }
.order-layout h2 { font-size: var(--fs-lg); margin-bottom: .9rem; }
.receipt .confirm-list { margin-bottom: 1rem; }
.receipt__id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); font-weight: 500 !important; color: var(--c-text-muted) !important; }
.confirm-list dd.text-success-token { color: var(--c-success); }
.order-help p { color: var(--c-text-muted); font-size: var(--fs-sm); margin-bottom: .85rem; }
.order-help__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.back-link { display: inline-flex; align-items: center; gap: .35rem; min-height: var(--tap); margin-bottom: .25rem; color: var(--c-text-muted); font-weight: 600; text-decoration: none; transition: color var(--dur) var(--ease), gap var(--dur) var(--ease); }
.back-link:hover { color: var(--c-heading); gap: .55rem; }
/* Back points toward the start of the line: right in Arabic */
:root[dir="ltr"] .back-link .icon { transform: scaleX(-1); }

.stepper { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.25rem 0 1.5rem; padding: 0; counter-reset: st; }
.stepper li { position: relative; display: grid; justify-items: center; gap: .45rem; text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); counter-increment: st; }
.stepper li::before { content: counter(st, arabic-indic); position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--c-surface); border: 2px solid var(--line); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.stepper li:not(:first-child)::after { content: ""; position: absolute; top: 1.08rem; inset-inline-end: 50%; width: 100%; height: 2px; background: var(--line); }
.stepper li.is-done, .stepper li.is-current { color: var(--c-heading); font-weight: 600; }
.stepper li.is-done::before { content: "✓"; background: var(--c-heading); border-color: var(--c-heading); color: var(--c-surface); }
.stepper li.is-done::after, .stepper li.is-current::after { background: var(--c-heading); }
.stepper li.is-current::before { border-color: var(--c-heading); color: var(--c-heading); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-primary) 45%, transparent); animation: halo calc(1.8s / max(var(--motion, 1), .001)) ease-in-out infinite; }
.stepper li.is-failed, .stepper li.is-failed::before { color: var(--c-danger); border-color: var(--c-danger); }
.stepper li.is-failed::before { content: "!"; }
.stepper li.is-failed::after { background: var(--c-danger); }
@keyframes halo { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-primary) 15%, transparent); } }
@media (prefers-reduced-motion: reduce) { .stepper li.is-current::before { animation: none; } }

/* The delivered code: an ink ticket, notched on both sides, with a dashed
   inner frame. The mask only reads alpha. */
.code-card {
  position: relative; border-radius: var(--radius-lg); background: var(--ink); color: var(--on-ink); padding: 1.4rem 1.6rem; margin-bottom: 1.25rem;
  outline: 1.5px dashed var(--ink-line); outline-offset: -.55rem;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 50%, transparent 96%, black) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 50%, transparent 96%, black) 100% 0 / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 50%, transparent 96%, black) 0 0 / 51% 100% no-repeat,
                radial-gradient(circle var(--notch) at 100% 50%, transparent 96%, black) 100% 0 / 51% 100% no-repeat;
  animation: rise var(--dur-slow) var(--ease-out) backwards;
}
.code-card__label { display: block; font-size: var(--fs-sm); color: var(--on-ink-muted); margin-bottom: .45rem; }
.code-card__row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; justify-content: space-between; }
.code-card__strip { flex: 1 1 14rem; min-width: 0; }
.code-card__code { display: block; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-xl); letter-spacing: .08em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; user-select: all; }
.code-card [data-copy] {
  --bs-btn-color: var(--fg-buttons); --bs-btn-bg: var(--c-primary); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--fg-buttons); --bs-btn-hover-bg: var(--c-primary-hover); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--c-primary-hover); --bs-btn-active-color: var(--fg-buttons); --bs-btn-active-border-color: transparent;
  min-height: 3rem; padding-inline: 1.25rem; font-weight: 700;
}
.code-card [data-copy].is-copied { --bs-btn-bg: var(--on-ink); --bs-btn-color: var(--ink); --bs-btn-hover-bg: var(--on-ink); --bs-btn-hover-color: var(--ink); animation: pop var(--dur-slow) var(--ease-out); }
.code-card__scratch, .foil { display: none !important; }

.confirm-list { display: grid; grid-template-columns: auto 1fr; gap: 0 1.25rem; margin: 0; }
.confirm-list dt, .confirm-list dd { padding-block: .6rem; border-top: 1px solid var(--line); }
.confirm-list dt:first-of-type, .confirm-list dd:first-of-type { border-top: 0; }
.confirm-list dt { color: var(--c-text-muted); font-weight: 500; }
.confirm-list dd { margin: 0; font-weight: 600; color: var(--c-heading); overflow-wrap: anywhere; text-align: end; font-variant-numeric: tabular-nums; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 1.5rem 1.1rem; }
.timeline li::after { content: ""; position: absolute; inset-inline-start: 5px; top: .9rem; bottom: -.4rem; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5rem; width: 12px; height: 12px; border-radius: 50%; background: var(--c-heading); z-index: 1; }
.timeline li:last-child::before { background: var(--c-primary); box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4.5px var(--c-heading); }
.timeline strong { color: var(--c-heading); font-weight: 600; }

/* ---------- Top-up ---------- */
.deposit { display: grid; gap: 1.25rem; align-items: start; }
@container main (min-width: 52rem) { .deposit { grid-template-columns: minmax(0, 1fr) 22rem; } }
.deposit__step {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; margin-inline-end: .35rem; vertical-align: .1em;
  background: var(--c-heading); color: var(--c-surface); font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 700; line-height: 1;
}
.deposit__details h2 { font-size: var(--fs-lg); margin-bottom: .35rem; }
.deposit__estimate { min-height: 1.4em; margin: .35rem 0 .9rem; font-size: var(--fs-sm); font-weight: 600; color: var(--c-success); }
.deposit__estimate:empty { margin-bottom: .5rem; }
.deposit .btn-buy { min-height: 3.1rem; font-size: var(--fs-md); }
.deposit__notes { margin: 1rem 0 0; padding: .85rem 1rem .85rem 1rem; padding-inline-start: 1.9rem; border-radius: var(--radius); background: var(--c-background); color: var(--c-text-muted); font-size: var(--fs-sm); display: grid; gap: .25rem; }
.method { display: grid; gap: .55rem; padding: 1rem 1.1rem; }
.method__head { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.method__head .form-check-input { margin: 0; flex: none; width: 1.2rem; height: 1.2rem; }
.method__head strong { color: var(--c-heading); font-family: var(--font-heading); flex: 1; min-width: 0; }
.method__currency { font-size: var(--fs-xs); font-weight: 700; color: var(--c-text-muted); padding: .1rem .5rem; border-radius: var(--radius-pill); background: var(--c-background); }
.method__text { color: var(--c-text-muted); font-size: var(--fs-sm); padding-inline-start: 1.85rem; }
.method__account { display: flex; align-items: center; gap: .5rem; margin-inline-start: 1.85rem; padding: .35rem .35rem .35rem .75rem; padding-inline-start: .75rem; border-radius: var(--radius); background: var(--c-background); border: 1px dashed var(--line-strong); }
.method-list .method__account code { flex: 1; min-width: 0; background: none; padding: 0; font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.method__account .btn { flex: none; min-height: 2rem; }
.method__limits { font-size: var(--fs-xs); color: var(--c-text-muted); padding-inline-start: 1.85rem; }
.method--off { opacity: .55; }
.method-list .method:has(input:checked) .method__account { border-color: var(--c-heading); }

/* ---------- Wallet ---------- */
.balance-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); padding: clamp(1.25rem, 4vw, 1.6rem); background: var(--ink); color: var(--on-ink); display: grid; gap: 1.1rem; }
/* A stack of coin rings in the corner: money, without a picture of money */
.balance-card::after {
  content: ""; position: absolute; z-index: -1; inset-inline-end: -3.5rem; bottom: -4.5rem; width: 12rem; height: 12rem; border-radius: 50%;
  background: repeating-radial-gradient(circle, var(--ink-line) 0 1px, transparent 1px 14px);
  opacity: .8;
}
.balance-card__head { display: flex; justify-content: space-between; align-items: center; color: var(--on-ink-muted); font-size: var(--fs-sm); }
.balance-card__chip { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--c-primary); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--c-primary-hover) 80%, var(--c-on-primary)); }
.balance-card__main small { display: block; color: var(--on-ink-muted); font-size: var(--fs-sm); }
.balance-card__main strong { display: block; font-family: var(--font-heading); font-size: clamp(2.1rem, 7vw, 2.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.balance-card__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding-top: .9rem; background: linear-gradient(90deg, var(--ink-line) 50%, transparent 0) 0 0 / 10px 1.5px repeat-x; }
.balance-card__split span { display: block; font-size: var(--fs-xs); color: var(--on-ink-muted); }
.balance-card__split strong { font-family: var(--font-heading); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.balance-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.balance-card__local { color: var(--on-ink-muted); margin-top: -.4rem; }
.balance-card .btn-outline-primary { --bs-btn-color: var(--on-ink); --bs-btn-border-color: var(--ink-line); --bs-btn-hover-color: var(--on-ink); --bs-btn-hover-bg: color-mix(in srgb, var(--on-ink) 10%, transparent); --bs-btn-hover-border-color: var(--on-ink); --bs-btn-active-color: var(--on-ink); --bs-btn-active-bg: color-mix(in srgb, var(--on-ink) 15%, transparent); }
.ledger-type { display: inline-flex; align-items: center; gap: .55rem; }
.ledger-type .icon { width: 1.9rem; height: 1.9rem; padding: .45rem; border-radius: 50%; }
.ledger-type--in .icon { background: color-mix(in srgb, var(--c-success) 14%, var(--c-surface)); color: var(--c-success); }
.ledger-type--out .icon { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface)); color: var(--c-danger); }
.wallet-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.wallet-figures div { background: var(--c-surface-alt); border-radius: var(--radius); padding: .75rem; }
.wallet-figures span { display: block; color: var(--c-text-muted); font-size: var(--fs-sm); }
.wallet-figures strong { font-size: var(--fs-lg); color: var(--c-heading); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .wallet-figures { grid-template-columns: 1fr; } }

/* ---------- Account ---------- */
.account-main { padding-block: clamp(1.25rem, 4vw, 2.25rem); }
.account-title { font-size: var(--fs-2xl); margin: 0 0 .35rem; letter-spacing: -.01em; }
.account-lead { color: var(--c-text-muted); margin: 0 0 1.5rem; max-width: 60ch; }
.account-title + :not(.account-lead):not(p) { margin-top: 1.25rem; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .75rem; }
.panel-head h2 { font-size: var(--fs-lg); margin: 0; display: flex; align-items: center; gap: .5rem; }
.order-rows { list-style: none; margin: 0; padding: 0; }
.order-rows a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem .6rem; margin-inline: -.6rem; border-radius: var(--radius); border-bottom: 1px solid var(--line); color: var(--c-text); text-decoration: none; font-weight: inherit; background-image: none; transition: background-color var(--dur-fast) var(--ease); }
.order-rows li:last-child a { border-bottom: 0; }
.order-rows a:hover { color: var(--c-text); background: var(--hover-bg); }
.order-rows a > span:first-child { min-width: 0; }
.order-rows strong:first-child { display: block; color: var(--c-heading); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-rows small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.order-rows .text-end { display: grid; justify-items: end; gap: .25rem; flex: none; }
.order-rows .text-end strong { font-family: var(--font-heading); color: var(--c-heading); font-variant-numeric: tabular-nums; }
.deposit-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.deposit-rows > li { padding-block: .85rem; border-bottom: 1px solid var(--line); }
.deposit-rows > li:first-child { padding-top: 0; }
.deposit-rows > li:last-child { border-bottom: 0; padding-bottom: 0; }
.deposit-rows strong { font-family: var(--font-heading); color: var(--c-heading); font-variant-numeric: tabular-nums; }
.deposit-rows .text-end { display: grid; justify-items: end; gap: .2rem; }
.method-list { display: grid; gap: .6rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.method-list legend { float: none; font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 600; color: var(--c-heading); margin-bottom: .6rem; }
.method-list code { font-family: var(--font-body); font-size: var(--fs-sm); background: var(--c-surface-alt); padding: .35rem .6rem; border-radius: var(--radius-sm); overflow-wrap: anywhere; width: fit-content; max-width: 100%; }
@container main (min-width: 56rem) { .sticky-panel { position: sticky; top: calc(var(--header-h) + 1.25rem); } }

/* Security page */
.security-card { margin-bottom: 1rem; }
.security-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.security-card h2 { font-size: var(--fs-lg); margin: 0 0 .5rem; }
.security-card__head h2 { margin: 0; }
.security-card__lead { color: var(--c-text-muted); max-width: 62ch; }
.security-form { max-width: 26rem; }
.security-action { border-top: 1px solid var(--line); padding-block: .35rem; max-width: 26rem; }
.security-action summary { font-weight: 600; color: var(--c-heading); }
.security-action form { margin-block: .5rem .75rem; }
.enrol-steps { list-style: none; counter-reset: en; padding: 0; margin: 0; display: grid; gap: 1.5rem; max-width: 28rem; }
.enrol-steps > li { counter-increment: en; display: grid; gap: .6rem; padding-inline-start: 2.75rem; position: relative; }
.enrol-steps > li::before { content: counter(en, arabic-indic); position: absolute; inset-inline-start: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-heading); color: var(--c-surface); font-weight: 700; }
.enrol-qr { width: 12rem; padding: .6rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.enrol-qr svg { display: block; width: 100%; height: auto; }
.enrol-secret { display: block; margin-top: .4rem; font-size: 1rem; letter-spacing: .08em; overflow-wrap: anywhere; }
.code-input { font-family: var(--font-heading); font-size: var(--fs-xl); letter-spacing: .3em; text-align: center; max-width: 14rem; }
.auth-shell .code-input { max-width: none; }
.recovery-box { border-color: var(--c-warning); border-inline-start-width: 4px; margin-bottom: 1rem; }
.recovery-box h2 { font-size: var(--fs-lg); display: flex; gap: .5rem; align-items: center; }
.recovery-box h2 .icon { color: var(--c-warning); }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1.25rem; padding: .75rem 1rem; margin: .75rem 0 0; background: var(--c-surface-alt); border-radius: var(--radius); font-family: var(--font-heading); font-weight: 700; letter-spacing: .06em; max-width: 26rem; list-style-position: inside; }

/* Account tables become cards on phones */
.c-qty-inline { display: none; }
.table-cards .c-name { font-weight: 600; color: var(--c-heading); }
@media (max-width: 767.98px) {
  .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-cards, .table-cards tbody { display: block; }
  .table-cards tr {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center;
    padding: .95rem 1rem; border-bottom: 1px solid var(--line);
  }
  .table-cards tr:last-child { border-bottom: 0; }
  .table > :not(caption) > .table-cards tr > *, .table-cards td { display: block; padding: 0; border: 0; background: none; box-shadow: none; }

  /* Orders: name + status, then date + amount; the whole card opens the order */
  .table-cards--orders tr { grid-template-areas: "name status" "date amount"; }
  .table-cards--orders .c-name { grid-area: name; unicode-bidi: plaintext; text-align: start; }
  .table-cards--orders .c-qty-inline { display: inline; color: var(--c-text-muted); font-weight: 500; }
  .table-cards--orders .c-qty { display: none; }
  .table-cards--orders .c-status { grid-area: status; justify-self: end; }
  .table-cards--orders .c-date { grid-area: date; justify-self: start; color: var(--c-text-muted); }
  .table-cards--orders .c-amount { grid-area: amount; justify-self: end; font-weight: 700; color: var(--c-heading); }
  .table-cards--orders .c-link a { position: absolute; inset: 0; font-size: 0; background: none; padding: 0; margin: 0; border-radius: 0; }
  .table-cards--orders .c-link a:focus-visible { outline-offset: -3px; }
  .table-cards--orders tr:active { background: var(--c-surface-alt); }

  /* Ledger: type + amount, then the details, then date + balance after */
  .table-cards--ledger tr { grid-template-areas: "type amount" "reason reason" "date after"; }
  .table-cards--ledger .c-type { grid-area: type; font-weight: 600; color: var(--c-heading); }
  .table-cards--ledger .c-amount { grid-area: amount; justify-self: end; font-weight: 700; font-size: var(--fs-lg); }
  .table-cards--ledger .c-reason { grid-area: reason; color: var(--c-text-muted); }
  .table-cards--ledger .c-date { grid-area: date; justify-self: start; color: var(--c-text-muted); }
  .table-cards--ledger .c-after { grid-area: after; justify-self: end; font-size: var(--fs-sm); color: var(--c-text-muted); font-family: var(--font-body); font-weight: 400; }
  .table-cards--ledger .c-after::before { content: attr(data-label) ": "; }
  .table-cards--ledger .c-after span { color: var(--c-heading); font-weight: 600; }
}

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(3rem, 7vw, 4.5rem); border-top: 1px solid var(--line); color: var(--c-text-muted); font-size: var(--fs-sm); background: var(--c-surface); }
.site-footer__inner { display: grid; gap: 1.5rem; padding-block: 2rem 1.25rem; }
@media (min-width: 768px) { .site-footer__inner { grid-template-columns: 1fr auto; } .site-footer__base { grid-column: 1 / -1; } }
.site-footer__about strong { display: flex; align-items: center; gap: .5rem; font-family: var(--font-heading); font-size: var(--fs-lg); color: var(--c-heading); margin-bottom: .35rem; }
.site-footer__about p { margin: 0 0 .3rem; max-width: 50ch; display: flex; align-items: center; gap: .4rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; align-content: start; }
.site-footer__links a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .3rem .9rem; margin: 0; border-radius: var(--radius-pill);
  background: var(--c-background); border: 1px solid var(--line); color: var(--c-text); font-weight: 500;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.site-footer__links a:hover { background-size: 0 0; border-color: var(--line-strong); color: var(--c-heading); }
.site-footer__links a:active { transform: scale(.97); }
.site-footer a { color: var(--c-text-muted); text-decoration: none; }
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
/* Light/dark switch: an icon button in the header, beside the account chip */
.mode-toggle {
  margin-inline-start: auto; flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; padding: 0;
  border-radius: 50%; background: var(--c-surface); border: 1px solid var(--line); color: var(--c-heading);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.mode-toggle + .account-chip { margin-inline-start: 0; }
.mode-toggle > span { display: grid; place-items: center; }
.mode-toggle .icon { width: 1.2rem; height: 1.2rem; transition: transform var(--dur-slow) var(--ease-spring); }
.mode-toggle:hover { border-color: var(--line-strong); box-shadow: var(--card-shadow); }
.mode-toggle:hover .icon { transform: rotate(-25deg); }
.mode-toggle:active { transform: scale(.94); }
.mode-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .mode-toggle .icon-moon { display: grid; }
:root[data-theme="dark"] .mode-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] .mode-toggle .icon-moon { display: grid; }
  :root[data-theme="system"] .mode-toggle .icon-sun { display: none; }
}
:root.theme-switching, :root.theme-switching * { transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease) !important; }

/* ---------- Misc pages ---------- */
/* Policy pages: the owner's text set for reading */
.prose-page { max-width: 52rem; padding: clamp(1.25rem, 4vw, 2.5rem); }
.prose-page .page-title { margin-top: 0; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.prose { color: var(--c-text); line-height: 1.9; max-width: 68ch; }
.prose h2 { font-size: var(--fs-lg); margin: 1.75rem 0 .6rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.prose li { margin-bottom: .35rem; }
.prose li::marker { color: var(--c-primary-hover); }
.page-lead.prose { color: var(--c-text-muted); }
.page-lead.prose > :last-child { margin-bottom: 0; }

/* Contact page: one card per way to reach the store */
.contact-grid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.contact-card {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; height: 100%;
  background: var(--c-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--card-shadow);
  color: var(--c-text); text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.contact-card:hover { color: var(--c-text); border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--lift); }
.contact-card__icon { width: 2.9rem; height: 2.9rem; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: color-mix(in srgb, var(--c-primary) 18%, var(--c-surface)); color: var(--c-heading); }
.contact-card__icon .icon { width: 1.3rem; height: 1.3rem; }
.contact-card__body { display: grid; min-width: 0; line-height: 1.45; }
.contact-card__body small { color: var(--c-text-muted); font-size: var(--fs-xs); }
.contact-card__body strong { color: var(--c-heading); font-family: var(--font-heading); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.contact-facts { display: grid; gap: 1rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.contact-facts dt { display: flex; align-items: center; gap: .4rem; color: var(--c-text-muted); font-weight: 500; font-size: var(--fs-sm); margin-bottom: .2rem; }
.contact-facts dd { margin: 0; color: var(--c-heading); font-weight: 600; }

.site-footer__pages { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; grid-column: 1 / -1; }
.site-footer__pages a { font-weight: 600; color: var(--c-text); padding-block: .25rem; }
.auth-consent { margin: -.25rem 0 1rem; text-align: center; }

.maintenance-page { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: var(--c-background); }
.maintenance-card { max-width: 34rem; text-align: center; padding: clamp(1.75rem, 6vw, 2.75rem); animation: rise var(--dur-slow) var(--ease-out) backwards; }
.maintenance-card .badge-cone { width: 4.75rem; height: 4.75rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1.25rem; background: var(--bg-buttons); color: var(--fg-buttons); }
.maintenance-card .badge-cone .icon { width: 2rem; height: 2rem; }
.maintenance-logo { max-height: 3rem; width: auto; }
.error-shell { max-width: 36rem; min-height: 100vh; display: grid; align-content: center; }
.error-shell .panel { animation: rise var(--dur-slow) var(--ease-out) backwards; padding: clamp(1.75rem, 6vw, 2.75rem) !important; }
.error-code { font-family: var(--font-heading); font-weight: 800; font-size: clamp(3.5rem, 14vw, 5.5rem); line-height: 1; letter-spacing: -.02em; color: var(--c-heading); margin: 0 0 .75rem; }
.error-code::after { content: ""; display: block; width: 3rem; height: 4px; border-radius: 4px; margin: .9rem auto 0; background: var(--c-primary); }

.flash-stack { position: fixed; inset-inline: 0; top: calc(var(--header-h) + .75rem); z-index: 1050; display: grid; gap: .5rem; justify-items: center; pointer-events: none; padding-inline: 1rem; }
.flash-stack .alert { pointer-events: auto; max-width: 34rem; width: 100%; margin: 0; box-shadow: var(--lift); animation: drop var(--dur-slow) var(--ease-spring) backwards; }
.flash-stack .alert-success { background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }
.flash-stack .alert-danger { background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); }
.flash-stack .alert.is-leaving { animation: leave var(--dur-slow) var(--ease) forwards; }

.preview-ribbon { background: var(--c-warning); color: var(--c-background); text-align: center; font-size: .8rem; font-weight: 700; padding: .2rem; }

/* Bootstrap modal / dropdown (admin preview and any remaining dialogs) */
.modal-content, .dropdown-menu { background: var(--c-surface); color: var(--c-text); border: 1.5px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--lift); }
.modal-header, .modal-footer { border-color: var(--line); }
.modal.fade .modal-dialog { transform: translateY(12px) scale(.98); transition: transform var(--dur-slow) var(--ease-out); }
.modal.show .modal-dialog { transform: none; }
.modal-backdrop { --bs-backdrop-bg: var(--c-heading); }
.dropdown-item { color: var(--c-text); border-radius: var(--radius-sm); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--c-surface-alt); color: var(--c-heading); }
.btn-close { filter: none; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.receipt__stamp { display: none; }
.receipt__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 1rem; background: linear-gradient(90deg, var(--line) 50%, transparent 0) 0 0 / 10px 1.5px repeat-x; }
.receipt__total strong { font-family: var(--font-heading); font-size: var(--fs-xl); color: var(--c-heading); }

/* ---------- Store shell: sidebar + content ----------
   Wide screens: a full-height sidebar on the start edge and the page content
   centred in the space beside it. Phones: the sidebar is a drawer opened from
   the header's menu button (store.js), over a dimmed backdrop.
   body is a flex column, so the shell needs an explicit width to fill it. */
.shell { width: 100%; flex: 1 0 auto; }
/* Inside the shell, page content is centred and capped for reading */
.shell__main .container-store { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.shell__main .hero { padding-inline: var(--gutter); }
.shell__main .hero > .container-store { max-width: calc(var(--content-max) - 2 * var(--gutter)); padding-inline: clamp(1.25rem, 5vw, 3rem); }
@media (min-width: 992px) {
  .shell:not(.shell--bare) { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: stretch; }
  .nav-toggle { display: none !important; }
}
.shell__main { min-width: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); }
.shell__main > main { flex: 1 0 auto; container: main / inline-size; }
.shell__main > main:focus { outline: none; }
/* Layout switches inside the content area follow the space beside the
   sidebar (a container query), not the screen width. */
@container main (max-width: 56rem) {
  .row > [class*="col-lg-"] { flex: 0 0 auto; width: 100%; max-width: 100%; }
}

.sidenav {
  display: flex; flex-direction: column; gap: 1.1rem; padding: 1.25rem .85rem 1.25rem;
  background: var(--c-surface); border-inline-end: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
@media (min-width: 992px) {
  .sidenav { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); }
}
@media (max-width: 991.98px) {
  .sidenav {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 1040; width: min(19rem, 86vw);
    border: 0; box-shadow: 0 0 48px color-mix(in srgb, var(--c-heading) 30%, transparent);
    transform: translateX(100%); visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
    padding-top: calc(1.25rem + env(safe-area-inset-top));
  }
  :root[dir="ltr"] .sidenav { transform: translateX(-100%); }
  .nav-open .sidenav { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out); }
  .nav-open { overflow: hidden; }
  /* Drawer links arrive one after another as it slides in */
  .nav-open .sidenav__group { animation: rise var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(80ms * var(--motion, 1)); }
  .nav-open .sidenav__group + .sidenav__group { animation-delay: calc(130ms * var(--motion, 1)); }
}
.sidenav-backdrop { position: fixed; inset: 0; z-index: 1035; background: var(--scrim); animation: fade var(--dur-slow) var(--ease) backwards; }

.sidenav__top { display: grid; gap: .75rem; }
.sidenav__who { display: flex; align-items: center; gap: .7rem; min-width: 0; padding-inline: .35rem; }
.sidenav__who > span:last-child { display: grid; min-width: 0; line-height: 1.4; }
.sidenav__who strong { color: var(--c-heading); font-family: var(--font-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav__who small { color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; font-size: var(--fs-xs); }
.sidenav__avatar { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 22%, var(--c-surface)); color: var(--c-heading); font-family: var(--font-heading); font-weight: 800; }
/* The balance is money: the one ink block in the sidebar, with a gold top-up */
.sidenav__balance {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: .1rem; padding: .95rem 1rem; border-radius: var(--radius-lg); text-decoration: none; background: var(--ink); color: var(--on-ink);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.sidenav__balance::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -1.75rem; top: -1.75rem; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: repeating-radial-gradient(circle, var(--ink-line) 0 1px, transparent 1px 10px); transition: transform var(--dur-slow) var(--ease-out); }
.sidenav__balance:hover::after { transform: rotate(30deg) scale(1.1); }
.sidenav__balance span { color: var(--on-ink-muted); font-size: var(--fs-xs); }
.sidenav__balance strong { font-family: var(--font-heading); font-size: var(--fs-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.sidenav__balance small { color: var(--c-primary); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: .3rem; }
.sidenav__balance small::before { content: "+"; display: grid; place-items: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); font-weight: 800; line-height: 1; }
.sidenav__balance:hover { color: var(--on-ink); box-shadow: var(--lift); }
.sidenav__balance:active { transform: scale(.98); }
.sidenav__guest { display: grid; gap: .55rem; padding: 1rem; border-radius: var(--radius-lg); background: var(--c-background); border: 1px solid var(--line); }
.sidenav__guest p { margin: 0 0 .2rem; color: var(--c-text); font-size: var(--fs-sm); line-height: 1.6; }
.sidenav__guest .btn-buy { min-height: 2.6rem; font-size: var(--fs-sm); padding-inline: 1rem; }
.sidenav__register { text-align: center; font-size: var(--fs-sm); width: fit-content; justify-self: center; }

.sidenav__group { display: grid; gap: .15rem; }
.sidenav__heading { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted); margin: .35rem .75rem .3rem; }
.sidenav__group a, .sidenav__logout button {
  position: relative; display: flex; align-items: center; gap: .65rem; min-height: 2.6rem; padding: .4rem .75rem; border-radius: var(--radius);
  color: var(--c-text); text-decoration: none; background: none; border: 0; width: 100%; text-align: start; font: inherit; font-weight: 600;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidenav__group a > .icon, .sidenav__logout .icon { color: var(--c-text-muted); transition: color var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.sidenav__group a > span:not(.sidenav__cat-icon) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidenav__group a small { color: var(--c-text-muted); font-weight: 500; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; min-width: 1.5rem; padding: 0 .4rem; border-radius: var(--radius-pill); background: var(--c-background); text-align: center; }
.sidenav__group a:hover, .sidenav__logout button:hover { background: var(--hover-bg); color: var(--c-heading); }
.sidenav__group a:hover > .icon { color: var(--c-heading); transform: scale(1.1); }
.sidenav__logout button:hover, .sidenav__logout button:hover .icon { color: var(--c-danger); }
/* Current page: a soft gold fill and a gold tab on the inline-start edge */
.sidenav__group a::before { content: ""; position: absolute; inset-inline-start: -.85rem; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--c-primary); transform: scaleY(0); transition: transform var(--dur) var(--ease-out); }
.sidenav__group a.is-active { background: color-mix(in srgb, var(--c-primary) 16%, var(--c-surface)); color: var(--c-heading); }
.sidenav__group a.is-active::before { transform: none; }
.sidenav__group a.is-active > .icon { color: var(--c-heading); }
.sidenav__group a.is-active small { background: var(--c-surface); }
.sidenav__cat-icon { width: 1.85rem; height: 1.85rem; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; background: var(--c-surface-alt); color: var(--c-heading); }
.sidenav__cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.sidenav__cat-icon .icon { width: .95rem; height: .95rem; }
.sidenav__logout { margin: auto 0 0; padding-top: .5rem; border-top: 1px solid var(--line); }
.kyc-form { display: grid; gap: .9rem; max-width: 30rem; } .kyc-field input[type="file"] { min-height: 3rem; padding-top: .6rem; }