/* ==========================================================================
   Eyanga design system — warm-craft marketplace aesthetic built around the
   brand gold (#e2da48). Fraunces carries headlines with real character;
   Work Sans handles body copy and UI density. Neutrals lean warm (a hair
   of yellow in every stop) rather than flat gray, so they sit comfortably
   next to the gold instead of fighting it.
   ========================================================================== */

:root {
  /* --- Brand gold --- */
  --brand-50: #fdfbf0;
  --brand-100: #faf5d4;
  --brand-200: #f2e9a3;
  --brand-300: #e9db72;
  --brand-400: #e2da48;
  --brand-500: #d6c928;
  --brand-600: #b3a61d;
  --brand-700: #8a8018;
  --brand-800: #5f5813;
  --brand-900: #3a350d;

  /* --- Warm neutrals (paper -> ink) --- */
  --paper: #fbf9f3;
  --neutral-0: #ffffff;
  --neutral-50: #f8f5ec;
  --neutral-100: #f0ebdd;
  --neutral-200: #e3dcc8;
  --neutral-300: #cdc3a9;
  --neutral-400: #a99d7d;
  --neutral-500: #857a5e;
  --neutral-600: #635a45;
  --neutral-700: #453f31;
  --neutral-800: #2b2721;
  --neutral-900: #1b1815;
  --ink: #17140f;

  /* --- Semantic --- */
  --red-50: #fdf1ee;
  --red-500: #c2410c;
  --green-50: #eef6ec;
  --green-500: #3f7d3a;
  --amber-50: #fbf1e2;
  --amber-600: #a5680c;
  /* Pre-order badge only — a small, deliberate second accent so "made to
     order" (amber, in progress) and "pre-order" (plum, reserve ahead)
     read as different states at a glance, not just different words. */
  --plum-50: #f3eefb;
  --plum-600: #6b3fa0;

  /* --- Type --- */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Scale --- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(43, 39, 33, 0.06), 0 1px 1px rgba(43, 39, 33, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(43, 39, 33, 0.16), 0 2px 6px rgba(43, 39, 33, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(27, 24, 21, 0.28);
  /* Soft brand-gold glow used on every hoverable card site-wide (product,
     vendor, category, CTA, spotlight, value-prop) instead of a neutral
     shadow — a fixed accent color, so it stays the same in both themes. */
  --shadow-glow: 0 10px 28px -10px rgba(214, 201, 40, 0.35), 0 2px 10px rgba(214, 201, 40, 0.16);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Softer deceleration than --ease, specifically for hover/press transforms
     (card lifts, button press) — the old curve+duration combo read as an
     abrupt snap rather than a smooth glide. */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);

  /* Adaptive heading/primary-text color — flips light/dark with the theme.
     --ink itself stays fixed (near-black in both themes): it's also used
     for permanently-dark chrome (auth/hero backgrounds, sidebar) and for
     text sitting on the gold brand color, neither of which should lighten
     in dark mode. */
  --text-strong: var(--ink);
}

/* ==========================================================================
   Dark mode — same warm palette, inverted. Reached via the OS preference
   (prefers-color-scheme) when no explicit choice has been saved, or forced
   either way by data-theme on <html> (set by the theme switcher in
   theme-init.php). data-theme carries higher selector specificity than the
   plain :root inside the media query, so an explicit choice always wins
   over the system preference in both directions.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* brand-600/700/800 are only ever used as *text* (never a background —
       see the pinned header/footer override below for the one place that
       does use them on a fixed-light surface), so they're safe to lighten
       wholesale here. Values borrowed from the existing brand-200/300/400
       steps, which were already proven readable as accent text on the
       fixed-dark ink surfaces (hero eyebrow, auth brand, toasts). */
    --brand-600: #e2da48;
    --brand-700: #e9db72;
    --brand-800: #f2e9a3;

    --paper: #1c1812;
    --neutral-0: #241f17;
    --neutral-50: #211c15;
    --neutral-100: #332c20;
    --neutral-200: #443a29;
    --neutral-300: #5a4d38;
    --neutral-400: #8a7c60;
    --neutral-500: #a89878;
    --neutral-600: #c2b291;
    --neutral-700: #d8c9ab;
    --neutral-800: #ece2c9;
    --neutral-900: #f8f3e6;
    --text-strong: #f8f3e6;

    --red-50: rgba(226, 106, 63, 0.14);
    --red-500: #f0855a;
    --green-50: rgba(63, 125, 58, 0.18);
    --green-500: #7fbb72;
    --amber-50: rgba(165, 104, 12, 0.18);
    --amber-600: #dba552;
    --plum-50: rgba(107, 63, 160, 0.22);
    --plum-600: #bb92e0;
  }
}
:root[data-theme="dark"] {
  --brand-600: #e2da48;
  --brand-700: #e9db72;
  --brand-800: #f2e9a3;

  --paper: #1c1812;
  --neutral-0: #241f17;
  --neutral-50: #211c15;
  --neutral-100: #332c20;
  --neutral-200: #443a29;
  --neutral-300: #5a4d38;
  --neutral-400: #8a7c60;
  --neutral-500: #a89878;
  --neutral-600: #c2b291;
  --neutral-700: #d8c9ab;
  --neutral-800: #ece2c9;
  --neutral-900: #f8f3e6;
  --text-strong: #f8f3e6;

  --red-50: rgba(226, 106, 63, 0.14);
  --red-500: #f0855a;
  --green-50: rgba(63, 125, 58, 0.18);
  --green-500: #7fbb72;
  --amber-50: rgba(165, 104, 12, 0.18);
  --amber-600: #dba552;
  --plum-50: rgba(107, 63, 160, 0.22);
  --plum-600: #bb92e0;
}
/* Explicit "light" choice must win even when the OS is in dark mode — same
   values as the default :root above, repeated here so the higher-specificity
   attribute selector can override the @media block. */
