/* ============================================================================
   MOUNTAIN MADE – AMAZON / FLIPKART-STYLE E-COMMERCE DESIGN
   Professional marketplace-grade UI
   ============================================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ============================================================================
   DESIGN TOKENS
   ============================================================================ */

:root {
  /* ── Primary Green (marketplace navbar) ── */
  --primary-950: #022c22;
  --primary-900: #00281d;
  --primary-800: #065f46;
  --primary-700: #234d41;
  --primary-600: #059669;
  --primary-500: #10b981;
  --primary-400: #34d399;
  --primary-300: #6ee7b7;
  --primary-200: #a7f3d0;
  --primary-100: #d1fae5;
  --primary-50:  #ecfdf5;

  /* ── Orange / CTA Palette ── */
  --orange-700: #c45500;
  --orange-600: #e07b00;
  --orange-500: #f3a847;
  --orange-400: #febd69;
  --orange-300: #fed89b;
  --orange-100: #fff7e6;

  /* ── Yellow (Buy Now accent) ── */
  --yellow-600: #c89b00;
  --yellow-500: #e2af00;
  --yellow-400: #ffd814;
  --yellow-300: #ffe566;
  --yellow-100: #fffde6;

  /* ── Gold Accent (legacy alias) ── */
  --gold-600: #c45500;
  --gold-500: #e07b00;
  --gold-400: #f3a847;
  --gold-300: #febd69;
  --gold-100: #fff7e6;

  /* ── Semantic ── */
  --success: #067d62;
  --warning: #d97706;
  --error:   #c0392b;
  --info:    #0066c0;

  --success-bg: #eaf7f0;
  --warning-bg: #fff8e1;
  --error-bg:   #fff5f5;
  --info-bg:    #e8f2fc;

  /* ── Surfaces ── */
  --bg-primary:   #ffffff;
  --bg-secondary: #f0f2f5;
  --bg-tertiary:  #e3e6ea;

  /* ── Text ── */
  --text-primary:   #0f1111;
  --text-secondary: #565959;
  --text-tertiary:  #767676;
  --text-muted:     #a0a3a3;
  --text-inverse:   #ffffff;

  /* ── Borders ── */
  --border-primary:   #d5d9d9;
  --border-secondary: #bbbfbf;
  --border-focus:     #059669;

  /* ── Shadows ── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.07);
  --shadow-sm:    0 2px 5px rgba(15,17,17,0.13);
  --shadow-md:    0 2px 8px rgba(15,17,17,0.14), 0 1px 3px rgba(15,17,17,0.10);
  --shadow-lg:    0 4px 16px rgba(15,17,17,0.18), 0 2px 6px rgba(15,17,17,0.10);
  --shadow-xl:    0 8px 28px rgba(15,17,17,0.22), 0 4px 10px rgba(15,17,17,0.12);
  --shadow-2xl:   0 16px 48px rgba(15,17,17,0.28), 0 8px 18px rgba(15,17,17,0.14);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.10);
  --shadow-green: 0 4px 12px rgba(6,78,59,0.28);
  --shadow-green-lg: 0 8px 24px rgba(6,78,59,0.36);

  /* ── Border Radius ── */
  --radius-xs:   0.125rem;
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.625rem;
  --radius-2xl:  0.75rem;
  --radius-3xl:  1rem;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --navbar-height: 4.125rem;

  /* ── Type Scale ── */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-lg:   1rem;
  --text-xl:   1.125rem;
  --text-2xl:  1.375rem;
  --text-3xl:  1.625rem;
  --text-4xl:  2rem;
  --text-5xl:  2.5rem;
  --text-6xl:  3rem;

  /* ── Font Weights ── */
  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ── Transitions ── */
  --ease:            cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 120ms var(--ease);
  --transition-base: 200ms var(--ease);
  --transition-slow: 300ms var(--ease);

  /* ── Z-Index ── */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;

  /* ── Legacy green aliases (used inline by older code) ── */
  --primary: var(--success);
}

/* ============================================================================
   DARK MODE
   ============================================================================ */

html[data-theme="dark"],
html[data-theme="dark"] body {
  --primary-100: #065f46;
  --primary-200: #047857;
  --primary-50:  #064e3b;

  --bg-primary:   #1a1d23;
  --bg-secondary: #111318;
  --bg-tertiary:  #23272e;

  --text-primary:   #d1d5d9;
  --text-secondary: #a0a7aa;
  --text-tertiary:  #6c7073;
  --text-muted:     #4a4e51;
  --text-inverse:   #0f1111;

  --border-primary:   #2e3338;
  --border-secondary: #3d4248;

  --orange-400: #e8ab56;
  --orange-300: #d4965c;
  --yellow-400: #f0c800;

  --shadow-sm:  0 2px 5px rgba(0,0,0,0.45);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.40);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.44);
  --shadow-xl:  0 8px 28px rgba(0,0,0,0.68), 0 4px 10px rgba(0,0,0,0.50);
  --shadow-2xl: 0 16px 48px rgba(0,0,0,0.74), 0 8px 18px rgba(0,0,0,0.56);
}

/* ============================================================================
   BASE & RESET
   ============================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--navbar-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  padding-top: var(--navbar-height);
  font-family: 'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  overflow-x: hidden;
  min-width: 320px;
  width: 100%;
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Outfit', Arial, sans-serif;
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

h1 { font-size: clamp(1.75rem, 4vw,   var(--text-6xl)); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.375rem, 2.8vw, var(--text-5xl)); letter-spacing: -0.015em; }
h3 { font-size: clamp(1.15rem,  2vw,   var(--text-3xl)); letter-spacing: -0.01em; }
h4 { font-size: clamp(1rem,     1.6vw, var(--text-2xl)); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
  margin-bottom: var(--space-4);
  color: var(--white);
  line-height: var(--leading-relaxed);
}

a {
  color: var(--info);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--primary-600); text-decoration: underline; }

strong, b { font-weight: var(--font-bold); }

small {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================================================
   CONTACT PAGE
   ============================================================================ */

.contact-form { max-width: 100%; margin: 0; }
.contact-page.container { max-width: 820px; }

.contact-card {
  max-width: 820px;
  margin: 0 auto;
  height: auto;
}

.contact-card:hover {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--border-primary);
}

