/*
Theme Name:  Buy Best
Theme URI:   https://buybestcorp.com
Author:      Gordon Gao
Author URI:  https://buybestcorp.com
Description: Custom theme for Buy Best (百業超市) — Brooklyn's neighborhood grocery store.
Version:     3.0.0
License:     GNU General Public License v2 or later
Text Domain: buybest
*/

/* =============================================================
   TABLE OF CONTENTS
   1. Google Fonts
   2. CSS Variables
   3. Reset
   4. Global Utilities
   5. Typography Base
   6. Buttons
   7. Site Header
   8. Primary Nav
      - Language Switcher (dropdown trigger + panel)
      - Account Nav Item (icon + two-line label)
   9. Dropdown Menus
   10. Nav Sub-row (Address / Phone)
   11. Search Overlay
   12. Mobile Menu
   13. Hamburger Button
   14. Site Footer (card-based layout)
   15. Footer Newsletter Card
   16. Footer Columns (Help / Services — red header + white card)
   17. Footer Mid Row & Bottom Bar (centered)
   18. Responsive
   19. Landing Page
   20. Shop / Category Page
   21. Quick View Modal & Quantity Stepper
============================================================= */


/* ─── 1. Google Fonts ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Raleway:wght@300;400;500;600;700;800&family=Merriweather:ital,wght@0,300;0,400;0,700;1,400&family=Squada+One&family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');


/* ─── 2. CSS Variables ─────────────────────────────────────── */
:root {
  /* Colors — 60/30/10 rule */
  --color-bg:      #F9F5EC;   /* 60% — Warm White (background) */
  --color-red:     #C43022;   /* 30% — Maroon Red (nav, hero, CTAs) */
  --color-gold:    #F8BD39;   /* 10% — Golden Yellow (accents, badges) */
  --color-navy:    #1E356B;   /* Supporting — text accents, trust cues */
  --color-text:    #2A2A2A;   /* Body text — never pure black */
  --color-taupe:   #B89688;   /* Muted labels, placeholders */
  --color-cream:   #F0E8D5;   /* Alternate section background */
  --color-white:   #FFFFFF;

  /* Typography */
  --font-display:  'Bebas Neue', sans-serif;      /* Hero, deals, large titles */
  --font-ui:       'Raleway', sans-serif;          /* Nav, buttons, labels, listings */
  --font-body:     'Merriweather', serif;          /* Editorial, policies, About Us */
  --font-logo:     'Squada One', cursive;          /* Logo wordmark only */
  --font-zh:       'Noto Sans TC', 'Noto Sans SC', sans-serif; /* Chinese text */

  /* Spacing */
  --max-width:     1380px;
  --nav-height:    64px;

  /* Fluid spacing scale — replaces fixed px values across nav/footer/
     containers so layouts shrink smoothly with viewport width instead of
     snapping at hard breakpoint cliffs. Each scales between a floor and
     ceiling using clamp(min, preferred-vw, max). */
  --space-3xs: clamp(4px, 0.3vw, 6px);
  --space-2xs: clamp(6px, 0.5vw, 10px);
  --space-xs:  clamp(8px, 0.8vw, 12px);
  --space-sm:  clamp(12px, 1.2vw, 18px);
  --space-md:  clamp(16px, 2vw, 24px);
  --space-lg:  clamp(24px, 3.5vw, 40px);
  --space-xl:  clamp(32px, 5vw, 64px);

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  999px;

  /* Shadows */
  --sh-sm:  0 2px 8px rgba(42, 42, 42, 0.07);
  --sh-md:  0 6px 20px rgba(42, 42, 42, 0.11);
  --sh-lg:  0 16px 40px rgba(42, 42, 42, 0.16);

  /* Transitions */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --trans:  0.25s var(--ease);
}


/* ─── 3. Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}


/* ─── 4. Global Utilities ──────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip to main content link (accessibility) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 24px;
  z-index: 9999;
  background: var(--color-red);
  color: #fff;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
}

/* Chinese font scope */
:lang(zh),
:lang(zh-TW),
:lang(zh-CN),
.lang-zh {
  font-family: var(--font-zh), var(--font-ui), sans-serif;
}


/* ─── 5. Typography Base ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400; /* Bebas Neue is single-weight — 400 is correct */
  line-height: 1.05;
  color: var(--color-text);
}

p {
  font-family: var(--font-ui);
  line-height: 1.7;
}

/* Section label pill */
.label-pill {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red);
  background: rgba(196, 48, 34, 0.08);
  padding: 5px 14px;
  border-radius: var(--r-xl);
  margin-bottom: 10px;
}

/* Section heading */
.section-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--color-text);
  line-height: 1.0;
  margin-bottom: 8px;
}

.section-heading .hl {
  color: var(--color-red);
}


/* ─── 6. Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: var(--r-xl);
  transition: var(--trans);
  cursor: pointer;
  white-space: nowrap;
}

.btn-red {
  background: var(--color-red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(196, 48, 34, 0.3);
}
.btn-red:hover {
  background: #a8271d;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(196, 48, 34, 0.4);
}

.btn-gold {
  background: var(--color-gold);
  color: var(--color-text);
  box-shadow: 0 4px 14px rgba(248, 189, 57, 0.35);
}
.btn-gold:hover {
  background: #ffce4a;
  transform: translateY(-2px);
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  transform: translateY(-2px);
}


/* ─── 7. Site Header ───────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-red);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* Slight darkening on scroll — toggled by JS */
.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}