:root[data-theme="light"] {
  --brand-600: #b3a61d;
  --brand-700: #8a8018;
  --brand-800: #5f5813;

  --paper: #fbf9f3;
  --neutral-0: #ffffff;
  --neutral-50: #f8f5ec;
  --neutral-100: #f0ebdd;
  --neutral-200: #e3dcc8;
  --neutral-300: #cdc3a9;
  --neutral-400: #a99d7d;
  --neutral-500: #857a5e;
  --neutral-600: #635a45;
  --neutral-700: #453f31;
  --neutral-800: #2b2721;
  --neutral-900: #1b1815;
  --text-strong: var(--ink);

  --red-50: #fdf1ee;
  --red-500: #c2410c;
  --green-50: #eef6ec;
  --green-500: #3f7d3a;
  --amber-50: #fbf1e2;
  --amber-600: #a5680c;
  --plum-50: #f3eefb;
  --plum-600: #6b3fa0;
}

/* Theme transitions on the properties that actually change, not a blanket
   `transition: all`, so unrelated hover/focus animations elsewhere keep
   their own timing. */
body, .auth-card, .product-card, .dash-card, .metric-card, .cart-table, .cart-summary,
.filter-panel, .vendor-card, .field input, .field select, .field textarea {
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--neutral-800);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; }

/* Plain inline links inside body copy (dash-card text, product descriptions,
   review bodies) need their own affordance — everywhere else a link is
   already a button/nav-item/card and doesn't need this. */
p a, .dash-card > p a, .notif-item a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-color: var(--brand-300);
  text-underline-offset: 2px;
}
p a:hover, .dash-card > p a:hover, .notif-item a:hover { color: var(--brand-800); text-decoration-color: var(--brand-500); }

::selection { background: var(--brand-300); color: var(--ink); }

.text-muted { color: var(--neutral-500); font-size: 13px; }
.text-center { text-align: center; }

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth-body {
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(226, 218, 72, 0.16), transparent 60%),
    var(--ink);
  min-height: 100vh;
}

.auth-shell {
  max-width: 440px;
  margin: 0 auto;
  padding: 72px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.auth-brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--brand-400);
  text-align: center;
  letter-spacing: -0.01em;
}

/* The logo asset has its own opaque cream/textured backdrop baked in — not
   transparent — so it needs a light "chip" behind it on dark chrome (this
   auth shell and the dashboard sidebar are always dark, regardless of
   theme). Same fix as .store-logo on the storefront header. */
.brand-logo-chip {
  display: inline-flex; align-items: center;
  background: #fbf9f3; border-radius: var(--radius-sm);
}
.auth-brand .brand-logo-chip { padding: 6px 14px; }
.auth-brand .brand-logo-chip img { display: block; height: 34px; width: auto; }

.auth-card {
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-lg);
}

.auth-card h1 {
  font-size: 25px;
}

.auth-card p.subtitle {
  margin: -10px 0 0;
  color: var(--neutral-500);
  font-size: 14px;
  line-height: 1.5;
}

.error-code {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 600;
  color: var(--brand-400);
  line-height: 1;
}
.error-code + h1 { margin-top: -4px; }

/* .field only spaces its own label from its own input — nothing separated
   one field from the next, or the last field from the submit button, so
   every auth form (login, register, forgot/reset password, verify-otp)
   had its fields and button sitting flush against each other. */
.auth-card form { display: flex; flex-direction: column; gap: 16px; }

/* ==========================================================================
   Forms & buttons — shared by every page
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--neutral-700);
}

.field input,
.field select,
.field textarea {
  padding: 11px 14px;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--neutral-0);
  color: var(--text-strong);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(214, 201, 40, 0.18);
}

/* Size/colour variant checklists on the product form — compact pill-style
   checkboxes that wrap, rather than a long dropdown or a free-text field. */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 12px;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  background: var(--neutral-0);
}
.checkbox-grid label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
  cursor: pointer;
}
.checkbox-grid input[type="checkbox"] { accent-color: var(--brand-500); width: 15px; height: 15px; cursor: pointer; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.25s var(--ease-smooth), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn:active { transform: translateY(1px); transition-duration: 0.08s; }

.btn-primary {
  background: var(--brand-400);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 10px -4px rgba(214, 201, 40, 0.55);
}
.btn-primary:hover { background: var(--brand-500); box-shadow: 0 4px 14px -4px rgba(214, 201, 40, 0.7); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-secondary {
  background: var(--neutral-100);
  color: var(--neutral-800);
}
.btn-secondary:hover { background: var(--neutral-200); }
.btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; color: var(--neutral-500); }
.btn-secondary:disabled:hover { background: var(--neutral-100); }

.wishlist-toggle-btn.active { background: var(--red-50); color: var(--red-500); }

.btn-full { width: 100%; }
.btn-sm { padding: 7px 14px; font-size: 13px; }

.auth-links {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--neutral-500);
}
.auth-links a:hover { color: var(--brand-700); }

