/* =====================================================================
   ASHES ROLEPLAY — Tebex webstore theme
   Ported from the ASHES site (theme.css + sections.css).

   Loaded AFTER shared.css and the generic/custom theme, so this file is
   the last word on every rule it touches. Exo's structural classes are
   kept exactly as-is — main.js binds to .site-navigation, .menu,
   .toggle-navigation, .open-basket, .add, .subscribe, .quantity-field,
   .product-actions[data-package] and .site — and are restyled rather
   than replaced.

   The accent is the city accent #f97316, the same orange every in-game
   UI uses. Gold #fbbf24 is off the logo's wings and is used sparingly,
   for prices only — a highlight, not a second theme.
   ===================================================================== */

/* --- tokens --------------------------------------------------------- */
:root {
  --ac: #f97316;
  --ac2: #c2410c;
  --ac-deep: #431407;
  --ac-soft: #fed7aa;
  --gold: #fbbf24;
  --gold-dim: #b45309;

  /* Warm neutrals — grey with the red channel lifted, so every surface
     sits in the same fire-lit key rather than going cold. */
  --bg: #0a0706;
  --bg-2: #100b09;
  --surface: #171110;
  --surface-2: #1f1815;
  --line: #2c2320;
  --line-soft: rgba(249, 115, 22, 0.14);

  --fg: #f7f0ec;
  --fg-2: #c8b9b1;
  --fg-3: #8d7d75;

  --live: #ef4444;
  --good: #34d399;
  --warn: #f59e0b;

  --font-ui: 'Chakra Petch', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-ui);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;

  --shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.75);
  --shadow-ac: 0 0 0 1px var(--line-soft), 0 20px 60px -20px rgba(249, 115, 22, 0.35);

  --wrap: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Exo's own variables, repointed at the ASHES palette so any component
     we have not restyled by hand still lands in the right key. */
  --color-primary: #f97316;
  --color-primary-hover: #fb8a3c;
  --color-primary-text: #180d06;
  --color-primary-text-hover: #180d06;
  --color-background: #0a0706;
  --color-text: #f7f0ec;
}

/* The store commits to one visual world — a dark, fire-lit city — rather
   than shipping a light mode, so the tokens are pinned against a
   viewer-side theme toggle flipping them. */
:root[data-theme='light'],
:root[data-theme='dark'] { color-scheme: dark; }

/* --- base ----------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background: var(--bg) !important;
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A single fixed ember wash behind everything. Fixed rather than
   per-section so scrolling moves the content past the light. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(249, 115, 22, 0.16), transparent 70%),
    radial-gradient(700px 500px at 100% 12%, rgba(194, 65, 12, 0.10), transparent 70%),
    radial-gradient(800px 600px at 0% 55%, rgba(120, 40, 10, 0.10), transparent 70%);
}

/* Film grain + vignette. A flat dark page reads as an empty void rather
   than a lit room — the single biggest reason a dark layout looks
   unfinished. Grain gives the black a surface; the vignette gives the
   viewport an edge, so content sits IN something instead of floating.
   Self-contained SVG turbulence: no image request, tiles at any size. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background-image:
    radial-gradient(135% 105% at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
  background-size: 100% 100%, 180px 180px;
}

/* height:auto is load-bearing. width/height attributes on an <img> are
   presentational hints; setting only `width` in CSS overrides the width
   hint but leaves the HEIGHT hint, so the image renders stretched. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--ac); color: #17100c; }

.site { position: relative; z-index: 1; }

/* --- shared primitives ---------------------------------------------- */
.a-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 1;
}

.a-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ac);
  margin-bottom: 16px;
}
.a-kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ac));
}

.a-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.02em;
  margin: 0;
}

.a-lede {
  margin-top: 14px;
  color: var(--fg-2);
  font-size: 17px;
  max-width: 62ch;
}

.a-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-2);
}
.a-badge-on { border-color: rgba(52, 211, 153, 0.35); color: #86efac; }
.a-badge-on .dot { background: var(--good); }

.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot-pulse { animation: dotPulse 2s ease-out infinite; }
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

/* --- buttons (Exo's classes, ASHES look) ---------------------------- */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px !important;
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  text-transform: none;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease),
              border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-tertiary:hover { transform: translateY(-2px); }
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--ac), var(--ac2)) !important;
  color: #180d06 !important;
  box-shadow: 0 10px 30px -10px rgba(249, 115, 22, 0.7);
}
.btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(249, 115, 22, 0.85); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--line) !important;
  color: var(--fg) !important;
}
.btn-secondary:hover { border-color: var(--ac) !important; background: rgba(249, 115, 22, 0.08) !important; }