/* ─── 8. Primary Nav ───────────────────────────────────────── */
.nav-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  height: var(--nav-height);
  gap: 0;
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
  margin-right: var(--space-md);
  display: flex;
  align-items: center;
}
.nav-logo img {
  height: 48px;
  width: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
  transition: filter var(--trans);
}
.nav-logo img:hover {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

/* Nav links list — fixed to its natural content size (flex: 0 0 auto).
   Its own padding is already fluid via clamp() above, so it shrinks
   smoothly on its own terms. It no longer competes for space with
   flex:1 — that role now belongs to .nav-search, so nav-links can never
   force the search bar or action icons out of the viewport. */
.nav-links {
  display: flex;
  align-items: stretch;
  list-style: none;
  flex: 0 0 auto;
  height: 100%;
}

.nav-links > li {
  display: flex;
  align-items: stretch;
}

.nav-links > li > a {
  display: flex;
  align-items: center;
  padding: 0 clamp(8px, 1.1vw, 16px);
  height: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transition: background-color var(--trans);
}

.nav-links > li > a:hover,
.nav-links > li.current-menu-item > a,
.nav-links > li.current-menu-parent > a,
.nav-links > li.current-menu-ancestor > a {
  background: rgba(0, 0, 0, 0.18);
}

/* ─── Nav Search ────────────────────────────────────────────
   Desktop (>1300px): persistent bar, FLUID width — grows/shrinks smoothly
   with available space via flex + min/max-width, never a fixed px value.
   Tablet (769-1300px): icon-only, click expands the bar inline.
   Mobile (<=768px): icon-only, click opens the popup overlay.
============================================================= */
.nav-search {
  display: flex;
  align-items: center;
  margin-left: var(--space-md);
  position: relative;
  /* Fluid + shrinkable: this is the element that absorbs available space
     changes, so nav-links and nav-actions never get pushed off-screen. */
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

/* Icon-only trigger — hidden by default (desktop shows the full bar instead).
   Uses a compound selector (button.nav-search-icon-trigger) so its specificity
   reliably beats the shared .nav-icon-btn { display:flex } rule regardless of
   source order — this fixes the bug where the icon showed on every width. */
button.nav-search-icon-trigger {
  display: none;
}

.nav-search-bar {
  display: flex;
  align-items: stretch;
  height: 42px;
  /* Fluid width: grows up to 360px on wide screens, shrinks down to a
     220px floor as space tightens — never a fixed value, never causes
     overflow. This is the direct fix for the cart-icon-cutoff bug: the
     bar itself now yields space instead of forcing siblings out of view. */
  width: clamp(220px, 26vw, 360px);
  /* Explicit min-width (not 0) so flexbox's own shrink algorithm can never
     squeeze this below its intended floor, even under extreme pressure —
     it's a real, enforced minimum, not just a clamp() preference. */
  min-width: 220px;
  flex-shrink: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: width 0.28s var(--ease);
}

.nav-search-input-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  padding-right: 6px;
  flex: 1;
  min-width: 0;
}

.nav-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 16px;
  height: 100%;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text);
}
.nav-search-input::placeholder {
  color: var(--color-taupe);
}

/* Microphone icon — inside the white input, right edge */
.nav-search-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-taupe);
  flex-shrink: 0;
  transition: var(--trans);
}
.nav-search-mic:hover {
  background: var(--color-cream);
  color: var(--color-red);
}
.nav-search-mic svg {
  width: 17px;
  height: 17px;
}
.nav-search-mic.listening {
  color: #fff;
  background: var(--color-red);
  animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 48, 34, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(196, 48, 34, 0); }
}

/* Red submit button — compact, secondary to the dominant white input.
   Magnifying glass + "Search" but kept small so the input stays the focus. */
.nav-search-submit {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--trans);
  flex-shrink: 0;
}
.nav-search-submit:hover {
  background: #a8271d;
}
.nav-search-submit svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}


/* Right-side action buttons — SAFETY NET: flex-shrink: 0 means this
   cluster (language, account, cart, hamburger) can never be compressed
   or pushed out of the viewport. .nav-search (flex: 1 1 auto) is the
   only element that absorbs space pressure; this one never does. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  transition: background-color var(--trans);
  position: relative;
  flex-shrink: 0;
}
.nav-icon-btn:hover {
  background: rgba(0, 0, 0, 0.18);
}
.nav-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Cart badge */
.cart-count {
  position: absolute;
  top: 3px;
  right: 3px;
  background: var(--color-gold);
  color: var(--color-text);
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Language switcher — desktop dropdown trigger */
.lang-switcher-wrap {
  position: relative;
  margin: 0 6px;
}

.lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: var(--r-xl);
  color: #fff;
  transition: background-color var(--trans);
}
.lang-trigger:hover {
  background: rgba(0, 0, 0, 0.18);
}
.lang-trigger svg {
  flex-shrink: 0;
}
.lang-trigger svg:first-child {
  width: 17px;
  height: 17px;
}
.lang-current {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lang-chevron {
  width: 11px;
  height: 11px;
  transition: transform var(--trans);
}
.lang-trigger[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

/* Dropdown panel */
.lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 160px;
  background: #fff;
  border-top: 3px solid var(--color-gold);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-md);
  padding: 8px 0;
  z-index: 600;
}
.lang-dropdown.open {
  display: block;
}
.lang-option {
  display: block;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  transition: background-color var(--trans), color var(--trans);
}
.lang-option:hover {
  background: #fef9f0;
  color: var(--color-red);
}
.lang-option.active {
  color: var(--color-red);
  font-weight: 700;
}
/* Note: .mobile-lang pill styles live in the Mobile Menu section (§12) —
   the mobile language list reuses that block, no duplicate needed here. */