.contact-card .card-content { padding: var(--space-8); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.contact-actions { display: flex; justify-content: flex-end; }

@media (max-width: 767px) {
  .contact-card .card-content { padding: var(--space-5); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-actions .btn { width: 100%; }
}

/* ============================================================================
   NAVIGATION BAR — flat brand green, one gold accent, no ornament
   ============================================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: var(--z-sticky);
  background: linear-gradient(180deg, #0f4a1f 0%, #0b3817 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  transition: box-shadow var(--transition-slow), background var(--transition-slow);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Lifts off the page once you scroll past the top. Toggled in main.js. */
.navbar.is-scrolled {
  background: linear-gradient(180deg, #0c3d19 0%, #092e12 100%);
  box-shadow: 0 6px 24px -10px rgba(0,0,0,0.6);
}

/* The ornamental inset frame is gone; the flat brand green and a single gold
   accent on the active link carry the identity now. */
.navbar::before {
  display: none !important;
}

html[data-theme="dark"] .navbar {
  background: linear-gradient(180deg, #0a2a12 0%, #061c0a 100%);
  border-bottom-color: rgba(255,255,255,0.07);
}
html[data-theme="dark"] .navbar.is-scrolled {
  background: linear-gradient(180deg, #082410 0%, #051708 100%);
}

/* ── Dark mode button overrides ── */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(to bottom, #23a356 0%, #177a3e 100%);
  border-color: #0e5c2a #0b4f22 #09401b;
  color: #fff;
}
html[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(to bottom, #1e9c50 0%, #137035 100%);
  color: #fff;
}

html[data-theme="dark"] .btn-secondary {
  background: linear-gradient(to bottom, #2a2f36 0%, #1e2228 100%);
  color: #d1d5d9;
  border-color: #4a7a55 #3a6645 #2e5236;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 1px 2px rgba(0,0,0,0.30);
}
html[data-theme="dark"] .btn-secondary:hover {
  background: linear-gradient(to bottom, #323840 0%, #252b33 100%);
  color: #e2e6ea;
  border-color: #3a6645 #2e5236 #24412a;
}

html[data-theme="dark"] .btn-accent {
  background: linear-gradient(to bottom, #c9a430 0%, #9e7c1a 100%);
  color: #fff9e6;
  border-color: #7a5d0a #644d08 #503d06;
}
html[data-theme="dark"] .btn-accent:hover {
  background: linear-gradient(to bottom, #bf9a2c 0%, #937218 100%);
  color: #fff9e6;
}

html[data-theme="dark"] .btn-success {
  background: linear-gradient(to bottom, #c9a430 0%, #9e7c1a 100%);
  color: #fff9e6;
  border-color: #7a5d0a #644d08 #503d06;
}
html[data-theme="dark"] .btn-success:hover {
  background: linear-gradient(to bottom, #bf9a2c 0%, #937218 100%);
  color: #fff9e6;
}

html[data-theme="dark"] .btn-danger {
  background: linear-gradient(to bottom, #e84040 0%, #c52020 100%);
  border-color: #952020 #7a1818 #641414;
}

/* ── Dark mode global color fixes ── */
html[data-theme="dark"] .product-price {
  color: #ff8c7a;
}
html[data-theme="dark"] .price-discount {
  color: #34d399;
}

.navbar-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 62px;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.12rem;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  text-align: left;
  border: none;
  padding: 0.35rem 0;
  text-decoration: none;
}

.navbar-brand:hover {
  opacity: 0.82;
  color: #ffffff;
  text-decoration: none;
}

.navbar-brand-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: #ffffff;
}

/* Tagline below logo name. The fleurons that used to flank it are gone —
   the letter-spacing does that job without the Victorian greeting card. */
.navbar-tagline {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

/* Delivery bar — sits directly under the nav, so it matches its restraint */
.deliver-bar {
  width: 100%;
  background: #092e12;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.deliver-bar-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0.25rem var(--space-6);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.deliver-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
  text-decoration: none;
  font-family: 'Inter', Arial, sans-serif;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  background: transparent;
  transition: border-color var(--transition-fast);
}

.deliver-bar-link:hover {
  border-color: transparent;
  background: rgba(255,255,255,0.08);
  box-shadow: none;
  text-decoration: none;
}

.deliver-bar-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.deliver-bar-text { min-width: 0; display: inline-flex; flex-direction: column; }

.deliver-bar-label {
  font-size: 0.65rem;
  font-weight: var(--font-normal);
  color: rgba(255,255,255,0.58);
  letter-spacing: 0.01em;
  text-transform: none;
}

.deliver-bar-value {
  font-size: 0.8rem;
  font-weight: var(--font-bold);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(92vw, 720px);
}

.navbar-deliver-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 260px;
  line-height: 1.15;
  font-family: 'Inter', Arial, sans-serif;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  color: #ffffff;
  transition: border-color var(--transition-fast);
}

.navbar-deliver-inline:hover {
  border-color: transparent;
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.navbar-deliver-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.navbar-deliver-text { min-width: 0; display: inline-flex; flex-direction: column; }

.navbar-deliver-label {
  font-size: 0.6rem;
  font-weight: var(--font-normal);
  color: rgba(255,255,255,0.70);
  text-transform: none;
  letter-spacing: 0;
}

.navbar-deliver-value {
  font-size: 0.72rem;
  font-weight: var(--font-bold);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar-brand .logo-icon {
  font-size: var(--text-3xl);
  color: rgba(212,175,55,0.9);
}

.navbar-brand img {
  max-height: 68px;
  height: auto;
  width: auto;
  max-width: 230px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

/* Nav dropdown — always hidden, shown via hamburger on all screen sizes */
.navbar-menu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.navbar-menu li { position: relative; }

.navbar-menu a {
  display: flex;
  align-items: center;
  padding: 0.6rem var(--space-5);
  font-size: 0.9rem;
  font-weight: var(--font-medium);
  color: #ffffff;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  width: 100%;
  justify-content: flex-start;
}

.navbar-menu a:hover,
.navbar-menu a.active {
  border-color: transparent;
  background: rgba(255,255,255,0.09);
  color: #ffffff;
  text-decoration: none;
}

/* Dropdown when active — works on ALL screen sizes */
.navbar-menu.mobile-active {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow-y: auto;
  background-color: #0b3817;
  padding: 0 1rem 1rem;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.55);
  z-index: 9999;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* When menu is open — hide everything behind the menu */
.navbar.menu-open .navbar-brand,
.navbar.menu-open .navbar-actions,
.navbar.menu-open .navbar-container::before {
  display: none !important;
}
.navbar.menu-open::before {
  display: none !important;
}
.navbar.menu-open .mobile-menu-toggle {
  position: relative;
  z-index: 10000;
}

.navbar-menu.mobile-active li { width: 100%; }

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.navbar-search-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
}

.navbar-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
}

.navbar-search-toggle:hover {
  background: rgba(255,255,255,0.16);
}

.navbar-search-panel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  display: none;
  width: min(360px, calc(100vw - 6rem));
  background: rgba(10, 30, 16, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0.4rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  z-index: 2000;
  align-items: center;
}

.navbar-search-panel.is-open {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

/* Mobile: place panel below the navbar so it doesn't collide with mobile layout */
@media (max-width: 900px) {
  .navbar-search-panel {
    top: calc(100% + 0.5rem);
    transform: none;
    right: 0;
    width: calc(100vw - 2rem);
    border-radius: 16px;
    padding: 0.55rem;
  }
  .navbar-search-container { margin-right: 0; }
}

.navbar-search-input {
  flex: 1;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  outline: none;
  font-size: 0.92rem;
}

.navbar-search-input::placeholder {
  color: rgba(255,255,255,0.72);
}

.navbar-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--primary-600);
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
}

.navbar-search-submit:hover {
  background: var(--primary-500);
}

.navbar-search-input::placeholder {
  color: rgba(255,255,255,0.74);
}

.navbar-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  border: none;
  border-radius: 999px;
  background: var(--primary-600);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.navbar-search-btn:hover {
  background: var(--primary-500);
  transform: translateY(-1px);
}

#auth-buttons {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

/* The page buttons are built for light backgrounds — a green primary on the
   green bar has almost no contrast — so the header gets its own pair. */
.navbar #auth-buttons .btn {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-weight: var(--font-semibold, 600);
  box-shadow: none;
  text-shadow: none;
}

.navbar #auth-buttons .btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
}

.navbar #auth-buttons .btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.45);
  color: #ffffff;
}

.navbar #auth-buttons .btn-primary {
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #0b3817;
}

.navbar #auth-buttons .btn-primary:hover {
  background: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.88);
  color: #0b3817;
}

#user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
}

#user-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: #ffffff;
  white-space: nowrap;
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #ffffff;
  font-size: var(--text-xl);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  flex-shrink: 0;
}

.icon-button:hover {
  border-color: transparent;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

#account-toggle { overflow: hidden; }

#account-toggle.has-profile-photo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--primary-600);
  border: 2px solid rgba(255,255,255,0.35);
  color: transparent;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--orange-500);
  color: white;
  font-size: 0.62rem;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  box-shadow: 0 1px 4px rgba(0,0,0,0.32);
  border: none;
}

/* Hamburger — always visible on all screen sizes in the new ornate design */
.mobile-menu-toggle {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.07);
  color: #ffffff;
  font-size: 1.35rem;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  position: relative;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  line-height: 1;
  overflow: visible;
}

.mobile-menu-toggle i,
.mobile-menu-toggle .fa-bars,
.mobile-menu-toggle .fa-times {
  display: inline-block !important;
  font-size: 1.3rem;
  color: #ffffff;
  pointer-events: none;
  line-height: 1;
}

/* Fallback hamburger icon if Font Awesome fails to load */
.mobile-menu-toggle::after {
  content: '☰';
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.4rem;
  color: #ffffff;
  position: absolute;
  z-index: 0;
}
.mobile-menu-toggle i {
  position: relative;
  z-index: 1;
}

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

/* The hamburger is the ONLY way to reach navigation below 768px, since
   .navbar-menu is display:none until .mobile-active is toggled on. */
@media (max-width: 767px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* ============================================================================
   DESKTOP NAVBAR LAYOUT — logo left, links inline in bar, no hamburger (≥768px)
   ============================================================================ */
@media (min-width: 768px) {
  /* Switch container to flex so brand+menu+actions flow inline */
  .navbar-container {
    display: flex;
    grid-template-columns: unset;
    gap: 0;
  }

  /* Hide hamburger on desktop */
  .mobile-menu-toggle {
    display: none !important;
  }

  /* Logo left, wordmark stacked over its tagline as one lockup */
  .navbar-brand {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.14rem;
    padding: 0.3rem 1.5rem 0.3rem 0;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.22rem;
  }

  .navbar-brand img { max-height: 44px; }
  .navbar-brand .logo-icon { font-size: 1.6rem; }
  .navbar-tagline { font-size: 0.52rem; letter-spacing: 0.24em; }

  /* Nav links — horizontal, inline, fill the center */
  .navbar-menu {
    display: flex !important;
    flex-direction: row;
    flex: 1;
    list-style: none;
    margin: 0;
    position: static !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    max-height: none !important;
    top: auto !important;
    align-items: stretch;
    justify-content: center;
    overflow: visible;
    z-index: 2;
  }

  .navbar-menu li {
    width: auto;
    display: flex;
    align-items: stretch;
  }

  .navbar-menu a {
    padding: 0 var(--space-4);
    font-size: 0.86rem;
    font-weight: var(--font-medium);
    letter-spacing: 0.01em;
    color: rgba(255,255,255,0.86);
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border-radius: 0;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: none;
    border-right: none;
    background: transparent;
  }

  .navbar-menu a:hover {
    border-bottom-color: rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.07);
    color: #ffffff;
  }

  .navbar-menu a.active {
    border-bottom-color: rgba(212,175,55,0.9);
    background: transparent;
    color: #ffffff;
  }

  /* Actions at far right */
  .navbar-actions {
    flex: 0 0 auto;
    padding-right: var(--space-3);
    align-items: center;
    display: flex;
    min-height: 62px;
    flex-shrink: 0;
  }
}

/* ============================================================================
   BUTTONS — Amazon/Flipkart-style CTAs
   ============================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.55rem var(--space-5);
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-none);
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.btn:hover { opacity: 0.92; }
.btn:active { opacity: 0.80; transform: scale(0.99); }

.btn:disabled {
  opacity: 0.44;
  cursor: not-allowed;
  transform: none !important;
}

.btn:focus-visible {
  outline: 3px solid var(--primary-400);
  outline-offset: 2px;
}

/* Add to Cart — Deep Forest Green matching navbar */
.btn-primary {
  background: linear-gradient(to bottom, #1e7a3a 0%, #145524 100%);
  color: #fff;
  border-color: #0e4419 #0b3815 #093011;
  box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 3px rgba(0,0,0,0.30);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

.btn-primary:hover {
  background: linear-gradient(to bottom, #228040 0%, #175e29 100%);
  border-color: #0b3815 #093011 #07260d;
  color: #fff;
}

/* Secondary — refined pearl with deep green tint border */
.btn-secondary {
  background: linear-gradient(to bottom, #f5f7f5 0%, #e3e8e4 100%);
  color: #1a3d20;
  border-color: #5a8a65 #4a7a55 #3a6645;
  box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, 0 1px 2px rgba(0,0,0,0.14);
}

.btn-secondary:hover {
  background: linear-gradient(to bottom, #e6ebe6 0%, #cdd6ce 100%);
  border-color: #4a7a55 #3a6645 #2e5236;
  color: #122b18;
}

/* Accent — Gold (matching navbar ornaments) */
.btn-accent {
  background: linear-gradient(to bottom, #d4af37 0%, #b08a20 100%);
  color: #1a1200;
  border-color: #9a6e10 #84600d #6e4f08;
  box-shadow: 0 1px 0 rgba(255,255,255,0.30) inset, 0 1px 3px rgba(0,0,0,0.28);
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.btn-accent:hover {
  background: linear-gradient(to bottom, #c9a430 0%, #a07e1c 100%);
  border-color: #84600d #6e4f08 #5a3f05;
  color: #120e00;
}

/* Danger */
.btn-danger {
  background: linear-gradient(to bottom, #f5222d 0%, #dc1c26 100%);
  color: #fff;
  border-color: #b0171f #a01219 #8e0d14;
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 1px 2px rgba(0,0,0,0.24);
}

.btn-danger:hover {
  background: linear-gradient(to bottom, #e01d27 0%, #c91520 100%);
  color: #fff;
}

/* Success / Buy Now — premium gold, matching navbar ornament gold */
.btn-success {
  background: linear-gradient(to bottom, #d4af37 0%, #a8851a 100%);
  color: #1a1200;
  border-color: #8c6a10 #76580d #60440a;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 1px 3px rgba(0,0,0,0.26);
  text-shadow: 0 1px 0 rgba(255,255,255,0.12);
}

.btn-success:hover {
  background: linear-gradient(to bottom, #c8a430 0%, #9c7a16 100%);
  color: #120e00;
}

/* Info */
.btn-info {
  background: linear-gradient(to bottom, #3498db 0%, #2980b9 100%);
  color: #fff;
  border-color: #1a6a9e #1c5e8a #155175;
}

.btn-info:hover {
  background: linear-gradient(to bottom, #2b8fd4 0%, #2475ae 100%);
  color: #fff;
}

.btn-sm {
  padding: 0.32rem var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: 0.75rem var(--space-8);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* Global back button */
.page-back-button {
  position: fixed;
  top: 68px;
  left: 14px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: 'Inter', Arial, sans-serif;
}

.page-back-button i { font-size: 0.82rem; }

.page-back-button:hover {
  border-color: var(--border-secondary);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: var(--text-primary);
}

.section-back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: 'Inter', Arial, sans-serif;
}

.section-back-button:hover {
  border-color: var(--border-secondary);
  background: var(--bg-tertiary);
  text-decoration: none;
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .page-back-button {
    top: 62px;
    left: 10px;
    font-size: 0.78rem;
    padding: 0.28rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    justify-content: center;
  }

  .page-back-button span { display: none; }
}

/* ============================================================================
   HERO SECTION — marketplace banner style
   ============================================================================ */

.hero {
  position: relative;
  background: linear-gradient(100deg, #022c22 0%, #064e3b 52%, #047857 100%);
  color: white;
  padding: var(--space-20) var(--space-6);
  text-align: center;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(52,211,153,0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(16,185,129,0.10) 0%, transparent 50%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to top, var(--bg-secondary), transparent);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

.hero h1 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--text-6xl);
  font-weight: 800;
  color: white;
  margin-bottom: var(--space-5);
  letter-spacing: -0.025em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  line-height: 1.1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.28);
}

.hero p {
  font-size: var(--text-xl);
  color: rgba(255,255,255,0.88);
  margin-bottom: var(--space-8);
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ============================================================================
   LAYOUT & CONTAINERS
   ============================================================================ */

.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
  width: 100%;
  box-sizing: border-box;
}

.section-title {
  text-align: left;
  margin-bottom: var(--space-5);
  max-width: 100%;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--primary-500);
  display: inline-block;
}

.section-title h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: 0;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.section-title p {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.section-title::after { display: none; }

/* Grid System */
.grid   { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================================
   CARDS — Amazon/Flipkart product card style
   ============================================================================ */

.card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  /* Barely-there at rest so a grid of cards reads as content rather than as a
     field of boxes; the weight arrives on hover instead. */
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 2px 8px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid var(--border-primary);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
  border-color: var(--border-secondary);
  transform: translateY(-3px);
}

/* Nobody wants the grid shifting under their finger mid-scroll. */
@media (hover: none) {
  .card:hover {
    transform: none;
  }
}

.card-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--bg-secondary);
  transition: transform var(--transition-slow);
}

.product-card .card-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 180px;
  aspect-ratio: var(--product-card-image-ratio, auto);
  max-height: 280px;
  object-fit: contain;
  object-position: center;
  background: var(--bg-secondary);
  display: block;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 220ms ease, transform var(--transition-slow);
}

.product-card .card-image.loaded {
  opacity: 1;
}

.category-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.card:hover .card-image { transform: scale(1.04); }

.card-content {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  line-height: 1.4;
}

.card-description {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4) var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Product Cards */
.product-card { position: relative; will-change: auto; }

.product-card .card-title {
  font-size: var(--text-base, 0.95rem);
  font-weight: var(--font-semibold, 600);
  margin-bottom: var(--space-1);
  /* Two lines, so a long name cannot push the price and buttons out of line
     with the cards beside it. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .card-description { margin-bottom: var(--space-2); }
.product-card .card-footer .btn { min-height: 36px; }

/* The rating line. Used by every product grid, so the markup no longer carries
   its own inline styles. */
.card-rating-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.15rem 0 0.4rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.card-rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  line-height: 1;
}

.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Below 767px, mobile-enhancements.css gives every .card-footer a grey
   background and a border-top. On a product card that reads as a rule drawn
   across the card just above the buttons, with the action row sitting on a
   separate grey tray. The buttons belong to the card, so: no line, no tray,
   just space above them. (0,2,0) beats that rule's (0,1,0) without !important. */
.product-card .card-footer,
.product-card .product-card-footer {
  background: transparent;
  border-top: none;
}

.product-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  /* Separates the buttons from the price above them now that the rule is gone. */
  margin-top: var(--space-2);
}

.product-action-row .btn {
  flex: 1;
  min-width: 0;
  width: auto;
}

/* Two buttons side by side in a half-width card is tight on a phone, and `.btn`
   is `white-space: nowrap` with `overflow: hidden` — so a label that does not
   fit gets cut off mid-word rather than wrapping. Drop the icons and tighten
   the padding so "Add to Cart" fits whole. */
@media (max-width: 575px) {
  .product-action-row {
    gap: var(--space-1);
  }

  .product-action-row .btn {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    font-size: 0.72rem;
    gap: 0.2rem;
  }

  .product-action-row .btn i {
    display: none;
  }
}

.product-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 10;
  padding: 0.22rem 0.55rem;
  background: var(--error);
  color: white;
  font-size: 0.62rem;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.product-price {
  font-family: 'Inter', Arial, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, var(--text-2xl));
  font-weight: 700;
  color: #b12704;
  line-height: var(--leading-none);
}

.product-price small {
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  color: var(--text-tertiary);
}

.price-original {
  text-decoration: line-through;
  color: var(--text-muted);
  font-size: 0.85em;
  font-weight: var(--font-normal);
  margin-right: 5px;
}

.price-discount {
  color: #067d62;
  font-weight: var(--font-bold);
  font-size: 0.85em;
}

.stock-info {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.stock-info.low-stock  { color: var(--orange-600); font-weight: var(--font-medium); }
.stock-info.out-of-stock { color: var(--error); font-weight: var(--font-semibold); }

/* ============================================================================
   FORMS — clean marketplace forms
   ============================================================================ */

.form-group { margin-bottom: var(--space-4); }

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.56rem var(--space-3);
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07) inset;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: #059669; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 3px rgba(5,150,105,0.18), 0 1px 2px rgba(0,0,0,0.07) inset;
  background: var(--bg-primary);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 2px rgba(192,57,43,0.14);
}

.field-error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--error);
  font-weight: var(--font-medium);
}

.form-textarea { min-height: 120px; resize: vertical; }

.form-error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--error);
  font-weight: var(--font-medium);
}

.form-helper {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* ============================================================================
   ALERTS
   ============================================================================ */

.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  border: 1px solid;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.alert-success { color: #0a4d38; background-color: #daf0e6; border-color: #a3d6be; }
.alert-error   { color: #891a1a; background-color: #fde8e8; border-color: #f0b0b0; }
.alert-warning { color: #7a4500; background-color: #fef5e0; border-color: #f5cc80; }
.alert-info    { color: #0c3964; background-color: #e0ecfc; border-color: #90bbee; }

/* ============================================================================
   LOADING
   ============================================================================ */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  min-height: 180px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-primary);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================================
   MODAL — clean overlay
   ============================================================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background-color: rgba(10,14,26,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn var(--transition-base);
}

.modal {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  background: var(--bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  animation: slideUp var(--transition-slow);
  border: 1px solid var(--border-primary);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}

.modal-title {
  font-family: 'Inter', Arial, sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
}

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--text-base);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background: var(--error-bg);
  border-color: #f0b0b0;
  color: var(--error);
}

.modal-body { padding: var(--space-6); overflow-y: auto; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-primary);
  background: var(--bg-secondary);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   FOOTER — Amazon-style multi-column dark footer
   ============================================================================ */

.footer {
  background: #0d1f17;
  color: rgba(255,255,255,0.82);
  padding: 0;
  margin-top: var(--space-12);
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-600), var(--primary-400), var(--primary-600));
}

/* Trust badges row */
.footer-trust-row {
  background: #1a3828;
  padding: var(--space-5) var(--space-8);
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,0.90);
  border: none;
  border-radius: 0;
  background: transparent;
  transition: color var(--transition-fast);
}

.trust-badge:hover { color: var(--primary-300); background: transparent; border-color: transparent; }
.trust-badge i { color: var(--primary-400); font-size: var(--text-lg); }

.footer-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-8);
}

.footer-section h3 {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 0.825rem;
  font-weight: var(--font-bold);
  color: #ffffff;
  margin-bottom: var(--space-4);
  text-transform: none;
  letter-spacing: 0;
}

.footer-section ul { list-style: none; }
.footer-section li { margin-bottom: var(--space-2); }

/* Ensure footer description text (left column) is visible on dark background */
.footer-section p {
  color: #ffffff;
}

.footer-section a {
  color: rgba(255,255,255,0.70);
  font-size: 0.78rem;
  font-weight: var(--font-normal);
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.footer-section a:hover {
  color: var(--primary-300);
  text-decoration: underline;
}

.footer-bottom {
  background: #064e3b;
  max-width: 100%;
  padding: var(--space-5) var(--space-8);
  margin: 0;
  border-top: none;
  text-align: center;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
}

.footer-bottom p {
  margin: 0;
  color: rgba(255,255,255,0.65);
}

.footer-trust-note {
  margin: 0 0 0.7rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.70);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.footer-policy-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1rem;
  margin-top: 0.7rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.16);
  font-size: 0.85rem;
}

.footer-policy-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  transition: color var(--transition-fast);
  display: inline;
}