.alert {
  padding: 11px 15px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert-error { background: var(--red-50); color: var(--red-500); border-color: rgba(194, 65, 12, 0.15); }
.alert-success { background: var(--green-50); color: var(--green-500); border-color: rgba(63, 125, 58, 0.15); }
.alert-warning { background: var(--amber-50); color: var(--amber-600); border-color: rgba(165, 104, 12, 0.15); }

/* One-time "you just signed up" banner — brand gold rather than the plain
   status-alert green, since this is a celebratory moment, not a status
   confirmation. Fixed ink-on-gold like the rest of the brand's CTAs, so it
   doesn't need its own dark-mode variant. */
.welcome-banner {
  background: var(--brand-400);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.welcome-banner h2 { margin: 0; font-size: 20px; }
.welcome-banner p { margin: 0; font-size: 13.5px; opacity: 0.82; }

/* --- Toast (add-to-cart confirmation) --- */
.toast {
  position: fixed;
  top: 84px;
  right: 24px;
  z-index: 50;
  max-width: 320px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  animation: toast-in 0.25s var(--ease);
}
.toast-success { background: var(--ink); color: #fff; }
.toast-success a { color: var(--brand-300); font-weight: 600; white-space: nowrap; }
.toast-error { background: var(--red-500); color: #fff; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast-out { opacity: 0; transition: opacity 0.2s var(--ease); }
@media (max-width: 640px) {
  .toast { left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; }
}

/* --- Floating actions (WhatsApp, scroll-to-top) --- */
.float-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.float-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth), visibility 0.3s;
  border: none;
  cursor: pointer;
}
.float-btn:hover { transform: translateY(-2px); }
.float-btn-whatsapp { background: #25d366; color: #fff; }
.float-btn-top {
  background: var(--ink);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.float-btn-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .float-btn, .float-btn-top { transition: opacity 0.2s linear, visibility 0.2s; }
  .float-btn:hover { transform: none; }
}
@media (max-width: 640px) {
  .float-actions { right: 16px; bottom: 16px; }
  .float-btn { width: 44px; height: 44px; }
}

/* --- PWA install banner --- */
.pwa-install-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 50;
  max-width: 340px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toast-in 0.25s var(--ease);
}
.pwa-install-banner[hidden] { display: none; }
.pwa-install-banner p { margin: 0; font-size: 13px; line-height: 1.4; }
.pwa-install-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pwa-install-actions button { font-family: inherit; cursor: pointer; }
.pwa-install-btn {
  background: var(--brand-400);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.pwa-install-btn:hover { background: var(--brand-500); }
.pwa-install-dismiss {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 18px;
  line-height: 1;
  padding: 4px;
}
.pwa-install-dismiss:hover { color: #fff; }
@media (max-width: 640px) {
  .pwa-install-banner { left: 16px; right: 16px; max-width: none; }
}

.cookie-consent-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  animation: toast-in 0.25s var(--ease);
}
.cookie-consent-banner[hidden] { display: none; }
.cookie-consent-banner p { margin: 0; font-size: 13px; line-height: 1.5; flex: 1; min-width: 220px; }
.cookie-consent-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cookie-consent-actions button {
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.cookie-consent-accept { background: var(--brand-400); color: var(--ink); border: none; }
.cookie-consent-accept:hover { background: var(--brand-500); }
.cookie-consent-decline { background: none; color: #fff; border: 1px solid rgba(255, 255, 255, 0.35); }
.cookie-consent-decline:hover { border-color: rgba(255, 255, 255, 0.6); }
@media (max-width: 640px) {
  .cookie-consent-banner { left: 16px; right: 16px; max-width: none; }
}

.otp-code-input {
  letter-spacing: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-body);
}

/* ==========================================================================
   Storefront
   ========================================================================== */

.store-body { background: var(--paper); }

/* --- Announcement marquee --- */
.marquee {
  background: var(--brand-400);
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  padding: 9px 0;
}
.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: marquee-scroll 26s linear infinite;
}
.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* The real logo asset (see public/assets/img/logo.png) has its own opaque
   cream/textured backdrop baked in — not transparent — so instead of pinning
   the whole header/footer to a permanently-light band (which used to opt
   both out of dark mode entirely), only the logo itself sits on a small
   fixed-light "chip" (see .store-logo / .footer-logo-chip below). Everything
   else in the header and footer now follows the normal adaptive tokens. */
.store-header {
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--neutral-200);
}
.store-header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 28px;
  display: grid;
  /* Equal 1fr tracks either side of the auto-width logo — that's what
     actually centers it regardless of how wide the nav or the actions
     cluster happen to be, rather than just centering within leftover
     space. */
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "nav logo actions";
  align-items: center;
  gap: 16px 28px;
}
.store-logo {
  grid-area: logo; display: flex; align-items: center;
  background: #fbf9f3; padding: 8px 16px; border-radius: var(--radius-sm);
}
.store-logo img { display: block; height: 56px; width: auto; }
.store-nav { grid-area: nav; display: flex; justify-content: flex-start; gap: 26px; flex-wrap: wrap; }
.store-nav a { font-size: 13.5px; font-weight: 600; color: var(--neutral-600); transition: color 0.15s var(--ease); }
.store-nav a:hover { color: var(--brand-800); }
.store-header-actions { grid-area: actions; display: flex; gap: 12px; align-items: center; font-size: 13.5px; font-weight: 500; justify-self: end; }
.store-account-link, .store-cart-link {
  position: relative;
  color: var(--neutral-700);
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.store-account-link:hover, .store-cart-link:hover { background: var(--neutral-100); color: var(--text-strong); }

/* --- Preloader --- */
/* Fixed light colors, not theme tokens — same reasoning as the pinned
   header/footer: the logo file has its own opaque cream backdrop baked in,
   so this needs a light background to sit on regardless of the visitor's
   theme, rather than showing a mismatched box in dark mode. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf9f3;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
}
.preloader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.preloader-logo { height: 52px; width: auto; animation: preloader-pulse 1.6s ease-in-out infinite; }
.preloader-bar { width: 120px; height: 3px; border-radius: 999px; background: #e3dcc8; overflow: hidden; }
.preloader-bar-fill { height: 100%; width: 40%; background: #e2da48; border-radius: 999px; animation: preloader-slide 1.2s ease-in-out infinite; }
@keyframes preloader-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes preloader-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}
@media (prefers-reduced-motion: reduce) {
  .preloader-logo, .preloader-bar-fill { animation: none; }
}

/* --- Exit-intent modal --- */
.exit-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(23, 20, 15, 0.55);
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.exit-modal-overlay.open { display: flex; }
.exit-modal {
  position: relative;
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.exit-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--neutral-100);
  color: var(--neutral-600);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.exit-modal-close:hover { background: var(--neutral-200); }
.exit-modal-body h2 { font-size: 24px; margin: 8px 0 10px; }
.exit-modal-body p { margin: 0 0 20px; }
.exit-modal-form { display: flex; flex-direction: column; gap: 10px; }
.exit-modal-form input[type="email"],
.exit-modal-form input[type="text"],
.exit-modal-form select {
  padding: 12px 14px;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--neutral-0);
  color: var(--text-strong);
  width: 100%;
}
.exit-modal-form-row { display: flex; gap: 10px; }
.exit-modal-form-row select { flex: 1; min-width: 0; }

/* --- Header search --- */
.store-search { position: relative; }
.store-search-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 20;
  width: min(280px, calc(100vw - 32px));
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  gap: 8px;
}
.store-search-panel.open { display: flex; }
.store-search-panel input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  background: var(--neutral-0);
  color: var(--text-strong);
}
.store-search-panel button[type="submit"] {
  flex-shrink: 0;
  width: 38px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand-700);
  color: var(--neutral-0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-search-panel button[type="submit"]:hover { background: var(--brand-800); }

/* --- Mini-cart flyout --- */
.cart-widget { position: relative; }
.mini-cart {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 20;
  width: min(300px, calc(100vw - 32px));
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.mini-cart.open { display: block; }
.mini-cart-empty { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 8px 0; }
.mini-cart-lines { display: flex; flex-direction: column; gap: 12px; max-height: 280px; overflow-y: auto; }
.mini-cart-line { display: flex; align-items: center; gap: 10px; }
.mini-cart-line img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--neutral-100); }
.mini-cart-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-cart-line-name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-cart-more { margin: 0; }
.mini-cart-summary { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; color: var(--text-strong); margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--neutral-100); font-variant-numeric: tabular-nums; }
.badge {
  background: var(--brand-400);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 5px;
}

