/* ============================================================
   MARJAAN COMPUTERS — MAIN STYLESHEET

   How this file is organized:
   1. CSS Variables (color tokens, spacing)
   2. Reset & base styles
   3. Navigation bar
   4. Hero section
   5. Buttons (reusable)
   6. Category filter row
   7. Product grid & cards
   8. AI chat widget
   9. Footer
   10. Responsive breakpoints (tablet → desktop)

   MOBILE-FIRST APPROACH:
   Base styles target mobile phones.
   @media (min-width: ...) blocks add styles for larger screens.
============================================================ */


/* ============================================================
   1. CSS VARIABLES
   Think of these as named constants — define a color once,
   use it everywhere. To rebrand, change only this block.
============================================================ */
:root {
  /* ---- Marjaan Computers brand palette ---- */
  --primary:        #A01E1E;    /* Deep red/maroon — buttons, accents, logo */
  --primary-dark:   #7E1717;    /* Hover state for primary */
  --secondary:      #1A5C1A;    /* Dark green — secondary buttons, badges, success */
  --secondary-dark: #123F12;    /* Hover state for secondary */
  --dark:           #111827;    /* Navbar/footer background */
  --light-bg:       #F8F9FA;    /* Section backgrounds */
  --white:          #FFFFFF;
  --text-dark:      #1e293b;
  --text-muted:     #64748b;
  --border:         #e2e8f0;

  /* ---- Legacy aliases ----
     Older rules across the site (cart drawer, chat widget, footer,
     checkout, product page) were written against these names. Pointing
     them at the new brand tokens re-themes every page without having
     to touch each rule individually. */
  --navy:      var(--dark);
  --blue:      var(--primary);
  --green:     var(--secondary);
  --purple:    var(--secondary-dark);
  --gray-50:   var(--light-bg);
  --gray-100:  #F1F3F5;
  --gray-200:  var(--border);
  --gray-400:  #94A3B8;
  --gray-500:  var(--text-muted);
  --gray-600:  var(--text-muted);
  --gray-700:  var(--text-dark);
  --gray-800:  var(--text-dark);
  --gray-900:  var(--text-dark);

  /* Shape */
  --radius:      12px;        /* Product cards, chat panel */
  --radius-sm:   8px;         /* Smaller elements */
  --radius-full: 9999px;      /* Pill-shaped buttons, badges */

  /* Shadows */
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-nav:   0 2px 12px rgba(0, 0, 0, 0.12);
}


/* ============================================================
   2. RESET & BASE STYLES
   Browsers add default margins/paddings we don't want.
   This removes them for consistent cross-browser rendering.
============================================================ */

/* box-sizing: border-box means padding/border are included in
   the element's total width — avoids unexpected overflow */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Enables smooth scrolling for anchor links like href="#products" */
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  background-color: var(--gray-50);
  color: var(--gray-800);
  line-height: 1.6;
  overflow-x: hidden;
  /* No bottom padding here on purpose: .chat-widget is position:fixed,
     so it floats over the viewport's bottom-right corner regardless of
     scroll position — it doesn't need reserved space in the document
     flow, and padding-bottom here was only creating an empty gap below
     the footer. */
}

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

ul {
  list-style: none;
}

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


/* ============================================================
   3. NAVIGATION BAR
   Top bar (contact/delivery) → white row (logo/search/icons) →
   dark row (all-categories + nav links) → mobile accordion menu.
============================================================ */

/* ---- Top bar ---- */
.top-bar {
  background: var(--secondary);
  color: var(--white);
}

.top-bar-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.4rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  font-weight: 500;
}

.top-bar-item {
  white-space: nowrap;
}

.top-bar-delivery {
  display: none;   /* Shown from tablet breakpoint up — too cramped on phones */
}

/* ---- Sticky header wrapper (holds both colored rows) ---- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-nav);
}

/* ---- Row 1: white — logo, search, account/wishlist/cart ---- */
.nav-row-main {
  background: var(--white);
}

.nav-row-main-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

/* Logo */
.nav-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex-shrink: 0;
}

.logo-wordmark {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo-marjaan   { color: var(--primary); }
.logo-computers { color: var(--secondary); }

.logo-tagline {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-top: 0.1rem;
}

/* Search bar — full width row on mobile, centered flexible column on desktop */
.nav-search {
  order: 3;
  flex: 1 1 100%;
  display: flex;
  align-items: stretch;
  /* position:relative anchors .nav-search-dropdown below the bar.
     Rounded corners now live on the input/button individually (below)
     instead of via overflow:hidden here, since that would also clip
     the dropdown results. */
  position: relative;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
}

.nav-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0.6rem 0.9rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text-dark);
  background: var(--light-bg);
  /* Left corners only — the container's own border-radius used to
     handle this via overflow:hidden, which would also clip the
     dropdown below (see .nav-search above). */
  border-radius: calc(var(--radius-sm) - 1.5px) 0 0 calc(var(--radius-sm) - 1.5px);
}

.nav-search-input::placeholder {
  color: var(--text-muted);
}

.nav-search-btn {
  flex-shrink: 0;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--white);
  transition: background 0.2s;
  /* Right corners only — see .nav-search-input above. */
  border-radius: 0 calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px) 0;
}

.nav-search-btn:hover {
  background: var(--primary-dark);
}

/* ---- LIVE SEARCH DROPDOWN ---- */
.nav-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  max-height: 360px;
  overflow-y: auto;
  z-index: 300;   /* above the sticky navbar (100) and its dropdowns */
  display: none;  /* shown by adding .open — see script.js */
}

.nav-search-dropdown.open {
  display: block;
}

.nav-search-result {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  color: var(--text-dark);
  border-bottom: 1px solid var(--light-bg);
  transition: background 0.15s;
}

.nav-search-result:last-child {
  border-bottom: none;
}

.nav-search-result:hover {
  background: var(--primary);
  color: var(--white);
}

.nav-search-result:hover .nav-search-result-price,
.nav-search-result:hover .nav-search-result-category {
  color: rgba(255, 255, 255, 0.85);
}

.nav-search-result-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--light-bg);
}

.nav-search-result-emoji {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--light-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.nav-search-result-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-search-result-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-search-result-price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
}

.nav-search-result-category {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  background: var(--light-bg);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.55rem;
}

.nav-search-empty,
.nav-search-loading {
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Container for the right-side icons (account, wishlist, cart, hamburger) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

/* Base style for icon buttons (account, wishlist, cart) */
.icon-btn,
a.nav-icon-link {
  color: var(--text-dark);
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  position: relative;    /* Needed for the cart-count badge positioning */
  transition: color 0.2s, background 0.2s;
}

.icon-btn:hover,
a.nav-icon-link:hover {
  color: var(--primary);
  background: var(--light-bg);
}

.icon-btn-label {
  font-size: 0.62rem;
  font-weight: 600;
  display: none;   /* Shown from tablet breakpoint up */
}

/* ---- "Coming Soon" tooltip — Account + Wishlist icons ----
   Account/Wishlist aren't built yet (see includes/navbar.php's
   data-coming-soon attribute + script.js's click handler, which stops
   the href="#" from navigating anywhere). This tooltip is purely a
   CSS fade — desktop shows it on :hover/:focus with no JS needed;
   script.js only adds/removes .show for the mobile tap case, where
   there's no hover at all. */
.coming-soon-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  margin-bottom: 4px;
  padding: 0.35rem 0.65rem;
  background: var(--dark, #111827);
  color: var(--white, #fff);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;   /* never blocks clicks on the icon underneath */
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 20;
}

/* Desktop: hover or keyboard focus reveals it, no JS involved */
.nav-icon-link:hover .coming-soon-tooltip,
.nav-icon-link:focus .coming-soon-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile tap: script.js toggles this class (no :hover on touch devices) */
.coming-soon-tooltip.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Small red badge showing cart item count */
.cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--primary);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--white);
}

/* Hamburger button (three-line icon) — sits on the white row on mobile */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
}

.hamburger:hover {
  background: var(--light-bg);
}

/* Each line of the hamburger icon */
.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Animate the three lines into an X shape when .open is added */
.hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---- Row 2: dark — ALL CATEGORIES dropdown + nav links ---- */
.nav-row-secondary {
  background: var(--dark);
}

.nav-row-secondary-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: stretch;
}

.all-categories-wrap {
  position: relative;
}

.all-categories-btn {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.1rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background 0.2s;
}

.all-categories-btn:hover,
.all-categories-btn[aria-expanded="true"] {
  background: var(--primary-dark);
}

/* ---- "ALL CATEGORIES" dropdown panel ----
   Mobile-first base: a fixed, full-width overlay. Its content
   (.cat-panels) shows exactly ONE level at a time — a drill-down —
   so nothing needs to scroll; see the "CATEGORY PANELS" section below.
   The >=768px override turns it into a plain positioning anchor: it no
   longer has its own background/box — each .cat-panel column supplies
   its own, since several are visible side by side on desktop.
   Hidden until JS adds .open — see script.js. */
.all-categories-dropdown {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  z-index: 500;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.all-categories-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.all-cat-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
}

