/* ═══ AgriMALL Design System — v3 Harvest Editorial ═════════
   Warm paper, forest green, harvest gold; Fraunces display (bundled, offline) + Source Sans body.
   Loaded LAST in header.php and dashboard-layout.php so these overrides beat
   styles.min.css / motion.min.css. */

/* ── Tokens ─────────────────────────────────────────── */
:root {
  /* Agrimall palette: deep forest on pure white, sage accent. */
  --canvas: #ffffff;
  --canvas-deep: #f8f9fa;
  --paper: #f8f9fa;
  --primary: #1b4332;
  --primary-dark: #0d2818;
  --primary-tint: rgba(27, 67, 50, 0.08);
  --accent: #2d6a4f;
  --gold: #2d6a4f;
  --gold-deep: #1b4332;
  --gold-ink: #ffffff;
  --gold-tint: rgba(45, 106, 79, 0.14);
  --gold-text: #1b4332;
  --gold-bright: #2d6a4f;
  --text: #212529;
  --text-soft: #6c757d;
  --borders: #dee2e6;
  --field-border: #6c757d;
  --danger: #dc3545;
  --danger-fill: #dc3545;
  --success: #2d6a4f;
  --focus-ring: #1b4332;

  /* Status families — one palette for status chips and dashboard tiles, so a
     status keeps its colour page to page and theme to theme. */
  --status-ok-ink: #1C6B3A;
  --status-ok-fill: rgba(31, 75, 50, 0.12);
  --status-info-ink: #1F5E97;
  --status-info-fill: rgba(31, 94, 151, 0.12);
  --status-warn-ink: #8A5A12;
  --status-warn-fill: rgba(217, 154, 43, 0.16);
  --status-bad-ink: #A3372B;
  --status-bad-fill: rgba(176, 60, 50, 0.12);
  --status-neutral-ink: var(--text-soft);
  --status-neutral-fill: var(--canvas-deep);
  --status-neutral-border: var(--borders);

  /* Soft alert fills + the --ok alias, used by forgot.php, create_listing.php
     and account_delete.php. Built from --danger/--success so dark theme follows. */
  --ok: var(--success);
  --ok-soft: color-mix(in srgb, var(--success) 14%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);

  /* Auth pane background: slightly darker than --paper so the card reads elevated. */
  --bg-primary: #FDFBF7;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans Pro', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --shadow-card: 0 1px 2px rgba(66, 48, 28, 0.07), 0 10px 28px -8px rgba(66, 48, 28, 0.16);
  --shadow-card-hover: 0 2px 4px rgba(66, 48, 28, 0.08), 0 18px 44px -10px rgba(66, 48, 28, 0.26);
  --shadow-btn: 0 1px 2px rgba(43, 33, 24, 0.12), 0 6px 16px -5px rgba(43, 33, 24, 0.28);
  --radius-card: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --hover-speed: 160ms;

  --dur-base: 160ms;
  --dur-moderate: 260ms;
  --dur-stagger: 70ms;
  --ease-decel: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-enter: cubic-bezier(0.34, 1.56, 0.64, 1);

  --footer-bg: #1b4332;
  --footer-text: #F1E8D3;
  --breakpoint-sm: 640px;  --breakpoint-md: 768px;  --breakpoint-lg: 1024px;  --breakpoint-xl: 1280px;
}

/* ── Dark mode tokens ────────────────────────────────── */
:root[data-theme="dark"] {
  /* Agrimall dark palette: deep charcoal with sage accent. */
  --canvas: #121212;
  --canvas-deep: #1e1e1e;
  --paper: #1e1e1e;
  --primary: #52b788;
  --primary-dark: #40916c;
  --primary-tint: rgba(82, 183, 136, 0.14);
  --accent: #40916c;
  --gold: #52b788;
  --gold-deep: #40916c;
  --gold-ink: #121212;
  --gold-tint: rgba(82, 183, 136, 0.16);
  --gold-text: var(--gold);
  --gold-bright: var(--gold);
  --text: #f1f3f5;
  --text-soft: #adb5bd;
  --borders: rgba(255, 255, 255, 0.10);
  --field-border: var(--borders);
  --danger: #ff6b6b;
  --danger-fill: #dc3545;
  --success: #52b788;
  --focus-ring: #52b788;

  /* Light inks on dark surfaces; same names as the light theme. */
  --status-ok-ink: #9BD5AE;
  --status-ok-fill: rgba(140, 195, 160, 0.14);
  --status-info-ink: #9CC6E8;
  --status-info-fill: rgba(120, 170, 215, 0.14);
  --status-warn-ink: #E8C27E;
  --status-warn-fill: rgba(217, 154, 43, 0.16);
  --status-bad-ink: #E8A09A;
  --status-bad-fill: rgba(200, 90, 75, 0.16);
  --status-neutral-ink: #D6D6D6;
  --status-neutral-fill: rgba(255, 255, 255, 0.06);
  --status-neutral-border: rgba(255, 255, 255, 0.18);

  /* Matches the dark canvas so the split-screen form edge is seamless. */
  --bg-primary: #121212;

  /* Dark-mode ink + surface tokens: --accent === --gold, and --danger/--success
     are light in dark mode, so text on them needs the dark ink (--gold-ink). */
  --accent-ink: var(--gold-ink);
  --success-ink: var(--gold-ink);
  --danger-ink: var(--gold-ink);
  --accent-hover: var(--gold-deep);
  --sidebar-active-bg: var(--gold-tint);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -8px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 44px -10px rgba(0, 0, 0, 0.6);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -5px rgba(0, 0, 0, 0.5);
  --footer-bg: #0a0a0a;
  --footer-text: #f1f3f5;
}

/* ── Base ───────────────────────────────────────────── */
body {
  background-color: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--gold-tint);
  color: var(--text);
}

h1, h2, h3, h4, h5, h6,
.display-heading, .section-title, .block-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
  text-wrap: balance;
}

/* ── Warm containers — rounded, layered, lifted ──────── */
.card, .panel, .dash-panel, .stat-card,
.hero-card, .step-card, .feature-card {
  background: var(--paper) !important;
  /* Bootstrap hardcodes .card { color: var(--bs-body-color) }, which does not
     follow the theme, so card titles stayed #212529 on a #1E1E1E panel. */
  color: var(--text) !important;
  border: 1px solid var(--borders) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  overflow: hidden;
  transition: transform var(--hover-speed) ease, box-shadow var(--hover-speed) ease, border-color var(--hover-speed) ease;
}

/* Settings fieldsets read as panels, so they take the card radius. */
.settings-form fieldset {
  border-radius: var(--radius-card);
}
.card:hover, .panel:hover, .dash-panel:hover,
.feature-card:hover, .hero-card:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--borders));
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .panel:hover, .dash-panel:hover,
  .feature-card:hover, .hero-card:hover {
    transform: none;
  }
}

/* ── Nav / overlay surfaces — warm translucent glass ─── */
.nav {
  background: color-mix(in srgb, var(--paper) 88%, transparent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 0 var(--borders) !important;
}
.nav.is-scrolled {
  box-shadow: 0 1px 0 0 var(--borders), 0 8px 20px -8px rgba(66, 48, 28, 0.14) !important;
}
.mobile-menu, .mobile-cta-bar, .back-to-top {
  background: var(--paper) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.mobile-cta-bar {
  border-top: 1px solid var(--borders);
}
.back-to-top {
  border: 1px solid var(--borders);
  box-shadow: var(--shadow-card) !important;
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  background: var(--gold) !important;
  border-color: transparent !important;
  color: var(--gold-ink) !important;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-short) ease, visibility var(--dur-short) ease, transform var(--dur-short) ease;
  pointer-events: none;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  background: var(--gold-deep) !important;
  transform: translateY(-1px);
}

/* ── Cart & Saved ─────────────────────────────────────── */
.card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.card-actions .add-to-basket {
  flex: 1;
  margin: 0;
}
.save-btn {
  min-width: 40px;
}
.grid .card-actions {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 0.75rem;
}
.grid .card {
  display: flex;
  flex-direction: column;
}
.grid .card .body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.grid .card .body .price {
  margin-bottom: 0.75rem;
}
.grid .card .body .card-actions {
  margin-top: auto;
}
.grid .card-actions .d-flex {
  flex-wrap: nowrap;
  width: 100%;
  gap: 10px !important;
}
.grid .card-actions form {
  margin-bottom: 0;
}
.grid .card-actions .buy-now {
  flex: 1 1 auto;
  min-width: 0;
}
.grid .card-actions .buy-now,
.grid .card-actions form.buy-now .btn {
  width: 100%;
  white-space: nowrap;
}
.grid .card-actions form[data-ajax="true"],
.grid .card-actions form[data-save-ajax="true"] {
  flex: 0 0 auto;
}
.grid .card-actions .btn {
  height: 44px;
  font-size: 0.875rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.grid .card-actions .btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
}
.listing-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 1rem;
  line-height: 1.25;
}
.listing-name a {
  color: var(--ink, inherit);
  text-decoration: none;
}
.listing-name a:hover {
  color: var(--primary);
  text-decoration: none;
}
.farmer-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.8rem;
}
.farmer-meta:hover {
  color: var(--primary);
}
.farmer-meta i {
  font-size: 15px;
  line-height: 1;
  flex: 0 0 auto;
}
.farmer-meta .farmer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dash-empty {
  text-align: center;
  padding: 3rem 1rem;
  margin: 0 auto;
  max-width: 36rem;
}
.dash-empty i {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

/* ── Buttons — soft pill buttons, gold primary ───────── */
.btn, .btn-primary, .btn-primary-nav, .btn-sell, .btn-logout,
.btn-outline, .btn-outline-primary, .btn-outline-secondary {
  border-radius: var(--radius-pill) !important;
}
.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.btn-primary, .btn-primary-nav {
  background: var(--gold) !important;
  border-color: transparent !important;
  color: var(--gold-ink) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-btn) !important;
  transition: background-color var(--hover-speed) ease, transform var(--hover-speed) ease, box-shadow var(--hover-speed) ease;
}
.btn-primary:hover, .btn-primary-nav:hover {
  background: var(--gold-deep) !important;
  border-color: transparent !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(43, 33, 24, 0.14), 0 10px 22px -6px rgba(43, 33, 24, 0.3) !important;
}
.btn-outline {
  border: 1px solid var(--primary) !important;
  color: var(--primary) !important;
  background: var(--paper) !important;
  font-weight: 600 !important;
}
.btn-outline:hover {
  background: var(--primary) !important;
  color: var(--paper) !important;
  border-color: var(--primary) !important;
  transform: translateY(-1px);
}
.btn-outline-primary {
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
  background: var(--paper) !important;
  font-weight: 600 !important;
}
.btn-outline-primary:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--paper) !important;
}
.btn-outline-secondary {
  border: 1px solid var(--borders) !important;
  background: var(--paper) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.btn-outline-secondary:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--canvas) !important;
}
.btn:active {
  transform: translateY(0) scale(0.99);
}

