/* ════════════════════════════════════════════════════════════
   ROOT — colors, glass, shadows, radius, motion
   ════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces & text */
  --bg: #101012;
  --bg-elevated: #17171a;
  --bg-elevated-2: #1c1c20;
  /* Warm neutral — a dark, desaturated take on the old cream/beige brand
     tone, used sparingly on alternating sections so the page doesn't read
     as one flat black slab. Still reads as "dark UI", just warmer. */
  --bg-warm: #1a140f;
  --bg-warm-elevated: #201810;
  --text-title: #f5f5f7;
  --text-body: #e8e8ea;
  --text-muted: #a1a1a6;
  --hairline: rgba(255,255,255,0.12);
  --hairline-soft: rgba(255,255,255,0.08);

  /* Single accent — muted sage green, brand-derived, tuned for dark surfaces */
  --accent: #8fae7a;
  --accent-hover: #a2bd90;
  --accent-dim: color-mix(in srgb, var(--accent) 55%, black);
  --accent-text-on: #12210c;
  --accent-soft-bg: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-soft-border: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 30%, transparent);

  /* Navbar-specific second tone — muted gold for the primary CTA / logo
     accent, and a dark green glass tint for the secondary CTA. Scoped to
     the navbar only; the rest of the site keeps the single sage accent. */
  --gold: #c6a35c;
  --gold-hover: #d3b378;
  --gold-text-on: #241d0d;
  --nav-green: #16301f;
  --nav-green-glass: color-mix(in srgb, var(--nav-green) 55%, transparent);
  --nav-green-glass-border: color-mix(in srgb, var(--nav-green) 80%, white 10%);

  /* Legacy variable names — kept so every inline var(--primary) etc.
     already scattered across templates picks up the new palette. */
  --primary: var(--accent);
  --primary-dark: var(--accent-dim);
  --primary-light: var(--accent-hover);
  --secondary: var(--text-muted);
  --bg-color: var(--bg);
  --light-bg: var(--bg-elevated);

  /* Glass — one recipe, used everywhere a panel sits on flat background */
  --glass-bg: rgba(255,255,255,0.07);
  --glass-bg-strong: rgba(255,255,255,0.1);
  --glass-blur: blur(16px);
  --glass-border: rgba(255,255,255,0.14);

  /* Frosted glass — real blur, only where something scrolls behind it.
     Dark-on-dark elevation reads through a lighter surface tone + border,
     not a drop shadow (a black shadow is invisible on a near-black page). */
  --frost-bg: rgba(36,36,41,0.68);
  --frost-bg-strong: rgba(40,40,46,0.9);
  --frost-blur: blur(20px);

  /* Liquid glass rim — layered inset light on a curved edge. On a dark page a
     black drop shadow reads as nothing, so depth comes from the bright top
     highlight + a faint bottom edge + a very soft ambient halo instead. */
  --rim-top: color-mix(in srgb, white 32%, transparent);
  --rim-bottom: color-mix(in srgb, black 35%, transparent);
  --shadow-rim: inset 0 1px 0 0 var(--rim-top), inset 0 -1px 0 0 var(--rim-bottom), 0 1px 0 0 rgba(255,255,255,0.05), 0 8px 28px rgba(0,0,0,0.45);
  --shadow-rim-sm: inset 0 1px 0 0 var(--rim-top), inset 0 -1px 0 0 var(--rim-bottom), 0 2px 12px rgba(0,0,0,0.35);
  --shadow-panel: 0 1px 0 0 rgba(255,255,255,0.04), 0 4px 24px rgba(0,0,0,0.35);
  --shadow-float: 0 1px 0 0 rgba(255,255,255,0.06), 0 16px 44px rgba(0,0,0,0.55);

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-full: 999px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 0.25s;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: rgba(23,23,26,0.95);
    --glass-bg-strong: rgba(23,23,26,0.98);
    --frost-bg: rgba(16,16,18,0.95);
    --frost-bg-strong: rgba(16,16,18,0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 140px;
  overflow-x: hidden;
}
@media (max-width: 992px) {
  html { scroll-padding-top: 95px; }
}

body {
  font-family: 'Nunito', sans-serif;
  color: var(--text-body);
  background-color: var(--bg);
}

/* Clip AOS pre-animation transforms (fade-left/right shift elements past the
   edge before they scroll into view) locally, without touching body/html —
   overflow-x:hidden on body breaks position:sticky for the navbar. */
main { overflow-x: hidden; }

h1, h2, h3, h4, h5, h6 { color: var(--text-title); font-weight: 700; letter-spacing: -0.02em; }
a { color: inherit; }
::selection { background: var(--accent-soft-bg); color: var(--text-title); }

/* Keyboard focus — the browser default blue ring clashes with a dark,
   accent-driven UI; mouse/touch clicks don't get a ring at all. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.btn-solid:focus-visible, .btn-outline:focus-visible, .icon-btn:focus-visible { outline-offset: 3px; }
.input-field:focus-visible { outline: none; }

/* Scrollbar (WebKit + Firefox) */
* { scrollbar-color: rgba(255,255,255,0.25) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: var(--r-full); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* ── Brand ── */
.logo-text {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-title);
  text-decoration: none;
}
.logo-text span { color: var(--accent); }