/* ─── Account Nav Item ──────────────────────────────────────── */
.nav-account {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-xl);
  color: #fff;
  transition: background-color var(--trans);
  max-width: 160px;
  flex-shrink: 0; /* part of the nav-actions safety net — never compresses */
}
.nav-account:hover {
  background: rgba(0, 0, 0, 0.18);
}
.nav-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-account-icon svg {
  width: 19px;
  height: 19px;
}
.nav-account-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0; /* allow ellipsis truncation */
  overflow: hidden;
}
.nav-account-line1,
.nav-account-line2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-account-line1 {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
}
.nav-account-line2 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}


/* ─── 9. Dropdown Menus ────────────────────────────────────── */
.nav-links .menu-item-has-children {
  position: relative;
}

/* Dropdown arrow on parent link */
.nav-links .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(255, 255, 255, 0.65);
  border-bottom: 2px solid rgba(255, 255, 255, 0.65);
  transform: rotate(45deg) translateY(-2px);
  margin-left: 6px;
  flex-shrink: 0;
  transition: transform var(--trans);
}

.nav-links .menu-item-has-children:hover > a::after {
  transform: rotate(225deg) translateY(-2px);
}

/* Sub-menu panel */
.nav-links .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-top: 3px solid var(--color-gold);
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: var(--sh-md);
  padding: 8px 0;
  list-style: none;
  z-index: 500;
}

/* Show on hover or focus-within (keyboard accessible) */
.nav-links .menu-item-has-children:hover > .sub-menu,
.nav-links .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}

.nav-links .sub-menu li a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  transition: background-color var(--trans), color var(--trans);
  text-decoration: none;
}

.nav-links .sub-menu li a:hover {
  background: #fef9f0;
  color: var(--color-red);
}

/* Divider inside dropdown (optional — use on Deals items) */
.nav-links .sub-menu .menu-item-divider a {
  border-top: 1px solid #f0ede8;
  margin-top: 4px;
  padding-top: 14px;
}

/* Dropdown-arrow color for items with children INSIDE a dropdown panel
   (e.g. "Pantry & Snacks") — the default chevron (above) is white, meant
   for the red nav bar. On the white/cream dropdown panel that renders as
   an invisible white-on-white arrow, so nested items need a dark one. */
.nav-links .sub-menu .menu-item-has-children > a::after {
  border-right-color: rgba(42, 42, 42, 0.45);
  border-bottom-color: rgba(42, 42, 42, 0.45);
}

/* Nested sub-menu (subcategories, e.g. Pantry & Snacks -> Snacks/Drinks/
   Pantry Staples): expand in place on hover instead of flying out as a
   separate absolutely-positioned panel that covers the sibling categories
   below it. Still hover-triggered (same :hover/:focus-within rule above),
   just no longer position: absolute, so it pushes later siblings down. */
.nav-links .sub-menu .sub-menu {
  position: static;
  min-width: 0;
  background: #fef9f0;
  border-top: none;
  border-radius: 0;
  box-shadow: none;
  margin: 2px 0 4px 20px;
  padding: 4px 0;
  border-left: 2px solid rgba(248, 189, 57, 0.45);
}

.nav-links .sub-menu .sub-menu li a {
  padding: 8px 8px 8px 16px;
  font-size: 12.5px;
  font-weight: 500;
}


/* ─── 10. Nav Sub-row — Zip Checker + Address/Phone ────────── */
.nav-subrow {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-subrow-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 5px var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ── Zip Checker (left side) ─────────────────────────────── */
.zip-checker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.zip-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.85);
}

.zip-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.zip-input-wrap {
  display: flex;
  align-items: stretch;
  height: 26px;
  border-radius: var(--r-xl);
  overflow: hidden;
}

.zip-input {
  width: 88px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-text);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  transition: background-color var(--trans);
}
.zip-input::placeholder {
  color: var(--color-taupe);
}
.zip-input:focus {
  background: #fff;
}

.zip-btn {
  padding: 0 10px;
  background: var(--color-gold);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  transition: background-color var(--trans);
  cursor: pointer;
}
.zip-btn:hover {
  background: #ffce4a;
}
.zip-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inline result message */
.zip-result {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  min-width: 0;
  display: none; /* hidden until a check is run */
}
.zip-result.visible {
  display: inline;
}
.zip-result.zip-success {
  color: #7fdf8a; /* light green — readable on red background */
}
.zip-result.zip-error {
  color: var(--color-gold); /* gold — visible on red without clashing */
}

