/* ===========================================================================
   BOROUGHS RZ STORE — design system
   ---------------------------------------------------------------------------
   Layout and rhythm rebuild Coldfire's "Cobalt" Tebex theme; the colour system
   is ours (the in-city HUD violet, not Cobalt's teal).

   Order of this file:
     1. Tokens        2. Reset / base    3. Primitives (buttons, cards, pills)
     4. Hero          5. Shell + sidebar 6. Main panel + package grid
     7. Modal         8. Drawer          9. Flow + toasts    10. Footer
    11. Responsive   12. Motion / a11y

   RULES THIS FILE KEEPS
   - No raw colour literals outside §1. Everything references a token.
   - Only transform / opacity are animated. Nothing animates width, height,
     top, left or margin.
   - Named for purpose (`--accent`, `btn--primary`), never appearance.
   - Dark only — this is a game storefront, there is no light mode to drift.
   =========================================================================== */

/* =========================== 1. TOKENS ================================== */
:root {
  /* Surface ramp — near-black up to the raised card */
  --surface-0:  #0a0810;   /* page */
  --surface-1:  #121019;   /* panels, sidebar cards */
  --surface-2:  #191624;   /* package cards, inputs */
  --surface-3:  #221d31;   /* hover / raised */
  --surface-4:  #2b2440;   /* active chip */
  --line:       #2b2538;
  --line-soft:  #211c2d;

  /* Text ramp — three steps, nothing in between */
  --text-1:     #f2eff9;
  --text-2:     #b6adcb;
  --text-3:     #7b7391;

  /* ONE accent. Cobalt's teal role maps to the Boroughs violet. */
  --accent:        #6e28e6;
  --accent-bright: #8647f7;
  --accent-soft:   #b48cff;
  --accent-mid:    #c8b4ff;
  --accent-pale:   #dbd2f7;
  --accent-glow:   rgba(110, 40, 230, .38);

  /* Semantic — these mean the same thing everywhere, never re-themed */
  --gold:    #ffc85a;   /* price + featured, used sparingly */
  --danger:  #ff5a5a;
  --ok:      #4ade80;

  /* Type scale (1.25) */
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  17px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* Spacing scale (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 280ms;
  --ease:     cubic-bezier(.2, .7, .3, 1);

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .6);

  --shell-w: 1180px;
  --side-w:  270px;
  --hero-h:  340px;
}

/* ========================= 2. RESET / BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;           /* hero bleeds; the page never scrolls sideways */
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

a { color: var(--accent-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-mid); }

/* One visible focus ring for the whole site. Never removed, only restyled. */
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 100;
  background: var(--accent); color: #fff;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-sm);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(72px); color: #fff; }

[hidden] { display: none !important; }

/* ========================== 3. PRIMITIVES =============================== */

/* ---- Button ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 9px var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface-4); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-bright); }
.btn--primary[disabled]:hover { background: var(--accent); }

.btn--gold { background: transparent; border-color: var(--gold); color: var(--gold); }
.btn--gold:hover { background: rgba(255, 200, 90, .12); }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text-1); }

.btn--block { width: 100%; }
.btn--sm { padding: 6px var(--sp-3); font-size: var(--fs-xs); }

/* Transient success state after add-to-cart — feedback for every click. */
.btn--added { background: var(--ok); color: #06230f; }
.btn--added:hover { background: var(--ok); }

/* ---- Card ---- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card__title {
  font-size: var(--fs-md); font-weight: 800;
  color: var(--accent-soft);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: var(--sp-3);
}

/* ---- Pill (hero bar) ---- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-pill);
  background: rgba(14, 11, 22, .72);
  backdrop-filter: blur(10px);
  color: var(--text-1);
  font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.pill:hover { background: rgba(110, 40, 230, .55); border-color: var(--accent-soft); color: #fff; }
.pill:active { transform: translateY(1px); }
.pill__ic { width: 16px; height: 16px; flex: none; }
.pill__badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-size: var(--fs-xs); font-weight: 800;
  transition: transform var(--dur) var(--ease);
}
.pill__badge--bump { transform: scale(1.35); }

/* ============================= 4. HERO ================================== */
.hero {
  position: relative;
  min-height: var(--hero-h);
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
}
/* --hero-bg is set as an inline custom property on <html> ONLY when a leader
   has overridden the hero image in the staff panel; otherwise the fallback in
   this var() is the shipped art. Keeping the default here rather than in JS
   means the hero paints correctly before a single line of script runs. */
.hero__bg {
  position: absolute; inset: -4%;
  background: var(--hero-bg, url('assets/hero-bg.webp?v=20261107e')) center/cover no-repeat, var(--surface-0);
  filter: blur(3px);
  transform: scale(1.06);
  z-index: -2;
}
/* Two jobs: keep the hero dark enough for white text to clear 4.5:1 anywhere
   over it, and melt the bottom edge into the page so the hero has no seam. */
.hero__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(90% 75% at 50% 42%, rgba(110, 40, 230, .16), transparent 68%),
    linear-gradient(180deg, rgba(8, 6, 13, .80) 0%, rgba(8, 6, 13, .58) 38%, rgba(10, 8, 16, .88) 82%, var(--surface-0) 100%);
  z-index: -1;
}