/* ── Icon buttons ── */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.1rem;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text-title); background: rgba(255,255,255,0.08); }

/* ════════════════════════════════════════════════════════════
   NAVBAR — floating liquid-glass pill over a transparent sticky header
   ════════════════════════════════════════════════════════════ */

/* Liquid rim tuned for this pill specifically (35%/22% per spec, distinct
   from the --shadow-rim used elsewhere). Layers: bright top-left edge,
   faint bottom-right edge, a thin dark inner line at the bottom, then a
   soft external drop shadow. */
.nav-pill {
  --pill-rim-tl: color-mix(in srgb, white 35%, transparent);
  --pill-rim-br: color-mix(in srgb, white 22%, transparent);
  --pill-rim-dark: color-mix(in srgb, black 35%, transparent);
  box-shadow:
    inset 1px 1px 1px 0 var(--pill-rim-tl),
    inset -1px -1px 1px 0 var(--pill-rim-br),
    inset 0 -1px 0 0 var(--pill-rim-dark),
    0 16px 40px rgba(0,0,0,0.4);
}

/* The sticky header itself is not a surface — fully transparent, just a
   positioning wrapper for the topbar + pill inside it. */
.navbar-shell {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: transparent;
  padding: 10px 12px 0;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
@media (min-width: 768px) {
  .navbar-shell { padding: 16px 20px 0; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
}

/* ── The pill — real liquid glass ──
   max-width tracks Tailwind's own .container breakpoints exactly, so the
   pill's edges always line up with every other section's content edge
   instead of running wider (or narrower) than the rest of the page. */
.nav-pill {
  max-width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(24,24,28,0.62);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.navbar-shell.scrolled .nav-pill {
  background: rgba(24,24,28,0.85);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    inset 1px 1px 1px 0 var(--pill-rim-tl),
    inset -1px -1px 1px 0 var(--pill-rim-br),
    inset 0 -1px 0 0 var(--pill-rim-dark),
    0 20px 52px rgba(0,0,0,0.52);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-pill { background: rgba(24,24,28,0.94); }
  .navbar-shell.scrolled .nav-pill { background: rgba(24,24,28,0.97); }
}
@media (min-width: 640px)  { .nav-pill { max-width: 640px; } }
@media (min-width: 768px)  { .nav-pill { max-width: 768px; } }
@media (min-width: 1024px) { .nav-pill { max-width: 1024px; } }
@media (min-width: 1280px) { .nav-pill { max-width: 1280px; } }
@media (min-width: 1536px) { .nav-pill { max-width: 1536px; } }

/* ── Middle header (shrinks on scroll = "pill gets shorter") ── */
.middle-header { padding: 12px 0; transition: padding 0.3s var(--ease); }
.navbar-shell.scrolled .middle-header { padding: 7px 0; }

/* Navbar layout */
.navbar-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.navbar-left { display: flex; align-items: center; }
.navbar-center { display: flex; justify-content: center; align-items: center; }
.navbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 38px; }
.navbar-logo-mobile { display: block; }
.navbar-logo-desktop { display: none; }
.navbar-search-col { display: none; }
.navbar-hamburger { display: flex; }
.navbar-cat-nav { display: none; }

/* Two-tone wordmark: white + muted gold (was white + sage) */
.logo-text span { color: var(--gold); }

/* Desktop CTAs vs. mobile compact cart icon — see "CTAs" block below */
.navbar-cart-compact { display: flex; }
.navbar-ctas { display: none; align-items: center; gap: 10px; }

.navbar-overlay { z-index: 1055; }
.navbar-drawer {
  width: 85%;
  max-width: 350px;
  /* Above .mobile-bottom-nav (z-index: 1050) so the drawer's own footer
     CTAs aren't painted over by the fixed bottom nav bar when open. */
  z-index: 1060;
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease);
  display: flex;
  flex-direction: column;
  /* Same material as the pill, not the stronger "scrolled" variant. */
  background: rgba(24,24,28,0.62) !important;
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar-drawer { background: rgba(24,24,28,0.96) !important; }
}
.navbar-drawer-open { transform: translateX(0); }
.navbar-drawer-item {
  display: flex; align-items: center;
  padding: 14px 20px; font-weight: 700; font-size: 0.85rem;
  color: var(--text-body); border-bottom: 1px solid var(--hairline-soft); text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.navbar-drawer-item:hover { color: var(--text-title); background: rgba(255,255,255,0.06); }
.navbar-drawer nav { flex: 1; }
.navbar-drawer-footer {
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--hairline-soft);
}
.navbar-drawer-footer .nav-cta { width: 100%; justify-content: center; }

/* Drawer overlay — blurred + darkened backdrop behind the glass drawer */
#menu-overlay { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); transition: opacity 0.2s var(--ease); }

/* ── CTAs — primary (solid muted gold, dark text) + secondary (dark
   green glass, white text). Two distinct tones, never a gradient fill. ── */
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-full);
  font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  text-decoration: none; cursor: pointer; font-family: inherit; border: none;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav-cta-primary {
  background: var(--gold); color: var(--gold-text-on);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.25);
}
.nav-cta-primary:hover { background: var(--gold-hover); transform: translateY(-1px); }
.nav-cta-secondary {
  background: var(--nav-green-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--nav-green-glass-border);
  color: #fff;
}
.nav-cta-secondary:hover { background: color-mix(in srgb, var(--nav-green) 75%, transparent); transform: translateY(-1px); }
.nav-cta-badge {
  background: rgba(36,29,13,0.3); color: var(--gold-text-on);
  font-size: 0.7rem; font-weight: 900; padding: 1px 7px; border-radius: var(--r-full);
}

