/* ============================================================
   Legend's Best — shared styles for login screens
   ============================================================ */

:root {
  /* ---- Brand color system — exact values from the Legend's Best design
     spec. Existing --var names are kept so every rule already using them
     picks up the correct color automatically, with no risk of a mass
     rename across the whole stylesheet. ---- */
  --blue-700: #0a2eff;  /* Primary Blue */
  --blue-600: #1e4bff;  /* Secondary Blue */
  --blue-500: #5073ff;
  --blue-100: #d6dfff;
  --blue-50: #eef4ff;   /* Light Blue */
  --navy-deep: #071a4d; /* Deep Navy — dark sections (hero, header) */
  --bg-page: #f7f9fc;   /* page background, off-white sections */
  --ink-900: #0b1220;   /* Primary Text */
  --ink-700: #3a4256;
  --gray-600: #5a687d;  /* Secondary Text. Darkened from #64748b, which cleared 4.5:1
                           on white but not on any tinted surface it is used over
                           (4.17 on #eef0f5, 3.94 on #e5eaf2). */
  --gray-400: #66728a;  /* Hints and placeholders. Darkened from #9099a8, which was 2.9:1 on white; this is 4.8:1. */
  --border: #e5eaf2;
  --white: #ffffff;
  --gold: #ffd54a;      /* Accent Gold — sparing use only */
  --amber: #b29534;
  --warning: #f59e0b;
  --green-600: #117f3a; /* Success. White text on the old #16a34a was 3.3:1, and the
                           same green as text on --green-50 was 2.97:1. */
  --on-dark-muted: #93a0b4; /* Secondary text on navy/dark cards, where --gray-600
                               reads at 3.33:1. */
  --green-50: #eaf6f0;
  --red-600: #dc2626;   /* Error */

  /* Spacing scale — reach for these instead of arbitrary px values. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Slightly tighter radii read more considered, less "bubbly SaaS kit" */
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Restrained elevation — one quiet resting shadow, one for true overlays */
  --shadow-card: 0 8px 30px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 14px 40px rgba(15, 23, 42, 0.1);
  --shadow-soft: 0 2px 10px -4px rgba(15, 23, 42, 0.06);

  /* One easing curve, used everywhere, instead of ad hoc transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 220ms;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: "Space Grotesk", var(--font);
}

::selection {
  background: var(--blue-600);
  color: #fff;
}

* {
  box-sizing: border-box;
}

/* iOS Safari auto-zooms the page when a focused input's font-size is under
   16px — this forces every text input/select/textarea to 16px on phone-width
   viewports (where Safari zoom actually happens) without touching the more
   compact desktop sizing used above that width. */
@media (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--ink-900);
  background: #f8f9fb;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
  line-height: 1.5;
}

/* Customer session gate (wallet/orders/account/referrals): while the
   session check is in flight, the page's own header/nav/topbar are
   masked behind a full-screen overlay instead of flashing into view
   right before a guest gets redirected to login. */
body.session-checking > .topbar,
body.session-checking > .site-header,
body.session-checking > .mobile-menu {
  visibility: hidden;
}
.session-gate {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #f8f9fb;
  color: var(--gray-600);
  font-size: 14px;
}
.session-gate__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--blue-100);
  border-top-color: var(--blue-600);
  animation: session-spin 0.7s linear infinite;
}
@keyframes session-spin {
  to { transform: rotate(360deg); }
}
#pageContent {
  animation: session-fade-in 0.25s ease;
}
@keyframes session-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.price, .product-card__price, strong[data-countup], .track-order__result-head strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

[hidden] {
  display: none !important;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

a:hover {
  text-decoration: underline;
}

/* ---------- Page shell ---------- */

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 700px at 78% 8%, #dde6ff 0%, rgba(221, 230, 255, 0) 60%),
    linear-gradient(180deg, #fbfcff 0%, #f2f5fe 55%, #e9eefc 100%);
}

.page__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 64px) 0;
  position: relative;
  z-index: 2;
}

.page__footer {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 13px;
  color: var(--gray-600);
  padding: 22px 16px 26px;
}

.page__footer p {
  margin: 2px 0;
}

.page__footer .footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Decorative blurred dots reused across both screens */
.deco-dot {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6f93ff, #2f5bf0 70%);
  opacity: 0.35;
  filter: blur(0.5px);
  z-index: 1;
}

/* ---------- Brand lockup ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand__logo {
  height: 40px;
  width: auto;
  display: block;
}

.brand__logo-icon {
  width: 36px;
  height: 36px;
  display: block;
}

/* ---------- Hero / left column ---------- */

.hero {
  position: relative;
  padding-bottom: 24px;
}

.hero__stage {
  position: relative;
  min-height: clamp(360px, 46vw, 560px);
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

.hero__blob {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 78%;
  height: 96%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 42% 32%, #cfe0ff 0%, #b9cfff 45%, rgba(185, 207, 255, 0) 72%);
  border-radius: 50%;
  z-index: 1;
}

.hero__mascot {
  position: relative;
  z-index: 2;
  height: 100%;
  max-height: 560px;
  margin: 0 auto;
  display: block;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
}

.hero__copy {
  max-width: 460px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 18px 0 14px;
  color: var(--ink-900);
}

.hero h1 span {
  color: var(--blue-600);
}

.hero__rule {
  width: 46px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  margin: 0 0 16px;
}

.hero p.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
  max-width: 380px;
  margin: 0 0 26px;
}

.feature-list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-soft);
}

.feature-list .icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-list .icon svg {
  width: 19px;
  height: 19px;
}

.feature-list strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
}

.feature-list span.sub {
  display: block;
  font-size: 13px;
  color: var(--gray-600);
  margin-top: 1px;
}

/* variant: light icon chip (customer screen) */
.icon--chip {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue-600);
}

/* variant: solid icon chip (admin console screen) */
.icon--solid {
  background: linear-gradient(160deg, var(--blue-500), var(--blue-700));
  color: var(--white);
}

/* trust / social proof pill (customer screen) */
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 8px 18px 8px 8px;
  box-shadow: var(--shadow-soft);
}

.trust-pill__avatars {
  display: flex;
  align-items: center;
}

.trust-pill__avatars img,
.trust-pill__avatars svg {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--white);
  object-fit: cover;
  margin-left: -10px;
  display: block;
}

.trust-pill__avatars img:first-child,
.trust-pill__avatars svg:first-child {
  margin-left: 0;
}

.trust-pill__count {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-600);
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -10px;
  border: 2px solid var(--white);
}

.trust-pill__text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
}

.trust-pill__stars {
  color: var(--amber);
  font-size: 12px;
  letter-spacing: 1px;
}

/* ---------- Card / right column ---------- */

.card-wrap {
  display: flex;
  justify-content: center;
}

.card {
  width: 100%;
  max-width: 470px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3.6vw, 46px) 34px;
}

.card__logo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.card__logo svg,
.card__logo .brand__logo-icon {
  width: 34px;
  height: 34px;
}

.card__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.card h2 {
  font-family: var(--font-heading);
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.card p.subtitle {
  text-align: center;
  color: var(--gray-600);
  font-size: 14.5px;
  margin: 0 0 26px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 7px;
}

.field .control {
  position: relative;
  display: flex;
  align-items: center;
}

.field .control svg.leading {
  position: absolute;
  left: 15px;
  width: 18px;
  height: 18px;
  color: var(--blue-500);
  pointer-events: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  height: 50px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 14px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--ink-900);
  background: var(--white);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

/* Only fields with a leading icon (email/password on the auth pages) need
   the extra left inset — everywhere else (checkout, support, admin) a
   plain field should not carry 46px of empty padding on both sides. */
.field .control:has(svg.leading) input {
  padding: 0 46px;
}

.field textarea {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}

.field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--gray-400);
}

.field input:hover:not(:focus, :disabled),
.field select:hover:not(:focus, :disabled),
.field textarea:hover:not(:focus, :disabled) {
  border-color: var(--gray-400);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px var(--blue-100);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--bg-page);
  color: var(--gray-400);
  cursor: not-allowed;
  border-color: var(--border);
}

.field input.has-error,
.field select.has-error,
.field textarea.has-error {
  border-color: #e5484d;
}

.field .error-msg {
  display: none;
  color: #e5484d;
  font-size: 12.5px;
  margin-top: 6px;
}

.field.invalid .error-msg {
  display: block;
}

.toggle-visibility {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--gray-600);
  display: flex;
  transition: color var(--dur-fast) var(--ease);
}

.toggle-visibility:hover {
  color: var(--ink-900);
}

.toggle-visibility svg {
  width: 19px;
  height: 19px;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.invalid-terms .checkbox {
  color: var(--red-600);
}

.invalid-terms .checkbox input {
  border-color: var(--red-600);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-900);
  user-select: none;
}

.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  border: 1.6px solid var(--blue-500);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}

.checkbox input:checked {
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.link-forgot {
  font-size: 13.5px;
  font-weight: 600;
}

.btn-primary {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: var(--white);
  font-size: 15.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 14px 24px -10px rgba(20, 86, 245, 0.55);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.btn-primary svg {
  width: 18px;
  height: 18px;
}

.btn-primary:hover {
  box-shadow: 0 16px 28px -8px rgba(20, 86, 245, 0.6);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: progress;
}

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: var(--gray-400);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.oauth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.signup-note {
  text-align: center;
  font-size: 14px;
  color: var(--gray-600);
}

.signup-note a {
  font-weight: 700;
}

.restricted-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.5;
}

.restricted-note svg {
  width: 20px;
  height: 20px;
  color: var(--blue-600);
  flex-shrink: 0;
  margin-top: 1px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 12px);
  background: var(--ink-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 20;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Focus visibility for keyboard users. Selects, textareas and anything given
   a tabindex were not in this list, so a keyboard user tabbing through a
   filter panel or a message box saw nothing move. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2.5px solid var(--blue-500);
  outline-offset: 2px;
}

/* Wrapping the page content in <main> gives it somewhere to jump to. Without
   this, reaching the first product on the shop page meant tabbing through the
   whole header, the services menu and the category links on every page. Off
   screen until focused, then it sits in the top-left corner. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 300;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
}

/* main takes focus from the skip link, but it is not a control and should
   not draw a focus ring around the entire page. */
main[tabindex="-1"]:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .page__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero {
    text-align: center;
    order: 2;
  }
  .hero__copy {
    margin: 0 auto;
  }
  .feature-list {
    text-align: left;
  }
  .trust-pill,
  .hero__rule {
    margin-left: auto;
    margin-right: auto;
  }
  .card-wrap {
    order: 1;
  }
  .hero__stage {
    min-height: 320px;
  }
}

@media (max-width: 540px) {
  .oauth-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .card {
    padding: 26px 20px 28px;
  }
  .row-between {
    flex-direction: row;
  }
}

/* ============================================================
   Legend's Best — main site (header, hero, catalog, footer)
   ============================================================ */

.site-body {
  background: #f7f9ff;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* ---------- Top utility bar ---------- */

.topbar {
  background: var(--ink-900);
  color: #cdd6ea;
  font-size: 12.5px;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ---------- Header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: linear-gradient(165deg, #0c1330 0%, #0a1029 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Compact, per the reference: the bar reads as part of the hero. */
  --header-pad: 10px;
  transition: transform var(--dur, 0.25s) var(--ease, ease);
  will-change: transform;
}

/* The header used to sit on screen permanently, taking a strip off the top
   of every page no matter how far down you were reading. It now slides away
   as you scroll down and comes straight back the moment you scroll up — so
   the search, cart and account are still one flick away without occupying
   the page while you read. js/site.js adds and removes the class. */
.site-header--tucked {
  transform: translateY(-100%);
}

/* Someone who has asked for less motion gets the plain behaviour instead of
   a header sliding in and out. */
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: var(--header-pad, 12px);
  padding-bottom: var(--header-pad, 12px);
}

.site-header .brand {
  flex-shrink: 0;
}

.site-header .brand__logo {
  height: 30px;
}

.footer-brand .brand__logo {
  height: 34px;
}

/* ---------- Main navigation ----------
   The eight service categories used to run across a second row under the
   header on every page. They are the same eight links, now behind one
   "Services" button, so the header is a header rather than a menu. */
.main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  font: inherit;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14.5px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.main-nav__link:hover,
.main-nav__link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
}

.nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) var(--ease);
}

.main-nav__link--drop[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.main-nav__drop {
  position: relative;
}

/* The Services panel. Two columns on a wide screen so eight categories read
   as a short list rather than a long one. */
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 460px;
  max-width: calc(100vw - 32px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transform-origin: top center;
  /* Kinetic open: the panel drops and unfolds from its top edge, keeping the
     translateX(-50%) that centres it under the Services button. slide-up-in
     used a bare translateY, which dropped the centring mid-animation and made
     the panel jump sideways on every open. */
  animation: nav-panel-drop var(--dur) var(--ease);
}

@keyframes nav-panel-drop {
  from { opacity: 0; transform: translate(-50%, -8px) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Each category reveals just behind the panel, top to bottom, so the list
   reads as it lands rather than appearing all at once. */
.nav-menu__item { animation: nav-item-in 320ms var(--ease) both; }
.nav-menu__item--lead { grid-column: 1 / -1; background: var(--blue-50); }
.nav-menu__item:nth-child(1) { animation-delay: 40ms; }
.nav-menu__item:nth-child(2) { animation-delay: 75ms; }
.nav-menu__item:nth-child(3) { animation-delay: 110ms; }
.nav-menu__item:nth-child(4) { animation-delay: 145ms; }
.nav-menu__item:nth-child(5) { animation-delay: 180ms; }
.nav-menu__item:nth-child(6) { animation-delay: 215ms; }
.nav-menu__item:nth-child(7) { animation-delay: 250ms; }
.nav-menu__item:nth-child(8) { animation-delay: 285ms; }
.nav-menu__item:nth-child(9) { animation-delay: 320ms; }

@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.nav-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-menu__item:hover {
  background: var(--blue-50);
  color: var(--blue-600);
  text-decoration: none;
}

.nav-menu__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--blue-600);
}

.nav-menu__all {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-600);
}

.nav-menu__all:hover { text-decoration: none; background: var(--blue-50); border-radius: var(--radius-sm); }
.nav-menu__all svg { width: 15px; height: 15px; }

/* ---------- Account menu ----------
   The balance and Log Out used to sit in the header as two more controls in
   a row that already held five. They are behind the face now, which is
   where people look for them anyway. */
.header-account { position: relative; }

/* The face is a button now rather than a link, so it needs the reset a
   button does not get for free. */
button.header-profile {
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 226px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  animation: slide-up-in var(--dur) var(--ease);
}

.account-menu__balance {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 11px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
}
.account-menu__balance:hover { text-decoration: none; background: #e3ebff; }
.account-menu__balance span { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray-600); }
.account-menu__balance strong { font-size: 17px; color: var(--ink-900); }

.account-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 11px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}
.account-menu__item:hover { background: var(--blue-50); color: var(--blue-600); text-decoration: none; }

.account-menu__item--out {
  margin-top: 6px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--red-600, #cd2b31);
}
.account-menu__item--out:hover { background: #fdecec; color: var(--red-600, #cd2b31); }

/* ---------- Off-canvas mobile menu ----------
   The hamburger's menu. Its rules were living inside the category-row
   block and went missing when that block did, which left the panel
   unstyled and spilling its links across the top of every page.
   Every destination from the old category row now lives in it. ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.open { visibility: visible; pointer-events: auto; }

.mobile-menu__scrim {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 22, 0.42);
  -webkit-backdrop-filter: blur(6px) saturate(0.9);
  backdrop-filter: blur(6px) saturate(0.9);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.mobile-menu.open .mobile-menu__scrim { opacity: 1; }

/* A white sheet that slides in from the right, with its own scroll so a
   long menu never pushes the page around.

   Scoped to .mobile-menu on purpose: the admin console has a .mm-panel of
   its own (the sidebar nav column), and every admin page loads this file
   before admin-mm.css. Unscoped, position/width/background/transform from
   here won the cascade there and covered the left third of every admin
   page. Keep any new .mm-* rule in this file scoped the same way. */
.mobile-menu .mm-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(340px, 88vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -18px 0 50px -20px rgba(4, 22, 62, 0.45);
  transform: translateX(100%);
  /* A slight overshoot as it lands, so the sheet feels thrown into place
     rather than slid. */
  transition: transform 0.42s cubic-bezier(0.16, 0.84, 0.3, 1.06);
  padding-top: env(safe-area-inset-top, 0px);
}
.mobile-menu.open .mm-panel { transform: none; }

.mm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}
.mm-brand img { height: 30px; width: auto; display: block; }
.mm-close {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  border: 0;
  background: var(--blue-50);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s var(--ease), transform 0.2s var(--ease);
}
.mm-close svg { width: 17px; height: 17px; }
.mm-close:hover { background: #dbe7ff; transform: rotate(90deg); }

.mm-pickers { display: flex; gap: 8px; padding: 0 18px 14px; }
.mm-pickers .region-picker[hidden] { display: none; }

/* The root menu and its sub-menus sit side by side; one is ever on screen. */
.mm-body { position: relative; flex: 1; overflow: hidden; }
.mm-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 12px 24px;
  transform: translateX(14%);
  opacity: 0;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.mm-view[hidden] { display: none; }
.mm-view.is-on { transform: none; opacity: 1; }
.mm-view.is-back { transform: translateX(-14%); }

/* Kinetic reveal: once a view is on screen, its rows and section labels ride
   in from the right one after another, so the menu builds itself rather than
   snapping in complete. Only the open drawer runs it, so a background tab
   never leaves rows stuck mid-animation. */
.mobile-menu.open .mm-view.is-on > * { animation: mm-row-in 360ms var(--ease) both; }
.mobile-menu.open .mm-view.is-on > *:nth-child(1) { animation-delay: 60ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(2) { animation-delay: 95ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(3) { animation-delay: 130ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(4) { animation-delay: 165ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(5) { animation-delay: 200ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(6) { animation-delay: 235ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(7) { animation-delay: 270ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(8) { animation-delay: 305ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(9) { animation-delay: 340ms; }
.mobile-menu.open .mm-view.is-on > *:nth-child(n+10) { animation-delay: 375ms; }

@keyframes mm-row-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}

.mm-group {
  margin: 14px 10px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-500, #8b93a7);
}
.mm-view > .mm-group:first-child { margin-top: 4px; }

/* Every row is a full-width target at least 48px tall. */
.mm-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.mm-row:hover, .mm-row:focus-visible { background: var(--blue-50); color: var(--blue-700); text-decoration: none; }
.mm-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mm-row small { font-size: 12.5px; font-weight: 500; color: var(--gray-600); }
.mm-ico { width: 21px; height: 21px; flex: 0 0 21px; color: var(--blue-600); }
.mm-chev { width: 16px; height: 16px; flex: 0 0 16px; color: var(--gray-400, #a7b0c2); transition: transform 0.18s var(--ease); }
.mm-row:hover .mm-chev { transform: translateX(3px); }

/* The page being viewed. */
.mm-row.is-current { background: var(--blue-50); color: var(--blue-700); }
.mm-row.is-current .mm-ico { color: var(--blue-700); }
.mm-row.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 26px;
  border-radius: 0 3px 3px 0;
  background: var(--blue-600);
}

.mm-row--me { background: var(--blue-50); }
.mm-row--me .mm-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.mm-row--me .mm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mm-row--me .mm-avatar em { font-style: normal; }
.mm-row--out { color: #c0392f; }
.mm-row--out .mm-ico { color: #c0392f; }
.mm-row--out:hover { background: #fdecec; color: #a5281f; }

.mm-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #e0362c;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mm-count[hidden] { display: none; }

.mm-back {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.mm-back svg { width: 20px; height: 20px; color: var(--blue-600); }

.mm-foot {
  margin: 0;
  padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--gray-600);
  background: linear-gradient(180deg, #f6f9ff, #eaf2ff);
}

[data-auth][hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu .mm-panel, .mobile-menu__scrim, .mm-view { transition: none; }
  .nav-menu,
  .nav-menu__item,
  .mobile-menu.open .mm-view.is-on > * { animation: none; }
  .menu-toggle svg,
  .menu-toggle[aria-expanded="true"] svg { transform: none; }
}

/* ---------- The nav on a narrow screen ----------
   Below 1024px the five links will not sit beside the logo and the account
   controls. There is already an off-canvas menu behind the hamburger with
   every one of these destinations in it, so the row simply steps aside
   rather than becoming a second menu that has to be kept in step. */
/* The nav and the account controls together need real room. Between 1024
   and 1279 the nav tightens rather than overflowing — at 1100px the row was
   running 57px past the right edge and cutting "Log Out" in half. */
@media (max-width: 1279px) {
  .main-nav { gap: 0; }
  .main-nav__link { padding: 9px 10px; font-size: 13.5px; }
  .site-header .container { gap: 12px; }
}

@media (max-width: 1023px) {
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Hero search ----------
   The search moved out of the header and into the hero, where it is the
   thing a visitor is actually looking for rather than one more icon in a
   crowded strip. */
.hero-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(640px, 100%);
  margin-top: clamp(20px, 4vw, 36px);
  padding: 8px 8px 8px 22px;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 40px rgba(6, 12, 34, 0.28);
}

.hero-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 15px;
  color: var(--ink-900);
  padding: 10px 4px;
}
.hero-search__input:focus { outline: none; }
.hero-search__input::placeholder { color: var(--gray-500, #8b93a7); }

.hero-search__go {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.hero-search__go:hover { background: var(--blue-700, #1a3fd6); }
.hero-search__go svg { width: 19px; height: 19px; }

@media (max-width: 640px) {
  .hero-search { padding: 5px 5px 5px 14px; gap: 4px; }
  /* 16px or iOS zooms the page when the field takes focus. */
  .hero-search__input { font-size: 16px; padding: 9px 2px; }
  /* The button was 40px against a 46px bar, so it read as a big blue disc
     sitting in the hero rather than a control on the end of a search box. */
  .hero-search__go { width: 34px; height: 34px; }
  .hero-search__go svg { width: 15px; height: 15px; }
}

/* Narrower still — a small phone in a case, or a foldable closed. */
@media (max-width: 380px) {
  .hero-search { padding-left: 12px; }
  .hero-search__go { width: 31px; height: 31px; }
  .hero-search__go svg { width: 14px; height: 14px; }
}



.search-bar {
  flex: 1;
  max-width: 380px;
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar svg {
  position: absolute;
  left: 14px;
  width: 17px;
  height: 17px;
  color: var(--gray-400);
  pointer-events: none;
}

.search-bar input {
  width: 100%;
  height: 42px;
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  padding: 0 16px 0 40px;
  font-size: 13.5px;
  color: #fff;
}

.search-bar input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.search-bar input:focus {
  outline: none;
  border-color: #5073ff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 4px rgba(91, 139, 255, 0.25);
}

.search-bar svg {
  color: rgba(255, 255, 255, 0.55);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-actions__auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.icon-btn svg {
  width: 20px;
  height: 20px;
}

.icon-btn:hover {
  border-color: #5073ff;
  color: #fff;
}

.icon-btn.liked {
  border-color: var(--red-600);
  color: var(--red-600);
}

.icon-btn .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--red-600);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 2px solid #0a1029;
}

.wallet-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.wallet-pill:hover {
  background: rgba(255, 255, 255, 0.16);
}

.wallet-pill .icon-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blue-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wallet-pill .icon-circle svg {
  width: 14px;
  height: 14px;
}

/* Flex like .btn-solid: a link styled as this button otherwise keeps its
   text at the top of the fixed height (Track, Contact Support on My Orders). */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--blue-600);
  color: var(--blue-600);
  background: var(--white);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn-outline:hover:not(:disabled) {
  background: var(--blue-600);
  color: #fff;
  text-decoration: none;
}

.btn-outline:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* On the header's dark background specifically, the outline button reads
   better as white-on-transparent than blue-on-white. */
.site-header .btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
}

.site-header .btn-outline:hover:not(:disabled) {
  background: #fff;
  color: var(--ink-900);
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: none;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 12px 20px -10px rgba(20, 86, 245, 0.55);
}

.btn-solid:hover:not(:disabled) {
  text-decoration: none;
  box-shadow: 0 14px 24px -8px rgba(20, 86, 245, 0.6);
}

.btn-solid:disabled {
  opacity: 0.65;
  cursor: progress;
  box-shadow: none;
}

.btn-solid svg {
  width: 16px;
  height: 16px;
}

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* A short press so the tap that opens the drawer registers before the sheet
   flies in over the header. */
.menu-toggle:active { transform: scale(0.9); }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.menu-toggle svg {
  width: 20px;
  height: 20px;
  color: #fff;
  transition: transform 0.28s var(--ease);
}

/* ---------- Announcements ----------
   One strip that rotates through every published announcement. Slides move
   sideways; under reduced motion they cross-fade and nothing auto-advances. */
.announce { background: var(--ink-900); color: #fff; }
.announce__inner { display: flex; align-items: center; gap: 12px; padding: 8px 20px; min-height: 46px; }
.announce__icon { display: inline-flex; flex: 0 0 auto; color: var(--gold); }
.announce__icon svg { width: 18px; height: 18px; }
.announce__viewport {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}
/* The two copies of the run are identical, so moving by half the track
   lands exactly where it started and the loop has no visible jump.
   --announce-time is measured in js/site.js from how long the run is. */
.announce__track { display: flex; width: max-content; animation: announce-roll var(--announce-time, 30s) linear infinite; will-change: transform; }
.announce:hover .announce__track, .announce:focus-within .announce__track { animation-play-state: paused; }
.announce__group { display: flex; align-items: center; flex: none; white-space: nowrap; }
.announce__msg { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.4; padding: 4px 0; }
.announce__msg strong { flex: 0 0 auto; color: var(--gold); white-space: nowrap; }
.announce__sep { width: 5px; height: 5px; margin: 0 18px; flex: none; border-radius: 50%; background: var(--gold); opacity: 0.65; }
@keyframes announce-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Standing still: nothing moves, everything wraps and reads at once. */
.announce.is-still .announce__viewport { -webkit-mask-image: none; mask-image: none; }
.announce.is-still .announce__track { animation: none; width: auto; }
.announce.is-still .announce__group { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.announce.is-still .announce__sep:last-child { display: none; }
.announce__nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.announce__arrow {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease);
}
.announce__arrow:hover { background: rgba(255, 255, 255, 0.2); }
.announce__dots { display: flex; gap: 5px; }
.announce__dot { width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.announce__dot.is-on { background: var(--gold); transform: scale(1.25); }
@media (max-width: 640px) {
  .announce__inner { padding: 8px 14px; gap: 8px; }
  .announce__msg { font-size: 12.5px; }
  .announce__sep { margin: 0 12px; }
  .announce__dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .announce__track { animation: none; }
}

/* ---------- Homepage banner carousel ---------- */

.banner-carousel { padding: 20px 0 0; }
.banner-carousel__track {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* A starting shape only. js/site.js measures the real banners once they
     load and replaces this with the tallest of them, so the container fits
     the artwork instead of the artwork being cut to fit the container.
     Kept as an aspect-ratio, not a pixel height, so it stays correct at
     every screen width. */
  aspect-ratio: 21 / 7;
  /* Stops one very tall upload taking over the whole screen. */
  max-height: 70vh;
  background: var(--blue-50);
}
.banner-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.banner-carousel__slide.active { opacity: 1; pointer-events: auto; }
/* "contain", not "cover": cover fills the box by cropping whatever doesn't
   fit, which is exactly what was hiding parts of the artwork. contain keeps
   the whole image and its proportions — no stretching, no zoom. With the
   track sized to the tallest banner above, most images fill it exactly. */
.banner-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.banner-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.banner-carousel__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
}
.banner-carousel__dots button.active { background: var(--blue-600); width: 22px; border-radius: var(--radius-pill); transition: width 0.3s var(--ease); }

/* ---------- Hero (homepage) ---------- */

.home-hero {
  position: relative;
  overflow: hidden;
  /* A photo or a video is 16:9, so the hero is too — an uploaded background
     fills it instead of being cropped to whatever height the words happened
     to need.
     Written as a minimum rather than aspect-ratio on purpose. aspect-ratio
     fixes the height, and this box has overflow:hidden: at 1100px wide that
     is 619px, the headline and buttons and search bar together need more,
     and the bottom of the hero was simply cut off. As a floor the shape
     holds whenever the content fits inside it and gives way when it does
     not, which is the behaviour you actually want.
     56.25vw is 9/16 of the viewport width. */
  /* Full screen, as the reference: the hero is the first screen, on a
     desktop (16:9 and wider) and on a phone (about 9:19.5) alike. A floor
     rather than a fixed height, so content that needs more room gets it. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 65% 55% at 28% 18%, rgba(60, 90, 220, 0.55), transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 75%, rgba(90, 60, 220, 0.28), transparent 65%),
    linear-gradient(165deg, #0c1330 0%, #0a1029 55%, #070a1c 100%);
}

/* Fine dot-grid texture over the dark hero — cheap to add, reads as
   "designed", not just a flat gradient. */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

.home-hero .container {
  position: relative;
  z-index: 2;
  /* Vertically centred in whatever height the screen gives the hero. */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(48px, 7vw, 88px);
  /* Trimmed from 88px so the hero's content fits inside 16:9 on an ordinary
     desktop rather than pushing 35px past it — the difference between the
     banner being the shape it is meant to be and being 1.70 instead. */
  padding-bottom: clamp(40px, 5vw, 56px);
}

.home-hero__copy {
  /* The left half is the copy's; the right half is the character's. On a
     wide screen the copy never crosses the middle, so the two cannot meet. */
  max-width: min(620px, 52%);
}

.home-hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: #fff;
}

.home-hero h1 span {
  background: linear-gradient(100deg, #7ea2ff, #b98cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-hero p.lede {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  max-width: 500px;
  margin: 0 0 36px;
}

/* ---- Admin-managed background media (video / image / GIF), set from
   Admin > Homepage Hero and injected by js/hero.js. Scoped to the hero
   section only — not page-fixed — so it disappears once the visitor
   scrolls past instead of showing through the light sections below.
   Hidden until a source is actually applied. ---- */
.home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.home-hero__media[hidden] {
  display: none;
}

/* Each queued background sits stacked in the same box; only the active one
   is opaque, so advancing through them reads as a crossfade rather than a
   cut. A single item simply stays active forever. */
.home-hero__media-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cover, so an uploaded background fills the hero without stretching.
     The focal point is admin-set (Admin > Homepage Hero): biased to the
     right by default, which keeps a character standing on the right of the
     picture on screen while the copy takes the left. */
  object-position: var(--hero-focal-x, 72%) center;
  display: block;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
}

.home-hero__media-item.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__media-item {
    transition: none;
  }
}

/* Dark wash over the media so the white / gradient copy above always
   reads. Strength is admin-controlled (Overlay darkness) via the
   --hero-overlay custom property js/hero.js sets on .home-hero. */
.home-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #06091a;
  opacity: var(--hero-overlay, 0.45);
  pointer-events: none;
}

/* ---- Blurred intro label + typewriter tagline ---- */
.home-hero__intro {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0 0 14px;
  font-size: clamp(15px, 2.4vw, 18px);
  line-height: 1.3;
  font-weight: 400;
  /* 0.55 measured 4.22:1 over the brightest part of the hero gradient, which
     is exactly where this line sits. 0.72 is 6.05:1. */
  color: rgba(255, 255, 255, 0.72);
  filter: blur(2.5px);
  max-width: 480px;
}

.home-hero__typewriter {
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.5;
  min-height: 26px;
  max-width: 480px;
  margin: 0 0 30px;
}

.home-hero__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: #fff;
  vertical-align: middle;
  margin-left: 2px;
  animation: heroCursorBlink 1s step-end infinite;
}

.home-hero__cursor.done { display: none; }

@keyframes heroCursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---- Pill action buttons: solid white by default, one outline variant
   for "Reach us". Fade + slide in shortly after load, independent of the
   typewriter timing. ---- */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.hero-pills.in {
  opacity: 1;
  transform: translateY(0);
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: #fff;
  color: var(--ink-900);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.hero-pill:hover {
  background: var(--ink-900);
  color: #fff;
  text-decoration: none;
}

.hero-pill--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.hero-pill--outline:hover {
  background: #fff;
  color: var(--ink-900);
}

.hero-pill--outline svg {
  width: 13px;
  height: 13px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 48px);
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stats div strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.hero-stats div span {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Transparent header over the hero (index.html only, scoped to
   body.hero-header). The header keeps its exact box — padding, height,
   gaps, logo size are all untouched; only its position (fixed, so the
   hero media shows through it) and background/border colour change.
   js/hero.js measures the header and refines --site-header-h, and toggles
   .is-scrolled once the visitor scrolls into the page. ---- */
body.hero-header {
  --site-header-h: 84px;
}

body.hero-header .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

body.hero-header .site-header.is-scrolled {
  background: linear-gradient(165deg, #0c1330 0%, #0a1029 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Push the hero's own content clear of the now-floating header. The
   header's dimensions are unchanged — this padding lives on the hero. */
body.hero-header .home-hero > .container {
  padding-top: calc(var(--site-header-h) + clamp(16px, 3vw, 40px));
}

/* Pause / resume for the background. A small frosted round button in the
   hero's bottom-right corner, kept clear of the chat button that sits in
   the viewport's corner. */
.hero-pause {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 16, 41, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background var(--dur-fast) var(--ease);
}
.hero-pause:hover { background: rgba(10, 16, 41, 0.8); }
.hero-pause svg { width: 18px; height: 18px; }
.hero-pause .hero-pause__play { display: none; }
.hero-pause[aria-pressed="true"] .hero-pause__pause { display: none; }
.hero-pause[aria-pressed="true"] .hero-pause__play { display: block; }
@media (max-width: 640px) {
  /* Above the tab bar and the chat button, which both live down there. */
  .hero-pause { right: 14px; bottom: 96px; width: 36px; height: 36px; }
}

/* ---------- Quick category tiles ---------- */

.quick-cats {
  padding: 8px 0 44px;
}

.quick-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.quick-cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  text-align: left;
  padding: var(--space-6) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-900);
  box-shadow: var(--shadow-card);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}

.quick-cat:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.quick-cat__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-50);
  color: var(--blue-600);
  transition: transform 220ms var(--ease);
}

.quick-cat:hover .quick-cat__icon {
  transform: scale(1.03);
}

/* Marks a category that has nothing in it yet. Deliberately quiet — it is
   a note, not a warning, and the tile stays clickable so a customer can
   still look. */
.quick-cat__soon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gray-100);
  border: 1px solid var(--border);
  color: var(--gray-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  vertical-align: middle;
  white-space: nowrap;
}

.quick-cat--soon .quick-cat__icon {
  opacity: 0.55;
}

/* A category with an uploaded cover shows the picture instead of the drawn
   icon. The tile keeps the same footprint so mixing the two still lines up. */
.quick-cat__icon--image {
  background: var(--gray-100);
  padding: 0;
  overflow: hidden;
}

.quick-cat__icon--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.quick-cat__icon svg {
  width: 24px;
  height: 24px;
}

.quick-cat span.label {
  font-size: 17px;
  font-weight: 700;
  margin-top: var(--space-2);
}

.quick-cat span.desc {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gray-600);
  line-height: 1.4;
}

/* ---------- Section shell ---------- */

.section {
  padding: clamp(48px, 6vw, 72px) 0;
}

.section--tint {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- Why Choose Us ---------- */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.why-us-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-5);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.why-us-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: var(--space-1);
}

.why-us-card__icon svg {
  width: 22px;
  height: 22px;
}

.why-us-card strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
}

.why-us-card span:not(.why-us-card__icon) {
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.5;
}

@media (max-width: 1180px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .why-us-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.section__head h2 {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink-900);
}

.section__head p {
  margin: 0;
  color: var(--gray-600);
  font-size: 14px;
}

.section__view-all {
  flex-shrink: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  color: #fff;
  text-decoration: none;
  flex-wrap: wrap;
}

.data-teaser__copy h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: #fff;
}

.data-teaser__copy p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  max-width: 46ch;
}

.data-teaser__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.data-teaser__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
}

.data-teaser__badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot, #fff);
  flex-shrink: 0;
}

.data-teaser__cta {
  flex-shrink: 0;
  background: #fff;
  color: var(--blue-700);
}

.data-teaser__cta:hover {
  background: var(--gold);
  color: var(--ink-900);
}

@media (max-width: 640px) {
  .data-teaser {
    padding: 24px;
  }
}

/* ---------- Product / service cards ---------- */

.card-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.card-row::-webkit-scrollbar {
  display: none;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.product-card {
  position: relative;
  flex: 0 0 250px;
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.product-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.product-card__media {
  position: relative;
  height: 132px;
  overflow: hidden;
  background: #f2f3f6;
}

.product-card__media svg {
  position: absolute;
  right: -14px;
  bottom: -14px;
  width: 96px;
  height: 96px;
  color: var(--ink-900);
  opacity: 0.1;
}

.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--ink-900);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
}

.product-card__tag--new { background: var(--ink-900); }
.product-card__tag--hot { background: var(--gold); color: var(--ink-900); }
.product-card__tag--off { background: var(--blue-600); }
.product-card__tag--preorder { background: #6d3fd1; }

.product-card__like {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gray-600);
}

.product-card__like svg {
  width: 16px;
  height: 16px;
}

.product-card__like.liked {
  color: var(--red-600);
}

.product-card__body {
  padding: 14px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-card__cat {
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.product-card__name {
  font-family: var(--font-heading);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.3;
}

.product-card__desc {
  font-size: 12.5px;
  color: var(--gray-600);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-card__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--gray-600);
}

.product-card__avail {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  color: #fff;
}

.product-card__avail--out {
  background: var(--red-600);
}

.product-card__avail--low {
  background: var(--warning);
}

.product-card__rating .stars {
  color: var(--amber);
  letter-spacing: 1px;
}

.product-card__footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-card__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  /* On a narrow phone the was-price, the price and the saving badge
     together are wider than the card, so they are allowed to wrap instead
     of pushing the Add button off the edge. */
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.product-card__price small {
  font-weight: 500;
  font-size: 12px;
  color: var(--gray-600);
  text-decoration: line-through;
  margin-right: 5px;
}

.product-card__cta {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, var(--blue-600), var(--blue-700));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 6px 14px -6px rgba(20, 86, 245, 0.5);
}

.product-card__cta:hover {
  box-shadow: 0 8px 18px -4px rgba(20, 86, 245, 0.6);
}

.product-card__cta svg {
  width: 17px;
  height: 17px;
}

/* ---------- Game tile card: compact dark tiles for the Gaming
   horizontal-scroll row — full-bleed art/gradient, corner discount
   badge, bottom overlay label. A distinct look for a "browse fast" row,
   not a replacement for .product-card used everywhere else. ---------- */
.game-card {
  position: relative;
  flex: 0 0 168px;
  height: 210px;
  scroll-snap-align: start;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  color: inherit;
  background: linear-gradient(155deg, #1b2f6e, #0d1633 70%);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.game-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.game-card__media {
  position: absolute;
  inset: 0;
}

.game-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card__icon {
  position: absolute;
  right: -10px;
  bottom: 30%;
  width: 88px;
  height: 88px;
  color: #fff;
  opacity: 0.14;
}

.game-card__icon svg {
  width: 100%;
  height: 100%;
}

.game-card__badge {
  position: absolute;
  top: 9px;
  right: 9px;
  background: var(--gold);
  color: var(--ink-900);
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  z-index: 1;
}

.game-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 12px 12px;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 24, 0.88) 55%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.game-card__cat {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.game-card__name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.game-card__price {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  margin-top: 2px;
}

.game-card__price small {
  font-weight: 500;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: line-through;
  margin-left: 5px;
}

/* ---------- Special offers banner ---------- */

.offer-banner {
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--blue-700), var(--blue-600) 60%, #3a7bff);
  color: #fff;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.offer-banner::after {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.offer-banner__copy h3 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 3vw, 28px);
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

.offer-banner__copy p {
  margin: 0 0 18px;
  color: #eef3ff;
  max-width: 460px;
  font-size: 14.5px;
  position: relative;
  z-index: 1;
}

.offer-banner .btn-solid {
  background: #fff;
  color: var(--blue-700);
  position: relative;
  z-index: 1;
}

.offer-banner .btn-solid:hover {
  box-shadow: 0 14px 24px -10px rgba(0, 0, 0, 0.35);
}

/* ---------- Data bundle network tabs ---------- */

.network-tabs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
}

.network-tabs__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 0;
  background: var(--ink-900);
  border-radius: var(--radius-pill);
  transition: transform 0.35s var(--ease), width 0.35s var(--ease);
  z-index: 0;
}

.network-tab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.network-tab:hover:not(.active) {
  color: var(--blue-700);
}

.network-tab.active {
  color: #fff;
}

.network-tab .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ---------- Product variation option pills ---------- */

.variation-option {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.variation-option:hover:not(.active, :disabled) {
  border-color: var(--gray-400);
}

.variation-option:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.variation-option.active {
  border-color: var(--ink-900);
  color: var(--ink-900);
}

/* ---------- Reviews ---------- */

.review-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.review-card__stars {
  color: var(--amber);
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 10px;
}

.review-card p.quote {
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.6;
  margin: 0 0 18px;
}

.review-card__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}

.review-card__avatar--photo {
  object-fit: cover;
  border: 1px solid var(--border);
}

.review-card__who strong {
  display: block;
  font-size: 13.5px;
}

/* ---------- Review photo picker (product + data pages) ---------- */

.review-photo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.review-photo__pick {
  align-self: flex-start;
}

.review-photo__hint {
  font-size: 12px;
  color: var(--gray-600);
  line-height: 1.4;
}

.review-photo__preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-photo__preview img {
  width: 68px;
  height: 68px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
}

.review-photo__remove {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--blue-600);
  cursor: pointer;
}

.review-photo__remove:hover {
  text-decoration: underline;
}

.db-review-card__who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.db-review-card__photo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.review-card__who span {
  font-size: 12px;
  color: var(--gray-600);
}

/* ---------- Official communities ---------- */

.community-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.community-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
}

.community-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-100);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}