.currency-switcher select {
  appearance: none;
  background: var(--neutral-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23635a45' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-sm);
  padding: 7px 26px 7px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--neutral-700);
  cursor: pointer;
}
.currency-switcher select:focus { outline: none; border-color: var(--brand-500); }

/* Icon-based light/dark/system toggle. Base is light-on-dark, for the two
   places that sit on a permanently-dark surface — the dashboard sidebar and
   the auth splash (both use the fixed --ink background, not the
   theme-adaptive --paper). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
}
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.theme-toggle-btn svg { width: 15px; height: 15px; }
.theme-toggle-btn:hover { color: rgba(255, 255, 255, 0.85); }
.theme-toggle-btn.active { background: rgba(255, 255, 255, 0.16); color: #fff; }

.dash-sidebar-footer .theme-toggle { width: 100%; justify-content: space-between; }
.dash-sidebar-footer .theme-toggle-btn { flex: 1; }

/* Header background is adaptive (light in light mode, dark in dark mode —
   see .store-header above), so its toggle gets the light-chip treatment
   matching the currency switcher instead of the permanently-dark base;
   every value here is a token, so it follows the header into dark mode too. */
.store-header-actions .theme-toggle { background: var(--neutral-50); border-color: var(--neutral-200); }
.store-header-actions .theme-toggle-btn { color: var(--neutral-500); }
.store-header-actions .theme-toggle-btn:hover { color: var(--neutral-800); }
.store-header-actions .theme-toggle-btn.active { background: var(--neutral-0); color: var(--text-strong); box-shadow: var(--shadow-sm); }

/* Below 900px there isn't room for a centered logo flanked by nav and
   actions, so it drops back to logo-left/actions-right with nav wrapping
   onto its own line rather than disappearing — there's no hamburger/
   off-canvas menu in this build, so hiding it here would leave mobile
   visitors with no way to browse categories at all. */
@media (max-width: 900px) {
  .store-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo actions"
      "nav nav";
  }
  .store-nav { gap: 16px 20px; }
}

/* Below ~480px, "actions" (theme toggle + currency switcher + account/
   wishlist/cart icons) alone needs 300px+ — sharing a row with the logo at
   the 900px breakpoint's "logo actions" layout crushes the logo column down
   to near-zero. Give logo/actions/nav each their own full-width row instead,
   and let actions wrap+center since it's still the widest single cluster. */
@media (max-width: 480px) {
  .store-header-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "actions"
      "nav";
    gap: 12px;
  }
  .store-logo { justify-self: center; }
  .store-header-actions { justify-self: stretch; flex-wrap: wrap; justify-content: center; }
  .store-nav { justify-content: center; }
}

.store-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 28px 72px;
}

.store-footer {
  background: var(--neutral-50);
  color: var(--neutral-600);
  margin-top: 64px;
  border-top: 1px solid var(--neutral-200);
}
.store-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 28px 36px;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 760px) { .store-footer-inner { grid-template-columns: 1fr 1fr; } }

.footer-logo-chip { display: inline-block; background: #fbf9f3; padding: 8px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; }
.footer-logo-chip img { display: block; }
.store-footer-brand p { font-size: 13px; line-height: 1.6; max-width: 34ch; margin: 0 0 16px; }

.footer-newsletter { display: flex; max-width: 300px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); background: var(--neutral-0); overflow: hidden; }
.footer-newsletter input {
  flex: 1; min-width: 0; border: none; background: none; padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: var(--text-strong);
}
.footer-newsletter input:focus { outline: none; }
.footer-newsletter button {
  border: none; background: var(--brand-400); color: var(--ink); font-weight: 700; font-size: 15px;
  width: 42px; cursor: pointer; transition: background 0.15s var(--ease);
}
.footer-newsletter button:hover { background: var(--brand-500); }
.store-footer-brand .alert-success { max-width: 300px; padding: 9px 13px; font-size: 12.5px; }

.store-footer-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--neutral-500); margin: 0 0 14px; }
.store-footer-col { display: flex; flex-direction: column; gap: 10px; }
.store-footer-col a { font-size: 13.5px; color: var(--neutral-600); }
.store-footer-col a:hover { color: var(--brand-800); }

.store-footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 28px 28px;
  border-top: 1px solid var(--neutral-200);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--neutral-500);
}

/* Below ~480px, 2 columns leaves the brand block (logo/description/
   newsletter) sitting alone beside "Shop", disconnected from "Categories"/
   "Company" wrapped below it — reads as lopsided, not like one footer.
   Single centered column instead, matching the phone-width header rule.
   Placed after the base rules above (not alongside the 760px rule earlier
   in the file) so it actually wins the cascade at equal specificity. */
@media (max-width: 480px) {
  .store-footer-inner { grid-template-columns: 1fr; text-align: center; gap: 36px; }
  .store-footer-brand { display: flex; flex-direction: column; align-items: center; }
  .store-footer-brand p { max-width: 34ch; }
  .footer-newsletter, .store-footer-brand .alert-success { margin: 0 auto; }
  .store-footer-col { align-items: center; }
  .store-footer-bottom { justify-content: center; text-align: center; }
}

/* --- Hero (3-slide carousel, full height, per-slide background photo) --- */
.hero {
  position: relative;
  min-height: 100vh;
  margin-bottom: 64px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
/* Slides stack via opacity, not display:none, so the crossfade can
   transition, and pointer-events keeps the inactive slides' links
   unclickable without hiding them from layout. Each slide is its own
   full-bleed photo (inset:0, cover) with a scrim underneath the text —
   .hero itself only shows through as a fallback wash if a slide has no
   image (see the inline background-image, set per slide in home.php). */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(23, 20, 15, 0.88) 0%, rgba(23, 20, 15, 0.6) 42%, rgba(23, 20, 15, 0.22) 75%),
    linear-gradient(0deg, rgba(23, 20, 15, 0.5) 0%, transparent 30%);
}
/* Bottom inset is taller than the others on purpose: content is vertically
   centered in this box, so without extra room reserved down there a
   two-line headline could center low enough to collide with .hero-dots,
   which sits at a fixed distance from the very bottom of .hero regardless
   of how the slide's own content laid out. */
