/* ==========================================================================
   BHealthy — design tokens: logo-derived palette (emerald green "bh" +
   warm bronze "ealthy"), softened radii, Inter type
   ========================================================================== */
:root {
  --color-bg: #FAF8F5;
  --color-surface: #FFFFFF;
  --color-text: #111827;
  --color-text-muted: #6B7280;
  --color-border: #E5E7EB;
  --color-brand-green: #15A34A;
  --color-brand-green-dark: #059669;
  --color-brand-bronze: #d2b594;
  --color-brand-bronze-dark: #B45309;
  --color-brand-gold: #c69c6c;
  --color-brand-gold-dark: #B45309;
  --color-cta-bg: var(--color-brand-green-dark);
  --color-cta-bg-hover: #047857;
  --color-cta-text: #FFFFFF;
  --color-sale: #DC2626;
  --color-halal: var(--color-brand-green-dark);
  --color-star: var(--color-brand-bronze);
  --color-goal-bg: #FAF8F5;
  --color-forest-dark: #064E3B;
  --color-amber-pill: #FEF3C7;
  --color-amber-pill-text: #92400E;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 10px 24px rgba(17, 24, 39, 0.09);

  --container-max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; width: 100%; }
.hero-carousel, .hero-slide, .header-inner, .product-grid-4, .cart-page, .info-page,
.account-page, .pdp-layout, .listing-layout, main, .section, .section-header,
.goal-card-grid, .top-category-grid, .mini-trust-inner, .carousel,
.blog-page, .blog-detail-layout, .blog-grid { max-width: 100%; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }

.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { opacity: 0.92; box-shadow: 0 6px 16px rgba(22, 101, 52, 0.22); }
.btn-large { width: 100%; padding: 1.1rem; font-size: 0.85rem; }

/* ==========================================================================
   Header — 3 tiers: white deals topbar / solid green search bar / white
   category nav row (per explicit reference-screenshot spec)
   ========================================================================== */
.topbar {
  background: #059669;
  border-bottom: 1px solid #059669;
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
}
.topbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.topbar-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--color-amber-pill);
  color: var(--color-amber-pill-text);
  font-weight: 800;
  white-space: nowrap;
}
.topbar-pill-outline { background: transparent; border: 1px solid rgba(255,255,255,0.6); color: #FFFFFF; }
.topbar-pill svg:last-child { opacity: 0.6; }
.topbar-countdown { font-weight: 800; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-region {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: var(--radius-pill);
  font-weight: 800;
  white-space: nowrap;
  color: #FFFFFF;
}
.topbar-currency-toggle { color: rgba(255,255,255,0.65); text-decoration: none; font-weight: 800; }
.topbar-currency-toggle.is-active { color: #FFFFFF; text-decoration: underline; }
.topbar-currency-toggle:hover { color: #FFFFFF; }
.topbar-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: none;
  color: #FFFFFF;
  cursor: pointer;
}
@media (max-width: 700px) {
  .topbar-pill-outline .topbar-countdown { display: none; }
  .topbar-region { display: none; }
}
@media (max-width: 480px) {
  .topbar-inner { padding: 0.5rem 1rem; }
  .topbar-pill span { display: none; }
}

.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  position: relative;
  width: 100%;
  margin: 0;
  /* No longer capped to --container-max/centered — on big screens that
     left a band of empty space outside the 1280px box on either side,
     so the logo and cart/account weren't actually at the screen edges.
     Full-bleed row with its own edge padding instead. */
  padding: 0.9rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 1600px) {
  .header-inner { padding-left: 3rem; padding-right: 3rem; }
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 48px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  display: block;
}
@media (min-width: 1200px) {
  .logo-img { height: 56px; max-width: 230px; }
}

.header-actions { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.mobile-actions-toggle {
  display: none;
  position: relative;
  background: none;
  border: none;
  color: #059669;
  padding: 0.4rem;
  flex-shrink: 0;
}
.mobile-actions-toggle .cart-badge { top: -4px; right: -4px; }
.cart-link {
  display: flex;
  align-items: center;
  color: #059669;
  font-weight: 700;
}
.header-icon-wrap { position: relative; display: flex; color: #059669; }
.cart-badge {
  background: #fff;
  color: var(--color-brand-green-dark);
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  position: absolute;
  top: -8px;
  right: -8px;
}

/* Full-width pill search bar, centered in the green bar */
.search-bar {
  position: relative;
  flex: 1;
  /* Cap + auto-margin so it stays a sane, centered search field between
     the logo and account/cart instead of stretching edge-to-edge on
     very wide monitors now that the header itself is full-bleed. */
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 9999px;
  padding: 0 0.5rem 0 1.1rem;
  background: #fff;
  border: 2px solid #059669;
}
.search-bar > svg { display: none; }
.search-bar input {
  flex: 1;
  border: none;
  padding: 0.75rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  background: transparent;
  outline: none;
  color: var(--color-text);
}
.search-bar button {
  background: transparent;
  color: var(--color-brand-green-dark);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  max-height: 320px;
  overflow-y: auto;
  z-index: 60;
  text-align: left;
}
.search-suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.search-suggestion-item:last-child { border-bottom: none; }
.search-suggestion-item img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--radius-sm); }
.search-suggestion-item:hover { background: var(--color-bg); }

/* Row 3: white category nav */
.mega-menu {
  width: 100%;
  max-width: 100%;
  background: #ecdfd0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.mega-menu-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  /* "safe center" — center the bar when everything fits, but the moment
     it overflows, fall back to start-alignment so the scroll position
     opens on the FIRST item instead of the browser centering the
     scrollable content and clipping both ends equally (which is what
     plain "center" does, and why items looked like they'd vanished on
     smaller laptop screens rather than being one scroll away). */
  justify-content: safe center;
  gap: 1.85rem;
  width: max-content;
  min-width: 100%;
}
.mega-menu-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0.85rem 0;
  font-weight: 800;
  font-size: 0.98rem;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
}
.mega-menu-list { display: flex; gap: 2rem; align-items: center; flex-shrink: 0; }
.mega-menu-spacer { display: none; }
.mega-menu-item-accent > a { color: var(--color-sale); font-style: italic; }
.mega-menu-item-accent-green > a { color: var(--color-brand-green-dark); font-weight: 800; }
.mega-menu-item { position: relative; flex-shrink: 0; }
.mega-menu-item > a {
  display: block;
  padding: 0.85rem 0;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mega-menu-flyout {
  display: none;
  position: fixed; /* see initMegaMenu() in app.js for why: .mega-menu
    scrolls horizontally (overflow-x: auto), and per the CSS overflow spec
    that also forces overflow-y to a clipping "auto", so a flyout
    positioned relative to its <li> would be clipped to the nav bar's own
    height and never actually visible. Fixed positioning escapes that
    clip; app.js sets its left/top from the hovered item's own position. */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brand-green);
  box-shadow: var(--shadow-card-hover);
  min-width: 220px;
  padding: 0;
  z-index: 70;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow: hidden;
}
.mega-menu-flyout-inner { display: flex; align-items: stretch; }
.mega-menu-flyout-main { padding: 0.4rem 0 0.9rem; }
.mega-menu-flyout-heading {
  margin: 0;
  padding: 0.9rem 1.25rem 0.35rem;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.mega-menu-flyout-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
}
.mega-menu-flyout-viewall {
  display: block;
  margin: 0.5rem 1.25rem 0.1rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-brand-green-dark);
  white-space: nowrap;
}
.mega-menu-flyout-brands {
  border-left: 1px solid var(--color-border);
  background: var(--color-bg);
  padding-bottom: 0.9rem;
  min-width: 190px;
}
.mega-menu-flyout-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 0 1rem;
}
.mega-menu-brand-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  padding: 0.3rem 0.4rem;
}
.mega-menu-brand-card:hover { border-color: var(--color-brand-green); }
.mega-menu-brand-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mega-menu-brand-card span { font-size: 9px; font-weight: 700; color: var(--color-text-muted); text-align: center; line-height: 1.2; }
.mega-menu-flyout a { display: block; padding: 0.5rem 1.25rem; font-size: 0.85rem; text-transform: none; letter-spacing: normal; font-weight: 400; }
.mega-menu-flyout a:hover { background: var(--color-bg); }
.mega-menu-flyout-goals { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
.mega-menu-goal-link { display: flex !important; align-items: center; gap: 0.6rem; }
.mega-menu-goal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg);
  font-size: 14px;
  overflow: hidden;
}
.mega-menu-goal-icon img { width: 100%; height: 100%; object-fit: cover; }
.mega-menu-flyout-wide .mega-menu-flyout-main { min-width: 460px; }
.mega-menu-flyout-brand-grid-wide { grid-template-columns: repeat(4, 1fr); }
.mega-menu-drawer-header { display: none; }
.mega-menu-backdrop { display: none; }
.mega-menu-item-share { display: none; }
.mega-menu-item:hover .mega-menu-flyout,
.mega-menu-item:focus-within .mega-menu-flyout,
.mega-menu-item.is-open .mega-menu-flyout { display: block; }

/* ==========================================================================
   Hero carousel
   ========================================================================== */