.all-cat-mobile-title {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-cat-back {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.all-cat-back[hidden] {
  display: none;
}

.all-cat-mobile-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.05rem;
  transition: background 0.15s;
  flex-shrink: 0;
}

.all-cat-mobile-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (min-width: 768px) {
  .all-categories-dropdown {
    position: absolute;
    inset: auto;
    top: 100%;
    left: 0;
    width: 230px;   /* matches the root .cat-panel's own width below */
    /* A fixed height (not auto) so every .cat-panel column below, each
       set to height:100%, ends up the SAME height and top-aligned —
       instead of every column being independently sized to its own
       content, which could otherwise leave Level 2/3 shorter or taller
       than Level 1. min() keeps it from ever running off a short screen. */
    height: min(70vh, 440px);
    background: transparent;
    overflow: visible;   /* Level 2/3 panels render outside this box — don't clip them */
    z-index: 110;
    transform: translateY(-6px);
  }

  .all-categories-dropdown.open {
    transform: translateY(0);
  }

  .all-cat-mobile-header {
    display: none;
  }
}


/* ============================================================
   CATEGORY PANELS — "ALL CATEGORIES" navbar dropdown content
   Built from sibling <ul class="cat-panel" data-level="1|2|3"> elements
   (see renderCatPanels() in includes/navbar.php) rather than nested
   ones, so every panel can be positioned independently:

   Mobile (base): exactly one .cat-panel has .active at a time — a
   drill-down. Tapping a .cat-panel-toggle arrow swaps to its child
   panel (script.js); the header's "Back" button reverses that. Nothing
   scrolls because only one short list is ever on screen.

   Desktop (>=768px): the root (L1) panel is always visible; hovering a
   row with children reveals its target panel via .active, positioned
   by data-level at a fixed left-offset — so Level 2 always sits flush
   against the right edge of Level 1, top-aligned, and Level 3 against
   Level 2, regardless of which specific row triggered it.
============================================================ */

.cat-panels {
  position: relative;
}

.cat-panel {
  display: none;
  padding: 0.3rem 0;
}

.cat-panel.active {
  display: block;
}

.cat-panel-item {
  position: relative;
}

.cat-panel-link {
  display: block;
  padding: 0.6rem 2.2rem 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  transition: background 0.15s, color 0.15s;
}

.cat-panel-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem;
}

/* Level 1 rows: solid red background + white text on hover — this is
   the only level that gets the strong red treatment. */
.cat-panel[data-level="1"] .cat-panel-item:hover .cat-panel-link {
  background: var(--primary);
  color: var(--white);
}

.cat-panel[data-level="1"] .cat-panel-item:hover .cat-panel-toggle {
  color: var(--white);
}

/* Level 2/3 rows: a light tint instead — red stays reserved for Level 1. */
.cat-panel[data-level="2"] .cat-panel-item:hover .cat-panel-link,
.cat-panel[data-level="3"] .cat-panel-item:hover .cat-panel-link {
  background: var(--light-bg);
  color: var(--primary);
}

@media (min-width: 768px) {

  .cat-panels {
    height: 100%;
  }

  .cat-panel {
    /* Fixed-height column, no scrollbar — see the header comment above:
       real data is short enough to fit; padding/font-size stay compact
       so it keeps fitting as categories are added. */
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    width: 230px;
    background: var(--white);
    box-shadow: var(--shadow-hover);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    padding: 0.3rem 0;
  }

  /* The root (L1) column is always shown and anchors the others — it
     isn't gated behind .active like Level 2/3 are. */
  .cat-panel[data-panel="root"] {
    display: block;
    position: relative;
    left: 0;
    top: 0;
  }

  .cat-panel[data-level="2"] {
    left: 230px;
    border-left: 3px solid var(--secondary);
  }

  .cat-panel[data-level="3"] {
    left: 460px;
    border-left: 3px solid var(--secondary);
  }

  .cat-panel-link {
    padding: 0.45rem 1.7rem 0.45rem 1rem;
    font-size: 0.8rem;
  }

  .cat-panel-toggle {
    pointer-events: none;   /* hover on the row already reveals the panel */
    font-size: 1rem;
  }
}


/* ============================================================
   FLYOUT CATEGORY MENU — homepage sidebar only
   Used by the left sidebar in index.php (starts at level 2 — the
   sidebar renders its own L1 row). Mobile-first: nested levels render
   inline as an accordion, toggled by .flyout-toggle via script.js.
   From 768px up, nested levels become floating panels revealed on
   hover, each one offset to the right of its parent item. The sidebar
   itself is hidden below 1024px, so in practice only the >=768px
   behaviour below is ever exercised.
============================================================ */

.flyout-menu.flyout-l1 {
  padding: 0.4rem 0;
}

.flyout-item {
  position: relative;
  border-bottom: 1px solid var(--light-bg);
}

.flyout-item:last-child {
  border-bottom: none;
}

.flyout-link {
  display: block;
  padding: 0.6rem 2.4rem 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  transition: background 0.15s, color 0.15s;
}

/* Level 1 items: solid red background + white text on hover/active */
.flyout-l1 > .flyout-item > .flyout-link:hover,
.flyout-l1 > .flyout-item.has-children:hover > .flyout-link {
  background: var(--primary);
  color: var(--white);
}

/* Level 2/3 items: light tint instead — red is reserved for L1 */
.flyout-l2 > .flyout-item > .flyout-link:hover,
.flyout-l3 > .flyout-item > .flyout-link:hover {
  background: var(--light-bg);
  color: var(--primary);
}

/* Arrow/toggle button — click target on touch devices, decorative on desktop */
.flyout-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.4rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: transform 0.2s, color 0.2s;
}

.flyout-l1 > .flyout-item.has-children:hover > .flyout-toggle {
  color: var(--white);
}

.flyout-item.has-children.open > .flyout-toggle {
  transform: rotate(90deg);
}

/* ---- Mobile/base: nested levels render inline as an accordion ---- */
.flyout-menu.flyout-l2,
.flyout-menu.flyout-l3 {
  display: none;
  margin: 0.2rem 0 0.35rem 1.1rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--secondary);
}

.flyout-item.has-children.open > .flyout-menu {
  display: block;
}

@media (min-width: 768px) {

  /* ---- Desktop: nested levels become floating flyout panels ---- */
  .flyout-menu.flyout-l2,
  .flyout-menu.flyout-l3 {
    display: block;
    position: absolute;
    left: 100%;
    top: -1px;
    margin: 0;
    padding: 0.4rem 0;
    min-width: 220px;
    background: var(--white);
    border-left: 3px solid var(--secondary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: var(--shadow-hover);
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }

  .flyout-item.has-children:hover > .flyout-menu,
  .flyout-item.has-children:focus-within > .flyout-menu,
  .flyout-item.has-children.open > .flyout-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .flyout-link {
    padding-right: 1.5rem;
  }

  .flyout-toggle {
    pointer-events: none;   /* hover already reveals the panel on desktop */
  }
}


/* Desktop nav links — hidden on mobile, shown on large screens */
.nav-links {
  display: none;    /* Overridden to "flex" in the desktop media query */
  gap: 2rem;
  align-items: center;
  margin-left: 1.5rem;
}

.nav-link {
  color: var(--gray-400);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--white);
}

/* Mobile dropdown menu (below the navbar) */
.mobile-menu {
  background: var(--dark);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  /* Hidden by default via max-height trick (animates smoothly) */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

/* JavaScript adds .open to show the menu */
.mobile-menu.open {
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: 0.75rem;
}

.mobile-nav-links {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.mobile-nav-link {
  display: block;
  padding: 0.8rem 0;
  color: var(--gray-400);
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-nav-link:hover {
  color: var(--white);
  padding-left: 0.25rem;
}

@media (min-width: 640px) {
  .top-bar-delivery {
    display: block;
  }

  .icon-btn-label {
    display: block;
  }
}

@media (min-width: 768px) {
  .nav-row-main-container {
    flex-wrap: nowrap;
  }

  .nav-search {
    order: 0;
    flex: 1 1 auto;
    max-width: 480px;
  }
}

@media (min-width: 1024px) {
  .nav-row-secondary-container {
    justify-content: flex-start;
  }
}


/* ============================================================
   4. HERO SECTION + LEFT CATEGORY SIDEBAR
============================================================ */

.hero-section {
  background: var(--light-bg);
  padding: 1.75rem 1rem 2.5rem;
}

.hero-layout {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ---- Left sidebar: all top-level categories ----
   Hidden below desktop — the navbar's "ALL CATEGORIES" dropdown
   button covers category browsing on mobile/tablet instead. */
.category-sidebar {
  display: none;
}

.category-sidebar-header {
  background: var(--primary);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.category-sidebar-list {
  padding: 0.3rem 0;
}

.category-sidebar-item {
  position: relative;
}

.category-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-dark);
  transition: background 0.15s, color 0.15s;
}

.cat-sidebar-icon {
  font-size: 1rem;
  line-height: 1;
}

.cat-sidebar-label {
  flex: 1;
}

.cat-sidebar-arrow {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color 0.15s;
}

/* Level 1 sidebar item: solid red background + white text on hover —
   the sidebar's own L1 row doesn't use the shared .flyout-item markup
   (it needs the emoji icon), so it gets its own hover rule here. The
   nested L2/L3 panel (rendered by renderCatFlyout(), see index.php) is
   styled generically by the shared .flyout-menu rules in the navbar
   section above; this rule only needs to reveal it on hover/focus. */
.category-sidebar-item:hover .category-sidebar-link,
.category-sidebar-item:focus-within .category-sidebar-link {
  background: var(--primary);
  color: var(--white);
}

.category-sidebar-item:hover .cat-sidebar-arrow,
.category-sidebar-item:focus-within .cat-sidebar-arrow {
  color: var(--white);
}

.category-sidebar-item:hover > .flyout-menu,
.category-sidebar-item:focus-within > .flyout-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ---- Hero content: headline, subtext, CTAs, floating product cards ---- */
.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.hero-text {
  max-width: 540px;
}

/* Small label/tag above the main headline */
.hero-tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.hero-headline {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 1rem;
}

.hl-dark {
  color: var(--text-dark);
}

.hl-primary {
  color: var(--primary);
  font-size: 1.15em;
}

.hero-subtext {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

/* Button row — stacked vertically on mobile */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* ---- Floating "recently added" product cards ---- */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 380px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decorative geometric blob behind the floating cards */
.hero-shape {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 25%, rgba(160, 30, 30, 0.12), transparent 60%),
    radial-gradient(circle at 72% 75%, rgba(26, 92, 26, 0.14), transparent 60%);
  border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%;
  z-index: 0;
}

.hero-float-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  padding: 1.5rem 0;
}

.hero-float-card:nth-child(1) { align-self: flex-start; }
.hero-float-card:nth-child(2) { align-self: center; }
.hero-float-card:nth-child(3) { align-self: flex-end; }

.hero-visual-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---- Shared mini product card (hero + on-sale strip) ---- */
.mini-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 85%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}

.mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.mini-card-image {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  position: relative;
}

.mini-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-card-emoji {
  font-size: 1.4rem;
}

.mini-card-info {
  min-width: 0;
}

.mini-card-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.mini-card-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
}