.footer-policy-links a:hover {
  color: rgba(255,255,255,0.95);
  text-decoration: none;
}

/* ── Mobile footer ──────────────────────────────────────────────────────
   Same markup as the desktop footer (it is repeated on every page, so the
   phone layout has to come entirely from CSS). Three things carry it: the
   trust row becomes a 2x2 of tiles instead of four stacked lines, Contact
   spans the full width so the link grid is not left ragged, and the seven
   policy links read as one separated sentence rather than a block of
   underlined text. */
@media (max-width: 767px) {
  .footer {
    /* Rounded lip so the footer reads as its own panel. The gap above it is
       deliberately left alone: mobile-enhancements.css closes it on purpose. */
    border-radius: 20px 20px 0 0;
  }

  .footer::before {
    border-radius: 20px 20px 0 0;
  }

  /* ── Trust row: 2x2 tiles ── */
  .footer-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 1rem 1rem 0.9rem;
  }

  .trust-badge {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    font-size: 0.76rem;
    line-height: 1.25;
  }

  .trust-badge i {
    font-size: 1.05rem;
  }

  /* ── Link columns ── */
  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
    padding: 1.25rem 1rem 1rem;
  }

  /* Brand blurb reads as an intro, full width above the columns. */
  .footer-section:first-child {
    grid-column: 1 / -1;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

  .footer-section:first-child p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
    max-width: 34ch;
  }

  /* Three groups in two columns leaves Contact stranded in a half-width
     cell, so it takes the full row and lays its details out across it. */
  .footer-section:last-child {
    grid-column: 1 / -1;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  .footer-section:last-child ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
  }

  /* `.footer .` and !important only because mobile-enhancements.css sets these
     with !important from a rule that escaped its media query. */
  .footer .footer-section h3 {
    font-size: 0.72rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 0.55rem 0 !important;
  }

  .footer .footer-section:first-child h3 {
    font-size: 1.05rem !important;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    margin-bottom: 0.3rem !important;
  }

  .footer .footer-section li {
    margin-bottom: 0.45rem !important;
  }

  .footer .footer-section:last-child li {
    margin-bottom: 0 !important;
  }

  .footer-section a,
  .footer-section li {
    font-size: 0.86rem;
  }

  .footer-section a {
    color: rgba(255, 255, 255, 0.82);
  }

  /* Long emails wrap instead of overflowing their column. */
  .footer-section li span {
    overflow-wrap: anywhere;
  }

  /* ── Bottom bar ── */
  .footer .footer-bottom {
    padding: 1rem !important;
  }

  .footer-payments {
    gap: 0.35rem;
    margin-bottom: 0.75rem;
  }

  .footer-payments-label {
    width: 100%;
    text-align: center;
    margin: 0 0 0.15rem 0;
  }

  .footer-bottom p {
    font-size: 0.8rem;
  }

  /* Seven links stacked as underlined text is a wall. Dot separators and no
     underline let them read as one wrapped line. */
  .footer-policy-links {
    gap: 0.3rem 0;
    font-size: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
  }

  .footer-policy-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.62);
    padding: 0 0.55rem;
    position: relative;
  }

  .footer-policy-links a:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 0.75em;
    background: rgba(255, 255, 255, 0.22);
  }
}