/* ── Store Info (right side) ─────────────────────────────── */
.zip-store-info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-subrow-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.nav-subrow-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}
.nav-subrow-item a {
  color: rgba(255, 255, 255, 0.8);
  transition: color var(--trans);
}
.nav-subrow-item a:hover {
  color: #fff;
}


/* ─── 11. Search Overlay ───────────────────────────────────── */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 42, 42, 0.93);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.search-overlay.active {
  display: flex;
}

.search-overlay-inner {
  width: 100%;
  max-width: 640px;
  position: relative;
}

.search-overlay .search-close {
  position: absolute;
  top: -48px;
  right: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  padding: 4px 8px;
  transition: color var(--trans);
}
.search-overlay .search-close:hover {
  color: #fff;
}

/* WordPress search form reset inside overlay */
.search-overlay .search-form {
  display: flex;
  gap: 0;
}
.search-overlay .search-field {
  flex: 1;
  padding: 16px 20px;
  font-size: 16px;
  border: none;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  outline: none;
  font-family: var(--font-ui);
  color: var(--color-text);
}
.search-overlay .search-submit {
  padding: 16px 28px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  cursor: pointer;
  transition: background-color var(--trans);
  border: none;
}
.search-overlay .search-submit:hover {
  background: #a8271d;
}


/* ─── 12. Mobile Menu ──────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 100vw);
  background: var(--color-red);
  z-index: 1800;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease);
}

.mobile-nav.open {
  display: flex;
  transform: translateX(0);
}

.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-nav-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  transition: background-color var(--trans);
}
.mobile-nav-close:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Mobile nav links — flat list with sub-items indented */
.mobile-nav .mobile-links {
  padding: 12px 0;
  flex: 1;
}

.mobile-nav .mobile-links li > a {
  display: block;
  padding: 13px 24px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  transition: background-color var(--trans);
}
.mobile-nav .mobile-links li > a:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* Sub-menu items on mobile — indented and lighter */
.mobile-nav .mobile-links .sub-menu {
  display: block;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  margin-left: 24px;
}
.mobile-nav .mobile-links .sub-menu li a {
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}
.mobile-nav .mobile-links .sub-menu li a:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
}

/* Mobile language switcher */
.mobile-lang {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-lang .lang-btn {
  padding: 8px 16px;
  font-size: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.8);
}
.mobile-lang .lang-btn.active,
.mobile-lang .lang-btn[aria-current="true"] {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* Dim overlay behind mobile menu */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42, 42, 42, 0.55);
  z-index: 1700;
}
.mobile-overlay.active {
  display: block;
}


/* ─── 13. Hamburger Button ─────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  padding: 8px;
  margin-left: 4px;
  transition: background-color var(--trans);
}
.hamburger:hover {
  background: rgba(0, 0, 0, 0.18);
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ─── 14. Site Footer ──────────────────────────────────────── */
.site-footer {
  background: var(--color-text); /* #2A2A2A — kept as outer footer background */
  color: rgba(255, 255, 255, 0.55);
}

/* Shared white card base — used by Newsletter, Help, Services */
.footer-card {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  overflow: hidden; /* clips the red header bar to the card's rounded corners */
}


/* ─── 15. Footer Newsletter ────────────────────────────────── */
/* minmax() on each column keeps the Newsletter card's intentionally wider
   proportion (1.4fr vs 1fr) while still being fluid — every column has a
   real floor width, so the grid can never force a card narrower than its
   content needs (no fixed px, no overflow). Column COUNT still changes at
   the 1024px/768px breakpoints below (that's a deliberate layout choice,
   not a bug) — but each state in between is now fluid rather than fixed. */
.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(240px, 1fr) minmax(240px, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}

.footer-newsletter {
  padding: var(--space-lg);
}

.footer-newsletter h3 {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 16px;
}

.footer-divider {
  border: none;
  border-top: 1px solid var(--color-cream);
  margin: 16px 0;
}

/* Social icons row — solid red filled circles */
.footer-socials {
  display: flex;
  gap: 10px;
}

.footer-soc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-red);
  color: #fff;
  transition: var(--trans);
}
.footer-soc-btn:hover {
  background: #a8271d;
  transform: translateY(-2px);
}
.footer-soc-btn svg {
  width: 17px;
  height: 17px;
}

.footer-newsletter-label {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

/* Newsletter form */
.footer-nl-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nl-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-nl-row {
  display: flex;
  gap: 0;
}

.footer-nl-input {
  flex: 1;
  padding: 11px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-cream);
  border-right: none;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  color: var(--color-text);
  font-size: 13px;
  font-family: var(--font-ui);
  outline: none;
  transition: border-color var(--trans);
}
.footer-nl-input::placeholder {
  color: var(--color-taupe);
}
.footer-nl-input:focus {
  border-color: var(--color-red);
}

.footer-nl-btn {
  padding: 11px 20px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  cursor: pointer;
  transition: background-color var(--trans);
  white-space: nowrap;
}
.footer-nl-btn:hover {
  background: #a8271d;
}