.hero-outer {
  width: 100%;
  background: #ecdfd0;
}
.hero-carousel {
  position: relative;
  width: 100vw;
  max-width: 100%;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 460px;
  border-radius: 0px;
  overflow: hidden;
  background: linear-gradient(120deg, #f2e6d7 0%, #ecdfd0 60%, #e6d7c4 100%);
}
@media (min-width: 1024px) {
  .hero-carousel {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
  }
}
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 2.5rem 3.5rem;
  opacity: 0;
  transform: translateX(24px);
  visibility: hidden;
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  background-image:
    linear-gradient(to right, #ecdfd0 0%, rgba(236,223,208,0.94) 24%, rgba(236,223,208,0.62) 46%, rgba(236,223,208,0.1) 70%, rgba(236,223,208,0) 88%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.hero-slide.is-active { opacity: 1; transform: translateX(0); visibility: visible; z-index: 1; }
.hero-slide-content { max-width: 480px; color: #fff; flex-shrink: 0; position: relative; z-index: 1; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: #A7F3D0; margin-bottom: 0.75rem; }
.hero-slide-content h1 { font-size: 2.6rem; line-height: 1.15; margin: 0 0 1rem; color: #fff; }
.hero-slide-content p { color: rgba(255,255,255,0.88); margin-bottom: 1.75rem; font-size: 1rem; }
.hero-cta-row { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.hero-cta-row .btn { width: auto; }
.btn-cta-outline {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-brand-green);
}
.btn-cta-outline:hover { background: rgba(34, 197, 94, 0.08); opacity: 1; }
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.hero-trust-row span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero-trust-row svg { color: #A7F3D0; flex-shrink: 0; }

.hero-halal-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--color-brand-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  border: 3px solid var(--color-surface);
}
.hero-halal-badge svg { margin-bottom: 0.15rem; }

.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
  z-index: 2;
}
.hero-prev { left: 1.5rem; }
.hero-next { right: 1.5rem; }
.hero-dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 2; }
.hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: width 0.25s ease, border-radius 0.25s ease, background 0.2s ease; }
.hero-dots span.is-active { background: var(--color-brand-green); }

/* Phones/small tablets: the busy product photo and floating badge fight
   with stacked text for space and legibility — drop both and keep a
   clean solid card. The desktop carousel absolutely-positions every
   slide on top of each other inside a fixed-height box so they can
   crossfade; on mobile that fixed height (previously 600px) left a
   large empty gap under short stacked content. Fix: take slides out
   of absolute stacking on mobile (only .is-active is rendered, so the
   box height comes from real content) and hard-swap instead of fade. */
@media (max-width: 900px) {
  .hero-carousel { min-height: 0; height: auto; }
  .hero-slide {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    padding: 0;
    background: none;
  }
  .hero-slide.is-active { display: flex; }
  .hero-slide::before {
    content: "";
    display: block;
    order: 2;
    width: 100%;
    height: 200px;
    max-height: 200px;
    flex-shrink: 0;
    background-image: var(--hero-bg, none);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #ecdfd0;
  }
  /* Split the text/CTA block so the image (::before, order:2) can sit
     between the headline text (order:1) and the CTA buttons (order:3),
     matching "text -> product image -> CTA" reading order on mobile. */
  .hero-slide-content {
    display: contents;
    color: var(--color-text);
  }
  .hero-slide-content .hero-eyebrow {
    color: #059669;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .hero-slide-content > p {
    color: #475569;
    font-weight: 500;
    font-size: 14px;
  }
  .hero-slide-content h1 {
    color: #0F172A;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2;
  }
  .hero-slide-content .hero-eyebrow,
  .hero-slide-content h1,
  .hero-slide-content > p {
    order: 1;
    padding: 0 1.25rem;
  }
  .hero-slide-content .hero-eyebrow { padding-top: 1.25rem; margin-bottom: 0.5rem; }
  .hero-slide-content h1 { margin: 0 0 0.5rem; }
  .hero-cta-row {
    order: 3;
    justify-content: center;
    padding: 1rem 1.25rem 0;
  }
  .hero-trust-row {
    order: 4;
    justify-content: center;
    padding: 0.75rem 1.25rem 0.5rem;
    color: #064E3B;
    font-weight: 600;
    font-size: 12px;
  }
  .hero-trust-row svg { color: #064E3B; }
  .hero-halal-badge { display: none; }
  .hero-nav { display: none; }
  /* .hero-dots was absolutely positioned "bottom: 1.25rem" against
     .hero-carousel — fine when the carousel was a fixed-height box, but
     now that mobile slides are static/stacked (auto height), that put
     the dots floating over whatever content happened to land in the
     last 1.25rem instead of reliably sitting under the trust row.
     Drop them into normal flow so they're always right after it. */
  .hero-dots { position: static; transform: none; justify-content: center; padding-bottom: 1.25rem; gap: 0.5rem; }
  .hero-dots span { width: 7px; height: 7px; }
  .hero-dots span.is-active { width: 18px; border-radius: 4px; }
}
@media (max-width: 768px) {
  .hero-carousel { margin-top: 0; padding-top: 0; width: 100%; }
  .hero-cta-row { flex-direction: column; align-items: center; gap: 0.6rem; }
  .hero-cta-row .btn,
  .hero-cta-row .btn-cta-whatsapp {
    width: 100%;
    max-width: 300px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 8px auto;
    padding: 0 16px;
    border-radius: 9999px;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Brand marquee — infinite auto-scroll, centered/full-bleed so a short
   brand list never looks left-justified with dead space to the right
   ========================================================================== */
.brand-marquee-wrap {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.brand-marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: brand-marquee-scroll 26s linear infinite;
}
.brand-marquee-wrap:hover .brand-marquee-track,
.brand-marquee-track:focus-within { animation-play-state: paused; }
@keyframes brand-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; overflow-x: auto; }
}

.brand-tile { flex: 0 0 160px; }
.brand-tile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.brand-tile-link img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(15%); }
.brand-tile-link:hover img { filter: grayscale(0%); }
.brand-tile-fallback { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.8rem; color: var(--color-text-muted); text-align: center; }

/* ==========================================================================
   Sections & grids
   ========================================================================== */
.section { max-width: var(--container-max); margin: 3rem auto; padding: 0 1.5rem; }
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; }
.section-header h2 { font-size: 1.4rem; margin: 0; position: relative; padding-bottom: 0.6rem; }
.top-categories-section .section-header h2 { font-size: 1.7rem; font-weight: 800; }
.section-header h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-bronze);
}
.section-link { font-size: 0.85rem; font-weight: 600; text-decoration: underline; }

.product-grid { display: grid; gap: 1.25rem; }
.product-grid-4 { grid-template-columns: repeat(4, 1fr); }

.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.category-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: center;
  padding: 1.5rem 1rem;
  font-weight: 600;
}
.category-card img { margin: 0 auto 0.75rem; height: 100px; width: auto; max-width: 90%; object-fit: contain; }