.mini-card-original {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 0.3rem;
}


/* ============================================================
   5. BUTTONS
   Reusable button styles applied via .btn + modifier class.
   Example: <button class="btn btn-primary">Click</button>
============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s;
  /* Full-width on mobile — overridden to auto on larger screens */
  width: 100%;
  max-width: 220px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Red primary button */
.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-dark);
}

/* Green outlined "Ask Our AI" button */
.btn-ai {
  background: transparent;
  color: var(--secondary);
  border: 2px solid var(--secondary);
}

.btn-ai:hover {
  background: var(--secondary);
  color: var(--white);
}

/* Product card "Add to Cart" button */
.btn-add-cart {
  padding: 0.55rem 1rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
}

.btn-add-cart:hover:not(:disabled) {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* Out-of-stock button appearance */
.btn-add-cart:disabled {
  background: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
}

/* "Added to cart" confirmation state (class added by script.js) */
.btn-add-cart.added {
  background: var(--secondary);
}


/* ============================================================
   6. TAB FILTERS (Popular Products — Featured/All/Phones/...)
============================================================ */

/* The scrollable row — flex lets buttons stay on one line */
.category-filters {
  display: flex;
  gap: 0.5rem;
  padding: 0.15rem 0 1.5rem;
  overflow-x: auto;             /* Scroll horizontally if too many buttons */
  -webkit-overflow-scrolling: touch;  /* Momentum scrolling on iOS */
  scrollbar-width: none;        /* Hide scrollbar in Firefox */
}

/* Hide scrollbar in Chrome, Safari, Edge */
.category-filters::-webkit-scrollbar {
  display: none;
}

.category-btn {
  flex-shrink: 0;       /* Buttons don't compress — they stay full size */
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-600);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;  /* Text never wraps inside the button */
  transition: all 0.2s;
}

.category-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* The currently selected filter */
.category-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(160, 30, 30, 0.3);
}


/* ============================================================
   7. PRODUCT GRID & CARDS
============================================================ */

.products-section {
  padding: 2rem 1rem 3rem;
}

.products-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 1.25rem;
}

/* Small red dot accent placed before a section title (legacy — kept for
   any page still using the plain .section-title + .title-dot combo) */
.title-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

/* ---- Best Sellers / Latest Arrivals / Recommended section headers ----
   Heading + "View All →" link on one row, with a short colored
   underline accent identifying each section (red/green/amber). */
.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.section-header-row .section-title {
  margin-bottom: 0;
  position: relative;
  padding-bottom: 0.6rem;
}

.section-header-row .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
}

.section-title-accent-red::after    { background: var(--primary); }
.section-title-accent-green::after  { background: var(--secondary); }
.section-title-accent-amber::after  { background: #D97706; }

.section-view-all {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.section-view-all:hover {
  text-decoration: underline;
}


/* ============================================================
   CATEGORY COLLAGE BANNER (index.php — includes/category-collage.php)
   One large panel (left, ~55% width) + two stacked smaller panels
   (right, ~45% width), 4px gap, 12px rounded outer corners — a CSS
   Grid with just 3 direct children (all <a> tags) positioned by
   nth-child, so no extra "right column" wrapper element is needed.
============================================================ */

.category-collage-section {
  padding: 2rem 1rem;
  margin-top: 1rem; /* extra breathing room above the whole section */
}

/* ---- "Shop By Category" section heading ----
   Same underline-accent mechanic as the Best Sellers/Latest Arrivals
   headings (.section-header-row .section-title::after in this file),
   sized per spec (24px) since this heading stands alone with no
   paired "View All" link, so it doesn't reuse those classes directly. */
.collage-heading-title {
  position: relative;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  padding-bottom: 0.6rem;
  margin-bottom: 20px;
}

.collage-heading-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--primary);
}

.category-collage-container {
  max-width: 1280px;
  margin: 0 auto;
}

.category-collage {
  display: grid;
  grid-template-columns: 55% 45%;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 400px;
  border-radius: 12px;
  overflow: hidden; /* keeps every panel's corners clipped to the outer radius */
}

/* Panel 1 (sort_order 1) — large left panel, spans both rows */
.category-collage > a:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
/* Panel 2 (sort_order 2) — top right */
.category-collage > a:nth-child(2) { grid-column: 2; grid-row: 1; }
/* Panel 3 (sort_order 3) — bottom right */
.category-collage > a:nth-child(3) { grid-column: 2; grid-row: 2; }

.collage-panel {
  position: relative;
  display: block;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: filter 0.3s ease;
}

.collage-panel:hover {
  filter: brightness(1.1);
}

/* Dark gradient over the bottom 40% so white text stays readable
   regardless of how bright the background image/gradient is. */
.collage-panel-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  pointer-events: none;
}

.collage-panel-text {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 2.5rem; /* leaves room for the arrow so long category names don't overlap it */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--white);
}

.collage-panel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.collage-panel-name {
  font-weight: 800;
  line-height: 1.15;
}
.collage-panel-large .collage-panel-name { font-size: 20px; }
.collage-panel-small .collage-panel-name { font-size: 16px; }

.collage-panel-count {
  font-size: 12px;
  opacity: 0.85;
}

.collage-panel-arrow {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.3s ease;
}
.collage-panel:hover .collage-panel-arrow {
  transform: translateX(4px);
}

/* Mobile: stack all 3 panels vertically, full width, fixed height */
@media (max-width: 767px) {
  .category-collage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .category-collage > a:nth-child(1),
  .category-collage > a:nth-child(2),
  .category-collage > a:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }
  .collage-panel {
    height: 180px;
  }
}


/* Grid: 2 columns on mobile, 3 on tablet (768px+), 5 on desktop (1200px+)
   — see the breakpoint overrides further down in this file. */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Individual product card — compact by design (5-across on desktop) */
.product-card {
  background: var(--white);
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  overflow: hidden;     /* Image corners follow the card's border-radius */
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

/* Product image area — fixed height (not aspect-ratio) so every card in
   the grid lines up at exactly the same height. position:relative also
   anchors the stock-badge pill, which overlays the top-left corner. */
.product-image {
  height: 180px;
  /* position:relative lets the real <img> and the stock-badge pill be positioned absolutely inside */
  position: relative;
  /* overflow:hidden clips the image to the rounded top corners */
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  /* flex centres the emoji placeholder; has no effect on the absolute-positioned img */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100); /* fallback while images load */
}

/* Real product photo — fills the space exactly, cropping rather than distorting */
.product-image > img {
  position: absolute;
  inset: 0;          /* shorthand for top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fill, preserving aspect ratio */
  object-position: center;
  display: block;
}

.product-emoji {
  font-size: 3rem;
  /* Prevents emoji from triggering text selection on double-click */
  user-select: none;
}

/* Content below the image */
.product-info {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;    /* Stretches so button stays at the bottom of every card */
}

/* Stock status colored badge — base pill styling shared by both:
     .stock-badge            → normal inline flow (product.php detail page)
     .stock-badge.stock-badge-overlay → absolute, pinned to a card's image
                                          top-left corner (product-card.php) */
.stock-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
}

.stock-badge-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ---- Product badges (NEW / HOT DEAL / RECOMMENDED / BEST SELLER) ----
   Top-right corner of the card image, stacked vertically when more
   than one applies. See includes/product-card.php's getProductBadges(). */
.product-badges {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.product-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.badge-new         { background: #1A5C1A; }
.badge-hot-deal     { background: #A01E1E; }
.badge-recommended  { background: #D97706; }
.badge-bestseller   { background: #111827; }

/* Small "(ex-VAT)" note under a product card's price */
.product-price-vat-note {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: -0.15rem;
}

.in-stock {
  background: #D1FAE5;   /* Light green background */
  color: #065F46;        /* Dark green text */
}

.low-stock {
  background: #FEF3C7;   /* Light yellow background */
  color: #92400E;        /* Dark amber text */
}

.out-of-stock {
  background: #FEE2E2;   /* Light red background */
  color: #991B1B;        /* Dark red text */
}

/* Clamped to 2 lines — a long product name just gets truncated with an
   ellipsis instead of stretching the card taller than its neighbours. */
.product-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
}

/* Two-button row at the bottom of each card.
   Default (mobile): stacked vertically — cards are too narrow for side-by-side.
   640px+: switches to a row so both buttons sit side by side. */
.product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: auto;     /* Pushes the button group to the card bottom */
  padding-top: 0.25rem;
}

/* Both action buttons: equal width, equal height within the flex row */
.product-card-actions .btn-view-details,
.product-card-actions .btn-add-cart {
  flex: 1;
  font-size: 11px;
  padding: 6px 10px;
}

/* "View Details" — outlined secondary style, clearly distinct from the solid Add-to-Cart */
.btn-view-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  background: transparent;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  white-space: nowrap;
  text-align: center;
}

.btn-view-details:hover {
  background: var(--blue);
  color: var(--white);
  transform: translateY(-1px);
}


/* ============================================================
   7A2. PAGINATION — Popular Products (index.php) and category.php
   Plain ?page=N links (a real page reload) styled to look like a
   typical Prev / [1][2][3] / Next control.
============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pagination-btn:hover:not(.disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

/* Prev/Next at the start/end of the list — dimmed and inert instead of
   removed, so the layout doesn't jump when there's nowhere left to go. */
.pagination-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.pagination-number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-dark);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pagination-number:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination-number.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}