.footer-nl-options {
  align-self: flex-end;
  font-size: 11px;
  color: var(--color-taupe);
  text-decoration: underline;
  transition: color var(--trans);
}
.footer-nl-options:hover {
  color: var(--color-red);
}

.footer-nl-or {
  font-size: 11px;
  text-align: center;
  color: var(--color-taupe);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ─── 16. Footer Columns (Help / Services) ─────────────────── */
/* Red header bar */
.footer-col h4 {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--color-red);
  padding: 16px 20px;
  margin: 0;
}

/* White body list */
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px 24px;
}

.footer-col ul li a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--trans);
}
.footer-col ul li a:hover {
  color: var(--color-red);
}


/* ─── 17. Footer Mid Row & Bottom Bar ──────────────────────── */
/* Centered, stacked country selector + brand mark */
.footer-mid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.footer-country select {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-family: var(--font-ui);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
}

.footer-brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-logo);
  font-size: 20px;
  letter-spacing: 0.02em;
}
.footer-brand-mark img {
  height: 36px;
  width: auto;
}

/* Centered legal bar */
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  transition: color var(--trans);
  padding: 2px 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-legal a:last-child {
  border-right: none;
}
.footer-legal a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.footer-copyright {
  color: rgba(255, 255, 255, 0.3);
}


/* ─── 19. Landing Page ─────────────────────────────────────── */

/* Shared section padding and header layout used across all LP sections */
.lp-hero,
.lp-trust,
.lp-deals,
.lp-departments,
.lp-story {
  padding: var(--space-xl) var(--space-md);
}

.lp-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: 16px;
  flex-wrap: wrap;
}

.lp-view-all {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-red);
  white-space: nowrap;
  transition: gap var(--trans);
}
.lp-view-all:hover { gap: 8px; }
.lp-view-all svg { width: 13px; height: 13px; }

/* ── Section 1: Hero ─────────────────────────────────────── */
.lp-hero {
  display: grid;
  grid-template-columns: 52% 48%;
  min-height: 88vh;
  padding: 0;
  gap: 0;
  background: var(--color-red);
}

/* Left panel */
.lp-hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px);
  background: var(--color-bg);
  position: relative;
  z-index: 1;
}

.lp-hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 68px);
  line-height: 1.0;
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.lp-hero-title-accent {
  color: var(--color-red);
}

.lp-hero-cta {
  align-self: flex-start;
  margin-bottom: var(--space-md);
  font-size: 14px;
  padding: 14px 32px;
}

.lp-hero-info {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: rgba(42, 42, 42, 0.65);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* Payment logos */
.lp-payment {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lp-pay-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: rgba(42, 42, 42, 0.55);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lp-pay-logos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lp-pay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  background: rgba(42, 42, 42, 0.06);
  border: 1px solid rgba(42, 42, 42, 0.18);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* TODO: Replace .lp-pay-badge text items with <img> logo assets when provided */
.lp-pay-ebt {
  background: rgba(112, 130, 54, 0.15);
  border-color: rgba(112, 130, 54, 0.45);
  color: #4f5c1f;
}

/* Right panel — carousel container */
.lp-hero-right {
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

/* ── Hero Carousel ───────────────────────────────────────── */
.lp-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
}

.lp-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

.lp-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Placeholder slide — remove when real photos are added */
.lp-carousel-placeholder {
  width: 100%;
  height: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  gap: 8px;
}
.lp-carousel-placeholder--2 { background: rgba(0, 0, 0, 0.35); }
.lp-carousel-placeholder--3 { background: rgba(0, 0, 0, 0.20); }

.lp-carousel-placeholder span {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.lp-carousel-placeholder small {
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}

/* Real photo inside a slide — fills the slide fully */
.lp-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev / next arrow buttons */
.lp-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  transition: background-color var(--trans), border-color var(--trans);
  cursor: pointer;
}
.lp-carousel-arrow:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.6);
}
.lp-carousel-arrow svg { width: 18px; height: 18px; }

.lp-carousel-prev { left: 14px; }
.lp-carousel-next { right: 14px; }

/* Dot indicators */
.lp-carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.lp-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  transition: background-color var(--trans), transform var(--trans);
  padding: 0;
}
.lp-carousel-dot.active,
.lp-carousel-dot:hover {
  background: #fff;
  transform: scale(1.25);
}

/* ── Section 2: Trust Bar ────────────────────────────────── */
.lp-trust {
  background: var(--color-cream);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

.lp-trust-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.lp-trust-years {
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 10px;
}

.lp-trust-tagline {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 72px);
  line-height: 1.0;
  color: var(--color-text);
}

/* ── Section 3: Deals ────────────────────────────────────── */
.lp-deals {
  background: var(--color-bg);
}

.lp-deals > .lp-section-header,
.lp-deals > .lp-deals-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

.lp-deals-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Arrow buttons on the deal rail */
.lp-rail-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--color-taupe);
  background: #fff;
  color: var(--color-text);
  flex-shrink: 0;
  transition: var(--trans);
  cursor: pointer;
  z-index: 2;
}
.lp-rail-arrow:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: #fff;
}
.lp-rail-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.lp-rail-arrow svg { width: 17px; height: 17px; }