/* Canonical button geometry — one border weight and one size scale everywhere */
.btn, .btn-primary, .btn-primary-nav, .btn-sell, .btn-logout,
.btn-outline, .btn-outline-primary, .btn-outline-secondary {
  border-width: 1.5px !important;
  font-size: 1rem !important;
}
.btn-sm { font-size: 0.875rem !important; }
.btn-lg { font-size: 1.0625rem !important; }
.btn-lg { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible, .filter-pill:focus-visible,
.add-to-basket:focus-visible, .theme-toggle:focus-visible,
.hamburger:focus-visible, .sidebar-toggle:focus-visible {
  outline: 2px solid var(--focus-ring) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ── Stat values ─────────────────────────────────────── */
.stat-value {
  text-shadow: none !important;
}
.stat-trend {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold-text);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.stat-trend.up { color: var(--primary); }
.stat-trend.down { color: var(--danger); }
.stat-sparkline {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: 2rem;
  margin-top: 0.5rem;
  color: var(--gold-text);
}

/* ── Operational priority queue ────────────────────── */
.priority-queue-item {
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  box-shadow: var(--shadow-card);
}

/* ── Order tables — monospace truncated IDs ────────── */
.order-id-tag {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--borders);
  border-radius: 6px;
  white-space: nowrap;
}

/* ── Horizontal carousel (Buyer discover) ──────────── */
.horizontal-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 1.25rem 1rem;
}
.horizontal-carousel > * {
  scroll-snap-align: start;
  flex: 0 0 220px;
}
.farm-card {
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}
.farm-card .card-title { font-family: var(--font-display); }
.badge-location {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: var(--radius-pill) !important;
  background: var(--gold-tint) !important;
  color: var(--gold-text) !important;
  font-weight: 600 !important;
}
.badge-location {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ── Stock toggle (farmer inventory) — soft switch ──── */
.stock-toggle {
  appearance: none;
  width: 2.6rem;
  height: 1.5rem;
  background: #CFC4AC;
  border-radius: var(--radius-pill);
  position: relative;
  cursor: pointer;
  transition: background var(--hover-speed) ease;
  border: 1px solid var(--borders);
}
:root[data-theme="dark"] .stock-toggle {
  background: #3A3A3A;
}
.stock-toggle::after {
  content: '';
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 1.06rem;
  height: 1.06rem;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(43, 33, 24, 0.3);
  transition: transform var(--hover-speed) ease;
}
.stock-toggle:checked {
  background: var(--primary);
}
.stock-toggle:checked::after {
  transform: translateX(1.14rem);
}

/* ── Slide-over Drawer ──────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 20, 14, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 999;
}
.drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background: var(--paper);
  border-left: 1px solid var(--borders);
  border-top-left-radius: var(--radius-card);
  border-bottom-left-radius: var(--radius-card);
  box-shadow: -16px 0 40px -16px rgba(43, 33, 24, 0.35);
  transform: translateX(100%);
  transition: transform 200ms ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.drawer.open {
  transform: translateX(0);
}
.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--borders);
}
.drawer-header .btn-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  padding: 0;
  cursor: pointer;
}
.drawer-header .btn-close:hover {
  color: var(--gold-text);
}
.drawer-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  font-family: var(--font-display);
}
.drawer-body {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
}
.drawer-section {
  margin-bottom: 1.5rem;
}
.drawer-section:last-child {
  margin-bottom: 0;
}
.drawer-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--gold-text);
  border-bottom: 1px solid var(--borders);
  padding-bottom: 0.25rem;
}
.drawer-section-content {
  display: grid;
  gap: 0.5rem;
}
.drawer-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}
.drawer-row-label {
  font-weight: 500;
  color: var(--text-soft);
}
.drawer-row-value {
  font-weight: 600;
  color: var(--text);
}
.drawer-divider {
  height: 1px;
  background: var(--borders);
  margin: 1.5rem 0;
}

/* ── Empty States ──────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
}
/* Size modifiers. md matches the hardcoded browse.php padding, so switching to
   these classes changes no rendered spacing. */
.empty-state--sm {
  padding: 1.5rem 1rem;
}
.empty-state--md {
  padding: 3rem 1.5rem;
}
.empty-state--lg {
  padding: 4.5rem 2rem;
}
.empty-state .empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--gold-text);
  stroke-width: 1;
  margin-bottom: 1.5rem;
  display: inline-block;
}
.empty-state .empty-state-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
  font-family: var(--font-display);
}
.empty-state .empty-state-description {
  font-size: 1rem;
  color: var(--text-soft);
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}
.empty-state .empty-state-action {
  display: inline-block;
}

/* ═══ Section layout (marketing pages) ═════════════─── */
.section {
  padding: 4rem 0;
}
.section-head {
  max-width: 42rem;
  margin-bottom: 2.5rem;
}
.section-head .kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.5rem;
}
.section-head h1,
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-bottom: 0.5rem;
}
.section-head p,
.section-lead {
  color: var(--text-soft);
  font-size: 1.05rem;
  margin-bottom: 0;
}
.section-lead {
  max-width: 42rem;
}
.legal-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-soft);
  padding: 1rem 0 0;
  border-bottom: 1px solid var(--borders);
  margin-bottom: 0;
}
.legal-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
}
.legal-breadcrumb .sep {
  margin: 0 0.5rem;
  color: var(--borders);
}

/* ── Eyebrow / kicker label — harvest stamp ─────────── */
.eyebrow-pill {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1rem;
}
.eyebrow-pill::before {
  content: none;
}

/* ── Hero — printed-photo editorial ─────────────────── */
.hero-section {
  overflow: hidden;
  isolation: isolate;
  padding: 4.5rem 0 3.5rem;
  border-bottom: 1px solid var(--borders);
  background:
    radial-gradient(38rem 22rem at 82% -6rem, var(--gold-tint), transparent 70%),
    radial-gradient(30rem 22rem at 0% 110%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 65%),
    var(--canvas);
}
.hero-title {
  font-size: clamp(2.7rem, 5.8vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.015em;
  font-weight: 620;
  margin-bottom: 1.1rem;
}
.hero-title .nowrap {
  font-style: italic;
  font-weight: 560;
  color: var(--primary);
}
.hero-lead {
  font-size: 1.18rem;
  color: color-mix(in srgb, var(--text) 78%, var(--text-soft));
  max-width: 37rem;
  margin-bottom: 1.9rem;
}
.editorial-serif {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.nowrap { white-space: nowrap; }

.hero-stats {
  margin-top: 2.2rem;
  padding-top: 1.75rem;
  border-top: 1px dashed color-mix(in srgb, var(--gold) 50%, var(--borders));
}
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.stat { min-width: 0; }
.stat .num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 620;
  line-height: 1.05;
  color: var(--primary);
  margin-bottom: 0.2rem;
}
.stat-32px .num { font-size: 2.2rem; }
.stat .lbl {
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.3;
}

.hero-image-wrapper {
  position: relative;
  border: 1px solid var(--borders);
  background: var(--canvas);
  overflow: hidden;
  border-radius: 18px;
  transform: rotate(-1deg);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.05);
}
.hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  mix-blend-mode: multiply;
  border-radius: 18px;
}
:root[data-theme="dark"] .hero-image { mix-blend-mode: normal; }
:root[data-theme="dark"] .hero-image-wrapper { background: color-mix(in srgb, var(--primary) 14%, var(--canvas)); }
.hero-image-wrapper.image-failed .hero-image { opacity: 0; }
.hero-image-wrapper.image-failed { min-height: 260px; }
.hero-overlay {
  position: absolute;
  left: 1.15rem;
  bottom: 1.15rem;
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.price-pill,
.origin-badge {
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
}
.price-pill {
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  padding: 0 0.9rem;
  border-radius: 8px !important;
  box-shadow: 0 10px 20px -8px rgba(217, 147, 30, 0.45);
}
.origin-badge {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  background: var(--primary);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.8rem;
  box-shadow: 0 8px 16px -8px rgba(31, 75, 50, 0.5);
}
:root[data-theme="dark"] .origin-badge {
  background: var(--primary);
  color: #FFFFFF;
}
.hero-section .btn {
  height: 3.4rem;
  padding: 0 1.9rem;
  font-size: 1rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.hero-section .btn-primary {
  box-shadow: 0 10px 24px rgba(217, 147, 30, 0.3) !important;
}
.hero-section .btn-outline-primary {
  color: var(--primary) !important;
  background: transparent !important;
}

/* ── Trust bar — harvest market ribbon ──────────────── */
.trust-bar {
  background: var(--primary);
  border-bottom: 3px solid var(--gold);
  padding: 1.15rem 0;
}
.trust-bar-item {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--footer-text);
  letter-spacing: 0.02em;
}
.trust-bar-dot {
  width: 0.65rem;
  height: 0.65rem;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
  flex: 0 0 auto;
}

/* ── How it works — field ledger ────────────────────── */
.how-it-works { background: var(--paper); }
.how-it-works .section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}
.process-strip-container {
  margin-top: 2.5rem;
}
.process-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  border-top: 1px solid var(--borders);
}
.process-step {
  padding-top: 1.4rem;
}
.process-step-number {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 3.2rem;
  font-weight: 520;
  line-height: 1;
  color: var(--gold-text);
  margin-bottom: 0.75rem;
}
.process-step-number::after {
  content: '';
  display: block;
  width: 2.4rem;
  height: 2px;
  background: var(--gold);
  margin-top: 0.9rem;
}
.process-step-title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
.process-step-description {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ── Story section — farmer's field note ────────────── */
.story-section {
  background: var(--canvas);
  border-block: 1px solid var(--borders);
}
.story-content {
  max-width: 48rem;
  margin: 0 auto;
}
.story-body {
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 2.25rem;
}
.story-quote {
  border-left: 0;
  padding: 0.3rem 0 0 3.25rem;
  margin: 0 0 2.25rem;
  max-width: 42rem;
  position: relative;
}
.story-quote::before {
  content: '“';
  position: absolute;
  left: 0;
  top: -1.4rem;
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--gold) 65%, transparent);
}
.story-quote p {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.story-quote footer {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.story-stats {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary);
}

/* --- FAQ accordion --- */
.faq-section { background: var(--paper); }
.faq-section .accordion {
  max-width: 48rem;
  margin: 0 auto;
}
.faq-section .accordion-item {
  border: 0 !important;
  border-top: 1px solid var(--borders) !important;
  background: transparent;
}
.faq-section .accordion-item:last-child {
  border-bottom: 1px solid var(--borders) !important;
}
.faq-section .accordion-button {
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 550;
  padding: 1.2rem 0.25rem;
}
.faq-section .accordion-button:not(.collapsed) {
  color: var(--gold-text);
  background: transparent;
}
.faq-section .accordion-button::after {
  background-image: none;
  content: '+';
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-text);
  border: 1px solid var(--borders);
  border-radius: 50%;
  font-weight: 400;
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease;
}
.faq-section .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
  color: var(--gold-ink);
  background: var(--gold);
  border-color: var(--gold);
}
.faq-section .accordion-body {
  color: var(--text-soft);
  padding: 0 2.5rem 1.4rem 0.25rem;
}

/* ── CTA section — deep forest field ────────────────── */
.cta-section {
  border-top: 1px solid var(--borders);
  background: var(--canvas-deep);
  padding: 4.5rem 0;
}
.cta-section .section-title {
  color: var(--text);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}
.cta-section .section-lead {
  color: var(--text-soft);
}
.cta-section .eyebrow-pill {
  color: var(--gold-text);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.rail {
  padding: 1.75rem 0 0;
}
.rail-body {
  max-width: 46rem;
  margin: 0 auto;
}
.rail-items {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.rail-items--center { justify-content: center; flex-wrap: wrap; }
.cta-section .btn-outline-primary {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
}
.cta-section .btn-outline-primary:hover {
  background: var(--primary) !important;
  color: var(--canvas) !important;
  border-color: var(--primary) !important;
}

/* ── Search + filter (marketplace) ─────────────────── */
.search-form {
  max-width: 30rem;
  margin-bottom: 1.75rem;
}
.search-form input {
  width: 100%;
  border: 1px solid var(--borders);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--text);
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow-card);
}
.search-form input::placeholder { color: var(--text-soft); }
.search-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}

/* ── Hero search (landing page) ─────────────── */
.hero-search {
  max-width: 34rem;
}
.hero-search__bar {
  display: flex;
  align-items: center;
  border: 1px solid var(--borders);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(66, 48, 28, 0.07), 0 14px 32px -12px rgba(66, 48, 28, 0.22);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-decel), box-shadow var(--dur-base) var(--ease-decel);
}
.hero-search__bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent);
}
.hero-search__icon {
  color: var(--text-soft);
  font-size: 1rem;
  padding-left: 1.25rem;
  flex-shrink: 0;
}
.hero-search__bar input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 0.85rem 0.75rem;
  font-size: 1rem;
  outline: none;
}
.hero-search__submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  margin: 0.4rem;
  cursor: pointer;
  transition: background-color var(--hover-speed) ease;
}
.hero-search__submit:hover,
.hero-search__submit:focus-visible {
  background: var(--gold-deep);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.hero-search__popular {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: 0.85rem;
}
.hero-search__hint {
  color: var(--text-soft);
  font-size: 0.9rem;
  font-weight: 600;
}
.hero-search__popular a {
  color: var(--text-soft);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--text-soft) 45%, transparent);
  transition: color var(--hover-speed) ease;
}
.hero-search__popular a:hover {
  color: var(--gold-text);
}
@media (max-width: 575px) {
  .hero-search__submit .hero-search__submit-label { display: none; }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.filter-pill {
  border: 1px solid var(--borders);
  background: var(--paper);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-pill) !important;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
  transition: background var(--hover-speed) ease, color var(--hover-speed) ease, border-color var(--hover-speed) ease;
}
.filter-pill:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}
.filter-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--paper);
}
:root[data-theme="dark"] .filter-pill.is-active { color: #FFFFFF; }

/* ── Marketplace grid + cards — printed catalog ─────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.card {
  position: relative;
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-decel), transform var(--hover-speed) ease, box-shadow var(--hover-speed) ease;
}
.card:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--borders));
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.card .thumb {
  /* 1:1 matches the 800×800 source photos → zero crop for most listings */
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: var(--canvas-deep);
  border-bottom: 1px solid var(--borders);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}