/* ============================================================
   7B. FEATURES STRIP
   Dark 4-column strip between the hero and the promo banners.
============================================================ */

.features-strip {
  background: var(--dark);
}

.features-strip-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.75rem 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.feature-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.feature-title {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.feature-sub {
  color: var(--gray-400);
  font-size: 0.78rem;
}


/* ============================================================
   7C. PROMOTIONAL DEALS BANNERS + ON SALE STRIP
============================================================ */

.promo-section {
  padding: 2.5rem 1rem;
}

.promo-container {
  max-width: 1280px;
  margin: 0 auto;
}

.promo-banners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

/* Admin-controlled banner: image (with dark overlay) OR a solid
   bg_color, chosen per-banner via an inline style from PHP (see
   index.php). height:180px + overflow:hidden keeps every banner the
   same size regardless of the source image's dimensions. */
.promo-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 180px;
  border-radius: 10px;
  padding: 1.5rem;
  overflow: hidden;
  color: var(--white);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}

.promo-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* Dark gradient laid over an image banner so white text stays readable
   regardless of how bright the photo is. Only present when the banner
   has an uploaded image (see index.php) — solid-color banners skip it,
   their bg_color is already chosen to contrast with white text. */
.promo-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}

.promo-banner-text {
  position: relative;   /* sits above .promo-banner-overlay */
  z-index: 1;
}

.promo-banner-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 0.25rem;
}

.promo-banner-subtitle {
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 1rem;
}

.promo-banner-cta {
  display: inline-flex;
  width: auto;
  max-width: none;
  padding: 0.5rem 1.25rem;
  background: var(--white);
  color: var(--text-dark);
  font-size: 0.82rem;
}

.promo-banner:hover .promo-banner-cta {
  transform: none;
  box-shadow: none;
}

/* On Sale mini strip */
.sale-strip-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.sale-strip-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.sale-strip-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.sale-mini-card {
  width: 100%;
}


/* ============================================================
   7C2. OUR BRANDS — auto-sliding carousel
   Mobile-first: 2 cards visible, then 4 at tablet, 6 at desktop — see
   the media queries at the bottom of this block. The actual sliding
   (transform: translateX, interval timer, infinite-loop snap-back) is
   handled in script.js; this is just the visual side.
============================================================ */

.brands-section {
  background: var(--white);
  padding: 4rem 1rem;
}

.brands-container {
  max-width: 1280px;
  margin: 0 auto;
}

/* "OUR TRUSTED PARTNERS" — small, left-aligned, green left-border accent */
.brands-subtitle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary);
  border-left: 3px solid var(--secondary);
  padding-left: 0.75rem;
  text-align: left;
  margin-bottom: 0.6rem;
}

/* "Our Brands" — centered, with a short green underline accent */
.brands-title {
  position: relative;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-dark);
  padding-bottom: 1rem;
}

.brands-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--secondary);
}

.brands-carousel {
  overflow: hidden;
  margin-top: 2rem;
}

.brands-track {
  display: flex;
  gap: 1rem;
  /* script.js sets transform + transition inline per-slide; this is
     just a safe default before JS has run its first tick. */
  transition: transform 0.6s ease;
  will-change: transform;
}

.brand-card {
  /* 3 visible on mobile (base) — 2 gaps between them */
  flex: 0 0 calc((100% - 2rem) / 3);
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 700;
  color: var(--text-dark);
  transition: box-shadow 0.2s, transform 0.2s;
}

.brand-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Uploaded logo — fits inside the fixed-height card without cropping */
.brand-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Text fallback when no logo has been uploaded for a brand */
.brand-card-text {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.95rem;
}

/* Tablet: 4 visible — 3 gaps between them */
@media (min-width: 768px) {
  .brand-card {
    flex-basis: calc((100% - 3rem) / 4);
  }
}

/* Desktop: 6 visible — 5 gaps between them */
@media (min-width: 1024px) {
  .brand-card {
    flex-basis: calc((100% - 5rem) / 6);
  }
}



/* ============================================================
   8. AI CHAT WIDGET
   Fixed to bottom-right — always visible on every page.
============================================================ */

.chat-widget {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;     /* On top of everything */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

/* The floating pill button (always visible) */
.chat-bubble-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.2rem;
  /* Blue-to-purple gradient — matches the AI theme */
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(124, 58, 237, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.chat-bubble-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.55);
}

.chat-bubble-icon {
  font-size: 1.15rem;
}

/* Chat panel — hidden by default, shown when .open is added.
   width/height are a sensible default; script.js overwrites them with
   inline styles when the user drags to resize or clicks maximize (and
   restores a saved size from localStorage on load) — position:relative
   is what lets .chat-resize-handle anchor to this panel's own corner
   rather than some further-out ancestor. */
.chat-panel {
  position: relative;
  width: min(320px, calc(100vw - 2rem));  /* Respects small screens */
  height: 420px;
  min-width: 300px;
  min-height: 400px;
  max-width: 90vw;
  max-height: 85vh;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  /* Hidden until JavaScript adds .open class */
  display: none;
  flex-direction: column;
  transform-origin: bottom right;
}

.chat-panel.open {
  display: flex;
  animation: chatSlideUp 0.25s ease forwards;
}

@keyframes chatSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Gradient header bar */
.chat-panel-header {
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: var(--white);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.chat-header-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.chat-avatar {
  font-size: 1.6rem;
  line-height: 1;
}

.chat-name {
  font-weight: 700;
  font-size: 0.9rem;
}

.chat-status {
  font-size: 0.72rem;
  color: #A5F3FC;    /* Cyan — "online" feel */
  margin-top: 0.1rem;
}

/* Groups the maximize + close buttons so justify-content:space-between
   on .chat-panel-header only splits "info" from "these two buttons",
   instead of spreading all three across the header individually. */
.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.chat-close-btn,
.chat-maximize-btn {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}

.chat-close-btn:hover,
.chat-maximize-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
}

/* Drag-to-resize handle — top-left corner of the panel, the corner
   that actually moves as it grows (the panel is anchored bottom-right;
   see .chat-widget). Faint by default, clearer on hover as an affordance
   that this spot is draggable — see the mousedown listener in script.js. */
.chat-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.35;
  cursor: nwse-resize;   /* diagonal resize cursor along the panel's growth axis */
  z-index: 1;            /* sits above .chat-panel-header's gradient background */
  user-select: none;
  transition: opacity 0.15s;
}

.chat-resize-handle:hover {
  opacity: 1;
}

/* Scrollable messages area */
.chat-messages {
  flex: 1;
  min-height: 160px;
  /* No max-height: this area fills whatever room .chat-panel has after
     its header/input bar — which now varies as the panel is resized or
     maximized (see .chat-panel's own height above). */
  overflow-y: auto;
  padding: 0.85rem;
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 4px;
}

/* Individual message bubble */
.chat-message {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  font-size: 0.85rem;
  line-height: 1.55;
  word-break: break-word;
  /* AI replies (e.g. troubleshooting steps) may contain \n line breaks —
     pre-wrap renders them while still wrapping long lines normally. */
  white-space: pre-wrap;
}

/* Bot message: white bubble, left-aligned, pointy bottom-left */
.bot-message {
  background: var(--white);
  border: 1px solid var(--gray-200);
  color: var(--gray-800);
  border-radius: 12px 12px 12px 3px;
  align-self: flex-start;
}

/* User message: red bubble, right-aligned, pointy bottom-right */
.user-message {
  background: var(--blue);
  color: var(--white);
  border-radius: 12px 12px 3px 12px;
  align-self: flex-end;
}

/* Quick reply buttons under the welcome message — a one-time
   shortcut row, removed as soon as one is clicked (see script.js) */
.chat-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-self: flex-start;
  max-width: 92%;
}

.chat-quick-reply-btn {
  padding: 0.4rem 0.75rem;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-full);
  background: var(--white);
  color: var(--primary);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.chat-quick-reply-btn:hover {
  background: var(--primary);
  color: var(--white);
}

/* Clickable WhatsApp button appended under an AI reply that mentions it.
   Block-level with its own top margin so it stacks below the message
   text in normal flow — .bot-message isn't flex, so this can't rely on
   a flex gap without also affecting the static welcome messages'
   existing <p> spacing. */
.chat-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--secondary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: normal;
  transition: background 0.15s, transform 0.15s;
}

.chat-whatsapp-btn:hover {
  background: var(--secondary-dark);
  transform: translateY(-1px);
}

/* ---- AI product-card recommendations ----
   Rendered inside a bot message when the AI recommends a specific
   product to buy — see the sanitized HTML rendering in script.js and
   the format instructions in ai-chat.php's system prompt. */
.chat-product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-top: 8px;
}

.chat-product-link {
  color: var(--primary);
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
}

.chat-product-link:hover {
  text-decoration: underline;
}

.chat-add-cart-btn {
  display: block;
  width: 100%;
  background: var(--secondary);
  color: var(--white);
  border-radius: 6px;
  padding: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.chat-add-cart-btn:hover {
  background: #134a13;
}

.chat-add-cart-btn:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

/* Input bar at the bottom of the chat */
.chat-input-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--gray-200);
  background: var(--white);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  outline: none;
  font-family: inherit;
  color: var(--gray-800);
  background: var(--gray-50);
  transition: border-color 0.2s;
}

.chat-input:focus {
  border-color: var(--blue);
  background: var(--white);
}

.chat-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--purple);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}

.chat-send-btn:hover {
  background: #6D28D9;
  transform: scale(1.05);
}