/* ══════════════════════════════════════════
   Account dashboard
   Shared shell for /account and its sections.
   ══════════════════════════════════════════ */
.account-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-12);
}

/* ── Sidebar ─────────────────────────────── */
.account-sidebar {
  position: sticky;
  top: 96px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--space-2);
  overflow: hidden;
}

.account-sidebar-header {
  padding: var(--space-4) var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-primary);
}

.account-sidebar-name {
  font-weight: var(--font-bold, 700);
  color: var(--text-primary);
  font-size: 0.97rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-sidebar-email {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-nav a,
.account-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.75rem;
  border: 0;
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.91rem;
  font-family: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.account-nav a i,
.account-nav button i {
  width: 17px;
  font-size: 0.95rem;
  text-align: center;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: color 140ms ease;
}

.account-nav a:hover,
.account-nav button:hover {
  background: var(--bg-secondary);
}

.account-nav a:focus-visible,
.account-nav button:focus-visible {
  outline: 2px solid var(--border-focus, var(--primary-600));
  outline-offset: -2px;
}

/* Current section: tinted row with an accent bar on the leading edge */
.account-nav a.is-current {
  background: var(--primary-50);
  color: var(--primary-800);
  font-weight: 600;
}

.account-nav a.is-current i {
  color: var(--primary-600);
}

.account-nav a.is-current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--primary-600);
}