.btn-tertiary {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--fg-2) !important;
}
.btn-tertiary:hover { color: var(--fg) !important; background: rgba(255, 255, 255, 0.05) !important; }

[disabled], [disabled]:hover { opacity: 0.45; transform: none !important; cursor: not-allowed; }

/* --- header --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: rgba(10, 7, 6, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* Transparent over the hero, solid once you leave it — so the logo sits
   on the artwork at rest and stays legible over content on scroll. */
.page-index .site-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.page-index .site-header.stuck {
  background: rgba(10, 7, 6, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.site-header-inner {
  display: flex !important;
  align-items: center;
  gap: 28px;
  /* shared.css sizes this row for its own three-row header; ASHES is a
     single 74px bar, and the value has to be forced to win. */
  height: 74px !important;
  min-height: 0 !important;
  flex-wrap: nowrap !important;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto !important;
  padding-inline: 24px;
}

/* shared.css absolutely positions .site-title and .user-actions, and puts a
   68px side margin on the inner row — which is what centres the brand.
   Undo all three so the flex row we want (brand · nav · actions) applies. */
.site-title {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  order: 1;
  flex: none;
  font-size: inherit;
}
.site-title a { display: flex; align-items: center; gap: 12px; }
.site-title img { height: 42px; width: auto; }

/* The wordmark lockup, in markup, next to the uploaded mark. */
.a-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.a-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
}
.a-brand-sub {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ac);
}

.site-header .actions {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  order: 4;
}
.site-header .user-actions {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  order: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.site-header .log-in { order: 3; flex: none; }
.site-header .info { order: 3; }

/* Server / Discord info chips */
.site-header .info {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 12.5px;
  color: var(--fg-2);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.site-header .info:hover { border-color: var(--ac); background: rgba(249, 115, 22, 0.08); }
.site-header .info .image { height: 16px; width: auto; opacity: 0.85; }
.site-header .info .title { font-weight: 600; color: var(--fg); }
.site-header .info .action { color: var(--fg-3); font-size: 11.5px; }

.site-sale-banner {
  margin: 0;
  padding: 9px 24px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-sale-banner-bg, var(--ac-deep));
  color: var(--color-sale-banner-text, var(--ac-soft));
  border-top: 1px solid var(--line-soft);
}

/* --- navigation ----------------------------------------------------- */
/* Static and auto-width: shared.css sizes this for its own layout. */
.site-navigation {
  position: static !important;
  order: 2;
  margin: 0 0 0 auto !important;
  width: auto !important;
}
.site-navigation .menu,
.navigation-list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navigation-list > li > a {
  display: block;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.navigation-list > li > a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.navigation-list > li > a.link-active { color: var(--ac); background: rgba(249, 115, 22, 0.10); }

/* Sub-categories */
.navigation-list li ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.navigation-list li ul a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--fg-2); }
.navigation-list li ul a:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); }

.toggle-navigation { display: none; }