/* ============================================================
   CATEGORY PAGE
   Header bar, breadcrumb, and empty-state for category.php
============================================================ */
.cat-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  padding: 1.25rem 1.5rem 1rem;
}
.cat-breadcrumb {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin-bottom: 0.35rem;
}
.cat-breadcrumb a {
  color: var(--blue);
  text-decoration: none;
}
.cat-breadcrumb a:hover { text-decoration: underline; }
.cat-breadcrumb-sep {
  margin: 0 0.35rem;
  color: var(--gray-400);
}
.cat-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-800);
}
.cat-count {
  font-size: 0.8125rem;
  color: var(--gray-600);
  margin-top: 0.2rem;
}
.cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--gray-600);
}
.cat-empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.cat-empty-title { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 0.4rem; }
.cat-empty-sub { font-size: 0.9rem; }
.cat-empty-sub a { color: var(--blue); text-decoration: none; }
.cat-empty-sub a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .cat-header { padding: 1.5rem 2rem 1.1rem; }
  .cat-title { font-size: 1.6rem; }
}


/* ============================================================
   CATEGORY PAGE — SIDEBAR FILTER LAYOUT
   Mobile-first: sidebar is an off-canvas left overlay by default;
   from 992px it becomes a static 250px column beside the grid.
============================================================ */

.cat-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

/* "🔽 Filter & Sort" — mobile only */
.cat-filter-toggle-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text-dark);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
}

.cat-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 400;
}
.cat-sidebar-overlay.visible { display: block; }

.cat-sidebar {
  /* Off-canvas by default (mobile) */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 82%;
  max-width: 320px;
  background: var(--white);
  z-index: 450;
  padding: 1.25rem;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.cat-sidebar.open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}

.cat-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.cat-sidebar-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
}
.cat-sidebar-close {
  font-size: 1.1rem;
  color: var(--gray-600);
  line-height: 1;
  padding: 0.25rem;
}

.filter-group {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.filter-group:last-child { border-bottom: none; margin-bottom: 0; }

.filter-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.75rem;
}

.filter-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 220px;
  overflow-y: auto;
}
.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dark);
  cursor: pointer;
}
.filter-checkbox-label input { width: auto; margin: 0; }

.cat-main {
  flex: 1;
  min-width: 0;   /* allows the grid to shrink instead of overflowing the flex row */
  width: 100%;
}

.cat-results-count {
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
}

/* ---- Dual-handle price range slider ----
   Two overlapping <input type="range"> — CSS makes the native track
   transparent and gives pointer-events only to the thumb, so both
   handles can be grabbed independently even though they occupy the
   same box. A separate div (.price-slider-track-fill) draws the
   highlighted range between the two handles; JS positions it. */
.price-range-display {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
}

.price-slider {
  position: relative;
  height: 24px;
}

.price-slider-track-bg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--gray-200);
  border-radius: 2px;
}

.price-slider-track-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--primary);
  border-radius: 2px;
}

.price-range-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: none;
  pointer-events: none;   /* the track itself is click-through */
  -webkit-appearance: none;
  appearance: none;
}

/* Only the thumb should be interactive — re-enable pointer events
   just on it, for both WebKit and Firefox's separate pseudo-elements. */
.price-range-input::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.price-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.price-range-input::-webkit-slider-runnable-track { background: transparent; }
.price-range-input::-moz-range-track { background: transparent; }

@media (min-width: 992px) {
  .cat-layout {
    flex-direction: row;
    align-items: flex-start;
    padding: 1.5rem 2rem;
  }

  .cat-filter-toggle-btn { display: none; }
  .cat-sidebar-close     { display: none; }

  .cat-sidebar {
    position: static;
    width: 250px;
    flex-shrink: 0;
    transform: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    max-height: none;
  }
  .cat-sidebar-header { display: none; }
}


/* ============================================================
   9. FOOTER
============================================================ */

.footer {
  background: var(--navy);
  color: var(--gray-400);
  margin-top: 2rem;
}

/* Inner grid: single column on mobile.
   3.75rem (60px) top/bottom keeps the whole footer from feeling cramped
   against the section above/below it; the 2rem (32px) gap already clears
   the "at least 20px between columns" bar with room to spare. */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.75rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.footer-logo {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.35rem;
}

.footer-tagline {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--gray-400);
  margin-bottom: 0.85rem;
  max-width: 420px;
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 0.85rem;
}

.footer-link {
  display: block;
  font-size: 0.875rem;
  color: var(--gray-400);
  padding: 0.15rem 0;
  transition: color 0.2s;
}

.footer-link:hover {
  color: var(--white);
}

/* WhatsApp link gets a green color */
.whatsapp-link {
  color: #4ADE80;
  font-weight: 500;
}

.whatsapp-link:hover {
  color: #86EFAC;
}

.footer-location {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.footer-nav {
  display: flex;
  flex-direction: column;
}

/* Column 4: Google Maps embed + address */
.footer-map-col iframe {
  display: block;
  margin-top: 0.25rem;
}

.footer-map-address {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
}

/* Bottom copyright strip */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--gray-600);
}


/* ============================================================
   10. RESPONSIVE BREAKPOINTS

   HOW MEDIA QUERIES WORK:
   @media (min-width: 640px) { ... }
   → "Apply these rules ONLY if the screen is at least 640px wide"

   We start mobile-first (no query = all screens),
   then progressively enhance for wider screens.
============================================================ */

/* ----- MOBILE ONLY: shrink chat bubble so it doesn't overlap cards ----- */
/* On small screens the "Need help?" text makes the button very wide.
   We hide the text and make the bubble a compact square icon instead. */
@media (max-width: 639px) {

  .chat-bubble-text {
    display: none;
  }

  .chat-bubble-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;    /* Circular button */
    padding: 0;
    justify-content: center;
  }

  .chat-bubble-icon {
    font-size: 1.5rem;
  }

}

/* ----- MOBILE ONLY (<768px): chat opens full-screen, no resize/maximize -----
   There's no room for a floating, resizable panel on a phone, so below
   768px the chat panel always covers the whole viewport instead — see
   .chat-resize-handle / .chat-maximize-btn below for the controls this
   hides, and script.js for the matching JS-side guards. */
@media (max-width: 767px) {

  .chat-panel {
    /* Escapes .chat-widget's own bottom/right inset entirely, so it
       covers the full viewport instead of just growing within it. */
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .chat-resize-handle,
  .chat-maximize-btn {
    display: none;
  }

}

/* ----- TABLET AND UP (640px+) ----- */
@media (min-width: 640px) {

  .hero-headline {
    font-size: 2.75rem;
  }

  /* Side-by-side buttons in hero instead of stacked */
  .hero-buttons {
    flex-direction: row;
    justify-content: center;
  }

  /* Product card action buttons: switch from stacked → side by side */
  .product-card-actions {
    flex-direction: row;
  }

  /* Buttons no longer need to be full-width */
  .btn {
    width: auto;
    max-width: none;
  }

  /* Product grid columns are handled separately at 768px/1200px —
     see the dedicated breakpoints right after the 1024px block below. */

  .product-emoji {
    font-size: 3.5rem;
  }

  /* 2-column features strip / promo banners / sale strip on tablet */
  .features-strip-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .promo-banners {
    grid-template-columns: repeat(2, 1fr);
  }

  .sale-strip-list {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ----- DESKTOP (1024px+) ----- */
@media (min-width: 1024px) {

  /* Show desktop nav links */
  .nav-links {
    display: flex;
  }

  /* Hide the hamburger button on desktop */
  .hamburger {
    display: none;
  }

  /* Always hide mobile menu on desktop (even if JS opened it) */
  .mobile-menu {
    display: none !important;
  }

  .hero-section {
    padding: 2.5rem 1rem 3rem;
  }

  /* Sidebar + hero side by side */
  .hero-layout {
    flex-direction: row;
    align-items: flex-start;
    padding: 0 1.5rem;
  }

  .category-sidebar {
    display: block;
    width: 220px;
    flex-shrink: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
  }

  .hero-main {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 2.5rem;
    padding-top: 1rem;
  }

  .hero-text {
    text-align: left;
  }

  .hero-buttons {
    justify-content: flex-start;
  }

  .hero-headline {
    font-size: 3rem;
    letter-spacing: -1.5px;
  }

  .hero-subtext {
    font-size: 1.1rem;
  }

  /* Product grid columns are handled separately at 768px/1200px —
     see the dedicated breakpoints right after this 1024px block. */

  .product-emoji {
    font-size: 4rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  /* 4-column features strip on desktop */
  .features-strip-container {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 4-across sale strip on desktop */
  .sale-strip-list {
    grid-template-columns: repeat(4, 1fr);
  }

  /* 4-column footer on desktop — Brand/About, Shop links, Contact, Map */
  .footer-container {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    align-items: start;
  }

}

/* ----- PRODUCT GRID: 4 columns on tablet (768px+) -----
   Deliberately its own breakpoint, separate from the 640px/1024px
   blocks above — the product grid's column count now follows
   2 / 4 / 6 (mobile/tablet/desktop) instead of the 2 / 3 / 4 the rest
   of the site's breakpoints imply. */
@media (min-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----- PRODUCT GRID: 5 columns on desktop (1200px+) ----- */
@media (min-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ----- WIDE DESKTOP (1280px+) ----- */
@media (min-width: 1280px) {

  .hero-headline {
    font-size: 3.25rem;
  }

}


/* ============================================================
   CART DRAWER
   A panel that slides in from the right edge of the screen.
   Triggered by clicking the cart icon in the navbar.

   Z-INDEX LAYERS (higher number = on top):
     Navbar:          100
     Category bar:     90
     Chat widget:     200
     Cart overlay:    500  ← dims everything below it
     Cart drawer:     600  ← sits above the overlay
============================================================ */

/* When the cart is open, lock the page scroll.
   JavaScript adds/removes this class on <body>. */
body.cart-open {
  overflow: hidden;
}


/* ---- OVERLAY ----
   The translucent dark background behind the drawer.
   Clicking it closes the drawer (handled in script.js). */

.cart-overlay {
  position: fixed;
  /* inset: 0 is shorthand for top:0; right:0; bottom:0; left:0 */
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 500;
  opacity: 0;
  pointer-events: none;    /* Invisible = click-through, no accidental dismissal */
  transition: opacity 0.3s ease;
}

.cart-overlay.open {
  opacity: 1;
  pointer-events: auto;    /* Now clickable to close the drawer */
}


/* ---- DRAWER PANEL ---- */

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  /* min() picks the smaller of the two values.
     On phones narrower than 380px: takes full viewport width.
     On anything wider: capped at 380px. */
  width: min(380px, 100vw);
  /* 100dvh = "dynamic viewport height" — on mobile, adjusts for
     the browser address bar appearing/disappearing. Falls back to
     100vh on browsers that don't support dvh yet. */
  height: 100vh;
  height: 100dvh;
  background: var(--white);
  z-index: 600;
  display: flex;
  flex-direction: column;  /* Header, scrollable body, footer stacked vertically */
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  /* Start hidden: pushed fully off-screen to the right */
  transform: translateX(100%);
  /* cubic-bezier gives a natural deceleration (snappy start, smooth stop) */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-drawer.open {
  transform: translateX(0);   /* Slides fully into view */
}


/* ---- DRAWER HEADER ---- */

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;   /* Never squishes — stays fixed at the top */
}

.cart-drawer-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.cart-drawer-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
}

/* "(3 items)" label next to the title */
.cart-drawer-count {
  font-size: 0.82rem;
  color: var(--gray-400);
  font-weight: 500;
}

/* X close button */
.cart-drawer-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}

.cart-drawer-close:hover {
  color: var(--gray-800);
  background: var(--gray-100);
}


/* ---- DRAWER BODY (scrollable items list) ---- */

.cart-drawer-body {
  flex: 1;           /* Fills all height between the header and footer */
  overflow-y: auto;  /* Scrolls when items are taller than available space */
  padding: 0.25rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

.cart-drawer-body::-webkit-scrollbar { width: 4px; }
.cart-drawer-body::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 4px;
}


/* ---- EMPTY STATE ----
   Shown when all items have been removed. */

.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1rem;
  gap: 0.6rem;
}

.cart-empty-icon {
  font-size: 3.5rem;
  line-height: 1;
  opacity: 0.3;
  margin-bottom: 0.5rem;
}

.cart-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
}

.cart-empty-sub {
  font-size: 0.875rem;
  color: var(--gray-400);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}


/* ---- CART ITEM ROWS ---- */

.cart-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--gray-100);
}