.account-nav .account-nav-danger { color: var(--error); }
.account-nav .account-nav-danger i { color: var(--error); }
.account-nav .account-nav-danger:hover { background: var(--error-bg); }

/* ── Content ─────────────────────────────── */
.account-main { min-width: 0; }

.account-panel {
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6) var(--space-6) var(--space-8);
}

.account-panel > h1 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.3rem;
  color: var(--text-primary);
}

.account-panel .account-panel-sub {
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.55;
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-primary);
}

/* ── Forms inside the account area ───────── */
.account-panel .form-group { margin-bottom: var(--space-5); }

.account-panel .form-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.account-panel .form-input {
  width: 100%;
  padding: 0.62rem 0.75rem;
  font-size: 0.94rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.account-panel .form-input:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.account-panel .form-input[readonly] {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  cursor: default;
}

.account-panel .form-help {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
  line-height: 1.5;
}

/* ── Shared list card used by orders & addresses ── */
.account-card {
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  padding: var(--space-5);
  margin-bottom: var(--space-3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.account-card:last-child { margin-bottom: 0; }

.account-card:hover {
  border-color: var(--border-secondary, var(--primary-200));
  box-shadow: var(--shadow-sm);
}

.account-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.account-card-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-primary);
}

.account-card-meta {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-top: 0.25rem;
  line-height: 1.6;
}

.account-card-amount {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.account-card-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-primary);
}

/* ── Status pill ─────────────────────────── */
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: capitalize;
  white-space: nowrap;
}

.pill-pending      { background: var(--warning-bg); color: var(--warning); }
.pill-confirmed,
.pill-processing   { background: var(--info-bg);    color: var(--info); }
.pill-shipped,
.pill-out_for_delivery { background: var(--info-bg); color: var(--info); }
.pill-delivered    { background: var(--success-bg); color: var(--success); }
.pill-cancelled,
.pill-not_received { background: var(--error-bg);   color: var(--error); }
.pill-default      { background: var(--success-bg); color: var(--success); }
.pill-muted        { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-primary); }

/* ── Empty state ─────────────────────────── */
.account-empty {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--text-secondary);
  border: 1px dashed var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}

.account-empty i {
  font-size: 2rem;
  opacity: 0.4;
  display: block;
  margin-bottom: var(--space-3);
}

.account-empty-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

/* ── Inline status line ──────────────────── */
.account-status {
  font-size: 0.88rem;
  margin-top: var(--space-4);
  min-height: 1.2em;
}

.account-status.is-error { color: var(--error); }
.account-status.is-ok    { color: var(--success); }

/* ── Dark theme ──────────────────────────── */
html[data-theme="dark"] .account-nav a.is-current {
  background: rgba(16, 185, 129, 0.14);
  color: var(--primary-300);
}

html[data-theme="dark"] .account-nav a.is-current i {
  color: var(--primary-400);
}

html[data-theme="dark"] .account-panel .form-input:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

/* ── Responsive ──────────────────────────── */
@media (max-width: 960px) {
  .account-shell {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-10);
  }

  .account-sidebar {
    position: static;
    padding: var(--space-2);
  }

  .account-sidebar-header { display: none; }

  .account-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.3rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .account-nav::-webkit-scrollbar { display: none; }

  .account-nav a,
  .account-nav button {
    width: auto;
    white-space: nowrap;
    padding: 0.55rem 0.8rem;
    font-size: 0.87rem;
  }

  .account-nav a.is-current::before { display: none; }

  .account-nav .account-nav-logout-desktop { display: none; }

  .account-panel { padding: var(--space-5); }
}

@media (max-width: 575px) {
  .account-shell { padding: var(--space-4) var(--space-3) var(--space-10); }
  .account-panel { padding: var(--space-4); border-radius: var(--radius-lg); }
  .account-panel > h1 { font-size: 1.25rem; }
  .account-card { padding: var(--space-4); }
  .account-card-amount { font-size: 1rem; }
}

/* ══════════════════════════════════════════
   Admin — outbound message channel picker
   ══════════════════════════════════════════ */
.msg-channel {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  flex: 1 1 190px;
  min-width: 180px;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.msg-channel:hover { border-color: var(--primary-300); }

.msg-channel input[type="checkbox"] {
  margin-top: 0.15rem;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  accent-color: var(--primary-600);
}

.msg-channel-icon {
  width: 26px;
  text-align: center;
  font-size: 1.05rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.msg-channel-body { display: flex; flex-direction: column; min-width: 0; }

.msg-channel-name {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text-primary);
  line-height: 1.25;
}

.msg-channel-note {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Ready: tinted and clearly usable */
.msg-channel.is-ready {
  border-color: var(--primary-200);
  background: var(--primary-50);
}
.msg-channel.is-ready .msg-channel-icon { color: var(--primary-600); }
.msg-channel.is-ready .msg-channel-note { color: var(--success); }

/* Not configured: visibly unavailable rather than silently doing nothing */
.msg-channel.is-unavailable {
  opacity: 0.72;
  cursor: not-allowed;
  background: var(--bg-secondary);
  border-style: dashed;
}
.msg-channel.is-unavailable .msg-channel-note { color: var(--warning); }
.msg-channel.is-unavailable input { cursor: not-allowed; }

html[data-theme="dark"] .msg-channel.is-ready {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.30);
}

/* Accepted payment methods — a standard retail trust signal */
.footer-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem 0;
}

.footer-payments-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.4px;
  margin-right: 0.15rem;
}

.footer-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 26px;
  padding: 0 0.5rem;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.88);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
}

.footer-pay-badge i {
  font-size: 1.15rem;
}

@media (max-width: 575px) {
  .footer-payments {
    gap: 0.35rem;
  }

  .footer-pay-badge {
    min-width: 38px;
    height: 24px;
    font-size: 0.66rem;
  }
}