.hero__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
}

.hero__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-6);
  width: 100%; max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-8);
}
.hero__logo {
  width: clamp(230px, 34vw, 430px);
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .7));
}

/* ---- Hero widgets (server status / discord) ---- */
.widget {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 0 0 var(--sp-2);
  background: none; border: 0; border-bottom: 2px solid var(--accent);
  color: var(--text-1);
  cursor: pointer; text-align: left;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.widget:hover { transform: translateY(-2px); color: var(--text-1); }
.widget:active { transform: translateY(0); }
.widget--left  { justify-self: end;   flex-direction: row-reverse; text-align: right; }
.widget--right { justify-self: start; }

.widget__ic {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(110, 40, 230, .22);
}
.widget__ic svg { width: 20px; height: 20px; color: #fff; }
.widget__text { display: flex; flex-direction: column; min-width: 0; }
.widget__head {
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent-mid);
  white-space: nowrap;
}
.widget__sub {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.widget--offline .widget__ic { background: var(--surface-3); box-shadow: 0 0 0 4px rgba(255, 255, 255, .05); }
.widget--offline .widget__head { color: var(--text-3); }
.widget--offline { border-bottom-color: var(--line); }

/* ======================= 5. SHELL + SIDEBAR ============================= */
.shell {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  gap: var(--sp-4);
  width: 100%; max-width: var(--shell-w);
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-12);
}

.side { min-width: 0; }

/* ---- Identity card ---- */
.card--ident { padding-bottom: var(--sp-3); }
.ident { display: flex; align-items: center; gap: var(--sp-3); }
.ident__ic {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--accent), #3d1685);
}
.ident__ic svg { width: 24px; height: 24px; color: var(--accent-pale); }
.ident__text { display: flex; flex-direction: column; min-width: 0; }
.ident__text strong { font-size: var(--fs-md); }
.ident__text span { font-size: var(--fs-xs); color: var(--text-3); }
.ident__steps {
  margin: var(--sp-3) 0 0;
  padding-left: 18px;
  font-size: var(--fs-xs);
  color: var(--text-2);
  line-height: 1.5;
}
.ident__steps li { margin-bottom: var(--sp-2); }
.ident__steps li::marker { color: var(--accent-soft); font-weight: 700; }

/* ---- Category nav ---- */
.card--nav { padding: var(--sp-2); }
.nav { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0; border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  font-size: var(--fs-lg); font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.nav__link:hover { background: var(--surface-2); color: var(--text-1); }
.nav__link--active {
  border-left-color: var(--accent);
  color: var(--accent-soft);
  background: var(--surface-2);
}
.nav__count {
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--text-3);
  background: var(--surface-3);
  padding: 1px 7px; border-radius: var(--r-pill);
}