.cart-item:last-child {
  border-bottom: none;
}

/* Small product thumbnail (emoji placeholder) */
.cart-item-image {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  user-select: none;
}

.cart-item-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;   /* Required for text-overflow: ellipsis to work in flex */
}

.cart-item-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gray-800);
  line-height: 1.3;
  /* Clip very long names with "..." instead of wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Price + optional crossed-out original price */
.cart-item-pricing {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.cart-item-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blue);
}

/* Crossed-out original price — same pattern as product.html */
.cart-item-original {
  font-size: 0.78rem;
  color: var(--gray-400);
  text-decoration: line-through;
}

/* Row holding qty controls on the left, Remove on the right */
.cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
}

/* Quantity stepper: [−] [2] [+] */
.qty-controls {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;   /* Keeps ± buttons inside the rounded border */
}

.qty-btn {
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--gray-600);
  background: var(--white);
  transition: background 0.15s, color 0.15s;
}

.qty-btn:hover {
  background: var(--gray-100);
  color: var(--gray-800);
}

/* The number between the two buttons */
.qty-value {
  min-width: 30px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-800);
  /* Left/right borders separate the number from the ± buttons */
  border-left: 1.5px solid var(--gray-200);
  border-right: 1.5px solid var(--gray-200);
  padding: 0.1rem 0.2rem;
}

/* "Remove" text link */
.cart-remove-btn {
  font-size: 0.75rem;
  color: var(--gray-400);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.cart-remove-btn:hover {
  color: #EF4444;   /* Red signals a destructive action */
}


/* ---- DRAWER FOOTER (totals + checkout buttons) ---- */

.cart-drawer-footer {
  border-top: 1px solid var(--gray-200);
  padding: 1rem 1.25rem 1.5rem;
  flex-shrink: 0;      /* Always visible at the bottom — never scrolled away */
  background: var(--gray-50);
}

.cart-totals {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}

/* Each row: label (left) + amount (right) */
.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* The final "Total" row is visually heavier than Subtotal and VAT */
.cart-total-final {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-800);
  padding-top: 0.6rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--gray-200);
}

/* "Calculated at checkout" — the drawer has no delivery address yet,
   so the Delivery Fee row shows this instead of a KES amount. */
.cart-total-note {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--gray-400);
}

/* Two stacked buttons */
.cart-action-btns {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Override the default .btn width constraints so both buttons
   fill the full drawer width at every screen size */
.cart-action-btns .btn {
  width: 100%;
  max-width: none;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  border-radius: var(--radius);
  justify-content: center;
}


/* ============================================================
   PRODUCT DETAIL PAGE (product.html)
   All styles specific to the single-product view live here.
   They're kept separate from the homepage styles so it's easy
   to find and edit them as the page evolves.
============================================================ */

/* Page wrapper: adds breathing room above and below the content */
.product-page-main {
  padding: 1.5rem 1rem 3rem;
}

/* Inner container: mirrors the width cap used across the whole site */
.product-page-container {
  max-width: 1200px;
  margin: 0 auto;
}


/* ---- BACK LINK ---- */

.product-breadcrumb {
  margin-bottom: 1.5rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
  transition: color 0.2s, gap 0.2s;
}

.back-link:hover {
  color: #1D4ED8;
  gap: 0.4rem;    /* Arrow moves left on hover — subtle interaction */
}


/* ---- TWO-COLUMN PRODUCT LAYOUT ----
   Mobile: single column (image stacks above info).
   768px+: two equal columns side by side. */

.product-layout {
  display: grid;
  grid-template-columns: 1fr;       /* Single column on mobile */
  gap: 2rem;
  margin-bottom: 3rem;
  align-items: start;
}


/* ---- LEFT: IMAGE COLUMN ---- */

/* Large image placeholder — same concept as card placeholders on homepage,
   but square and much bigger */
.product-main-image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The big emoji — replace with <img> once real photos exist */
.product-image-emoji {
  font-size: 7rem;
  user-select: none;
}

/* Thumbnail strip below the main image */
.product-thumbnails {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* Each small thumbnail box */
.thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: border-color 0.2s;
  user-select: none;
}

/* Highlight the currently selected thumbnail */
.thumb.active,
.thumb:hover {
  border-color: var(--blue);
}


/* ---- RIGHT: INFO COLUMN ----
   flex column with gap gives us consistent spacing between each
   element without needing to set margin on every child individually */

.product-info-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Brand name above the title */
.product-brand {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: -0.5rem;   /* Pull the title up closer to the brand */
}

/* Main product title — the page's only <h1> */
.product-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gray-800);
  line-height: 1.2;
  letter-spacing: -0.5px;
}


/* ---- PRICING ROW ----
   Three elements in a flex row:
   [KES 45,000]  [KES 52,000]  [13% OFF]
   flex-wrap lets them stack onto a new line if the screen is narrow */

.product-pricing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* The actual sale price — large and blue, catches the eye first */
.price-main {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--blue);
  line-height: 1;
}

/* The original (higher) price — grayed out and struck through.
   text-decoration: line-through draws the strikethrough line. */
.price-original {
  font-size: 1rem;
  color: var(--gray-400);
  text-decoration: line-through;
  font-weight: 500;
}

/* Red badge showing how much the shopper saves */
.discount-badge {
  display: inline-block;
  background: #EF4444;     /* Bright red — draws attention to the saving */
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  letter-spacing: 0.3px;
}

/* Badges near the product title (product.php) — same pill look as the
   card-image badges, just laid out inline instead of absolutely
   positioned, and slightly larger to read comfortably at this size. */
.product-badges-detail {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.25rem 0 0.5rem;
}
.product-badges-detail .product-badge {
  font-size: 0.72rem;
  padding: 0.25rem 0.65rem;
}

/* ---- VAT BREAKDOWN (below the price) ---- */
.product-vat-breakdown {
  margin: 0.25rem 0 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--light-bg);
  border-radius: 8px;
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
}
.product-vat-line {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.product-vat-total {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
}

/* ---- SALE-ENDS BANNER ---- */
.product-sale-banner {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.9rem;
  background: #FEE2E2;
  color: #991B1B;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid #FCA5A5;
}


/* ---- DESCRIPTION ---- */

.product-description {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.75;
}


/* ---- SPECIFICATIONS TABLE ----
   A proper HTML <table> for structured key-value data.

   border-collapse: collapse means borders of adjacent cells merge
   into a single line instead of doubling up.

   <th scope="row"> cells are the row labels on the left.
   <td> cells hold the actual values on the right. */

.specs-wrapper {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;   /* Makes child borders respect the border-radius */
}

.specs-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.65rem 0.85rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Every row gets a bottom border except the last one */
.specs-table tbody tr {
  border-bottom: 1px solid var(--gray-200);
}

.specs-table tbody tr:last-child {
  border-bottom: none;
}

/* Alternating row background — makes the table easier to scan */
.specs-table tbody tr:nth-child(even) {
  background: var(--gray-50);
}

/* Left cells: spec labels (e.g., "Display", "Battery") */
.specs-table th {
  text-align: left;
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  width: 36%;          /* Label column is 36% wide */
  vertical-align: top; /* Aligns label to top when value wraps to multiple lines */
}

/* Right cells: spec values */
.specs-table td {
  padding: 0.65rem 0.85rem;
  color: var(--gray-800);
  vertical-align: top;
  line-height: 1.5;
}


/* ---- ACTION BUTTONS ----
   Two full-width stacked buttons.
   Both extend the base .btn class but with their own color scheme. */

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Resize the two action buttons to match the homepage card button size. */
.product-actions .btn-whatsapp-outline,
.product-actions .btn-add-cart {
  font-size: 0.78rem;
  padding: 0.5rem 0.4rem;
  border-radius: var(--radius-full);
  width: 100%;
  max-width: none;
}

/* M-Pesa button: solid brand red — this is the primary "place order" action
   on the checkout page, so it uses --primary rather than the M-Pesa green. */
.btn-mpesa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
}