.card:hover .thumb img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .card:hover .thumb img { transform: none; }
}
.card .thumb .badges-top {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  margin-bottom: 0;
}
.card .thumb .badges-top .badge {
  background: rgba(27, 59, 43, 0.55) !important;
  color: #fff !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cat-icon-fallback {
  font-size: 2.25rem;
  color: var(--text-soft);
  line-height: 1;
}
.card .body {
  padding: 1rem;
}
.badges-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.badges-top .badge {
  white-space: nowrap;
}
.badge {
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
}
.badge-fresh {
  background: var(--gold-tint) !important;
  color: var(--gold-text) !important;
}
.badge-normal {
  background: var(--canvas) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--borders) !important;
}
.badge-stale {
  background: var(--primary) !important;
  color: var(--paper) !important;
}
:root[data-theme="dark"] .badge-stale { color: var(--text); }
.card .body .row { margin: 0 0 0.4rem; align-items: flex-start; }
.card .body .row h3 {
  font-size: 1.1rem;
  margin-bottom: 0;
}
/* .row inside a card body is a single-column wrapper. Its .col keeps Bootstrap's
   12px gutter, which pushed the title, farmer line and price 12px past the card
   padding, so they did not line up with the thumb badge or the buttons below. */
.card .body .row > .col { padding-left: 0; padding-right: 0; }
/* Farmer cards add a status chip and a two-row action grid, so the margins sized
   for buyer cards read as an uneven 6.4 / 8 / 6.4 / 6.4px rhythm. One gap for the
   stack instead; the chip and the button grid keep their own spacing. */
.card-farmer .body { gap: 0.5rem; }
.card-farmer .body > * { margin-bottom: 0 !important; }
.card-farmer .body .price { margin-bottom: 0 !important; }
.card .price {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 1.15rem;
  font-weight: 620;
  color: var(--gold-text);
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.card .price small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-soft);
  white-space: nowrap;
  vertical-align: baseline;
  line-height: 1;
}
.add-to-basket {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background var(--hover-speed) ease, color var(--hover-speed) ease, transform var(--hover-speed) ease, box-shadow var(--hover-speed) ease;
  box-shadow: var(--shadow-btn);
}
.add-to-basket:hover {
  background: var(--gold-deep);
  color: var(--gold-ink);
  transform: translateY(-1px);
}
.add-to-basket:active {
  transform: scale(0.96);
  transition: transform 0.05s ease-out;
}

/* Card stagger entrance */
.js .card[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-moderate) var(--ease-enter),
              transform var(--dur-moderate) var(--ease-enter);
}
.js .card[data-reveal].reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for grid children */
.grid > .card[data-reveal=stagger]:nth-child(1)  { transition-delay: 0ms; }
.grid > .card[data-reveal=stagger]:nth-child(2)  { transition-delay: var(--dur-stagger); }
.grid > .card[data-reveal=stagger]:nth-child(3)  { transition-delay: calc(var(--dur-stagger) * 2); }
.grid > .card[data-reveal=stagger]:nth-child(4)  { transition-delay: calc(var(--dur-stagger) * 3); }
.grid > .card[data-reveal=stagger]:nth-child(5)  { transition-delay: calc(var(--dur-stagger) * 4); }
.grid > .card[data-reveal=stagger]:nth-child(6)  { transition-delay: calc(var(--dur-stagger) * 5); }
.grid > .card[data-reveal=stagger]:nth-child(7)  { transition-delay: calc(var(--dur-stagger) * 6); }
.grid > .card[data-reveal=stagger]:nth-child(8)  { transition-delay: calc(var(--dur-stagger) * 7); }
.grid > .card[data-reveal=stagger]:nth-child(9)  { transition-delay: calc(var(--dur-stagger) * 8); }
.grid > .card[data-reveal=stagger]:nth-child(10) { transition-delay: calc(var(--dur-stagger) * 9); }
.grid > .card[data-reveal=stagger]:nth-child(11) { transition-delay: calc(var(--dur-stagger) * 10); }
.grid > .card[data-reveal=stagger]:nth-child(12) { transition-delay: calc(var(--dur-stagger) * 11); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .card,
  .card .thumb img,
  .add-to-basket,
  .card[data-reveal] {
    transition: none !important;
    transform: none !important;
  }
  .card[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Featured bulk-deal hero card */
.feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.feature-card .thumb {
  aspect-ratio: auto;
  min-height: 14rem;
  border-bottom: 0;
  border-right: 1px solid var(--borders);
}
.feature-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feature-card .body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: center;
}
.feature-card .body .row {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.feature-card .body h3 {
  font-size: 1.6rem;
  margin-bottom: 0;
}
.feature-card .body p {
  color: var(--text-soft);
  margin-bottom: 0.5rem;
  max-width: 32rem;
}
.feature-card .price {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 620;
  color: var(--gold-text);
}
.feature-card .price small {
  white-space: nowrap;
  vertical-align: baseline;
  line-height: 1;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-soft);
  font-weight: 400;
}
.feature-card .add-to-basket { align-self: flex-start; }

/* Swipe decorative flags — inert, no motion here */
.swipe-reveal {
  display: none !important;
}

/* ── Footer — deep forest sign-off ──────────────────── */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 3.5rem 0 2rem;
  margin-top: 2rem;
  border-top: 3px solid var(--gold);
}
.footer .inside {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 2rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.footer .brand .brand-logo {
  height: 2.4rem;
  width: auto;
  margin-bottom: 0.9rem;
  filter: none;
}
.footer .brand-tagline {
  color: color-mix(in srgb, var(--footer-text) 78%, transparent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  max-width: 18rem;
}
.footer .cols > div {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.footer .cols h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.75rem;
}
.footer .cols a {
  color: color-mix(in srgb, var(--footer-text) 80%, transparent);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.5;
}
.footer .cols a:hover {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer .copyright {
  grid-column: 1 / -1;
  text-align: center;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--footer-text) 18%, transparent);
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--footer-text) 65%, transparent);
}

/* ── Mobile CTA bar ────────────────────────────────── */
.mobile-cta-bar {
  display: none;
}
@media (max-width: 767px) {
  .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
    z-index: 900;
    border-top: 1px solid var(--borders);
    box-shadow: 0 -8px 24px -12px rgba(43, 33, 24, 0.25);
  }
  .mobile-cta-bar .btn {
    flex: 1;
    padding: 0.7rem 0.5rem;
  }
}

/* ═══ Dashboard chrome ═══════════════════════════════ */
.dash-section-header {
  margin-bottom: 1.5rem;
}
.dash-section-header h1 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  margin-bottom: 0.3rem;
}
.dash-section-header p {
  color: var(--text-soft);
  margin-bottom: 1rem;
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--primary, #1f4d38);
  outline-offset: 2px;
}

/* Stat cards */
.stat-card {
  cursor: pointer;
  margin-bottom: 1rem;
  margin-bottom: 1rem;
  align-items: stretch;
}
.stat-content {
  padding: 1.2rem 1.35rem;
  min-width: 0;
}
.stat-value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 620;
  line-height: 1.1;
  color: var(--primary);
}
.stat-label {
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-bottom: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-trend {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-trend.text-success { color: var(--primary) !important; }
.stat-sparkline {
  display: block;
  margin-top: 0.4rem;
  color: var(--gold-text);
}
.stat-sparkline svg { display: block; }

/* Panels */
.dash-panel {
  margin-bottom: 2rem;
}

.dash-panel-body {
  padding: 1.25rem;
}
.dash-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--borders);
}
.dash-panel-header h1,
.dash-panel-header h2 {
  font-size: 1.2rem;
  margin: 0;
  font-family: var(--font-display);
}
.dash-panel-count {
  font-size: 0.85rem;
  color: var(--text-soft);
  font-weight: 500;
}

/* Tables */
.dash-table {
  width: 100%;
  font-size: 0.9rem;
  margin-bottom: 0;
}
.dash-table th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--canvas-deep);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--borders);
  white-space: nowrap;
}
.dash-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--borders);
  vertical-align: middle;
  color: var(--text);
}
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover { background: var(--gold-tint); }
.dash-table .order-id-tag {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--primary);
  background: var(--primary-tint);
  border: 1px solid var(--borders);
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
  border-radius: 6px;
}
.dash-table .cell-link a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.dash-table .cell-link a:hover { text-decoration: underline; }
.dash-table .cell-muted { color: var(--text-soft); }
.dash-table .form-check { margin-bottom: 0; }

/* Pills stay pill-shaped in the app chrome */
.rounded-pill { border-radius: var(--radius-pill) !important; }

/* Bootstrap form plumbing — soft fields */
.form-control,
.form-select,
.input-group-text,
.form-check-input {
  border-radius: var(--radius-sm) !important;
  border-color: var(--field-border) !important;
  background-color: var(--paper) !important;
  color: var(--text) !important;
}
.form-control::placeholder {
  color: var(--text-soft) !important;
  opacity: 1;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent) !important;
}
/* Checkboxes and radios otherwise keep Bootstrap's default blue. */
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.dropdown-menu {
  border-radius: var(--radius-sm) !important;
  border-color: var(--borders) !important;
  box-shadow: var(--shadow-card) !important;
  background: var(--paper);
}
.modal-content {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card-hover) !important;
  border-color: var(--borders);
}

/* Farm cards (favorite farms) */
.farm-card .card-title { font-family: var(--font-display); }
.farm-avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.farm-avatar.bg-primary { background: var(--primary) !important; }
.farm-avatar.bg-success { background: var(--primary) !important; }
.farm-card .card-title { font-size: 1.05rem; }
.farm-card .badge.bg-success {
  background: var(--primary) !important;
  color: var(--paper) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 0.75em !important;
  font-weight: 600 !important;
  padding: 0.25em 0.55em;
}
:root[data-theme="dark"] .farm-card .badge.bg-success { color: var(--text); }

/* Horizontal carousel */
.horizontal-carousel .carousel-item {
  /* Bootstrap's .carousel-item is display:none unless .active, which hid every
     card in this scroller. Scoped to .horizontal-carousel so the real Bootstrap
     carousel in listing.php keeps its behaviour. */
  display: block;
  scroll-snap-align: start;
  flex: 0 0 20rem;
  max-width: 85%;
}
.carousel-controls {
  padding: 0 1.25rem 1rem;
  display: flex;
  gap: 0.4rem;
}

/* Order timeline (order.php) */
.order-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.timeline-item { position: relative; padding-left: 1.4rem; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0.35rem;
  width: 0.65rem; height: 0.65rem;
  border: 2px solid var(--borders);
  border-radius: 50%;
  background: var(--paper);
}
.timeline-item.completed::before { background: var(--primary); border-color: var(--primary); }
.timeline-item.current::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-tint); }

/* Priority queue (admin) */
.priority-queue-item { margin-bottom: 0; }
.priority-queue-item.border-bottom {
  border-bottom: 1px solid var(--borders) !important;
}
.priority-queue-item h5 { font-size: 0.98rem; margin-bottom: 0.15rem; font-family: var(--font-display); }
.priority-queue-item p { color: var(--text-soft); }

/* Legacy Bootstrap neutralization — softened, not squared.
   Bootstrap-only components; .card/.btn/.badge/.modal-content keep their own radii. */
.alert, .accordion-item, .accordion-button,
.list-group-item, .input-group-text {
  border-radius: var(--radius-sm) !important;
}
.alert { border-radius: var(--radius-sm) !important; }
.btn { box-shadow: var(--shadow-btn) !important; }
.card.border-0 { border: 1px solid var(--borders) !important; }
.card.shadow-sm, .card.shadow { box-shadow: var(--shadow-card) !important; }
.text-muted {
  color: var(--text-soft) !important;
}
.border { border-color: var(--borders) !important; }

/* Action forms (order.php sidebar) */
.action-form .form-label { font-size: 0.85rem; }

/* Detail rows (order.php) */
.detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--borders);
  font-size: 0.95rem;
}
.detail-row:last-child { border-bottom: 0; }
.detail-label {
  color: var(--text-soft);
  flex: 0 0 auto;
}
.detail-value {
  text-align: right;
  color: var(--text);
}

/* Unavailable listing state (listing.php) */
.dash-empty {
  text-align: center;
  padding: 3rem 1rem;
  margin: 0 auto;
  max-width: 36rem;
}
.dash-empty i {
  font-size: 2.5rem;
  color: var(--gold-text);
  display: block;
  margin-bottom: 1rem;
}
.dash-empty p {
  color: var(--text-soft);
  margin-bottom: 1.75rem;
}

/* ═══ Header / nav — market stall awning ══════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 1020;
}
.nav-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
  height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: 0.5rem;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: 0.25rem; justify-self: start; }
.brand-link { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.brand-mark { width: 1.85rem; height: 1.85rem; display: block; }
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--primary);
  text-decoration: none;
}
:root[data-theme="dark"] .brand-wordmark { color: var(--text); }
:root[data-theme="dark"] .brand-mark { content: url("../branding/mark-reverse.svg"); }
.brand-logo { height: 2.3rem; width: auto; }


.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 0.9rem;
  font-weight: 550;
  padding: 0.4rem 0.6rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  border-radius: 0.5rem;
  transition: background 0.15s, color 0.15s;
}
.nav-links a:hover {
  color: var(--gold-text);
  border-bottom-color: var(--gold);
  background: var(--canvas);
}

.hamburger {
  display: none;
  margin-left: auto;
  width: 2.4rem;
  height: 2.4rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: 50%;
}
.hamburger-line {
  width: 1.05rem;
  height: 2.5px;
  background: var(--text);
  transition: transform var(--dur-short) var(--ease-standard), opacity var(--dur-short) var(--ease-standard);
}
.hamburger:hover { border-color: var(--gold); }
/* Bars morph to X while the drawer is open (is-open toggled by motion.js);
   offset = 0.3rem gap + 2.5px bar, collapsing the outer bars onto the middle. */