@media (max-width: 768px) {
  .container { padding: var(--space-5) var(--space-4); }
  .section-title { margin-bottom: var(--space-5); }
  
  .footer-bottom {
    padding: var(--space-4) var(--space-4);
    font-size: 0.8rem;
  }
  
  .footer-trust-note {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  
  .footer-policy-links {
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    font-size: 0.75rem;
  }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.hidden        { display: none !important; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }

/* Prevent auth UI blink before auth check */
#auth-buttons { visibility: hidden; }
body.auth-ready #auth-buttons { visibility: visible; }

.flex-row     { flex-direction: row; }
.flex-column  { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-center  { display: flex; align-items: center; justify-content: center; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.m-0  { margin: 0; }
.mt-1 { margin-top: var(--space-4); }
.mt-2 { margin-top: var(--space-6); }
.mt-3 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-4); }
.mb-2 { margin-bottom: var(--space-6); }
.mb-3 { margin-bottom: var(--space-8); }

/* ============================================================================
   RESPONSIVE — BREAKPOINTS
   ============================================================================ */

/* ── ≤1199px ── */
@media (max-width: 1199px) {
  .container { padding: var(--space-5) var(--space-5); }
  .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
}

/* ── ≤991px ── */
@media (max-width: 991px) {
  :root {
    --text-6xl: 2.5rem;
    --text-5xl: 2rem;
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
  }

  .navbar-container { padding: 0 var(--space-4); }
  .navbar-brand { font-size: var(--text-lg); }
  .navbar-deliver-inline { max-width: 200px; }
  .deliver-bar-container { padding: 0.2rem var(--space-4); }
  .deliver-bar-value { max-width: min(92vw, 480px); }
  .hero { padding: var(--space-16) var(--space-5); }
  .hero h1 { font-size: var(--text-5xl); }
  .hero p  { font-size: var(--text-lg); }
  .container { padding: var(--space-5) var(--space-4); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .section-title h2 { font-size: var(--text-3xl); }
  .footer-content { gap: var(--space-6); padding: var(--space-8) var(--space-5); }
  .footer-trust-row { padding: var(--space-4) var(--space-5); }
}

/* ── ≤767px ── */
@media (max-width: 767px) {
  :root {
    --text-6xl: 1.875rem;
    --text-5xl: 1.625rem;
    --text-4xl: 1.375rem;
    --text-3xl: 1.25rem;
  }

  .navbar-container {
    min-height: 58px;
    padding: 0 var(--space-3);
    gap: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  /* Center logo absolutely so it sits exactly in the viewport centre */
  .navbar-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.88rem;
    /* Prevent overlap with hamburger / actions */
    max-width: calc(100% - 130px);
    pointer-events: auto;
    z-index: 3;
  }

  /* Push actions to the right so they don't collapse after brand is removed from flow */
  .navbar-actions {
    margin-left: auto;
  }
  .navbar-search {
    display: none;
  }
  .navbar-tagline { font-size: 0.5rem; letter-spacing: 0.15em; }
  .navbar-brand img { max-height: 52px; }
  .navbar-deliver-inline { max-width: 150px; padding: 0.12rem 0.2rem; gap: 0.25rem; }
  .navbar-deliver-icon { width: 13px; height: 13px; font-size: 0.7rem; }
  .navbar-deliver-label { font-size: 0.48rem; }
  .navbar-deliver-value { font-size: 0.6rem; }
  .deliver-bar-container { padding: 0.2rem var(--space-3); }
  .deliver-bar-link { width: 100%; padding: 0.25rem 0.45rem; }
  .deliver-bar-icon { width: 15px; height: 15px; font-size: 0.82rem; }
  .deliver-bar-label { font-size: 0.6rem; }
  .deliver-bar-value { font-size: 0.78rem; max-width: 100%; }
  .navbar-brand .logo-icon { font-size: 1.4rem; }
  .mobile-menu-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 1.3rem; }

  .navbar-actions { gap: var(--space-1); }
  .navbar-search { padding: 0.2rem; }
  .navbar-search-input { width: 170px; font-size: 0.82rem; padding: 0.25rem 0.5rem; min-height: 30px; }
  .navbar-search-btn { min-width: 32px; min-height: 32px; }
  #auth-buttons { gap: var(--space-1); flex-wrap: nowrap; }
  #auth-buttons .btn { padding: 0.32rem 0.55rem; font-size: 0.65rem; white-space: nowrap; }
  #user-menu { gap: var(--space-1); }
  #user-name { display: none; }

  /* Mobile menu covers navbar */
  .navbar-menu.mobile-active {
    top: 0;
  }

  .hero { padding: var(--space-10) var(--space-3); }
  .hero h1 { font-size: 1.7rem; margin-bottom: var(--space-3); line-height: 1.18; }
  .hero p  { font-size: 0.88rem; margin-bottom: var(--space-4); line-height: 1.6; padding: 0 var(--space-2); }
  .hero .flex { gap: var(--space-2); }
  .hero .btn-lg { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); width: 100%; max-width: 100%; }

  .container { padding: var(--space-4) var(--space-3); }
  .section-title { margin-bottom: var(--space-4); }
  .section-title h2 { font-size: 1.375rem; }
  .section-title p  { font-size: 0.82rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--space-3); }
  .card-image { height: 130px; }
  .card-footer { padding: 0 var(--space-3) var(--space-3); }
  .product-price { font-size: var(--text-xl); }

  .footer-content { gap: var(--space-5); padding: var(--space-6) var(--space-4); }
  .footer-trust-row { padding: var(--space-4) var(--space-4); gap: var(--space-2); }

  .modal { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .modal-overlay { padding: 0; }
}

/* ── ≤575px ── */
@media (max-width: 575px) {
  .btn { width: 100%; justify-content: center; }
  .btn-lg { padding: var(--space-3) var(--space-4); font-size: 0.875rem; }

  .hero { padding: var(--space-8) var(--space-2); }
  .hero h1 { font-size: 1.45rem; margin-bottom: var(--space-2); padding: 0; }
  .hero p  { font-size: 0.82rem; margin-bottom: var(--space-4); padding: 0; }
  .hero .flex { flex-direction: column; gap: var(--space-2); width: 100%; }
  .hero .btn  { width: 100%; max-width: 100%; }

  #auth-buttons { flex-wrap: nowrap; gap: 0.2rem; }
  #auth-buttons .btn { font-size: 0.6rem; padding: 0.28rem 0.42rem; }

  .container { padding: var(--space-4) var(--space-2); }
  .section-title h2 { font-size: 1.25rem; }
  .section-title p  { font-size: 0.8rem; }

  .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }

  .grid-3 .card { max-width: 110px; margin: 0 auto; border-radius: var(--radius-md); }
  .grid-3 .card-image { height: 90px; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .grid-3 .category-image { height: 90px; aspect-ratio: 1 / 1; }
  .grid-3 .card-title { font-size: 0.54rem; margin-bottom: 0; line-height: 1.1; }
  .grid-3 .card-content { padding: 0.22rem; text-align: center; }
  .grid-3 .card-description { display: none; }
  .grid-3 .card-footer { display: none; }

  #categories #categories-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
  #categories #categories-grid .card { max-width: 110px; margin: 0 auto; border-radius: var(--radius-md); }
  #categories #categories-grid .category-image { height: 90px; }

  .grid-2 .card-image,
  .grid-4 .card-image { height: 80px; }

  .grid-2 .card-title,
  .grid-4 .card-title { font-size: 0.82rem; margin-bottom: var(--space-1); }

  .grid-2 .card-content,
  .grid-4 .card-content { padding: var(--space-2); }

  .card-description { font-size: 0.68rem; margin-bottom: var(--space-1); -webkit-line-clamp: 1; line-clamp: 1; }
  .card-footer { padding: 0 var(--space-2) var(--space-2); }

  @media (min-width: 992px) {
    #categories #categories-grid { gap: var(--space-3); }
    #categories #categories-grid .card { max-width: 175px; margin: 0 auto; border-radius: var(--radius-lg); }
    #categories #categories-grid .category-image { max-height: 85px; }
    #categories #categories-grid .card-content { padding: 0.35rem 0.45rem 0.55rem; }
    #categories #categories-grid .card-title { font-size: 0.78rem; margin-bottom: 0.12rem; }
    #categories #categories-grid .card-description { display: none; }
  }

  .card-footer .btn { width: 100%; padding: 0.28rem 0.45rem; font-size: 0.72rem; }

  .product-action-row { gap: 0.2rem; }
  .product-action-row .btn {
    width: auto !important;
    flex: 1;
    min-width: 0;
    padding: 0.28rem 0.38rem;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .icon-button { width: 34px; height: 34px; font-size: var(--text-base); }
}

/* ── ≤360px ── */
@media (max-width: 360px) {
  :root { font-size: 14px; }

  .navbar-container { padding: 0 var(--space-2); }
  .navbar-brand { font-size: 0.78rem; }
  .navbar-tagline { display: none; }

  .hero    { padding: var(--space-6) var(--space-2); }
  .hero h1 { font-size: 1.2rem; line-height: 1.3; }
  .hero p  { font-size: 0.78rem; line-height: 1.45; }

  #auth-buttons .btn { font-size: 0.55rem; padding: 0.22rem 0.28rem; }
  .container { padding: var(--space-4) var(--space-2); }
  .section-title h2 { font-size: 1.15rem; }
}

/* ============================================================================
   PRINT
   ============================================================================ */

@media print {
  .navbar, .footer, .btn, .modal-overlay, .mobile-menu-toggle { display: none !important; }
  body { background: white; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .hero { background: white; color: black; border: 2px solid black; }
  .hero h1, .hero p { color: black; }
}

/* ============================================================================
   REGISTER FORM — compact role-selection overlay
   ============================================================================ */

.register-container {
  width: 220px !important;
  height: 220px !important;
  min-height: 0 !important;
  max-height: 220px !important;
  padding: 4px 2px !important;
  border-radius: var(--radius-xl) !important;
  font-size: 11px !important;
  box-shadow: var(--shadow-md);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-y: auto !important;
  justify-content: flex-start !important;
}

.role-selection-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  justify-content: center !important;
  align-items: center !important;
}

.role-option {
  min-width: 70px !important;
  min-height: 40px !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-md) !important;
}

@media (max-width: 600px) {
  .register-container {
    width: 90vw !important;
    height: 90vw !important;
    max-height: 90vw !important;
    font-size: 10px !important;
    padding: 2px 1px !important;
  }
  .role-selection-row { gap: 4px !important; }
  .role-option { min-width: 40px !important; font-size: 10px !important; }
}

/* ══════════════════════════════════════════
   Account Dropdown — Professional Redesign
   ══════════════════════════════════════════ */
.account-menu { position: relative; }

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 0.6rem);
  background: var(--bg-primary);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  min-width: 240px;
  z-index: 1000;
  border: 1px solid var(--border-primary);
  overflow: hidden;
  padding-bottom: 0.5rem;
}