.btn-mpesa:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(160, 30, 30, 0.35);
}

.btn-mpesa:active {
  transform: translateY(0);
}

/* WhatsApp button: outlined (border + text only, no fill)
   Mirrors the green color but is clearly secondary to M-Pesa */
.btn-whatsapp-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.btn-whatsapp-outline:hover {
  background: #F0FDF4;   /* Very light green tint on hover */
  transform: translateY(-1px);
}


/* ---- RELATED PRODUCTS SECTION ---- */

.related-section {
  border-top: 1px solid var(--gray-200);
  padding-top: 2rem;
}

/* Horizontal scrollable row of cards.
   Works the same as the category filter row — flex keeps cards
   in one line, overflow-x lets you scroll when they exceed the width. */
.related-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;   /* Space so the scrollbar doesn't clip card shadows */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

.related-scroll::-webkit-scrollbar {
  height: 4px;
}
.related-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: 4px;
}

/* Each related card: fixed width so they don't stretch to fill all available space.
   flex-shrink: 0 prevents them from being squished smaller than their set width. */
.related-card {
  flex-shrink: 0;
  width: 185px;
}


/* ============================================================
   PRODUCT PAGE — RESPONSIVE OVERRIDES
============================================================ */

/* Tablet and up: two-column product layout */
@media (min-width: 768px) {

  .product-layout {
    /* 45% image, 55% info — slightly more space for the details */
    grid-template-columns: 45fr 55fr;
    gap: 2.5rem;
  }

}

/* Desktop: bigger image emoji, bigger title */
@media (min-width: 1024px) {

  .product-image-emoji {
    font-size: 10rem;
  }

  .product-title {
    font-size: 2rem;
  }

  .price-main {
    font-size: 2.2rem;
  }

  .related-card {
    width: 220px;
  }

  /* Switch the two product-page action buttons from stacked → side by side */
  .product-actions {
    flex-direction: row;
  }

  .product-actions .btn-whatsapp-outline,
  .product-actions .btn-add-cart {
    flex: 1;
    width: auto;
  }

}


/* ============================================================
   ANIMATIONS
   Load and interaction animations for a polished feel.
   All durations stay 150–385 ms — fast enough to feel snappy,
   never so slow they feel theatrical.
============================================================ */

/* ---- PRODUCT CARD LOAD ANIMATION ----
   Cards cascade in from slightly below on first page load.
   Each card is delayed by 55 ms so they arrive in a gentle wave
   rather than all popping in at once. */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-grid .product-card { animation: cardFadeIn 0.35s ease both; }
.product-grid .product-card:nth-child(1) { animation-delay:   0ms; }
.product-grid .product-card:nth-child(2) { animation-delay:  55ms; }
.product-grid .product-card:nth-child(3) { animation-delay: 110ms; }
.product-grid .product-card:nth-child(4) { animation-delay: 165ms; }
.product-grid .product-card:nth-child(5) { animation-delay: 220ms; }
.product-grid .product-card:nth-child(6) { animation-delay: 275ms; }
.product-grid .product-card:nth-child(7) { animation-delay: 330ms; }
.product-grid .product-card:nth-child(8) { animation-delay: 385ms; }

/* ---- CHAT PANEL CLOSE ANIMATION ----
   The panel opens via @keyframes chatSlideUp (defined near .chat-panel).
   This mirrors it in reverse. JavaScript adds .closing, waits for it to
   finish (200 ms), then removes .open so display reverts to none. */
@keyframes chatSlideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.97); }
}

/* When .closing is present alongside .open, the later-defined rule wins
   and the close animation plays while the panel is still display:flex. */
.chat-panel.closing {
  display: flex;
  animation: chatSlideDown 0.2s ease forwards;
}

/* Skip decorative load animations for users who prefer reduced motion.
   State-change animations (hover lifts, cart drawer slide) are kept because
   they communicate position and help with spatial orientation. */
@media (prefers-reduced-motion: reduce) {
  .product-grid .product-card { animation: none; }
  .chat-panel.closing { animation: none; }
}


/* ============================================================
   CHECKOUT FORM — inside the cart drawer
   Replaces the items list when the customer clicks "Checkout".
   Styled to feel like part of the drawer, not a separate page.
============================================================ */

.checkout-form-panel {
  padding: 1.25rem;
}

.checkout-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.25rem;
}

.checkout-form-amount {
  font-size: 0.875rem;
  color: var(--gray-500);
  margin: 0 0 1.25rem;
}

.checkout-form-amount strong {
  color: var(--gray-800);
}

.checkout-field {
  margin-bottom: 0.9rem;
}

.checkout-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.3rem;
}

.checkout-input {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1.5px solid var(--gray-200);
  border-radius: 8px;
  background: #fff;
  color: var(--gray-900);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.checkout-input:focus {
  border-color: var(--primary);
}

/* Error and success messages inside the form */
.checkout-msg {
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.checkout-msg-error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

.checkout-msg-success {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}

.checkout-form-btns {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
}

/* ---- ORDER SUCCESS STATE ---- */

.checkout-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  height: 100%;
}

.checkout-success-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}

.checkout-success-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 0.5rem;
}

.checkout-success-msg {
  font-size: 0.9rem;
  color: var(--gray-600);
  line-height: 1.5;
}


/* ============================================================
   M-PESA CHECKOUT MODAL — product detail page
   Full-screen overlay with a centred card, same pattern as
   the admin modals but with the customer-facing colour palette.
============================================================ */

.mpesa-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.mpesa-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mpesa-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 440px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.2s;
}

.mpesa-modal-overlay.open .mpesa-modal {
  transform: translateY(0) scale(1);
}

.mpesa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
}

.mpesa-modal-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.mpesa-modal-close-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--gray-100);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mpesa-modal-close-btn:hover {
  background: var(--gray-200);
  color: var(--gray-800);
}

.mpesa-modal-body {
  padding: 1.25rem;
}

.mpesa-product-summary {
  font-size: 0.875rem;
  color: var(--gray-600);
  background: var(--gray-50);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.1rem;
}

.mpesa-product-summary strong {
  color: var(--gray-900);
}


/* ============================================================
   CART TOAST — "✓ [Product] added to cart"
   Slides in from the top of the screen for 2.5 s, then fades.
   z-index must be above the cart drawer (--z-drawer ≈ 500).
============================================================ */

.cart-toast {
  position: fixed;
  top: -60px;          /* starts off-screen above the viewport */
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-900);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s;
  opacity: 0;
}

/* JavaScript adds this class to trigger the slide-in */
.cart-toast.cart-toast-visible {
  top: 1rem;    /* slides down to just below the top of the screen */
  opacity: 1;
}


/* ============================================================
   CHECKOUT PAGE (checkout-page.php)
   Two-column layout: customer form on left, order summary on right.
   Collapses to single column on mobile.
============================================================ */

.co-main {
  padding: 1.5rem 1rem 4rem;
}

.co-container {
  max-width: 1100px;
  margin: 0 auto;
}

.co-page-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-800);
  letter-spacing: -0.5px;
  margin-bottom: 1.75rem;
}

/* Two-column grid — single column on mobile, form | summary on wider screens */
.co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .co-grid {
    /* Form fills remaining space; summary is a fixed 360px column */
    grid-template-columns: 1fr 360px;
  }
}

/* White card section — used for both form panels and the summary */
.co-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.25rem;
}

.co-section:last-child {
  margin-bottom: 0;
}

/* Section heading — small caps label style matching the admin */
.co-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-100);
}


/* ---- FORM FIELDS ---- */

.co-field {
  margin-bottom: 1.1rem;
}

.co-field:last-child {
  margin-bottom: 0;
}

.co-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 0.35rem;
}

.co-required {
  color: var(--primary);
  margin-left: 1px;
}

.co-optional {
  font-weight: 400;
  color: var(--gray-400);
  font-size: 0.75rem;
  margin-left: 2px;
}

.co-input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--gray-800);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.co-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(160, 30, 30, 0.1);
}

/* Remove spinner arrows from number inputs on Chrome/Safari */
.co-input[type="number"]::-webkit-inner-spin-button,
.co-input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

.co-field-hint {
  font-size: 0.75rem;
  color: var(--gray-400);
  margin-top: 0.3rem;
  line-height: 1.4;
}


/* ---- DELIVERY METHOD CARDS ----
   Two styled radio-button cards the customer clicks to choose between
   Pick Up (free) and Delivery (charged per km). */

.co-delivery-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* The <label> wraps the hidden radio + icon + text, making the whole
   card clickable without any extra JavaScript. */
.co-delivery-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

/* Hide the native radio button — the card border shows selection state */
.co-delivery-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Selected state: red border + light red fill */
.co-delivery-card.selected {
  border-color: var(--primary);
  background: rgba(160, 30, 30, 0.05);
}

.co-delivery-card:hover:not(.selected) {
  border-color: var(--gray-400);
  background: var(--gray-50);
}

.co-delivery-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.co-delivery-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.co-delivery-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gray-800);
}

.co-delivery-sub {
  font-size: 0.775rem;
  color: var(--gray-400);
}

.co-delivery-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--blue);
  white-space: nowrap;
}

/* Distance input — revealed only when Delivery is selected */
.co-distance-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-100);
}


/* ---- ORDER SUMMARY (right column) ---- */

/* On desktop, the summary panel sticks to the top as the user scrolls the form */
@media (min-width: 768px) {
  .co-summary {
    position: sticky;
    top: 130px;    /* height of the sticky two-row navbar + 16px breathing room */
  }
}

/* Cart items list */
.co-items {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-100);
}

/* One row per cart item: [name × qty] [price] */
.co-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.35rem 0;
  font-size: 0.875rem;
}