@media (max-width: 1080px) {
  /* The desktop rule above pins position:static so shared.css cannot
     absolutely position the row. That !important also outranks anything
     unqualified in here, so the drawer has to restate its own. */
  .site-navigation {
    position: fixed !important;
    inset: 74px 0 auto 0 !important;
    width: auto !important;
    margin: 0 !important;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    background: rgba(10, 7, 6, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    padding: 12px;
    margin: 0;
    display: none;
    z-index: 59;
  }
  .site-navigation.open,
  .is-navigation-open .site-navigation { display: block !important; }
  .navigation-list { flex-direction: column; gap: 0; width: 100%; }
  .navigation-list > li { width: 100%; }
  .navigation-list > li > a { padding: 14px 16px; border-radius: var(--r-sm); }
  .toggle-navigation { display: block; margin-left: auto; order: 4; }
  .site-header .info { display: none; }
}

/* Below 1080px the row holds brand, actions and the menu button — all
   flex:none. Because body has overflow-x:hidden the excess is CLIPPED
   rather than scrollable, and the menu button is what falls off the
   right edge. So: let the actions cluster shrink, pin the menu button. */
@media (max-width: 700px) {
  .site-header-inner { gap: 14px; }
  .site-header .user-actions { flex: 0 1 auto; min-width: 0; }
  .toggle-navigation { flex: none; }
  .site-title { flex: 0 1 auto; min-width: 0; }
  .site-title img { height: 38px; }
}
@media (max-width: 400px) { .a-brand-sub { display: none; } }

/* --- hero (index only) ---------------------------------------------- */
.a-hero {
  position: relative;
  margin-top: -74px;
  padding: 150px 0 92px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* No video plate on Tebex — the clip cannot be uploaded as an asset — so
   the plate is built from gradients in the same key the footage sat in:
   a warm core over near-black, fading into the page with no seam. */
.a-hero-plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(249, 115, 22, 0.30), transparent 72%),
    radial-gradient(38% 34% at 50% 30%, rgba(251, 191, 36, 0.18), transparent 70%),
    radial-gradient(90% 60% at 50% 0%, rgba(194, 65, 12, 0.22), transparent 75%),
    linear-gradient(180deg, #16100d 0%, #0d0908 55%, var(--bg) 100%);
}
.a-hero-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 42%, rgba(10, 7, 6, 0.25), rgba(10, 7, 6, 0.78) 72%);
}

.a-hero-content { position: relative; z-index: 1; }

.a-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  margin-bottom: 26px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(10, 7, 6, 0.55);
  backdrop-filter: blur(8px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ac-soft);
}
.a-hero-eyebrow .dot { background: var(--ac); }

/* Ember field. Each span is one rising particle; the delays are set
   inline so the field is irregular rather than a visible loop. */
.a-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.a-embers span {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: rise linear infinite;
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  12%  { opacity: var(--o, 0.85); }
  100% { transform: translate3d(24px, -78vh, 0) scale(0.35); opacity: 0; }
}

/* Sized down hard on purpose. Larger than this and the mark eats the whole
   first screen, and everything under it reads as an afterthought. */
.a-hero-logo {
  width: min(400px, 68vw);
  margin: 0 auto;
  filter: drop-shadow(0 18px 44px rgba(249, 115, 22, 0.4))
          drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
  animation: logoIn 1.2s var(--ease) both;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.a-hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.9vw, 17px);
  font-weight: 500;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--ac-soft);
  margin: -4px 0 0;
  /* letter-spacing adds a trailing gap after the last letter, shifting the
     line left of true centre; the indent pays it back. */
  text-indent: 0.46em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.a-hero-blurb {
  margin: 22px auto 0;
  max-width: 54ch;
  color: var(--fg-2);
  font-size: 17px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.a-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* A bordered strip rather than numbers floating in space — it gives the
   hero a definite bottom edge so the section does not dissolve. */
.a-hero-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 56px auto 0;
  max-width: 720px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(10, 7, 6, 0.5);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.a-hero-stat {
  flex: 1 1 150px;
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.a-hero-stat:last-child { border-right: 0; }
.a-hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.a-hero-stat span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

@media (max-width: 700px) { .a-hero { padding: 120px 0 64px; } }

/* --- page sections -------------------------------------------------- */
.a-section { padding: 76px 0 64px; position: relative; z-index: 1; }
.a-section + .a-section > .a-wrap::before {
  content: '';
  position: absolute;
  top: -64px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.a-section-head { margin-bottom: 40px; max-width: 720px; }

/* --- content shell -------------------------------------------------- */
.site-content {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 40px 24px 0;
  gap: 32px;
}
.page-index .site-content { padding-top: 0; }

.text-content { color: var(--fg-2); }
.text-content h1, .text-content h2, .text-content h3 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 14px;
}
.text-content h2 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.02em; }
.text-content a { color: var(--ac); }
.text-content a:hover { text-decoration: underline; }
.text-content ul, .text-content ol { padding-left: 20px; }
.text-content li { margin-bottom: 6px; }

.category-description { margin-bottom: 34px; }

/* --- product grid --------------------------------------------------- */
.store-products-grid,
.store-products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
}
@media (max-width: 560px) {
  .store-products-grid,
  .store-products-list { grid-template-columns: 1fr; }
}

.store-product {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}
.store-product:hover { transform: translateY(-6px); border-color: rgba(249, 115, 22, 0.45); }