.community-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  color: #fff;
  transition: background var(--dur) var(--ease);
}

.community-card:hover .community-card__icon {
  background: var(--blue-600);
}

.community-card__icon svg {
  width: 22px;
  height: 22px;
}

.community-card strong {
  font-size: 13px;
  color: var(--ink-900);
}

.community-card .verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green-600);
}

.community-card .verified svg {
  width: 11px;
  height: 11px;
}

/* ---------- FAQ ---------- */

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 20px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq-item:has(.faq-item__q[aria-expanded="true"]) {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-soft);
}

.faq-item__q {
  width: 100%;
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-family: inherit;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-900);
  background: none;
  border: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: color var(--dur-fast) var(--ease);
}

.faq-item__q:hover {
  color: var(--blue-700);
}

.faq-item__q .chev {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--blue-600);
  transition: transform var(--dur) var(--ease);
}

.faq-item__q[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* The 0fr/1fr grid-track trick animates height:auto smoothly —
   no JS height measurement, no snap. */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.22s var(--ease), opacity 0.22s var(--ease);
}

.faq-item__panel.open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item__panel-inner {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  color: var(--gray-600);
  font-size: 13.5px;
  line-height: 1.6;
}

.faq-item__panel.open .faq-item__panel-inner {
  padding-bottom: 18px;
}

/* ---------- Contact / support CTA ---------- */

.support-cta {
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.support-cta__copy h3 {
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.4vw, 24px);
  margin: 0 0 8px;
}

.support-cta__copy p {
  margin: 0;
  color: var(--gray-600);
  font-size: 14.5px;
  max-width: 440px;
}

.support-cta__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink-900);
  color: #b7c0d6;
  padding: 56px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand p {
  font-size: 13.5px;
  line-height: 1.7;
  margin: 14px 0 18px;
  max-width: 280px;
  color: #9aa5c0;
}

.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-socials a:hover {
  background: var(--blue-600);
  text-decoration: none;
}

.footer-socials svg {
  width: 16px;
  height: 16px;
}

.footer-col h4 {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.footer-col a {
  color: #b7c0d6;
  font-size: 13.5px;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 22px 0;
  font-size: 12.5px;
  color: #8b93a1;
}

.footer-bottom__badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-bottom__badges span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---------- Mobile bottom nav: liquid navigation ----------
   A lifted circular indicator "melts" into the bar via two
   metaball-style blobs. The whole lift-and-blend effect stays
   inside the nav's own opaque surface (never pokes into page
   content above it), so it looks right regardless of which
   section happens to be scrolled underneath a fixed bar. ---- */

.navigation {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  /* The 80px is the row the icons live in. On a phone with a home
     indicator the safe area is added to that rather than taken out of it,
     or the row is squashed and the lifted icon misses its circle. */
  height: calc(80px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  list-style: none;
  justify-content: space-around;
  align-items: flex-end;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px -12px rgba(17, 23, 42, 0.12);
}

.navigation .list {
  position: relative;
  flex: 1;
  max-width: 84px;
  height: 60px;
}

.navigation .list a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--gray-600);
}

.navigation .list a:hover {
  text-decoration: none;
}

.navigation .list a .icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transition: transform 0.45s var(--ease), color 0.45s var(--ease);
}

.navigation .list a .icon svg {
  width: 21px;
  height: 21px;
}

.navigation .list a .text {
  position: absolute;
  bottom: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease) 0.05s, transform 0.4s var(--ease) 0.05s;
  white-space: nowrap;
}

.navigation .list.active a .icon {
  transform: translateY(-30px);
  color: #fff;
}

.navigation .list.active a .text {
  opacity: 1;
  transform: translateY(0);
}

.navigation .indicator {
  position: absolute;
  top: -6px;
  left: 0;
  width: 52px;
  height: 52px;
  background: linear-gradient(160deg, var(--blue-500), var(--blue-700));
  border-radius: 50%;
  transform: translateX(15px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
  box-shadow: 0 10px 18px -6px rgba(20, 86, 245, 0.5);
}

.navigation .indicator::before,
.navigation .indicator::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 18px;
  height: 18px;
  background: transparent;
}

.navigation .indicator::before {
  left: -18px;
  border-bottom-right-radius: 18px;
  box-shadow: 6px 6px 0 0 var(--white);
}

.navigation .indicator::after {
  right: -18px;
  border-bottom-left-radius: 18px;
  box-shadow: -6px 6px 0 0 var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .navigation .list a .icon,
  .navigation .list a .text,
  .navigation .indicator {
    transition: none;
  }
}

/* ---------- Site-wide responsive ---------- */