.hamburger.is-open .hamburger-line:nth-child(1) { transform: translateY(calc(0.3rem + 2.5px)) rotate(45deg); }
.hamburger.is-open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger-line:nth-child(3) { transform: translateY(calc(-0.3rem - 2.5px)) rotate(-45deg); }
/* Tactile press on the round icon buttons (mirrors .btn:active). */
.hamburger, .sidebar-toggle, .theme-toggle, .cart-pill, .notif-pill {
  transition: transform var(--dur-micro) var(--ease-standard);
}
.hamburger:active, .sidebar-toggle:active, .theme-toggle:active, .cart-pill:active, .notif-pill:active {
  transform: scale(0.9);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1.5rem;
  border-left: 0;
}

/* Larger circular theme toggle */
.nav-utils .theme-toggle,
.sidebar-topbar .theme-toggle {
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: 50% !important;
}
.nav-cta > :last-child { margin-left: 0; }

.theme-toggle {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text);
}
.theme-toggle:hover { color: var(--gold-text); }

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: padding 0.2s ease, color var(--hover-speed) ease, border-color var(--hover-speed) ease;
}
.icon-moon { display: inline; }
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: inline; }
/* Theme toggle: both icons stacked in the button, crossfading/rotating on switch. */
.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
  display: block !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: opacity var(--dur-short) var(--ease-standard), transform var(--dur-short) var(--ease-standard);
}
.theme-toggle .icon-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
.theme-toggle .icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.4); }
:root[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }

.locale-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.25rem;
}
.locale-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-decoration: none;
}
.locale-label.active {
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.locale-sep {
  color: var(--text-soft);
  font-size: 0.7rem;
}
.nav-utils {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 0.25rem;
}
.nav-utils .nav-text-link { display: none; }
.nav-text-link {
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.nav-text-link:hover { color: var(--gold-text); border-bottom-color: var(--gold); }
.locale-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1rem;
}
.locale-btn:hover { color: var(--gold-text); }
.locale-btn.dropdown-toggle::after { display: none; }
.locale-caret { font-size: 0.7rem; color: var(--text-soft); }
.locale-tick { color: var(--gold-text); margin-left: 0.4rem; font-weight: 700; }
.nav-cta .dropdown-toggle:not(.profile-btn) { border: 0; background: transparent; padding: 0.25rem 0.2rem; cursor: pointer; }
.nav-cta .dropdown-toggle:not(.profile-btn):hover { background: transparent; color: var(--gold-text); }
.nav-cta .profile-btn.dropdown-toggle { background: var(--paper); border: 1px solid var(--borders); padding: 0.3rem 0.75rem 0.3rem 0.35rem; }
.nav-cta .profile-btn.dropdown-toggle:hover { background: var(--canvas); border-color: var(--gold); }
.nav-cta .dropdown-toggle .avatar { transition: transform var(--hover-speed) ease; }
.nav-sell-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  gap: 0.375rem !important;
  vertical-align: middle !important;
}
.btn-primary-nav { border-radius: var(--radius-pill) !important; }
.btn-logout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  padding: 0.45rem 0.9rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  gap: 0.375rem !important;
  vertical-align: middle !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--primary);
  background: var(--paper);
  color: var(--primary);
}
.btn-logout:hover {
  background: var(--primary);
  color: var(--paper);
}

.cart-pill,
.notif-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.1rem;
  text-decoration: none;
  white-space: nowrap;
}
.cart-pill:hover,
.notif-pill:hover { color: var(--gold-text); }
.cart-count,
.notif-count {
  background: var(--gold);
  color: var(--gold-ink);
  min-width: 1.3rem;
  height: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 50%;
}

/* ── Mobile menu (drawer interior) ── */
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  /* Top padding clears the sticky header (z 1020 > drawer 1001). */
  padding: 5rem 1.25rem 2rem;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mobile-nav-link {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--borders);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 550;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-short) var(--ease-enter), transform var(--dur-short) var(--ease-enter), color var(--hover-speed) ease;
}
.mobile-nav-link:hover { color: var(--gold-text); }
/* Links ease in one after another as the drawer opens. */
.mobile-menu.is-open .mobile-nav-link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-nav-link:nth-child(1) { transition-delay: 40ms; }
.mobile-menu.is-open .mobile-nav-link:nth-child(2) { transition-delay: 80ms; }
.mobile-menu.is-open .mobile-nav-link:nth-child(3) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-nav-link:nth-child(4) { transition-delay: 160ms; }
.mobile-menu.is-open .mobile-nav-link:nth-child(5) { transition-delay: 200ms; }
.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.mobile-menu-locale {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borders);
}
.mobile-menu-locale .locale-label { text-decoration: none; }

/* ═══ Auth pages — 50/50 split screen ═══════════════════════
   grid-row must be pinned with grid-column, or auto-placement makes a 2x2 grid. */
.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  height: 100vh;
  /* 100vw is safe: the document never scrolls (the form scrolls inside
     .auth-right), so no scrollbar inflates 100vw past the visible width. */
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
/* Banner left, form right; column order flips under [dir="rtl"]. */
.auth-right {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  /* flex-start + auto margin, not center: centering an overflowing item clips its top. */
  align-items: flex-start;
  justify-content: center;
  height: 100vh;
  overflow-y: auto;
  padding: 24px;
  background-color: var(--bg-primary);
}

/* Banner: hero photo with a bottom-weighted tint so the overlaid text stays legible. */
.auth-left {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  background-color: #0A190F;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(10, 25, 15, 0.85) 100%),
    url("../images/products/auth-banner.jpg");
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  color: #fff;
}
.auth-left-content { max-width: 30rem; }
.auth-left-content h2 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 620;
  color: #fff;
  margin-bottom: 0.75rem;
}
.auth-left-content p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}
.auth-card {
  width: 100%;
  max-width: 27rem;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.5rem 2rem;
}
.auth-card {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
}
.auth-card .form-control,
.auth-card .form-select {
  border: 1px solid var(--field-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--paper) !important;
  color: var(--text) !important;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-tint) !important;
}
.auth-logo img { height: 2.2rem; width: auto; margin-bottom: 1.6rem; }
.auth-title {
  font-size: 1.9rem;
  margin-bottom: 0.4rem;
}
.auth-subtitle {
  color: var(--text-soft);
  margin-bottom: 1.6rem;
  font-size: 0.95rem;
}
.auth-card .form-control,
.auth-card .form-select,
.auth-card .input-group-text {
  min-height: 2.9rem;
  /* Eases the gold focus border + ring instead of snapping, which reads as a flash. */
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.auth-footer {
  margin-top: 1.25rem;
  font-size: 0.9rem;
}
.auth-footer a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.auth-footer a:hover { color: var(--gold-text); }
.auth-card a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-card a:hover { color: var(--gold-text); }

.auth-card .form-group { margin-bottom: 1.25rem; }
.auth-card .form-label { margin-bottom: 0.4rem; font-weight: 600; }
.auth-card .form-control, .auth-card .form-select { min-height: 2.9rem; }

/* Role selection cards */
.role-selection { display: flex; gap: 0.75rem; }
.role-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border: 2px solid var(--borders);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color var(--hover-speed) ease, box-shadow var(--hover-speed) ease;
  background: var(--paper);
}
.role-option:hover { border-color: var(--gold); }
.role-option input { position: absolute; opacity: 0; pointer-events: none; }
.role-option:has(input:checked) {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint);
}
.role-icon { font-size: 1.5rem; color: var(--gold-text); }
.role-text { font-weight: 600; font-size: 0.9rem; }

/* Farmer fields grid */
.farm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.farm-grid .span-2 { grid-column: span 2; }
.farm-grid > div { margin-bottom: 0; }
.farm-grid .form-group { margin-bottom: 0; }
.farm-note { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--gold-tint); border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--gold-text); line-height: 1.5; }

/* Auth row (password + confirm) */
.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.auth-row-2 .form-group { margin-bottom: 0; }

/* Consent checkbox */
.auth-card .form-check { margin-bottom: 0.25rem; }
.auth-card .consent-helper { margin-top: 0.5rem !important; }

/* Button spacing */
.auth-card .btn-lg { margin-top: 0.25rem; padding-top: 0.875rem; padding-bottom: 0.875rem; font-size: 1rem; }

/* Footer links */
.auth-footer { margin-top: 1.5rem; font-size: 0.9rem; text-align: center; }
.auth-footer + .auth-footer { margin-top: 0.75rem; }

/* Secondary link: "Forgot password?" should not compete with "Create one" */
.auth-link-muted { color: var(--text-soft) !important; }
.auth-link-muted:hover { color: var(--gold-text) !important; }

/* Remember-me sits under the password field, quieter than the field labels */
.auth-card .remember-me,
.auth-card .remember-me .form-check { margin-bottom: 0; }
.auth-card .remember-me .form-check-label { font-size: 0.9rem; font-weight: 500; }
.auth-card .remember-me .form-check-input {
  cursor: pointer;
  margin-top: 0.12rem;
  /* Bootstrap's 1em default renders tiny next to the 0.9rem label on the
     warm-paper card, so the control vanishes into the text. */
  width: 1.1rem;
  height: 1.1rem;
}

/* Card sits in the right half; wider than the 27rem base so the two-column
   name/contact rows have room. `margin: auto` centres it vertically while the
   pane has spare height, and collapses to 0 when the form is taller so the
   top stays reachable by scrolling. */
.auth-card {
  max-width: 32rem;
  padding: 2.4rem;
  margin: auto;
}
.auth-title,
.auth-subtitle { font-family: var(--font-display); }
.auth-title { font-weight: 620; }

/* ═══ Register: role selection + farmer fields ══════════════ */
.role-selection {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.role-option {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border: 1.5px solid var(--borders);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.875rem;
  /* Property-targeted, not `all`: a role toggle only changes border/background/shadow. */
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.role-option:hover {
  border-color: var(--primary);
}
.role-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-tint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.role-option input[type="radio"] {
  accent-color: var(--primary);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin: 0;
}
.role-icon {
  font-size: 1rem;
  color: var(--text-soft);
}
.role-option:has(input:checked) .role-icon {
  color: var(--primary);
}

#farmer-fields {
  border: 1px solid var(--borders);
  background: var(--canvas-deep);
  border-radius: var(--radius-sm);
  padding: 1.6rem;
  margin-bottom: 1.75rem;
}
#farmer-fields:not(.is-open) {
  display: none;
}
#farmer-fields legend {
  float: none;
  width: auto;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
  padding: 0 0.5rem;
  margin-bottom: 1rem;
}
/* Collapse without a magic max-height: 0fr -> 1fr animates to content height. */
#farmer-fields .collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease-decel, cubic-bezier(0.05, 0.7, 0.1, 1));
}
#farmer-fields.is-open .collapse {
  grid-template-rows: 1fr;
}
#farmer-fields .collapse-inner {
  overflow: hidden;
  min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
  #farmer-fields .collapse { transition: none; }
}
.farm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.farm-grid .span-2 {
  grid-column: 1 / -1;
}
.farm-note {
  font-size: 0.8125rem;
  color: var(--text-soft);
  margin: 0.75rem 0 0;
}

.auth-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* Password strength checklist */
.pw-rules {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  font-size: 0.75rem;
  color: var(--text-soft);
}
.pw-rules[hidden] { display: none; }
.pw-rules li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--hover-speed) ease;
}
.pw-rules li i {
  font-size: 0.7rem;
  opacity: 0.35;
  transition: opacity var(--hover-speed) ease, color var(--hover-speed) ease;
}
.pw-rules li.is-met {
  color: var(--success);
}
.pw-rules li.is-met i { opacity: 1; }

/* Submit button busy state */
#create-acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#create-acc-btn:disabled {
  cursor: progress;
  opacity: 0.75;
}
.btn-spinner[hidden] { display: none; }

@media (max-width: 575.98px) {
  .role-selection { flex-direction: column; }
  .farm-grid { grid-template-columns: 1fr; }
  .auth-row-2 { grid-template-columns: 1fr; gap: 1rem; }
  .footer .inside { grid-template-columns: 1fr; }
  .footer .cols { grid-template-columns: 1fr; gap: 2rem; }
}

/* ═══ Dashboard sidebar layout ══════════════════════ */
.has-sidebar { background: var(--canvas); }