.hero-slide-content {
  position: absolute;
  inset: 0 40px 84px 40px;
  display: grid;
  align-content: center;
  gap: 20px;
  max-width: 640px;
}
.hero-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-300);
}
.hero-slide h1 {
  color: #fff;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.06;
  max-width: 16ch;
}
.hero-slide p {
  max-width: 46ch;
  color: rgba(255,255,255,0.78);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}
.hero-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.hero-dots { position: absolute; left: 40px; bottom: 22px; z-index: 2; display: flex; gap: 8px; }
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.2s var(--ease), width 0.2s var(--ease);
}
.hero-dot.active { background: var(--brand-400); width: 22px; }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
.section-heading h2 { font-size: 24px; }
.section-heading .see-all { font-size: 13px; font-weight: 600; color: var(--brand-700); }
.section-heading .see-all:hover { color: var(--brand-800); }

.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 30px; margin: 0 0 6px; }

/* --- Category tiles --- */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
}
.category-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--neutral-800);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.category-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.category-tile-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,20,15,0) 40%, rgba(23,20,15,0.82) 100%);
}
.category-tile-label {
  position: absolute; left: 18px; bottom: 16px; right: 18px;
  display: flex; flex-direction: column; gap: 2px;
  color: #fff;
}
.category-tile-label span:first-child { font-family: var(--font-display); font-size: 19px; font-weight: 600; }

/* --- CTA banners (homepage editorial promos) --- */
.cta-banners { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
@media (max-width: 800px) { .cta-banners { grid-template-columns: 1fr; } }

/* Featured stays desktop/tablet-only — New Arrivals right above it already
   covers the "fresh picks" role on a phone-length homepage, so this is
   deliberately dropped there rather than just shrunk, per request. */
@media (max-width: 800px) { .featured-section { display: none; } }
.cta-banner {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--neutral-800);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.cta-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.cta-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,15,0) 30%, rgba(23,20,15,0.86) 100%); }
.cta-banner-content { position: absolute; left: 24px; right: 24px; bottom: 22px; color: #fff; }
.cta-banner-label { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 600; margin-bottom: 6px; }
.cta-banner-content p { margin: 0 0 10px; font-size: 13.5px; color: rgba(255,255,255,0.78); max-width: 32ch; }
.cta-banner-link { font-size: 13px; font-weight: 600; color: var(--brand-300); }

/* --- Designer spotlight (homepage, exactly two vendors) --- */
.spotlight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 700px) { .spotlight-grid { grid-template-columns: 1fr; } }
.spotlight-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--neutral-800);
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
}
.spotlight-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.spotlight-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spotlight-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,15,0) 35%, rgba(23,20,15,0.88) 100%); }
.spotlight-content { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; flex-direction: column; gap: 6px; color: #fff; }
.spotlight-tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-300); }
.spotlight-name { font-family: var(--font-display); font-size: 27px; font-weight: 600; }
.spotlight-meta { font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 4px; }

/* --- Value props strip --- */
.value-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 28px 0;
  margin-bottom: 56px;
  border-top: 1px solid var(--neutral-150, var(--neutral-200));
  border-bottom: 1px solid var(--neutral-150, var(--neutral-200));
}
.value-prop {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px; margin: -12px;
  border-radius: var(--radius);
  transition: box-shadow 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}
.value-prop:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}
.value-prop-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-100);
  /* brand-100 stays a fixed pale gold in both themes, but brand-800 is
     lightened for dark mode elsewhere (as adaptive accent text on the page
     surface) — pin it back to its dark value here so the glyph doesn't wash
     out against this permanently-pale chip. */
  --brand-800: #5f5813;
  color: var(--brand-800);
  display: flex; align-items: center; justify-content: center;
}
.value-prop strong { display: block; font-size: 14.5px; color: var(--text-strong); margin-bottom: 2px; }
.value-prop p { margin: 0; font-size: 13px; line-height: 1.5; }

/* --- Product grid / card --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--neutral-0);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--neutral-100);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
  border-color: transparent;
}
.product-card-media { display: block; position: relative; }
.product-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--neutral-100);
}
/* Dark top-down scrim so New/fulfillment tags stay legible in white text
   regardless of how light the product photo underneath is — same pattern as
   the category tiles/CTA banners, just flipped (tags sit at the top here,
   not the bottom). */
.product-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(23, 20, 15, 0.7) 0%, rgba(23, 20, 15, 0) 45%);
}
.product-card-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.product-card-vendor { font-size: 11.5px; color: var(--neutral-500); }
.product-card-vendor a { color: inherit; font-weight: 600; }
.product-card-vendor a:hover { color: var(--brand-800); }
.product-card-name {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--text-strong); line-height: 1.35;
}
.product-card-name:hover { color: var(--brand-800); }
.product-card-price { font-size: 14.5px; font-weight: 700; color: var(--brand-800); font-variant-numeric: tabular-nums; }
.product-card-rating { font-size: 12px; color: var(--neutral-500); }

.product-card-add-form { display: block; }
.product-card-add {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}
.product-card-add:disabled { cursor: default; }
.product-card-new-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-card-wishlist-remove { position: absolute; top: 10px; left: 10px; z-index: 2; }
.product-card-wishlist-remove button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: none;
  background: rgba(23, 20, 15, 0.65);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.product-card-wishlist-remove button:hover { background: var(--red-500); }