@media (min-width: 992px) {
  .navbar-grid { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .navbar-center { justify-content: center; }
  .navbar-logo-mobile { display: none; }
  .navbar-logo-desktop { display: block; }
  .navbar-search-col { display: flex; justify-content: center; width: 100%; }
  .navbar-hamburger { display: none !important; }
  .navbar-cat-nav { display: block !important; }
  .navbar-drawer { display: none !important; }
  .navbar-overlay-js { display: none !important; }
  .navbar-cart-compact { display: none; }
  .navbar-ctas { display: flex; }
}

/* ── Category nav ── */
.bottom-nav { border-top: 1px solid var(--hairline-soft); overflow-x: auto; }
.bottom-nav-container { display: flex; justify-content: center; gap: 4px; padding: 8px; }
.nav-category {
  padding: 8px 16px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-category:hover { color: var(--text-title); background: rgba(255,255,255,0.06); }
.nav-category.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }

/* ── Live search ── */
.search-wrapper { position: relative; width: 100%; max-width: 500px; }
.search-form { position: relative; width: 100%; }
.search-form input {
  width: 100%;
  border-radius: var(--r-full);
  background-color: rgba(255,255,255,0.07);
  color: var(--text-body);
  border: 1px solid var(--hairline);
  padding: 9px 50px 9px 22px;
  font-weight: 500;
  font-size: 0.9rem;
  font-family: inherit;
  transition: all var(--dur) var(--ease);
  outline: none;
}
.search-form input::placeholder { color: var(--text-muted); }
.search-form input:focus {
  box-shadow: 0 0 0 4px var(--accent-ring);
  border-color: var(--accent);
  background-color: rgba(255,255,255,0.1);
}
.search-form button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  background: var(--accent);
  color: var(--accent-text-on);
  border: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
}
.search-form button:hover { background: var(--accent-hover); transform: translateY(-50%) scale(1.08); }
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  background: var(--frost-bg-strong);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  z-index: 1050;
  border: 1px solid var(--glass-border);
  display: none;
}
.search-dropdown.open { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--hairline-soft); transition: background 0.15s var(--ease);
}
.search-result-item:hover { background: rgba(255,255,255,0.06); }
.search-result-img {
  width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
  background: var(--bg-elevated-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.search-result-img img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name { display: block; font-weight: 700; font-size: 0.87rem; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-cat { display: block; font-size: 0.75rem; color: var(--text-muted); }
.search-result-price { font-weight: 700; color: var(--accent); white-space: nowrap; font-size: 0.9rem; }
.search-see-all {
  display: block; width: 100%; padding: 13px 16px;
  background: none; border: none; border-top: 1px solid var(--hairline-soft);
  color: var(--accent); font-weight: 700; font-size: 0.83rem;
  text-align: center; cursor: pointer; transition: background 0.15s var(--ease); font-family: inherit;
}
.search-see-all:hover { background: rgba(255,255,255,0.06); }

/* ── Filter bar ── */
.filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.filter-select-wrap {
  position: relative; display: flex; align-items: center;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-full);
  padding: 0 14px 0 16px; height: 42px; min-width: 200px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.filter-select-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.filter-select-wrap > i:first-child { color: var(--accent); font-size: 0.82rem; flex-shrink: 0; margin-right: 10px; }
.filter-select-wrap select {
  flex: 1; border: none; background: transparent; font-family: 'Nunito', sans-serif;
  font-size: 0.88rem; font-weight: 700; color: var(--text-body); cursor: pointer;
  appearance: none; -webkit-appearance: none; outline: none; padding-right: 24px;
}
.filter-select-wrap select option { background: var(--bg-elevated); color: var(--text-body); }
.filter-chevron { position: absolute; right: 14px; font-size: 0.7rem; color: var(--text-muted); pointer-events: none; }
.filter-count { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-left: 4px; }
@media (max-width: 575px) {
  .filter-bar { gap: 8px; }
  .filter-select-wrap { min-width: calc(50% - 4px); flex: 1; }
  .filter-count { width: 100%; text-align: center; margin-left: 0; }
}

/* ── Product card ── */
.product-card {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-border);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  width: 100%; display: block; text-decoration: none;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-panel); border-color: rgba(255,255,255,0.2); }
.product-img-wrapper { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--bg-elevated-2); }
.product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.product-card:hover .product-img { transform: scale(1.04); }
.product-no-img { width: 100%; height: 100%; min-height: 180px; display: flex; align-items: center; justify-content: center; color: var(--accent); opacity: 0.3; font-size: 2rem; }
.product-info { padding: 14px 16px; }
.product-brand { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.product-title { display: block; font-weight: 700; font-size: 0.9rem; color: var(--text-title); text-decoration: none; line-height: 1.35; margin-bottom: 6px; }
.product-price { font-weight: 800; font-size: 1.05rem; color: var(--accent); }

/* ── Products grid ── */
.products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 991px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } }

/* ── Category header ── */
.cat-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 20px; margin-bottom: 36px; border-bottom: 1px solid var(--hairline); gap: 16px;
}
@media (max-width: 639px) { .cat-section-header { flex-direction: column; align-items: flex-start; } }
.cat-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--accent); display: block; margin-bottom: 6px; }
.cat-section-title { font-family: 'Nunito', sans-serif; font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--text-title); letter-spacing: -0.03em; line-height: 1; }

/* ── Discover badge ── */
/* ── Discover section wrapper — its own photo + breathing room above/below
   so it visually reads as a distinct section, not a continuation of the
   hero or the next section. ── */
.discover-wrapper { padding: 72px 0; margin: 48px 0; }

/* ── Bento wide card ── */
.bento-wide-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; display: block; height: 280px; cursor: pointer;
}
.bento-wide-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.bento-wide-card:hover img { transform: scale(1.04); }
.bento-wide-overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.55) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px;
}

/* ── Photo section background — one shared recipe, set the image per
   instance via the --photo custom property. Per the "never blur a photo"
   rule: a flat dark scrim (not blur) keeps the existing light-text layout
   readable while the photo still reads clearly through it. ── */
.section-photo {
  background-image: linear-gradient(rgba(10,10,11,0.55), rgba(10,10,11,0.72)), var(--photo);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

/* ── Story section ── */
.story-section { min-height: 100vh; background-color: var(--bg); display: flex; align-items: center; padding: 80px 0; margin-bottom: 80px; }
@supports (min-height: 100dvh) { .story-section { min-height: 100dvh; } }
.story-section-header { margin-bottom: 64px; text-align: center; }
.story-section-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; display: block; }
.story-section-title { font-family: 'Nunito', sans-serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; color: var(--text-title); line-height: 1.1; letter-spacing: -0.03em; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }

/* ── Why cards ── */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 991px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .why-grid { grid-template-columns: 1fr; } }
.why-card {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.why-card:hover { transform: translateY(-6px); border-color: var(--accent-soft-border); box-shadow: var(--shadow-panel); }
.why-card-head { padding: 32px 28px 28px; position: relative; overflow: hidden; }
.why-card-head::after { content: attr(data-num); position: absolute; top: -8px; right: 10px; font-size: 5.5rem; font-weight: 800; color: rgba(255,255,255,0.04); line-height: 1; font-family: 'Nunito', sans-serif; pointer-events: none; user-select: none; }
.why-icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--accent); transition: transform var(--dur) var(--ease); position: relative; z-index: 1; }
.why-card:hover .why-icon { transform: scale(1.08); }
.why-card-body { padding: 24px 28px 32px; }
.why-card-title { font-family: 'Nunito', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-title); margin-bottom: 10px; line-height: 1.3; }
.why-card-text { font-size: 0.86rem; color: var(--text-muted); line-height: 1.8; }

/* ── Store section ── */
.store-section-wrapper { background-color: var(--bg); min-height: 100vh; display: flex; align-items: center; padding: 60px 0; transition: background-color var(--dur) var(--ease); }
@supports (min-height: 100dvh) { .store-section-wrapper { min-height: 100dvh; } }
/* Alternate one warm, dark neutral tone in so the page isn't one flat
   black slab end to end — still reads as dark UI, just breaks the monotony.
   Glass panels are semi-transparent so they pick up the warmth automatically. */