.sidebar {
  display: flex;
  flex-direction: column;
  transition: width var(--dur-moderate) var(--ease-decel);
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borders);
}
.sidebar-close { margin-left: auto; }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.sidebar-logo { height: 1.8rem; width: auto; }
.sidebar-brand-text {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: 1.15rem;
  color: var(--text);
  transition: opacity var(--dur-short) var(--ease-decel);
}
.sidebar-close {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: 50%;
  color: var(--text);
  font-size: 0.85rem;
}
.sidebar-close:hover { border-color: var(--gold); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.75rem;
  /* The nav list is short; the scrollbar track is visual noise. */
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: background var(--hover-speed) ease, color var(--hover-speed) ease,
    border-color var(--hover-speed) ease, transform var(--hover-speed) ease;
}
.sidebar-link i { font-size: 0.95rem; flex: 0 0 auto; width: 1.25rem; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-link span { white-space: nowrap; transition: opacity var(--dur-short) var(--ease-decel); }
.sidebar-link:hover {
  background: var(--primary-tint);
  color: var(--primary);
  border-left-color: var(--gold);
}
.sidebar-link.is-active {
  background: var(--primary);
  color: var(--paper);
  border-left-color: var(--gold);
  border-radius: var(--radius-sm);
}
.sidebar-link.is-active:hover {
  background: var(--primary-tint);
  color: var(--primary);
}
:root[data-theme="dark"] .sidebar-link.is-active { color: var(--text); }
:root[data-theme="dark"] .sidebar-link.is-active:hover { color: var(--primary); }

.sidebar-main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--dur-moderate) var(--ease-decel);
  padding-top: 1rem;
}
.sidebar-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 1.25rem 1rem 0;
  padding: 0.6rem clamp(0.75rem, 1.5vw, 1.25rem);
  background: var(--paper);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 1200;
  overflow: visible;
}
.sidebar-topbar-side {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
}
 .sidebar-topbar-title {
   font-family: var(--font-display);
   font-weight: 620;
   font-size: 1.1rem;
   color: var(--text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   /* min-width: 0 lets this shrink in the flex group instead of widening the bar. */
   min-width: 0;
   /* No auto margin: the title sits hard against the left edge of the side group. */
   margin: 0;
   padding: 0 1rem 0 0;
 }
 .sidebar-topbar-actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   /* The utility group never yields space to the title and never wraps. */
   flex: 0 0 auto;
   flex-wrap: nowrap;
   margin-left: auto;
 }
 /* Long profile names truncate inside the pill instead of widening the bar. */
 .sidebar-topbar-actions .profile-btn { max-width: 12rem; }
 .sidebar-topbar-actions .profile-meta { min-width: 0; overflow: hidden; }
 .sidebar-topbar-actions .profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toggle {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: 50%;
  color: var(--text);
  font-size: 1rem;
}
/* Sidebar toggle: three lines morphing into a close mark while folded/open */
.sidebar-toggle.sidebar-toggle-brand { display: none; }
.sidebar-toggle-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  transform-origin: center;
  transition: transform var(--dur-moderate) var(--ease-decel);
}
.sidebar-toggle-lines span {
  display: block;
  width: 1.05rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-moderate) var(--ease-decel),
              opacity var(--dur-moderate) var(--ease-decel);
}
/* Three lines morph into an X while the drawer/sidebar is open, matching the header burger. */
html[data-drawer-open] .sidebar-toggle-lines span:nth-child(1) { transform: translateY(calc(0.3rem + 2px)) rotate(45deg); }
html[data-drawer-open] .sidebar-toggle-lines span:nth-child(2) { opacity: 0; }
html[data-drawer-open] .sidebar-toggle-lines span:nth-child(3) { transform: translateY(calc(-0.3rem - 2px)) rotate(-45deg); }
@media (min-width: 992px) {
  /* Desktop: the open (expanded) sidebar gets the X mark; folded keeps the burger */
  html:not([data-sidebar-collapsed]) .sidebar-toggle-lines span:nth-child(1) { transform: translateY(calc(0.3rem + 2px)) rotate(45deg); }
  html:not([data-sidebar-collapsed]) .sidebar-toggle-lines span:nth-child(2) { opacity: 0; }
  html:not([data-sidebar-collapsed]) .sidebar-toggle-lines span:nth-child(3) { transform: translateY(calc(-0.3rem - 2px)) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-main, .sidebar-toggle-lines, .sidebar-toggle-lines span { transition: none; }
}
.sidebar-icon-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color var(--hover-speed) ease, color var(--hover-speed) ease;
}
.sidebar-icon-btn:hover {
  border-color: var(--gold);
  color: var(--gold-text);
}
.profile-dd { position: relative; }
.profile-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-pill);
  color: var(--text);
  transition: border-color var(--hover-speed) ease;
}
.profile-btn:hover { border-color: var(--gold); }
.profile-btn::after { margin-left: 0.25rem; }
.profile-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.profile-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.profile-name { font-size: 0.9rem; font-weight: 600; }
.role-pill {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.profile-dd-menu { min-width: 14rem; z-index: 2000; position: absolute; top: 100%; right: 0; left: auto; margin-top: 0.25rem; }
.profile-dd-head {
  padding: 0.5rem 1rem;
  display: flex;
  flex-direction: column;
}
.profile-dd-name { font-weight: 600; }
.profile-dd-email { font-size: 0.8rem; color: var(--text-soft); word-break: break-all; }
@media (max-width: 575.98px) {
  .profile-meta { display: none; }
  .profile-btn { padding: 0.3rem 0.4rem; }
}

.sidebar-content {
  flex: 1;
  padding: 2rem clamp(1rem, 3vw, 2rem);
  width: 100%;
}
.sidebar-content .container-fluid { max-width: none; }
/* browse.php is the one shell page still wrapped in .section/.container: the
   shell already pads, so the inner padding would double up. */
.sidebar-content .section { padding: 0; }
.sidebar-content .container { padding-left: 0; padding-right: 0; }

/* ═══ Responsive — nav / auth / sidebar ═════════════ */
@media (max-width: 991.98px) {
  .nav-links { display: none; }
  /* Hamburger leads the bar (order:-1), not mid-bar; nav-cta keeps its right auto margin. */
  .hamburger { display: flex; order: -1; margin-left: 0; }
  .nav-cta .nav-sell-btn { display: none !important; }
  .nav-cta > .nav-text-link { display: none; }
  .nav-cta .locale-dd { display: none; }
  /* Cart pill is deliberately not hidden here: the mobile drawer has no cart
     link, so hiding it would strand buyers with no way to reach the cart. */

  /* Split screen holds to 768px; only tighten the panes so the form fits ~50vw. */
  .auth-left { padding: 32px; }
  .auth-right { padding: 24px; }
  .auth-card { padding: 1.75rem; }

  .sidebar-main { margin-left: 0; }
  .sidebar-content { padding: 1.5rem 1rem; }
}

@media (max-width: 768px) {
  /* Below this the columns leave the card too narrow, so the form goes full width. */
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { display: none; }
  /* Reset the column pin: grid-column: 2 would spawn an implicit auto-width second column. */
  .auth-right { grid-column: 1; padding: 24px 16px; }
  .auth-card { padding: 1.6rem; }
}

@media (min-width: 992px) {
  .nav-utils .nav-text-link { display: inline; }
}

@media (max-width: 575.98px) {
  .nav-inner { padding: 0 0.9rem; }
  .nav-cta { gap: 0.4rem; }
  .brand-logo { max-width: 100px; }
  .nav-cta .dropdown-toggle:not(.profile-btn) { padding: 0.25rem 0.35rem; }
  .nav-cta .dropdown-toggle:not(.profile-btn)::after { display: none; }
  .nav-utils { display: none; }
  .grid { grid-template-columns: 1fr; }
  .hero-image-wrapper { transform: none; }
}

@media (min-width: 992px) {
  /* Floating sidebar: detached panel with breathing room, rounded, softly
     elevated. Content column shifts to leave a gutter on the left. */
  .sidebar {
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 15.5rem;
    height: calc(100vh - 2rem);
    border-radius: var(--radius-card);
    border: 1px solid var(--borders);
    background: var(--paper);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    z-index: 1030;
    transform: none;
  }
  .sidebar-main { margin-left: calc(15.5rem + 2rem); }
  .sidebar-close { display: none; }
  .sidebar-overlay { display: none; }
  .sidebar-topbar .sidebar-toggle { display: none; }
  .sidebar-toggle.sidebar-toggle-brand { display: flex; margin-left: auto; }

/* Collapsed = icon rail (not hidden): narrow panel with centered icons,
   labels clipped but kept in the a11y tree. */
html[data-sidebar-collapsed] .sidebar {
  width: 4.5rem;
  transform: none;
}
html[data-sidebar-collapsed] .sidebar-main { margin-left: calc(4.5rem + 2rem); }
/* Keep the hamburger on the right in both states for consistency. */
html[data-sidebar-collapsed] .sidebar-header { justify-content: center; padding: 1rem 0.5rem; gap: 0; }
/* Keep the logo visible as a home link even when collapsed. */
html[data-sidebar-collapsed] .sidebar-brand { max-width: 2.5rem; min-width: 2.5rem; overflow: visible; opacity: 1; margin: 0; flex: 0 0 auto; justify-content: center; }
html[data-sidebar-collapsed] .sidebar-brand-text,
html[data-sidebar-collapsed] .sidebar-link span {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
  overflow: hidden;
}
html[data-sidebar-collapsed] .sidebar-logo { opacity: 1; pointer-events: auto; }
html[data-sidebar-collapsed] .sidebar-toggle.sidebar-toggle-brand { margin-left: 0; }
html[data-sidebar-collapsed] .sidebar-link { position: relative; justify-content: center; padding: 0.6rem 0; width: 100%; box-sizing: border-box; }
html[data-sidebar-collapsed] .sidebar-link i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
html[data-sidebar-collapsed] .sidebar-nav { padding: 0.75rem 0.5rem; }
html[data-sidebar-collapsed] .sidebar-close { display: none; }
/* Topbar no longer carries a hamburger on desktop; mobile keeps its own. */
html[data-sidebar-collapsed] .sidebar-topbar .sidebar-toggle { display: none; }
}
@media (max-width: 991.98px) {
  .sidebar-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.7rem 1rem;
    background: var(--paper);
    border: none;
    border-bottom: 1px solid var(--borders);
    border-radius: 0;
    box-shadow: none;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    overflow: visible;
  }
  .sidebar-toggle {
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--borders);
    border-radius: 50%;
    color: var(--text);
    font-size: 1rem;
  }
  .sidebar-topbar-title {
    font-family: var(--font-display);
    font-weight: 620;
    font-size: 1.1rem;
    color: var(--text);
  }
  .sidebar-topbar-actions { display: flex; }
}

/* Micro-layout refinements */
.section { padding: 4rem 0; }
.section-head { margin-bottom: 2rem; }
.section-head h1,
.section-head h2,
.how-it-works .section-title,
.cta-section .section-title { margin-top: 0; }
.hero-section { padding: 5.25rem 0 2.5rem; }
.hero-overlay { position: absolute; }
.price-pill,
.origin-badge { border: 0; }
.legal-breadcrumb a { text-decoration: underline; text-underline-offset: 0.15em; }
.card.border-0 { border-color: var(--borders) !important; }
.feature-card { margin-bottom: 2rem; }
.how-it-works, .story-section, .faq-section, .cta-section { padding: 5rem 0 !important; }
@media (max-width: 767.98px) {
  .hero-section { padding: 3.25rem 0 2rem; }
  .section { padding: 3rem 0; }
  .how-it-works, .story-section, .faq-section, .cta-section { padding: 3.5rem 0 !important; }
  .feature-card { grid-template-columns: 1fr; }
  .feature-card .thumb {
    min-height: 12rem;
    border-right: 0;
    border-bottom: 1px solid var(--borders);
  }
  .feature-card .body { padding: 1.5rem; }
  .process-strip { grid-template-columns: 1fr; gap: 1.5rem; }
}
.grid > .card .body {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}
.grid > .card .body .row h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.grid > .card .body .badge-location {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.grid > .card .body .price { margin-top: auto; }
.btn,
.filter-pill,
.add-to-basket,
.theme-toggle,
.hamburger,
.sidebar-toggle {
  min-height: 2.75rem;
}
@media (max-width: 767.98px) {
  .dash-table th:nth-child(3),
  .dash-table td:nth-child(3),
  .dash-table th:nth-child(7),
  .dash-table td:nth-child(7) {
    display: none;
  }
  .dash-table th,
  .dash-table td { padding: 0.7rem 0.65rem; }
  .dash-table { font-size: 0.84rem; }
}

/* ═══ Shared grid and container ═══ */
.shared-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .shared-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .shared-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .shared-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .shared-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.container {
  width: 100%;
  max-width: 90rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: var(--breakpoint-sm)) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: var(--breakpoint-lg)) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

/* Marketplace interface — fill available width between sidebar and viewport edge */
#market .container {
  max-width: none;
  padding-left: clamp(1.5rem, 3vw, 2rem);
  padding-right: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 479.98px) {
  .grid { grid-template-columns: 1fr; }
}