/* The scrollable rail */
.lp-deals-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scroll-behavior: smooth;
  /* Custom scrollbar — visible but subtle */
  scrollbar-width: thin;
  scrollbar-color: var(--color-taupe) var(--color-cream);
}
.lp-deals-rail::-webkit-scrollbar       { height: 6px; }
.lp-deals-rail::-webkit-scrollbar-track  { background: var(--color-cream); border-radius: 3px; }
.lp-deals-rail::-webkit-scrollbar-thumb  { background: var(--color-taupe); border-radius: 3px; }

/* Deal product card */
.lp-deal-card {
  flex-shrink: 0;
  width: clamp(180px, 20vw, 220px);
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--trans), box-shadow var(--trans);
}
.lp-deal-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-md);
}

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

.lp-deal-img {
  position: relative;
  height: 160px;
  background: var(--color-bg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-deal-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-deal-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-cream);
}

.lp-deal-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
}

.lp-deal-body {
  padding: 12px 14px 14px;
}

.lp-deal-name {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-deal-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.lp-deal-sale {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-red);
}

.lp-deal-orig {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-taupe);
  text-decoration: line-through;
}

/* ── Section 4: Shop by Departments ─────────────────────── */
.lp-departments {
  background: var(--color-cream);
}

.lp-departments > .lp-section-header,
.lp-departments > .lp-dept-grid {
  max-width: var(--max-width);
  margin: 0 auto;
}

.lp-dept-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: start;
}

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--trans);
}
.cat-tile:hover {
  transform: translateY(-4px);
}
.cat-tile:hover .cat-tile-circle {
  box-shadow: 0 8px 24px rgba(196, 48, 34, 0.22);
}

.cat-tile-circle {
  width: clamp(90px, 12vw, 140px);
  height: clamp(90px, 12vw, 140px);
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--trans);
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-tile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cat-tile-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-cream), var(--color-taupe));
}

.cat-tile-name {
  font-family: var(--font-ui);
  font-size: clamp(11px, 1.1vw, 14px);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}

.cat-tile-count {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-taupe);
  text-align: center;
  margin-top: -6px;
}

/* ── Section 5: Community Brand Story ───────────────────── */
.lp-story {
  background: var(--color-bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Override the max-width centering for the section background */
.lp-story-outer {
  background: var(--color-bg);
}

.lp-story-text p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: 16px;
}

.lp-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-red);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 8px;
  transition: gap var(--trans);
  text-decoration: none;
}
.lp-story-cta:hover { gap: 10px; }
.lp-story-cta svg { width: 14px; height: 14px; }

/* Right side: stacked photos */
.lp-story-photos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-story-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-md);
}

.lp-story-photo--store {
  aspect-ratio: 16 / 9;
}
.lp-story-photo--owner {
  aspect-ratio: 16 / 7;
}

.lp-story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lp-story-placeholder {
  width: 100%;
  height: 100%;
  min-height: 180px;
  background: var(--color-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lp-story-placeholder--owner {
  min-height: 120px;
  background: #ede3d4;
}
.lp-story-placeholder span {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-taupe);
}
.lp-story-placeholder small {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--color-taupe);
  opacity: 0.6;
}

/* ── Landing Page Responsive ─────────────────────────────── */
@media (max-width: 1100px) {
  .lp-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .lp-hero-right {
    min-height: 360px;
  }
  .lp-dept-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .lp-story {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .lp-dept-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .lp-deals-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .lp-rail-arrow { display: none; }
  .lp-deals-rail { padding-bottom: 10px; }
  .lp-hero-left {
    padding: clamp(32px, 5vw, 56px) var(--space-md);
  }
}

@media (max-width: 540px) {
  .lp-dept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-trust-tagline {
    font-size: clamp(26px, 7vw, 40px);
  }
}


/* ─── 20. Shop / Category Page ────────────────────────────── */

/* ── Page Header / Breadcrumb ── */
.shop-header {
  background: var(--color-cream);
  padding: var(--space-lg) var(--space-md);
}
.shop-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.bb-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0 0 var(--space-sm);
  padding: 0;
  font-family: var(--font-ui);
  font-size: 13px;
}
.bb-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
  color: var(--color-taupe);
}
.bb-breadcrumb a {
  color: var(--color-taupe);
  text-decoration: none;
  transition: color var(--trans);
}
.bb-breadcrumb a:hover {
  color: var(--color-red);
}
.bb-breadcrumb span[aria-current] {
  color: var(--color-text);
  font-weight: 600;
}

.shop-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.shop-description {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 70ch;
  margin: 0;
}

/* ── Subcategory Tiles ── */
.shop-subcats {
  background: var(--color-bg);
  padding: var(--space-lg) var(--space-md);
}
.shop-subcat-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
}
.shop-subcat-grid .cat-tile {
  width: clamp(120px, 14vw, 160px);
}

/* ── Controls Row ── */
.shop-controls {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg);
  flex-wrap: wrap;
}

.shop-filter-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-cream);
  border-radius: var(--r-xl);
  padding: 10px 18px;
  cursor: pointer;
  transition: var(--trans);
}
.shop-filter-toggle:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

.shop-item-count {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-taupe);
  margin: 0;
  flex: 1;
}