@media (max-width: 1180px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .quick-cats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .community-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .main-nav,
  .site-header .search-bar,
  .header-actions__auth {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    row-gap: 24px;
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Two across on phones: a single column turned pages with a lot of
     categories (Superstore, Categories) into a very long scroll. */
  .quick-cats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .quick-cat {
    padding: var(--space-4);
  }
  .quick-cat__icon {
    width: 40px;
    height: 40px;
  }
  .quick-cat span.label {
    font-size: 15px;
    margin-top: var(--space-1);
  }
  .quick-cat span.desc {
    font-size: 12.5px;
  }
  .community-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .offer-banner,
  .support-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .navigation {
    display: flex;
  }
  body.has-tabbar {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .wallet-pill span.label-text {
    display: none;
  }
}

/* ============================================================
   Legend's Best — animations & floating widgets
   ============================================================ */

/* Motion that whispers: one-shot entrances and quiet hover response —
   nothing loops forever except the single chat affordance below, and
   even that is slow and soft rather than a loud attention-seeker. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pop-bounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.86); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes slide-up-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring-quiet {
  0%, 78%, 100% { box-shadow: 0 0 0 0 rgba(20, 86, 245, 0), 0 10px 22px -10px rgba(11, 63, 209, 0.4); }
  88% { box-shadow: 0 0 0 10px rgba(20, 86, 245, 0.14), 0 10px 22px -10px rgba(11, 63, 209, 0.4); }
}

.product-card__tag {
  animation: rise-in 0.4s var(--ease) both;
}

.product-card__cta.is-popping {
  animation: pop-bounce 0.32s var(--ease);
}

.community-card__icon {
  transition: transform var(--dur) var(--ease);
}

.community-card:hover .community-card__icon {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .product-card__tag {
    animation: none !important;
  }
}

/* ---------- Floating widget stack (support FAB + back-to-top) ---------- */

.floating-stack {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 46;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.back-to-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top svg {
  width: 19px;
  height: 19px;
}

.support-fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.support-fab__btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: var(--blue-600);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 22px -10px rgba(11, 63, 209, 0.4);
  animation: pulse-ring-quiet 6s ease-in-out infinite;
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}

.support-fab__btn:hover {
  transform: translateY(-1px);
}

/* Unread-reply count on the chat button. Sits on the button rather than
   inside the panel, because the whole point is to be seen while the panel
   is shut. */
.support-fab__btn {
  position: relative;
}

.support-fab__dot {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger, #e11d48);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}

/* The button swaps to a close icon when open, so the count would be
   claiming unread replies over a thread the customer is already reading. */
.support-fab.open .support-fab__dot {
  display: none;
}

.support-fab__btn svg {
  width: 26px;
  height: 26px;
}

.support-fab__btn .close-icon {
  display: none;
}

.support-fab.open .support-fab__btn .chat-icon {
  display: none;
}

.support-fab.open .support-fab__btn .close-icon {
  display: block;
}

.support-fab__panel {
  display: none;
  width: min(380px, calc(100vw - 24px));
  background: #f6f8ff;
  border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(6, 12, 34, 0.45);
  padding: 0;
  overflow: hidden;
}
/* ---- The panel, per the reference: a blue band on top with the headset,
   name and "we typically reply" line, then either the guest menu or the
   conversation, then a three-tab bar. ---- */
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, #0a2eff, #1e4bff 60%, #2d5cff);
  color: #fff;
}
.chat-head__icon {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.16); display: inline-flex; align-items: center; justify-content: center;
}
.chat-head__icon svg { width: 22px; height: 22px; }
.chat-head__text { flex: 1; min-width: 0; }
.chat-head__text strong { display: block; font-size: 15px; letter-spacing: -0.01em; }
.chat-head__text span { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: 0.92; margin-top: 2px; }
.chat-head__dot { width: 8px; height: 8px; border-radius: 50%; background: #2ee27a; box-shadow: 0 0 0 3px rgba(46, 226, 122, 0.25); }
.chat-head__btn {
  width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.chat-head__btn:hover { background: rgba(255, 255, 255, 0.16); }
.chat-head__btn svg { width: 18px; height: 18px; }
.chat-head__btn[aria-pressed="true"] { opacity: 0.55; }
.chat-body { padding: 14px 14px 6px; }
.chat-cta {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 14px 14px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, #0a2eff, #1e4bff); color: #fff; font: inherit; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(10, 46, 255, 0.6);
}
.chat-cta:hover { text-decoration: none; filter: brightness(1.05); }
.chat-cta__icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.chat-cta__icon svg { width: 20px; height: 20px; }
.chat-cta__text { flex: 1; min-width: 0; }
.chat-cta__text strong { display: block; font-size: 15px; }
.chat-cta__text span { display: block; font-size: 12px; opacity: 0.9; margin-top: 2px; }
.chat-cta__go { flex: 0 0 auto; display: inline-flex; }
.chat-cta__go svg { width: 18px; height: 18px; }
.chat-section { margin: 16px 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-600); }
.chat-faq { border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.chat-faq a {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; color: var(--ink-900); font-size: 13.5px; font-weight: 500;
  border-bottom: 1px solid var(--border); text-decoration: none;
}
.chat-faq a:last-child { border-bottom: none; }
.chat-faq a:hover { background: var(--blue-50); text-decoration: none; }
.chat-faq a svg { width: 18px; height: 18px; color: var(--ink-700); flex: 0 0 auto; }
.chat-faq a .chat-faq__go { margin-left: auto; color: var(--gray-400); }
.chat-tabs {
  display: flex; justify-content: space-around; padding: 10px 8px 8px; border-top: 1px solid var(--border); background: #fff;
}
.chat-tabs a, .chat-tabs button {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 14px; border: none; background: none;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-600); cursor: pointer; text-decoration: none; border-radius: 10px;
}
.chat-tabs a:hover, .chat-tabs button:hover { text-decoration: none; color: var(--blue-600); }
.chat-tabs .is-active { color: var(--blue-600); }
.chat-tabs svg { width: 20px; height: 20px; }
.chat-powered { text-align: center; font-size: 11px; color: var(--gray-600); padding: 0 0 10px; background: #fff; margin: 0; }
.chat-fullscreen {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; opacity: 0.92; text-decoration: none;
}
.chat-fullscreen:hover { opacity: 1; text-decoration: none; }
.chat-fullscreen svg { width: 15px; height: 15px; }
.support-fab__panel .chat-scroll { height: 300px; margin: 0; padding: 12px 14px; background: #fff; }
.support-fab__panel .chat-thread-bar { margin: 0; padding: 10px 14px 6px; background: #fff; }
.support-fab__panel .chat-compose { padding: 10px 12px 12px; background: #fff; border-top: 1px solid var(--border); }
/* Phone: the panel is the whole screen bar the tab bar, as the mobile reference. */
@media (max-width: 640px) {
  .support-fab.open .support-fab__panel {
    position: fixed; left: 8px; right: 8px; top: 8px; bottom: 74px; width: auto;
    display: flex; flex-direction: column;
  }
  .support-fab.open .support-fab__panel .chat-body { flex: 1; overflow-y: auto; }
  .support-fab.open .support-fab__panel .chat-scroll { flex: 1; height: auto; min-height: 160px; }
  .support-fab.open .support-fab__btn { display: none; }
}

.support-fab.open .support-fab__panel {
  display: block;
  animation: slide-up-in var(--dur) var(--ease);
}

/* .widget-title is a small floating-panel label, not a document heading —
   using <h4> here put a heading in the accessibility tree ahead of (or
   disconnected from) the page's real h1/h2/h3 outline. Font values below
   replicate the h1-h4 rule above so the switch is visually a no-op. */
.widget-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.support-fab__panel .widget-title {
  margin: 0 0 4px;
  font-size: 15.5px;
}

.support-fab__panel p {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--gray-600);
}

.support-fab__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.support-fab__option:last-child {
  margin-bottom: 0;
}

.support-fab__option:hover {
  border-color: var(--blue-500);
  background: var(--blue-50);
}

.support-fab__option svg {
  width: 17px;
  height: 17px;
  color: var(--blue-600);
  flex-shrink: 0;
}

/* ---- Live chat panel (replaces the canned-topic list once opened) ---- */
.chat-msg {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.4;
}
.chat-msg p { margin: 0; font-size: inherit; color: inherit; }
.chat-msg--customer {
  align-self: flex-end;
  background: var(--blue-600);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg--admin {
  align-self: flex-start;
  background: var(--blue-50);
  color: var(--ink-900);
  border-bottom-left-radius: 4px;
}

/* Every message says when it was sent. Without it a thread read the next
   morning gives no clue which lines are new. */
.chat-msg time {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1;
  opacity: 0.72;
}
.chat-msg--customer time { text-align: right; }

.chat-msg__empty {
  margin: auto 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--gray-600);
}

.chat-scroll {
  height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* A fixed height rather than a max: the panel then stops resizing itself
     as messages arrive, which was making the whole widget jump on the page
     every time a reply came in. */
}

/* One pill per conversation. It scrolls sideways instead of wrapping,
   because a customer with six open orders would otherwise push the messages
   off the bottom of the panel. */
.chat-thread-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-top: 8px;
  scrollbar-width: none;
}
.chat-thread-bar::-webkit-scrollbar { display: none; }

.chat-thread-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: #fff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-thread-pill:hover { border-color: var(--blue-500); color: var(--ink-900); }
.chat-thread-pill.is-active {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: #fff;
}
.chat-thread-pill__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red-500, #e5484d);
  color: #fff;
  font-size: 9.5px;
  line-height: 1;
}
.chat-thread-pill.is-active .chat-thread-pill__dot {
  background: #fff;
  color: var(--blue-600);
}

/* Sending / Sent / the error. Reserved height so the compose row doesn't
   shift down the moment a send starts. */
.chat-status {
  min-height: 14px;
  margin: 0 0 6px !important;
  font-size: 11px !important;
  line-height: 14px;
}
.chat-status--pending { color: var(--gray-600) !important; }
.chat-status--sent { color: var(--green-600, #17803d) !important; }
.chat-status--error { color: var(--red-600, #cd2b31) !important; }

.chat-compose-wrap { position: relative; }

.chat-compose {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-compose .chat-input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font: inherit;
  font-size: 13px;
  /* 16px on iOS or Safari zooms the whole page when the field is focused;
     the mobile block below raises it for exactly that reason. */
}
.chat-compose .chat-input:focus {
  outline: none;
  border-color: var(--blue-500);
}
.chat-compose .chat-send {
  height: auto;
  padding: 0 14px;
  flex: 0 0 auto;
}

/* Attach, emoji and record. Square, quiet, and 34px so they stay a
   comfortable tap target without crowding the text field off the row. */
.chat-icon-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--gray-600);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-icon-btn:hover { border-color: var(--blue-500); color: var(--blue-600); }
.chat-icon-btn svg { width: 17px; height: 17px; }

/* ---- The file waiting to be sent ---- */
.chat-staged {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-bottom: 8px;
  background: var(--gray-50, #f8f9fc);
}
.chat-staged__row { display: flex; align-items: center; gap: 10px; }
.chat-staged__thumb {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: #fff;
}
.chat-staged__thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  color: var(--blue-600);
}
.chat-staged__thumb--icon svg { width: 18px; height: 18px; }
.chat-staged__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-staged__meta strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-staged__meta em { font-style: normal; font-size: 11px; color: var(--gray-600); }
.chat-staged__remove {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-600);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.chat-staged__remove:hover { background: var(--gray-100, #eef0f5); color: var(--ink-900); }

.chat-progress {
  height: 4px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--gray-100, #eef0f5);
  overflow: hidden;
}
.chat-progress span {
  display: block;
  height: 100%;
  background: var(--blue-600);
  border-radius: 999px;
  transition: width 120ms linear;
}

/* ---- Emoji ---- */
.chat-emoji {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 172px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px;
  padding: 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 5;
}
.chat-emoji__btn {
  border: none;
  background: transparent;
  font-size: 19px;
  line-height: 1;
  padding: 5px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.chat-emoji__btn:hover { background: var(--blue-50); }


/* ---- Stickers ----
   Drawn by the page from a name, so the same set suits the customer's side,
   the admin's and a reseller's, and nothing is loaded from anywhere. */
.chat-stickers {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  z-index: 5;
}
.chat-stickers__btn {
  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--blue-600, #0164ce);
}
.chat-stickers__btn:hover { background: var(--blue-50); }
.chat-stickers__btn svg { width: 100%; height: auto; display: block; }
.chat-sticker { display: block; width: 86px; height: 86px; color: var(--blue-600, #0164ce); }
.chat-sticker svg { width: 100%; height: 100%; }
.chat-msg--admin .chat-sticker { color: var(--blue-700, #0059c4); }

/* ---- Attachments inside a message ---- */
.chat-msg--has-att { padding: 6px; }
.chat-msg--has-att p { padding: 2px 6px 0; }
.chat-msg--has-att time { padding: 0 6px; }

.chat-att { display: block; margin-bottom: 4px; }

.chat-att--image img,
.chat-att--video {
  display: block;
  /* Bounded on both sides with the aspect ratio left alone. "cover" here
     cropped a screenshot to a square, which is exactly the part of a
     screenshot someone needs to see. Tapping it opens the full file. */
  max-width: 240px;
  max-height: 260px;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.06);
}

.chat-att--file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.18);
  text-decoration: none;
  color: inherit;
  max-width: 240px;
}
/* On the pale incoming bubble a translucent white panel is invisible. */
.chat-msg--admin .chat-att--file { background: rgba(0, 0, 0, 0.05); }
.chat-att__icon { flex: 0 0 auto; display: inline-flex; }
.chat-att__icon svg { width: 20px; height: 20px; }
.chat-att__meta { min-width: 0; display: flex; flex-direction: column; }
.chat-att__meta strong {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-att__meta em { font-style: normal; font-size: 10.5px; opacity: 0.75; }

/* ---- Recording a video note ---- */
.chat-recorder {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 12, 28, 0.72);
}
.chat-recorder__box {
  width: min(340px, 100%);
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 14px;
  text-align: center;
}
.chat-recorder__preview {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  border-radius: var(--radius-md);
  background: #000;
  object-fit: cover;
  /* Front camera. Unmirrored, people move the wrong way when framing. */
  transform: scaleX(-1);
}
.chat-recorder__time {
  margin: 8px 0 !important;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--red-600, #cd2b31) !important;
}
.chat-recorder__actions { display: flex; gap: 8px; }
.chat-recorder__actions > * { flex: 1; justify-content: center; }

/* The chat button on an order card, and the count of replies waiting in
   that order's own thread. */
.order-card__chat {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-card__chat-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red-500, #e5484d);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 640px) {
  .floating-stack {
    bottom: 96px;
    right: 14px;
  }

  .support-fab__panel {
    /* The panel is anchored to the bottom-right of a phone screen, so
       "calc(100vw - 28px)" is as wide as it can be without hanging off the
       left edge. */
    width: calc(100vw - 28px);
    padding: 0;
  }

  .chat-scroll {
    /* Roughly half the viewport, so the keyboard opening does not leave the
       compose row underneath it. */
    height: min(46vh, 300px);
  }

  .chat-compose .chat-input {
    /* Anything under 16px makes iOS Safari zoom in on focus and leave the
       page scrolled sideways when the keyboard closes. */
    font-size: 16px;
  }

  /* Three icon buttons, a text field and Send do not fit across a phone at
     full size. The icons shrink; the field keeps its width. */
  .chat-icon-btn { width: 30px; height: 30px; }
  .chat-icon-btn svg { width: 15px; height: 15px; }
  .chat-compose { gap: 4px; }
  .chat-compose .chat-send { padding: 0 11px; }
  .chat-att--image img, .chat-att--video { max-width: 200px; }
}


/* ---------- Track order widget ---------- */

.track-order {
  background: linear-gradient(135deg, var(--ink-900), #16213f);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}

.track-order__copy {
  flex: 1;
  min-width: 220px;
}

.track-order__copy h3 {
  font-family: var(--font-heading);
  margin: 0 0 8px;
  font-size: clamp(19px, 2.4vw, 24px);
}

.track-order__copy p {
  margin: 0;
  color: #b7c0d6;
  font-size: 14px;
  max-width: 380px;
}

.track-order__form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  max-width: 420px;
}

.track-order__form input {
  flex: 1;
  min-width: 180px;
  height: 48px;
  border-radius: var(--radius-md);
  padding: 0 16px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
}

.track-order__form input::placeholder {
  color: #8b93a1;
}

.track-order__form input:focus {
  outline: none;
  border-color: var(--blue-500);
  background: rgba(255, 255, 255, 0.14);
}

.track-order__form button {
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(180deg, var(--blue-500), var(--blue-700));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.track-order__form button:disabled {
  opacity: 0.65;
  cursor: progress;
}

.track-order__result {
  width: 100%;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 20px;
  display: none;
}

.track-order__result.show {
  display: block;
  animation: slide-up-in 0.3s ease;
}

/* The link out of the tracking summary into the order's own page. It is an
   <a>, so it needs the flex centring a <button> gets for free. */
.track-order__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  text-decoration: none;
}

.track-order__result-head {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: #b7c0d6;
  margin-bottom: 4px;
}

.track-order__result-head strong {
  color: #fff;
}

.timeline {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.timeline__step {
  flex: 1;
  min-width: 82px;
  text-align: center;
  position: relative;
  padding-top: 28px;
}

.timeline__step::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.timeline.animate-in .timeline__step::before {
  transform: scaleX(1);
}

.timeline.animate-in .timeline__step:nth-child(2)::before { transition-delay: 0.08s; }
.timeline.animate-in .timeline__step:nth-child(3)::before { transition-delay: 0.16s; }
.timeline.animate-in .timeline__step:nth-child(4)::before { transition-delay: 0.24s; }
.timeline.animate-in .timeline__step:nth-child(5)::before { transition-delay: 0.32s; }

.timeline__step:first-child::before {
  display: none;
}

.timeline__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__dot svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.timeline__step.done .timeline__dot {
  background: var(--green-600);
  border-color: var(--green-600);
}

.timeline__step.done .timeline__dot svg {
  opacity: 1;
  transform: scale(1);
}

.timeline__step.done::before {
  background: var(--green-600);
}

.timeline__step.active .timeline__dot {
  background: var(--blue-500);
  border-color: var(--blue-500);
  animation: breathe 1.8s ease-in-out infinite;
}

/* A cancelled order is not a "success" step — it must never read as the
   same green "done" state a completed order gets. */
.timeline__step.cancelled .timeline__dot {
  background: var(--red-600);
  border-color: var(--red-600);
}

.timeline__step.cancelled .timeline__dot svg {
  opacity: 1;
  transform: scale(1);
}

.timeline__step.cancelled span {
  color: #fff;
  font-weight: 600;
}

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.timeline__step span {
  font-size: 11px;
  color: #b7c0d6;
  display: block;
}

.timeline__step.done span,
.timeline__step.active span {
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   Shop / catalog / product-detail pages
   ============================================================ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 18px;
}

.breadcrumb a {
  color: var(--gray-600);
}

.breadcrumb a:hover {
  color: var(--blue-600);
}

.breadcrumb span:last-child {
  color: var(--ink-900);
  font-weight: 600;
}

.shop-hero {
  background: linear-gradient(180deg, #fbfcff 0%, #f4f6fb 100%);
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border);
}

.shop-hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink-900);
}

.shop-hero p {
  color: var(--gray-600);
  font-size: 15px;
  max-width: 560px;
  margin: 0 0 24px;
}

/* A category with a custom hero background (admin-configured, e.g. a
   branded gradient) switches its text to white for legibility — color
   inherits down to the badges/breadcrumb, h1/p get an explicit override
   since they otherwise set their own color. */
.shop-hero--branded {
  color: #fff;
}
/* The breadcrumb's separators and inactive crumbs inherit a slate grey that
   is close to unreadable on a dark branded hero, so they are lifted to a
   dimmed white first — the current crumb and the links stay solid white. */
.shop-hero--branded .breadcrumb,
.shop-hero--branded .breadcrumb span {
  color: rgba(255, 255, 255, 0.7);
}

.shop-hero--branded h1,
.shop-hero--branded p,
.shop-hero--branded .breadcrumb a,
.shop-hero--branded .breadcrumb span:last-child {
  color: #fff;
}

/* Result banner after returning from the payment page. Three tones, because
   "paid", "still confirming" and "declined" must never look alike. */
.payment-return {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 62ch;
}

.payment-return[data-tone="ok"] {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.payment-return[data-tone="wait"] {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.payment-return[data-tone="bad"] {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

/* Shown at checkout when the total changed while the page was open. Amber
   rather than red: it is something to read before confirming, not an error. */
.checkout-price-notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
}

/* Saving badge beside a reduced price. Derived from the two real prices,
   so it appears on every card of a discounted product, not just in the
   Flash Sales strip. */
.product-card__off {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

/* Flash-sale countdown. Tabular figures stop the digits jittering as the
   seconds tick over. */
.flash-countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The standard blue CTA clashes with whatever colour admin picked for the
   hero, so on a branded hero it becomes a white button instead — readable
   against any background. */
.shop-hero--branded .btn-solid {
  background: #fff;
  color: var(--ink-900);
  border-color: #fff;
}

.shop-hero--branded .btn-solid:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink-900);
}

.shop-search {
  max-width: 460px;
}

.shop-search input {
  height: 48px;
}

.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ---- Category pills under the shop hero ---- */
.cat-pills {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.cat-pills__track {
  display: flex;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-pills__track::-webkit-scrollbar { display: none; }
.cat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: #f1f3f9;
  color: var(--ink-900);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.cat-pill:hover { background: var(--blue-50); color: var(--blue-700); transform: translateY(-1px); }
.cat-pill.active {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 8px 18px rgba(29, 78, 216, 0.28);
}
.cat-pill.active::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 1024px) {
  .cat-pills__track { justify-content: center; flex-wrap: wrap; }
}

/* The scrim behind the mobile filter drawer. It only ever had rules inside
   the max-width:900px block, so above that width it fell back to a plain
   block element — and being a direct child of the two-column .shop-layout
   grid, it silently took the sidebar cell.
   
   The result on every desktop: filters sprawled across the content column,
   and the entire product grid was squeezed into the 250px sidebar slot on
   the row below. Invisible, so nothing looked broken until you saw the page.
   
   It has no job at desktop width — the filters are always on screen there —
   so it is removed from the layout entirely and the mobile block turns it
   back on when the drawer opens. */
.filter-scrim {
  display: none;
}

.filter-panel {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-panel__head h3 {
  font-size: 15px;
  font-weight: 600;
}

.filter-panel__head button {
  background: none;
  border: none;
  color: var(--blue-600);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.filter-group h4 {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: 0 0 14px;
}

.filter-checkbox,
.filter-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-700);
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
}

.filter-checkbox input,
.filter-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-600);
  cursor: pointer;
  flex-shrink: 0;
}

.price-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-range-inputs input {
  width: 100%;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 13.5px;
  color: var(--ink-900);
}

.price-range-inputs input:focus {
  outline: none;
  border-color: var(--blue-500);
}

/* The word between Min and Max. --gray-400 measured 2.73:1 against the
   filter panel behind it. */
.price-range-inputs span {
  color: var(--gray-600);
  font-size: 13.5px;
  flex-shrink: 0;
}

.filter-panel__close {
  display: none;
}

.sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sort-bar__count {
  font-size: 13.5px;
  color: var(--gray-600);
}

.sort-bar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
}

.filter-toggle svg {
  width: 16px;
  height: 16px;
}

.sort-bar__select {
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--white);
  padding: 0 32px 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%2311172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.sort-bar__select:focus {
  outline: none;
  border-color: var(--blue-500);
}

.product-grid {
  min-height: 200px;
}

.product-grid .product-card {
  flex: none;
  width: 100%;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-600);
}

.empty-state p {
  margin: 0 0 16px;
  font-size: 14.5px;
}

.empty-state button {
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--blue-600);
  color: var(--blue-600);
  background: var(--white);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

@media (max-width: 900px) {
  .shop-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: var(--white);
    z-index: 55;
    padding: 20px;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
    transform: translateX(-105%);
    transition: transform var(--dur) var(--ease);
    gap: 22px;
  }

  .filter-panel.open {
    transform: translateX(0);
  }

  .filter-panel__close {
    display: flex;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--blue-50);
    color: var(--blue-600);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-bottom: -6px;
    transition: background var(--dur-fast) var(--ease);
  }

  .filter-panel__close:hover {
    background: var(--blue-100);
  }

  .filter-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 23, 42, 0.45);
    z-index: 54;
  }

  .filter-scrim.open {
    display: block;
  }

  .filter-toggle {
    display: flex;
  }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Product detail page ---------- */

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.product-detail__gallery {
  position: sticky;
  top: 84px;
}

.product-detail__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: #f2f3f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-detail__media svg {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 220px;
  height: 220px;
  color: var(--ink-900);
  opacity: 0.08;
}

.product-detail__cat {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: block;
}

.product-detail__name {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--ink-900);
}

.product-detail__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--gray-600);
  margin-bottom: 22px;
}

.product-detail__rating .stars {
  color: var(--amber);
  letter-spacing: 2px;
}

.product-detail__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.product-detail__price {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-900);
}

.product-detail__price-was {
  font-size: 16px;
  color: var(--gray-600);
  text-decoration: line-through;
}

.product-detail__desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 26px;
}

.product-detail__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.product-detail__meta-row {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
}

.product-detail__meta-row svg {
  width: 18px;
  height: 18px;
  color: var(--blue-600);
  flex-shrink: 0;
  margin-top: 1px;
}

.product-detail__meta-row strong {
  display: block;
  color: var(--ink-900);
  font-weight: 600;
}

.product-detail__meta-row span {
  color: var(--gray-600);
}

.product-detail__meta-row ul {
  margin: 4px 0 0;
  padding-left: 18px;
  color: var(--gray-600);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  height: 48px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  overflow: hidden;
}

.qty-stepper button {
  width: 44px;
  height: 100%;
  border: none;
  background: var(--white);
  font-size: 18px;
  color: var(--ink-900);
  cursor: pointer;
}

.qty-stepper button:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.qty-stepper input {
  width: 52px;
  height: 100%;
  border: none;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-900);
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.star-input {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.star-input button {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--border);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.star-input button:hover {
  transform: scale(1.15);
}

.star-input button.on {
  color: var(--amber);
}

.product-detail__actions {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.product-detail__actions .btn-solid {
  flex: 1;
  height: 52px;
  font-size: 15px;
}

.product-detail__actions .icon-btn {
  width: 52px;
  height: 52px;
}

.detail-section {
  padding: 40px 0;
  border-top: 1px solid var(--border);
}

.detail-section h2 {
  font-size: 20px;
  margin: 0 0 20px;
}

@media (max-width: 900px) {
  .product-detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .product-detail__gallery {
    position: static;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ============================================================
   Handcrafted micro-interactions
   ============================================================ */

/* ---------- Scroll reveal (fade-up once, staggered) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Tactile press states ---------- */

.btn-solid,
.btn-outline,
.product-card__cta,
.icon-btn,
.support-fab__btn,
.back-to-top,
.quick-cat,
.community-card,
.network-tab,
.filter-toggle,
.sort-bar__select,
.track-order__form button {
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.btn-solid:active,
.btn-outline:active,
.product-card__cta:active,
.icon-btn:active,
.support-fab__btn:active,
.back-to-top:active,
.track-order__form button:active {
  transform: scale(0.95);
}

/* ---------- Add-to-cart "fly to header" feedback ---------- */

.fly-dot {
  position: fixed;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--blue-600);
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px -2px rgba(20, 86, 245, 0.5);
}

.fly-dot.go {
  animation: fly-to-cart 0.6s cubic-bezier(0.3, 0.6, 0.35, 1) forwards;
}

@keyframes fly-to-cart {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.3);
    opacity: 0;
  }
}

.icon-btn .badge.bump {
  animation: pop-bounce 0.35s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .fly-dot {
    display: none;
  }
}

/* ============================================================
   Account pages: wallet, orders, account settings, support, legal
   ============================================================ */

.account-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 40px);
}

/* ---------- Wallet ---------- */

.balance-card {
  background: linear-gradient(135deg, var(--ink-900), #16213f);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 40px);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.balance-card__label {
  font-size: 13px;
  color: #b7c0d6;
  margin-bottom: 8px;
}

.balance-card__amount {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.balance-card__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.balance-card__actions .btn-outline {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
}

.balance-card__actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.pay-method {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* The radio sits invisibly inside its own card. It must be sized to the card:
   inside a .field it also picks up the full-width text input rule, and an
   absolutely placed 100%-wide input hanging off the card's edge made the
   whole page wider than a phone screen. */
.pay-method input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.pay-method:has(input:focus-visible) {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

.pay-method svg {
  width: 24px;
  height: 24px;
  color: var(--blue-600);
}

.pay-method span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
}

.pay-method:hover:not(:has(input:checked)) {
  border-color: var(--gray-400);
}

.pay-method:has(input:checked) {
  border-color: var(--blue-600);
  background: var(--blue-50);
}

.amount-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 20px;
}

.amount-quick button {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
}

.amount-quick button.active,
.amount-quick button:hover {
  border-color: var(--blue-600);
  color: var(--blue-600);
}

.tx-list {
  display: flex;
  flex-direction: column;
}

.tx-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}

.tx-item:last-child {
  border-bottom: none;
}

.tx-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--green-50);
  color: var(--green-600);
}

.tx-item__icon.debit {
  background: #fbeceb;
  color: var(--red-600);
}

.tx-item__icon svg {
  width: 18px;
  height: 18px;
}

.tx-item__body {
  flex: 1;
  min-width: 0;
}

.tx-item__body strong {
  display: block;
  font-size: 14px;
  color: var(--ink-900);
}

.tx-item__body span {
  font-size: 12.5px;
  color: var(--gray-600);
}

.tx-item__amount {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  flex-shrink: 0;
}

.tx-item__amount.credit {
  color: var(--green-600);
}

.tx-item__amount.debit {
  color: var(--red-600);
}

/* ---------- Status badges (orders) ---------- */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge--pending { background: #fef6e7; color: var(--amber); }
.status-badge--processing { background: var(--blue-50); color: var(--blue-600); }
.status-badge--completed { background: var(--green-50); color: var(--green-600); }
.status-badge--cancelled { background: #fbeceb; color: var(--red-600); }

/* ---------- Order cards ---------- */

.order-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.order-card__icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: #f2f3f6;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.order-card__icon svg {
  width: 20px;
  height: 20px;
}

.order-card__body {
  flex: 1;
  min-width: 160px;
}

.order-card__body strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink-900);
}

.order-card__meta {
  font-size: 12.5px;
  color: var(--gray-600);
  margin-top: 2px;
}

.order-card__right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.order-card__price {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-900);
}

.order-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.order-filter-tabs button {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
}

.order-filter-tabs button.active {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}

/* ---------- Account settings ---------- */

.settings-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 20px;
}

.settings-card h3 {
  font-size: 16px;
  margin: 0 0 4px;
}

.settings-card__desc {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0 0 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.switch-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.switch-row strong {
  display: block;
  font-size: 14px;
  color: var(--ink-900);
}

.switch-row span {
  font-size: 12.5px;
  color: var(--gray-600);
}

.switch {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.switch__track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-pill);
  transition: background var(--dur) var(--ease);
}

.switch__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 23, 42, 0.3);
  transition: transform var(--dur) var(--ease);
}

.switch input:checked ~ .switch__track {
  background: var(--blue-600);
}

.switch input:checked ~ .switch__track::before {
  transform: translateX(18px);
}

.switch input:disabled {
  cursor: not-allowed;
}

.switch input:disabled ~ .switch__track {
  opacity: 0.5;
}

.coming-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.danger-zone {
  border-color: #f3d9d8;
  background: #fffaf9;
}

.danger-zone h3 {
  color: var(--red-600);
}

/* The close-account panel. It only appears once someone has pressed the
   button, and it is the last thing they read before an irreversible action,
   so it is set to be read rather than skimmed past. */
/* Focused by script when it opens, to carry the reader into it. It is a
   container, not a control, so it should not draw a ring. */
.acct-close:focus {
  outline: none;
}

.acct-close {
  margin-top: 16px;
  padding: 16px;
  border: 1.5px solid #f3d9d8;
  border-radius: var(--radius-md);
  background: var(--white);
}

.acct-close p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-700);
}

.acct-close .field {
  margin-top: 14px;
  margin-bottom: 0;
}

.btn-danger {
  height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--red-600);
  background: var(--white);
  color: var(--red-600);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.btn-danger:hover:not(:disabled) {
  background: var(--red-600);
  color: #fff;
}

.btn-danger:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* ---------- Support page ---------- */

.support-hero {
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 0 clamp(28px, 4vw, 40px);
}

.support-hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  margin: 0 0 12px;
}

.support-hero p {
  color: var(--gray-600);
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto 28px;
}

.support-hero .search-bar {
  max-width: 480px;
  margin: 0 auto;
}

.support-hero .search-bar input {
  height: 50px;
  /* The support hero is light, so the header's glassy white-on-dark
     search box would be invisible here. */
  background: var(--white);
  border-color: var(--border);
  color: var(--ink-900);
  box-shadow: var(--shadow-soft);
}
.support-hero .search-bar input::placeholder { color: var(--gray-400); }
.support-hero .search-bar svg { color: var(--gray-400); }
/* Same for the shop hero, unless a category has its own dark branding. */
.shop-hero:not(.shop-hero--branded) .search-bar input {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink-900);
  box-shadow: var(--shadow-soft);
}
.shop-hero:not(.shop-hero--branded) .search-bar input::placeholder { color: var(--gray-400); }
.shop-hero:not(.shop-hero--branded) .search-bar svg { color: var(--gray-400); }

.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.contact-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.contact-option:hover {
  border-color: var(--blue-100);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.contact-option__icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-option__icon svg {
  width: 20px;
  height: 20px;
}

.contact-option strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink-900);
  margin-bottom: 4px;
}

.contact-option span {
  font-size: 13px;
  color: var(--gray-600);
}

/* ---------- Legal pages ---------- */

.legal-content {
  max-width: 760px;
}

.legal-content .legal-updated {
  color: var(--gray-600);
  font-size: 13px;
  margin-bottom: 32px;
}

.legal-content .legal-notice {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.6;
  margin-bottom: 36px;
}

.legal-content h2 {
  font-size: 18px;
  margin: 32px 0 12px;
}

.legal-content h2:first-of-type {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-700);
}

.legal-content ul {
  padding-left: 20px;
  margin: 12px 0;
}

@media (max-width: 640px) {
  .balance-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .order-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .order-card__right {
    width: 100%;
    justify-content: space-between;
    gap: 10px 8px;
  }
  /* Status and price share the first line; the buttons take the next one
     in equal widths instead of wrapping one by one. */
  .order-card__right::after { content: ""; flex: 0 0 100%; order: 1; }
  .order-card__right .order-card__price { flex: 1 1 auto; text-align: right; }
  .order-card__right .btn-outline,
  .order-card__right .btn-solid { order: 2; flex: 1 1 auto; padding: 0 14px !important; }
}
/* One text size for every order button. Phones and tablets force 16px on
   all buttons (the iOS zoom rule), which only reached the <button> ones,
   so Chat and Reorder came out larger than Track beside them. */
.order-card__right .btn-outline,
.order-card__right .btn-solid { font-size: 13.5px !important; }

/* ============================================================
   Cart, checkout, wishlist
   ============================================================ */

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: #f2f3f6;
  color: var(--ink-900);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-item__icon svg {
  width: 22px;
  height: 22px;
}

.cart-item__body {
  flex: 1;
  min-width: 0;
}

.cart-item__body strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink-900);
}

.cart-item__body span {
  font-size: 12.5px;
  color: var(--gray-600);
}

.cart-item__qty {
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.cart-item__qty button {
  width: 30px;
  height: 100%;
  border: none;
  background: var(--white);
  font-size: 15px;
  cursor: pointer;
  color: var(--ink-900);
}

.cart-item__qty button:hover {
  background: var(--blue-50);
  color: var(--blue-600);
}

.cart-item__qty span {
  width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
}

.cart-item__price {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-900);
  width: 90px;
  text-align: right;
  flex-shrink: 0;
}

.cart-item__remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--gray-600);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item__remove:hover {
  background: #fbeceb;
  color: var(--red-600);
}

.cart-item__remove svg {
  width: 16px;
  height: 16px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-700);
  padding: 10px 0;
}

.summary-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 16px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink-900);
}

.coupon-row {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}

.coupon-row input {
  flex: 1;
  height: 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--ink-900);
}

.coupon-row input:focus {
  outline: none;
  border-color: var(--blue-500);
}

.coupon-row button {
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-900);
  background: var(--white);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
}

.coupon-row button:hover {
  background: var(--ink-900);
  color: #fff;
}

.coupon-applied {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--green-600);
  font-weight: 700;
  margin-top: -8px;
  margin-bottom: 12px;
}

.coupon-applied.show {
  display: flex;
}

/* ---------- Checkout ---------- */

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.checkout-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.checkout-steps span {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-600);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--border);
}

.checkout-steps span.done {
  background: var(--green-50);
  color: var(--green-600);
}

/* ---- Checkout stepper header: numbered circles + connecting line, plus
   a trust-badge row and SSL note above the form. Purely presentational —
   the actual step logic still lives in .checkout-steps below it. ---- */
.checkout-head {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 20px;
}

.checkout-head__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.checkout-head__top h2 {
  margin: 0;
  font-size: 19px;
}

.checkout-head__ssl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--gray-600);
  font-weight: 600;
}

.checkout-stepper {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.checkout-stepper__circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  background: var(--border);
  color: var(--gray-600);
  flex: 0 0 auto;
  transition: background 0.2s, color 0.2s;
}

.checkout-stepper__step.active .checkout-stepper__circle,
.checkout-stepper__step.done .checkout-stepper__circle {
  background: var(--blue-600, #2451ff);
  color: #fff;
}

.checkout-stepper__step.done .checkout-stepper__circle {
  background: var(--green-600, #1a9d5c);
}

.checkout-stepper__line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
}

.checkout-trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--gray-600);
}

.checkout-trustrow span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---- Progressive disclosure: Payment Method stays visually locked until
   billing contact details are filled in, mirroring a familiar step-gated
   checkout pattern instead of showing every option at once. ---- */
.pay-methods-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  color: var(--gray-600);
  font-size: 13.5px;
  text-align: center;
}

.pay-methods.is-locked {
  display: none;
}

/* ---- Order summary line items with a small item icon, matching the
   rest of the catalog's card language instead of plain text rows. ---- */
.summary-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.summary-line__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--blue-50);
  color: var(--blue-600, #2451ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.summary-line__icon svg {
  width: 17px;
  height: 17px;
}

.summary-line__info {
  flex: 1 1 auto;
  min-width: 0;
}

.summary-line__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gray-900, #16181d);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.summary-line__meta {
  font-size: 12px;
  color: var(--gray-600);
}

.summary-line__price {
  font-size: 13.5px;
  font-weight: 700;
  flex: 0 0 auto;
}

.order-confirmation {
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 20px;
  max-width: 480px;
  margin: 0 auto;
}

.order-confirmation__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.order-confirmation__icon svg {
  width: 34px;
  height: 34px;
}

.order-confirmation h2 {
  font-size: 22px;
  margin: 0 0 10px;
}

.order-confirmation p {
  color: var(--gray-600);
  font-size: 14.5px;
  margin: 0 0 6px;
}

.order-confirmation__id {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--ink-900);
  font-size: 16px;
  margin-bottom: 24px !important;
}

.order-confirmation__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .cart-layout,
  .checkout-layout {
    /* minmax(0, ...) so a long product name can't push the page wider
       than a phone screen. */
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .cart-item {
    flex-wrap: wrap;
  }
  .cart-item__price {
    width: auto;
    text-align: left;
    order: 5;
    margin-left: 62px;
  }
}

/* ---------- Notification panel ---------- */

/* The panel is positioned against this wrapper. Without it the panel
   measured itself against the header instead and opened at the far right
   edge of the screen, away from the bell. */
.notif-wrap { position: relative; }

.notif-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(360px, 90vw);
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  z-index: 50;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.notif-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.notif-panel__head .widget-title {
  font-size: 14.5px;
}