/* Touch target size increase + text centering */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.25 !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  vertical-align: middle !important;
  gap: 0.375rem !important;
}
.btn i, .btn svg {
  flex-shrink: 0;
  line-height: 1 !important;
}

/* Required marker */
.form-label.required::after {
  content: " *";
  color: var(--gold-text);
}

/* ── Trust / USP metric bar ──────────────────────────── */
.trust-bar {
  padding: 1.6rem 0;
}
.trust-metric {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  justify-content: center;
}
.trust-metric-num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-text);
}
.trust-metric-lbl {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--footer-text);
}
@media (max-width: 575.98px) {
  .trust-metric {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }
  .trust-metric-num {
    font-size: 2rem;
  }
}
:root[data-theme="dark"] .trust-metric-num,
:root[data-theme="dark"] .trust-metric-lbl {
  color: #FFFFFF;
}

/* ── Story / farmer split section ────────────────────── */
.story-figure {
  position: relative;
  padding: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.story-figure-img {
  display: block;
  width: 100%;
  /* seedlings.jpg is 800×533 (3:2) → native ratio, no crop */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: calc(var(--radius-card) - 0.4rem);
}
.story-section .story-content {
  max-width: 100%;
}
@media (min-width: 992px) {
  .story-section .story-content {
    max-width: 31rem;
    margin-right: 0;
  }
}

/* .row.g-5 margins (-1.5rem) exceed the container padding and bleed 8px past the
   viewport; zeroing them keeps the 3rem gutter without the bleed. */
.story-section .row.g-5 {
  margin-left: 0;
  margin-right: 0;
}

/* ── Process step icons ──────────────────────────────── */
.process-step-icon {
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  font-size: 1.5rem;
  color: var(--gold-deep);
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
  border-radius: 50%;
}

/* ── CTA polish ──────────────────────────────────────── */
.cta-section {
  padding: 5.25rem 0;
}
.cta-section .section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.015em;
}
.cta-section .btn {
  font-size: 1.05rem;
}

/* --- FAQ header polish --- */
.faq-section .section-title {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -0.015em;
}

/* ═══ Dashboard redesign — scannable admin chrome ═══════ */
/* Stat cards: icon + gradient presence */
.stat-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, var(--stat-accent, var(--gold)) 12%), var(--paper)) !important;
}
.stat-content {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.4rem 1.35rem;
  min-height: 8.25rem;
}
.stat-icon {
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--gold-deep);
  background: var(--gold-tint);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius-sm);
}
.stat-body {
  min-width: 0;
}
.stat-body .stat-value {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--primary);
}

/* A tile wears the state it counts, so "needs attention" stops looking the
   same as "all good". The variant comes from the stat array in dashboard.php. */
.stat-card--success { --stat-accent: var(--status-ok-ink);  --stat-fill: var(--status-ok-fill); }
.stat-card--info    { --stat-accent: var(--status-info-ink); --stat-fill: var(--status-info-fill); }
.stat-card--warning { --stat-accent: var(--status-warn-ink); --stat-fill: var(--status-warn-fill); }
.stat-card--danger  { --stat-accent: var(--status-bad-ink);  --stat-fill: var(--status-bad-fill); }
.stat-card .stat-icon {
  color: var(--stat-accent, var(--gold-deep));
  background: var(--stat-fill, var(--gold-tint));
  border-color: color-mix(in srgb, var(--stat-accent, var(--gold)) 32%, transparent);
}
.stat-card .stat-body .stat-value {
  /* One accent rule: the tile's colour lives in the icon chip + tint wash;
     the number itself stays ink so three tiles never read as three palettes. */
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-trend.text-success {
  color: var(--stat-accent, var(--primary)) !important;
}

/* Tables: dark-green headers, zebra rows, tighter cells */
.dash-table th {
  color: var(--primary) !important;
  padding: 0.7rem 0.85rem;
}
.dash-table td {
  padding: 0.72rem 0.85rem;
}
.dash-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--canvas-deep) 55%, transparent);
}
.dash-table .date-col {
  white-space: nowrap;
}

/* Status pill badges */
.dash-badge {
  display: inline-block;
  padding: 0.28rem 0.72rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: capitalize;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.35;
}

/* Shared chip geometry — listing badges and dashboard badges are one component */
.badge, .badge-fresh, .badge-normal, .badge-stale, .badge-location, .dash-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.78rem;
  font-size: 0.72rem;
  font-weight: 700 !important;
  line-height: 1.35;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: var(--radius-pill) !important;
}
/* Status families. Both themes read the same tokens, so the variants need no
   per-theme overrides; the chip border comes from the shared currentColor rule. */
.dash-badge--success {
  color: var(--status-ok-ink);
  background: var(--status-ok-fill);
}
.dash-badge--info {
  color: var(--status-info-ink);
  background: var(--status-info-fill);
}
.dash-badge--primary {
  color: var(--primary);
  background: var(--primary-tint);
}
.dash-badge--warning {
  color: var(--status-warn-ink);
  background: var(--status-warn-fill);
}
.dash-badge--danger {
  color: var(--status-bad-ink);
  background: var(--status-bad-fill);
}
.dash-badge--secondary {
  color: var(--status-neutral-ink);
  background: var(--status-neutral-fill);
  border-color: var(--status-neutral-border);
}

/* Role badge fills — quick-scan colors */
.dash-badge--role-buyer {
  color: #1F5E97;
  background: rgba(31, 94, 151, 0.14);
  border-color: rgba(31, 94, 151, 0.35);
}
.dash-badge--role-farmer {
  color: #1C6B3A;
  background: rgba(31, 75, 50, 0.14);
  border-color: rgba(31, 75, 50, 0.35);
}
.dash-badge--role-admin {
  color: #8A5A12;
  background: rgba(217, 154, 43, 0.18);
  border-color: rgba(217, 154, 43, 0.4);
}
:root[data-theme="dark"] .dash-badge--role-buyer {
  color: #9CC6E8;
  background: rgba(120, 170, 215, 0.16);
  border-color: rgba(120, 170, 215, 0.35);
}
:root[data-theme="dark"] .dash-badge--role-farmer {
  color: #9BD5AE;
  background: rgba(140, 195, 160, 0.16);
  border-color: rgba(140, 195, 160, 0.35);
}
:root[data-theme="dark"] .dash-badge--role-admin {
  color: #E8C27E;
  background: rgba(217, 154, 43, 0.2);
  border-color: rgba(217, 154, 43, 0.45);
}

/* Report tabs — pill navigation with clear active state */
.report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0;
  border-bottom: 0;
  list-style: none;
}
.report-tabs .nav-item { margin: 0; }
.report-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--borders);
  background: var(--paper);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color var(--hover-speed) ease, color var(--hover-speed) ease, border-color var(--hover-speed) ease;
}
.report-tabs .nav-link:hover {
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: var(--primary-tint);
}
.report-tabs .nav-link.active,
.report-tabs .nav-link.active:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

/* Dark-mode buttons & fields — lift off the canvas */
:root[data-theme="dark"] .btn-outline-primary {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--text) !important;
  background: transparent !important;
}
:root[data-theme="dark"] .btn-outline-primary:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .input-group-text {
  background-color: #242424 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
/* Must follow the block above: equal specificity (0,3,0), so source order decides. */
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus,
:root[data-theme="dark"] .input-group-text:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent) !important;
}

/* Dark table headers - light neutral grey */
:root[data-theme="dark"] .dash-table th { color: #CFCFCF !important; }

/* Report table columns — proportional, no dead middle gap */
.dash-table .col-when  { width: 9rem; max-width: 9rem; }
.dash-table .col-role  { width: 6rem; max-width: 6rem; }
.dash-table .col-status { width: 7rem; max-width: 7rem; }

/* Audit activity timeline */
.audit-event {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 1.25rem;
}
.audit-event + .audit-event {
  border-top: 1px solid var(--borders);
}
.audit-event-icon {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--text-soft);
  background: var(--canvas-deep);
  border-radius: 50%;
}
.audit-event-icon--ok {
  color: #1C6B3A;
  background: rgba(31, 75, 50, 0.12);
}
.audit-event-icon--edit {
  color: #8A5A12;
  background: rgba(217, 154, 43, 0.16);
}
.audit-event-icon--bad {
  color: #A3372B;
  background: rgba(176, 60, 50, 0.12);
}
.audit-event-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  line-height: 1.3;
}
.audit-event-entity {
  font-size: 0.8rem;
  color: var(--text-soft);
}
.audit-event-meta {
  font-size: 0.74rem;
  color: var(--text-soft);
  margin-top: 0.1rem;
}
:root[data-theme="dark"] .audit-event-icon--ok {
  color: #9BD5AE;
  background: rgba(140, 195, 160, 0.14);
}
:root[data-theme="dark"] .audit-event-icon--edit {
  color: #E8C27E;
  background: rgba(217, 154, 43, 0.16);
}
:root[data-theme="dark"] .audit-event-icon--bad {
  color: #E8A09A;
  background: rgba(200, 90, 75, 0.16);
}

/* Empty states inside dashboard panels / sidebar content */
.dash-panel .empty-state,
.sidebar-content .empty-state {
  margin: 1.5rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--borders);
  border-radius: var(--radius-card);
  background: var(--canvas);
  max-width: 36rem;
}
/* Empty states inside admin tables */
.dash-table .empty-state,
td .empty-state {
  margin: 0 auto !important;
  max-width: 36rem;
  text-align: center;
}
.dash-panel .empty-state .empty-state-icon {
  margin: 0 auto 0.75rem;
  color: var(--text-soft);
}

/* ── Home vertical rhythm standardisation ────────────── */
.trust-bar {
  padding: 1.8rem 0;
}
.story-section .story-body {
  margin-bottom: 1.5rem;
}
.story-section .story-quote {
  margin-bottom: 1rem;
}
.process-step-icon {
  margin-bottom: 0.8rem;
}
.process-step-number {
  margin-bottom: 0.25rem;
}
.process-step-number::after {
  margin-top: 0.8rem;
}
.process-step-title {
  margin-bottom: 0.4rem;
}
.faq-section .accordion {
  margin-top: 1.75rem;
}

.account-profile {
  margin-bottom: 1.75rem;
}
.account-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2rem;
}
.account-form fieldset {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--borders);
  background: var(--paper);
}
.account-form legend {
  float: none;
  width: auto;
  padding: 0 0.5rem;
  margin: 0 0 1rem -0.5rem;
  font-size: 1rem;
  font-weight: 700;
}
.account-form .form-group {
  margin-bottom: 1.25rem;
}
.account-form .form-group:last-child {
  margin-bottom: 1.5rem;
}
.account-form .form-label {
  margin-bottom: 0.4rem;
}
.account-form .btn {
  margin-top: 0.25rem;
}
.account-form .btn + .btn {
  margin-left: 0.75rem;
}
.account-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
}
.account-meta > div {
  min-width: 0;
}
.account-meta dt {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.account-meta dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: break-word;
}
.account-divider {
  margin: 0 0 1.75rem;
  border: 0;
  border-top: 1px solid var(--borders);
}