.shop-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
}
.shop-sort label {
  color: var(--color-taupe);
  white-space: nowrap;
}
.shop-sort select {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-cream);
  border-radius: var(--r-xl);
  padding: 9px 16px;
  cursor: pointer;
}

/* ── Filter Sidebar + Product Grid ── */
.shop-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-lg);
  padding: 0 var(--space-md) var(--space-xl);
  align-items: start;
}

.shop-filter-overlay {
  display: none;
}

.shop-sidebar {
  position: sticky;
  top: calc(var(--header-offset, 64px) + var(--space-md));
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.shop-sidebar-head {
  display: none;
  align-items: center;
  justify-content: space-between;
}
.shop-sidebar-head h2 {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.shop-filter-close {
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 4px;
}

.shop-filter-group {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-cream);
}
.shop-filter-group:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.shop-filter-group h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

.shop-price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-price-inputs input {
  width: 100%;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  border: 1px solid var(--color-cream);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
.shop-price-inputs span {
  color: var(--color-taupe);
}

.shop-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text);
  padding: 6px 0;
  cursor: pointer;
}
.shop-filter-checkbox input {
  accent-color: var(--color-red);
  width: 16px;
  height: 16px;
}

.shop-filter-apply {
  width: 100%;
  justify-content: center;
  border: none;
}

/* ── Product Grid ── */
.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  align-content: start;
}

.shop-empty {
  grid-column: 1 / -1;
  font-family: var(--font-ui);
  color: var(--color-taupe);
  text-align: center;
  padding: var(--space-xl) 0;
}

/* ── Product Card (Product Card Standard) ── */
.shop-product-card {
  position: relative;
  background: #fff;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--trans), transform var(--trans);
  display: flex;
  flex-direction: column;
}
.shop-product-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.shop-card-img-btn {
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.shop-card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-cream), var(--color-taupe));
}

.shop-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--r-xl);
}

.shop-card-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.shop-card-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
}
.shop-card-title:hover {
  color: var(--color-red);
}

.shop-card-info {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-taupe);
  margin: 0;
  line-height: 1.4;
}

.shop-card-packsize {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-taupe);
  margin: 0;
}

.shop-card-price-row {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.shop-card-price {
  font-family: var(--font-ui);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.shop-card-sale {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-red);
}
.shop-card-orig {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-taupe);
  text-decoration: line-through;
}

.shop-card-cart-slot {
  flex-shrink: 0;
}

.shop-card-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--color-red);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: var(--trans);
}
.shop-card-cart-btn svg {
  width: 18px;
  height: 18px;
}
.shop-card-cart-btn:hover {
  background: #a8271d;
}
.shop-card-cart-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.shop-card-oos {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-taupe);
  white-space: nowrap;
}

/* ── Pagination ── */
.shop-pagination {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}
.shop-pagination ul {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: var(--trans);
}
.shop-pagination a.page-numbers:hover {
  background: var(--color-cream);
}
.shop-pagination .page-numbers.current {
  background: var(--color-red);
  color: #fff;
}

.shop-pagination-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-sm);
  font-family: var(--font-ui);
  font-size: 13px;
}
.shop-pagination-jump label {
  color: var(--color-taupe);
  white-space: nowrap;
}
.shop-pagination-jump input {
  width: 64px;
  font-family: var(--font-ui);
  font-size: 13px;
  text-align: center;
  border: 1px solid var(--color-cream);
  border-radius: var(--r-sm);
  padding: 8px 6px;
}
.shop-pagination-jump button {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-cream);
  border-radius: var(--r-sm);
  padding: 8px 14px;
  cursor: pointer;
  transition: var(--trans);
}
.shop-pagination-jump button:hover {
  border-color: var(--color-red);
  color: var(--color-red);
}

/* ── Shop / Category Page Responsive ─────────────────────── */
@media (max-width: 1100px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-filter-toggle {
    display: flex;
  }

  .shop-filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(42, 42, 42, 0.5);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--trans);
  }
  .shop-filter-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(320px, 85vw);
    max-width: 320px;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform var(--trans);
    z-index: 91;
    overflow-y: auto;
  }
  .shop-sidebar.open {
    transform: translateX(0);
  }

  .shop-sidebar-head {
    display: flex;
  }
}

@media (max-width: 768px) {
  .shop-product-grid {
    grid-template-columns: 1fr;
  }
  .shop-controls {
    justify-content: space-between;
  }
  .shop-item-count {
    order: 3;
    flex: 1 0 100%;
  }
}


/* ─── 21. Quick View Modal & Quantity Stepper ─────────────────────── */

/* ── Shared quantity stepper (used by both the card and the modal —
   the add-to-cart button is replaced by this markup in place once an
   item is added) ── */