.notif-panel__head button {
  background: none;
  border: none;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.notif-panel__actions { display: flex; gap: 12px; }
.notif-panel__head .notif-count {
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--red-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  display: inline-block;
  text-align: center;
  vertical-align: 1px;
}
/* The reference opens the panel on hover on a desktop and on a tap on a
   phone. Hover only where a hover exists, so a touch screen never gets a
   panel stuck open under a finger. */
@media (hover: hover) and (pointer: fine) {
  .notif-wrap:hover .notif-panel,
  .notif-wrap:focus-within .notif-panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

.notif-list {
  max-height: 360px;
  overflow-y: auto;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.notif-item:hover { text-decoration: none; }
.notif-item__body { flex: 1; min-width: 0; }
.notif-item__body strong { display: block; font-size: 13px; color: var(--ink-900); margin-bottom: 1px; }
.notif-item__body p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-item__go { flex: 0 0 auto; color: var(--gray-400); display: inline-flex; }
.notif-item__go svg { width: 16px; height: 16px; }
.notif-item__time { font-size: 11px; color: var(--gray-600); white-space: nowrap; }
.notif-item--empty { justify-content: center; color: var(--gray-600); font-size: 13px; cursor: default; }
.notif-item__icon--wallet { background: #eef7f1; color: var(--green-600); }
.notif-item__icon--chat { background: #f1eefe; color: #6d4fd1; }

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--blue-50);
}

.notif-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-item__icon svg {
  width: 16px;
  height: 16px;
}

.notif-item__body p {
  margin: 0 0 2px;
  font-size: 13px;
  color: var(--ink-900);
  line-height: 1.4;
}

.notif-item__body span {
  font-size: 11.5px;
  color: var(--gray-600);
}

.notif-item.unread::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-600);
}

.notif-item.unread .notif-item__body p {
  font-weight: 600;
}



/* ============================================================
   Phones: no header bar
   ============================================================
   The full site header is a desktop affordance. On a phone the bottom tab
   bar (Home / Search / Explore / Cart / Account) is the primary navigation,
   so repeating brand + search + cart + hamburger in a bar above the content
   is duplicated chrome that costs a fifth of the screen.

   The header is not simply hidden, because two of its controls have nowhere
   else to live on a phone: the wallet balance and the notification bell.
   Everything else in it is reachable from the tab bar — search is the Search
   tab, categories and the hamburger links are the Explore tab, the cart is
   the Cart tab, and sign in / account is the Account tab.

   So on phones the header becomes a compact floating cluster in the top
   corner holding just those two, lifted out of the layout so content starts
   at the top of the screen. Desktop is untouched. */
@media (max-width: 640px) {
  /* The phone header follows the mobile reference: logo on the left, the
     bell, cart and profile on the right, then the hamburger. It lies over
     the hero with no bar of its own and turns solid once the page scrolls.
     The bottom tab bar stays for the destinations it already covers. */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }
  .site-header.is-scrolled {
    background: linear-gradient(165deg, #0c1330 0%, #0a1029 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-header .container {
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .site-header .brand__logo { height: 30px; }
  .site-header .main-nav { display: none; }
  .site-header .menu-toggle { display: inline-flex; }
  .site-header .header-actions { gap: 6px; }
  /* A phone's header is short of room: the language and currency buttons
     live in the hamburger menu, and the sign-in link becomes the icon. */
  .site-header .region-picker { display: none; }
  .site-header .header-actions__auth .btn-solid span { display: none; }
  .site-header .header-actions__auth .btn-solid { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; }
  .site-header .icon-btn { width: 40px; height: 40px; }
  /* Content on every page has to start below a fixed header now. */
  body { padding-top: 0; }
  body:not(.hero-header) .site-header { background: linear-gradient(165deg, #0c1330 0%, #0a1029 100%); }
  body:not(.hero-header) main#main-content,
  body:not(.hero-header) .session-gate { padding-top: 62px; }
  /* The hero sits inside <main>, which already clears the fixed header, so
     it only needs its own breathing room — not a second header's worth. */
  body .shop-hero, body .db-hero, body .support-hero, body .store-hero { padding-top: 26px; padding-bottom: 22px; }
  .notif-panel {
    position: fixed;
    top: 62px;
    right: 10px;
    left: 10px;
    width: auto;
    max-width: none;
  }
}


/* ============================================================
   Desktop: the header is a floating card
   ============================================================
   The header never sits welded to the top edge on desktop — it is a rounded
   card inset from all sides from the moment the page loads, and the content
   scrolls underneath it.

   Desktop only: phones have no header bar at all (see the mobile block
   above), so there is nothing here for this to act on.

   Note this deliberately overrides the homepage's transparent-over-hero
   treatment. That look worked when the header spanned the full width and
   read as part of the hero; as a detached card it would be an outlined,
   shadowed rectangle framing nothing, so the card is solid throughout and
   the hero shows around it instead of through it. */
/* The header used to float as a detached, rounded dark card on desktop,
   inset from the top and sides. The layout reference has no such bar: the
   header sits transparently over the hero and blends into it. So the card
   is gone. On pages without a hero the bar is solid and flush to the top,
   which is what a header is. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}


/* ---- Scroll arrows on horizontal card rows ----
   Desktop only: on touch you simply swipe, and floating buttons over the
   cards would just be in the way. Hidden until js/site.js confirms the row
   actually overflows, so a short row never shows dead controls. */
.card-row-holder { position: relative; }

.card-row__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.28);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
}

.card-row-holder.has-arrows .card-row__arrow { display: flex; }

.card-row__arrow svg { width: 18px; height: 18px; }
.card-row__arrow:hover:not(:disabled) { background: var(--blue-50); transform: translateY(-50%) scale(1.06); }

/* Faded rather than removed at the ends, so the control doesn't jump around
   as the row is scrolled. */
.card-row__arrow:disabled { opacity: 0.32; cursor: default; box-shadow: none; }

/* Inset INSIDE the row, not hung outside it. The section container runs
   edge-to-edge at wider viewports, so a negative offset pushed both arrows
   off-screen entirely. Sitting just over the first/last card is also the
   more familiar carousel placement. */
.card-row__arrow--prev { left: 4px; }
.card-row__arrow--next { right: 4px; }

@media (max-width: 640px) {
  .card-row-holder.has-arrows .card-row__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card-row__arrow { transition: none; }
}


/* ---- Product card image placeholder ----
   Every product in the catalogue currently has no photo, so this fallback
   IS the storefront rather than a rare edge case. A flat grey panel with a
   10%-opacity glyph in the corner reads as a failed image; repeated down a
   whole row it makes the shop look unfinished.

   So the no-image state is treated as a designed state: a soft tinted wash
   keyed to the product's icon, with the glyph centred and confident. The
   tint is keyed off `data-icon` rather than the category, because the icon
   set is a fixed list of eight — new categories reuse one of them, so this
   cannot fall out of sync as the taxonomy grows.

   None of this applies once a real photo is set: the <img> replaces it. */
.product-card__media--placeholder {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(140deg, var(--ph-a, #eef1f8) 0%, var(--ph-b, #e3e8f3) 100%);
}

.product-card__media--placeholder svg {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  color: var(--ph-ink, #6b7591);
  opacity: 0.55;
}

.product-card__media--placeholder[data-icon="data"]    { --ph-a: #e8f0ff; --ph-b: #d7e4ff; --ph-ink: #2c53a8; }
.product-card__media--placeholder[data-icon="phone"]   { --ph-a: #eaf7f1; --ph-b: #d8efe4; --ph-ink: #2f7a5a; }
.product-card__media--placeholder[data-icon="sub"]     { --ph-a: #f1ecff; --ph-b: #e3daff; --ph-ink: #5a44a8; }
.product-card__media--placeholder[data-icon="gaming"]  { --ph-a: #ffeef0; --ph-b: #ffdde2; --ph-ink: #a83a4e; }
.product-card__media--placeholder[data-icon="shop"]    { --ph-a: #fff3e6; --ph-b: #ffe6cc; --ph-ink: #9a5a1e; }
.product-card__media--placeholder[data-icon="voucher"] { --ph-a: #fffae6; --ph-b: #fdf0c4; --ph-ink: #8a6d16; }
.product-card__media--placeholder[data-icon="afa"]     { --ph-a: #e9f5ff; --ph-b: #d5eaff; --ph-ink: #1f5f8f; }
.product-card__media--placeholder[data-icon="group"]   { --ph-a: #f0f0f5; --ph-b: #e2e3ec; --ph-ink: #4d5266; }


/* ---- Category landing page: icon tile + stat strip ----
   Shown only when the shop is filtered to a single category. The stats are
   derived, not admin-entered: the product count is whatever the filter
   actually returns, so it can never claim a number the page then fails to
   show. */
.cat-head { display: flex; align-items: center; gap: 16px; }
.cat-head > div { min-width: 0; }

.cat-head__icon {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
.cat-head__icon[hidden] { display: none; }
.shop-hero .cat-head__icon:not([hidden]) { display: flex; }
.cat-head__icon svg { width: 32px; height: 32px; color: currentColor; }

/* On the plain (unbranded) shop hero the tile sits on a light background,
   so the translucent-white treatment would vanish. */
.shop-hero:not(.shop-hero--branded) .cat-head__icon {
  background: var(--blue-50);
  border-color: var(--blue-100);
  color: var(--blue-600);
}

.cat-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.cat-stats[hidden] { display: none; }

.cat-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.cat-stat strong { font-weight: 700; }
.cat-stat span { opacity: 0.8; }
.cat-stat svg { width: 15px; height: 15px; }

.shop-hero:not(.shop-hero--branded) .cat-stat {
  background: var(--white);
  border-color: var(--border);
  color: var(--ink-700);
}

@media (max-width: 640px) {
  .cat-head { gap: 12px; }
  .cat-head__icon { width: 52px; height: 52px; border-radius: 14px; }
  .cat-head__icon svg { width: 26px; height: 26px; }
  .cat-stat { padding: 7px 12px; font-size: 12.5px; }
}


/* ---- Superstore landing hero ----
   Deliberately darker and heavier than the digital-service category heroes:
   it fronts the physical-goods side of the business, which has its own
   delivery and pickup promises to make. */
.store-hero {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  background:
    radial-gradient(ellipse 60% 60% at 20% 15%, rgba(60, 100, 240, 0.35), transparent 62%),
    linear-gradient(160deg, #0a1836 0%, #0b1e4a 55%, #07132e 100%);
  color: #fff;
  overflow: hidden;
}

.store-hero__pill {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.store-hero h1 {
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: #fff;
}
.store-hero h1 span { color: #ffb648; }

.store-hero p {
  font-size: 16.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  margin: 0 0 26px;
}

.store-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
/* .btn-outline ships with a solid white background for use on light pages.
   On this dark hero that made it white text on a white pill — invisible.
   The background has to be cleared, not just the text colour. */
.store-hero__cta .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.store-hero__cta .btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.store-hero__trust { display: flex; flex-wrap: wrap; gap: 22px; }
.store-hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
}
.store-hero__trust svg { width: 18px; height: 18px; color: #ffb648; }

@media (max-width: 640px) {
  .store-hero__trust { gap: 14px; }
  .store-hero__trust span { font-size: 12.5px; }
}

/* ---- Currency picker (header) ----
   A quiet control: it should read as a setting, not compete with the cart
   or the account button. Hidden entirely until more than one currency is
   switched on — see js/currency.js. */
.currency-picker { position: relative; display: inline-flex; align-items: center; }

/* The button itself: a globe and the currency code, sized to match the
   icon buttons beside it in the header. */
.region-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.region-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.region-btn:focus-visible { outline: 2px solid var(--blue-400, #6b8dff); outline-offset: 2px; }
.region-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.region-picker { position: relative; display: inline-flex; }
.region-picker[hidden] { display: none; }

.region-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 200px;
  background: #fff;
  color: var(--ink-900);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border);
  padding: 10px;
  animation: slide-up-in var(--dur) var(--ease);
}
.region-panel__head {
  margin: 2px 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-600);
}
.region-panel__list {
  /* A dropdown, not a sheet: about seven rows tall, the rest scrolls. */
  max-height: 296px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.region-panel__note {
  margin: 8px 4px 2px !important;
  font-size: 10.5px !important;
  line-height: 1.4;
  color: var(--gray-600) !important;
}

.region-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 9px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.region-opt:hover { background: var(--blue-50); }
.region-opt.is-active { background: var(--blue-50); }
.region-opt__sym {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-600);
}
.region-opt__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.region-opt__name strong { font-size: 13px; }
.region-opt__name em {
  font-style: normal;
  font-size: 11px;
  color: var(--gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.region-opt__tick { flex: 0 0 auto; color: var(--blue-600); display: inline-flex; }
.region-opt__tick svg { width: 15px; height: 15px; }

/* The language list is longer than the currency one and gets its own
   height, so the panel shows a useful number of options without either
   list pushing the other off the screen. */
.region-panel__list--lang { max-height: 296px; }
.region-opt__flag { flex: 0 0 auto; width: 22px; font-size: 16px; line-height: 1; text-align: center; }
.region-panel__rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 10px 2px;
}

/* ---- Google Translate ----
   The widget is only ever loaded once a visitor has picked a language (see
   js/language.js). When it is, it inserts a toolbar iframe at the top of the
   page and pushes <body> down by its height with an inline style — which
   would sit a grey Google bar above this site's own header and shift every
   fixed element down with it. The site has its own control for choosing a
   language, so the toolbar is redundant as well as ugly. */
#lbTranslateHost { display: none !important; }
.skiptranslate iframe,
iframe.skiptranslate { display: none !important; }
body:not(.scroll-locked) { top: 0 !important; }

/* Google marks translated runs with its own element, which is inline and
   would otherwise inherit nothing. Keeping it transparent to layout means a
   translated button or badge keeps the shape it had in English. */
font[style*="vertical-align"] { vertical-align: inherit !important; }

@media (max-width: 720px) {
  .region-btn { padding: 7px 10px; font-size: 12px; gap: 5px; }
  .region-btn svg { width: 14px; height: 14px; }
  /* Anchored to the right of a narrow header, a 258px panel would hang off
     the screen. This keeps it inside the viewport on any phone. */
  .region-panel { width: min(258px, calc(100vw - 24px)); }
}

/* Shown under a converted total: the amount actually taken, in cedis. */
.summary-charge-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--gray-600);
  text-align: right;
}

/* Under a product's review list, when only the most recent are shown. */
.reviews-more-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--gray-600);
}

/* ---- Data order review window ----
   The minute between a confirmed payment and the order leaving for the
   network. It has to read as "check this now", not as a receipt, because
   the number cannot be changed afterwards. */
.db-review {
  margin-top: 14px;
  border: 1px solid var(--amber-200, #fde68a);
  background: #fffbeb;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.db-review__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.db-review__head strong { font-family: var(--font-heading); font-size: 15px; }
.db-review__clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 20px;
  color: var(--amber, #b45309);
  /* Tabular figures and a fixed min-width, so the countdown does not make
     the heading jitter as it passes from 10s to 9s. */
  min-width: 3.5ch;
  text-align: right;
}
.db-review__clock.is-urgent { color: var(--red-600, #e11d48); }
.db-review__clock.is-sending { font-size: 14px; color: var(--gray-600); }
.db-review__lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; }

.db-review__facts { display: grid; gap: 6px; margin: 0 0 14px; }
.db-review__facts > div { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; }
.db-review__facts dt { color: var(--gray-600); margin: 0; }
.db-review__facts dd { margin: 0; text-align: right; }

.db-review__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.db-review__note { font-size: 12.5px; color: var(--gray-600); }

/* Once it has gone, the panel stops shouting. */
.db-review--closed { border-color: var(--border); background: var(--bg-page, #f4f6fb); }
.db-review--cancelled { border: 0; background: none; padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  .db-review__clock.is-urgent { animation: db-review-pulse 1s ease-in-out infinite; }
}
@keyframes db-review-pulse {
  50% { opacity: 0.55; }
}

/* Says the card is keeping itself current, so nobody sits there pressing
   the button waiting for something to change. */
.db-order-card__live {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--gray-600);
}
.db-order-card__live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--green-600, #059669);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .db-order-card__live::before { animation: db-live-pulse 1.8s ease-in-out infinite; }
}
@keyframes db-live-pulse { 50% { opacity: 0.25; } }



/* The signed-in customer's button in the header: their photo if they have
   uploaded one, their initials if not. Sized to match the icon buttons
   beside it so the row keeps its rhythm. */
.header-profile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-600);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header-profile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
.header-profile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.header-profile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Notifications on a phone ----
   The panel is sized for a desktop dropdown, which on a 375px screen makes
   each notification a large block and pushes the useful ones off the
   bottom. Tightened here so more of them fit and the panel reads as a list
   rather than a stack of cards.

   Nothing about how they work changes: the same rows, the same unread
   marker, the same tap target. The row stays well above the 44px minimum
   for a comfortable tap. */
@media (max-width: 640px) {
  .notif-panel {
    width: min(340px, calc(100vw - 24px));
    max-height: min(60vh, 420px);
  }
  .notif-panel__head {
    padding: 11px 14px;
  }
  .notif-panel__head .widget-title {
    font-size: 13.5px;
  }
  .notif-list {
    max-height: min(52vh, 360px);
  }
  .notif-item {
    gap: 10px;
    padding: 10px 14px;
  }
  .notif-item__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .notif-item__body p {
    font-size: 12.5px;
    line-height: 1.42;
  }
  .notif-item__body span {
    font-size: 11px;
  }
}

/* Below a tablet, 16:9 is 211px tall on a phone — narrower than one line of
   the headline. The content decides the height there, which is what it did
   before the ratio existed. */
@media (max-width: 900px) {
  .home-hero {
    /* 9/16 of a phone's width is 211px — narrower than one line of the
       headline. The content decides the height here, as it did before. */
    min-height: 0;
  }
}

/* ================= Customer dashboard panel =================
   The dashboard used to be one long page: a grid of shortcuts on top and
   every section stacked below it, so reading your referrals meant scrolling
   past your orders, transactions, deposits and withdrawals. Same blocks,
   same ids — one on screen at a time, with a sidebar to pick. */
.cust-section { padding-top: 22px; }

.cust-shell {
  display: grid;
  grid-template-columns: 258px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.cust-sidebar {
  position: sticky;
  top: 92px;
  /* A grid item's automatic minimum size is its content, so on a phone the
     row of section pills inside made this column 1164px wide and the whole
     page scrolled sideways. overflow-x on the row cannot help while the
     column it sits in is free to grow to fit it. */
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

/* The identity block keeps its own markup; here it just sits at the top of
   the sidebar instead of across the page. */
.cust-sidebar .dash-identity {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 4px 0 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cust-sidebar .dash-identity__text { align-items: center; }
.cust-sidebar .dash-identity__actions { justify-content: center; }

.cust-nav { display: flex; flex-direction: column; gap: 2px; }

.cust-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 11px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cust-nav__item:hover { background: var(--blue-50); color: var(--blue-600); }

.cust-nav__item.is-active {
  background: var(--blue-600);
  color: #fff;
}
.cust-nav__item.is-active .cust-nav__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.cust-nav__item svg { width: 17px; height: 17px; flex-shrink: 0; }
.cust-nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The live counts that used to sit in the shortcut grid. Same ids, so the
   code that writes them did not change. */
.cust-nav__count {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--gray-600);
  background: var(--gray-100, #eef0f5);
  border-radius: 999px;
  padding: 2px 7px;
  max-width: 92px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cust-main { min-width: 0; }

.cust-panel[hidden] { display: none; }

.cust-panel__title {
  font-size: 21px;
  margin: 0 0 14px;
}

/* Inside a panel the blocks no longer need their own frames — the panel is
   the frame. Two of them side by side was the old page's layout. */
.cust-panel .dash-two { display: block; }
.cust-panel .dash-panel { margin-bottom: 16px; }
.cust-panel .dash-panel:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .cust-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cust-sidebar { position: static; padding: 14px; }

  /* On a phone the sidebar becomes a row of pills above the content, which
     is the same idea in the space available. A column of eleven items would
     push the section itself off the bottom of the screen. */
  .cust-nav {
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .cust-nav::-webkit-scrollbar { display: none; }

  .cust-nav__item {
    flex: 0 0 auto;
    width: auto;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .cust-nav__item.is-active { border-color: var(--blue-600); }
  .cust-nav__item svg { display: none; }
  .cust-nav__count { display: none; }

  .cust-sidebar .dash-identity {
    flex-direction: row;
    text-align: left;
    padding-bottom: 12px;
  }
  .cust-sidebar .dash-identity__text { align-items: flex-start; }
  .cust-sidebar .dash-identity__actions { justify-content: flex-start; }
}

/* ================= Screen stability =================
   Two separate things were moving the page under people's fingers. */

/* 1. The scrollbar.
   Switching to a short dashboard section (Withdrawals) from a tall one
   (Account Settings) removed the page's scrollbar, the viewport got ~15px
   wider, and every centred element on the page slid sideways. Doing it
   twice reads as the tab shaking. Reserving the gutter means the page is
   the same width whether it scrolls or not. */
html {
  scrollbar-gutter: stable;
}

/* 2. Automatic zoom on a phone.
   Safari on iOS zooms the whole page in when a form control it is about to
   focus has text smaller than 16px, and it does not zoom back out — so a
   tap on a search box, a quantity stepper or a payment field left the site
   sitting at 1.3x with the right-hand side off screen.
   16px is the threshold, so every control gets at least that on a phone.
   This is the auto-zoom only. The viewport tag deliberately still allows
   pinch zoom, because taking that away breaks the site for anyone who
   needs to magnify it. */
/* 1024px, not 767px. A tablet reports 768 and iPad Safari zooms on a small
   field exactly as a phone does, so a breakpoint below that leaves every
   iPad zooming. Above 16px on a laptop is harmless; text in a form field is
   16px on most sites anyway. */
@media (max-width: 1024px) {
  input,
  select,
  textarea,
  button,
  .chat-compose .chat-input,
  .search-bar input,
  .track-order__form input,
  .price-range-inputs input,
  .qty-stepper input,
  .coupon-row input,
  .field textarea,
  .acct-notes__new textarea {
    /* !important, deliberately, and this is the one place it is warranted.
       Naming selectors here is a losing game: any component rule with a
       class beats a bare "input", and one declared later beats an equal
       one. Listing them caught seven and still missed the wallet amount,
       the withdrawal amount and every profile field, which all zoomed on a
       tablet.
       This is not styling, it is the size below which the browser takes the
       page away from the reader. Nothing should be allowed to override it
       on a touch screen. */
    font-size: 16px !important;
  }

  /* A checkbox or radio has no text of its own, and 16px on one only makes
     the box bigger. */
  input[type="checkbox"],
  input[type="radio"] {
    font-size: inherit;
  }
}

/* The chat button no longer drags. It sits in the bottom-right corner,
   where the reference has it, and stays there. */

/* On a phone the button covers real content and sits beside the bottom bar,
   so it comes down from 54px. Still well over the 44px that is comfortable
   to hit with a thumb. */
@media (max-width: 640px) {
  .support-fab__btn {
    width: 46px;
    height: 46px;
  }
  .support-fab__btn svg {
    width: 20px;
    height: 20px;
  }
  .support-fab__dot {
    min-width: 16px;
    height: 16px;
    font-size: 9.5px;
  }
}

@media (max-width: 380px) {
  .support-fab__btn { width: 42px; height: 42px; }
  .support-fab__btn svg { width: 18px; height: 18px; }
}

/* ---------- Checkout options ----------
   Sign in, create an account, or carry on without one. Shown once per visit
   to a signed-out visitor heading for checkout, because the alternative was
   letting them guess whether they were about to be made to register. */
.checkout-options {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.checkout-options__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 28, 0.55);
}

.checkout-options__box {
  position: relative;
  width: min(400px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(6, 12, 34, 0.35);
  padding: 30px 26px 26px;
  text-align: center;
  animation: slide-up-in var(--dur) var(--ease);
}

.checkout-options__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checkout-options__x:hover { background: var(--gray-100, #eef0f5); color: var(--ink-900); }
.checkout-options__x svg { width: 16px; height: 16px; }

.checkout-options__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: 14px;
}
.checkout-options__icon svg { width: 28px; height: 28px; }

.checkout-options__box h3 { margin: 0 0 8px; font-size: 21px; }
.checkout-options__box p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gray-600);
}

.checkout-options__primary,
.checkout-options__secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
}
.checkout-options__primary svg,
.checkout-options__secondary svg { width: 17px; height: 17px; }

.checkout-options__or {
  position: relative;
  margin: 14px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray-500, #8b93a7);
}
.checkout-options__or::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.checkout-options__or span { position: relative; background: #fff; padding: 0 12px; }

/* Deliberately the quietest of the three, and deliberately still a full
   width button rather than a link buried in small print. Buying without an
   account is a real option, not a hidden one. */
.checkout-options__guest {
  width: 100%;
  height: 50px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--gray-50, #f8f9fc);
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-900);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.checkout-options__guest:hover { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-600); }

@media (max-width: 480px) {
  .checkout-options__box { padding: 26px 18px 20px; border-radius: 18px; }
  .checkout-options__box h3 { font-size: 19px; }
}

/* ---------- Which device? ----------
   Asked at Place Order for streaming and shared-account plans. Reuses the
   checkout options dialog; the choices sit in a two-column grid of chips. */
.device-ask__box { width: min(460px, 100%); text-align: left; }
.device-ask__box > .checkout-options__icon { display: flex; margin: 0 auto 14px; }
.device-ask__box > h3,
.device-ask__box > p { text-align: center; }
.device-ask__item { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.device-ask__item legend { font-size: 14px; font-weight: 700; color: var(--ink-900); margin-bottom: 10px; padding: 0; }
.device-ask__item legend.device-ask__solo { font-size: 13px; font-weight: 600; color: var(--blue-600); }
.device-ask__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.device-ask__opt { position: relative; display: block; cursor: pointer; }
.device-ask__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.device-ask__opt span {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-900);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.device-ask__opt input:checked + span { border-color: var(--blue-600); background: var(--blue-50); color: var(--blue-600); box-shadow: inset 0 0 0 1px var(--blue-600); }
.device-ask__opt input:focus-visible + span { outline: 2px solid var(--blue-500); outline-offset: 2px; }
.device-ask__name { display: block; margin-top: 12px; }
.device-ask__name span { display: block; font-size: 12.5px; font-weight: 600; color: var(--gray-600); margin-bottom: 6px; }
.device-ask__name input {
  width: 100%;
  height: 46px;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  color: var(--ink-900);
  background: #fff;
}
.device-ask__name input:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(1, 100, 206, 0.15); }
.device-ask__err { margin-top: 8px; font-size: 13px; font-weight: 600; color: #c62828; }
.device-ask__go { margin: 6px 0 0; }
@media (max-width: 360px) {
  .device-ask__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Sign-in page background ----------
   The panel down one side of the sign-in, create-account and admin-login
   pages. It replaced a mascot image baked into the repo, so the picture can
   be changed from Admin > Homepage Hero without a deploy.

   Until media is set it is a plain gradient, which is a finished-looking
   panel rather than an empty box. That matters because it is also what a
   visitor sees if the settings request fails. */
.auth-bg {
  --auth-bg-overlay: 0.28;
  position: relative;
  overflow: hidden;
  min-height: clamp(300px, 42vw, 560px);
  margin-top: 8px;
  border-radius: 22px;
  background: linear-gradient(150deg, #0c1330 0%, #16215c 48%, #0a1029 100%);
}

.auth-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover, because this is decoration filling a panel — letterboxing a
     login background looks like a mistake. */
  object-fit: cover;
  display: block;
}

/* A readable layer over whatever picture gets set. Someone will eventually
   upload something pale, and the brand mark sits on top of this. */
.auth-bg.has-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 28, 0.15) 0%, rgba(6, 10, 28, var(--auth-bg-overlay)) 100%);
  pointer-events: none;
}

@media (max-width: 820px) {
  /* On a phone the form is what matters. The panel becomes a band above it
     rather than half the screen, and 40vh of a video is plenty of scene
     setting for something nobody came here to look at. */
  .auth-bg {
    min-height: clamp(150px, 30vh, 240px);
    border-radius: 16px;
  }
}

/* Someone who has asked for less motion should not be handed an autoplaying
   video. The poster frame, or the first frame, is enough. */
@media (prefers-reduced-motion: reduce) {
  .auth-bg video.auth-bg__media {
    animation: none;
  }
}

/* ================= Order confirmation =================
   Where a customer lands after ordering, and where they come back while
   they wait. Built to be refreshed. */
.oc-page { padding: 22px 0 60px; }
.oc-page .container { max-width: 720px; }

.oc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.oc-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.oc-back:hover { text-decoration: none; color: var(--blue-600); }
.oc-back svg { width: 18px; height: 18px; }
.oc-top__tools { display: flex; gap: 8px; }
.oc-icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gray-100, #eef0f5); color: var(--gray-600);
}
.oc-icon-btn:hover { background: var(--blue-50); color: var(--blue-600); }
.oc-icon-btn svg { width: 17px; height: 17px; }

.oc-loading, .oc-error {
  padding: 40px 20px; text-align: center; color: var(--gray-600); font-size: 14px;
}
.oc-error { color: var(--red-600, #cd2b31); }
/* The payment result sits above the status banner, as wide as it. */
.oc-page .payment-return { margin: 0 0 16px; max-width: none; }

/* ---- Status banner ---- */
.oc-status { border-radius: 18px; padding: 20px; margin-bottom: 16px; border: 1px solid transparent; }
.oc-status.is-wait { background: #fff8e6; border-color: #f2dfa6; color: #7a5300; }
.oc-status.is-good { background: #e9f7ee; border-color: #bde8cc; color: #17803d; }
.oc-status.is-bad  { background: #fdecec; border-color: #f5c2c2; color: #cd2b31; }

.oc-status__head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.oc-status__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.72); font-size: 20px;
}
.oc-status h1 { font-size: 20px; margin: 0 0 4px; color: inherit; }
.oc-status__pill {
  display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.75);
}
.oc-status p { margin: 0; font-size: 14px; line-height: 1.5; color: inherit; }

.oc-status__why {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.6); font-size: 13px; line-height: 1.5;
}
.oc-status__why strong { display: block; margin-bottom: 3px; }

.oc-status__btn {
  width: 100%; margin-top: 14px; height: 46px;
  border: none; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700;
  background: rgba(255, 255, 255, 0.8); color: inherit;
}
.oc-status__btn:hover:not(:disabled) { background: #fff; }
.oc-status__btn:disabled { opacity: 0.7; cursor: default; }

/* ---- Cards ---- */
.oc-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; margin-bottom: 16px;
}
.oc-card__label {
  display: flex; align-items: center; gap: 7px; margin: 0 0 16px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray-600);
}
.oc-card__label svg { width: 16px; height: 16px; }

/* ---- Four steps ---- */
.oc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.oc-step { position: relative; text-align: center; font-size: 12px; }
/* The connecting line sits behind the dots and stops at the last one. */
.oc-step::before {
  content: ""; position: absolute; top: 17px; left: 50%; right: -50%;
  height: 2px; background: var(--border);
}
.oc-step:last-child::before { display: none; }
.oc-step.is-done::before { background: var(--green-600); }

.oc-step__dot {
  position: relative; z-index: 1;
  width: 34px; height: 34px; margin: 0 auto 7px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--gray-100, #eef0f5); color: var(--gray-600);
}
/* White on the old #2ecc71 was 2.1:1 and on #f5a524 2.04:1. The done dot
   takes the darker green; the current dot keeps amber and takes dark text,
   which reads at 8.7:1. */
.oc-step.is-done .oc-step__dot { background: var(--green-600); color: #fff; }
.oc-step.is-current .oc-step__dot { background: #f5a524; color: var(--ink-900); }

.oc-step strong { display: block; font-size: 12.5px; }
.oc-step span { display: block; font-size: 11px; color: var(--gray-600); }
.oc-step em { display: block; font-style: normal; font-size: 10.5px; color: var(--gray-500, #8b93a7); margin-top: 3px; }

/* ---- Order + total ---- */
.oc-summary { display: flex; align-items: center; gap: 16px; }
.oc-summary > div { flex: 1; min-width: 0; }
.oc-summary__total { text-align: right; }
.oc-summary__label {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray-600); margin-bottom: 3px;
}
.oc-summary strong { font-size: 15px; word-break: break-all; }
.oc-summary__total strong { font-size: 18px; }
.oc-copy {
  flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 10px;
  background: var(--gray-100, #eef0f5); color: var(--gray-600); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.oc-copy:hover { background: var(--blue-50); color: var(--blue-600); }
.oc-copy svg { width: 16px; height: 16px; }

/* ---- Items ---- */
.oc-items h2 { font-size: 19px; margin: 24px 0 4px; }
.oc-items__note { margin: 0 0 14px; font-size: 13px; color: var(--gray-600); }

.oc-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.oc-item__thumb {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 11px; overflow: hidden;
  background: var(--gray-100, #eef0f5); color: var(--gray-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.oc-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.oc-item__thumb svg { width: 22px; height: 22px; }
.oc-item__body { flex: 1; min-width: 0; }
.oc-item__body strong { display: block; font-size: 14px; margin-bottom: 5px; }
.oc-item__row { display: flex; align-items: center; gap: 8px; }
.oc-item__qty { font-size: 12.5px; color: var(--gray-600); }
.oc-item__price { flex: 0 0 auto; font-weight: 700; font-size: 14px; }
.oc-item__delivery {
  margin-top: 8px; padding: 10px; border-radius: 10px;
  background: #e9f7ee; border: 1px solid #bde8cc;
  font-size: 12.5px; word-break: break-word;
}

.oc-pill {
  font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.oc-pill.is-wait { background: #fff3d6; color: #8a5a00; }
.oc-pill.is-done { background: #e2f6e9; color: #17803d; }
.oc-pill.is-bad  { background: #fdecec; color: #cd2b31; }

/* ---- Payment details and what the customer supplied ---- */
.oc-meta { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.oc-meta__row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 13.5px; }
.oc-meta__row span { color: var(--gray-600); text-transform: capitalize; }
.oc-meta__row strong { text-align: right; word-break: break-word; }

.oc-required { margin-top: 16px; }
.oc-required__head {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
  font-size: 13.5px; font-weight: 700;
}
.oc-required__head svg { width: 17px; height: 17px; color: var(--blue-600); }

/* ---- Order chat ---- */
.oc-chat__head { display: flex; align-items: center; gap: 12px; }
.oc-chat__head > div { flex: 1; min-width: 0; }
.oc-chat__head strong { display: block; font-size: 14.5px; }
.oc-chat__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue-50); color: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.oc-chat__icon svg { width: 19px; height: 19px; }
.oc-chat__status { font-size: 12.5px; color: var(--gray-600); }

/* ---- Actions ---- */
.oc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.oc-actions > * { width: 100%; height: 50px; justify-content: center; }

@media (max-width: 560px) {
  .oc-status { padding: 16px; border-radius: 14px; }
  .oc-status h1 { font-size: 18px; }
  .oc-status__icon { width: 40px; height: 40px; font-size: 18px; }
  .oc-step strong { font-size: 11.5px; }
  .oc-step span { font-size: 10px; }
  .oc-step__dot { width: 30px; height: 30px; }
  .oc-step::before { top: 15px; }
  .oc-summary strong { font-size: 13.5px; }
}

/* ---------- Internal page banner ----------
   A 16:9 band above the heading on the shop, data bundles, the superstore
   and a category view. 16:9 is the shape a photo or a video already is, so
   an uploaded banner fills it without cropping.

   Nothing sits on top of it on purpose. The heading, the search and the
   filters stay below where they were; this is a picture with room around
   it, not another strip of controls. */
.page-banner {
  position: relative;
  width: 100%;
  /* A fixed, clean hero on each device rather than a box that grows with
     its content, at the shapes the brief asks for:
       desktop  1920 × 600   (16:5)
       laptop   1440 × 450   (3.2:1)
       phone    1080 × 1350  (4:5)
       small    750 × 1000   (3:4)
     The uploaded media fills it with cover and its admin-set focal point
     decides which edge is cropped, so nothing important is cut off. */
  aspect-ratio: 16 / 5;
  max-height: 600px;
  margin: 0 0 22px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(150deg, #0c1330 0%, #16215c 48%, #0a1029 100%);
}

.page-banner[hidden] { display: none; }

/* Slides stack in the same box; only the active one is visible, so moving
   between them reads as a crossfade. A single slide simply stays. */
.page-banner__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
}
.page-banner__slide.is-active { opacity: 1; pointer-events: auto; }
a.page-banner__slide { cursor: pointer; }
a.page-banner__slide:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }

.page-banner__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.page-banner__dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.page-banner__dots button {
  width: 8px; height: 8px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.page-banner__dots button.is-active { background: #fff; width: 22px; border-radius: 4px; }

@media (max-width: 1023px) {
  /* Laptop: the wider 3.2:1 of a 1440 × 450 banner. */
  .page-banner { aspect-ratio: 3.2 / 1; max-height: 450px; }
}

@media (max-width: 640px) {
  .page-banner {
    border-radius: 14px;
    margin-bottom: 16px;
    /* Portrait, 4:5, but never taller than most of the screen. */
    aspect-ratio: 4 / 5;
    max-height: 72vh;
  }
}

@media (max-width: 400px) {
  .page-banner { aspect-ratio: 3 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .page-banner__slide { transition: none; }
}

/* ---------- Hero pills on a very narrow screen ----------
   "Reach us: support@legendsbest.com" is one unbreakable token, so at 320px
   the pill measured 305px inside a 288px column and pushed past its own
   container. That is a real 320px phone, and it is also any laptop at 400%
   browser zoom, where the CSS viewport is the same width.

   The pill is allowed to wrap and the address to break, rather than being
   shortened — the whole point of it is that the address is readable. */
.hero-pill {
  max-width: 100%;
  flex-wrap: wrap;
}

.hero-pill u,
.hero-pill span {
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  /* Below this the pills stack rather than trying to share a row. */
  .hero-pills { flex-direction: column; align-items: flex-start; }
  .hero-pill { width: 100%; justify-content: center; }
}

/* ---------- Order confirmation on a very narrow screen ----------
   Four steps sharing 288px leaves 72px each, and "Processing" does not fit
   in that at 12.5px. The status pill and the quantity beside it ran past
   their row for the same reason. Both are real at 320px, and at 400%
   browser zoom on a laptop. */
@media (max-width: 380px) {
  .oc-steps { gap: 2px; }
  .oc-step strong { font-size: 10.5px; line-height: 1.2; }
  .oc-step span { font-size: 9.5px; line-height: 1.2; }
  .oc-step em { font-size: 9px; }
  .oc-step__dot { width: 26px; height: 26px; font-size: 11px; }
  .oc-step::before { top: 13px; }

  /* The pill and the count wrap under the name rather than being pushed
     off the side of the card. */
  .oc-item__row { flex-wrap: wrap; row-gap: 4px; }
  .oc-item { gap: 10px; padding: 10px; }
  .oc-item__thumb { width: 44px; height: 44px; }
  .oc-item__body strong { font-size: 13px; }
  .oc-item__price { font-size: 13px; }

  /* A long order id has nowhere to break, so it is allowed to. */
  .oc-summary { gap: 10px; }
  .oc-summary strong { font-size: 12.5px; overflow-wrap: anywhere; }
}

/* ---------- Live chat inside the account panel ----------
   The same conversations the floating button opens, sized for a panel
   rather than a corner bubble. */
.dash-chat { display: flex; flex-direction: column; gap: 10px; }

.dash-chat__messages {
  height: min(52vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  /* A fixed height rather than a max: the panel then stops resizing itself
     as replies arrive, which was making the whole page jump. */
}

/* The bubbles come from the shared module, so they already have their
   styles. Here they only need more room than a 300px bubble allows. */
.dash-chat__messages .chat-msg { max-width: 76%; }
.dash-chat__messages .chat-att--image img,
.dash-chat__messages .chat-att--video { max-width: 320px; max-height: 300px; }

.dash-chat .chat-thread-bar { margin-top: 0; }

@media (max-width: 640px) {
  .dash-chat__messages { height: min(46vh, 340px); }
  .dash-chat__messages .chat-msg { max-width: 86%; }
}

/* ---------- Notes ---------- */
.acct-notes__intro { margin: 0 0 14px; font-size: 13px; color: var(--gray-600); }

.acct-notes__new { margin-bottom: 18px; }
.acct-notes__new textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}
.acct-notes__new textarea:focus { outline: none; border-color: var(--blue-500); }

.acct-notes__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.acct-notes__status { font-size: 12.5px; color: var(--gray-600); min-height: 16px; }
.acct-notes__status--ok { color: var(--green-600, #17803d); }
.acct-notes__status--err { color: var(--red-600, #cd2b31); }

.acct-notes__empty { margin: 0; padding: 18px 0; text-align: center; font-size: 13px; color: var(--gray-600); }

.acct-note {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--white);
}
.acct-note.is-editing { border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-50); }

.acct-note__body {
  font-size: 14px;
  line-height: 1.55;
  /* A pasted order reference has nowhere to break, and would otherwise run
     off the side of the card. */
  overflow-wrap: anywhere;
}
.acct-note__body[contenteditable="true"]:focus { outline: none; }

.acct-note__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.acct-note__foot time { font-size: 11.5px; color: var(--gray-600); }
.acct-note__actions { display: flex; gap: 4px; }
.acct-note__actions button {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-600);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.acct-note__actions button:hover { background: var(--blue-50); }
.acct-note__actions button[data-note-delete] { color: var(--red-600, #cd2b31); }
.acct-note__actions button[data-note-delete]:hover { background: #fdecec; }

@media (max-width: 640px) {
  /* The 16px that stops a phone zooming is set with the other form controls
     further up, in one place, rather than repeated per component. */
  .acct-notes__row { flex-direction: column; align-items: stretch; }
  .acct-notes__row .btn-solid { width: 100%; justify-content: center; }
}

/* ============================================================
   Phone hero, per the mobile reference: the picture keeps its character on
   the right (focal point biased right), the copy takes the left two thirds
   with a smaller heading, and nothing sits under the character. Placed last
   so these win over the desktop hero rules at the same specificity.
   ============================================================ */
@media (max-width: 640px) {
  .home-hero__media-item { object-position: var(--hero-focal-x-mobile, 68%) center; }
  .home-hero__copy { max-width: 100%; }
  .home-hero h1 { font-size: clamp(28px, 8.4vw, 36px); max-width: 68%; }
  .home-hero__intro, .home-hero__typewriter { max-width: 66%; }
  .hero-pills { max-width: 72%; }
  /* Language and currency live in the hamburger menu on a phone. */
  .mobile-menu__pickers { display: flex; gap: 8px; padding: 4px 10px 10px; }
  .mobile-menu__pickers .region-picker { display: inline-flex; }
  .mobile-menu__pickers .region-btn { background: var(--blue-50); color: var(--ink-900); border-color: var(--border); }
  .mobile-menu__pickers .region-panel { left: 0; right: auto; }
}

/* ---------- Legend's Hot Data & Airtime shop ----------
   A shelf of cards, each one a button that opens the same buy modal the Data
   tab uses. The network's colour runs along the top so a customer can tell
   an MTN deal from a Telecel one at a glance. */
.db-hot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.db-hot-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  padding: 16px 16px 14px; border: 1px solid var(--border); border-top: 4px solid var(--net, var(--blue-600)); border-radius: 16px;
  background: var(--white); cursor: pointer; font: inherit; color: var(--ink-900); box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.db-hot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.db-hot-card__kind { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--net, var(--blue-600)); }
.db-hot-card__logo { height: 22px; width: auto; }
.db-hot-card__net { font-size: 12px; font-weight: 700; color: var(--gray-600); }
.db-hot-card__title { font-size: 17px; letter-spacing: -0.01em; }
.db-hot-card__meta { font-size: 12.5px; color: var(--gray-600); }
.db-hot-card__price { font-size: 18px; font-weight: 800; margin-top: 4px; }
.db-hot-card__price s { font-weight: 500; color: var(--gray-600); font-size: 13px; margin-right: 4px; }
.db-hot-card__cta { margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: var(--blue-600); color: #fff; font-size: 13px; font-weight: 700; }



/* ---- Product page: photo gallery + specifications ---- */
.product-gallery { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.product-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid var(--border); background: var(--white); padding: 0; cursor: pointer; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.is-active, .product-thumb:hover { border-color: var(--blue-600); }
.product-thumb:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.product-specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.product-specs th, .product-specs td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.product-specs th { width: 38%; color: var(--gray-600); font-weight: 600; }

.product-card__rating--none { color: var(--gray-600); font-size: 12px; }


/* ============================================================
   Phone layout fixes (Sep 2026): icon group hugs the menu button, the
   chat panel is a bottom sheet instead of the whole screen, the wishlist
   button is visibly a button, and dropdown panels never exceed the
   screen. Appended last so these win over the earlier phone rules.
   ============================================================ */
@media (max-width: 640px) {
  /* Logo left; bell, cart, profile and the menu button together on the right. */
  .site-header .container { justify-content: flex-start; }
  .site-header .brand { margin-right: auto; }
  .site-header .header-actions { margin-left: auto; gap: 6px; flex-shrink: 0; }
  .site-header .menu-toggle { margin-left: 4px; flex-shrink: 0; }

  /* Chat: a sheet anchored above the tab bar, not a full-screen takeover.
     The launcher stays visible so a tap closes it; the panel's own ✕ works too. */
  .support-fab.open .support-fab__panel {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    left: 8px; right: 8px; top: auto; bottom: 84px;
    width: auto;
    max-height: min(74vh, 640px);
    border-radius: 18px;
    z-index: 45;
    animation: slide-up-in var(--dur) var(--ease);
  }
  .support-fab.open .support-fab__btn { display: inline-flex; }
  .support-fab.open .support-fab__panel .chat-body,
  .support-fab.open .support-fab__panel .chat-home { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .support-fab.open .support-fab__panel .chat-scroll { flex: 1 1 auto; height: auto; min-height: 140px; max-height: 44vh; }
  .support-fab.open .support-fab__panel .chat-tabs { flex: 0 0 auto; }

  /* Shorter, tighter panel on a phone: the guest menu was taller than it
     needed to be. Cap the height and trim the internal spacing. */
  .support-fab.open .support-fab__panel { max-height: min(62vh, 520px); }
  .support-fab__panel .chat-body { padding: 10px 12px 4px; }
  .support-fab__panel .chat-cta { padding: 11px 12px; }
  .support-fab__panel .chat-cta__icon { width: 34px; height: 34px; }
  .support-fab__panel .chat-section { margin: 10px 2px 6px; }
  .support-fab__panel .chat-faq a { padding: 10px 14px; }
  .support-fab__panel .chat-tabs { padding: 8px 8px 6px; }
  .support-fab__panel .chat-powered { padding-bottom: 8px; }

  /* Notifications: below the header, never taller than the screen. */
  .notif-panel { max-height: calc(100vh - 150px); overflow-y: auto; z-index: 44; }

  /* Product page: Add to Cart + a real, visible wishlist button. */
  .product-detail__actions { align-items: center; }
  .product-detail__actions .icon-btn {
    flex: 0 0 52px;
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--ink-900);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
  }
}
@media (max-width: 360px) {
  .site-header .icon-btn, .site-header .header-actions__auth .btn-solid { width: 36px; height: 36px; }
  .site-header .menu-toggle { width: 38px; height: 38px; }
  .site-header .brand__logo { height: 26px; }
}

/* Wallet balance card on a phone: the pay-out fields stack in two neat
   columns instead of a ragged wrap of fixed-width boxes. */
@media (max-width: 640px) {
  .balance-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .balance-card__actions > * { width: 100% !important; min-width: 0; box-sizing: border-box; }
  .balance-card__actions .btn-solid,
  .balance-card__actions .btn-outline,
  .balance-card__actions small { grid-column: 1 / -1; justify-content: center; }
}

/* ---- Cursor ring (js/site.js) ---- */
.lb-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(29, 78, 216, 0.55);
  background: rgba(29, 78, 216, 0.08);
  backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  will-change: transform;
}
.lb-cursor.is-on { opacity: 1; }
.lb-cursor.is-hot { width: 48px; height: 48px; background: rgba(29, 78, 216, 0.14); border-color: rgba(29, 78, 216, 0.75); }
.lb-cursor.is-text { width: 6px; height: 34px; border-radius: 4px; background: rgba(29, 78, 216, 0.35); }
.lb-cursor.is-down { width: 22px; height: 22px; background: rgba(29, 78, 216, 0.28); }
.hero-header .lb-cursor, body.dark .lb-cursor { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .lb-cursor { display: none; } }

/* ---- Pending payment block (js/momo-pay.js pendingPay) ---- */
.pp-box { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fffdf5; }
.pp-box__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--gray-600); margin-bottom: 10px; }
.pp-box__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-box__actions .btn-solid, .pp-box__actions .btn-outline { height: 38px; padding: 0 16px; font-size: 13px; }
.pp-box__note { font-size: 12.5px; color: var(--gray-600); }
.pp-box__error { margin-top: 8px; font-size: 12.5px; color: var(--red-600); }
.pp-done { padding: 10px 12px; border-radius: 8px; background: #e9f7ee; border: 1px solid #bde8cc; font-size: 13px; }
.pp-proof { margin-top: 10px; font-size: 13px; }
.pending-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); margin-bottom: 12px; }
.pending-card__top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.pending-card__top strong { font-size: 14.5px; }
.pending-card__sub { font-size: 12.5px; color: var(--gray-600); margin-top: 2px; }
.pending-card__amount { font-weight: 800; font-size: 15px; white-space: nowrap; }

/* ---- Digital product page: value cards + About / How To / Info / Details ---- */
.variation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.variation-row { display: flex; flex-wrap: wrap; gap: 8px; }
.variation-option--card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); text-align: left; }
.variation-option__name { font-size: 13px; font-weight: 700; }
.variation-option__price { font-size: 14px; font-weight: 800; color: var(--blue-700); }
.variation-option--card.active .variation-option__price { color: inherit; }
.variation-option__oos { font-size: 11px; color: var(--red-600); font-weight: 600; }
.pd-tabs { margin: 6px 0 20px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); overflow: hidden; }
.pd-tabs__strip { display: flex; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.pd-tabs__strip::-webkit-scrollbar { display: none; }
.pd-tab { flex: 1 0 auto; padding: 12px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--gray-600); cursor: pointer; white-space: nowrap; }
.pd-tab.is-active { color: var(--blue-700); border-bottom-color: var(--blue-600); }
.pd-panel { padding: 16px; font-size: 14px; line-height: 1.6; color: var(--ink-700); }
.pd-panel p { margin: 0 0 10px; }
.pd-panel h4 { margin: 14px 0 6px; font-size: 13.5px; color: var(--ink-900); }
.pd-panel h4:first-child { margin-top: 0; }
.pd-list { margin: 0 0 8px 18px; padding: 0; }
.pd-list li { margin: 3px 0; }
.pd-steps { margin: 0; padding-left: 22px; counter-reset: step; }
.pd-steps li { margin: 6px 0; padding-left: 4px; }
.pd-important { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.pd-important strong { display: block; margin-bottom: 4px; }
.pd-important p { color: inherit; margin: 0; }
.pd-info { display: grid; gap: 0; }
.pd-info__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pd-info__row:last-child { border-bottom: none; }
.pd-info__row span { color: var(--gray-600); }
.pd-info__row strong { text-align: right; color: var(--ink-900); }
.pd-faq { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 6px 0; }
.pd-faq summary { cursor: pointer; font-weight: 700; color: var(--ink-900); font-size: 13.5px; }
.pd-faq p { margin: 8px 0 2px; }
.pd-faq--doc p { white-space: pre-line; }
.pd-preview { position: sticky; top: 70px; z-index: 30; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #fff4e0; border: 1px solid #f4dfa0; color: #8a5a00; font-size: 13px; font-weight: 600; }

/* ---- Dashboard quick actions + per-order buttons ---- */
.dash-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.dash-quick__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); color: var(--ink-900); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
.dash-quick__item:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--blue-100); }
/* ---- Quick actions: a tile per action, each turning on its own beat ----
   These SVGs had no size set, so every one of them rendered 0 by 0 and the
   cards showed nothing but their labels. Each now sits in a gradient tile
   that floats and turns in three dimensions, its own colour per action so
   they are told apart at a glance. */
.dash-quick__item { perspective: 540px; }
.dash-quick__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #3d9bff, #0164ce);
  box-shadow: 0 10px 18px -8px rgba(1, 100, 206, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: dashTile 5.5s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
.dash-quick__icon svg { width: 21px; height: 21px; display: block; }
.dash-quick__item:nth-child(2) .dash-quick__icon {
  background: linear-gradient(135deg, #34d399, #059669);
  box-shadow: 0 10px 18px -8px rgba(5, 150, 105, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-delay: -1.3s;
}
.dash-quick__item:nth-child(3) .dash-quick__icon {
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
  box-shadow: 0 10px 18px -8px rgba(109, 40, 217, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-delay: -2.6s;
}
.dash-quick__item:nth-child(4) .dash-quick__icon {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 10px 18px -8px rgba(217, 119, 6, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation-delay: -3.9s;
}
.dash-quick__item:hover .dash-quick__icon,
.dash-quick__item:active .dash-quick__icon {
  animation-play-state: paused;
  transform: translateY(-4px) rotateY(22deg) scale(1.06);
  transition: transform var(--dur, 0.25s) var(--ease, ease);
}
@keyframes dashTile {
  0%, 100% { transform: translateY(0) rotateY(-11deg) rotateX(5deg); }
  50% { transform: translateY(-4px) rotateY(11deg) rotateX(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dash-quick__icon { animation: none; }
  .dash-quick__item:hover .dash-quick__icon { transform: none; }
}
.dash-row { flex-wrap: wrap; }
.dash-row__actions { flex: 1 0 100%; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dash-row__btn { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--ink-900); font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.dash-row__btn:hover { border-color: var(--blue-600); color: var(--blue-700); }
.dash-row__btn--primary { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.dash-row__btn--primary:hover { color: #fff; opacity: 0.92; }
@media (max-width: 640px) { .dash-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Product photo slideshow + stock state ---- */
.pd-media { position: relative; }
.pd-media .pd-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 0.55s var(--ease), transform 0.9s var(--ease); }
.pd-media .pd-slide.is-on { opacity: 1; transform: scale(1); }
.pd-media__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.88); color: var(--ink-900); font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-soft); opacity: 0; transition: opacity 0.2s; z-index: 2; }
.pd-media__arrow--prev { left: 10px; }
.pd-media__arrow--next { right: 10px; }
.pd-media:hover .pd-media__arrow { opacity: 1; }
@media (hover: none) { .pd-media__arrow { opacity: 1; width: 32px; height: 32px; } }
.pd-media__dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 5px; z-index: 2; padding: 5px 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.28); }
.pd-media__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.6); transition: width 0.3s, background 0.3s; }
.pd-media__dots i.is-on { width: 16px; background: #fff; }
.product-detail__actions .btn-solid.is-out, .product-detail__actions .btn-solid:disabled { background: var(--gray-400); border-color: var(--gray-400); cursor: not-allowed; box-shadow: none; }
.product-detail__stock { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--red-600); }
.product-card__cta--out { background: var(--gray-400) !important; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .pd-media .pd-slide { transition: none; } }

.network-tab small { font-weight: 600; font-size: 11px; opacity: 0.7; margin-left: 4px; }
/* Sub-category pills inside a category hero: one row that scrolls sideways
   on a phone instead of wrapping over the badges above it. */
#subcategoryTabs { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 14px 0 18px; }
#subcategoryTabs::-webkit-scrollbar { display: none; }
#subcategoryTabs .network-tab { flex: 0 0 auto; white-space: nowrap; }

/* ---- Category icon images (admin-uploaded PNG / GIF / SVG) ---- */
.cat-pill__img { width: 20px; height: 20px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.cat-head__icon--image { padding: 0; overflow: hidden; background: var(--white); }
.cat-head__icon-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* ---- Fixes: cart rows on phones, product photo box, FAQ buttons ---- */
.cart-item__icon { overflow: hidden; }
.cart-item__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .cart-item { flex-wrap: wrap; row-gap: 10px; }
  .cart-item__body { flex: 1 1 calc(100% - 62px); }
  .cart-item__body strong { font-size: 14px; }
  .cart-item__qty { margin-left: 62px; }
  .cart-item__price { margin-left: auto; font-weight: 800; }
  .cart-item__remove { flex: 0 0 auto; }
  /* Auto side margins shrink a grid item to its content, which left the
     photo box as a stamp on phones. Full width, no auto margins. */
  .product-detail__gallery { max-width: none; width: 100%; margin: 0; }
  .product-detail__media { aspect-ratio: 4 / 3; }
  .pd-media__arrow { display: none; }
}
.product-detail__media { width: 100%; }
.product-detail__media > img, .pd-media .pd-slide { object-fit: contain; background: #f2f3f6; }
.support-cta__actions a { white-space: nowrap; }
@media (max-width: 640px) {
  .support-cta__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .support-cta__actions a { width: 100%; justify-content: center; text-align: center; }
}


/* ---------- Cookie notice ----------
   The site sets only essential cookies (sign-in) and uses local storage for
   the cart, so there is nothing to opt out of; this tells people that once
   and points at the cookie policy. Dismissed once, remembered per browser. */
.cookie-note {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 46;
  margin: 0 auto;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  color: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  font-size: 13.5px;
  line-height: 1.45;
  animation: cookie-in 0.35s var(--ease) both;
}
.cookie-note p { margin: 0; flex: 1; min-width: 0; }
.cookie-note a { color: var(--blue-600); font-weight: 600; }
.cookie-note .btn-solid { flex: 0 0 auto; height: 38px; padding: 0 16px; font-size: 13px; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .cookie-note { left: 10px; right: 10px; bottom: 82px; flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-note .btn-solid { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cookie-note { animation: none; } }

/* ---------- Chat: replies, quotes, multi-line text ----------
   Shared by the support widget, the dashboard panel and the admin page. */
.chat-msg { position: relative; }
.chat-msg p { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-compose .chat-input {
  resize: none;
  max-height: 140px;
  line-height: 1.4;
  overflow-y: auto;
}
.chat-msg__reply {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-600);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-msg__reply svg { width: 15px; height: 15px; }
.chat-msg:hover .chat-msg__reply, .chat-msg:focus-within .chat-msg__reply { opacity: 1; }
.chat-msg__reply:hover { background: var(--blue-600); color: #fff; }
/* Incoming bubbles sit on the left, so the button hangs off their right; outgoing the reverse. */
.chat-msg--admin .chat-msg__reply { right: -34px; }
.chat-msg--customer .chat-msg__reply { left: -34px; }
@media (hover: none) { .chat-msg__reply { opacity: 0.85; } }
.chat-quote {
  display: block;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-left: 3px solid var(--blue-600);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
}
.chat-msg--customer .chat-quote { background: rgba(255, 255, 255, 0.18); border-left-color: rgba(255, 255, 255, 0.85); }
.chat-quote strong { display: block; font-size: 11.5px; margin-bottom: 1px; }
.chat-quote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.85; }
.chat-quote:hover { text-decoration: none; filter: brightness(0.96); }
.chat-msg.is-flash { animation: chat-flash 1.2s var(--ease); }
@keyframes chat-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--blue-500); } 100% { box-shadow: 0 0 0 0 transparent; } }
.chat-replybar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 7px 8px 7px 10px;
  border-left: 3px solid var(--blue-600);
  border-radius: 8px;
  background: var(--blue-50);
  font-size: 12.5px;
}
.chat-replybar__icon { display: inline-flex; color: var(--blue-600); flex: 0 0 auto; }
.chat-replybar__icon svg { width: 15px; height: 15px; }
.chat-replybar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-replybar__text strong { font-size: 12px; color: var(--blue-700); }
.chat-replybar__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-700); }
.chat-replybar__close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.chat-replybar__close:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink-900); }

/* Video notes play in place with the browser's full controls. */
.chat-att--video { max-width: min(320px, 100%); max-height: 320px; background: #000; }

/* Recorder: camera switch and the recording badge */
.chat-recorder__stage { position: relative; }
.chat-recorder__preview { transform: none; }
.chat-recorder__preview.is-front { transform: scaleX(-1); }
.chat-recorder__flip {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chat-recorder__flip:disabled { opacity: 0.4; cursor: default; }
.chat-recorder__flip svg { width: 22px; height: 22px; }
.chat-recorder__rec {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.chat-recorder__rec i { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: chat-rec 1s ease-in-out infinite; }
@keyframes chat-rec { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .chat-recorder__rec i { animation: none; } .chat-msg.is-flash { animation: none; box-shadow: 0 0 0 3px var(--blue-500); } }

/* ---------- Chat: reactions and the message toolbar ---------- */
.chat-msg__tools {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.chat-msg:hover .chat-msg__tools, .chat-msg:focus-within .chat-msg__tools { opacity: 1; }
@media (hover: none) { .chat-msg__tools { opacity: 0.85; } }
.chat-msg--admin .chat-msg__tools { right: -70px; }
.chat-msg--customer .chat-msg__tools { left: -70px; flex-direction: row-reverse; }
.chat-msg__tools .chat-msg__reply, .chat-msg__tools .chat-msg__react {
  position: static;
  transform: none;
  opacity: 1;
}
.chat-msg__react {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--gray-600);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-msg__react svg { width: 15px; height: 15px; }
.chat-msg__react:hover { background: var(--blue-600); color: #fff; }
.chat-react-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  z-index: 5;
  animation: chat-pop 160ms var(--ease);
}
.chat-msg--customer .chat-react-picker { left: auto; right: 0; }
.chat-react-picker button { width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; font-size: 19px; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.chat-react-picker button:hover { transform: scale(1.25); background: var(--blue-50); }
@keyframes chat-pop { from { opacity: 0; transform: translateY(4px) scale(0.95); } to { opacity: 1; transform: none; } }
.chat-msg__reactions { display: flex; gap: 4px; margin-top: 4px; }
.chat-reaction {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink-900);
  font-size: 13px;
  line-height: 1;
}
.chat-reaction--mine { border-color: var(--blue-500); background: var(--blue-50); cursor: pointer; }
.chat-msg--customer .chat-reaction { background: rgba(255, 255, 255, 0.92); }
.chat-att--video-wrap { display: block; }
.chat-att__open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
  max-width: 240px;
}
.chat-att__open strong { color: var(--blue-600); }
@media (prefers-reduced-motion: reduce) { .chat-react-picker { animation: none; } }


/* ---------- Customer dashboard: sidebar sections ----------
   Fifteen flat rows became three short groups, so the eye finds Money or
   Account without reading every line. On phones the row of pills stays and
   the headings step aside. */
.cust-nav__group {
  margin: 14px 11px 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gray-600);
  letter-spacing: 0.02em;
}
.cust-nav__group:first-child { margin-top: 2px; }
.cust-nav__item { border-radius: 10px; padding: 9px 11px; }
.cust-nav__item.is-active { box-shadow: 0 8px 18px -10px rgba(30, 75, 255, 0.7); }
.cust-sidebar .dash-identity { padding-top: 0; }
.cust-sidebar .dash-avatar { width: 64px; height: 64px; font-size: 22px; }
@media (max-width: 900px) {
  .cust-nav__group { display: none; }
  .cust-sidebar .dash-identity { gap: 12px; }
  .cust-sidebar .dash-avatar { width: 52px; height: 52px; font-size: 18px; }
}
/* The avatar status line reserves two lines of height even when empty,
   which left a blank band under "Change photo". Empty means gone. */
.dash-identity__status:empty { display: none; }
.dash-identity__actions { flex-wrap: wrap; gap: 6px 12px; }


/* ---------- Wishlist heart in the header, feedback on the card ---------- */
a.icon-btn { text-decoration: none; }
.icon-btn--wish.has-items { color: #ff7a9a; border-color: rgba(255, 122, 154, 0.5); }
.icon-btn--wish .badge { background: #e11d48; }
.product-card__like.is-popping { animation: like-pop 0.4s var(--ease); }
@keyframes like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (max-width: 380px) { .icon-btn--wish { display: none; } }

/* ---------- Touch: no zoom unless the person pinches ----------
   A quick double tap on a button or card used to zoom the page on phones.
   manipulation keeps pinch-zoom and scrolling and only drops the
   double-tap zoom; the 16px floor on fields stops the focus zoom on iPads
   and any other touch screen wider than a phone. */
body { touch-action: manipulation; }
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}

/* ---------- Checkout: sign in or continue as a guest ---------- */
.checkout-gate { max-width: 560px; margin: 0 auto 24px; }
.checkout-gate h3 { margin: 0 0 6px; }
.checkout-gate p { margin: 0 0 16px; color: var(--gray-600); font-size: 14px; }
.checkout-gate__actions { display: flex; flex-direction: column; gap: 10px; }
.checkout-gate__actions .btn-solid, .checkout-gate__actions .btn-outline { width: 100%; justify-content: center; height: 50px; }
.checkout-gate__why { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 12.5px; color: var(--gray-600); }
.checkout-gate__why li { display: flex; align-items: center; gap: 6px; }
.checkout-gate__why svg { width: 14px; height: 14px; color: var(--green-600); flex: 0 0 auto; }
@media (max-width: 480px) { .checkout-gate__why { grid-template-columns: minmax(0, 1fr); } }

/* Pre-order tiles on the homepage */
.hs-tile__badge--pre { background: #6d3fd1; color: #fff; }

/* The product picture is positioned over the whole media box and was
   painted above the heart and the badge, so a real tap on the heart hit
   the picture and opened the product instead. Both sit above it now, and
   the heart is a comfortable thumb size. */
.product-card__like, .product-card__tag, .product-card__avail { z-index: 2; }
.product-card__like { width: 34px; height: 34px; }

/* Wishlist page: the clear button sits above the grid, right-aligned. */
.wishlist-tools { display: flex; justify-content: flex-end; margin: -6px 0 18px; }
.wishlist-tools .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; }
.wishlist-tools .btn-outline svg { width: 16px; height: 16px; }
.wishlist-tools .btn-outline[hidden] { display: none; }

/* ---- Category hero: moving video background (js/hero-video-bg.js) ---- */
.shop-hero--video { position: relative; overflow: hidden; isolation: isolate; background-color: #0164ce; }
.shop-hero--video > .container { position: relative; z-index: 2; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #0164ce; }
.hero-bg__slot {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease;
}
.hero-bg__slot.is-live { opacity: 1; }
.hero-bg__slot > div, .hero-bg__slot iframe {
  position: absolute; top: 50%; left: 50%;
  width: var(--hero-bg-w, 100%); height: var(--hero-bg-h, 100%);
  transform: translate(-50%, -50%);
  border: 0;
}
/* A slow push-in on the live clip, so even a still shot has motion. */
.hero-bg.is-playing .hero-bg__slot.is-live iframe { animation: hero-bg-zoom 11s linear both; }
@keyframes hero-bg-zoom { from { transform: translate(-50%, -50%) scale(1.02); } to { transform: translate(-50%, -50%) scale(1.12); } }
.hero-bg__tint { position: absolute; inset: 0; opacity: 0.58; background-size: 180% 180%; animation: hero-bg-drift 24s ease-in-out infinite; }
@keyframes hero-bg-drift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
.hero-bg__tint::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(5, 10, 30, 0) 40%, rgba(5, 10, 30, 0.55) 100%), linear-gradient(180deg, rgba(5, 10, 30, 0.12) 0%, rgba(5, 10, 30, 0.5) 100%); }
.hero-bg__flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.hero-bg__flash.go { animation: hero-bg-flash 0.52s ease-out both; }
@keyframes hero-bg-flash { 0% { opacity: 0; } 14% { opacity: 0.72; } 100% { opacity: 0; } }
.shop-hero--video .search-bar input { background: rgba(255, 255, 255, 0.14); color: #fff; }
.shop-hero--video .search-bar input::placeholder { color: rgba(255, 255, 255, 0.7); }

/* The heart on a product card sits inside the picture area, whose drawn
   watermark icon rule (faded, offset) was also catching the heart's own
   svg — it read as an empty white circle. The heart is pinned back. */
.product-card__media .product-card__like svg,
.product-card__like svg {
  position: static; width: 17px; height: 17px; opacity: 1; transform: none;
  inset: auto; margin: 0; pointer-events: none;
}
.product-card__like { color: var(--ink-900); background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(7, 26, 77, 0.18); transition: transform 0.15s var(--ease), color 0.15s; }
.product-card__like:hover { transform: scale(1.08); color: var(--red-600); }
.product-card__like.liked { color: var(--red-600); }
.product-card__like.liked svg path { fill: currentColor; }

/* ---- Live chat: a visitor without an account writes from the panel ---- */
.chat-guest { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; }
.chat-guest h3 { margin: 4px 0 0; font-size: 17px; }
.chat-guest__sub { margin: -6px 0 2px; font-size: 13.5px; color: var(--gray-600); }
.chat-guest__field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--gray-600); position: relative; }
.chat-guest__field em { color: var(--red-600); font-style: normal; }
.chat-guest__field small { font-weight: 400; color: var(--gray-400); }
.chat-guest__field input, .chat-guest__field textarea { width: 100%; font: inherit; font-size: 14px; font-weight: 400; color: var(--ink-900); padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: #f7f9fe; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.chat-guest__field textarea { resize: none; min-height: 104px; }
.chat-guest__field input:focus, .chat-guest__field textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(30, 75, 255, 0.14); background: #fff; }
.chat-guest__count { position: absolute; right: 2px; bottom: -16px; font-size: 10.5px; font-weight: 400; color: var(--gray-400); }
.chat-guest__error { margin: 4px 0 0; font-size: 13px; color: var(--red-600); }
.chat-guest__send { margin-top: 10px; width: 100%; height: 48px; border: 0; border-radius: 14px; background: var(--ink-900); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.15s, background 0.15s; }
.chat-guest__send:hover:not(:disabled) { background: var(--blue-600); }
.chat-guest__send:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-guest__note { margin: 4px 0 0; font-size: 12.5px; color: var(--gray-600); text-align: center; }
.chat-guest--done { align-items: center; text-align: center; padding-top: 22px; }
.chat-guest__tick { width: 56px; height: 56px; border-radius: 50%; background: rgba(34, 197, 94, 0.14); color: #16a34a; display: inline-flex; align-items: center; justify-content: center; }
.chat-guest__tick svg { width: 28px; height: 28px; }

/* ---- Product card: choose a value on the card ---- */
.product-card { position: relative; }
.product-card__picker { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(7, 26, 77, 0.35); padding: 10px; opacity: 0; transform: translateY(8px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); cursor: default; }
.product-card__picker.is-open { opacity: 1; transform: none; }
.product-card__picker-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-600); }
.product-card__picker-close { border: 0; background: var(--gray-100); color: var(--ink-900); width: 26px; height: 26px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }
.product-card__picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.product-card__picker-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: #f7f9fe; font: inherit; font-size: 13.5px; color: var(--ink-900); cursor: pointer; text-align: left; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.product-card__picker-opt strong { color: var(--blue-600); white-space: nowrap; }
.product-card__picker-opt:hover:not(:disabled) { background: var(--blue-50); border-color: var(--blue-500); }
.product-card__picker-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.product-card__picker-opt.is-chosen { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.product-card__picker-opt.is-chosen strong { color: #fff; }
.product-card__picker-more { display: block; margin: 8px 4px 2px; font-size: 12.5px; font-weight: 600; color: var(--gray-600); text-align: center; }
.product-card__cta--pick svg { transition: transform 0.2s var(--ease); }

/* ---- Homepage FAQ roller: three looping rows of question cards ---- */
.faqr { padding-bottom: 56px; background: linear-gradient(180deg, #f6f8ff 0%, #eef2ff 100%); overflow: hidden; }
.faqr .section__head { margin-bottom: 26px; }
.faqr .section__head p { max-width: 52ch; }
.faqr__rows { display: flex; flex-direction: column; gap: 18px; }
.faqr__row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* The right padding equals the gap, so half the doubled track is exactly one
   set of cards plus its gaps and the loop has no jump where it restarts. */
.faqr__track { display: flex; gap: 18px; width: max-content; padding: 6px 18px 10px 0; animation: faqr-left var(--faqr-dur, 60s) linear infinite; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.faqr__row[data-dir="right"] .faqr__track { animation-name: faqr-right; }
.faqr__row:hover .faqr__track, .faqr__row:focus-within .faqr__track { animation-play-state: paused; }
@keyframes faqr-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes faqr-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.faqr__card { flex: 0 0 auto; width: 340px; padding: 20px 22px; border-radius: 18px; background: var(--white); border: 1px solid rgba(30, 75, 255, 0.08); box-shadow: 0 10px 30px -18px rgba(7, 26, 77, 0.35); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.faqr__card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -20px rgba(7, 26, 77, 0.45); }
.faqr__card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); }
.faqr__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gray-600); }
@media (max-width: 640px) { .faqr__card { width: 270px; padding: 16px 18px; } .faqr__card h3 { font-size: 15px; } .faqr__card p { font-size: 13.5px; } }
/* Touch screens: a tap leaves :hover stuck on a card, and Safari on iPhone
   drew that lifted card inside the moving, edge-faded row with part of it
   cut away. No lift and no fade mask there; the row still pauses while a
   card is being read. */
@media (hover: none) {
  .faqr__row { -webkit-mask-image: none; mask-image: none; }
  .faqr__card:hover { transform: none; box-shadow: 0 10px 30px -18px rgba(7, 26, 77, 0.35); }
}

/* ---- Why choose us: chat-style answers that open as you scroll ---- */
.whyq .section__head { margin-bottom: 22px; }
.whyq__list { position: relative; max-width: 760px; margin: 0 auto; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.whyq__rail { position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gray-100); overflow: hidden; }
.whyq__rail-fill { display: block; width: 100%; height: 25%; border-radius: 3px; background: linear-gradient(180deg, var(--blue-500), var(--blue-600)); transition: height 0.5s var(--ease); }
.whyq__item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.whyq__q { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 12px 16px 12px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--white); color: var(--ink-900); font: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; text-align: left; cursor: pointer; box-shadow: 0 2px 8px rgba(7, 26, 77, 0.05); transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.whyq__q:hover { transform: translateX(3px); }
.whyq__item.is-open .whyq__q { background: var(--blue-50); border-color: rgba(30, 75, 255, 0.25); }
.whyq__ico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--blue-600); flex: 0 0 auto; }
.whyq__item.is-open .whyq__ico { background: var(--blue-600); color: #fff; }
.whyq__ico svg { width: 18px; height: 18px; }
.whyq__sign { position: relative; width: 18px; height: 18px; flex: 0 0 auto; margin-left: 4px; }
.whyq__sign::before, .whyq__sign::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.25s var(--ease), opacity 0.25s; }
.whyq__sign::before { width: 14px; height: 2px; }
.whyq__sign::after { width: 2px; height: 14px; }
.whyq__item.is-open .whyq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.whyq__a { align-self: flex-end; max-width: min(88%, 560px); display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(8px) scale(0.98); transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease), transform 0.45s var(--ease); }
.whyq__a > p { overflow: hidden; margin: 0; padding: 0 20px; border-radius: 22px 22px 6px 22px; background: linear-gradient(135deg, var(--blue-600), #4a7dff); color: #fff; font-size: 15.5px; line-height: 1.55; box-shadow: 0 14px 30px -14px rgba(30, 75, 255, 0.75); transition: padding 0.45s var(--ease); }
.whyq__item.is-open .whyq__a { grid-template-rows: 1fr; opacity: 1; transform: none; }
.whyq__item.is-open .whyq__a > p { padding: 14px 20px; }
@media (max-width: 640px) { .whyq__q { font-size: 15px; padding: 10px 14px 10px 10px; } .whyq__ico { width: 30px; height: 30px; } .whyq__a { max-width: 94%; } .whyq__a > p { font-size: 14.5px; } }
/* The FAQ roller keeps rolling under reduced motion, like the homepage
   marquees: it is content moving slowly past, not a flourish. Slower, though. */
@media (prefers-reduced-motion: reduce) {
  .faqr__track { animation: faqr-left calc(var(--faqr-dur, 60s) * 2) linear infinite !important; }
  .faqr__row[data-dir="right"] .faqr__track { animation-name: faqr-right !important; }
  .faqr__row:hover .faqr__track { animation-play-state: paused !important; }
}

/* ---- "Still have questions?" — copy and one button left, checklist right ---- */
.cta4 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-lg); background: #f4f6fb; border: 1px solid var(--border); }
.cta4__copy h3 { font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin: 0 0 10px; }
.cta4__copy p { margin: 0 0 22px; color: var(--gray-600); font-size: 15.5px; line-height: 1.55; max-width: 46ch; }
.cta4__btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--ink-900); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.15s var(--ease); }
.cta4__btn:hover { background: var(--blue-600); transform: translateY(-1px); }
.cta4__btn span { transition: transform 0.2s var(--ease); }
.cta4__btn:hover span { transform: translateX(3px); }
.cta4__mail { display: block; margin-top: 12px; font-size: 13.5px; color: var(--gray-600); }
.cta4__mail:hover { color: var(--blue-600); }
.cta4__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cta4__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--ink-900); }
.cta4__list svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--blue-600); }
@media (max-width: 760px) { .cta4 { grid-template-columns: minmax(0, 1fr); gap: 22px; } .cta4__list { padding-top: 6px; border-top: 1px solid var(--border); padding-top: 18px; } }

/* ---- Footer: brand + order tracker, links, contact and social ---- */
.ft { position: relative; overflow: hidden; background: var(--ink-900); color: #b7c0d6; padding: 64px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ft__glow { position: absolute; left: -120px; top: -140px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(30, 75, 255, 0.35), rgba(30, 75, 255, 0)); filter: blur(30px); pointer-events: none; }
/* ---------- The footer's waves ----------
   Two of them, one behind the other, drifting at different speeds so the
   shape between them keeps changing instead of sliding past as one block.
   Each run holds the same shape twice and moves by exactly half its width,
   which is what makes the loop seamless. They sit under everything, take no
   presses, and stand still for a reader who asked for no motion. */
.ft__waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 420px;
  overflow: hidden; pointer-events: none; z-index: 0;
  /* Faded off at the top so the waves rise out of the footer's own colour
     rather than starting on a hard line. */
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent);
  mask-image: linear-gradient(to top, #000 45%, transparent);
}
.ft__waves-run {
  position: absolute; left: 0; bottom: 0; display: flex; width: 200%; height: 100%;
  animation: ft-wave 26s linear infinite;
  color: rgba(255, 255, 255, 0.09);
}
.ft__waves-run--front { animation-duration: 17s; color: rgba(255, 255, 255, 0.14); }
.ft__waves-run svg { flex: 0 0 50%; width: 50%; height: 100%; display: block; }
.ft__waves-run path { fill: currentColor; }
@keyframes ft-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .ft__waves { height: 250px; } }
@media (prefers-reduced-motion: reduce) { .ft__waves-run { animation: none; } }

.ft .container { position: relative; }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ft__col h4 { color: #fff; font-family: var(--font-heading); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; }
.ft__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft__col a { color: #b7c0d6; font-size: 14px; text-decoration: none; transition: color 0.15s, transform 0.15s var(--ease); display: inline-block; }
.ft__col ul a:hover { color: #fff; transform: translateX(3px); }
.ft__col--brand .brand__logo { height: 40px; width: auto; }
.ft__col--brand > p { font-size: 14px; line-height: 1.7; margin: 16px 0 22px; max-width: 300px; color: #9aa5c0; }
.ft__label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin-bottom: 8px; }
.ft__track-row { position: relative; max-width: 340px; }
.ft__track-row input { width: 100%; height: 46px; padding: 0 52px 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.06); color: #fff; font: inherit; font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.ft__track-row input::placeholder { color: #7f8ba6; }
.ft__track-row input:focus { border-color: var(--blue-500); background: rgba(255, 255, 255, 0.09); box-shadow: 0 0 0 4px rgba(30, 75, 255, 0.22); }
.ft__track-row button { position: absolute; right: 5px; top: 5px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--blue-600); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s var(--ease), background 0.15s; }
.ft__track-row button svg { width: 17px; height: 17px; }
.ft__track-row button:hover { background: var(--blue-500); transform: scale(1.06); }
.ft__hint { display: block; margin-top: 8px; font-size: 12px; color: #7f8ba6; }
.ft__contact { font-style: normal; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; color: #b7c0d6; margin-bottom: 22px; }
.ft__contact-name { color: #fff; font-weight: 700; }
.ft__contact a:hover { color: #fff; }
.ft__follow-head { margin-top: 4px; }
.ft__socials { display: flex; flex-wrap: wrap; gap: 10px; }
.ft__socials a { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease); }
.ft__socials a:hover { background: var(--blue-600); border-color: var(--blue-600); transform: translateY(-2px); text-decoration: none; }
.ft__socials svg { width: 17px; height: 17px; }
.ft__socials a::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); padding: 5px 9px; border-radius: 8px; background: #fff; color: var(--ink-900); font-size: 11.5px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s var(--ease); }
.ft__socials a:hover::after, .ft__socials a:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ft__bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 22px 0 26px; font-size: 12.5px; color: #8b93a1; }
.ft__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.ft__legal a { color: #8b93a1; text-decoration: none; }
.ft__legal a:hover { color: #fff; }
@media (max-width: 980px) { .ft__grid { grid-template-columns: 1fr 1fr; gap: 34px 28px; } .ft__col--brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ft { padding-top: 48px; } .ft__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .ft__col--contact { grid-column: 1 / -1; } .ft__bottom { flex-direction: column; align-items: flex-start; } }

/* ---- Announcement bar as glass over the bottom of the hero ----
   The hero keeps painting for another 64px under the bar, and the bar
   blurs whatever plays there, so the announcements sit on a frosted strip
   of the hero video rather than a flat block. */
.home-hero.has-glass-bar { padding-bottom: 64px; }
.announce.is-glass { position: relative; z-index: 3; margin-top: -64px; background: rgba(9, 14, 30, 0.42); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, 0.6); }
.announce.is-glass::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); }
.announce.is-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%); }
.announce.is-glass .announce__inner { min-height: 64px; position: relative; }
.announce.is-glass .announce__arrow { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .announce.is-glass { background: rgba(9, 14, 30, 0.86); } }

/* ---- Hero in the brand's own blue (sampled from the character picture:
   #0059c4 at the top through #0164ce to #0375d7 at the bottom) ---- */
.home-hero {
  background:
    radial-gradient(ellipse 60% 50% at 20% 15%, rgba(255, 255, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 45% at 85% 80%, rgba(3, 117, 215, 0.9), transparent 65%),
    linear-gradient(180deg, #0059c4 0%, #0164ce 50%, #0375d7 100%);
}
.home-hero h1 span { background: linear-gradient(100deg, #ffffff, #cfe6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero__overlay { background: #0142a8; }
.home-hero p.lede, .home-hero__typewriter { color: rgba(255, 255, 255, 0.88); }
.home-hero__intro { color: rgba(255, 255, 255, 0.72); }
.announce.is-glass { background: rgba(1, 74, 180, 0.38); border-top-color: rgba(255, 255, 255, 0.28); }

/* ---- Fields never smaller than 16px: the one rule iPhones use to decide
   whether to zoom into a field. Applies on every screen, so nothing slips. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .hero-search__input, .ft__track-row input, .chat-guest__field input, .chat-guest__field textarea { font-size: 16px !important; }
html { -webkit-text-size-adjust: 100%; }

/* ---- Brand colour: the sky blue of the character picture, with white ---- */
:root {
  --blue-700: #0059c4;
  --blue-600: #0164ce;
  --blue-500: #0375d7;
  --blue-400: #3d95ea;
  --blue-50: #eaf3ff;
}
.site-header { background: linear-gradient(165deg, #0059c4 0%, #0164ce 60%, #0375d7 100%); border-bottom-color: rgba(255, 255, 255, 0.16); }
body.hero-header .site-header.is-scrolled { background: linear-gradient(165deg, #0059c4 0%, #0164ce 60%, #0375d7 100%); }
.ft { background: linear-gradient(180deg, #0a3fb0 0%, #062a7a 55%, #041c55 100%); color: #d6e4ff; }
.ft__col a, .ft__contact, .ft__bottom, .ft__legal a, .ft__hint, .ft__col--brand > p { color: #d6e4ff; }
.ft__col a:hover, .ft__legal a:hover { color: #fff; }
.ft__glow { background: radial-gradient(closest-side, rgba(3, 117, 215, 0.6), rgba(3, 117, 215, 0)); }
/* Header in the brand blue on every page; beats the older navy rules,
   including the phone-width ones and the scrolled state. The homepage keeps
   its transparent header over the hero until the visitor scrolls. */
body:not(.hero-header) .site-header, .site-header.is-scrolled, body:not(.hero-header) .site-header.is-scrolled, body.hero-header .site-header.is-scrolled { background: linear-gradient(165deg, #0059c4 0%, #0164ce 60%, #0375d7 100%) !important; }
/* The menu used to paint its full-screen container blue, which is why
   opening it turned the whole page behind into a flat blue field. The
   panel is white and the scrim dims what is behind it, so neither needs a
   colour here. */
/* Shop, data-bundle, support and store heroes on phones were navy; they
   follow the brand blue now, with the branded/video category heroes left
   to their own colours. */
@media (max-width: 760px) {
  body .shop-hero:not(.shop-hero--branded):not(.shop-hero--video), body .db-hero, body .support-hero, body .store-hero { background: linear-gradient(165deg, #0059c4 0%, #0164ce 60%, #0375d7 100%) !important; }
}

/* ---- Page heroes run to the top under a see-through header ----
   The header floats transparent over the first section on every page and
   takes the brand blue back once the visitor scrolls (site.js adds
   body.hero-header--page). The heroes themselves are the brand blue with
   white text on every screen, so the white logo and icons always read. */
body.hero-header--page .shop-hero, body.hero-header--page .db-hero, body.hero-header--page .support-hero, body.hero-header--page .store-hero { padding-top: calc(var(--site-header-h, 84px) + 18px); }
body.hero-header--page .db-tabs { top: var(--site-header-h, 84px); }
.shop-hero, .support-hero, .store-hero { background: linear-gradient(165deg, #0059c4 0%, #0164ce 55%, #0375d7 100%); color: #fff; border-bottom: 0; }
.shop-hero h1, .support-hero h1, .store-hero h1, .shop-hero p, .support-hero p, .store-hero p, .shop-hero .breadcrumb a, .shop-hero .breadcrumb span:last-child, .support-hero .breadcrumb a, .support-hero .breadcrumb span:last-child { color: #fff; }
.shop-hero .breadcrumb, .shop-hero .breadcrumb span, .support-hero .breadcrumb, .support-hero .breadcrumb span { color: rgba(255, 255, 255, 0.72); }
.shop-hero:not(.shop-hero--branded) .search-bar input { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; }
.shop-hero:not(.shop-hero--branded) .search-bar input::placeholder { color: rgba(255, 255, 255, 0.72); }
.shop-hero:not(.shop-hero--branded) .search-bar svg { color: rgba(255, 255, 255, 0.8); }
.shop-hero:not(.shop-hero--branded) .cat-head__icon { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.shop-hero:not(.shop-hero--branded) .cat-stat { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); color: #fff; }

/* ---- Under the phone's status bar ----
   Opened from the Home Screen (or any browser that lets the page run edge
   to edge), the hero paints behind the clock and battery; the floating
   header and the bottom bar step down/up by the safe-area insets so
   nothing sits under them. In a normal Safari tab the insets are 0. */
body.hero-header .site-header { padding-top: env(safe-area-inset-top, 0px); }
.site-header { padding-top: env(safe-area-inset-top, 0px); }
.home-hero, .shop-hero, .db-hero, .support-hero, .store-hero { padding-top: calc(env(safe-area-inset-top, 0px) + var(--hero-top-pad, 0px)); }
body.hero-header .home-hero > .container { padding-top: calc(var(--site-header-h) + clamp(16px, 3vw, 40px)); }
body.hero-header--page .shop-hero, body.hero-header--page .db-hero, body.hero-header--page .support-hero, body.hero-header--page .store-hero { padding-top: calc(var(--site-header-h, 84px) + 18px); }

/* ---- Header always in view ----
   Fixed at the top on every page, never tucked away on scroll. Compact on
   phones (the padding is the header's own --header-pad). The page's own
   background is the brand blue so the strip behind the phone's clock and
   battery reads as the top of the hero, not a white gap. */
.site-header--tucked { transform: none !important; }
.site-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 30; }
/* The header is fixed, so a page without a hero starts its content below
   it. This belongs on main and the session gate only: having it on body as
   well stacked two header heights and left a white band under the header
   on the dashboard, orders, wallet and every other gated page. */
body:not(.hero-header) main#main-content,
body:not(.hero-header) .session-gate { padding-top: var(--site-header-h, 62px); }
html { background-color: #0059c4; }
body { background-color: #f8f9fb; }

/* ---- Labels read as words, not tracked capitals ---- */
.mobile-menu__label, .product-card__cat, .game-card__cat, .footer-col h4, .filter-group h4, .product-detail__cat, .region-panel__head, .oc-card__label, .oc-summary__label, .ft__label, .product-card__picker-head, .chat-section, .db-hot-card__kind, .account-menu__balance span, .vstage__eyebrow { text-transform: none; letter-spacing: 0.01em; }
.product-card__cat, .product-detail__cat, .game-card__cat { font-weight: 700; }
/* "View all" and "See all" links end in a drawn chevron rather than a typed arrow. */
.section__view-all::after, .hs__all::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.2s var(--ease); }
.section__view-all:hover::after, .hs__all:hover::after { transform: translateX(3px); }

/* ---- Signed-out header: Create Account beside the Login button ---- */
.hdr-signup {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 0.15s var(--ease), background 0.15s var(--ease);
}
.hdr-signup:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); text-decoration: none; }
/* On a phone the drawer carries both, so the header keeps one Login control. */
@media (max-width: 900px) { .hdr-signup { display: none; } }

/* Pulling past the top of the page used to rubber-band the near-white page
   background into view above the fixed header, which read as a white strip
   under the phone's clock. The page no longer bounces past its own edge. */
html, body { overscroll-behavior-y: none; }

/* ---- Order progress: the line finishes green, and it moves ----
   Each step settles in turn, the connector draws itself between them, the
   step in progress breathes, and the last step of a finished order lands
   with a single pop and a ring. */
.oc-steps .oc-step {
  animation: oc-step-in 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes oc-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.oc-step__dot { transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.oc-step.is-done .oc-step__dot {
  background: linear-gradient(160deg, #35a96a, var(--green-600));
  box-shadow: 0 6px 14px -7px rgba(18, 122, 68, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
.oc-step.is-current .oc-step__dot {
  background: linear-gradient(160deg, #ffc662, #f5a524);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: oc-pulse 1.9s ease-in-out infinite;
}
@keyframes oc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 165, 36, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  55% { box-shadow: 0 0 0 11px rgba(245, 165, 36, 0), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}

.oc-step.is-done::before {
  transform-origin: left center;
  animation: oc-line 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 110ms + 170ms);
}
@keyframes oc-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.oc-steps.is-complete .oc-step.is-final .oc-step__dot {
  animation: oc-pop 0.66s cubic-bezier(0.22, 1.2, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + 210ms);
}
@keyframes oc-pop { 0% { transform: scale(0.55); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
.oc-steps.is-complete .oc-step.is-final .oc-step__dot::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--green-600);
  opacity: 0;
  pointer-events: none;
  animation: oc-ring 1.1s var(--ease) 0.55s 2 both;
}
@keyframes oc-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.55); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .oc-steps .oc-step,
  .oc-step.is-done::before,
  .oc-step.is-current .oc-step__dot,
  .oc-steps.is-complete .oc-step.is-final .oc-step__dot { animation: none; }
  .oc-steps.is-complete .oc-step.is-final .oc-step__dot::after { display: none; }
}

/* My Orders: the product's picture instead of the bag icon. */
.order-card__icon--img { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border); width: 56px; height: 56px; border-radius: 14px; }
.order-card__icon--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.order-card__more { position: absolute; right: 3px; bottom: 3px; padding: 0 5px; border-radius: 999px; background: rgba(11, 31, 68, 0.78); color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700; line-height: 16px; }

/* Item status reads in sentence case; the order number stays on one line. */
.oc-pill { text-transform: none; letter-spacing: 0; }
.oc-summary strong#ocOrderId { word-break: normal; overflow-wrap: anywhere; white-space: nowrap; }
@media (max-width: 430px) { .oc-summary strong#ocOrderId { font-size: 13px; white-space: normal; } }

/* ---- Order progress: the van ----
   A small 3D delivery van (stacked SVG layers, like the email banners)
   rides a line above the dots. It waits at Placed until payment, drives in
   place while the order is worked on, glides to the next step when the
   status changes, and hands over a tick when the order is delivered. */
.oc-card__label { flex-wrap: wrap; }
.oc-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #17803d; }
.oc-live__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22b573; }
.oc-live__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(34, 181, 115, 0.5); animation: oc-live 1.8s ease-out infinite; }
@keyframes oc-live { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.oc-live.is-off { color: var(--gray-600); }
.oc-live.is-off .oc-live__dot { background: #b8c1d1; }
.oc-live.is-off .oc-live__dot::after, .oc-live.is-final .oc-live__dot::after { display: none; }
.oc-live.is-final { color: var(--gray-600); }

.oc-track { --n: 4; --x: 12.5%; --fill: 0%; --dot: 34px; --lane: 64px; position: relative; padding-top: var(--lane); }
.oc-track .oc-step::before { display: none; }
.oc-track__line {
  position: absolute;
  left: calc(100% / (var(--n) * 2));
  right: calc(100% / (var(--n) * 2));
  top: calc(var(--lane) + var(--dot) / 2 - 3px);
  height: 6px;
  border-radius: 6px;
  background: #e3ecf8;
  overflow: hidden;
}
.oc-track__fill {
  display: block;
  height: 100%;
  width: var(--fill);
  border-radius: inherit;
  background: linear-gradient(90deg, #22b573, #0164ce);
  transition: width 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.oc-track .oc-steps { position: relative; }
.oc-track .oc-steps--settled .oc-step { animation: none; }

.oc-van {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 70px;
  height: 60px;
  margin-left: -35px;
  perspective: 420px;
  transition: left 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}
.oc-van__hop { position: absolute; inset: 0; transform-style: preserve-3d; animation: oc-van-hop 2.8s ease-in-out infinite; }
.oc-van__obj { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-20deg); animation: oc-van-sway 5.6s ease-in-out infinite; }
.oc-van__layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.oc-van__wheel { transform-box: fill-box; transform-origin: 50% 50%; }
.oc-van__shadow { position: absolute; left: 10px; right: 8px; bottom: -3px; height: 9px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 40, 110, 0.32), rgba(0, 40, 110, 0) 70%); animation: oc-van-shadow 2.8s ease-in-out infinite; }
@keyframes oc-van-hop { 0%, 30%, 100% { transform: translateY(0); } 44% { transform: translateY(1px); } 56% { transform: translateY(-5px); } 70% { transform: translateY(0); } }
@keyframes oc-van-sway { 0%, 100% { transform: rotateX(8deg) rotateY(-22deg); } 50% { transform: rotateX(5deg) rotateY(-10deg); } }
@keyframes oc-van-shadow { 0%, 30%, 100% { transform: scale(1); } 56% { transform: scale(0.86); opacity: 0.75; } }

/* Waiting for payment: parked, a slow breath, wheels still. */
.oc-van.is-waiting .oc-van__hop { animation-duration: 4.2s; }

/* Being worked on, or driving to the next step: wheels turn, air rushes. */
.oc-van.is-working .oc-van__wheel,
.oc-van.is-driving .oc-van__wheel { animation: oc-van-wheel 0.7s linear infinite; }
.oc-van.is-driving .oc-van__wheel { animation-duration: 0.35s; }
@keyframes oc-van-wheel { to { transform: rotate(360deg); } }
.oc-van__speed { position: absolute; left: -10px; height: 3px; border-radius: 3px; background: #9cc0ef; opacity: 0; }
.oc-van__speed { top: 26px; width: 16px; }
.oc-van__speed--2 { top: 36px; width: 22px; left: -16px; }
.oc-van__speed--3 { top: 46px; width: 12px; left: -8px; }
.oc-van.is-working .oc-van__speed,
.oc-van.is-driving .oc-van__speed { animation: oc-van-speed 1.1s ease-in-out infinite; }
.oc-van.is-working .oc-van__speed--2, .oc-van.is-driving .oc-van__speed--2 { animation-delay: 0.18s; }
.oc-van.is-working .oc-van__speed--3, .oc-van.is-driving .oc-van__speed--3 { animation-delay: 0.36s; }
@keyframes oc-van-speed { 0%, 100% { opacity: 0; transform: translateX(8px) scaleX(0.3); } 40% { opacity: 0.9; transform: translateX(-6px) scaleX(1); } 70% { opacity: 0; transform: translateX(-18px) scaleX(0.6); } }
.oc-van.is-driving .oc-van__obj { animation: none; transform: rotateX(6deg) rotateY(-12deg) rotateZ(-2deg); }

/* Delivered: the parcel tick pops up over the van with a few sparks. */
.oc-van__parcel { position: absolute; left: 50%; top: -14px; width: 26px; height: 26px; margin-left: -13px; opacity: 0; transform: scale(0); }
.oc-van__parcel svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0, 60, 30, 0.3)); }
.oc-van.is-arrived .oc-van__parcel { animation: oc-van-parcel 0.7s cubic-bezier(0.22, 1.3, 0.36, 1) 0.9s both; }
@keyframes oc-van-parcel { 0% { opacity: 0; transform: translateY(14px) scale(0.4); } 60% { opacity: 1; transform: translateY(-4px) scale(1.15); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.oc-van__spark { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; margin-left: -4px; background: #9cc0ef; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; }
.oc-van__spark--g { background: #ffc41f; }
.oc-van.is-arrived .oc-van__spark { animation: oc-van-spark 0.9s ease-out 1.05s both; }
@keyframes oc-van-spark { 0% { opacity: 0; transform: translate(0, 0) scale(0); } 35% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(45deg); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * 1.5)) scale(0.3) rotate(90deg); } }

/* Cancelled: parked at the start, greyed, still. */
.oc-track.is-cancelled .oc-van { filter: grayscale(1); opacity: 0.55; }
.oc-track.is-cancelled .oc-van__hop, .oc-track.is-cancelled .oc-van__obj, .oc-track.is-cancelled .oc-van__shadow { animation: none; }
.oc-track.is-cancelled .oc-track__fill { background: #cfd6e2; }

@media (max-width: 560px) {
  .oc-track { --dot: 30px; --lane: 56px; }
  .oc-van { width: 60px; height: 51px; margin-left: -30px; }
}
@media (max-width: 380px) {
  .oc-track { --dot: 26px; --lane: 50px; }
  .oc-van { width: 52px; height: 44px; margin-left: -26px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-van, .oc-track__fill { transition: none; }
  .oc-van__hop, .oc-van__obj, .oc-van__shadow, .oc-van__wheel, .oc-van__speed, .oc-live__dot::after { animation: none !important; }
  .oc-van.is-arrived .oc-van__parcel { animation: none; opacity: 1; transform: none; }
  .oc-van.is-arrived .oc-van__spark { animation: none; }
}

/* ---- Sub-category bar on a category hero ----
   It sits on the hero's video or gradient, so it takes the same frosted
   treatment as the stat pills and the search field instead of a solid
   white block. The labels had been inheriting the hero's white text on
   that white block, which left only the active pill readable. */
.shop-hero .network-tabs {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.shop-hero .network-tabs .network-tab { color: rgba(255, 255, 255, 0.88); }
.shop-hero .network-tabs .network-tab small { color: rgba(255, 255, 255, 0.68); font-weight: 600; }
.shop-hero .network-tabs .network-tab:hover:not(.active) { color: #fff; }
.shop-hero .network-tabs .network-tab.active,
.shop-hero .network-tabs .network-tab.active small { color: #fff; }
.shop-hero .network-tabs__indicator { background: rgba(6, 12, 30, 0.82); }
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .shop-hero .network-tabs { background: rgba(6, 12, 30, 0.34); }
}

/* ---- Dashboard order tracker ----------------------------------------
   The panel borrows the order page's own status, step and item blocks so
   one order looks the same wherever the customer opens it. Only the
   spacing and the stopped state are new here. */
.dash-track-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; margin-bottom: 14px; }
.dash-track-head strong { font-size: 15px; letter-spacing: 0.2px; }
.dash-track-status { margin-bottom: 20px; }
.dash-track-status h1 { font-size: 17px; }
.dash-track-steps { margin: 0 0 22px; }
.dash-track-items { display: grid; gap: 10px; }
.dash-track-items:not(:empty) { margin-bottom: 18px; }
.dash-track-meta { display: grid; gap: 2px; }
.oc-step.is-bad .oc-step__dot { background: var(--red-600, #cd2b31); color: #fff; }
.oc-step.is-bad strong { color: var(--red-600, #cd2b31); }
.dash-track-link { display: inline-block; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--blue-600); text-decoration: none; }
.dash-track-link:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .dash-track-steps { overflow-x: auto; padding-bottom: 4px; }
  .dash-track-steps .oc-step { min-width: 76px; }
}

/* ---- Buy now ---------------------------------------------------------
   A second route to the till for someone who already knows what they
   want. On a card it sits beside the add control; on the product page it
   leads and Add to Cart becomes the quieter of the pair. */
.product-card__buy {
  border: none;
  background: var(--ink-900, #0f172a);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0 12px;
  height: 36px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform var(--dur, 0.2s) var(--ease, ease), box-shadow var(--dur, 0.2s) var(--ease, ease);
}
.product-card__buy:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.6); }
.product-card__buy:active { transform: translateY(0); }
/* The price must never be the thing that gives way. On a two-column
   phone grid the footer has about 131px and wants 177px, and with the
   two buttons fixed at auto the price was the only flexible item, so it
   collapsed from 78px to 32px and rendered as "GH2 9" instead of
   "GH2 90.00". It keeps its natural width now and the row wraps
   instead, putting the price on its own line when space runs out. */
.product-card__footer { gap: 6px; flex-wrap: wrap; }
.product-card__footer .product-card__price {
  margin-right: auto;
  min-width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .product-card__footer .product-card__price { flex: 1 0 100%; margin-bottom: 2px; }
  .product-card__footer .product-card__buy { margin-left: auto; }
}

.product-card__picker-row { display: flex; align-items: stretch; gap: 6px; }
.product-card__picker-row .product-card__picker-opt { flex: 1; min-width: 0; }
.product-card__picker-buy {
  flex: 0 0 auto;
  border: none;
  background: var(--ink-900, #0f172a);
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 0 11px;
  border-radius: 10px;
  cursor: pointer;
}
.product-card__picker-buy:hover { background: var(--blue-700, #0059c4); }

/* The link-shaped control is a button, because the card around it is
   already an anchor and an anchor cannot hold another one. */
.product-card__picker-more {
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.product-card__picker-more:hover { color: var(--blue-600); text-decoration: underline; }

/* Phones: the value menu opens as a sheet from the bottom of the screen
   (js/catalog.js moves it to <body>), so each option gets the full width. */
/* The dashboard's Live Chat panel is the chat, full size; the floating
   button on top of it only covered the Send button. */
body:has(.cust-panel[data-panel="livechat"]:not([hidden])) .support-fab { display: none; }

.product-card__picker-scrim { position: fixed; inset: 0; z-index: 1190; background: rgba(7, 26, 77, 0.45); opacity: 0; transition: opacity 0.2s var(--ease); }
.product-card__picker-scrim.is-open { opacity: 1; }
.product-card__picker.product-card__picker--sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  max-height: 78vh; display: flex; flex-direction: column;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 40px -12px rgba(7, 26, 77, 0.35);
  transform: translateY(100%);
  transition: transform 0.26s var(--ease), opacity 0.2s var(--ease);
}
.product-card__picker--sheet.is-open { transform: none; }
.product-card__picker--sheet::before { content: ""; align-self: center; width: 40px; height: 4px; margin: 2px 0 10px; border-radius: 4px; background: var(--gray-200, #e5e7eb); flex: 0 0 auto; }
.product-card__picker--sheet .product-card__picker-head { align-items: flex-start; gap: 12px; padding: 0 0 12px; font-size: 13px; }
.product-card__picker--sheet .product-card__picker-head span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-card__picker--sheet .product-card__picker-head b { font-size: 17px; line-height: 1.25; color: var(--ink-900); }
.product-card__picker--sheet .product-card__picker-close { flex: 0 0 auto; width: 34px; height: 34px; font-size: 22px; }
.product-card__picker--sheet .product-card__picker-list { max-height: none; flex: 1 1 auto; gap: 8px; overscroll-behavior: contain; }
.product-card__picker--sheet .product-card__picker-row { gap: 8px; }
.product-card__picker--sheet .product-card__picker-opt { min-height: 52px; padding: 10px 14px; font-size: 15px; line-height: 1.3; }
.product-card__picker--sheet .product-card__picker-buy { min-width: 64px; padding: 0 16px; border-radius: 12px; font-size: 15px; }
.product-card__picker--sheet .product-card__picker-more { margin: 12px 0 0; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .product-card__picker--sheet, .product-card__picker-scrim { transition: none; }
}

.product-detail__actions .product-detail__buy { flex: 1 1 auto; }
.product-detail__actions #addToCartBtn { flex: 1 1 auto; }
.product-detail__buy.is-out, #addToCartBtn.is-out { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 420px) {
  .product-card__buy { padding: 0 10px; font-size: 11.5px; }
}
/* Add to Cart became the outline of the pair, so it has to match the solid
   one's height rather than fall back to the shorter default. */
.product-detail__actions .btn-outline {
  height: 52px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.product-detail__actions .btn-outline svg { width: 19px; height: 19px; }
/* A phone can't fit Buy Now, Add to Cart and the heart on one line, so
   Buy Now takes its own row. */
@media (max-width: 440px) {
  .product-detail__actions { flex-wrap: wrap; gap: 10px; }
  .product-detail__actions .product-detail__buy { flex: 1 1 100%; }
  .product-detail__actions #addToCartBtn { flex: 1 1 0; min-width: 0; }
}

/* ---------- Live chat: voice notes, message actions, typing, closed ----------
   Shared by the support widget, the dashboard panel and the admin page. */

/* The toolbar hangs just outside the bubble whatever number of buttons it has. */
.chat-msg--admin .chat-msg__tools { right: auto; left: calc(100% + 6px); }
.chat-msg--customer .chat-msg__tools { left: auto; right: calc(100% + 6px); }
.chat-msg__more {
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: var(--white); color: var(--gray-600);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-msg__more svg { width: 15px; height: 15px; }
.chat-msg__more:hover { background: var(--blue-600); color: #fff; }
.chat-msg-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 6;
  display: flex; flex-direction: column; min-width: 140px; padding: 4px;
  border-radius: 12px; background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); animation: chat-pop 160ms var(--ease);
}
.chat-msg--customer .chat-msg-menu { left: auto; right: 0; }
.chat-msg-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px;
  border: none; border-radius: 8px; background: transparent; color: var(--ink-900);
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.chat-msg-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; }
.chat-msg-menu button:hover { background: var(--blue-50); }
.chat-msg-menu button.is-danger { color: var(--red-600); }
.chat-msg-menu button.is-danger:hover { background: #fdecec; }

.chat-msg__meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 10.5px; line-height: 1; opacity: 0.72; }
.chat-msg__meta time { display: inline; margin: 0; opacity: 1; }
.chat-msg--customer .chat-msg__meta { justify-content: flex-end; }
.chat-msg__edited { font-style: italic; }
.chat-msg--has-att .chat-msg__meta { padding: 0 6px; }

.chat-msg__auto {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.01em; color: var(--blue-700);
}
.chat-msg__auto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.chat-msg--auto { background: #f2f6ff; border: 1px dashed rgba(10, 46, 255, 0.28); }

.chat-msg--deleted { background: transparent !important; border: 1px dashed var(--border); color: var(--gray-600) !important; }
.chat-msg__deleted { font-style: italic; font-size: 12.5px; }

.chat-closed {
  align-self: center; margin: 8px auto; padding: 7px 12px; border-radius: 999px;
  background: var(--gray-100, #f1f3f7); color: var(--gray-600); font-size: 12px; text-align: center; max-width: 92%;
}

/* Three dots while the other side types. */
.chat-typing {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 14px; border-bottom-left-radius: 4px;
  background: var(--blue-50); color: var(--gray-600); font-size: 12px;
}
.chat-typing__dots { display: inline-flex; gap: 3px; }
.chat-typing__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-600); opacity: 0.35; animation: chat-typing 1.2s ease-in-out infinite; }
.chat-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Voice note player inside a bubble */
.chat-voice {
  display: flex; align-items: center; gap: 10px; min-width: 210px; max-width: 100%;
  padding: 6px 10px 6px 6px;
}
.chat-msg--has-att .chat-voice { padding: 4px 8px 4px 4px; }
.chat-voice__play {
  flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--blue-600); color: #fff;
}
.chat-voice__play svg { width: 16px; height: 16px; }
.chat-msg--customer .chat-voice__play { background: #fff; color: var(--blue-600); }
.chat-voice__bar { position: relative; flex: 1; min-width: 90px; height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.12); cursor: pointer; }
.chat-msg--customer .chat-voice__bar { background: rgba(255, 255, 255, 0.35); }
.chat-voice__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--blue-600); }
.chat-msg--customer .chat-voice__fill { background: #fff; }
.chat-voice__bar:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; }
.chat-voice__time { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.85; min-width: 32px; text-align: right; }
.chat-voice audio { display: none; }

/* Mic in place of Send until there is something to send */
.chat-voice-btn {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--blue-600); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(10, 46, 255, 0.6);
}
.chat-voice-btn svg { width: 20px; height: 20px; }
.chat-voice-btn:hover { background: var(--blue-700); }
.chat-voice-btn:disabled { opacity: 0.5; cursor: progress; }
.chat-compose .chat-send[hidden], .chat-voice-btn[hidden] { display: none !important; }

/* Recording bar, over the compose row */
.chat-voicerec {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 6px 6px 8px;
  border-radius: 999px; background: #fff; border: 1.5px solid var(--blue-500);
  box-shadow: 0 8px 22px -12px rgba(10, 46, 255, 0.45);
}
.support-fab__panel .chat-voicerec { left: 12px; right: 12px; bottom: 12px; }
.chat-voicerec__cancel {
  flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: #fdecec; color: var(--red-600);
}
.chat-voicerec__cancel svg { width: 18px; height: 18px; }
.chat-voicerec__dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; flex: 0 0 auto; animation: chat-rec 1s ease-in-out infinite; }
.chat-voicerec__time { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-900); min-width: 36px; }
.chat-voicerec__meter { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 3px; overflow: hidden; }
.chat-voicerec__meter i { flex: 1; max-width: 4px; height: 100%; border-radius: 3px; background: var(--blue-600); transform: scaleY(0.15); transition: transform 80ms linear; }
.chat-voicerec__hint { font-size: 12px; color: var(--gray-600); flex: 0 0 auto; }
.chat-voicerec__send {
  flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--blue-600); color: #fff;
}
.chat-voicerec__send svg { width: 19px; height: 19px; }
.chat-replybar.is-editing { border-left-color: #f59e0b; background: #fff8eb; }
.chat-replybar.is-editing .chat-replybar__icon { color: #b45309; }
.chat-replybar.is-editing .chat-replybar__text strong { color: #92400e; }

/* The customer panel header: online, away, typing */
.chat-head__dot.is-away { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.28); }
.chat-head__end { font-size: 12px; font-weight: 700; padding: 0 10px; width: auto; border-radius: 999px; }

@media (max-width: 640px) {
  .chat-voicerec__hint { display: none; }
  .chat-msg-menu button { padding: 11px 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing__dots i, .chat-voicerec__dot { animation: none; opacity: 0.8; }
  .chat-voicerec__meter i { transition: none; }
}

/* Dashboard Live Chat: status line and End chat */
.dash-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; }
.dash-chat__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
.dash-chat__status i { width: 9px; height: 9px; border-radius: 50%; background: var(--gray-400, #9aa3b2); }
.dash-chat__status.is-online { color: var(--green-600); }
.dash-chat__status.is-online i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
.dash-chat__status.is-away i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25); }
.dash-chat__end {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--white); color: var(--ink-900);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.dash-chat__end:hover { border-color: var(--red-600); color: var(--red-600); }

/* Buttons that must stay on one line whatever the phone-size type rule says. */
.dash-chat__end, .chat-head__end { white-space: nowrap; font-size: 13px !important; }

/* Touch screens: the message toolbar sits under a tapped message instead of
   hanging outside every bubble where it covered the conversation. */
@media (hover: none) {
  .chat-msg__tools { opacity: 0; pointer-events: none; top: calc(100% + 4px); transform: none; z-index: 3; }
  .chat-msg--admin .chat-msg__tools { left: 0; right: auto; }
  .chat-msg--customer .chat-msg__tools { right: 0; left: auto; }
  .chat-msg.is-tools { margin-bottom: 36px; }
  .chat-msg.is-tools .chat-msg__tools { opacity: 1; pointer-events: auto; }
  .chat-msg.is-tools .chat-react-picker, .chat-msg.is-tools .chat-msg-menu { bottom: auto; top: calc(100% + 40px); }
  .chat-msg__reply, .chat-msg__react, .chat-msg__more { width: 34px; height: 34px; }
}

/* Chat panel header: the status stays on one line; Full screen and End chat are icons. */
.chat-head__text #chatHeadStatus { white-space: nowrap; overflow: hidden; }
.chat-head__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: block !important; margin: 0 !important; }
.chat-head__dot { flex: 0 0 auto; }
.chat-head .chat-fullscreen { opacity: 1; }
@media (max-width: 640px) {
  .chat-head { gap: 8px; padding: 14px 10px 12px 14px; }
  .chat-head__icon { width: 36px; height: 36px; border-radius: 10px; }
  .chat-head__icon svg { width: 19px; height: 19px; }
}
.chat-head__text strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
  .support-fab__panel .chat-head__icon { display: none; }
  .support-fab__panel .chat-head__btn { width: 30px; height: 30px; }
  .support-fab__panel .chat-head { gap: 4px; }
}

/* ---------- Pay on Confirmation: account chooser and proof upload ----------
   js/pay-options.js, used by checkout, data bundles, vouchers, AFA and wallet top-up. */
.po-lead { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-900); line-height: 1.5; }
.po-group { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--gray-600); }
.po-accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.po-acct {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--white); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.po-acct input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.po-acct.is-on { border-color: var(--blue-600); background: #f3f8ff; box-shadow: 0 0 0 3px rgba(1, 100, 206, 0.12); }
.po-acct:has(input:focus-visible) { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.po-acct__badge {
  flex: 0 0 auto; min-width: 44px; height: 32px; padding: 0 8px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 800; background: var(--blue-50); color: var(--blue-700);
}
.po-acct__badge[data-net="mtn"] { background: #ffcc00; color: #1a1a1a; }
.po-acct__badge[data-net="telecel"] { background: #e4032e; color: #fff; }
.po-acct__badge[data-net="airteltigo"] { background: #0033a0; color: #fff; }
.po-acct__main { display: flex; flex-direction: column; min-width: 0; }
.po-acct__main strong { font-size: 13.5px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-acct__main em { font-style: normal; font-size: 12.5px; color: var(--gray-600); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-detail { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--white); border: 1px solid var(--border); }
.po-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.po-row:last-of-type { border-bottom: none; }
.po-row__label { flex: 0 0 110px; font-size: 12.5px; color: var(--gray-600); }
.po-row__value { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.po-row__value.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 600; }
.po-row__value.is-amount { color: var(--blue-700); }
.po-copy {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--white); color: var(--blue-700);
  font: inherit; font-size: 12px !important; font-weight: 700; cursor: pointer;
}
.po-copy svg { width: 14px; height: 14px; }
.po-copy:hover { border-color: var(--blue-600); }
.po-qr { display: block; width: 132px; height: 132px; margin: 10px 0 4px; border-radius: 8px; }
.po-note { margin: 8px 0 0; font-size: 12.5px; color: var(--gray-600); line-height: 1.5; }
.po-steps { margin: 10px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-900); line-height: 1.6; }
.po-proof { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #fff8eb; border: 1px solid #f5d38a; text-align: left; }
.po-proof--done { background: var(--green-50, #eaf6f0); border-color: #9fd9b6; }
.po-proof__title { font-size: 14.5px; color: var(--ink-900); }
.po-proof__lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-900); }
.po-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-900); }
.po-field input[type="text"] { height: 42px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); font: inherit; }
.po-field input[type="file"] { font-size: 13px; }
.po-status { margin: 0; min-height: 16px; font-size: 12.5px; color: var(--gray-600); }
.po-status.is-err { color: var(--red-600); }
.po-submit { align-self: stretch; justify-content: center; }
.po-paused { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: #fff4e5; border: 1px solid #f5c26b; font-size: 13px; color: #6b4a0a; }
.po-paused strong { font-size: 14px; color: #8a5a00; }
@media (max-width: 480px) {
  .po-accounts { grid-template-columns: minmax(0, 1fr); }
  .po-row { flex-wrap: wrap; }
  .po-row__label { flex-basis: 100%; }
}

/* Measuring the "Why choose us" list: answers jump to full size for the
   moment it takes, so the height kept is the settled one (js/home-faq.js). */
.whyq__list--measuring .whyq__a, .whyq__list--measuring .whyq__a > p { transition: none !important; }

/* AFA: room for the payment block before it loads, so the form doesn't jump. */
.db-afa-checkout:empty { min-height: 74px; }

/* My Subscriptions: countdown and time used */
.dash-sub__timer { display: block; margin-top: 4px; font-size: 13px; color: var(--blue-700); }
.dash-sub.is-expiring .dash-sub__timer { color: #b45309; }
.dash-sub__bar { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--blue-50); overflow: hidden; max-width: 320px; }
.dash-sub__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), #4a90e2); }
.dash-sub.is-expiring .dash-sub__bar i { background: linear-gradient(90deg, #f59e0b, #d97706); }
/* Wallet and Referrals: history beside the form, stacked on phones. It
   was an inline style, which no media query could override. */
.card-grid.card-grid--split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; gap: 28px; }
@media (max-width: 900px) {
  .card-grid.card-grid--split { grid-template-columns: minmax(0, 1fr); }
}
.dash-sub .dash-row__right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; white-space: normal; min-width: 0; max-width: 100%; }
.dash-sub .dash-row__right .dash-sub__stop { margin-top: 0; }
.dash-sub__device { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-900); font-weight: 600; }
.dash-sub__leaving { display: block; margin-top: 4px; font-size: 12.5px; color: #b45309; }
.dash-sub__stop { margin-top: 6px; padding: 6px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--gray-600); cursor: pointer; }
.dash-sub__stop:hover { border-color: #d97706; color: #b45309; }
.dash-sub__stop:disabled { opacity: 0.6; cursor: default; }

/* ---------- Homepage hero: true facts beside the live counts ---------- */
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.hero-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-facts li[hidden] { display: none; }
.hero-facts svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ---------- Homepage reviews showcase ----------
   A summary on the left (average, stars, count) and a sideways row of real
   review cards. Each card says how we know it: Verified buyer, or where the
   customer sent it. */
.rv { background: linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%); }
.rv[hidden] { display: none; }
.rv__wrap { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; align-items: center; }
.rv__summary h2 { margin: 0 0 16px; font-size: 28px; line-height: 1.15; }
.rv__score { display: flex; align-items: center; gap: 14px; }
.rv__score strong { font-family: var(--font-heading); font-size: 56px; line-height: 1; color: var(--blue-700); letter-spacing: -0.02em; }
.rv__stars { display: flex; gap: 2px; }
.rv__stars svg, .rv-card__stars svg { width: 20px; height: 20px; fill: #dfe6f1; }
.rv__stars svg.on, .rv-card__stars svg.on { fill: #f5b400; }
.rv__count { display: block; margin-top: 4px; font-size: 13px; color: var(--gray-600); }
.rv__note { margin: 16px 0 18px; max-width: 36ch; font-size: 13px; line-height: 1.5; color: var(--gray-600); }
.rv__nav { display: flex; gap: 8px; }
.rv__arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--blue-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 18px -12px rgba(1, 70, 160, 0.5); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.rv__arrow:hover { background: var(--blue-600); color: #fff; }
.rv__arrow svg { width: 18px; height: 18px; }
.rv__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 330px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 16px; scrollbar-width: none; }
.rv__track::-webkit-scrollbar { display: none; }
.rv-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; min-height: 250px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 18px 36px -30px rgba(1, 70, 160, 0.6); }
.rv-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rv-card__stars { display: flex; gap: 1px; }
.rv-card__stars svg { width: 17px; height: 17px; }
.rv-card__date { font-size: 12px; color: var(--gray-600); }
.rv-card__body { flex: 1; margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv-card__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rv-card__avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #3a2a1e; }
.rv-card__who strong { display: block; font-size: 14px; color: var(--ink-900); }
.rv-card__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-600); }
.rv-card__tag--ok { color: #17803d; font-weight: 600; }
.rv-card__tag svg { width: 13px; height: 13px; }
.rv-card__product { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--blue-700); text-decoration: none; min-width: 0; }
.rv-card__product span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-card__product img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }
.rv-card__product--shop { color: var(--gray-600); }

/* ---------- Stagger testimonial stack (homepage showcase) ----------
   Real reviews only. A centred card sits in front of a fanned-out stack;
   the arrows, a click past the centre, or the autoplay slide cards between
   positions. Only transforms change between states, so the browser tweens
   the move. The notch on each card is a clip-path, matching the picked look. */
.rv__stage { position: relative; width: 100%; height: 440px; overflow: hidden; }
.stg-card {
  position: absolute; left: 50%; top: 50%; box-sizing: border-box;
  padding: 24px 24px 22px; background: #fff; color: var(--ink-900);
  border: 2px solid var(--border); cursor: pointer;
  display: flex; flex-direction: column;
  clip-path: polygon(32px 0%, calc(100% - 32px) 0%, 100% 32px, 100% 100%, calc(100% - 32px) 100%, 32px 100%, 0 100%, 0 0);
  transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.stg-card.is-center { background: var(--blue-600); color: #fff; border-color: var(--blue-600); box-shadow: 0 10px 0 3px var(--blue-100); }
.stg-card__stars { display: flex; gap: 2px; margin-bottom: 12px; }
.stg-card__stars svg { width: 18px; height: 18px; fill: #dfe6f1; }
.stg-card__stars svg.on { fill: #f5b400; }
.stg-card.is-center .stg-card__stars svg { fill: rgba(255, 255, 255, 0.35); }
.stg-card.is-center .stg-card__stars svg.on { fill: #ffd45e; }
.stg-card__photo { flex: 0 0 auto; width: 54px; height: 54px; margin-bottom: 12px; object-fit: cover; object-position: top; border-radius: 12px; background: var(--blue-50); box-shadow: 3px 3px 0 rgba(1, 40, 110, 0.12); }
.stg-card__photo--mono { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #3a2a1e; }
.stg-card.is-center .stg-card__photo { box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.25); }
.stg-card__body { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.stg-card__by { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.stg-card__by strong { font-size: 14px; }
.stg-card__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gray-600); }
.stg-card.is-center .stg-card__tag { color: rgba(255, 255, 255, 0.85); }
.stg-card__tag--ok { color: #17803d; font-weight: 600; }
.stg-card.is-center .stg-card__tag--ok { color: #b8f5cf; }
.stg-card__tag svg { width: 13px; height: 13px; }
.stg-card__where { font-size: 12px; color: var(--blue-700); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-card.is-center .stg-card__where { color: rgba(255, 255, 255, 0.9); }
@media (max-width: 560px) { .rv__stage { height: 384px; } }
@media (prefers-reduced-motion: reduce) { .stg-card { transition: background 0.3s linear, color 0.3s linear; } }

@media (max-width: 860px) {
  .rv__wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rv__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; }
  .rv__summary h2 { grid-column: 1 / -1; font-size: 24px; margin-bottom: 12px; }
  .rv__score strong { font-size: 44px; }
  .rv__note { grid-column: 1 / -1; grid-row: 3; margin: 12px 0 0; }
  .rv__nav { grid-column: 2; grid-row: 2; }
  .rv__track { grid-auto-columns: 84%; margin: 0 -16px; padding: 8px 16px 16px; scroll-padding: 0 16px; }
}

/* ---------- "Someone just bought..." popup ----------
   Real orders only (js/purchase-popups.js). Bottom left, clear of the chat
   button on the right and the tab bar on phones. */
.lb-buy { position: fixed; left: 16px; bottom: 16px; z-index: 45; width: min(340px, calc(100vw - 100px)); display: flex; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 44px -18px rgba(1, 40, 110, 0.5); opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.lb-buy.is-in { opacity: 1; transform: none; pointer-events: auto; }
.lb-buy__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 4px 10px 10px; color: inherit; text-decoration: none; }
.lb-buy__pic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--blue-600); }
.lb-buy__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-buy__pic svg { width: 22px; height: 22px; }
.lb-buy__text { min-width: 0; }
.lb-buy__text small { display: block; font-size: 12px; color: var(--gray-600); }
.lb-buy__text strong { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-buy__text em { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; font-style: normal; font-size: 12px; font-weight: 600; color: #17803d; }
.lb-buy__text em svg { width: 12px; height: 12px; }
.lb-buy__x { flex: 0 0 auto; align-self: flex-start; width: 30px; height: 30px; margin: 6px 6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--gray-600); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lb-buy__x:hover { background: var(--gray-100, #eef0f5); color: var(--ink-900); }
.lb-buy__x svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  body.has-tabbar .lb-buy { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-buy { transition: opacity 0.2s linear; transform: none; }
}

/* ---------- The footer sits at the bottom ----------
   On a short page (the Track tab, an empty cart) the footer used to end
   part way up a tall screen, leaving a band of plain blue under it. The
   page is now at least the height of the window, and the main content
   takes up the slack, so the footer always meets the bottom edge. */
body.site-body, body.customer-dashboard { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.site-body > main, body.customer-dashboard > main { flex: 1 0 auto; }
body.site-body > .site-footer, body.customer-dashboard > .site-footer { flex-shrink: 0; }

/* ---------- No sideways slack on phones ----------
   If anything on a page is even a pixel wider than the screen, iPhone
   Safari shrinks the whole page to fit it. The fixed header then no longer
   lines up with the page under it, which showed as a thin light line under
   the header and down the right edge on signed-in pages. Clipping the page
   width stops that; clip (unlike hidden) keeps sticky elements working. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* ---- Install the app ---------------------------------------------------- */
/* The bar that offers to put Legend's Best on a customer's home screen. It
   only ever appears when the phone says it can be installed, or on iPhone
   after a few visits, and it is dismissed for a month with one tap. */
.app-install {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e6eaf0);
  box-shadow: 0 22px 44px -18px rgba(11, 31, 68, 0.4);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 260ms cubic-bezier(.22,.61,.36,1), transform 260ms cubic-bezier(.22,.61,.36,1);
  max-width: 520px;
  margin: 0 auto;
}
.app-install.is-in { opacity: 1; transform: none; }
.app-install img { border-radius: 11px; flex: 0 0 auto; }
.app-install div { flex: 1; min-width: 0; }
.app-install strong { display: block; font-size: 14px; color: var(--ink-900, #0f172a); }
.app-install span { display: block; font-size: 12.5px; color: var(--gray-600, #64748b); margin-top: 2px; line-height: 1.45; }
.app-install__go {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--blue-600, #0164ce);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
}
.app-install__go:active { transform: scale(0.96); }
.app-install__x {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-600, #64748b);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.app-install__x:hover { background: var(--gray-100, #eef2f6); }
/* The tab bar sits at the bottom on phones; the offer clears it. */
body.has-tabbar .app-install { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) {
  .app-install { transition: none; }
}

/* ---- Notifications on the phone (customer dashboard) -------------------- */
.push-intro { margin: 0 0 14px; font-size: 13.5px; color: var(--gray-600); line-height: 1.55; }
.push-rows { display: grid; gap: 4px; }
.push-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.push-row:last-child { border-bottom: 0; }
.push-row > span { flex: 1; min-width: 0; }
.push-row strong { display: block; font-size: 14px; color: var(--ink-900); }
.push-row strong + span { display: block; font-size: 12.5px; color: var(--gray-600); margin-top: 2px; line-height: 1.5; }
/* A proper switch rather than a tick box: this turns something on. */
.push-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 46px;
  height: 27px;
  margin: 0;
  border-radius: 999px;
  background: var(--gray-200);
  position: relative;
  cursor: pointer;
  transition: background 220ms cubic-bezier(.22,.61,.36,1);
}
.push-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(11, 31, 68, 0.3);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
}
.push-row input[type="checkbox"]:checked { background: var(--blue-600); }
.push-row input[type="checkbox"]:checked::after { transform: translateX(19px); }
.push-row input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.push-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .push-row input[type="checkbox"], .push-row input[type="checkbox"]::after { transition: none; }
}

/* ---- The see-through header ---------------------------------------------
   On any page that opens with a hero the header has no background at all:
   the picture runs to the top of the page behind it, unbroken.

   White on a photograph still has nothing to hold it, so rather than lay a
   shade across the whole bar, the two things that need to stay readable
   carry their own: the logo gets a shadow, and the four buttons keep a
   dark translucent pill and a brighter edge. The picture is untouched.

   In Safari the strip behind the phone's clock belongs to the browser and
   accepts only a flat colour, never a picture, so js/site.js gives it the
   brand blue. */
body.hero-header .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
/* The logo and the four buttons carry their own contrast on every page,
   not only over a hero. On the solid blue header they were white at 85%
   with an 18% edge, which reads as faded rather than as restraint. */
.site-header .brand__logo { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45)); }
.site-header .icon-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
body.hero-header .site-header .brand__logo { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.62)); }
body.hero-header .site-header .icon-btn {
  background: rgba(8, 16, 38, 0.38);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

/* ---------- Live chat: seen ticks, picture boxes, "in this chat" ----------
   js/chat-ui.js draws the ticks and sizes the pictures; the widget
   (js/site.js), the dashboard and the admin page all share these. */
.chat-tick { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.chat-tick svg { width: 16px; height: 11px; }
.chat-msg--customer .chat-tick { color: rgba(255, 255, 255, 0.85); }
.chat-msg--customer .chat-tick.is-seen { color: #a8e6ff; }
.chat-msg--admin .chat-tick { color: var(--gray-600); }
.chat-msg--admin .chat-tick.is-seen { color: var(--blue-600); }
.chat-msg__seen { font-size: 10.5px; white-space: nowrap; }

/* A picture holds a 4:3 box while it loads, then the box takes the
   picture's own shape inside the same limits as before. Nothing below it
   moves when a slow photo arrives. */
/* The box is sized on the link, in plain lengths: a percentage here would
   depend on the bubble, whose width depends on the picture, and resolve to
   nothing. max-width still keeps it inside a narrow bubble. */
.chat-att--image { width: 200px; max-width: 100%; }
.chat-att--image img { max-width: 100%; }
.chat-att--image:not(.is-sized) img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.chat-att--image.is-sized {
  width: min(var(--chat-img-natural), var(--chat-img-max-w, 240px), calc(var(--chat-img-max-h, 260px) * var(--chat-img-r)));
}
.chat-att--image.is-sized img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--chat-img-r);
}
.dash-chat__messages { --chat-img-max-w: 320px; --chat-img-max-h: 300px; }
@media (max-width: 640px) {
  .chat-att--image { --chat-img-max-w: 200px; }
}

/* Conversation lists scroll on their own and jump instantly. */
.chat-scroll, .dash-chat__messages { scroll-behavior: auto; overscroll-behavior: contain; }

/* Support has this conversation open right now. */
.chat-head__dot.is-here { background: #2ee27a; box-shadow: 0 0 0 3px rgba(46, 226, 122, 0.45); }
.dash-chat__status.is-here { color: var(--green-600); font-weight: 600; }
.dash-chat__status.is-here i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35); }

/* ---------- Before you pay (checkout.html, js/checkout.js) ----------
   The owner's note, the "I have read this" tick and the questions for a
   service. Fields stay at 16px so iPhones do not zoom into them. */
.bp-list { display: flex; flex-direction: column; gap: 18px; }
.bp-item { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--white); min-width: 0; }
.bp-item__name { margin: 0 0 10px; font-size: 15px; color: var(--ink-900); overflow-wrap: anywhere; }
.bp-note { padding: 12px 14px; border-radius: 10px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--ink-900); font-size: 14px; line-height: 1.55; }
.bp-note strong { display: block; margin-bottom: 4px; color: var(--blue-700); }
.bp-note p { margin: 0; overflow-wrap: anywhere; }
.bp-read { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink-900); cursor: pointer; }
.bp-read input { width: 22px; height: 22px; flex: none; accent-color: var(--blue-600); }
.bp-grid { margin-top: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bp-field { margin-bottom: 0; min-width: 0; }
.bp-field--wide { grid-column: 1 / -1; }
.bp-req { color: var(--red-600); }
.bp-opt { font-weight: 500; font-size: 12.5px; color: var(--gray-600); }
.bp-help { margin: -3px 0 7px; font-size: 13px; color: var(--gray-600); line-height: 1.45; }
.field .bp-input { font-size: 16px; min-height: 48px; }
.field textarea.bp-input { min-height: 96px; }
.field .bp-input.is-invalid { border-color: var(--red-600); }
.bp-secret { gap: 8px; }
.bp-show { flex: none; min-width: 64px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--white); font: inherit; font-size: 14px; font-weight: 600; color: var(--blue-700); cursor: pointer; }
.bp-err { margin: 6px 0 0; font-size: 13px; color: var(--red-600); }
.checkout-upgrade-note { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-md); background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 13.5px; line-height: 1.5; color: var(--ink-900); }

/* ---------- Before you buy (product.html, js/product.js) ---------- */
.pd-beforepay { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--ink-900); font-size: 14px; line-height: 1.55; }
.pd-beforepay__title { display: block; margin-bottom: 4px; color: var(--blue-700); }
.pd-beforepay p { margin: 0; overflow-wrap: anywhere; }
.pd-beforepay .pd-beforepay__asks { margin-top: 8px; font-size: 13px; color: var(--gray-600); }

/* ---------- My subscriptions: plan buttons, upgrade picker, reason ---------- */
.dash-sub__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--white); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-900); text-decoration: none; cursor: pointer; }
.dash-sub__btn:hover { border-color: var(--blue-500); color: var(--blue-700); }
.dash-sub__btn--main { border-color: var(--blue-600); background: var(--blue-600); color: #fff; }
.dash-sub__btn--main:hover { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.dash-sub__btn:disabled { opacity: 0.6; cursor: default; }
.dash-sub__panel { margin-top: 12px; padding: 12px; border: 1px solid var(--blue-100); border-radius: var(--radius-md); background: var(--blue-50); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.dash-sub__panel[hidden] { display: none; }
.dash-sub__panel-lead { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-900); }
.dash-sub__options { display: grid; gap: 8px; width: 100%; }
.dash-sub__option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--white); font: inherit; text-align: left; cursor: pointer; }
.dash-sub .dash-sub__option strong { display: block; font-size: 14px; color: var(--ink-900); overflow-wrap: anywhere; }
.dash-sub .dash-sub__option span { font-size: 13px; color: var(--blue-700); }
.dash-sub__option:hover, .dash-sub__option:focus-visible { border-color: var(--blue-600); }
.dash-sub__option:disabled { opacity: 0.6; cursor: default; }
.dash-sub__why-label { font-size: 13.5px; font-weight: 600; color: var(--ink-900); }
.dash-sub__why { width: 100%; min-height: 88px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit; font-size: 16px; resize: vertical; box-sizing: border-box; }
.dash-sub__panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Announcements: what the owner is telling this customer ----------
   One stack at the top of the dashboard and of the data bundles page, filled
   by js/announcements.js. Nothing at all is drawn when there is nothing to
   say, so an empty stack cannot push the page down by a pixel.

   A card is white like every other card on these pages. The only things that
   change with priority are the rule down its left edge and the word above the
   title, because a wall of coloured boxes reads as decoration and stops being
   read at all. The same classes are used for the preview in the admin drawer,
   so what the owner sees while writing is what the customer gets. */
/* ---------- A notice as a rolling line ----------
   The same announcements as one line that rolls right to left, used where a
   stack of cards would push the page down. --ann-roll-time is measured in
   js/announcements.js from how long the run is, and the two copies of that
   run are identical, so moving by half the track lands exactly where it
   started and the loop has no visible jump. */
.ann-roll {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 var(--space-4); padding: 8px 14px;
  background: #fff; border: 1px solid var(--gray-200); border-bottom: 2px solid var(--blue-600);
  border-radius: 12px; color: var(--ink-900);
}
.ann-roll[hidden] { display: none; }
.ann-roll__mark { flex: none; display: inline-flex; color: var(--blue-700); }
.ann-roll__mark svg { display: block; width: 20px; height: 20px; }
.ann-roll__viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ann-roll__track { display: flex; width: max-content; animation: ann-roll var(--ann-roll-time, 30s) linear infinite; }
.ann-roll:hover .ann-roll__track, .ann-roll:focus-within .ann-roll__track { animation-play-state: paused; }
.ann-roll__group { display: flex; align-items: center; flex: none; white-space: nowrap; }
.ann-roll__msg { display: inline-flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; }
.ann-roll__msg strong { color: var(--blue-700); }
.ann-roll__flag {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--blue-700); background: var(--blue-50); border-radius: 999px; padding: 2px 8px;
}
.ann-roll--care .ann-roll__flag { color: var(--warning); background: rgba(180, 83, 9, 0.1); }
.ann-roll--care strong { color: var(--warning); }
.ann-roll__sep { width: 5px; height: 5px; margin: 0 18px; flex: none; border-radius: 50%; background: var(--blue-600); opacity: 0.55; }
@keyframes ann-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Standing still: nothing moves, the whole line wraps and reads at once. */
.ann-roll.is-still .ann-roll__viewport { -webkit-mask-image: none; mask-image: none; }
.ann-roll.is-still .ann-roll__track { animation: none; width: auto; }
.ann-roll.is-still .ann-roll__group { flex-wrap: wrap; white-space: normal; row-gap: 4px; }
.ann-roll.is-still .ann-roll__sep:last-child { display: none; }
@media (max-width: 640px) {
  .ann-roll { padding: 7px 12px; gap: 8px; }
  .ann-roll__msg { font-size: 13px; }
  .ann-roll__sep { margin: 0 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ann-roll__track { animation: none; }
}

.ann-stack { display: grid; gap: 10px; }
.ann-stack[hidden] { display: none; }
.ann-stack:not(:empty) { margin: 0 0 var(--space-4); }
.ann-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border); border-left: 3px solid var(--gray-400);
  border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-soft);
}
.ann-card--care { border-left-color: var(--warning); }
.ann-card--important { border-left-color: var(--blue-600); }
.ann-card__mark { flex: none; color: var(--blue-700); }
.ann-card__mark svg { display: block; width: 22px; height: 22px; }
.ann-card--care .ann-card__mark { color: var(--amber); }
.ann-card__text { flex: 1 1 auto; min-width: 0; }
.ann-card__flag { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--amber); }
.ann-card--important .ann-card__flag { color: var(--blue-700); }
.ann-card__title { display: block; font-size: 15px; font-weight: 700; color: var(--ink-900); overflow-wrap: anywhere; }
.ann-card__body { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--gray-600); white-space: pre-line; overflow-wrap: anywhere; }
.ann-card__close {
  flex: none; width: 44px; height: 44px; margin: -12px -12px -12px 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--gray-400); cursor: pointer;
}
.ann-card__close svg { display: block; margin: 0 auto; width: 16px; height: 16px; }
.ann-card__close:hover { color: var(--ink-900); background: var(--bg-page); }

/* The popup. One at a time, in front of the page, with the same wording
   inside it, so somebody who has read one recognises the other. */
.ann-pop {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(7, 26, 77, 0.45);
}
.ann-pop[hidden] { display: none; }
.ann-pop__box {
  width: 100%; max-width: 420px; padding: 20px;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.ann-pop__flag { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--amber); }
.ann-pop--important .ann-pop__flag { color: var(--blue-700); }
.ann-pop__title { margin: 0 0 6px; font-size: 18px; color: var(--ink-900); overflow-wrap: anywhere; }
.ann-pop__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-700); white-space: pre-line; overflow-wrap: anywhere; }
.ann-pop__foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.ann-pop__ok {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--radius-pill);
  background: var(--blue-600); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.ann-pop__ok:hover { background: var(--blue-700); }

/* ---------- The admin drawer: picking who an announcement is for ----------
   Used by admin-announcements.html, which loads this file. Every colour here
   is one of the console's own tokens, so the picker follows the light and
   dark shell rather than carrying a tint of its own. */
.ann-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ann-pick:empty { display: none; }
.ann-pages { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.ann-pages label { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; cursor: pointer; }
.ann-pages input { width: 18px; height: 18px; }
.ann-chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--white); font-size: 13px; color: var(--ink-900);
}
.ann-chip button {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: none; color: var(--gray-400); font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.ann-chip button:hover { color: var(--ink-900); }
.ann-found { margin: 8px 0 0; padding: 0; list-style: none; max-height: 220px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ann-found[hidden] { display: none; }
.ann-found li + li { border-top: 1px solid var(--border); }
.ann-found button {
  display: block; width: 100%; min-height: 44px; padding: 8px 12px;
  border: 0; background: none; font: inherit; font-size: 14px; text-align: left; color: var(--ink-900); cursor: pointer;
}
.ann-found button:hover { background: var(--bg-page); }
.ann-found small { display: block; font-size: 12px; color: var(--gray-600); }
.ann-preview { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-page); }
.ann-preview .ann-stack:not(:empty) { margin: 0; }

/* ---- "This order may take longer to deliver" (js/wip.js) ------------
   The owner's question to a data bundle buyer, with Continue and wait or
   Request refund. Used in the dashboard's orders and tracker, the data
   bundles tracker and the guest page (wip.html). Sky blue and white; every
   button and field is 44px and 16px, so nothing zooms on an iPhone. */
.wip-slot[hidden], .wip-ask [hidden] { display: none !important; }
.wip-slot { flex: 1 0 100%; min-width: 0; }
.wip-ask {
  margin: 12px 0 0; padding: 14px; min-width: 0;
  border: 1px solid var(--blue-100); border-radius: var(--radius-md);
  background: var(--blue-50); color: var(--ink-900);
  overflow-wrap: anywhere;
}
.wip-ask__q { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; }
.wip-ask__answer, .wip-ask__said, .wip-ask__hint { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.wip-ask__said { color: var(--blue-700); font-weight: 600; }
.wip-ask__hint { color: var(--gray-600); }
.wip-ask__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wip-ask__btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1 1 160px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--blue-600); border-radius: 12px;
  background: var(--white, #fff); color: var(--blue-700);
  font: inherit; font-size: 16px !important; font-weight: 700; cursor: pointer;
}
.wip-ask__btn:hover { background: #fff; border-color: var(--blue-700); }
.wip-ask__btn--main { background: var(--blue-600); color: #fff; }
.wip-ask__btn--main:hover { background: var(--blue-700); color: #fff; }
.wip-ask__btn:disabled { opacity: 0.55; cursor: default; }
.wip-ask__btn:focus-visible { outline: 3px solid rgba(1, 100, 206, 0.35); outline-offset: 2px; }
.wip-ask__refund { margin-top: 12px; }
.wip-ask__label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.wip-ask__field {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink-900);
  font: inherit; font-size: 16px; resize: vertical;
}
.wip-ask__field:focus { outline: none; border-color: var(--blue-600); box-shadow: 0 0 0 3px rgba(1, 100, 206, 0.18); }
.wip-ask__err { margin: 10px 0 0; font-size: 14px; color: var(--red-600); }
/* The guest page's order summary. */
.wip-order { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0 0 4px; font-size: 14px; }
.wip-order[hidden], .wip-card__note[hidden] { display: none; }
.wip-order > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.wip-order dt { color: var(--gray-600); }
.wip-order dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.wip-card__note { margin: 12px 0 0; font-size: 14px; color: var(--gray-600); }

/* Freeze the page behind any open overlay (menu, chat, notifications, a
   popup). position:fixed rather than overflow:hidden, because iOS Safari
   keeps touch-scrolling the body through overflow:hidden. site.js records
   the scroll position, pins the body, and restores the spot on close. */
body.scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ================= Latest News strip (home + news page) ================= */
.hs-news__all{
  display:inline-flex; align-items:center; gap:4px; margin-left:14px;
  font-size:14px; font-weight:600; color:var(--brand, #0164ce); text-decoration:none;
  white-space:nowrap;
}
.hs-news__all:hover{ text-decoration:underline; }
.hs-news__row{
  display:grid; grid-auto-flow:column; grid-auto-columns:300px; gap:18px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 14px;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.hs-news__row::-webkit-scrollbar{ height:8px; }
.hs-news__row::-webkit-scrollbar-thumb{ background:rgba(1,100,206,.25); border-radius:8px; }
.hs-news__card{
  scroll-snap-align:start; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--gray-200, #e6e9ef); border-radius:16px;
  overflow:hidden; text-decoration:none; color:inherit;
  box-shadow:0 6px 20px rgba(15,32,63,.06);
  transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
}
.hs-news__card:hover{ transform:translateY(-4px); box-shadow:0 14px 34px rgba(15,32,63,.14); }
.hs-news__cover{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:linear-gradient(135deg,#0059c4,#0375d7 55%,#3aa0ff);
}
.hs-news__img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.hs-news__card:hover .hs-news__img{ transform:scale(1.05); }
.hs-news__ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:18px; letter-spacing:.2px; text-align:center;
  padding:0 18px;
  background:radial-gradient(120% 120% at 15% 10%, rgba(255,255,255,.22), transparent 55%);
}
.hs-news__tag{
  position:absolute; top:10px; left:10px; z-index:2;
  background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; backdrop-filter:blur(4px);
}
.hs-news__body{ display:flex; flex-direction:column; gap:8px; padding:14px 15px 16px; }
.hs-news__time{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--gray-500, #7a8699);
}
.hs-news__title{
  font-weight:700; font-size:16px; line-height:1.3; color:var(--ink, #10182b);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hs-news__excerpt{
  font-size:13.5px; line-height:1.5; color:var(--gray-600, #55617a);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hs-news__views{
  display:inline-flex; align-items:center; gap:6px; margin-top:2px;
  font-size:12.5px; color:var(--gray-500, #7a8699);
}
@media (max-width:640px){
  .hs-news__row{ grid-auto-columns:82%; }
}

/* ---- News page (news.html) ---- */
.newspage{ max-width:1120px; margin:0 auto; padding:28px 16px 60px; }
.newspage__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px;
}
.newspage__grid .hs-news__card{ scroll-snap-align:none; }
.newsart{ max-width:760px; margin:0 auto; }
.newsart__back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;
  color:var(--brand,#0164ce); text-decoration:none; font-weight:600; font-size:14px;
}
.newsart__back:hover{ text-decoration:underline; }
.newsart__cover{
  width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:18px; display:block;
  margin-bottom:20px; box-shadow:0 10px 30px rgba(15,32,63,.12);
}
.newsart__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--gray-500,#7a8699); font-size:13.5px; margin-bottom:10px; }
.newsart__tag{ background:var(--brand,#0164ce); color:#fff; padding:4px 12px; border-radius:999px; font-size:12.5px; font-weight:600; }
.newsart h1{ font-size:30px; line-height:1.18; margin:0 0 16px; color:var(--ink,#10182b); }
.newsart__body{ font-size:16.5px; line-height:1.75; color:var(--gray-700,#3a4356); }
.newsart__body p{ margin:0 0 18px; }
@media (max-width:640px){ .newsart h1{ font-size:24px; } }

/* News video: play badge on cards, embed block in the article. */
.hs-news__cover{position:relative;}
.hs-news__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(15,23,42,.55);color:#fff;backdrop-filter:blur(2px);box-shadow:0 6px 18px rgba(0,0,0,.25);padding-left:3px;}
.hs-news__card:hover .hs-news__play{background:rgba(3,117,215,.92);}
.newsart__video{margin:14px 0 18px;border-radius:14px;overflow:hidden;background:#000;}
.newsart__video iframe,.newsart__video video{display:block;width:100%;aspect-ratio:16/9;border:0;}