/* --- Made to order / pre-order badges --- */
.fulfillment-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.fulfillment-badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.fulfillment-badge-made::before { background: #f0b429; }
.fulfillment-badge-preorder::before { background: #c9a0f5; }

.fulfillment-badge-inline {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.fulfillment-badge-inline.fulfillment-badge-made { background: var(--amber-50); color: var(--amber-600); border: 1px solid rgba(165, 104, 12, 0.18); }
.fulfillment-badge-inline.fulfillment-badge-preorder { background: var(--plum-50); color: var(--plum-600); border: 1px solid rgba(107, 63, 160, 0.18); }

.empty-state {
  text-align: center;
  padding: 72px 24px;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-radius: var(--radius);
  border: 1px dashed var(--neutral-300);
}

.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
@media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }

/* Checkout/review: main content wider than the shop's 220px filter rail —
   that width was made for a list of category links, not an address form
   or an itemized order card, and reusing it there squeezed both down to an
   unreadably narrow column. */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: start; }
@media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } }
.checkout-summary-heading { font-size: 15px; margin: 0 0 14px; }

.filter-panel { background: var(--neutral-0); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--neutral-100); }
.filter-group h3 { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--neutral-500); margin: 0 0 12px; font-weight: 700; }
.filter-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.filter-group a { display: block; padding: 6px 8px; margin: 0 -8px; border-radius: 6px; font-size: 14px; color: var(--neutral-700); transition: background 0.15s var(--ease); }
.filter-group a:hover { background: var(--neutral-50); }
.filter-group a.active { --brand-800: #5f5813; color: var(--brand-800); font-weight: 600; background: var(--brand-50); }

.shop-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 12px; flex-wrap: wrap; }
.shop-toolbar select { padding: 9px 12px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); font-family: inherit; background: var(--neutral-0); color: var(--text-strong); }

/* --- Product detail --- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
@media (max-width: 800px) { .product-detail { grid-template-columns: 1fr; } }
.product-detail img { width: 100%; border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; background: var(--neutral-100); box-shadow: var(--shadow-sm); }
.product-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.product-thumb { padding: 0; width: 64px; height: 64px; flex-shrink: 0; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); background: none; cursor: pointer; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.product-thumb.active { border-color: var(--brand-700); }
.product-detail h1 { font-size: 30px; margin: 0 0 8px; }
.product-detail-price { font-size: 23px; font-weight: 700; margin-bottom: 18px; color: var(--brand-800); font-variant-numeric: tabular-nums; }
.product-detail-desc { color: var(--neutral-600); line-height: 1.75; margin-bottom: 22px; }

.review { border-top: 1px solid var(--neutral-100); padding: 18px 0; }
.review-header { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.review-stars { color: var(--brand-600); letter-spacing: 1px; }

/* --- Cart / checkout --- */
.cart-table { width: 100%; border-collapse: collapse; background: var(--neutral-0); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--neutral-100); }
.cart-table th, .cart-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--neutral-100); font-size: 14px; }
.cart-table tr:last-child td { border-bottom: none; }
.cart-table img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.cart-summary { max-width: 340px; margin-left: auto; margin-top: 24px; background: var(--neutral-0); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--neutral-100); }
.cart-summary-row { display: flex; justify-content: space-between; font-size: 14px; font-variant-numeric: tabular-nums; }
.cart-summary-total { font-size: 19px; font-weight: 700; border-top: 1px solid var(--neutral-200); padding-top: 14px; font-family: var(--font-display); }

.qty-input { width: 60px; padding: 7px 8px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); font-family: inherit; background: var(--neutral-0); color: var(--text-strong); }

.vendor-card { background: var(--neutral-0); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--neutral-100); transition: box-shadow 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth); }
.vendor-card:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.vendor-card h3 { margin: 0; font-size: 17px; }

/* --- Carousel arrows (shared by any horizontal-scroll section) --- */
.carousel-nav { display: flex; gap: 8px; flex-shrink: 0; }
.carousel-arrow {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.carousel-arrow:hover { background: var(--neutral-100); color: var(--ink); }

/* --- Testimonials (homepage) --- */
.testimonial-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.testimonial-carousel::-webkit-scrollbar { display: none; }
.testimonial-carousel .testimonial-card {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 260px;
}
@media (max-width: 900px) { .testimonial-carousel .testimonial-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 640px) { .testimonial-carousel .testimonial-card { flex-basis: 85%; } }
.testimonial-card { background: var(--neutral-0); border: 1px solid var(--neutral-100); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.testimonial-quote { font-family: var(--font-display); font-size: 16px; line-height: 1.5; color: var(--text-strong); margin: 0; flex: 1; }
.testimonial-footer { display: flex; align-items: center; gap: 10px; }
.testimonial-footer img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--neutral-100); }
.testimonial-footer > div { display: flex; flex-direction: column; gap: 1px; }
.testimonial-name { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }

/* --- Become a seller CTA (homepage, closing band after reviews) --- */
.seller-cta {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  margin-bottom: 8px;
  background: var(--ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.seller-cta-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seller-cta-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 320px at 15% 100%, rgba(226, 218, 72, 0.22), transparent 65%),
    rgba(23, 20, 15, 0.72);
}
.seller-cta-content { position: relative; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.seller-cta-content h2 { color: #fff; font-size: clamp(26px, 4vw, 38px); text-wrap: balance; }
.seller-cta-content p { color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .seller-cta { padding: 48px 24px; } }

/* ==========================================================================
   Dashboards
   ========================================================================== */

.dash-body { background: var(--neutral-50); font-size: 14px; }
.dash-shell { display: flex; min-height: 100vh; }

.dash-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.dash-sidebar-brand {
  display: flex; align-items: center; gap: 10px; padding: 22px 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 15.5px;
}
.dash-sidebar-brand .brand-logo-chip { padding: 5px 10px; }
.dash-sidebar-brand .brand-logo-chip img { display: block; height: 26px; width: auto; }
.dash-nav { display: flex; flex-direction: column; padding: 8px 12px; gap: 16px; }
.dash-nav-group { display: flex; flex-direction: column; gap: 2px; }
.dash-nav-heading { margin: 0 12px 5px; color: rgba(255,255,255,0.38); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; }
.dash-nav a { padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.6); transition: background 0.15s var(--ease), color 0.15s var(--ease); }
.dash-nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dash-nav a.active { background: var(--brand-400); color: var(--ink); font-weight: 600; }

/* Was margin-top:auto (pinned to the bottom of the fixed 100vh sidebar) — with
   ~10 nav items now, that left a conspicuous gap between the nav list and the
   footer on any viewport taller than the content needs. Sitting right after
   the nav in normal flow means any leftover space falls to the very bottom
   of the sidebar instead, which reads as normal rather than as a layout gap. */
.dash-sidebar-footer { margin-top: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.dash-user { display: flex; align-items: center; gap: 10px; }
.dash-user .text-muted { color: var(--neutral-400); }
.dash-avatar {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--brand-400); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.dash-user-name { font-size: 13px; font-weight: 600; color: #fff; }

.dash-content-col { flex: 1; min-width: 0; }
.dash-menu-toggle { display: none; }
.dash-page-title { font-weight: 600; color: var(--neutral-700); font-size: 14px; }
.dash-topbar {
  background: var(--neutral-0);
  border-bottom: 1px solid var(--neutral-150, var(--neutral-100));
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dash-bell { font-size: 13.5px; font-weight: 500; color: var(--neutral-700); position: relative; }
.dash-main { max-width: 1240px; margin: 0 auto; padding: 32px; }

/* Two settings-style cards of roughly equal weight, side by side instead of
   stacked — e.g. the DHL/Printful cards on the Shipping page. auto-fit means
   it collapses to one column on its own once the viewport can't fit both at
   their minimum width, no separate breakpoint needed. */
.dash-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; margin-bottom: 24px; }

/* A compact form beside a wider list/table — e.g. the Team page's "add a
   member" form next to the existing-members table. Deliberately asymmetric
   (not auto-fit) since the two sides serve different purposes and shouldn't
   end up the same width. */
.dash-grid-form-list { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { .dash-grid-form-list { grid-template-columns: 1fr; } }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
.metric-card {
  background: var(--neutral-0); border-radius: var(--radius); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--neutral-100);
}
.metric-card .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--neutral-500); font-weight: 600; }
.metric-card .value { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }

.dash-card { background: var(--neutral-0); border-radius: var(--radius); padding: 22px; margin-bottom: 24px; border: 1px solid var(--neutral-100); }
.dash-card h2 { font-family: var(--font-body); font-size: 15px; font-weight: 700; margin: 0 0 16px; }

.dash-table { width: 100%; border-collapse: collapse; }
.dash-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--neutral-500); padding: 8px 12px; border-bottom: 1.5px solid var(--neutral-150, var(--neutral-100)); font-weight: 700; }
.dash-table td { padding: 13px 12px; border-bottom: 1px solid var(--neutral-100); font-size: 13.5px; vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table img { width: 40px; height: 40px; object-fit: cover; border-radius: 7px; }

.status-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; }
.status-approved, .status-paid, .status-shipped, .status-created, .status-confirmed, .status-delivered, .status-read, .status-replied { background: var(--green-50); color: var(--green-500); }
.status-pending, .status-processing, .status-new { background: var(--amber-50); color: var(--amber-600); }
.status-suspended, .status-failed, .status-cancelled, .status-unread, .status-refunded { background: var(--red-50); color: var(--red-500); }

.role-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; background: var(--neutral-100); color: var(--neutral-600); }
.role-pill-director { background: var(--plum-50); color: var(--plum-600); }
.role-pill-superadmin { background: var(--brand-100, var(--brand-50)); color: var(--brand-800); }

.inline-form { display: inline-block; }

.search-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.search-bar input { flex: 1; min-width: 200px; max-width: 340px; padding: 10px 14px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); font-family: inherit; background: var(--neutral-0); color: var(--text-strong); }
.search-bar select { padding: 10px 14px; border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; background: var(--neutral-0); color: var(--text-strong); }

.pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; gap: 12px; }
.pagination-summary { font-size: 13px; }
.pagination-controls { display: flex; align-items: center; gap: 12px; }
.pagination-current { font-size: 13px; color: var(--text-strong); font-weight: 600; }
.pagination-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--neutral-200); color: var(--text-strong); font-size: 16px;
  transition: background 0.15s var(--ease);
}
.pagination-btn:hover { background: var(--neutral-100); }
.pagination-btn.disabled { pointer-events: none; opacity: 0.35; }

.dash-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.dash-toolbar .search-bar { margin-bottom: 0; }

.bulk-toolbar {
  display: none; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; margin-bottom: 14px;
  background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600;
}
.bulk-toolbar.active { display: flex; }
.bulk-select-col { width: 34px; }

.notif-item { display: flex; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--neutral-100); align-items: flex-start; }
.notif-item:last-child { border-bottom: none; }
.notif-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand-400); margin-top: 6px; flex-shrink: 0; }
.notif-dot.read { background: var(--neutral-200); }

/* --- Dashboard: narrow viewports use an off-canvas navigation drawer --- */
@media (max-width: 860px) {
  .dash-shell { flex-direction: row; }
  .dash-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1001; width: min(310px, 86vw); height: 100vh; height: 100dvh; padding-bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-105%); transition: transform 0.24s var(--ease); box-shadow: var(--shadow-lg); }
  .dash-shell.nav-open .dash-sidebar { transform: translateX(0); }
  .dash-sidebar-brand { padding: 18px 20px 14px; }
  .dash-nav { flex-direction: column; padding: 8px 12px; gap: 14px; }
  .dash-nav a { white-space: normal; }
  .dash-sidebar-footer { flex-direction: column; align-items: stretch; border-top: 1px solid rgba(255,255,255,0.08); padding: 16px; margin: 20px 0 0; }
  .dash-sidebar-footer form { display: block; }
  .dash-sidebar-footer .theme-toggle { width: 100%; }
  .dash-user .text-muted { display: block; }
  .dash-sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1000; width: 100%; height: 100%; border: 0; background: rgba(19, 17, 14, 0.58); }
  body.dash-nav-open { overflow: hidden; }
  .dash-topbar { position: sticky; top: 0; z-index: 50; padding: 12px 16px; gap: 12px; }
  .dash-menu-toggle { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--neutral-200); border-radius: 10px; background: var(--neutral-0); color: var(--neutral-700); cursor: pointer; }
  .dash-menu-toggle:hover { background: var(--neutral-50); }
  .dash-page-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dash-bell { flex-shrink: 0; }
  .dash-main { padding: 20px 16px; }
  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