/* ---- Dark-mode readability fixes ---- */
:root[data-theme="dark"] {
  /* Base text */
  color: var(--text);
  background-color: var(--canvas);
}
:root[data-theme="dark"] a {
  color: var(--gold-text);
}
:root[data-theme="dark"] a:hover {
  color: var(--accent-hover);
}
:root[data-theme="dark"] .form-label,
:root[data-theme="dark"] .form-check-label,
:root[data-theme="dark"] legend,
:root[data-theme="dark"] label {
  color: var(--text);
}
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select,
:root[data-theme="dark"] .form-check-input {
  background-color: var(--paper);
  border-color: var(--field-border);
  color: var(--text);
}
:root[data-theme="dark"] .form-control::placeholder {
  color: var(--text-soft);
}
:root[data-theme="dark"] .btn-outline {
  color: var(--gold-text) !important;
  border-color: var(--accent) !important;
}
:root[data-theme="dark"] .btn-outline:hover {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-primary-nav {
  background: var(--gold) !important;
  color: var(--gold-ink) !important;
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary-nav:hover {
  background: var(--gold-deep) !important;
}
:root[data-theme="dark"] .btn-outline-primary {
  border-color: var(--accent) !important;
  color: var(--gold-text) !important;
  background: var(--paper) !important;
}
:root[data-theme="dark"] .btn-outline-primary:hover {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}
:root[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--borders) !important;
  color: var(--text) !important;
  background: var(--paper) !important;
}
:root[data-theme="dark"] .btn-outline-secondary:hover {
  border-color: var(--accent) !important;
  color: var(--gold-text) !important;
  background: var(--canvas) !important;
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card-body,
:root[data-theme="dark"] .card-header,
:root[data-theme="dark"] .card-footer {
  background-color: var(--paper);
  border-color: var(--borders);
}
:root[data-theme="dark"] .sidebar-link {
  color: var(--text);
}
/* Neutral hover in dark mode, so hovering never mimics the gold active indicator. */
:root[data-theme="dark"] .sidebar-link:hover {
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
:root[data-theme="dark"] .sidebar-link.is-active {
  background-color: var(--sidebar-active-bg);
  color: var(--gold-text);
}
:root[data-theme="dark"] .nav-utils .cart-pill,
:root[data-theme="dark"] .nav-utils .notif-pill {
  color: var(--text);
}
:root[data-theme="dark"] .alert {
  background-color: var(--paper);
  border-color: var(--borders);
  color: var(--text);
}
:root[data-theme="dark"] .table th,
:root[data-theme="dark"] .table td {
  border-color: var(--borders);
}
:root[data-theme="dark"] .badge {
  background-color: var(--accent);
  color: var(--accent-ink);
}
:root[data-theme="dark"] .badge-fresh {
  background-color: var(--success);
  color: var(--success-ink);
}
:root[data-theme="dark"] .badge-normal {
  background-color: var(--accent);
  color: var(--accent-ink);
}
:root[data-theme="dark"] .badge-stale {
  background-color: var(--danger);
  color: var(--danger-ink);
}
:root[data-theme="dark"] .price {
  color: var(--text);
}
:root[data-theme="dark"] .text-soft,
:root[data-theme="dark"] .text-muted,
:root[data-theme="dark"] .form-text {
  color: var(--text-soft);
}
:root[data-theme="dark"] #farmer-fields legend {
  color: var(--success);
}
:root[data-theme="dark"] .skip-link {
  background: var(--accent);
  color: var(--accent-ink);
}
/* Bootstrap status utilities mapped onto tokens - no off-palette Bootstrap reds/greens. */
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.btn-danger {
  background-color: var(--danger-fill) !important;
  border-color: var(--danger-fill) !important;
  color: #fff !important;
}
.btn-outline-danger {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-outline-danger:hover,
.btn-outline-danger:active,
.btn-outline-danger:focus {
  background-color: var(--danger-fill) !important;
  border-color: var(--danger-fill) !important;
  color: #fff !important;
}

/* Product photo on the listing detail page. Cards pin a 1:1 frame and crop with
   object-fit; this gallery had neither, so a wide or tall source stretched the
   carousel to its native ratio and the photo framed differently per listing. */
.listing-gallery .carousel-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ─── Listing detail — info column ─── Custom classes (.pill, .listing-*) had
   no styles, so the page rendered as plain text. Field-ledger styling to match
   the flat language: hairline rules, status fills, tabular figures. */
.listing-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding: 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--field-border);
  background: transparent;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}
.pill--organic { background: var(--status-ok-fill); border-color: transparent; color: var(--status-ok-ink); }
.pill--category { color: var(--text-soft); }
.pill--verified { background: var(--gold-tint); border-color: transparent; color: var(--gold-text); }
.listing-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0 0 0.4rem;
}
.listing-origin { color: var(--text-soft); font-size: 0.95rem; margin-bottom: 1.1rem; }
.listing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.9rem 0 0.85rem;
  border-block: 1px solid var(--borders);
  font-variant-numeric: tabular-nums;
  margin: 0 0 0.75rem;
}
.listing-price .amount {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: 2.15rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  color: var(--primary);
}
.listing-price .per { color: var(--text-soft); font-size: 1rem; }
.listing-meta { color: var(--text-soft); font-size: 0.93rem; line-height: 1.7; margin-bottom: 1.1rem; }
.listing-desc { max-width: 42rem; line-height: 1.65; margin-bottom: 1.2rem; }
.listing-facts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  background: var(--borders);
  border: 1px solid var(--borders);
  margin: 0 0 1.4rem;
  max-width: 34rem;
}
.listing-facts > div { background: var(--paper); padding: 0.65rem 0.9rem; }
.listing-facts dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.15rem;
}
.listing-facts dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--text); }
.listing-gallery { background: var(--paper); border: 1px solid var(--borders); }
:root[data-theme="dark"] .listing-price .amount { color: var(--gold-text); }

/* Align buttons in listing CTA */
.listing-cta .d-flex {
  align-items: center;
  flex-wrap: wrap;
}
.listing-cta .btn {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.listing-cta .btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;
}

/* Notification bell button in topbar */
.notif-btn {
  position: relative;
}
.notif-btn .notif-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--gold);
  color: var(--gold-ink);
  border-radius: 999px;
}

/* Ensure profile name visible in dark mode */
:root[data-theme="dark"] .profile-name,
:root[data-theme="dark"] .profile-dd-name,
:root[data-theme="dark"] .profile-dd-email {
  color: var(--text);
}
:root[data-theme="dark"] .role-pill {
  color: var(--text);
  background-color: var(--paper);
  border-color: var(--borders);
}

/* Top bar utilities flex container */
.nav-utils,
 .sidebar-topbar {
   display: flex;
   align-items: center;
   /* Page title/breadcrumb pins left, utility icons + profile pill pin right. */
   justify-content: space-between;
   gap: 1.25rem;
   /* nowrap: wrapping pushed the profile pill to row 2, colliding with the title. */
    flex-wrap: nowrap;
    /* 56px min-height + 6px padding gives the 2.75rem (44px) buttons real top/bottom margin. */
    min-height: 56px;
  }
 .nav-utils > * {
   flex-shrink: 0;
 }
 /* Public nav cluster is width-constrained; only .sidebar-topbar needs the 16px padding. */
 .nav-utils {
   padding: 0;
 }
 /* Sidebar-topbar children must not be flex-shrink: 0 here; only the utility
    group is unshrinkable, and it sets flex: 0 0 auto itself. */


/* Profile menu wrapper — card styling comes from the shared .profile-btn rules. */
.profile-menu {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon buttons uniform: 2.75rem meets the .theme-toggle min-height tap target above */
.nav-utils .theme-toggle,
.nav-utils .locale-btn,
.nav-utils .notif-pill,
.nav-utils .cart-pill,
.sidebar-topbar .theme-toggle,
.sidebar-topbar .locale-btn,
.sidebar-topbar .notif-pill,
.sidebar-topbar .cart-pill,
.sidebar-topbar .sidebar-icon-btn {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--borders);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}

/* Topbar controls get a heavier stroke than the public nav. 2px, not 1.5px:
   Chromium snaps fractional border widths down to whole device pixels. */
.sidebar-topbar .theme-toggle,
.sidebar-topbar .locale-btn,
.sidebar-topbar .notif-pill,
.sidebar-topbar .cart-pill,
.sidebar-topbar .sidebar-icon-btn {
  border-width: 2px;
}

/* Profile button: shared card style from .profile-btn above. */

/* Icon hover */
.nav-utils .theme-toggle:hover,
.nav-utils .locale-btn:hover,
.nav-utils .notif-pill:hover,
.nav-utils .cart-pill:hover,
.sidebar-topbar .theme-toggle:hover,
.sidebar-topbar .locale-btn:hover,
.sidebar-topbar .notif-pill:hover,
.sidebar-topbar .cart-pill:hover,
.sidebar-topbar .sidebar-icon-btn:hover {
  background: var(--canvas);
  border-color: var(--gold);
}

/* Badges */
.nav-utils .notif-count,
.nav-utils .cart-count,
.sidebar-topbar .notif-count,
.sidebar-topbar .cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  background: var(--gold);
  color: var(--gold-ink);
  border-radius: 999px;
}

/* Dark mode tweaks */
:root[data-theme="dark"] .nav-utils .theme-toggle,
:root[data-theme="dark"] .nav-utils .locale-btn,
:root[data-theme="dark"] .nav-utils .notif-pill,
:root[data-theme="dark"] .nav-utils .cart-pill,
:root[data-theme="dark"] .sidebar-topbar .theme-toggle,
:root[data-theme="dark"] .sidebar-topbar .locale-btn,
:root[data-theme="dark"] .sidebar-topbar .notif-pill,
:root[data-theme="dark"] .sidebar-topbar .cart-pill,
:root[data-theme="dark"] .sidebar-topbar .sidebar-icon-btn {
  background: var(--paper);
  border-color: var(--borders);
}

/* ---- Order Participants panel  ----
   Two-column grid with explicit gap; min-width: 0 breaks long names inside their column. */
.participants-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.participant-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* min-width: 0 stops a long unbroken name from widening the grid track. */
  min-width: 0;
  padding: 1rem 1.1rem;
  background: var(--canvas-deep);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
}
.participant-card strong {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-soft);
}
.participant-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
}
.participant-card .text-muted {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Single column on phones so names never get a cramped half-width track. */
@media (max-width: 575.98px) {
  .participants-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ---- Cart table  ----
   App themes via [data-theme], not Bootstrap's [data-bs-theme], so override the
   --bs-table-* custom properties directly; token-driven, light mode stays correct. */
.cart-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--borders);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg: transparent;
  --bs-table-hover-color: var(--text);
  --bs-table-hover-bg: color-mix(in srgb, var(--primary) 20%, transparent);
  --bs-table-accent-bg: transparent;
  background: transparent;
  color: var(--text);
  margin-bottom: 0;
}
.cart-table > thead > tr > th {
  background: var(--canvas-deep);
  color: var(--text);
  border-bottom: 1px solid var(--borders);
  font-weight: 620;
  white-space: nowrap;
  vertical-align: middle;
}
.cart-table > tbody > tr {
  background: var(--paper);
  color: var(--text);
  border-color: var(--borders);
}
.cart-table > tbody > tr > td {
  background: transparent;
  border-color: var(--borders);
  color: var(--text);
}
.cart-table > tbody > tr:hover > td {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--text);
}
.cart-table > tfoot > tr > td {
  background: var(--canvas-deep);
  color: var(--text);
  border-top: 1px solid var(--borders);
  border-bottom: 0;
  font-weight: 700;
}
.cart-table .text-muted { color: var(--text-soft) !important; }
.cart-table a { color: var(--text); }
.cart-table a:hover, .cart-table a:focus-visible { color: var(--gold-text); }

/* ---- List group (notifications) ----
   Same problem as the cart table above: Bootstrap reads [data-bs-theme], the app
   themes via [data-theme], so its --bs-list-group-* defaults never move. Token
   them so the cards follow the theme; light mode resolves to the white it had. */
.list-group {
  --bs-list-group-bg: var(--paper);
  --bs-list-group-color: var(--text);
  --bs-list-group-border-color: var(--borders);
  --bs-list-group-action-color: var(--text);
  --bs-list-group-action-hover-color: var(--text);
  --bs-list-group-action-hover-bg: color-mix(in srgb, var(--primary) 8%, transparent);
  --bs-list-group-action-active-color: var(--text);
  --bs-list-group-action-active-bg: color-mix(in srgb, var(--primary) 14%, transparent);
}
/* Anchors inside a card fall through to Bootstrap blue in light mode: the global
   dark-mode `a` rule has no light counterpart, so pin them here. */
.list-group-item a { color: var(--primary); }
.list-group-item a:hover, .list-group-item a:focus-visible { color: var(--gold-text); }

/* Product thumbnail in the cart */
.cart-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: cover;
  border: 1px solid var(--borders);
  border-radius: 8px;
}

/* Quantity field */
.cart-qty-input {
  width: 90px;
  background: var(--canvas-deep);
  color: var(--text);
  border: 1px solid var(--borders);
}
.cart-qty-input:focus {
  background: var(--canvas-deep);
  color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 0 0 0.2rem var(--gold-tint);
}

/* Update button: matches the (0,2,0) !important specificity of the app-wide
   dark .btn-outline-primary rule so it does not fall back to a flat light-grey outline. */
.cart-qty-update {
  background: transparent;
  color: var(--gold-text);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--borders));
}
:root[data-theme="dark"] .cart-qty-update {
  background: transparent !important;
  color: var(--gold-text) !important;
  border-color: color-mix(in srgb, var(--gold) 55%, var(--borders)) !important;
}
:root[data-theme="dark"] .cart-qty-update:hover,
:root[data-theme="dark"] .cart-qty-update:focus-visible {
  background: var(--gold-tint) !important;
  color: var(--gold-text) !important;
  border-color: var(--gold) !important;
}
.cart-qty-update:hover,
.cart-qty-update:focus-visible {
  background: var(--gold-tint);
  color: var(--gold-text);
  border-color: var(--gold);
}

/* Remove / trash button */
.cart-remove {
  color: var(--danger) !important;
  text-decoration: none;
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
}
.cart-remove:hover,
.cart-remove:focus-visible {
  color: var(--danger) !important;
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

/* ── Account deletion ─────────────────────────────────── */

/* Wider auth card for the longer delete-account copy so labels stay on one line. */
.auth-card--wide {
  max-width: 560px;
}

/* What-is-kept / what-is-removed briefing; deliberately not a .alert (reference, not transient). */
.danger-panel {
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--borders));
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  padding: 16px 18px;
  margin-bottom: 22px;
  text-align: left;
}

.danger-panel__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--danger);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.danger-panel__lead {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0 0 14px;
}

.danger-panel__sub {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0 0 4px;
}