.account-dropdown.hidden { display: none; }

/* ── Header ── */
.accd-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.85rem;
  border-bottom: 1px solid var(--border-primary);
  background: linear-gradient(135deg, rgba(44,95,45,0.07) 0%, rgba(44,95,45,0.02) 100%);
}

.accd-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c5f2d, #4caf50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(44,95,45,0.28);
  flex-shrink: 0;
}

.accd-user { overflow: hidden; }

.accd-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accd-role {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 1px;
  text-transform: capitalize;
}

/* ── Groups ── */
.accd-group {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-primary);
}

.accd-group-last { border-bottom: none; }

/* ── Row item ── */
.accd-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.57rem 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.865rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  line-height: 1.3;
  font-family: inherit;
}

.accd-item:hover {
  background: var(--bg-secondary);
  color: #2c5f2d;
}

.accd-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  background: rgba(44,95,45,0.08);
  color: #2c5f2d;
  transition: background 0.15s;
  flex-shrink: 0;
}

.accd-item:hover .accd-icon { background: rgba(44,95,45,0.15); }

/* ── Danger (logout) ── */
.accd-item-danger {
  color: #dc2626;
  margin: 0.3rem 0.65rem 0.1rem;
  width: calc(100% - 1.3rem);
  border-radius: 10px;
  padding: 0.52rem 0.75rem;
  border: 1px solid rgba(220,38,38,0.15);
}

.accd-item-danger .accd-icon {
  background: rgba(220,38,38,0.08);
  color: #dc2626;
}

.accd-item-danger:hover {
  background: rgba(220,38,38,0.06);
  border-color: rgba(220,38,38,0.35);
  color: #dc2626;
}

.accd-item-danger:hover .accd-icon { background: rgba(220,38,38,0.12); }

/* ── Dark mode ── */
html[data-theme="dark"] .account-dropdown {
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.25);
}

html[data-theme="dark"] .accd-header {
  background: linear-gradient(135deg, rgba(76,175,80,0.09) 0%, rgba(76,175,80,0.03) 100%);
}

html[data-theme="dark"] .accd-avatar {
  background: linear-gradient(135deg, #2e7d32, #66bb6a);
}

html[data-theme="dark"] .accd-icon {
  background: rgba(76,175,80,0.1);
  color: #66bb6a;
}

html[data-theme="dark"] .accd-item:hover { color: #66bb6a; }
html[data-theme="dark"] .accd-item:hover .accd-icon { background: rgba(76,175,80,0.18); }
html[data-theme="dark"] .accd-item-danger { color: #f87171; border-color: rgba(248,113,113,0.15); }
html[data-theme="dark"] .accd-item-danger .accd-icon { background: rgba(248,113,113,0.08); color: #f87171; }
html[data-theme="dark"] .accd-item-danger:hover { background: rgba(248,113,113,0.07); border-color: rgba(248,113,113,0.35); color: #f87171; }
html[data-theme="dark"] .accd-item-danger:hover .accd-icon { background: rgba(248,113,113,0.14); }

/* Desktop-only dropdown items (hidden on mobile) */
@media (max-width: 768px) {
  .accd-desktop-only { display: none !important; }
  .accd-mobile-only  { display: flex !important; }
}
@media (min-width: 769px) {
  .accd-mobile-only  { display: none !important; }
}

/* ══════════════════════════════════════════
   Mobile Bottom Navigation Bar
   ══════════════════════════════════════════ */

/* Reserve space so content is never hidden behind the bar */
@media (max-width: 768px) {
  body.has-bottom-nav {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

.mm-bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  .mm-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #0d3d18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cg stroke='rgba(255,255,255,0.065)' stroke-width='1.2' fill='none'%3E%3Cpath d='M0,60 C35,25 65,25 95,60 C125,95 155,95 185,60 C215,25 245,25 275,60'/%3E%3Cpath d='M45,55 C50,42 43,28 38,18'/%3E%3Cpath d='M143,65 C148,78 141,92 136,102'/%3E%3C/g%3E%3Cellipse cx='38' cy='28' rx='14' ry='6' fill='rgba(255,255,255,0.045)' transform='rotate(-38 38 28)'/%3E%3Cellipse cx='136' cy='92' rx='14' ry='6' fill='rgba(255,255,255,0.045)' transform='rotate(38 136 92)'/%3E%3Cellipse cx='120' cy='55' rx='16' ry='8' fill='rgba(255,255,255,0.03)' transform='rotate(-20 120 55)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 240px 120px;
    border-top: 1px solid rgba(212,175,55,0.35);
    box-shadow: 0 -1px 3px rgba(0,0,0,0.20);
    z-index: 9800;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
  }

  html[data-theme="dark"] .mm-bottom-nav {
    background-color: #071f0b;
    border-top-color: rgba(212,175,55,0.4);
    box-shadow: 0 -1px 3px rgba(0,0,0,0.45);
  }

  /* Ornate top border accent line */
  .mm-bottom-nav::before {
    display: none;
  }

  .mm-bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: rgba(255,255,255,0.52);
    transition: color 0.22s ease, transform 0.18s ease;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .mm-bnav-item:active {
    transform: scale(0.88);
  }

  /* Active tab styling */
  .mm-bnav-item.mm-bnav-active {
    color: #ffffff;
  }

  /* Active indicator pill above icon */
  .mm-bnav-item.mm-bnav-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
  }

  /* Icon wrapper — glowing circle on active */
  .mm-bnav-icon-wrap {
    position: relative;
    width: 38px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    transition: background 0.22s ease;
  }

  .mm-bnav-item.mm-bnav-active .mm-bnav-icon-wrap {
    background: rgba(212,175,55,0.13);
  }

  .mm-bnav-icon-wrap i {
    font-size: 1.1rem;
    transition: transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
  }

  .mm-bnav-item.mm-bnav-active .mm-bnav-icon-wrap i {
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 2px 6px rgba(212,175,55,0.5));
  }

  /* Cart badge on icon */
  .mm-bnav-badge {
    position: absolute;
    top: -1px;
    right: 0px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid #1a3c1b;
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    pointer-events: none;
  }

  .mm-bnav-badge.hidden { display: none; }

  .mm-bnav-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1;
    transition: opacity 0.22s ease;
  }

  .mm-bnav-item.mm-bnav-active .mm-bnav-label {
    font-weight: 700;
    color: rgba(212,175,55,0.95);
  }

  /* Ripple tap effect */
  .mm-bnav-item .mm-bnav-ripple {
    position: absolute;
    inset: 4px;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
  }

  .mm-bnav-item:active .mm-bnav-ripple {
    opacity: 1;
    transform: scale(1);
  }

  /* ── Hide cart + account from top navbar on mobile (moved to bottom nav) ── */
  #user-menu .icon-button,
  #user-menu .account-menu {
    display: none !important;
  }

  /* ── Profile tab avatar circle ── */
  .mm-bnav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d4af37, #f0d060);
    color: #1a3c1b;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    flex-shrink: 0;
    transition: box-shadow 0.22s ease;
  }
  .mm-bnav-item.mm-bnav-profile-active .mm-bnav-avatar {
    box-shadow: 0 0 0 2.5px rgba(212,175,55,0.75), 0 2px 10px rgba(212,175,55,0.45);
  }
  .mm-bnav-item.mm-bnav-profile-active .mm-bnav-label {
    font-weight: 700;
    color: rgba(212,175,55,0.95);
  }
  .mm-bnav-item.mm-bnav-profile-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 8px rgba(212,175,55,0.6);
  }
}