.store-section-wrapper.section-warm { background: var(--bg-warm); }
.store-section-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 991px) { .store-section-inner { grid-template-columns: 1fr; gap: 32px; } }
.store-heading { font-family: 'Nunito', sans-serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; color: var(--text-title); margin-bottom: 12px; line-height: 1.1; letter-spacing: -0.03em; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.store-details { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.store-detail-item { display: flex; align-items: flex-start; gap: 14px; color: var(--text-body); font-size: 0.9rem; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.store-detail-item i { color: var(--accent); width: 18px; margin-top: 2px; flex-shrink: 0; }
.store-detail-item a { color: inherit; text-decoration: none; }
.store-detail-item a:hover { color: var(--text-title); }
.store-map-block { border-radius: var(--r-lg); overflow: hidden; height: 320px; border: 1px solid var(--glass-border); filter: grayscale(0.3) invert(0.92) contrast(0.9); }
.store-map-block iframe { width: 100%; height: 100%; border: 0; display: block; }
.story-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 14px; display: block; }

/* ── Sub-cards used inside shipping / privacy sections ── */
.info-tile {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 28px 24px; text-align: center;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.info-tile:hover { border-color: var(--accent-soft-border); transform: translateY(-3px); }
.info-tile-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  color: var(--accent); font-size: 1.4rem;
}
.info-tile h3 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--text-title); margin: 0 0 4px; }
.info-tile p { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.step-row { display: flex; gap: 16px; align-items: flex-start; }
.step-num {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft-bg); border: 1px solid var(--accent-soft-border);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--accent); font-size: 0.85rem; flex-shrink: 0;
}
.step-row h4 { font-weight: 700; color: var(--text-title); margin: 0 0 3px; font-size: 0.95rem; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.step-row p { color: var(--text-muted); margin: 0; font-size: 0.85rem; line-height: 1.6; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

/* ── FAQ ── */
.faq-item {
  border: 1px solid var(--glass-border); border-radius: var(--r-md); overflow: hidden;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.faq-btn {
  width: 100%; text-align: left; padding: 18px 22px; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.98rem; color: var(--text-title);
}
.faq-body { padding: 0 22px 18px; color: var(--text-muted); line-height: 1.75; border-top: 1px solid var(--hairline-soft); font-size: 0.9rem; }
.faq-icon { color: var(--accent); flex-shrink: 0; margin-left: 16px; }

/* ── Hero swiper — photos keep their contrast via vignette, never blur ── */
.hero-swiper { position: relative; overflow: hidden; }
.hero-swiper .swiper-slide { display: flex; flex-direction: column; }
/* Real mobile browsers resize the viewport as the address bar shows/hides;
   vh is based on the largest (chrome-collapsed) size, so 88vh can render
   taller than what's actually visible at first paint. dvh tracks the real,
   current viewport. */
@supports (height: 100dvh) {
  .hero-swiper .swiper-slide { height: 88dvh !important; }
}
@media (max-width: 767px) {
  .hero-swiper .swiper-slide { height: 70vh !important; min-height: 340px !important; }
  @supports (height: 100dvh) {
    .hero-swiper .swiper-slide { height: 70dvh !important; }
  }
}
.hero-swiper .swiper-slide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.15) 65%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}
.hero-swiper .swiper-pagination-bullet { background: rgba(255,255,255,0.5); opacity: 1; }
.hero-swiper .swiper-pagination-bullet-active { background: var(--text-title) !important; }
.hero-swiper .swiper-button-next, .hero-swiper .swiper-button-prev { color: rgba(255,255,255,0.85) !important; }
.hero-caption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; z-index: 2; }
.hero-caption h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.03em; text-shadow: 0 2px 24px rgba(0,0,0,0.4); }
.hero-caption p { font-size: clamp(1rem, 1.8vw, 1.3rem); color: rgba(255,255,255,0.92); max-width: 520px; margin-bottom: 28px; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }

/* ── Hero CTA buttons (glass, over a photo) ── */
.hero-cta-solid, .hero-cta-outline {
  display: inline-flex; align-items: center; gap: 8px; padding: 13px 28px;
  border-radius: var(--r-full); font-weight: 700; font-size: 0.9rem; text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-cta-solid { background: var(--accent); color: var(--accent-text-on); box-shadow: var(--shadow-rim-sm); }
.hero-cta-solid:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-panel); }
.hero-cta-outline {
  background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; border: 1px solid rgba(255,255,255,0.35);
}
.hero-cta-outline:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }

/* ── Bento grid ── */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 767px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
.bento-card { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 300px; cursor: pointer; display: block; }
@media (max-width: 767px) { .bento-card { height: 180px; } }
.bento-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); display: block; }
.bento-card:hover img { transform: scale(1.06); }
.bento-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 55%, transparent 100%); display: flex; align-items: flex-end; padding: 20px; }
.bento-label { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.1px; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }

/* ── Product description ── */
.product-desc-section { margin-top: 40px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); }
.product-desc-header { background: var(--bg-elevated-2); color: var(--text-title); padding: 14px 24px; font-weight: 700; font-size: 0.95rem; border-bottom: 1px solid var(--hairline-soft); }
.product-desc-body { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: 24px; font-size: 0.95rem; line-height: 1.8; color: var(--text-body); }
.buy-box { position: sticky; top: 100px; }
.tag-primary { display: inline-block; padding: 4px 14px; border-radius: var(--r-full); background: rgba(255,255,255,0.08); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.4px; }

/* ── Footer ── */
.fat-footer { background: var(--bg-elevated); color: var(--text-muted); padding: 64px 0 0; border-top: 1px solid var(--hairline-soft); }
.footer-main-row { padding-bottom: 48px; border-bottom: 1px solid var(--hairline-soft); }
.footer-tagline { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social-btn { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--text-body); display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.95rem; transition: all var(--dur) var(--ease); }
.footer-social-btn:hover { background: var(--accent-soft-bg); color: var(--accent); transform: translateY(-2px); }
.footer-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; color: var(--text-title); text-transform: uppercase; margin-bottom: 18px; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.88rem; transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease); }
.footer-links a:hover { color: var(--text-title); padding-left: 4px; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 12px; font-size: 0.88rem; }
.footer-contact-item i { color: var(--accent); width: 16px; margin-top: 2px; flex-shrink: 0; }
.footer-contact-item a { color: var(--text-muted); text-decoration: none; }
.footer-contact-item a:hover { color: var(--text-title); }
.footer-trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.footer-trust-badge { background: rgba(255,255,255,0.05); color: var(--text-muted); font-size: 0.75rem; padding: 6px 12px; border-radius: var(--r-full); display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline-soft); }
.footer-bottom { padding: 20px 0; border-top: 1px solid var(--hairline-soft); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { color: var(--text-muted); text-decoration: none; }
.footer-bottom-links a:hover { color: var(--text-title); }

/* ── Credit bar ── */
.credit-bar {
  background: var(--bg);
  color: var(--text-muted);
  text-align: center; padding: 12px 16px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px;
}
.credit-bar a { color: var(--text-body); text-decoration: none; font-weight: 800; transition: color var(--dur) var(--ease); }
.credit-bar a:hover { color: var(--accent); }
@media (max-width: 991px) { .credit-bar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); margin-bottom: 0; } }