.co-item-name {
  flex: 1;
  color: var(--gray-800);
  font-weight: 500;
  /* Long names show ellipsis instead of wrapping */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.co-item-qty {
  color: var(--gray-400);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.co-item-price {
  font-weight: 600;
  color: var(--gray-800);
  flex-shrink: 0;
}

/* Price breakdown rows */
.co-price-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.co-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--gray-600);
}

/* Shown next to the Delivery Fee row when the fee came from the
   Haversine straight-line fallback instead of a real OSRM road route
   (see calculateDistance() in checkout-page.php) — hidden via the
   [hidden] attribute otherwise. */
.co-delivery-fee-note {
  margin-top: -0.25rem;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--gray-400);
}

/* The grand total row is heavier, red-accented, and separated by a border */
.co-price-total {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  border-top: 2px solid var(--primary);
  padding-top: 0.65rem;
  margin-top: 0.15rem;
}

.co-price-total span:last-child {
  color: var(--primary);
  font-size: 1.15em;
}

/* The delivery fee amount text changes colour when a fee applies */
.co-price-row .co-delivery-fee-amount {
  color: var(--gray-800);
  font-weight: 500;
}


/* ---- PAYMENT ACTION BUTTONS ---- */

.co-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 500px;
}

/* Both buttons fill the available width */
.co-action-btn {
  width: 100% !important;
  max-width: none !important;
  padding: 0.9rem 1.25rem;
  font-size: 0.975rem;
  border-radius: var(--radius);
  justify-content: center;
}

/* Side by side on tablet+ */
@media (min-width: 640px) {
  .co-actions {
    flex-direction: row;
    max-width: 600px;
  }

  .co-action-btn {
    flex: 1;
  }
}


/* ---- ERROR MESSAGE ---- */

.co-error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  line-height: 1.45;
}


/* ---- EMPTY CART STATE ---- */

.co-empty {
  text-align: center;
  padding: 4rem 1rem;
}

.co-empty-icon {
  font-size: 3.5rem;
  opacity: 0.25;
  margin-bottom: 1rem;
}

.co-empty-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.co-empty-sub {
  font-size: 0.9rem;
  color: var(--gray-400);
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .co-page-title {
    font-size: 1.75rem;
  }
}


/* ---- ADDRESS AUTOCOMPLETE DROPDOWN ----
   Appears below the address input when Nominatim returns suggestions. */

/* Wrapper needs position:relative so the absolute dropdown
   stays anchored directly below this input field. */
.co-address-wrap {
  position: relative;
}

.co-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-top: none;           /* merges visually with the input below */
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-hover);
  z-index: 200;               /* above everything else on the page */
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}

.co-suggestion-item {
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  color: var(--gray-800);
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  line-height: 1.4;
  transition: background 0.1s;
}

.co-suggestion-item:last-child {
  border-bottom: none;
}

.co-suggestion-item:hover {
  background: rgba(160, 30, 30, 0.05);
  color: var(--primary);
}

/* "No results" and "Searching…" states */
.co-suggestion-empty,
.co-suggestion-loading {
  cursor: default;
  color: var(--gray-400);
  font-style: italic;
}

.co-suggestion-empty:hover,
.co-suggestion-loading:hover {
  background: none;
  color: var(--gray-400);
}


/* ---- DISTANCE INFO BOX ----
   Shown below the address input after OSRM / Haversine runs. */

.co-distance-info {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(26, 92, 26, 0.06);
  border: 1px solid rgba(26, 92, 26, 0.2);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--gray-800);
  line-height: 1.5;
}

/* Warning shown when OSRM failed and we're using Haversine straight-line */
.co-distance-estimate {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #92400E;     /* amber — caution, not error */
}

/* Small label appended to OSRM-derived distance */
.co-distance-ok {
  color: var(--gray-400);
  font-size: 0.75rem;
}

.co-distance-loading {
  color: var(--gray-400);
  font-style: italic;
}


/* ---- BUTTON LOADING STATE ----
   Applied while fetch() is in flight to signal "working…" */

.co-btn-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}


/* ---- ORDER SUCCESS PANEL ----
   Replaces the two-column grid after a successful WhatsApp order. */

.co-success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.co-success-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.co-success-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: 0.6rem;
}

.co-success-msg {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 380px;
}


/* ---- M-PESA QR MODAL ADDITIONS ----
   Extends the existing .mpesa-modal-* styles with QR-specific content. */

.mpesa-qr-img {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0 auto 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  object-fit: contain;
}

/* Shown when the QR image file hasn't been uploaded yet */
.mpesa-qr-fallback {
  text-align: center;
  padding: 1.25rem;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.5;
}

.mpesa-qr-placeholder {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

/* Paybill / Account number block */
.mpesa-paybill-info {
  text-align: center;
  font-size: 0.925rem;
  color: var(--gray-600);
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  line-height: 1.8;
}

.mpesa-paybill-info strong {
  color: var(--gray-800);
  font-size: 1rem;
}

/* Instructions paragraph */
.mpesa-instructions {
  font-size: 0.875rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-align: center;
}

.mpesa-instructions p + p {
  margin-top: 0.4rem;
}

/* Stacked action buttons inside the modal */
.mpesa-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mpesa-modal-actions .btn {
  width: 100%;
  max-width: none;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  justify-content: center;
  font-size: 0.925rem;
}


/* ============================================================
   NAV DROPDOWNS — Desktop hover menus (L2 and L3)
   ============================================================
   Generated by includes/navbar.php when menu items have
   children.  Pure CSS: no JavaScript needed for desktop.

   Structure in the HTML:
     <li class="nav-has-dropdown">        ← L1 with children
       <a class="nav-link">...</a>
       <ul class="nav-dropdown-menu">     ← L2 panel
         <li class="nav-has-submenu">     ← L2 item with L3 children
           <a class="nav-dropdown-link">...</a>
           <ul class="nav-submenu">       ← L3 fly-out panel
             <li><a class="nav-submenu-link">...</a></li>
           </ul>
         </li>
         <li><a class="nav-dropdown-link">...</a></li>  ← plain L2
       </ul>
     </li>
   ============================================================ */

/* L1 wrapper — must be position:relative so the panel
   sits directly below the link, not at the page top-left */
.nav-has-dropdown {
  position: relative;
}

/* L2 dropdown panel
   Uses opacity/visibility instead of display:none so CSS
   transitions (fade + slide) work.  display:none can't
   be transitioned. */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 185px;
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 500;               /* above hero, cards, etc. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.17s ease, transform 0.17s ease, visibility 0.17s ease;
}

/* :focus-within keeps menu open when the user tabs into it */
.nav-has-dropdown:hover > .nav-dropdown-menu,
.nav-has-dropdown:focus-within > .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Each link row inside the L2 panel */
.nav-dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #1e293b;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.nav-dropdown-link:hover {
  background: #2563eb;
  color: #ffffff;
}

/* L2 item that has L3 children — the fly-out anchor */
.nav-has-submenu {
  position: relative;
}

/* L3 fly-out panel — slides out to the right */
.nav-submenu {
  position: absolute;
  left: 100%;
  top: -0.4rem;              /* align top with the L2 row */
  min-width: 165px;
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 501;              /* above the L2 panel */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.nav-has-submenu:hover > .nav-submenu,
.nav-has-submenu:focus-within > .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Each link row inside the L3 fly-out */
.nav-submenu-link {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  color: #1e293b;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.nav-submenu-link:hover {
  background: #2563eb;
  color: #ffffff;
}

/* Small arrows shown beside links that have children.
   ▾ for L1 (down), › for L2 (right). */
.nav-chevron {
  font-size: 0.6rem;
  margin-left: 0.3rem;
  opacity: 0.65;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ============================================================
   MOBILE NAV ACCORDION
   ============================================================
   When the navbar has multi-level items, the hamburger menu
   uses accordion expand/collapse instead of flat links.

   Structure:
     <li class="mobile-has-children">        ← wrapper
       <button class="mobile-accordion-btn"> ← clickable row
         Label <span class="mobile-accordion-arrow">▾</span>
       </button>
       <ul class="mobile-nav-children">      ← hidden children
         <li><a class="mobile-nav-link">...  ← leaf link
         <li class="mobile-has-children">... ← nested accordion (L3)
       </ul>
     </li>

   script.js toggles .open on the <li> to show/hide children.
   ============================================================ */

/* Grow the mobile menu taller to fit nested accordion content.
   Overrides the 400px set earlier in this file — same specificity,
   later declaration wins. */
.mobile-menu.open {
  max-height: 90vh;
  overflow-y: auto;          /* scroll if very many items are expanded */
}

/* Accordion trigger button — matches .mobile-nav-link visually */
.mobile-accordion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.8rem 0;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--gray-400);
  cursor: pointer;
  text-align: left;
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-accordion-btn:hover {
  color: var(--white);
  padding-left: 0.25rem;
}

/* ▾ arrow — rotates to ▴ when accordion is open */
.mobile-accordion-arrow {
  font-size: 0.65rem;
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
}

.mobile-has-children.open > .mobile-accordion-btn .mobile-accordion-arrow {
  transform: rotate(180deg);
}

/* The collapsible child list — hidden by default */
.mobile-nav-children {
  display: none;
  list-style: none;
  margin: 0.15rem 0 0.15rem 0.5rem;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.mobile-has-children.open > .mobile-nav-children {
  display: block;
}

/* L2 plain links (inside L1 accordion, no L3 children) */
.mobile-l2-link {
  font-size: 0.925rem;
  font-weight: 400;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}

/* L3 links (inside L2 accordion) — slightly de-emphasised */
.mobile-l3-link {
  font-size: 0.875rem;
  font-weight: 400;
  opacity: 0.85;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

/* L2 accordion trigger (inside a top-level accordion) —
   slightly smaller than the root-level button */
.mobile-l2-accordion {
  font-size: 0.925rem;
  font-weight: 400;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}