/* ══════════════════════════════════════════
   Mobile Profile Sheet
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  .mm-ps-overlay {
    position: fixed;
    inset: 0;
    z-index: 9900;
    background: rgba(5, 14, 7, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .mm-ps-overlay.mm-ps-open {
    opacity: 1;
    pointer-events: all;
  }

  .mm-ps-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-primary, #fff);
    border-radius: 22px 22px 0 0;
    border-top: 1px solid rgba(212,175,55,0.30);
    box-shadow: 0 -14px 52px rgba(0,0,0,0.25), 0 -1px 0 rgba(212,175,55,0.12);
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.32, 1.15, 0.64, 1);
    max-height: 84vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  }
  /* Ornate top edge accent */
  .mm-ps-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.55) 30%, rgba(212,175,55,0.55) 70%, transparent);
  }
  .mm-ps-overlay.mm-ps-open .mm-ps-panel {
    transform: translateY(0);
  }
  html[data-theme="dark"] .mm-ps-panel {
    background: #111820;
    border-top-color: rgba(212,175,55,0.20);
    box-shadow: 0 -14px 52px rgba(0,0,0,0.6);
  }

  .mm-ps-handle {
    width: 40px;
    height: 4px;
    background: rgba(0,0,0,0.12);
    border-radius: 2px;
    margin: 0.9rem auto 0;
  }
  html[data-theme="dark"] .mm-ps-handle { background: rgba(255,255,255,0.14); }

  /* Header */
  .mm-ps-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem 1rem;
    background: linear-gradient(135deg, rgba(44,95,45,0.08) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-top: 0.4rem;
  }
  html[data-theme="dark"] .mm-ps-header {
    background: linear-gradient(135deg, rgba(76,175,80,0.09) 0%, transparent 100%);
    border-bottom-color: rgba(255,255,255,0.06);
  }

  .mm-ps-avatar-lg {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c5f2d 0%, #4caf50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 14px rgba(44,95,45,0.38);
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }
  html[data-theme="dark"] .mm-ps-avatar-lg {
    background: linear-gradient(135deg, #2e7d32 0%, #66bb6a 100%);
  }

  .mm-ps-info { overflow: hidden; }

  .mm-ps-user-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }
  html[data-theme="dark"] .mm-ps-user-name { color: #f3f4f6; }

  .mm-ps-user-role {
    font-size: 0.72rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
    text-transform: capitalize;
    letter-spacing: 0.03em;
  }

  /* Body */
  .mm-ps-body { padding: 0.5rem 0; }

  .mm-ps-group {
    padding: 0.3rem 0.85rem;
  }
  .mm-ps-group + .mm-ps-group {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 0.45rem;
    margin-top: 0.2rem;
  }
  html[data-theme="dark"] .mm-ps-group + .mm-ps-group { border-top-color: rgba(255,255,255,0.06); }

  /* Items */
  .mm-ps-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.87rem 0.7rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-primary, #111827);
    font-size: 0.94rem;
    font-weight: 500;
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.3;
  }
  html[data-theme="dark"] .mm-ps-item { color: #e5e7eb; }
  .mm-ps-item:active { transform: scale(0.97); background: rgba(44,95,45,0.07); }
  .mm-ps-item:hover { background: rgba(44,95,45,0.05); color: #2c5f2d; }
  html[data-theme="dark"] .mm-ps-item:hover { color: #66bb6a; background: rgba(76,175,80,0.08); }

  .mm-ps-item-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 11px;
    background: rgba(44,95,45,0.08);
    color: #2c5f2d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }
  html[data-theme="dark"] .mm-ps-item-icon { background: rgba(76,175,80,0.10); color: #66bb6a; }
  .mm-ps-item:hover .mm-ps-item-icon { background: rgba(44,95,45,0.14); }
  html[data-theme="dark"] .mm-ps-item:hover .mm-ps-item-icon { background: rgba(76,175,80,0.16); }

  .mm-ps-item-label { flex: 1; }

  .mm-ps-chevron { color: rgba(0,0,0,0.25); font-size: 0.7rem; flex-shrink: 0; }
  html[data-theme="dark"] .mm-ps-chevron { color: rgba(255,255,255,0.22); }

  /* Danger */
  .mm-ps-item-danger { color: #dc2626 !important; }
  .mm-ps-item-danger .mm-ps-item-icon { background: rgba(220,38,38,0.07) !important; color: #dc2626 !important; }
  .mm-ps-item-danger:hover { background: rgba(220,38,38,0.05) !important; }
  .mm-ps-item-danger:hover .mm-ps-item-icon { background: rgba(220,38,38,0.13) !important; }
  html[data-theme="dark"] .mm-ps-item-danger { color: #f87171 !important; }
  html[data-theme="dark"] .mm-ps-item-danger .mm-ps-item-icon { background: rgba(248,113,113,0.08) !important; color: #f87171 !important; }
  html[data-theme="dark"] .mm-ps-item-danger:hover { background: rgba(248,113,113,0.07) !important; }
}


/* ──────────────────────────────────────────────────────────────────────────
   Mobile input sizing — prevents iOS auto-zoom
   --------------------------------------------------------------------------
   iOS Safari zooms the entire page whenever a focused field renders smaller
   than 16px, then leaves the user scrolled sideways on a layout that no longer
   fits. --text-base is 0.875rem (14px), so every form on the site triggered it.

   Exactly 16px on touch-sized viewports removes the zoom. The alternative —
   maximum-scale=1 / user-scalable=no in the viewport meta — also disables
   deliberate pinch-zoom, which people rely on, so it is not used here.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  select,
  textarea,
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Wallet balance in the header
   --------------------------------------------------------------------------
   Sits beside the search control and opens /account/wallet. Shaped as a pill
   rather than a bare icon because the number is the point — a customer wants
   to see what they can spend without opening anything.
   ────────────────────────────────────────────────────────────────────────── */
.navbar-wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  /* Digits change as the balance does; tabular stops the pill twitching. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.navbar-wallet:hover,
.navbar-wallet:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.navbar-wallet i {
  font-size: var(--text-base);
  opacity: 0.9;
}

/* An empty wallet is still worth showing — it is how someone discovers the
   feature exists — but it should not compete with the cart for attention. */
.navbar-wallet-empty {
  opacity: 0.75;
}

/* Narrow screens: keep the icon, drop the amount, so the navbar does not wrap. */
@media (max-width: 600px) {
  .navbar-wallet {
    padding: 0;
    width: 40px;
    justify-content: center;
    gap: 0;
  }
  .navbar-wallet .navbar-wallet-amount {
    display: none;
  }
}