/* A one-pixel warm rim along the top edge — light catching the lip of the
   panel, so the cards do not look like flat rectangles. */
.store-product::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.55), transparent);
  z-index: 2;
}
/* A wash behind each card that only appears on hover. */
.store-product::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 200px;
  background: radial-gradient(closest-side, rgba(249, 115, 22, 0.30), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.store-product:hover::after { opacity: 1; }

.store-product > * { position: relative; z-index: 1; }

.store-product .image-link { display: block; margin: -22px -20px 18px; }
.store-product .image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.store-product .image-default {
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(closest-side, rgba(249, 115, 22, 0.18), transparent),
    linear-gradient(150deg, var(--surface-2), #0d0908);
  border-bottom: 1px solid var(--line);
}

.store-product .product-title {
  font-family: var(--font-display);
  font-size: 20px;
  margin: 0;
  color: var(--fg);
}
.store-product .product-title a { color: inherit; }
.store-product .product-title a:hover { color: var(--ac); }

.countdown {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  vertical-align: middle;
}

/* --- product actions ------------------------------------------------ */
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.product-actions .price {
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.product-actions .price strong { font-weight: 700; }
.product-actions .price .discount {
  color: var(--fg-3);
  font-size: 15px;
  margin-right: 8px;
}
.product-actions .price .discount strong { font-weight: 500; }

.product-actions .wide { width: 100%; }
.product-actions .half { flex: 1 1 calc(50% - 5px); }

.quantity-field {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.quantity-field .open-basket {
  flex: 1;
  background: none;
  border: 0;
  color: var(--fg-2);
  font-size: 13.5px;
  font-weight: 600;
}
.quantity-field .adjust {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--fg) !important;
}
.quantity-field .adjust:hover { background: rgba(249, 115, 22, 0.18) !important; }
.quantity-field input.quantity {
  width: 46px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--fg);
  font: 600 14px var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.no-products {
  padding: 34px;
  text-align: center;
  color: var(--fg-3);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
}

/* --- single package ------------------------------------------------- */
.store-product-full {
  display: block;
  padding: 30px;
}
.store-product-full:hover { transform: none; border-color: var(--line); }
.store-product-full::after { display: none; }
.store-product-full .product-title {
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.store-product-full .image,
.store-product-full .image-default {
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.store-product-full .descr { margin-top: 24px; }

/* --- home category tiles -------------------------------------------- */
.site-home-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: 24px;
}
.site-home-categories .category {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  font-family: var(--font-display);
  font-size: 16px;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}
.site-home-categories .category:hover { transform: translateY(-5px); border-color: rgba(249, 115, 22, 0.45); }
.site-home-categories .image { border-radius: var(--r); aspect-ratio: 16 / 10; object-fit: cover; }
.site-home-categories .image-default {
  border-radius: var(--r);
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(closest-side, rgba(249, 115, 22, 0.18), transparent),
    linear-gradient(150deg, var(--surface-2), #0d0908);
}

/* --- sidebar / widgets ---------------------------------------------- */
.widget,
.sidebar-module {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.widget::before,
.sidebar-module::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.55), transparent);
}
.widget h3, .sidebar-module h3, .widget .title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac);
  margin: 0 0 14px;
}

/* --- trust strip ---------------------------------------------------- */
.a-trust {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  font-size: 13px;
  color: var(--fg-3);
}
.a-trust span { display: inline-flex; align-items: center; gap: 8px; }
.a-trust svg { color: var(--ac); flex: none; }

/* --- footer --------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 52px 0 40px;
  margin-top: 64px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.45));
  position: relative;
  z-index: 1;
}
.site-footer-inner {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.a-footer-top { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.a-footer-brand { display: flex; align-items: center; gap: 12px; }
.a-footer-brand img { height: 46px; width: auto; }
.a-footer-blurb { font-size: 12.5px; color: var(--fg-3); max-width: 44ch; margin-top: 12px; }
.a-footer-links { display: flex; gap: 22px; flex-wrap: wrap; margin-left: auto; list-style: none; padding: 0; }
.a-footer-links a { font-size: 14px; color: var(--fg-2); }
.a-footer-links a:hover { color: var(--ac); }

.site-footer .we-accept {
  display: flex;
  gap: 14px;
  align-items: center;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  opacity: 0.5;
}
.site-footer .we-accept img { height: 20px; width: auto; }

.site-footer .copyright {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--fg-3);
}

/* --- basket / popups ------------------------------------------------ */
.popup, .basket-popup, .popup-content, .basket-popup-content {
  background: var(--surface) !important;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.basket-item { border-bottom: 1px solid var(--line); }
.toaster {
  background: var(--surface) !important;
  border: 1px solid var(--ac) !important;
  color: var(--fg) !important;
  border-radius: var(--r) !important;
}

input, select, textarea {
  font-family: var(--font-ui);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg);
}
input:focus, select:focus, textarea:focus { border-color: var(--ac); outline: none; }

/* --- scrollbars ----------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--ac2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ac2); background-clip: content-box; }

/* --- reveal on scroll ----------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Motion is decoration everywhere on this page — the reveals, the embers,
   the pulse. None of it carries meaning, so all of it goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* --- inner pages ------------------------------------------------------
   Category, package and CMS pages share the index's section rhythm but
   sit under a solid header rather than behind a transparent one. */
.a-page { padding-top: 56px; }
.a-page + .a-page > .a-wrap::before { display: none; }

.page-category .a-section-head,
.page-cms .a-section-head { margin-bottom: 32px; }

/* Long-form reading — rules, story, policies. A measure cap, because a
   1240px line length is unreadable however good the type is. */
.a-doc {
  display: block;
  padding: 34px 38px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  max-width: 82ch;
  font-size: 15.5px;
  line-height: 1.75;
}
.a-doc::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.55), transparent);
}
.a-doc h2, .a-doc h3 { margin-top: 30px; }
.a-doc h2:first-child, .a-doc h3:first-child { margin-top: 0; }
.a-doc hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
@media (max-width: 600px) { .a-doc { padding: 24px 20px; } }