@media (max-width: 640px) {
  /* Buttons wrap to two rows at this width, so the reserved bottom clearance
     from the desktop rule isn't enough — give it more room here rather than
     just scaling the same numbers down. .hero itself needs no override —
     100vh is already responsive. */
  .hero-slide-content { inset: 0 24px 100px 24px; max-width: none; }
  .hero-dots { left: 24px; bottom: 16px; }
  .shop-toolbar, .search-bar { flex-wrap: wrap; }
  .dash-table, .cart-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --- Guided tour (see partials/tour.php) --- */
.tour-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(23, 20, 15, 0.55);
}
.tour-bubble {
  position: fixed; z-index: 201;
  background: var(--neutral-0);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  max-width: 300px;
  box-shadow: var(--shadow-lg);
}
.tour-close {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 999px; border: none;
  background: var(--neutral-100); color: var(--neutral-600);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.tour-close:hover { background: var(--neutral-200); }
.tour-step-count { font-size: 11.5px; font-weight: 600; color: var(--brand-700); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.tour-title { font-size: 16px; margin: 0 0 6px; padding-right: 20px; }
.tour-body { font-size: 13.5px; color: var(--neutral-600); margin: 0 0 16px; line-height: 1.5; }
.tour-actions { display: flex; justify-content: space-between; gap: 10px; }
/* Lifts the highlighted element above the dim overlay and rings it, without
   touching layout (outline doesn't reflow, unlike a border would). */
.tour-highlight {
  position: relative; z-index: 201;
  outline: 3px solid var(--brand-400); outline-offset: 3px; border-radius: var(--radius-sm);
}

/* --- Order tracking timeline (storefront/order-detail.php) --- */
.order-timeline { display: flex; align-items: flex-start; margin: 8px 0 28px; }
.order-timeline-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.order-timeline-step:not(:last-child)::after {
  content: ''; position: absolute; top: 9px; left: 50%; width: 100%; height: 2px;
  background: var(--neutral-200); z-index: 0;
}
.order-timeline-step.is-complete:not(:last-child)::after { background: var(--green-500); }
.order-timeline-dot {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--neutral-0); border: 2px solid var(--neutral-200);
  z-index: 1; margin-bottom: 8px;
}
.order-timeline-step.is-complete .order-timeline-dot { background: var(--green-500); border-color: var(--green-500); }
.order-timeline-step.is-current .order-timeline-dot { background: var(--brand-400); border-color: var(--brand-400); }
.order-timeline-label { font-size: 12.5px; font-weight: 600; color: var(--neutral-500); }
.order-timeline-step.is-complete .order-timeline-label,
.order-timeline-step.is-current .order-timeline-label { color: var(--text-strong); }

/* Product-page option pickers: one row of buttons per option (size, pack,
   colour...) instead of a dropdown, so every choice is visible at a glance.
   The radio itself is visually hidden but stays focusable/keyboard-operable;
   the label is the button. */
.variant-group { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.variant-group legend { font-size: 13px; font-weight: 600; color: var(--text-strong); padding: 0; margin-bottom: 8px; }
.variant-group legend .variant-chosen { font-weight: 500; color: var(--text-muted, var(--neutral-500)); }
.variant-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-btn { position: relative; cursor: pointer; }
.variant-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.variant-btn-body {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 52px; padding: 10px 16px; text-align: center;
  border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm);
  background: var(--neutral-0); color: var(--text-strong);
  font-size: 14px; font-weight: 600; line-height: 1.25;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.variant-btn:hover .variant-btn-body { border-color: var(--brand-400); }
.variant-btn input:checked + .variant-btn-body {
  border-color: var(--brand-400); background: var(--brand-400); color: var(--ink);
  box-shadow: 0 0 0 3px rgba(226, 218, 72, 0.28);
}
.variant-btn input:focus-visible + .variant-btn-body { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.variant-btn-sub { font-size: 12px; font-weight: 500; opacity: 0.85; }
.variant-btn-ship { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; opacity: 0.9; }
/* No in-stock combination with the other choices made so far — still
   clickable (so a shopper can move around), just visibly off the menu. */
.variant-btn.is-unavailable .variant-btn-body { opacity: 0.45; text-decoration: line-through; }
.variant-btn.is-unavailable input:checked + .variant-btn-body { opacity: 0.7; }

.free-shipping-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  background: rgba(34, 139, 34, 0.14); color: #2d8a3e;
}
@media (prefers-color-scheme: dark) { .free-shipping-badge { color: #6fcf7f; } }
.free-shipping-badge[hidden] { display: none; }
:root[data-theme="dark"] .free-shipping-badge { color: #6fcf7f; }
:root[data-theme="light"] .free-shipping-badge { color: #2d8a3e; }

/* Product form: the "how do shoppers choose?" switch and variation thumbnails. */
.mode-choice {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1.5px solid var(--neutral-200); border-radius: var(--radius-sm); background: var(--neutral-0);
}
.mode-choice:has(input:checked) { border-color: var(--brand-400); }
.mode-choice input { margin-top: 3px; accent-color: var(--brand-500); flex-shrink: 0; }
.mode-choice .text-muted { font-size: 12.5px; }
.vt-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.vt-thumb[hidden] { display: none; }


/* ---- Everything Must Go sale ---- */
.price-was { font-size: 0.82em; font-weight: 500; color: var(--neutral-500, #8a8478); text-decoration: line-through; margin-left: 4px; }
.sale-pill {
  display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 7px;
  border-radius: 999px; background: var(--red-50); color: var(--red-500);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
}
.sale-pill a { color: inherit; text-decoration: underline; }
.store-nav a.store-nav-sale { color: var(--red-500); font-weight: 700; }
.sale-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-500); }
.sale-hero { text-align: center; max-width: 820px; margin: 36px auto 40px; padding: 0 20px; }
.sale-hero h1 { margin: 8px 0 0; }
.sale-hero-percent { font-size: clamp(40px, 9vw, 72px); font-weight: 800; line-height: 1.05; margin: 6px 0 14px; color: var(--red-500); }
.sale-countdown { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.sale-countdown > div { min-width: 74px; padding: 12px 8px; border: 1px solid var(--neutral-100); border-radius: 12px; background: var(--red-50); }
.sale-countdown strong { display: block; font-size: 28px; font-variant-numeric: tabular-nums; color: var(--red-500); }
.sale-countdown span { font-size: 12px; color: var(--neutral-600); }
.sale-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.sale-home { border: 1px solid var(--neutral-100); border-radius: 16px; padding: 24px; background: var(--red-50); }
.sale-home-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.sale-home-head h2 { margin: 4px 0 0; font-size: 26px; }