/* ── Mobile bottom nav (frosted — floats over scrolling content) ── */
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  /* box-sizing:border-box (global reset) means height must include the
     safe-area padding, or it would just shrink the icon row instead of
     extending the bar's background down to the true screen edge. */
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--frost-bg-strong);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
  border-top: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 1050;
}
@media (min-width: 992px) { .mobile-bottom-nav { display: none; } }
.mobile-bottom-nav .nav-item {
  display: flex; flex-direction: column; align-items: center;
  color: var(--text-muted); font-size: 0.66rem; font-weight: 600; gap: 5px;
  cursor: pointer; transition: color var(--dur) var(--ease); letter-spacing: 0.2px;
  background: none; border: none; padding: 6px 14px; border-radius: var(--r-md); text-decoration: none; font-family: inherit;
}
.mobile-bottom-nav .nav-item i { font-size: 1.2rem; transition: transform 0.25s var(--ease); }
.mobile-bottom-nav .nav-item:hover, .mobile-bottom-nav .nav-item.active { color: var(--accent); }
.mobile-bottom-nav .nav-item.active { background: var(--accent-soft-bg); }
.mobile-bottom-nav .nav-item:hover i { transform: translateY(-2px); }
.cart-badge { position: relative; }
.cart-badge-count {
  position: absolute; top: -6px; right: -10px;
  background: var(--accent); color: var(--accent-text-on); font-size: 0.6rem; font-weight: 900;
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* ── Back to top (frosted glass, floating) ── */
.back-to-top {
  position: fixed; bottom: 32px; right: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--frost-bg-strong);
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-title);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; z-index: 200;
  box-shadow: var(--shadow-rim-sm);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background var(--dur) var(--ease), bottom var(--dur) var(--ease);
  opacity: 0; pointer-events: none;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); color: var(--accent); }
@media (max-width: 768px) { .back-to-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 16px; } }

/* ── Cookie banner (frosted — floats over scrolling content) ── */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--frost-bg-strong);
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
  border-top: 1px solid var(--glass-border);
  color: var(--text-body); z-index: 2000;
  padding: 20px; animation: slideUp 0.4s var(--ease);
}
@media (max-width: 991px) {
  /* Sit above the fixed mobile bottom nav instead of covering it */
  .cookie-banner { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cookie-icon-wrap { font-size: 2rem; flex-shrink: 0; }
.cookie-text { flex: 1; min-width: 200px; }
.cookie-text strong { display: block; margin-bottom: 4px; font-size: 1rem; color: var(--text-title); }
.cookie-text p { margin: 0; font-size: 0.85rem; color: var(--text-muted); }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn-accept {
  background: var(--accent); color: var(--accent-text-on); border: none; padding: 9px 22px; border-radius: var(--r-full);
  font-weight: 700; cursor: pointer; font-size: 0.88rem; font-family: inherit; box-shadow: var(--shadow-rim-sm);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cookie-btn-accept:hover { background: var(--accent-hover); transform: translateY(-1px); }
.cookie-btn-decline {
  background: rgba(255,255,255,0.08); color: var(--text-body); border: 1px solid var(--hairline); padding: 9px 22px; border-radius: var(--r-full);
  font-weight: 600; cursor: pointer; font-size: 0.88rem; font-family: inherit; transition: background var(--dur) var(--ease);
}
.cookie-btn-decline:hover { background: rgba(255,255,255,0.14); }

/* ── Toast (frosted) ── */
.toast-container { position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 3000; pointer-events: none; }
@media (min-width: 992px) { .toast-container { bottom: 24px; } }
.toast {
  background: var(--frost-bg-strong);
  backdrop-filter: var(--frost-blur); -webkit-backdrop-filter: var(--frost-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-title); padding: 12px 22px; border-radius: var(--r-full);
  font-weight: 700; font-size: 0.9rem; box-shadow: var(--shadow-float);
  opacity: 0; transform: translateY(20px); transition: all var(--dur) var(--ease); white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── Input ── */
.input-field {
  width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-md);
  padding: 11px 15px; font-size: 0.95rem; font-family: inherit;
  outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  background: rgba(255,255,255,0.07); color: var(--text-body);
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: rgba(255,255,255,0.09); }

/* ════════════════════════════════════════════════════════════
   SHOP COMPONENTS — cart / checkout / orders / legal
   ════════════════════════════════════════════════════════════ */

/* ── Page header ── */
.shop-page-header { margin-bottom: 32px; }
.shop-page-header .cat-eyebrow { margin-bottom: 4px; }

/* ── Breadcrumb ── */
.breadcrumb-nav { display: none; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 28px; }
@media (min-width: 768px) { .breadcrumb-nav { display: flex; } }
.breadcrumb-nav a { color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.breadcrumb-nav a:hover { color: var(--accent); }
.breadcrumb-nav i { font-size: 9px; }
.breadcrumb-nav .current { color: var(--accent); }

/* ── Glass panel — ONE shared recipe, used everywhere ── */
.shop-panel {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); padding: 26px;
}
.shop-panel + .shop-panel { margin-top: 20px; }
.panel-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 800; color: var(--text-title); margin-bottom: 20px; }
.panel-title i { color: var(--accent); font-size: 0.95rem; }

/* ── Buttons ──
   Primary = solid muted accent, dark text, faint top reflection, hover lift.
   Secondary = glass, neutral idle, accent tint only on hover/focus. */
.btn-solid, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 28px; border-radius: var(--r-full); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.2px; cursor: pointer;
  text-decoration: none; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  font-family: inherit; line-height: 1;
}
.btn-solid {
  background: var(--accent) linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0) 65%);
  color: var(--accent-text-on); border: 1px solid transparent; box-shadow: var(--shadow-rim-sm);
}
.btn-solid:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-panel); }
.btn-solid:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-outline {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-body); border: 1px solid var(--glass-border);
}
.btn-outline:hover { color: var(--accent); border-color: var(--accent-soft-border); background: var(--accent-soft-bg); transform: translateY(-2px); }
.btn-block { display: flex; width: 100%; }