/* --- checkout ---------------------------------------------------------
   Tebex owns the flow; this only puts it in the same room as the rest. */
.page-checkout .site-content,
.page-username .site-content,
.page-options .site-content { padding-top: 48px; }

.checkout-form, .checkout-panel, .basket-summary, .store-checkout {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* The payment marks are a trust cue, not a feature — full-strength colour
   logos pull the eye straight to the bottom of the page. */
.site-footer .we-accept img { filter: grayscale(1); opacity: 0.75; }


/* --- card internals, forced ------------------------------------------
   shared.css lays .store-product out as a row for its list display and as
   a differently-proportioned tile for its grid. ASHES has exactly one card
   — image, title, price, full-width action — so it is pinned here rather
   than left to whichever display type a category happens to be set to. */
.store-products-grid .store-product,
.store-products-list .store-product {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left !important;
  min-height: 0;
}
.store-products-grid .store-product .image-link,
.store-products-list .store-product .image-link {
  display: block !important;
  width: auto !important;
  flex: none !important;
  margin: -22px -20px 18px !important;
}
.store-products-grid .store-product .image,
.store-products-grid .store-product .image-default,
.store-products-list .store-product .image,
.store-products-list .store-product .image-default {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
}
.store-products-grid .store-product .product-title,
.store-products-list .store-product .product-title {
  width: auto !important;
  margin: 0 0 2px !important;
  text-align: left !important;
}
.store-products-grid .product-actions,
.store-products-list .product-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  width: auto !important;
  margin-top: auto !important;
  padding-top: 16px;
}
/* The price is the card's second headline; it gets its own line above the
   action rather than competing with the button for horizontal room. */
.store-products-grid .product-actions .price,
.store-products-list .product-actions .price { width: 100% !important; margin: 0 0 12px !important; }
.store-products-grid .product-actions .wide,
.store-products-list .product-actions .wide { width: 100% !important; flex: 1 0 100% !important; }
.store-products-grid .product-actions .half,
.store-products-list .product-actions .half { flex: 1 1 calc(50% - 5px) !important; }


/* --- package art ------------------------------------------------------
   The tier emblems and coin marks are cut-out badge art, not photography.
   'cover' crops the wings and the rim off them, so the art is contained
   against the card's own dark plate instead — the same treatment the site
   gives .tier-badge. */