.qty-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-cream);
  border-radius: var(--r-xl);
  padding: 4px;
}
.qty-stepper button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #fff;
  border: none;
  border-radius: 50%;
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--trans);
}
.qty-stepper button:hover {
  color: var(--color-red);
}
.qty-stepper button:disabled {
  opacity: 0.4;
  cursor: default;
}
.qty-stepper .qty-stepper-value {
  min-width: 20px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

/* ── Quick View Modal ── */
.qv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 42, 42, 0.6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--trans);
}
.qv-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.qv-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(880px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  z-index: 201;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--trans), transform var(--trans);
}
.qv-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.qv-close,
.qv-nav {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--trans);
}
.qv-close:hover,
.qv-nav:hover {
  color: var(--color-red);
}
.qv-close {
  top: 14px;
  right: 14px;
}
.qv-nav {
  top: 50%;
  transform: translateY(-50%);
}
.qv-prev {
  left: 14px;
}
.qv-next {
  right: 14px;
}
.qv-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.qv-content {
  padding: var(--space-lg);
}
.qv-loading {
  font-family: var(--font-ui);
  color: var(--color-taupe);
  text-align: center;
  padding: var(--space-xl) 0;
}

.qv-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.qv-gallery-main {
  aspect-ratio: 1 / 1;
  background: var(--color-bg);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qv-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qv-gallery-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-cream), var(--color-taupe));
}
.qv-gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.qv-gallery-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
}
.qv-gallery-thumb.active {
  border-color: var(--color-red);
}
.qv-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.qv-details {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qv-wishlist {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border: none;
  border-radius: 50%;
  color: var(--color-text);
  cursor: pointer;
  transition: var(--trans);
}
.qv-wishlist:hover,
.qv-wishlist[aria-pressed="true"] {
  color: var(--color-red);
}
.qv-wishlist[aria-pressed="true"] svg {
  fill: currentColor;
}

.qv-name {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  padding-right: 40px;
}
.qv-info {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-taupe);
  margin: 0;
}
.qv-packsize {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-taupe);
  margin: 0;
}

.qv-flavor {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qv-flavor label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.qv-flavor select {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-cream);
  border-radius: var(--r-sm);
  padding: 9px 12px;
}

.qv-price {
  font-family: var(--font-ui);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.qv-price-sale {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-red);
}
.qv-price-orig {
  font-size: 15px;
  color: var(--color-taupe);
  text-decoration: line-through;
}

.qv-cart-slot {
  margin-top: 4px;
}
.qv-cart-btn {
  width: 100%;
  justify-content: center;
}
.qv-oos {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-taupe);
}

.qv-description {
  border-top: 1px solid var(--color-cream);
  padding-top: var(--space-sm);
  margin-top: 6px;
}
.qv-description h3 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin: 0 0 8px;
}
.qv-description-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
}

@media (max-width: 768px) {
  .qv-body {
    grid-template-columns: 1fr;
  }
  .qv-modal {
    width: 94vw;
    max-height: 92vh;
  }
}


/* ─── 18. Responsive ───────────────────────────────────────── */

/* Tablet: search bar collapses to icon-only, expands inline on click.
   The bar is absolutely positioned relative to .nav-search (anchored at
   the icon's position) so it overlays the empty gap leftward without
   shifting the icon, nav-links, or nav-actions.
   Breakpoint raised to 1300px (was 1200px) — with the fluid nav-links
   padding and search bar now in place, the persistent bar can comfortably
   hold its 220px floor down to about 1300px real width before tablet mode
   is actually needed, adding buffer margin instead of sitting right at
   the edge of common scaled-display widths (e.g. 1900px @ 150% = ~1267px). */
@media (max-width: 1300px) {
  button.nav-search-icon-trigger {
    display: flex; /* show the icon trigger */
  }
  .nav-search-bar {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 50;
  }
  .nav-search.expanded .nav-search-bar {
    opacity: 1;
    pointer-events: auto;
    /* width is set inline by JS to fill the gap up to "About Us" */
  }
}

/* Tablet (existing footer breakpoint) — column COUNT changes here (3 -> 2),
   a deliberate layout decision. Widths within that 2-column state are
   still fluid via minmax(). */
@media (max-width: 1024px) {
  .footer-top {
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
    gap: var(--space-lg);
  }
  .footer-newsletter {
    grid-column: span 2;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* Show hamburger, hide desktop nav */
  .hamburger {
    display: flex;
  }
  .nav-links {
    display: none;
  }
  .lang-switcher-wrap {
    display: none; /* Language dropdown is in mobile menu instead */
  }
  .nav-subrow {
    display: none; /* Address/phone hidden on mobile */
  }

  /* Search: icon-only trigger opens the popup overlay instead of expanding inline */
  .nav-search {
    position: static;
    margin-left: 0;
  }
  .nav-search-bar {
    display: none; /* Inline expand is a tablet-only behavior */
  }

  /* Account: icon only on mobile, text hidden to save space */
  .nav-account {
    max-width: none;
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
  }
  .nav-account-text {
    display: none;
  }

  /* Footer single column */
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }
  .footer-newsletter {
    grid-column: auto;
    padding: var(--space-md);
  }
}

@media (max-width: 480px) {
  :root {
    --nav-height: 56px;
  }
  .nav-logo img {
    height: 40px;
  }
  .footer-nl-row {
    flex-direction: column;
  }
  .footer-nl-input {
    border-right: 1px solid var(--color-cream);
    border-radius: var(--r-xl);
  }
  .footer-nl-btn {
    border-radius: var(--r-xl);
    text-align: center;
  }
  .footer-nl-options {
    align-self: flex-start;
  }
}