/* ── Cart items ── */
.cart-item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--hairline-soft); align-items: center; }
.cart-item:first-child { padding-top: 0; }
.cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.cart-item-img { width: 84px; height: 84px; border-radius: var(--r-md); overflow: hidden; background: var(--bg-elevated-2); flex-shrink: 0; display: block; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--accent); opacity: 0.4; font-size: 1.6rem; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 700; font-size: 0.95rem; color: var(--text-title); text-decoration: none; display: block; margin-bottom: 3px; }
.cart-item-name:hover { color: var(--accent); }
.cart-item-unit { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; }
.cart-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart-item-total { font-weight: 800; color: var(--accent); font-size: 1.05rem; white-space: nowrap; }
.cart-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; transition: color var(--dur) var(--ease); padding: 4px 6px; font-family: inherit; }
.cart-remove-btn:hover { color: #e08585; }
@media (max-width: 575px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item-right { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; }
}

/* ── Quantity stepper ── */
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--r-full); background: rgba(255,255,255,0.05); overflow: hidden; }
.qty-stepper button { width: 34px; height: 34px; border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: 0.75rem; display: flex; align-items: center; justify-content: center; transition: all 0.15s var(--ease); }
.qty-stepper button:hover { background: var(--accent-soft-bg); color: var(--accent); }
.qty-stepper input { width: 36px; text-align: center; border: none; outline: none; font-family: inherit; font-weight: 700; font-size: 0.9rem; background: transparent; color: var(--text-title); -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Summary box ── */
.summary-box {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--r-lg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); padding: 26px;
}
@media (min-width: 992px) { .summary-box { position: sticky; top: 110px; } }
.summary-title { font-size: 1rem; font-weight: 800; color: var(--text-title); margin-bottom: 18px; }
.summary-items { border-bottom: 1px solid var(--hairline-soft); padding-bottom: 14px; margin-bottom: 14px; max-height: 260px; overflow-y: auto; }
.summary-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.87rem; }
.summary-item-name { color: var(--text-body); font-weight: 600; }
.summary-item-qty { color: var(--text-muted); font-weight: 700; font-size: 0.78rem; }
.summary-item-price { font-weight: 700; color: var(--text-title); white-space: nowrap; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 0.9rem; color: var(--text-muted); font-weight: 600; }
.summary-row .free { color: var(--accent); font-weight: 800; }
.summary-row.total-row { border-top: 1px solid var(--hairline); margin-top: 10px; padding-top: 16px; font-weight: 800; font-size: 1rem; color: var(--text-title); }
.summary-total-price { color: var(--accent); font-size: 1.5rem; font-weight: 800; }
.summary-box .btn-block + .btn-block { margin-top: 10px; }
.summary-actions { margin-top: 20px; }