/* Alternating full-bleed background bands so the page isn't uniformly white */
.band { padding: 0.5rem 0; }
.band-tan { background: #FAF8F5; }
.band-white { background: #FFFFFF; }
.band-neutral { background: var(--color-bg); }

/* Mini trust bar — appears right after the hero (edge-to-edge, no gap to hero above or Shop By Goal below) */
.mini-trust-bar { margin: 0; border-bottom: 1px solid var(--color-border); background: #ecdfd0; padding: 1.5rem; }
.mini-trust-bar + .band { padding-top: 0; }
.mini-trust-bar + .band .section { margin-top: 0; }
.mini-trust-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.mini-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #059669;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}
.mini-trust-item svg { flex-shrink: 0; stroke: #fff; }
.mini-trust-item-dup { display: none; }
.mini-trust-title { margin: 0; font-weight: 700; font-size: 0.85rem; color: #fff; }
.mini-trust-sub { margin: 0.1rem 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.85); }
@media (max-width: 900px) { .mini-trust-inner { grid-template-columns: repeat(2, 1fr); } }

/* Below 768px the 4-item stack becomes a seamless, auto-scrolling
   marquee — same technique as .brand-marquee-track further down: the
   track holds the real set plus a hidden duplicate set back to back,
   then animates translateX(-50%) so it loops without a visible seam.
   Pauses on touch/hover and falls back to a manual swipe row for
   people who've asked for reduced motion. */
@media (max-width: 768px) {
  .mini-trust-bar {
    padding: 1rem 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
  }
  .mini-trust-inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 2.5rem;
    padding: 0 1.5rem;
    animation: mini-trust-marquee-scroll 24s linear infinite;
  }
  .mini-trust-bar:active .mini-trust-inner,
  .mini-trust-bar:hover .mini-trust-inner,
  .mini-trust-inner:focus-within { animation-play-state: paused; }
  .mini-trust-item { flex: 0 0 auto; white-space: nowrap; }
  .mini-trust-item-dup { display: flex; }
  .mini-trust-sub { white-space: nowrap; }
}
@keyframes mini-trust-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mini-trust-bar { mask-image: none; -webkit-mask-image: none; }
  .mini-trust-inner {
    animation: none;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mini-trust-inner::-webkit-scrollbar { display: none; }
  .mini-trust-item { scroll-snap-align: start; }
  .mini-trust-item-dup { display: none; }
}

/* Shop By Goal — card-style tiles with icon + title + optional subtitle */
.goal-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.goal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
  flex: 0 1 calc((100% - 5 * 1.25rem) / 6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1rem;
  min-height: 190px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.goal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); border-color: var(--color-brand-green); }
.goal-card-icon { color: var(--color-brand-green-dark); }
.goal-card-icon svg { width: 40px; height: 40px; stroke-width: 1.5; }
.goal-card-icon.has-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.goal-card-icon.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.goal-card-title { font-weight: 800; font-size: 0.9rem; }
.goal-card-sub { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.35; }
@media (max-width: 1100px) { .goal-card { flex-basis: calc((100% - 3 * 1.25rem) / 4); } }
@media (max-width: 768px) {
  .goal-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .goal-card { flex-basis: auto; min-height: 0; padding: 12px; gap: 0.4rem; }
  .goal-card-icon svg { width: 32px; height: 32px; }
  .goal-card-icon.has-photo { width: 32px; height: 32px; }
}

/* Top Categories — real product photo tiles */
.top-category-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.25rem; }
.top-category-card { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; min-width: 0; }
.top-category-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-brand-green-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.top-category-photo img { width: 100%; height: 100%; object-fit: cover; }
.top-category-card:hover .top-category-photo { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.top-category-viewall-icon { border-radius: 50%; background: var(--color-brand-green-dark); border-color: var(--color-brand-green-dark); color: #fff; }
.top-category-label { font-weight: 800; font-size: 1rem; }
@media (max-width: 1100px) {
  .top-category-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 118px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
}
@media (max-width: 768px) {
  .top-category-grid,
  .brand-marquee-track {
    display: flex;
    grid-auto-flow: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scrollbar-width: none;
  }
  .top-category-card,
  .brand-tile {
    flex: 0 0 auto;
    width: 130px;
    scroll-snap-align: start;
  }
  /* Swap the auto-scrolling marquee for manual touch-swipe on phones —
     an animated track fighting the user's own swipe feels broken. */
  .brand-marquee-track { animation: none; }
  .top-category-grid::-webkit-scrollbar,
  .brand-marquee-track::-webkit-scrollbar,
  .testimonial-track::-webkit-scrollbar {
    display: none;
  }
  .testimonial-track { scroll-snap-type: x mandatory; }
}

/* ==========================================================================
   Product card
   ========================================================================== */
.product-card { display: flex; flex-direction: column; height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 0.15s ease; }
.product-card:hover { box-shadow: var(--shadow-card-hover); }
.product-card-media { position: relative; display: block; background: var(--color-bg); }
.product-card-media .image-container {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-goal-bg);
  overflow: hidden;
}
.product-card-media .image-container img {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  display: block;
  transition: transform 0.3s ease;
}
.product-card:hover .image-container img { transform: scale(1.04); }
.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  backdrop-filter: blur(2px);
}
.badge-sale { color: var(--color-sale); }
.badge-exclusive { color: var(--color-brand-bronze-dark); left: auto; right: 8px; }
.badge-stock { text-transform: uppercase; }
.badge-stock-ok { color: var(--color-brand-green-dark); }
.badge-stock-low { color: var(--color-sale); }
.badge-halal { position: static; display: inline-block; background: var(--color-halal); color: #fff; font-size: 0.85rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); margin: 0.5rem 0; }

/* Icon-based quick-add — overlays the image on hover instead of a
   full-width block button underneath the card. */
.quick-add-btn {
  position: absolute;
  bottom: 0.65rem;
  right: 0.65rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-brand-green-dark);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.product-card:hover .quick-add-btn,
.quick-add-btn:focus-visible { opacity: 1; transform: translateY(0); }
.quick-add-btn:hover { background: var(--color-brand-green-dark); color: #fff; border-color: var(--color-brand-green-dark); }
@media (hover: none) { .quick-add-btn { opacity: 1; transform: none; } }

.wishlist-toggle-btn {
  position: absolute;
  bottom: 0.65rem;
  left: 0.65rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.product-card:hover .wishlist-toggle-btn,
.wishlist-toggle-btn:focus-visible { opacity: 1; transform: translateY(0); }
.wishlist-toggle-btn:hover { border-color: var(--color-sale); color: var(--color-sale); }
.wishlist-toggle-btn.is-saved { opacity: 1; transform: none; color: var(--color-sale); }
.wishlist-toggle-btn.is-saved svg { fill: var(--color-sale); }
@media (hover: none) { .wishlist-toggle-btn { opacity: 1; transform: none; } }

/* ==========================================================================
   Bottom-of-homepage sections removed in favor of .mini-trust-bar (after
   hero) and .why-shop-section — kept as a single trust story, not repeated.
   ========================================================================== */

.product-card-body { display: flex; flex-direction: column; padding: 1rem; min-width: 0; flex: 1; }
.product-card-brand { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 0 0 0.3rem; }
.product-card-title {
  font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; line-height: 1.35;
  white-space: normal; word-break: break-word;
  min-height: calc(1.35em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-title a { display: block; }
.product-card-rating, .pdp-rating { display: flex; align-items: center; gap: 0.15rem; font-size: 0.95rem; margin-bottom: 0.6rem; }
.star { color: var(--color-border); }
.star.filled { color: var(--color-star); }
.rating-count { color: var(--color-text-muted); font-size: 0.9rem; margin-left: 0.35rem; }

.product-card-price, .pdp-price { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.85rem; }
.price-current { font-weight: 800; font-size: 1.15rem; color: var(--color-brand-green-dark); }
.price-rrp { text-decoration: line-through; color: var(--color-text-muted); font-size: 0.95rem; font-weight: 700; }
.price-discount { color: var(--color-sale); font-size: 0.95rem; font-weight: 800; }

.btn-add-to-cart { width: 100%; }

.card-add-to-cart {
  width: 100%;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: var(--color-surface);
  color: var(--color-brand-green-dark);
  border: 1.5px solid var(--color-brand-green-dark);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.card-add-to-cart:hover { background: var(--color-brand-green-dark); color: #fff; }

/* ==========================================================================
   Carousels (product carousels & PDP related)
   ========================================================================== */
.carousel { position: relative; display: flex; align-items: center; gap: 0.6rem; }
.carousel-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 260px; max-width: 260px; scroll-snap-align: start; }
.carousel-arrow {
  position: static;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-arrow[hidden] { display: none; }
.carousel-no-arrows { gap: 0; }

/* ==========================================================================
   Testimonials — carousel with arrows, dots, and autoplay
   ========================================================================== */
.testimonial-carousel { position: relative; display: flex; align-items: center; gap: 0.75rem; }
.testimonial-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-carousel .carousel-arrow { position: static; }
.testimonial-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.testimonial-rating { display: flex; gap: 0.15rem; font-size: 0.85rem; }
.testimonial-quote { font-size: 0.92rem; line-height: 1.6; color: var(--color-text); margin: 0; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: 0.65rem; }
.testimonial-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.testimonial-avatar-fallback {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-brand-green); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.testimonial-name { margin: 0; font-weight: 700; font-size: 0.85rem; }
.testimonial-location { margin: 0; font-size: 0.75rem; color: var(--color-text-muted); }

.testimonial-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }
.testimonial-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-border);
  border: none; padding: 0; transition: background 0.2s ease, transform 0.2s ease;
}
.testimonial-dot.is-active { background: var(--color-brand-green); transform: scale(1.25); }

@media (max-width: 576px) {
  .testimonial-card { flex: 0 0 85%; }
  .testimonial-carousel .carousel-arrow { display: none; }
  .testimonial-carousel { gap: 0; }
}

/* ==========================================================================
   Listing page
   ========================================================================== */
.breadcrumb { max-width: var(--container-max); margin: 1.5rem auto 0; padding: 0 1.5rem; font-size: 0.8rem; color: var(--color-text-muted); }
.breadcrumb a { color: var(--color-text-muted); }

.listing-layout { max-width: var(--container-max); margin: 1.5rem auto 4rem; padding: 0 1.5rem; display: grid; grid-template-columns: 220px 1fr; gap: 2rem; }
.filter-sidebar h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 1.25rem 0 0.5rem; }
.filter-sidebar h4:first-child { margin-top: 0; }
.filter-group label { display: block; font-size: 0.88rem; padding: 0.3rem 0; }
.filter-group input[type="number"] { width: 100%; padding: 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.4rem; }
.filter-toggle { display: none; width: 100%; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); padding: 0.75rem 1rem; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 1rem; }
.filter-clear-link { display: inline-block; font-size: 0.78rem; font-weight: 600; color: var(--color-sale); text-decoration: underline; margin-bottom: 1rem; }
.btn-apply-filters { width: 100%; margin-top: 1rem; }

.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.listing-toolbar h1 { font-size: 1.5rem; margin: 0; }
.sort-form { display: flex; align-items: center; gap: 0.5rem; }
.listing-toolbar select { padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

.btn-load-more { display: block; margin: 2rem auto 0; background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.pagination { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-top: 2rem; font-size: 0.85rem; }
.empty-state { color: var(--color-text-muted); padding: 2rem 0; }

/* ==========================================================================
   Product detail page
   ========================================================================== */
.pdp-layout {
  max-width: 1600px;
  margin: 1.5rem auto 4rem;
  padding: 0 1.5rem;
}

.pdp-info { margin-bottom: 1.75rem; }

/* Three sections: options (flavour/potency/package quantity), the main
   image + buy box, and the description. Options + image/buy-box are
   grouped under one sticky wrapper so they move together and stay
   pinned in the viewport while the longer description scrolls past. */
.pdp-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.pdp-sticky-group {
  position: sticky;
  top: 106px;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2rem;
}
.pdp-options-col { min-width: 0; }
.pdp-buy-col { min-width: 0; }
.pdp-right { min-width: 0; }

.pdp-gallery { margin-bottom: 1.25rem; }

.pdp-main-image {
  background: #f9f9f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  aspect-ratio: 1/1;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-main-image img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; margin: 0 auto; display: block; }
.pdp-thumbs {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumb {
  width: 64px; height: 64px; border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 0; overflow: hidden; background: #f9f9f9;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.pdp-thumb.is-active,
.pdp-thumb:hover { border-color: var(--color-brand-green); }
.pdp-thumb img { max-width: 90%; max-height: 90%; width: auto; height: auto; object-fit: contain; }

.pdp-brand { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; font-weight: 800; color: var(--color-text-muted); margin: 0 0 0.4rem; }
.pdp-title { font-size: 2.35rem; font-weight: 800; margin: 0 0 0.3rem; }
.pdp-sku { color: var(--color-text-muted); font-size: 0.95rem; font-weight: 600; margin: 0 0 0.75rem; }
.pdp-description { color: var(--color-text-muted); font-size: 1.05rem; font-weight: 500; line-height: 1.6; margin: 0 0 1rem; }
.pdp-price .price-current { font-size: 2.1rem; }

.pdp-flavours { margin: 0 0 1.25rem; }
.pdp-flavour-label {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.pdp-flavour-label span { text-transform: none; font-weight: 800; color: var(--color-brand-green-dark); }
.pdp-flavour-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 0.65rem;
}
.pdp-flavour-swatch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.65rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
  line-height: 1.2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.pdp-flavour-swatch img {
  width: 34px;
  height: 40px;
  border-radius: var(--radius-xs);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface);
}
.pdp-flavour-swatch-fallback {
  width: 34px;
  height: 40px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
}
/* Soft, muted pastel tints cycling through the swatches so a multi-flavour
   row reads as colourful without any two neighbouring tones clashing or
   fighting the brand green/beige palette used across the rest of the page. */
.pdp-flavour-swatch:nth-child(6n+1) { background: #FBEFE7; }
.pdp-flavour-swatch:nth-child(6n+1) .pdp-flavour-swatch-fallback { background: #F0D9C4; }
.pdp-flavour-swatch:nth-child(6n+2) { background: #FBF6DE; }
.pdp-flavour-swatch:nth-child(6n+2) .pdp-flavour-swatch-fallback { background: #EFE4A8; }
.pdp-flavour-swatch:nth-child(6n+3) { background: #E9F5EC; }
.pdp-flavour-swatch:nth-child(6n+3) .pdp-flavour-swatch-fallback { background: #C7E8D0; }
.pdp-flavour-swatch:nth-child(6n+4) { background: #EFEAFA; }
.pdp-flavour-swatch:nth-child(6n+4) .pdp-flavour-swatch-fallback { background: #D8CDF0; }
.pdp-flavour-swatch:nth-child(6n+5) { background: #E8F2FA; }
.pdp-flavour-swatch:nth-child(6n+5) .pdp-flavour-swatch-fallback { background: #C6DFF0; }
.pdp-flavour-swatch:nth-child(6n+6) { background: #FBEAF0; }
.pdp-flavour-swatch:nth-child(6n+6) .pdp-flavour-swatch-fallback { background: #F0CBDA; }
.pdp-flavour-swatch:hover { border-color: var(--color-brand-green); transform: translateY(-1px); }
.pdp-flavour-swatch.is-active {
  border-color: var(--color-brand-green-dark);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}

.pdp-potencies { margin: 0 0 1.25rem; }
.pdp-potency-label {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.pdp-potency-label span { text-transform: none; font-weight: 800; color: var(--color-brand-green-dark); }
.pdp-potency-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.pdp-potency-swatch {
  padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.pdp-potency-swatch:hover { border-color: var(--color-brand-green); transform: translateY(-1px); }
.pdp-potency-swatch.is-active {
  border-color: var(--color-brand-green-dark);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
  color: var(--color-brand-green-dark);
}

.pdp-sizes { margin: 0 0 1.25rem; }
.pdp-size-label {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text);
}
.pdp-size-label span { text-transform: none; font-weight: 800; color: var(--color-brand-green-dark); }
.pdp-size-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.65rem;
}
.pdp-size-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.5rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: center;
  line-height: 1.2;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.pdp-size-swatch-label { font-size: 0.95rem; font-weight: 800; color: var(--color-text); }
.pdp-size-swatch-price { font-size: 0.85rem; font-weight: 700; color: var(--color-text-muted); }
.pdp-size-swatch:hover { border-color: var(--color-brand-green); transform: translateY(-1px); }
.pdp-size-swatch.is-active {
  border-color: var(--color-brand-green-dark);
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.15);
}
.pdp-size-swatch.is-active .pdp-size-swatch-label,
.pdp-size-swatch.is-active .pdp-size-swatch-price { color: var(--color-brand-green-dark); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.qty-stepper button { width: 34px; height: 34px; background: none; border: none; font-size: 1rem; }
.qty-stepper input { width: 44px; text-align: center; border: none; -moz-appearance: textfield; }
.pdp-add-form { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 1.75rem; }
.pdp-add-form label { font-size: 0.95rem; font-weight: 700; text-transform: uppercase; }
.pdp-add-form .btn { flex: 1; }

.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  margin-bottom: 1.75rem;
}
.btn-whatsapp:hover { border-color: #25D366; }
.btn-whatsapp svg { flex-shrink: 0; color: #25D366; }

/* Rich-text description panel (edited via CKEditor 5 in the admin) —
   black background, white text by default; any font colour the editor
   applies is an inline span and always overrides this base colour. */
.pdp-description-panel {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
}
.pdp-description-panel-title {
  font-size: 1.3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.pdp-description-rich { color: var(--color-text); font-size: 1.05rem; font-weight: 500; line-height: 1.7; }
.pdp-description-rich :first-child { margin-top: 0; }
.pdp-description-rich :last-child { margin-bottom: 0; }
.pdp-description-rich p { margin: 0 0 1rem; }
.pdp-description-rich h1, .pdp-description-rich h2, .pdp-description-rich h3 { color: var(--color-text); margin: 1.5rem 0 0.75rem; line-height: 1.3; }
.pdp-description-rich h1 { font-size: 1.5rem; }
.pdp-description-rich h2 { font-size: 1.25rem; }
.pdp-description-rich h3 { font-size: 1.05rem; }
.pdp-description-rich ul, .pdp-description-rich ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.pdp-description-rich li { margin-bottom: 0.4rem; }
.pdp-description-rich a { color: var(--color-brand-green-dark); }
.pdp-description-rich strong { color: var(--color-text); }
.pdp-description-rich blockquote { border-left: 3px solid var(--color-border); margin: 0 0 1rem; padding: 0.25rem 0 0.25rem 1rem; color: var(--color-text-muted); }
.pdp-description-rich table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
.pdp-description-rich table td, .pdp-description-rich table th { border: 1px solid var(--color-border); padding: 0.5rem 0.65rem; }
.pdp-description-rich img { max-width: 100%; height: auto; border-radius: var(--radius-xs); }
.pdp-description-rich hr { border: none; border-top: 1px solid var(--color-border); margin: 1.25rem 0; }
.pdp-description-empty { color: var(--color-text-muted); font-style: italic; }

.pdp-accordion-wrap { max-width: var(--container-max); margin: 0 auto 3rem; padding: 0 1.5rem; }

.pdp-accordion .accordion-item { border-top: 1px solid var(--color-border); }
.pdp-accordion .accordion-item:last-child { border-bottom: 1px solid var(--color-border); }
.accordion-trigger { width: 100%; text-align: left; background: none; border: none; padding: 1rem 0; font-weight: 800; font-size: 1.05rem; display: flex; justify-content: space-between; }
.accordion-trigger::after { content: "+"; font-size: 1.1rem; }
.accordion-trigger[aria-expanded="true"]::after { content: "\2212"; }
.accordion-panel { display: none; padding: 0 0 1rem; color: var(--color-text-muted); font-size: 1rem; font-weight: 500; }
.accordion-item.is-open .accordion-panel { display: block; }

.review { padding: 0.75rem 0; border-top: 1px solid var(--color-border); }
.review:first-child { border-top: none; }
.review-comment { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0.35rem 0; }
.review-meta { color: var(--color-text-muted); font-size: 0.9rem; font-weight: 600; }

.review-form-wrap { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.review-form-title { font-size: 0.9rem; margin: 0 0 0.85rem; }
.review-form { display: flex; flex-direction: column; gap: 0.85rem; max-width: 420px; }
.review-star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.2rem; font-size: 1.6rem; }
.review-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.review-star-input label { color: var(--color-border); cursor: pointer; line-height: 1; transition: color 0.15s ease; }
.review-star-input input:checked ~ label,
.review-star-input label:hover,
.review-star-input label:hover ~ label { color: var(--color-brand-gold); }
.review-form textarea {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
}
.review-form textarea:focus { outline: none; border-color: var(--color-brand-green); }
.review-form .btn { width: fit-content; }
.review-form-signin { font-size: 0.85rem; color: var(--color-text-muted); }
.review-form-signin a { font-weight: 600; text-decoration: underline; color: var(--color-text); }

/* ==========================================================================
   Cart page
   ========================================================================== */
.cart-page { max-width: var(--container-max); margin: 2rem auto 4rem; padding: 0 1.5rem; }
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.cart-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }
.cart-table td { padding: 1rem 0.5rem 1rem 0; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.cart-item-info { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.cart-item-info img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.cart-item-info a { word-break: break-word; }
.cart-item-variant { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
.cart-remove-btn { background: none; border: none; color: var(--color-text-muted); text-decoration: underline; font-size: 0.8rem; white-space: nowrap; }
.cart-summary { display: flex; justify-content: space-between; font-weight: 700; font-size: 1.1rem; padding: 1rem 0; border-top: 2px solid var(--color-text); margin-bottom: 1.25rem; }
.cart-checkout-note { text-align: center; font-size: 0.8rem; color: var(--color-text-muted); margin: 0.85rem 0 0; }

/* Mobile: convert the cart table into stacked cards so nothing overflows */
@media (max-width: 640px) {
  .cart-page { padding: 0 1rem; }
  .cart-table thead { display: none; }
  .cart-table, .cart-table tbody { display: block; width: 100%; }
  .cart-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
  }
  .cart-table td { border-bottom: none; padding: 0; }
  .cart-table td[data-label="Product"] { grid-column: 1 / -1; }
  .cart-table td[data-label="Price"] { grid-column: 1; order: 2; color: var(--color-text-muted); font-size: 0.85rem; }
  .cart-table td[data-label="Quantity"] { grid-column: 1 / -1; order: 3; }
  .cart-table td[data-label="Total"] { grid-column: 2; order: 2; justify-self: end; font-weight: 700; }
  .cart-table td[data-label=""] { grid-column: 1 / -1; order: 4; text-align: right; }
  .qty-stepper { width: fit-content; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-text); color: #D9D9D9; margin-top: 0; }
.footer-inner { max-width: var(--container-max); margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.footer-col h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 1rem; }
.footer-col ul li { margin-bottom: 0.55rem; font-size: 0.85rem; }
.footer-col a:hover { color: #fff; }
.newsletter-form { display: flex; margin: 0.75rem 0 1rem; }
.newsletter-form input { flex: 1; padding: 0.6rem; border: 1px solid #444; background: transparent; color: #fff; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.newsletter-form button { background: #fff; color: #111; border: none; padding: 0 1rem; font-weight: 700; font-size: 0.75rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.social-icons { display: flex; gap: 0.75rem; }
.social-icons a { border: 1px solid #444; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; }

.footer-payment-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 1.1rem 0 0.5rem; }
.payment-icons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.payment-icon { display: flex; align-items: center; justify-content: center; line-height: 0; border-radius: 4px; overflow: hidden; }
.payment-icon svg { display: block; }
.footer-bottom {
  border-top: 1px solid #333;
  padding: 1.25rem 1.5rem;
  font-size: 0.75rem;
  color: #999;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  text-align: center;
}
.footer-credit a { color: #ccc; text-decoration: underline; }
.footer-credit a:hover { color: #fff; }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-cta-bg);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1440px) {
  /* Small-laptop category bar: tighten spacing so more items fit before
     needing to scroll at all, rather than relying on scroll alone. */
  .mega-menu-inner { gap: 1.15rem; padding: 0 1rem; }
  .mega-menu-item > a { font-size: 12px; padding: 0.75rem 0; }
}

@media (max-width: 1024px) {
  .product-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .pdp-sticky-group { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 900px) {
  .listing-layout { grid-template-columns: 1fr; }
  .filter-sidebar { display: none; }
  .filter-sidebar.is-open { display: block; }
  .filter-toggle { display: block; }
  .pdp-columns { grid-template-columns: 1fr; gap: 1.5rem; }
  .pdp-sticky-group { position: static; top: auto; grid-template-columns: 1fr; gap: 1.5rem; }
  .pdp-description-panel { padding: 1.5rem; }
  .mega-menu { display: flex; }
  .mega-menu-spacer { display: none; }
}

@media (max-width: 768px) {
  /* --- Green top bar: deal pills / region / desktop share icon are
     replaced by two icon buttons — hamburger far left, account+cart
     far right. Share moves into the hamburger drawer (see below). --- */
  .topbar-pill,
  .topbar-pill-outline,
  .topbar-region,
  .topbar-share {
    display: none;
  }
  .topbar-inner { padding: 0.55rem 0.85rem; justify-content: space-between; }
  .topbar-left, .topbar-right { gap: 0; }
  .topbar-menu-toggle,
  .topbar-actions-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 0.35rem;
    width: 34px;
    height: 34px;
  }
  .topbar-actions-toggle .cart-badge {
    background: #FFFFFF;
    color: var(--color-brand-green-dark);
    top: -2px;
    right: -2px;
  }
  /* This wrapper (topbar + site-header together) is what actually
     scrolls with the page; making just the wrapper sticky keeps the
     hamburger/account icons reachable without needing to guess the
     combined header height for a manual offset. */
  .header-sticky-mobile { position: sticky; top: 0; z-index: 55; }
  .site-header { position: static; }

  /* --- Share item inside the hamburger drawer --- */
  .mega-menu-item-share { display: block; }
  .mega-menu-item-share button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.9rem 1.25rem;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text);
    text-align: left;
  }
  .mega-menu-item-share button:active { background: var(--color-bg); }

  .header-inner { flex-wrap: wrap; padding: 0.85rem 1rem; }
  .logo-img { height: 38px; max-width: 165px; }
  .search-bar { border-width: 1px; }
  /* The old inline "Menu" trigger row (.mega-menu-inner) no longer holds
     a toggle button — its only remaining children are the fixed-position
     drawer and backdrop, which don't take up in-flow space, but the
     1px border still would without this. */
  .mega-menu { border-bottom: none; }
  .mega-menu-list {
    display: flex;
    flex-direction: column;
    /* Base desktop rule sets align-items:center for the horizontal bar
       and is never unset for mobile — that's what was centering every
       drawer row (and shrinking each row's border-bottom to the width
       of its own text, which is why the dividers looked ragged/random
       lengths). Stretch so every row spans the full drawer width, and
       items left-align within it below. */
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    background: var(--color-surface);
    padding: 0 0 1.5rem;
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
    z-index: 100;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s ease;
  }
  .mega-menu-list.is-open { transform: translateX(0); }
  .mega-menu-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--color-surface);
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 800;
    font-size: 1.05rem;
    z-index: 1;
  }
  .mega-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-bg);
    border: none;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-text-muted);
    padding: 0;
  }
  .mega-menu-close:active { background: var(--color-border); }

  /* Each row: left-aligned label, full-width tap target, chevron on the
     right for rows that expand a submenu so it's obvious they're
     tappable rather than links. */
  .mega-menu-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1.25rem;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.15s ease;
  }
  .mega-menu-item > a:active,
  .mega-menu-item > a:hover { background: var(--color-bg); }
  .mega-menu-item-accent > a,
  .mega-menu-item-accent-green > a { font-style: normal; }
  .mega-menu-item:has(.mega-menu-flyout) > a::after {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
  }
  .mega-menu-item.is-open:has(.mega-menu-flyout) > a::after { transform: rotate(45deg); }
  .mega-menu-flyout {
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: var(--color-bg);
  }
  .mega-menu-flyout-inner { display: block; }
  .mega-menu-flyout-main { padding: 0; }
  .mega-menu-flyout-cols { display: block; }
  .mega-menu-flyout-heading,
  .mega-menu-flyout-viewall,
  .mega-menu-flyout-brands { display: none; }
  .mega-menu-flyout-wide .mega-menu-flyout-main { min-width: 0; }
  .mega-menu-flyout-brand-grid-wide { grid-template-columns: repeat(3, 1fr); }
  .mega-menu-flyout a {
    padding: 0.75rem 1.25rem 0.75rem 2rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
  }
  .mega-menu-flyout a:last-child { border-bottom: none; }
  /* Section dividers between the category list, brand/deals utility
     links and the account/help links — invisible before (display:none
     at every width), which is why the drawer read as one undifferentiated
     wall of text. A tinted full-bleed band gives it real grouping. */
  .mega-menu-spacer { display: block; height: 10px; background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
  .mega-menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 90;
  }
  .mega-menu-backdrop.is-open { display: block; }
  .product-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-slide-content h1 { font-size: 1.75rem; }

  .section { padding: 1.5rem 1rem; }

  /* Compact product cards: keep "Ksh 1,234" from wrapping onto two
     lines, and shrink the add-to-cart button so its label never wraps. */
  .product-card-price, .pdp-price { flex-wrap: nowrap; }
  .price-current { white-space: nowrap; font-size: 15px; font-weight: 700; }
  .price-rrp { white-space: nowrap; }
  .card-add-to-cart { width: 100%; padding: 8px 0; font-size: 12px; }
  .product-card-body { padding: 0.75rem; }

  .header-actions {
    display: none;
    position: absolute;
    top: 100%;
    right: 1rem;
    margin-top: 0.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card-hover);
    padding: 1rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    z-index: 60;
  }
  .header-actions.is-open { display: flex; }
  .account-link, .cart-link { flex-direction: row; gap: 0.6rem; }

  .hero-carousel { margin-top: 2px; width: 100%; }
}

@media (max-width: 576px) {
  .hero-slide-content h1 { font-size: 1.7rem; margin-bottom: 0.6rem; }
  .hero-slide-content p { margin-bottom: 1.1rem; font-size: 0.9rem; }
  .hero-eyebrow { margin: 0 0 0.4rem; }

  .pdp-add-form { flex-wrap: wrap; gap: 0.85rem; }
  .pdp-add-form .qty-stepper { flex: 0 0 100%; width: 100%; justify-content: center; }
  .pdp-add-form .btn { flex: 0 0 100%; width: 100%; }
}

@media (max-width: 480px) {
  .product-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .product-grid-4 { grid-template-columns: 1fr; }
}

/* Carousels below 576px: arrows steal space a 360px screen can't spare —
   drop them and let the track fill the width; two cards fit per view
   (matching the 2-column product grid), with scroll-snap for the rest. */
@media (max-width: 576px) {
  .carousel { gap: 0; }
  .carousel-arrow { display: none; }
  .carousel-item { flex: 0 0 calc(50% - 0.375rem); max-width: calc(50% - 0.375rem); }
  .carousel-track { gap: 0.75rem; }
}

/* ==========================================================================
   Auth pages (login / register / account)
   ========================================================================== */
.auth-page { max-width: 480px; margin: 3rem auto 5rem; padding: 0 1.5rem; }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2.5rem 2rem; }
.auth-title { font-size: 1.6rem; margin: 0 0 0.4rem; text-align: center; }
.auth-subtitle { color: var(--color-text-muted); font-size: 0.9rem; text-align: center; margin: 0 0 1.75rem; }
.auth-error { background: #FBEAEA; color: var(--color-sale); border: 1px solid #F1C6C6; border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.85rem; margin-bottom: 1.25rem; }
.auth-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.form-group input,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-bg);
}
.form-group input:focus { outline: none; border-color: var(--color-brand-green); background: var(--color-surface); }
.form-group textarea {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--color-bg);
  resize: vertical;
}
.form-group textarea:focus { outline: none; border-color: var(--color-brand-green); background: var(--color-surface); }
.field-error { color: var(--color-sale); font-size: 0.78rem; margin: 0; }
.form-row-inline { display: flex; justify-content: space-between; align-items: center; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); }
.auth-submit { margin-top: 0.5rem; }
.auth-switch { text-align: center; font-size: 0.85rem; color: var(--color-text-muted); margin: 1.5rem 0 0; }
.auth-switch a { font-weight: 600; text-decoration: underline; color: var(--color-text); }
.account-links { margin: 0 0 1.75rem; }
.account-links li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.account-links li a { font-weight: 600; }

/* ==========================================================================
   Django messages (toast + inline banners)
   ========================================================================== */
.messages-inline { max-width: var(--container-max); margin: 1rem auto 0; padding: 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.alert { border-radius: var(--radius-sm); padding: 0.85rem 1.1rem; font-size: 0.88rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.alert-success { background: #E8F6EE; color: #1F7A4D; border: 1px solid #BFE6CE; }
.alert-error { background: #FBEAEA; color: var(--color-sale); border: 1px solid #F1C6C6; }
.alert-info, .alert-warning { background: #F2F2F2; color: var(--color-text); border: 1px solid var(--color-border); }
.alert-dismiss { background: none; border: none; font-size: 1rem; line-height: 1; color: inherit; opacity: 0.6; }
.alert-dismiss:hover { opacity: 1; }

/* ==========================================================================
   Info pages (contact / privacy / terms)
   ========================================================================== */
.info-page { max-width: var(--container-max); margin: 0 auto 4rem; padding: 0 1.5rem; }
.info-hero { text-align: center; padding: 3rem 1rem 2.5rem; }
.info-hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.info-hero p { color: var(--color-text-muted); margin: 0; }

.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; margin-bottom: 3.5rem; }
.contact-form-card, .contact-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2rem; }
.contact-form-card h2, .contact-info-card h2, .faq-section h2 { font-size: 1.2rem; margin: 0 0 1.25rem; }
.contact-info-list { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-info-list li { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-info-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); }
.contact-info-list a { font-weight: 600; text-decoration: underline; }

.contact-map { margin-top: 1.5rem; }
.contact-map h3 { font-size: 0.95rem; margin: 0 0 0.65rem; }

.contact-hours { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.contact-hours h3 { font-size: 0.95rem; margin: 0 0 0.75rem; }
.contact-hours-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.contact-hours-list li { display: flex; justify-content: space-between; font-size: 0.85rem; }
.contact-hours-list li span:first-child { font-weight: 600; color: var(--color-text); }
.contact-hours-list li span:last-child { color: var(--color-text-muted); }
.contact-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.contact-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.faq-section { max-width: 760px; margin: 0 auto; }
.faq-item .accordion-trigger { font-size: 0.95rem; }

.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h2 { font-size: 1.1rem; margin: 2rem 0 0.6rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 0.5rem; }
.legal-content a { text-decoration: underline; color: var(--color-text); }

@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Account page
   ========================================================================== */
.account-page { max-width: var(--container-max); margin: 2.5rem auto 5rem; padding: 0 1.5rem; display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start; }

.account-sidebar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.5rem; position: sticky; top: 90px; }
.account-avatar-card { display: flex; align-items: center; gap: 0.85rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.account-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--color-brand-green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.account-name { font-weight: 700; margin: 0; font-size: 0.95rem; }
.account-email { margin: 0; font-size: 0.78rem; color: var(--color-text-muted); word-break: break-all; }

.account-nav { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1.5rem; }
.account-nav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 500; color: var(--color-text-muted); }
.account-nav a svg { flex-shrink: 0; }
.account-nav a:hover { background: var(--color-bg); color: var(--color-text); }
.account-nav a.is-active { background: var(--color-brand-green); color: #fff; }
.account-nav-admin-link { border-top: 1px solid var(--color-border); margin-top: 0.4rem; padding-top: 0.75rem !important; color: var(--color-brand-bronze-dark) !important; }

.account-signout-form { margin: 0; }
.account-signout { width: 100%; background: none; border: 1px solid var(--color-border); color: var(--color-text); }
.account-signout:hover { border-color: var(--color-text); }

.account-main h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }
.account-subtitle { color: var(--color-text-muted); margin: 0 0 1.75rem; }

.account-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.25rem; }
.account-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.account-stat-card:hover { border-color: var(--color-brand-green); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.account-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-brand-green-dark);
  margin-bottom: 0.6rem;
}
.account-stat-value { display: block; font-size: 1.4rem; font-weight: 800; }
.account-stat-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-top: 0.3rem; }

.account-section { margin-bottom: 2rem; }
.account-section h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.account-empty-state { background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); padding: 2rem; text-align: center; }
.account-empty-state p { color: var(--color-text-muted); margin: 0 0 1rem; }

.account-detail-list { display: flex; flex-direction: column; gap: 0.85rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin: 0; }
.account-detail-list > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--color-border); }
.account-detail-list > div:last-child { border-bottom: none; padding-bottom: 0; }

.account-form { display: flex; flex-direction: column; gap: 1rem; max-width: 480px; }
.account-form-row { display: flex; flex-direction: column; gap: 0.35rem; }
.account-form-row label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.account-form-row input {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
}
.account-form-row input:focus { outline: none; border-color: var(--color-brand-green); }
.account-form .btn { align-self: flex-start; }

.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.address-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}
.address-card.is-default { border-color: var(--color-brand-green); }
.address-default-badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: var(--color-brand-green); color: #fff;
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-pill);
}
.address-name { font-weight: 700; margin: 0 0 0.4rem; padding-right: 4rem; }
.address-line { color: var(--color-text-muted); font-size: 0.85rem; margin: 0 0 0.15rem; }
.address-actions { display: flex; gap: 0.6rem; margin-top: 0.85rem; flex-wrap: wrap; }
.address-actions form { margin: 0; }
.address-action-btn {
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem; font-size: 0.78rem; font-weight: 600; cursor: pointer;
  color: var(--color-text); font-family: inherit;
}
.address-action-btn:hover { border-color: var(--color-brand-green); color: var(--color-brand-green-dark); }
.address-action-remove:hover { border-color: var(--color-sale); color: var(--color-sale); }
.address-default-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.account-detail-list dt { color: var(--color-text-muted); }
.account-detail-list dd { margin: 0; font-weight: 600; }

@media (max-width: 900px) {
  .account-page { grid-template-columns: 1fr; }
  .account-sidebar { position: static; }
  .account-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Blog — list, cards, detail, sidebar
   ========================================================================== */
.blog-page { max-width: var(--container-max); margin: 0 auto 5rem; padding: 0 1.5rem; }

.blog-filter-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.5rem; }
.blog-filter-chip {
  border: 1px solid var(--color-border); border-radius: 999px; padding: 0.45rem 1rem;
  font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted);
}
.blog-filter-chip:hover { border-color: var(--color-brand-green); color: var(--color-text); }
.blog-filter-chip.is-active { background: var(--color-brand-green); border-color: var(--color-brand-green); color: #fff; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-grid-3 { grid-template-columns: repeat(3, 1fr); }

.blog-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s ease;
}
.blog-card:hover { box-shadow: var(--shadow-card-hover); }
.blog-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: #f9f9f9; overflow: hidden; }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.04); }
.blog-card-category {
  position: absolute; top: 0.6rem; left: 0.6rem; background: var(--color-brand-green); color: #fff;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.6rem; border-radius: var(--radius-sm);
}
.blog-card-body { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.blog-card-meta { font-size: 0.72rem; color: var(--color-text-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.blog-card-title { font-size: 1.02rem; margin: 0; line-height: 1.35; }
.blog-card-title a { word-break: break-word; }
.blog-card-excerpt { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.55; margin: 0; flex: 1; }
.blog-card-link { font-size: 0.8rem; font-weight: 700; text-decoration: underline; margin-top: 0.25rem; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2.5rem; font-size: 0.85rem; }
.pagination-link { font-weight: 700; text-decoration: underline; }
.pagination-status { color: var(--color-text-muted); }

/* Detail page */
.blog-detail-page { max-width: var(--container-max); margin: 0 auto 5rem; padding: 0 1.5rem; }
.blog-breadcrumb { font-size: 0.8rem; color: var(--color-text-muted); margin: 1.5rem 0; }
.blog-breadcrumb a { text-decoration: underline; color: var(--color-text-muted); }
.blog-breadcrumb span { color: var(--color-text); }

.blog-detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
.blog-detail-cover { aspect-ratio: 16/8; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; background: #f9f9f9; }
.blog-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.blog-detail-category {
  display: inline-block; background: var(--color-brand-green); color: #fff; font-size: 0.7rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm); margin-bottom: 0.75rem;
}
.blog-detail-title { font-size: 2rem; line-height: 1.2; margin: 0 0 0.6rem; }
.blog-detail-meta { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 2rem; }
.blog-detail-content { font-size: 1rem; line-height: 1.8; color: var(--color-text); }
.blog-detail-content p { margin: 0 0 1.25rem; }
.blog-detail-content h2, .blog-detail-content h3 { margin: 2rem 0 0.9rem; line-height: 1.3; }
.blog-detail-content ul, .blog-detail-content ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.blog-detail-content li { margin-bottom: 0.4rem; }
.blog-detail-content img { max-width: 100%; border-radius: var(--radius-sm); margin: 1rem 0; }
.blog-detail-content a { text-decoration: underline; color: var(--color-brand-green-dark); }
.blog-detail-share { display: flex; align-items: center; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-text-muted); }
.blog-detail-share a { width: 34px; height: 34px; border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text); }
.blog-detail-share a:hover { border-color: var(--color-brand-green); }

.blog-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1.5rem; }
.blog-sidebar-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1.5rem; }
.blog-sidebar-card h2 { font-size: 1rem; margin: 0 0 1.1rem; }
.blog-sidebar-list { display: flex; flex-direction: column; gap: 1rem; }
.blog-sidebar-item { display: flex; gap: 0.75rem; align-items: center; }
.blog-sidebar-item img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.blog-sidebar-item-title { display: block; font-size: 0.85rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.2rem; }
.blog-sidebar-item-date { display: block; font-size: 0.72rem; color: var(--color-text-muted); }
.blog-sidebar-empty { font-size: 0.85rem; color: var(--color-text-muted); }
.blog-sidebar-cta p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 1rem; }
.blog-sidebar-cta .btn { width: 100%; }

.blog-similar-section { margin-top: 4rem; }

@media (max-width: 900px) {
  .blog-detail-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-grid, .blog-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .blog-grid, .blog-grid-3 { grid-template-columns: 1fr; }
  .blog-detail-title { font-size: 1.5rem; }
}

/* ==========================================================================
   Socials — self-hosted link-in-bio page
   ========================================================================== */
body.socials-standalone-body {
  background: linear-gradient(180deg, #FBF7EF 0%, #F3EEE0 100%);
  min-height: 100vh;
  margin: 0;
}
.socials-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
}
.socials-card {
  max-width: 440px;
  width: 100%;
  text-align: center;
}
.socials-leaf { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.socials-logo-img { height: 56px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto 1.1rem; display: block; }
.socials-kicker { font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); margin: 0 0 0.5rem; }
.socials-tagline { color: var(--color-text-muted); font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase; margin: 0 0 2rem; line-height: 1.6; }

.socials-list { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.socials-link-btn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.socials-link-btn:hover { border-color: var(--color-brand-green); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.socials-link-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 0; }
.socials-link-label { flex: 1; text-align: center; padding-right: 2.2rem; }
.socials-empty { color: var(--color-text-muted); font-size: 0.9rem; }
.socials-back-link { display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: underline; }

.director-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; display: block; border: 3px solid var(--color-brand-green); }
.director-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-brand-green); color: #fff; font-size: 2.2rem; font-weight: 800;
}
.director-name { font-size: 1.3rem; font-weight: 800; color: var(--color-text); margin: 0 0 0.2rem; }
.director-bio { color: var(--color-text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0.5rem 0 1.5rem; }
.director-contact-list { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }

/* ==========================================================================
   Bolder global type — eye-catching, higher-contrast headings/labels
   ========================================================================== */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; }
.section-header h2, .why-shop-title { font-weight: 800; }
.mega-menu-toggle, .mega-menu-item > a, .header-icon-label,
.goal-card-title, .cart-summary, .btn { font-weight: 700; }
.top-category-label { font-weight: 800; }
.hero-slide-content h1 { font-weight: 800; }

/* ==========================================================================
   Account / Sign-in dropdown
   ========================================================================== */
.account-dropdown { position: relative; }
.account-dropdown .account-link {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.02rem;
  font-weight: 800;
  color: #059669;
  font-family: inherit;
}
.account-caret { transition: transform 0.15s ease; color: #059669; }
.account-dropdown.is-open .account-caret { transform: rotate(180deg); }
.account-dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  right: -10px;
  width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  padding: 1rem 0;
  z-index: 90;
}
.account-dropdown.is-open .account-dropdown-panel { display: block; }
.account-dropdown-welcome { padding: 0 1.1rem 0.85rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.4rem; }
.account-dropdown-hi { margin: 0; font-weight: 800; font-size: 0.95rem; }
.account-dropdown-sub { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--color-text-muted); }
.account-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}
.account-dropdown-panel a:hover { background: var(--color-bg); }
.account-dropdown-panel a svg { flex-shrink: 0; color: var(--color-brand-green); }
.account-dropdown-divider { height: 1px; background: var(--color-border); margin: 0.4rem 0; }
.account-dropdown-signout-form { margin: 0; }
.account-dropdown-signout-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.account-dropdown-signout-btn:hover { background: var(--color-bg); }
.account-dropdown-signout-btn svg { flex-shrink: 0; color: var(--color-brand-green); }
.account-dropdown-btn {
  display: block;
  margin: 0 1.1rem 0.6rem;
  padding: 0.6rem;
  text-align: center;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  border: 1.5px solid var(--color-brand-green);
  color: var(--color-brand-green);
}
.account-dropdown-btn-primary { background: var(--color-cta-bg); color: #fff; border-color: var(--color-cta-bg); }
.account-dropdown-btn:hover { opacity: 0.85; }
@media (max-width: 900px) {
  .account-dropdown-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; border-radius: 16px 16px 0 0; }
}

/* ==========================================================================
   Hero — static background layer + bolder CTAs
   ========================================================================== */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: right center;
  background-repeat: no-repeat;
  z-index: 0;
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.92) 30%, rgba(0,0,0,0.8) 45%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.15) 85%, transparent 100%);
  z-index: 1;
}
.hero-slide { background-image: none !important; }
.btn-cta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  color: #064E3B;
  border: 1.5px solid #25D366;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
}
.btn-cta-whatsapp svg { color: #25D366; }
.btn-cta-whatsapp:hover { background: #F0FDF4; opacity: 1; }
@media (max-width: 900px) {
  .hero-bg-layer {
    inset: 0 0 auto 0;
    height: 240px;
    position: relative;
    /* Was background-size:contain + position:right — on any image whose
       aspect ratio didn't exactly match the box this "contained" the
       photo and right-aligned it, leaving a visible gap of the hero's
       cream gradient down the left edge. cover + center guarantees the
       image always fills the full width edge-to-edge, cropping instead
       of letterboxing. */
    background-size: cover;
    background-position: center;
  }
  .hero-slide::before { display: none; }
}
@media (max-width: 420px) {
  .hero-bg-layer { height: 200px; }
}

/* ==========================================================================
   Why Shop With Us
   ========================================================================== */
.why-shop-band { background: white; margin: 0; padding: 3rem 0; }
.why-shop-section { max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; background: transparent; border-radius: 0; }
.why-shop-title { text-align: center; font-size: 1.3rem; margin: 0 0 1.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: black; }
.why-shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; justify-content: center; justify-items: stretch; }
.why-shop-item {
  text-align: center;
  background: var(--color-brand-green-dark);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.25rem;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-green-dark);
  transition: background 0.2s ease, transform 0.2s ease;
}
.why-shop-item:hover { background: var(--color-brand-green-dark); transform: translateY(-3px); }
.why-shop-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); color: #fff; margin-bottom: 0.85rem; box-shadow: none; }
.why-shop-item-title { margin: 0; font-weight: 800; font-size: 0.92rem; color: #fff; }
.why-shop-item-sub { margin: 0.3rem 0 0; font-size: 0.76rem; color: rgba(255,255,255,0.85); line-height: 1.35; }
@media (max-width: 900px) { .why-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .why-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .why-shop-item { padding: 14px; aspect-ratio: auto; }
  .why-shop-band { padding: 1.5rem 0; }
}

/* ==========================================================================
   Cart page — two-column layout with sticky order-summary sidebar
   ========================================================================== */
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items: start; }
.cart-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem; }
.promo-code-box, .order-summary-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}
.promo-code-label { margin: 0 0 0.6rem; font-weight: 700; font-size: 0.85rem; }
.promo-code-form { display: flex; gap: 0.5rem; }
.promo-code-form input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font-size: 0.85rem;
}
.promo-code-form button {
  background: var(--color-text);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
}
.promo-code-hint { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--color-text-muted); }
.promo-code-hint a { text-decoration: underline; font-weight: 600; }
.order-summary-box h2 { font-size: 1rem; margin: 0 0 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; }
.order-summary-row { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 0.4rem 0; }
.order-summary-muted { color: var(--color-text-muted); font-size: 0.8rem; }
.order-summary-total {
  display: flex;
  justify-content: space-between;
  font-weight: 800;
  font-size: 1.15rem;
  padding: 0.75rem 0;
  border-top: 2px solid var(--color-text);
  margin-bottom: 1rem;
}
.order-summary-badges { display: flex; justify-content: center; gap: 1rem; margin-top: 0.9rem; font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); }
.order-summary-badges span { display: inline-flex; align-items: center; gap: 0.3rem; }
.order-summary-badges svg { color: var(--color-brand-green); }
@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .cart-sidebar { position: static; }
}