.store-products-grid .store-product .image,
.store-products-list .store-product .image,
.store-product-full .image {
  object-fit: contain !important;
  background: radial-gradient(closest-side, rgba(249, 115, 22, 0.10), transparent),
              linear-gradient(150deg, var(--surface-2), #0d0908);
  padding: 10px;
}


/* --- store tiles ------------------------------------------------------
   The site's #store section is a row of tiles — icon plate, name, blurb,
   button — that hand you on to the thing you actually buy. Tebex's index
   exposes categories but not their packages, so the categories ARE those
   tiles, and they are built to read the same way. */
.a-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
  margin-top: 34px;
}
@media (max-width: 560px) { .a-tiles { grid-template-columns: 1fr; } }

.a-tile {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease);
}
.a-tile:hover { transform: translateY(-6px); border-color: rgba(249, 115, 22, 0.45); }
.a-tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.55), transparent);
}
/* The hover wash, same as the product cards. */
.a-tile::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 200px;
  background: radial-gradient(closest-side, rgba(249, 115, 22, 0.30), transparent);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.a-tile:hover::after { opacity: 1; }
.a-tile > * { position: relative; z-index: 1; }

.a-tile-art {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--surface-2), #0d0908);
  border: 1px solid var(--line);
  margin-bottom: 18px;
  overflow: hidden;
  flex: none;
}
.a-tile-art img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* An empty plate still reads as a deliberate slot rather than a gap. */
.a-tile-art:empty::before,
.a-tile-art:not(:has(img))::before {
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--ac);
  opacity: 0.65;
}

.a-tile-name { font-family: var(--font-display); font-size: 21px; margin: 0; }
.a-tile-blurb { font-size: 14px; color: var(--fg-2); margin-top: 12px; flex: 1; }
.a-tile-cta { margin-top: 18px; align-self: flex-start; }


/* --- homepage package hosts -------------------------------------------
   Empty until ashes.js fills them, so they take no space and draw no
   border while the fetch is in flight. */
.a-grid:empty { display: none; }
.a-grid { margin-top: 8px; }

.a-note {
  margin-top: 26px;
  font-size: 13.5px;
  color: var(--fg-3);
  max-width: 76ch;
}

/* --- story ------------------------------------------------------------
   Beats alternate either side of a lit rail — the thread the whole
   section hangs off. Below 860px they stack and the rail moves left. */
.a-beats { display: grid; gap: 4px; position: relative; }

.a-beat {
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: center;
}
.a-beat-body { padding: 30px 0; }
.a-beat h3 {
  font-family: var(--font-display);
  font-size: 25px;
  margin: 0 0 12px;
  color: var(--fg);
}
.a-beat p { color: var(--fg-2); font-size: 16px; margin: 0; }

.a-beat-rail { grid-column: 2; position: relative; height: 100%; display: grid; place-items: center; }
.a-beat-rail::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.a-beat-node {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ac);
  box-shadow: 0 0 0 6px rgba(249, 115, 22, 0.1), 0 0 22px rgba(249, 115, 22, 0.55);
  position: relative;
  z-index: 1;
}

.a-beat:nth-child(odd) .a-beat-body { grid-column: 1; text-align: right; padding-right: 34px; }
.a-beat:nth-child(even) .a-beat-body { grid-column: 3; padding-left: 34px; }

@media (max-width: 860px) {
  .a-beat { grid-template-columns: 32px 1fr; }
  .a-beat-rail { grid-column: 1; }
  .a-beat:nth-child(odd) .a-beat-body,
  .a-beat:nth-child(even) .a-beat-body {
    grid-column: 2;
    text-align: left;
    padding: 24px 0 24px 22px;
  }
}

.a-timeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 64px;
  border-top: 1px solid var(--line);
}
@media (max-width: 980px) { .a-timeline { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .a-timeline { grid-template-columns: repeat(2, 1fr); } }

.a-tl-item { padding: 22px 18px; border-right: 1px solid var(--line); position: relative; }
.a-tl-item:last-child { border-right: 0; }
/* The top rule draws itself in on hover — the only motion in the section,
   and it points along the direction you read. */
.a-tl-item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--ac);
  transition: width 0.5s var(--ease);
}
.a-tl-item:hover::before { width: 100%; }
.a-tl-year {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ac);
}
.a-tl-label { font-size: 16px; font-weight: 600; margin-top: 8px; }
.a-tl-note { font-size: 13px; color: var(--fg-3); margin-top: 5px; }