.danger-panel__sub + .danger-panel__body {
  margin-bottom: 12px;
}

.danger-panel__body {
  font-size: 0.875rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.55;
}

/* Local-only password reset link, monospaced and wrapping so a long token never overflows. */
.auth-card-local-link {
  border: 1px dashed color-mix(in srgb, var(--gold) 50%, var(--borders));
  border-radius: var(--radius-sm);
  background: var(--gold-tint);
  padding: 14px 16px;
  margin-bottom: 20px;
  text-align: left;
}

.auth-card-local-link__title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-card-local-link__body {
  font-size: 0.85rem;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.5;
}

.auth-card-local-link__url {
  display: block;
  font-size: 0.8rem;
  background: var(--bg-primary);
  border: 1px solid var(--borders);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: break-all;
  user-select: all;
  color: var(--text);
}

.auth-card-local-link__note {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin: 10px 0 0;
  line-height: 1.5;
}

.auth-form {
  margin-top: 4px;
}

/* ── Account settings additions ───────────────────────── */

/* Explanatory line above the name inputs, matching the muted scale of fieldset legends. */
.account-hint {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin: -4px 0 14px;
  max-width: 56ch;
}

/* Quieter than the delete page's briefing panel; only has to warn and hand off to account_delete.php. */
.account-danger {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--borders));
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  padding: 16px 18px;
}

.account-danger__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--danger);
  margin: 0 0 6px;
}

.account-danger__body {
  font-size: 0.875rem;
  color: var(--text-soft);
  margin: 0 0 14px;
  line-height: 1.55;
  max-width: 62ch;
}

.account-danger__note {
  font-size: 0.78rem;
  color: var(--text-soft);
  margin: 10px 0 0;
}

.account-danger .btn-danger[disabled],
.account-danger .btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ----- Legal pages (cookies / privacy / terms) -----
   One shared copy for all three pages. */
.legal-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 2rem;
}
@media (min-width: 768px) {
  .legal-container {
    padding: 3rem;
  }
}
.sticky-sidebar {
  position: sticky;
  top: 6rem;
  align-self: start;
}
.legal-body h2[id] {
  scroll-margin-top: 6rem;
}
.toc-link {
  display: block;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
}
.toc-link:hover {
  color: var(--text);
}
.toc-link.is-active {
  color: var(--text);
  font-weight: 600;
  border-left-color: var(--accent);
}
.legal-divider {
  border: 0;
  border-top: 1px solid var(--borders);
  margin: 2rem 0;
  opacity: 0.5;
}
.legal-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--borders);
  vertical-align: top;
}
.legal-table th {
  font-weight: 600;
  color: var(--text);
}
@media (min-width: 768px) {
  .sticky-sidebar {
    padding-left: 1.5rem;
    border-left: 1px solid var(--borders);
  }
}

/* --- UI/UX consistency tweaks (spacing, alignment, responsive) --- */
/* Form controls: consistent touch target height */
.form-control, .form-select {
  min-height: 2.75rem;
}
/* Empty state: single, predictable rhythm between icon and title */
.empty-state .empty-state-icon-wrapper {
  margin-bottom: 0;
}
.empty-state .empty-state-icon {
  margin-bottom: 1.25rem;
}
.empty-state .empty-state-title {
  margin-bottom: 0.75rem;
}
.empty-state .empty-state-description {
  margin-bottom: 1.5rem;
}
/* Dash empty: consistent paragraph spacing */
.dash-empty p {
  margin-bottom: 1.25rem;
}
/* Responsive stacking for multi-column marketing blocks */
@media (max-width: 767.98px) {
  .feature-card {
    grid-template-columns: 1fr;
  }
  .feature-card .thumb {
    border-right: 0;
    border-bottom: 1px solid var(--borders);
    min-height: 12rem;
  }
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .process-strip {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer .inside {
    grid-template-columns: 1fr;
  }
  .footer .cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 575.98px) {
  .footer .cols {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Server error page (500.php)
   Tokens come from :root above — the page used to inline a stale copy
   (#1B3B2B) that had drifted from the real --primary.
   ═══════════════════════════════════════════════════════════════════════ */
.error-500 { font-size: 6rem; font-weight: 800; color: var(--primary); line-height: 1; letter-spacing: -0.02em; }
.ref-code { font-family: var(--font-mono); font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Reports (admin_reports.php): hide chrome when printing, keep the
   on-screen "Report period" meta out of the printed sheet.
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  body.has-sidebar .sidebar,
  .sidebar-overlay,
  .sidebar-topbar,
  .dash-section-header .report-actions,
  .report-form,
  .report-tabs { display: none !important; }
  body.has-sidebar .sidebar-main { margin-left: 0 !important; padding: 0 !important; }
  .report-meta { display: block !important; }
  .report-table { border: none !important; }
  .dash-table tfoot { border-top: 2px solid #000 !important; }
}
@media screen {
  .report-meta { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Privacy & Terms sheet (privacy-terms.php) — scoped so the generic
   h2/section margins never leak into other pages.
   ═══════════════════════════════════════════════════════════════════════ */
body.legal-page { padding: 2rem; font-family: var(--font-body); }
body.legal-page h2 { margin-top: 2rem; }
body.legal-page section { margin-bottom: 2rem; }

/* Stretched-link cards: keep interactive controls above the click overlay. */
.card-actions, .card .btn, .card form { position: relative; z-index: 2; }

/* Consistent spacing: card bodies and grids use one rhythm. */
.card-body { padding: 1rem 1.25rem; }
.grid { gap: 1.25rem; }
.dash-panel .card-body { padding: 1rem 1.25rem; }

/* Skeleton loaders for AJAX fetches. */
.skeleton { background: linear-gradient(90deg, var(--canvas-deep,#eee) 25%, var(--canvas,#f5f5f5) 50%, var(--canvas-deep,#eee) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s infinite; border-radius: 6px; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-card { height: 220px; }

/* === Visual polish batch (hover zoom / mobile tables / image shimmer) === */
/* HOVER ZOOM: keep the card zoom subtle and add keyboard parity (focus-within). */
article.card .thumb img { transition: transform .35s ease-out; }
article.card:hover .thumb img,
article.card:focus-within .thumb img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  article.card:hover .thumb img,
  article.card:focus-within .thumb img { transform: none; }
}

/* MOBILE ORDER TABLES -> stacked cards (dashboard order tables only). */
@media (max-width: 575.98px) {
  .dash-table thead { display: none; }
  .dash-table tbody, .dash-table tr, .dash-table td { display: block; width: 100%; }
  .dash-table tr.order-row {
    border: 1px solid var(--field-border);
    border-radius: .5rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    background: var(--paper);
  }
  .dash-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    text-align: right;
    border: none;
    padding: .35rem 0;
  }
  .dash-table td::before {
    content: attr(data-label);
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-soft);
    text-align: left;
    flex-shrink: 0;
  }
}

/* IMAGE SKELETON SHIMMER. */
.img-shimmer {
  background-color: var(--canvas-deep);
  background-image: linear-gradient(100deg,
    rgba(28, 68, 40, 0.06) 20%,
    rgba(28, 68, 40, 0.16) 50%,
    rgba(28, 68, 40, 0.06) 80%);
  background-size: 200% 100%;
  animation: img-shimmer-slide 1.4s linear infinite;
}
@keyframes img-shimmer-slide {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .img-shimmer { animation: none; }
}

/* === Analytics share bars === */
.empty-state-icon-wrapper .bi {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--text-soft);
}
.share-bar {
  display: block;
  width: 100%;
  max-width: 160px;
  height: 6px;
  margin-top: .35rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--borders);
  background: var(--canvas-deep);
  overflow: hidden;
}
.share-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.auth-left-logo {
  display: block;
  height: 2.6rem;
  width: auto;
  margin-bottom: 1.1rem;
}


/* === Batch 3 polish: focus rings, 320px safety === */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stat-card:focus-visible, .cart-pill:focus-visible, .sidebar-icon-btn:focus-visible, .sidebar-link:focus-visible { outline-offset: 3px; }
@media (max-width: 359.98px) {
  .auth-wrap { padding: 0; }
  .dash-panel { padding: .75rem; }
  .sidebar-topbar-title { font-size: .85rem; }
}

/* === Empty state clipboard icon (tinted circle) === */
.empty-state-icon-wrapper .bi,
.empty-state .empty-state-icon {
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--primary-tint);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .75rem;
}

/* Keep partial last rows from stretching cards awkwardly. */
.grid { justify-items: center; }
.grid .card { width: 100%; max-width: 320px; }

/* --- Landing category tiles --- */
.category-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.category-tile {
  flex: 1 1 170px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur-base) var(--ease-decel),
              transform var(--dur-base) var(--ease-decel),
              box-shadow var(--dur-base) var(--ease-decel);
}
.category-tile:hover,
.category-tile:focus-visible {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--borders));
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  color: var(--text);
}
.category-tile__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--primary-tint);
  color: var(--primary);
  font-size: 1.15rem;
}
.category-tile__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}
.category-tile__count { color: var(--text-soft); font-size: .78rem; }
@media (max-width: 575px) {
  .category-tile { flex: 1 1 45%; max-width: none; padding: .8rem; }
}

/* --- Landing market preview --- */
.market-preview .card { height: 100%; }
.market-preview .listing-name { font-size: 1.02rem; }
@media (max-width: 575px) {
  .market-preview .card .thumb { aspect-ratio: 4 / 3; }
}

/* --- Browse filter panel --- */
.browse-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--borders);
  border-radius: var(--radius-card);
}
.browse-filters__field { display: flex; flex-direction: column; gap: .25rem; }
.browse-filters__field label { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.browse-filters__field input,
.browse-filters__field select {
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text);
  padding: .45rem .6rem;
  font-size: .9rem;
}
.browse-filters__field input { width: 7.5rem; }
.browse-filters__actions { display: flex; gap: .5rem; }
@media (max-width: 575px) {
  .browse-filters { padding: .8rem; }
  .browse-filters__field { flex: 1 1 30%; }
  .browse-filters__field input { width: 100%; }
  .browse-filters__actions { width: 100%; }
  .browse-filters__actions .btn { flex: 1; }
}

/* Search field with an explicit submit affordance. */
.search-form { display: flex; gap: .5rem; }
.search-form input { flex: 1; }
.search-form__submit {
  flex: 0 0 auto;
  width: 2.75rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-size: 1rem;
}
.search-form__submit:hover { background: var(--primary-dark); }

/* Dark header needs the reverse wordmark; the green wordmark disappears. */
:root[data-theme="dark"] .brand-link .brand-logo { content: url("../branding/logo-reverse.svg"); }

/* --- Mobile bottom navigation bar --- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: var(--paper);
  border-top: 1px solid var(--borders);
  padding: 0.35rem 0;
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}
.mobile-bottom-nav__list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mobile-bottom-nav__item {
  flex: 1 1 0;
  text-align: center;
}
.mobile-bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.35rem 0.25rem;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  min-height: 44px;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--hover-speed) ease;
  position: relative;
}
.mobile-bottom-nav__link i {
  font-size: 1.25rem;
  line-height: 1;
  pointer-events: none;
}
.mobile-bottom-nav__link.is-active {
  color: var(--primary);
}
.mobile-bottom-nav__link:hover {
  color: var(--primary);
}
.mobile-bottom-nav__badge {
  position: absolute;
  top: 0.15rem;
  right: 50%;
  transform: translateX(0.6rem);
  background: var(--danger-fill);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 1.1rem;
  height: 1.1rem;
  line-height: 1.1rem;
  text-align: center;
  border-radius: var(--radius-pill);
  padding: 0 0.25rem;
}
@media (max-width: 767.98px) {
  /* Hide sidebar items that are already on the bottom nav */
  .sidebar-link.mobile-bottom-dup,
  .sidebar-section-label.mobile-hide {
    display: none !important;
  }
  /* Make drawer scrollable */
  .sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
  body { padding-bottom: 64px; }
  .mobile-cta-bar { display: none !important; }
  .sidebar-toggle, .sidebar-toggle-brand, .sidebar-close { display: none !important; }
  .sidebar {
    position: fixed;
    bottom: 64px;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    height: auto;
    max-height: 75vh;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    transform: translateY(100vh);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1040;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    -webkit-overflow-scrolling: touch;
  }
  html[data-mobile-drawer-open="1"] .sidebar {
    transform: translateY(0);
  }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1035;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  html[data-mobile-drawer-open="1"] .sidebar-overlay {
    display: block;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  html[data-mobile-drawer-open="1"] .mobile-bottom-nav__more {
    color: var(--primary);
  }
  html[data-mobile-drawer-open="1"] .mobile-bottom-nav__more i {
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  html[data-mobile-drawer-open="1"] body {
    overflow: hidden;
  }
  .sidebar::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 0.25rem;
    background: var(--borders);
    border-radius: var(--radius-pill);
    margin: 0.5rem auto 0.25rem;
  }
}