/* ── Notes / alerts (muted semantic colors, dark-surface tuned) ── */
.note-box { border-radius: var(--r-md); padding: 14px 16px; font-size: 0.85rem; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; border: 1px solid; }
.note-box i { margin-top: 2px; flex-shrink: 0; }
.note-info { background: rgba(96,150,220,0.1); color: #9ec3ee; border-color: rgba(96,150,220,0.28); }
.note-success { background: var(--accent-soft-bg); color: var(--accent-hover); border-color: var(--accent-soft-border); }
.note-warn { background: rgba(216,168,64,0.1); color: #e0bd7a; border-color: rgba(216,168,64,0.28); }
.note-danger { background: rgba(220,100,90,0.1); color: #e69b93; border-color: rgba(220,100,90,0.28); }
.free-ship-note { background: var(--accent-soft-bg); color: var(--accent-hover); border: 1px solid var(--accent-soft-border); border-radius: var(--r-md); padding: 13px 16px; font-size: 0.8rem; font-weight: 700; display: flex; gap: 10px; align-items: center; margin-top: 18px; }

/* ── Option rows (shipping / payment) ── */
.option-row {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border: 1px solid var(--glass-border); border-radius: var(--r-md); cursor: pointer;
  transition: all var(--dur) var(--ease);
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.option-row + .option-row { margin-top: 10px; }
.option-row:hover { border-color: rgba(255,255,255,0.22); }
.option-row:has(input:checked), .option-row.selected { border-color: var(--accent); background: var(--accent-soft-bg); }
.option-row input[type=radio] { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.option-main { flex: 1; min-width: 0; }
.option-title { font-weight: 700; font-size: 0.92rem; color: var(--text-title); }
.option-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; font-weight: 600; }
.option-price { font-weight: 700; font-size: 0.9rem; color: var(--accent); white-space: nowrap; text-align: right; }
.option-price small { display: block; color: var(--text-muted); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.3px; }

/* ── Checkout layout ── */
.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 992px) { .checkout-grid { grid-template-columns: 1.75fr 1fr; } }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.form-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 6px; }

/* ── Status badges (semantic colors, muted for dark surfaces) ── */
.status-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; border-radius: var(--r-full); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; border: 1px solid; }
.status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pending    { background: rgba(216,168,64,0.12); color: #e0bd7a; border-color: rgba(216,168,64,0.3); }
.status-processing { background: rgba(96,150,220,0.12); color: #9ec3ee; border-color: rgba(96,150,220,0.3); }
.status-shipped    { background: rgba(160,120,220,0.12); color: #c3a8ee; border-color: rgba(160,120,220,0.3); }
.status-delivered  { background: var(--accent-soft-bg); color: var(--accent-hover); border-color: var(--accent-soft-border); }
.status-cancelled  { background: rgba(220,100,90,0.12); color: #e69b93; border-color: rgba(220,100,90,0.3); }

/* ── Order hero ── */
.order-hero {
  border-radius: var(--r-xl); padding: 46px 30px; text-align: center;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); margin-bottom: 28px;
}
.order-hero h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; color: var(--text-title); margin-bottom: 8px; letter-spacing: -0.02em; }
.order-hero p { color: var(--text-muted); font-size: 0.98rem; max-width: 480px; margin: 0 auto; line-height: 1.6; }
.order-hero .success-icon.cancel { background: #c9645a; }

/* ── Detail rows (order info) ── */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.detail-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin-bottom: 5px; }
.detail-value { font-weight: 700; font-size: 0.95rem; color: var(--text-title); }
.detail-value.accent { color: var(--accent); font-size: 1.1rem; }
.address-card { background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: 18px 20px; font-size: 0.9rem; line-height: 1.9; color: var(--text-body); }
.address-card strong { color: var(--text-title); }
.address-card i { color: var(--accent); width: 18px; margin-right: 6px; }

/* ── Timeline ── */
.timeline { display: flex; flex-direction: column; }
.timeline-item { display: flex; gap: 18px; position: relative; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 23px; top: 50px; bottom: 2px; width: 1px; background: var(--hairline); }
.timeline-item:last-child::before { display: none; }
.timeline-item.done::before { background: var(--accent-soft-border); }
.timeline-dot { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid var(--hairline); color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; z-index: 1; transition: all 0.3s var(--ease); }
.timeline-item.done .timeline-dot { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); box-shadow: var(--shadow-rim-sm); }
.timeline-content { padding-top: 3px; }
.timeline-label { font-weight: 700; font-size: 0.95rem; color: var(--text-muted); }
.timeline-item.done .timeline-label { color: var(--text-title); }
.timeline-date { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; font-weight: 600; }

/* ── Legal pages ── */
.legal-wrap { max-width: 760px; margin: 0 auto; }
.legal-toc {
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 24px 28px; margin-bottom: 36px;
}
.legal-toc-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin-bottom: 14px; }
.legal-toc a { display: block; padding: 6px 0; color: var(--accent); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
.legal-prose section { margin-bottom: 36px; }
.legal-prose h2 { font-size: 1.15rem; font-weight: 800; color: var(--text-title); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.legal-prose h2 .num { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-soft-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; border: 1px solid var(--accent-soft-border); }
.legal-prose p, .legal-prose li { font-size: 0.94rem; line-height: 1.9; color: var(--text-body); }
.legal-prose p { margin-bottom: 12px; }
.legal-prose ul { list-style: disc; padding-left: 24px; margin: 10px 0 14px; }
.legal-prose ol { list-style: decimal; padding-left: 24px; margin: 10px 0 14px; }
.legal-prose li { margin-bottom: 6px; }
.legal-prose strong { color: var(--text-title); }
.legal-updated { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; margin-bottom: 36px; }

/* ── Empty state ── */
.empty-state { text-align: center; padding: 70px 20px; }
.empty-state-icon { font-size: 3.6rem; color: var(--accent); opacity: 0.35; margin-bottom: 22px; }
.empty-state h2 { font-weight: 800; font-size: 1.3rem; color: var(--text-title); margin-bottom: 8px; }
.empty-state p { color: var(--text-muted); margin-bottom: 26px; font-weight: 600; }

/* ── Contact strip ── */
.contact-strip {
  margin-top: 40px;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.contact-strip-text h3 { font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; color: var(--text-title); }
.contact-strip-text p { color: var(--text-muted); font-size: 0.88rem; font-weight: 600; margin: 0; }
.contact-strip-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── Order success ── */
.success-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; color: var(--accent-text-on); font-size: 2rem; box-shadow: var(--shadow-rim-sm); }