/* ==========================================================================
   Cookie / location consent banner
   ========================================================================== */
.cookie-consent {
  display: none;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-text);
  color: #fff;
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  z-index: 200;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.cookie-consent-text { margin: 0; font-size: 0.82rem; line-height: 1.5; flex: 1 1 320px; }
.cookie-consent-text a { text-decoration: underline; color: #fff; font-weight: 700; }
.cookie-consent-actions { display: flex; gap: 0.6rem; flex-shrink: 0; margin-left: auto; }
.cookie-consent.is-visible { display: flex; }
.btn-cookie-decline, .btn-cookie-accept {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  cursor: pointer;
  border: 1.5px solid #fff;
}
.btn-cookie-decline { background: transparent; color: #fff; }
.btn-cookie-accept { background: var(--color-brand-green); color: #fff; border-color: var(--color-brand-green); }
@media (max-width: 560px) {
  .cookie-consent { flex-direction: column; align-items: stretch; }
  .cookie-consent-actions { margin-left: 0; justify-content: flex-end; }
}

/* ==========================================================================
   Footer highlight bar (Visit Store / WhatsApp / Reviews / Secure Checkout)
   ========================================================================== */
.footer-highlight-bar { background: var(--color-forest-dark); margin: 0; }
.footer-highlight-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.footer-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: #fff;
}
.footer-highlight-item svg { flex-shrink: 0; margin-top: 0.1rem; }
.footer-highlight-title { margin: 0; font-weight: 800; font-size: 0.85rem; }
.footer-highlight-sub { margin: 0.15rem 0 0; font-size: 0.74rem; opacity: 0.85; }
@media (max-width: 900px) { .footer-highlight-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-highlight-inner { grid-template-columns: 1fr; } }

/* ==========================================================================
   Brand directory page (/brands/)
   ========================================================================== */
.brand-page { max-width: var(--container-max); margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem 1rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.brand-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.brand-card img { height: 48px; width: auto; max-width: 100%; object-fit: contain; }
.brand-card-fallback {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-brand-green-dark);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-card-name { font-weight: 700; font-size: 0.88rem; }
.brand-card-count { font-size: 0.72rem; color: var(--color-text-muted); }
/* ==========================================================================
   Mobile polish pass — @media (max-width: 640px)
   (hero card styling now lives in the 900px/768px blocks above — see
   the "Fix invisible slide text" comment there for why it's light-card
   + dark text rather than a dark gradient card)
   ========================================================================== */

/* 2. Product card polish */
@media (max-width: 640px) {
  .badge {
    top: 6px;
    left: 6px;
    font-size: 10px;
    padding: 2px 6px;
    z-index: 2;
  }
  .badge-exclusive { left: auto; right: 6px; }

  .product-card-price {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .price-current {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    color: #059669;
  }

  .card-add-to-cart {
    height: 36px;
    font-size: 11px;
    padding: 0 8px;
  }
}

/* 3. Top bar: keep only the primary deal pill, drop secondary clutter */
@media (max-width: 640px) {
  .topbar-pill-outline { display: none; }
  .topbar-region { display: none; }
  .topbar-share { display: none; }
}

/* 4. Touch-scroll carousels for Top Categories & Trusted Brands */
@media (max-width: 640px) {
  .top-category-grid,
  .brand-marquee-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .top-category-grid::-webkit-scrollbar,
  .brand-marquee-track::-webkit-scrollbar {
    display: none;
  }
  .top-category-card,
  .brand-tile {
    flex: 0 0 auto;
    width: 130px;
    scroll-snap-align: start;
  }
  .brand-marquee-track { animation: none; }
}
/* ==========================================================================
   Checkout modal + floating WhatsApp chat (shared .bh-modal)
   ========================================================================== */
.bh-modal {
  position: fixed;
  inset: 0;
  z-index: 300; /* above the cookie banner (200) and toast (200) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bh-modal[hidden] { display: none; }
.bh-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); }
.bh-modal-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.bh-modal-card-sm { max-width: 420px; }
.bh-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.bh-modal-head h2 { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; }
.bh-modal-close {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}
.bh-modal-close:hover { background: var(--color-border); }
.bh-modal-sub { margin: 0 0 1rem; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; }
.bh-modal-fine { margin: 0.7rem 0 0; text-align: center; font-size: 0.75rem; color: var(--color-text-muted); }
.bh-field { margin-bottom: 0.85rem; flex: 1 1 0; min-width: 0; }
.bh-field label { display: block; margin-bottom: 0.3rem; font-size: 0.78rem; font-weight: 700; }
.bh-field input,
.bh-field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9rem;
  background: #fff;
  color: var(--color-text);
}
.bh-field textarea { resize: vertical; min-height: 84px; }
.bh-field input:focus,
.bh-field textarea:focus { outline: none; border-color: var(--color-brand-green); box-shadow: 0 0 0 3px rgba(21, 163, 74, 0.15); }
.bh-field-row { display: flex; gap: 0.75rem; }
.bh-optional { font-weight: 500; color: var(--color-text-muted); }
.bh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bh-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bh-form-error {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  background: #FEF2F2;
  color: var(--color-sale);
  font-size: 0.82rem;
  font-weight: 600;
}
.bh-form-error[hidden] { display: none; }
.bh-modal button[disabled] { opacity: 0.7; cursor: wait; }
body.bh-modal-open { overflow: hidden; }
@media (max-width: 520px) {
  .bh-field-row { flex-direction: column; gap: 0; }
  .bh-modal { align-items: flex-end; padding: 0; }
  .bh-modal-card { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92vh; }
}

/* Floating WhatsApp button — bottom-left */
.wa-float {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease, bottom 0.2s ease;
}
.wa-float:hover { transform: scale(1.07); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32); }
.wa-float:focus-visible { outline: 3px solid rgba(37, 211, 102, 0.5); outline-offset: 3px; }
/* Don't sit underneath the cookie banner while it's showing */
body:has(.cookie-consent.is-visible) .wa-float { bottom: 6.5rem; }
@media (max-width: 560px) {
  .wa-float { width: 52px; height: 52px; left: 0.75rem; bottom: 0.75rem; }
  body:has(.cookie-consent.is-visible) .wa-float { bottom: 11rem; }
}

/* Cart: secondary WhatsApp link under the checkout button */
.cart-wa-alt { display: block; margin-top: 0.75rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); text-decoration: underline; }
.cart-wa-alt:hover { color: var(--color-text); }

/* Order list rows (account page + guest recent orders) */
.account-orders { display: flex; flex-direction: column; gap: 0.6rem; }
.account-order-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.account-order-row:hover { border-color: var(--color-brand-green); }
.account-order-number { margin: 0; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem; }
.account-order-meta { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--color-text-muted); }
.account-order-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.account-order-track { font-size: 0.78rem; font-weight: 700; color: var(--color-brand-green-dark); }
.order-status-pill { padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 800; background: #FEF3C7; color: #92400E; }
.order-status-processing { background: #E0F2FE; color: #075985; }
.order-status-shipped { background: #F3E8FF; color: #6B21A8; }
.order-status-delivered { background: #D1FAE5; color: #065F46; }
.order-status-cancelled { background: #FEE2E2; color: #991B1B; }
.cart-recent-orders { max-width: 560px; margin: 2rem auto 0; }

/* Region / currency switcher inside the mobile hamburger drawer — the
   topbar copy is hidden at <=768px, so it lives here instead. */
.mega-menu-item-region { display: none; }
@media (max-width: 768px) {
  .mega-menu-item-region { display: block; border-bottom: 1px solid var(--color-border); }
  .mega-menu-region {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
    color: var(--color-text);
  }
  .mega-menu-region svg { flex-shrink: 0; color: var(--color-brand-green); }
  .mega-menu-currency { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-text-muted); }
  .mega-menu-currency a { color: var(--color-text-muted); font-weight: 800; padding: 0.15rem 0.1rem; }
  .mega-menu-currency a.is-active { color: var(--color-brand-green-dark); text-decoration: underline; }
}