/* ---- Featured ---- */
.feat__img {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  background: var(--surface-2) center/cover no-repeat;
  margin-bottom: var(--sp-3);
}
.feat__name { font-size: var(--fs-md); font-weight: 700; margin-bottom: 2px; }
.feat__price { font-size: var(--fs-sm); font-weight: 800; color: var(--gold); margin-bottom: var(--sp-3); display: block; }

/* ========================= 6. MAIN PANEL ================================ */
.main { min-width: 0; }

.panel {
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.panel__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.panel__title { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-soft); }
.panel__body { padding: var(--sp-5); }

/* ---- Home welcome block ---- */
.welcome { text-align: center; max-width: 620px; margin: var(--sp-4) auto var(--sp-6); }
.welcome__eyebrow {
  display: block;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.welcome__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.welcome__lead { font-size: var(--fs-lg); font-weight: 600; color: var(--text-1); margin-bottom: var(--sp-5); }
.welcome__body p { font-size: var(--fs-sm); color: var(--text-2); }

.pay-row {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
.pay-row__label {
  width: 100%; text-align: center;
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-1);
}
.pay {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em;
  color: var(--text-2);
}

/* ---- Package grid ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.pkg {
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pkg:hover { transform: translateY(-3px); border-color: var(--accent); }
.pkg__img {
  aspect-ratio: 1 / 1;
  background: var(--surface-1) center/contain no-repeat;
  border-bottom: 1px solid var(--line-soft);
}
.pkg__img--empty {
  display: grid; place-items: center;
  background: radial-gradient(90% 90% at 50% 40%, rgba(110, 40, 230, .22), transparent 70%), var(--surface-1);
}
.pkg__img--empty span {
  font-size: var(--fs-3xl); font-weight: 800;
  color: var(--accent); opacity: .45;
}
.pkg__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
}
.pkg__text { min-width: 0; }
/* Two lines, then clamp. A single ellipsised line turns "TxAdmin No-Clip
   Toggle" into "TxAdmin No-Clip Tog…" in a third-width card, which is the one
   thing a buyer needs to read. */
/* Two lines, then clamp. A single ellipsised line turns "TxAdmin No-Clip
   Toggle" into "TxAdmin No-Clip Tog…" in a third-width card, which is the one
   thing a buyer needs to read. min-height reserves BOTH lines whether or not
   the name uses them, so the price row sits on the same baseline across the
   whole row — a ragged price line makes a grid look broken. */
.pkg__name {
  font-size: var(--fs-sm); font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pkg__price { font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.pkg__price b { color: var(--gold); font-size: var(--fs-sm); }
.pkg__tag {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-soft);
}

/* ---- Empty / error states ---- */
.note {
  padding: var(--sp-6);
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.note strong { display: block; color: var(--text-1); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.note--error strong { color: var(--danger); }

.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.skel {
  aspect-ratio: 1 / 1.25;
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ============================ 7. MODAL ================================== */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--sp-4);
  background: rgba(5, 4, 9, .78);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.overlay--on { opacity: 1; }

.modal {
  width: 100%; max-width: 620px;
  max-height: min(84vh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transform: translateY(14px) scale(.985);
  transition: transform var(--dur-slow) var(--ease);
}
.overlay--on .modal { transform: none; }

.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent);
}
.modal__title { font-size: var(--fs-md); font-weight: 700; color: #fff; }
.modal__close {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.modal__close:hover { background: rgba(255, 255, 255, .18); }

.modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
  color: var(--text-2);
  font-size: var(--fs-sm);
  overscroll-behavior: contain;
}
/* Tebex ships package descriptions as HTML. Tame it to our type system. */
.modal__body :where(h1, h2, h3, h4) { color: var(--text-1); font-size: var(--fs-lg); margin: var(--sp-4) 0 var(--sp-2); }
.modal__body :where(h1, h2, h3, h4):first-child { margin-top: 0; }
.modal__body strong { color: var(--text-1); }
.modal__body ul, .modal__body ol { padding-left: 20px; margin: 0 0 var(--sp-3); }
.modal__body li { margin-bottom: var(--sp-1); }
.modal__body img { border-radius: var(--r-sm); margin: var(--sp-3) 0; }
.modal__body a { word-break: break-word; }
.modal__body hr { border: 0; border-top: 1px solid var(--line-soft); margin: var(--sp-4) 0; }

.modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.modal__price { font-size: var(--fs-lg); font-weight: 800; color: var(--gold); }
.modal__price small { font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); margin-left: 4px; }
.modal__actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ============================ 8. DRAWER ================================= */
.overlay--drawer { z-index: 70; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80;
  width: min(400px, 100%);
  display: flex; flex-direction: column;
  background: var(--surface-1);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
}
.drawer--on { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__head h2 { font-size: var(--fs-lg); }
.drawer__head .modal__close { color: var(--text-2); }
.drawer__head .modal__close:hover { background: var(--surface-3); color: var(--text-1); }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); overscroll-behavior: contain; }

.line {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.line:last-child { border-bottom: 0; }
.line__img {
  width: 52px; height: 52px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-2) center/contain no-repeat;
}
.line__text { flex: 1; min-width: 0; }
.line__name {
  font-size: var(--fs-sm); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.line__price { font-size: var(--fs-xs); color: var(--text-2); }
.line__price b { color: var(--gold); }
.line__tag { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-soft); }

.qty { display: flex; align-items: center; gap: 2px; flex: none; }
.qty button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-1);
  font-size: var(--fs-sm); font-weight: 800; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.qty button:hover { background: var(--surface-3); }
.qty button:active { transform: translateY(1px); }
.qty span { min-width: 24px; text-align: center; font-size: var(--fs-sm); font-weight: 700; }

.line__remove {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--text-3);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.line__remove:hover { color: var(--danger); border-color: var(--danger); }

.drawer__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line-soft); background: var(--surface-2); }
.drawer__total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md); font-weight: 700;
}
.drawer__total span:last-child { font-size: var(--fs-xl); font-weight: 800; color: var(--gold); }
.drawer__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; }

/* ======================== 9. FLOW + TOASTS ============================== */
.overlay--flow { z-index: 90; }
.flow {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-10);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.flow p { font-size: var(--fs-md); font-weight: 600; margin: 0; }
.spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--surface-3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toasts {
  position: fixed; left: 50%; bottom: var(--sp-6); z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  transform: translateX(-50%);
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.toast {
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  font-size: var(--fs-sm); font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast--on { opacity: 1; transform: none; }
.toast--error { border-left-color: var(--danger); }
.toast--ok { border-left-color: var(--ok); }

/* ====================== 9b. ANNOUNCEMENT BANNER ========================= */
/* Four colours, chosen from the semantic set rather than free-form, so a
   leader cannot accidentally make an announcement unreadable or make a notice
   look like an error. Colour is never the only signal — the text carries the
   meaning. */
.banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700;
  text-align: center;
  background: var(--banner-bg, var(--surface-2));
  color: var(--banner-fg, var(--text-1));
}
.banner__text { max-width: var(--shell-w); }

/* The tint is a flat dark gradient layer laid OVER the semantic colour rather
   than a colour-mix(): it keeps working on older engines, and because the
   bottom layer is the live --accent token the accent override in the staff
   panel is picked up here for free. */
.banner--accent { --banner-bg: linear-gradient(rgba(10, 8, 16, .74), rgba(10, 8, 16, .74)), var(--accent);  --banner-fg: var(--accent-pale); }
.banner--gold   { --banner-bg: linear-gradient(rgba(10, 8, 16, .82), rgba(10, 8, 16, .82)), var(--gold);    --banner-fg: #ffe6b0; }
.banner--ok     { --banner-bg: linear-gradient(rgba(10, 8, 16, .82), rgba(10, 8, 16, .82)), var(--ok);      --banner-fg: #c6f6d8; }
.banner--danger { --banner-bg: linear-gradient(rgba(10, 8, 16, .80), rgba(10, 8, 16, .80)), var(--danger);  --banner-fg: #ffd3d3; }

/* ============================ 10. FOOTER ================================ */
.foot {
  border-top: 1px solid var(--line-soft);
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.foot__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap;
  max-width: var(--shell-w);
  margin: 0 auto;
}
.foot p { margin: 0; }
.foot__right { color: var(--text-3); }

/* Discreet by design: staff know it is there, a buyer has no reason to care.
   It is not hidden — hiding a link is not a security control, and the gate is
   the root password on the server. */
.foot__staff {
  color: var(--text-3);
  border-bottom: 1px dotted var(--line);
  transition: color var(--dur-fast) var(--ease);
}
.foot__staff:hover { color: var(--accent-soft); }

/* An optional extra line a leader can put under the footer (shipping notice,
   holiday hours, a sale ending). Empty and hidden unless they set it. */
.foot__note {
  max-width: var(--shell-w);
  margin: var(--sp-3) auto 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  color: var(--text-2);
  font-size: var(--fs-xs);
}

/* The staff panel is a fixed overlay; the page behind it must not scroll. */
body.is-admin { overflow: hidden; }
.foot__legal {
  max-width: var(--shell-w);
  margin: var(--sp-4) auto 0;
  font-size: 10px;
  line-height: 1.6;
  color: var(--text-3);
  opacity: .7;
}

/* ========================= 11. RESPONSIVE =============================== */

/* Tablet — 2-up grid, narrower sidebar */
@media (max-width: 980px) {
  :root { --side-w: 230px; --hero-h: 300px; }
  .grid, .skeleton-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { gap: var(--sp-4); }
  .nav__link { font-size: var(--fs-md); }
}

/* Phone / small tablet — hero collapses, sidebar becomes a horizontal rail */
@media (max-width: 760px) {
  :root { --hero-h: auto; }

  .hero__bar { padding: var(--sp-3) var(--sp-4); }
  .hero__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--sp-4);
    padding: 0 var(--sp-4) var(--sp-6);
  }
  .hero__logo { width: min(74vw, 300px); order: -1; }

  /* Stacked, both the SAME width and both left-aligned inside it, so the two
     round icons and the two accent underlines line up as one column. Letting
     each widget size to its own content made them look randomly indented. */
  .widget--left, .widget--right {
    justify-self: center;
    width: min(100%, 290px);
  }
  .widget--left { flex-direction: row; text-align: left; }
  .widget__text { flex: 1; }

  .shell {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    padding: 0 var(--sp-4) var(--sp-8);
  }

  /* The nav is the only sidebar card that stays above the fold: it becomes a
     horizontal scroller directly under the hero. Identity + featured drop
     below the packages, where they stop pushing the catalog off-screen. */
  .side { display: contents; }
  .card--nav {
    order: 1;
    padding: var(--sp-2);
    margin-bottom: var(--sp-1);
    overflow: hidden;
  }
  .nav {
    display: flex; gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav li { flex: none; }
  .nav__link {
    border-left: 0; border-bottom: 2px solid transparent;
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm); font-weight: 700;
    white-space: nowrap;
    background: var(--surface-2);
  }
  .nav__link--active { border-bottom-color: transparent; background: var(--accent); color: #fff; }
  .nav__count { display: none; }

  .main { order: 2; }
  .card--ident { order: 3; }
  .card--featured { order: 4; }
  #socialCard { order: 5; }

  .panel__body { padding: var(--sp-4); }
  .welcome__title { font-size: var(--fs-xl); }
  .welcome__lead { font-size: var(--fs-md); }

  .drawer { width: 100%; }
  .modal { max-height: 88vh; }
  .modal__foot { justify-content: center; }
  .modal__actions { width: 100%; }
  .modal__actions .btn { flex: 1; }

  .foot__inner { justify-content: center; text-align: center; }
}

/* Narrow phones — 1-up grid */
@media (max-width: 520px) {
  .grid, .skeleton-grid { grid-template-columns: 1fr; }
  .pkg__img { aspect-ratio: 16 / 9; }
}

/* ======================= 12. MOTION / A11Y ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .pkg:hover, .widget:hover { transform: none; }
}