/* ==========================================================================
   DALDAWALA — FULL STOREFRONT REDESIGN (single consolidated stylesheet)
   ==========================================================================
   Loads after the original theme files (style.css, responsive.css) and
   wins on every selector below via load order + specificity. No markup,
   route, or JS behaviour is changed by this file — appearance only.
   (A few tiny additive JS hooks for the AJAX search dropdown and the
   header's sidebar/sticky/placeholder behaviour live in live-search.js
   and inline in header.blade.php — not here.)

   TABLE OF CONTENTS
     1.  Design tokens
     2.  Base / typography / sticky-footer layout
     3.  Keyframes
     4.  Loader
     5.  HEADER — layout scaffold + wordmark logo
     6.  HEADER — mobile bar (icons, search)
     7.  HEADER — sidebar drawer
     8.  HEADER — bottom tab bar (mobile)
     9.  HEADER — desktop bar (>=992px) + menu bar + cart drawer
     10. Live/AJAX search dropdown
     11. Category grid
     12. Product cards (primary grid)
     13. Legacy item-card (deals carousel)
     14. Section chrome / buttons
     15. Hero / promo banner
     16. Trust / feature section
     17. Footer
     18. Cookie consent
     19. Scroll-to-top
     20. Global mobile-first refinements / tap targets
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand — single accent, on purpose */
  --theme-color: #00448C;
  --theme-color-dark: #003469;
  --theme-color-tint: #EAF1F8;
  --theme-color-soft: #D6E4F2;

  /* Ecommerce accent set — used purposefully, not decoratively:
     green = go/buy/success, amber = ratings & highlights, orange = deals/urgency.
     Blue stays the dominant brand color; these are seasoning, not the base. */
  --accent: #E39A2B;
  --accent-soft: #FBF1E0;
  --accent-green: #1E9E5A;
  --accent-green-dark: #16794A;
  --accent-green-soft: #E7F7EF;
  --accent-amber: #F5A623;
  --accent-amber-soft: #FEF3DD;
  --accent-orange: #F0672A;
  --accent-orange-soft: #FDECE4;

  --color-green: #1E9E5A;
  --color-light-green: #E7F7EF;
  --color-lightness-green: #F5F8FB;

  --ink-900: #101114;
  --ink-700: #33353B;
  --ink-500: #6B6F76;
  --ink-300: #A2A6AD;
  --color-black: #101114;
  --color-gray-dark: #33353B;
  --color-gray: #6B6F76;
  --color-gray-400: #E7E9EC;

  --bg-app: #FFFFFF;
  --bg-soft: #F6F7F9;
  --bg-card: #FFFFFF;
  --color-white: #FFFFFF;
  --border-soft: #EBEDF0;

  --primary-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --secondary-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(16, 17, 20, .05);
  --shadow-sm: 0 2px 10px rgba(16, 17, 20, .06);
  --shadow-md: 0 6px 20px rgba(16, 17, 20, .09);
  --shadow-lg: 0 16px 40px rgba(16, 17, 20, .14);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 380ms;

  /* Header-specific aliases (kept separate so header spacing/motion can be
     tuned independently of the rest of the storefront) */
  --hdr-blue: #00448C;
  --hdr-blue-dark: #003469;
  --hdr-blue-tint: #E8F0F9;
  --hdr-ink: #101114;
  --hdr-ink-soft: #6E7480;
  --hdr-line: #EDEFF2;
  --hdr-h: 38px;
  --hdr-field: #F4F5F7;          /* search field resting fill */
  --hdr-radius: 14px;
  --hdr-radius-pill: 999px;
  --hdr-ease: cubic-bezier(.4, 0, .2, 1);
  --hdr-spring: cubic-bezier(.3, 1.4, .5, 1);

  /* Section-background tokens (logo colors: blue + white, red as a sparing
     accent) - deliberately separate from --bg-soft, which is also used
     INSIDE product cards (image resting background) and must stay
     untouched. These only ever apply to page/section-level surfaces. */
  --bg-section-tint: #EAF2FC;
  --footer-bg: #052240;
  --accent-red: #E23B33;
}


/* ==========================================================================
   2. BASE / TYPOGRAPHY / STICKY-FOOTER LAYOUT
   ========================================================================== */
html, body { min-height: 100%; background-color: #ffffff !important; }
body {
  font-family: var(--primary-font-family) !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Whatever wraps the page content grows to fill the viewport, so the
   footer never leaves a gap of raw body background beneath it on short
   pages — the classic sticky-footer pattern. */
body > main,
body > .main {
  flex: 1 0 auto;
}
body > .header,
body > .site-header,
body > nav.bottom-nav {
  flex-shrink: 0;
}
footer { flex-shrink: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--secondary-font-family);
  font-weight: 700;
  color: var(--ink-900);
}
a { transition: color var(--t-fast) var(--ease); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-app); }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-app);
}
::-webkit-scrollbar-thumb:hover { background: var(--theme-color); }


/* ==========================================================================
   3. KEYFRAMES
   ========================================================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ringPop {
  0% { box-shadow: 0 0 0 0 rgba(0, 68, 140, .35); }
  100% { box-shadow: 0 0 0 8px rgba(0, 68, 140, 0); }
}
@keyframes hdrFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hdrBadgePop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.reveal-up { animation: fadeInUp var(--t-slow) var(--ease) both; }


/* ==========================================================================
   4. LOADER
   ========================================================================== */
.tw-loader { background: var(--bg-app); }

/* Grocery-themed loader: a wobbling basket with three items dropping into
   it in sequence, instead of a generic 4-dot ellipsis. */
.tw-grocery-loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.tw-grocery-loader__basket { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.tw-grocery-loader__basket i {
  font-size: 46px;
  color: var(--theme-color);
  display: block;
  transform-origin: 50% 100%;
  animation: twBasketWobble 1s ease-in-out infinite;
}
@keyframes twBasketWobble {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
.tw-grocery-loader__item {
  position: absolute;
  top: -8px; left: 27px;
  width: 10px; height: 10px;
  border-radius: 50%;
  opacity: 0;
  animation: twItemDrop 1.2s ease-in infinite;
}
.tw-grocery-loader__item--1 { background: var(--accent-orange); animation-delay: 0s; margin-left: -18px; }
.tw-grocery-loader__item--2 { background: var(--accent-green); animation-delay: .4s; }
.tw-grocery-loader__item--3 { background: var(--accent-amber); animation-delay: .8s; margin-left: 18px; }
@keyframes twItemDrop {
  0% { transform: translateY(-8px) scale(.6); opacity: 0; }
  25% { opacity: 1; }
  55% { transform: translateY(16px) scale(1); opacity: 1; }
  75% { opacity: 0; }
  100% { transform: translateY(16px) scale(1); opacity: 0; }
}
.tw-grocery-loader__text {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-500);
  letter-spacing: .2px;
}


/* ==========================================================================
   5. HEADER — scaffold + logo
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid var(--hdr-line);
  transition: box-shadow var(--hdr-ease) 220ms;
}
.site-header.is-sticky { box-shadow: 0 2px 12px rgba(16, 17, 20, .07); }

.site-header__desktop { display: none; background-color: #ffffff !important; }
.site-header__mobile { display: block; background-color: #ffffff !important; }
.site-header__bar { background-color: #ffffff !important; }

/* Logo — brand mark image, height-capped so the bar stays short */
.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  min-width: 0;
}
.site-logo__img {
  display: block;
  height: 24px;
  width: auto;
  max-width: 100%;
  border-radius: 5px;
}


/* ==========================================================================
   6. HEADER — mobile bar (drawer | centred logo | language) + search row
   ========================================================================== */
.site-header__mobile { padding: 3px 10px 5px; }

/* Flexbox with two equal flex:1 side rails keeps the logo optically
   dead-centre no matter how wide the drawer button or language switcher
   happen to be — same trick as the grid version but flex has proven more
   reliable in headless rendering for this layout. */
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--hdr-h);
}
.site-header__side {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.site-header__side--right { justify-content: flex-end; }
.site-header__lang,
.site-header__lang .language-menu,
.site-header__lang .language-menu .btn-group {
  display: flex !important;
  align-items: center !important;
}

.hdr-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--hdr-ink);
  font-size: 20px;
  line-height: 1;
  position: relative;
  transition: background var(--hdr-ease) 150ms, color var(--hdr-ease) 150ms, transform 150ms var(--hdr-spring);
}
.hdr-icon-btn:hover, .hdr-icon-btn:focus-visible { background: var(--hdr-blue-tint); color: var(--hdr-blue); }
.hdr-icon-btn:active { transform: scale(.9); }

/* language switcher — icon-only disc on mobile */
.site-header__lang .language-menu .dropdown-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  color: var(--hdr-ink) !important;
  font-size: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: background var(--hdr-ease) 150ms, color var(--hdr-ease) 150ms;
}
.site-header__lang .language-menu .dropdown-toggle i {
  font-size: 18px !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: 1 !important;
  display: inline-block !important;
}
.site-header__lang .language-menu .dropdown-toggle:hover { background-color: var(--hdr-blue-tint) !important; color: var(--hdr-blue) !important; }
.site-header__lang .language-menu .dropdown-toggle::after { display: none !important; }
.site-header__lang .dropdown-menu {
  border: 1px solid var(--hdr-line);
  border-radius: var(--hdr-radius);
  box-shadow: 0 16px 40px rgba(16, 17, 20, .16);
  padding: 6px;
  min-width: 7.5rem;
}
.site-header__lang .dropdown-item { border-radius: 8px; font-size: 12.5px; padding: 7px 10px; }
.site-header__lang .dropdown-item:hover { background: var(--hdr-blue-tint); color: var(--hdr-blue); }

/* ---- search bar (shared by mobile + desktop) --------------------------
   Deliberately simple box model so alignment can't drift: the button is a
   flush, full-height flex item and the outer bar clips it with its own
   border-radius (overflow:hidden) instead of hand-tuned padding math. */
.site-header__search { margin-top: 4px; }

.hdr-search {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 40px;
  background: var(--hdr-field);
  border: 1.5px solid var(--hdr-line);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--hdr-ease) 180ms, box-shadow var(--hdr-ease) 180ms;
}
.hdr-search:focus-within {
  border-color: var(--hdr-blue);
  box-shadow: 0 0 0 3px rgba(0, 68, 140, .10);
}
.hdr-search--lg { height: 42px; }

.hdr-search__btn {
  flex: 0 0 auto;
  width: 42px;
  border: none;
  background: var(--hdr-blue);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--hdr-ease) 150ms;
}
.hdr-search__btn:hover,
.hdr-search__btn:focus-visible { background: var(--hdr-blue-dark); }

.hdr-search__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.hdr-search__input {
  width: 100%;
  height: 100%;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  line-height: normal;
  font-family: var(--primary-font-family);
  color: var(--hdr-ink);
}

/* animated `Search for "<term>"` label, sitting over the empty input */
.hdr-search__ph {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--hdr-ink-soft);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 160ms var(--hdr-ease);
}
.hdr-search__ph.is-hidden { opacity: 0; }
.hdr-search__ph-term {
  color: var(--hdr-ink);
  font-weight: 600;
  display: inline-block;
  transition: transform 260ms var(--hdr-ease), opacity 260ms var(--hdr-ease);
}
.hdr-search__ph-term.is-out { transform: translateY(-90%); opacity: 0; }


/* ==========================================================================
   7. HEADER — sidebar drawer
   ========================================================================== */
.sidebar {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 300px;
  max-width: 84vw;
  height: 100vh !important;
  background-color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
  transform: translateX(-105%);
  transition: transform 380ms var(--hdr-spring);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 99999 !important;
  box-shadow: 0 16px 48px rgba(16, 17, 20, .18);
}
.sidebar.active { transform: translateX(0); }
.sidebar, .sidebar * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

body.sidebar-open { overflow: hidden; }
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(10, 11, 13, .68);
  z-index: 99990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--hdr-ease);
}
body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--hdr-blue);
  color: #fff;
  padding: 20px 16px;
}
.sidebar-header i.bi-person-circle { font-size: 30px; opacity: .9; }
.sidebar-header a { color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; flex: 1; }
.sidebar-header .sidebar-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16);
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  transition: background 200ms var(--hdr-ease), transform 200ms var(--hdr-ease);
}
.sidebar-header .sidebar-close:hover { background: rgba(255, 255, 255, .28); transform: rotate(90deg); }

.menu-section { border-bottom: 1px solid var(--hdr-line); }
.menu-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--hdr-ink);
  cursor: pointer;
}
.menu-title i { color: var(--hdr-blue); font-size: 12px; transition: transform 220ms var(--hdr-ease); }
.menu-title.open i { transform: rotate(180deg); }
.menu-items {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 320ms var(--hdr-ease), padding 320ms var(--hdr-ease);
}
.menu-items.active { max-height: 900px; padding: 0 16px 12px; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--hdr-line);
  color: var(--hdr-ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms var(--hdr-ease), padding-left 150ms var(--hdr-ease);
}
.menu-item a { color: inherit; text-decoration: none; flex: 1; }
.menu-item:hover { color: var(--hdr-blue); padding-left: 4px; }
.menu-item i { color: #C6CAD1; font-size: 10px; }


/* ==========================================================================
   8. HEADER — bottom tab bar (mobile)
   ========================================================================== */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1020;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--hdr-line);
  box-shadow: 0 -6px 18px rgba(16, 17, 20, .06);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 2px;
  color: #ADB2BB;
  text-decoration: none;
  transition: color 150ms var(--hdr-ease), transform 150ms var(--hdr-spring);
}
.bottom-nav .nav-item:active { transform: scale(.9); }
.bottom-nav .nav-icon { position: relative; display: inline-flex; }
.bottom-nav .nav-icon img { width: 19px; height: 19px; opacity: .5; transition: opacity 150ms var(--hdr-ease); }
.bottom-nav .nav-label { font-size: 9.5px; font-weight: 700; }
.bottom-nav .nav-item.active { color: var(--hdr-blue); }
.bottom-nav .nav-item.active .nav-icon img { opacity: 1; }
.bottom-nav .nav-item.active .nav-icon::after {
  content: "";
  position: absolute;
  bottom: -5px; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--hdr-blue);
  transform: translateX(-50%);
}
.bottom-nav .cart_count.top_count {
  position: absolute; top: -6px; left: 100%; margin-left: -6px;
  background: #FF3B30;
  min-width: 17px; height: 17px;
  padding: 0 3px;
  font-size: 10px; font-weight: 800;
  line-height: 1;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--hdr-radius-pill);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
/* room so the fixed tab bar never overlaps page content (mobile only —
   reset to 0 at the 992px desktop breakpoint below, where the bar hides) */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }


/* ==========================================================================
   9. HEADER — desktop bar (>=992px) + menu bar + cart drawer
   ========================================================================== */
@media (min-width: 992px) {
  .site-header__mobile { display: none !important; }
  .site-header__desktop { display: block !important; }
  body { padding-bottom: 0 !important; }
  nav.bottom-nav.bottom-nav { display: none !important; }

  .site-header__desktop .site-header__row {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 6px 24px;
    /* matches Bootstrap's own .container cap (xxl breakpoint) so the header
       content lines up with the page content directly below it instead of
       running wider on big screens */
    max-width: 1320px;
    margin: 0 auto;
  }
  .site-header__desktop .site-logo__img { height: 30px; }

  .site-header__search-form { flex: 1; max-width: 620px; margin: 0 auto; }

  .head-round-icon {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }
  /* Each action is a logo-blue icon badge (same colour every time, not a
     different one per icon) plus a plain-ink text label, both centred on
     the same line - no shadow, kept flat and minimal. */
  .head-round-icon > li > a,
  .head-round-icon > li > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--hdr-radius-pill);
    background: transparent;
    color: var(--hdr-ink);
    font-size: 14px;
    position: relative;
    transition: background 150ms var(--hdr-ease);
  }
  .head-round-icon > li > a:hover, .head-round-icon > li > .dropdown-toggle:hover {
    background: var(--bg-soft);
    color: var(--hdr-ink);
  }
  .head-round-icon .dropdown-toggle::after { margin-left: 4px; vertical-align: 1px; }
  .icon-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    flex-shrink: 0;
    box-shadow: none !important;
    transition: transform 150ms var(--hdr-spring);
  }
  .head-round-icon > li > a:hover .icon-badge,
  .head-round-icon > li > .dropdown-toggle:hover .icon-badge { transform: scale(1.08); }
  .icon-badge,
  .icon-badge--blue,
  .icon-badge--pink,
  .icon-badge--green,
  .icon-badge--amber { background: var(--hdr-blue) !important; }
  .head-icon-label { font-size: 12.5px; font-weight: 700; color: var(--hdr-ink); line-height: 1; }
  .head-round-icon .cart_count {
    position: static;
    background: var(--accent-orange);
    color: #fff;
    min-width: 16px; height: 16px;
    font-size: 9.5px; font-weight: 800;
    border-radius: var(--hdr-radius-pill);
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 4px;
    box-shadow: none;
    animation: none;
  }
  /* language switcher gets the same badge treatment as the other icons */
  .language-menu .dropdown-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--hdr-radius-pill);
    color: var(--hdr-ink);
    background: transparent;
    transition: background 150ms var(--hdr-ease);
  }
  .language-menu .dropdown-toggle:hover { background: var(--bg-soft); }
  .language-menu .dropdown-toggle i {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 34px !important; height: 34px !important; border-radius: 50% !important;
    background: var(--hdr-blue) !important;
    color: #fff !important; font-size: 16px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: transform 150ms var(--hdr-spring);
  }
  .language-menu .dropdown-toggle:hover i { transform: scale(1.08); }
  .language-menu .dropdown-toggle::after { margin-left: 2px; vertical-align: 1px; }
  .language-menu .dropdown-menu {
    border: 1px solid var(--hdr-line);
    border-radius: var(--hdr-radius);
    box-shadow: 0 16px 40px rgba(16, 17, 20, .16);
    padding: 6px;
  }
  .language-menu .dropdown-item { border-radius: 8px; font-size: 12.5px; padding: 7px 10px; }
  .language-menu .dropdown-item:hover { background: var(--hdr-blue-tint); color: var(--hdr-blue); }

  /* cart drawer dropdown */
  .shopingCart { position: relative; }
  .shopingCart .shoping-cart-card {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 350px;
    background: #fff;
    border: 1px solid var(--hdr-line);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(16, 17, 20, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 200ms var(--hdr-ease), transform 200ms var(--hdr-ease), visibility 200ms;
    z-index: 1040;
    overflow: hidden;
  }
  .shopingCart .shoping-cart-card.open,
  .shopingCart:hover .shoping-cart-card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* small gap between the icon and the dropdown so the mouse can cross it
     without the :hover ending prematurely */
  .shopingCart::after {
    content: "";
    position: absolute;
    top: 100%; right: 0;
    width: 100%; height: 10px;
  }
  .shoping-cart-footer .checkout-btn {
    background: var(--hdr-blue);
    border-color: var(--hdr-blue);
    border-radius: var(--hdr-radius-pill);
  }
  .shoping-cart-footer .checkout-btn:hover { background: var(--hdr-blue-dark); }
  .shoping-cart-footer .view-cart-btn { border-radius: var(--hdr-radius-pill); }
}

/* comfortable minimum tap targets on touch devices */
@media (pointer: coarse) {
  .hdr-icon-btn,
  .site-header__lang .language-menu .dropdown-toggle,
  .head-round-icon > li > a,
  .head-round-icon > li > .dropdown-toggle {
    min-width: 38px;
    min-height: 38px;
  }
  .add-to-cart { min-width: 40px; min-height: 40px; }
}

/* very narrow phones: keep the mobile bar from ever overflowing */
@media (max-width: 360px) {
  .site-header__mobile { padding: 4px 8px 6px; }
  .site-logo__img { height: 23px; }
  .hdr-icon-btn,
  .site-header__lang .language-menu .dropdown-toggle { width: 32px; height: 32px; }
  .hdr-search__ph { font-size: 13px; }
}


/* ==========================================================================
   10. LIVE/AJAX SEARCH DROPDOWN
   ========================================================================== */
.live-search-panel {
  display: none;
  position: absolute;
  left: 0; right: 0; top: calc(100% + 8px);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-soft);
  z-index: 1200;
  overflow: hidden;
  animation: fadeIn var(--t-fast) var(--ease);
}
.live-search-panel.open { display: block; }
.live-search-list { list-style: none; margin: 0; padding: 6px; max-height: 360px; overflow-y: auto; }
.live-search-list li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  color: var(--ink-900); text-decoration: none !important;
  transition: background var(--t-fast) var(--ease);
}
.live-search-list li a:hover { background: var(--theme-color-tint); }
.live-search-thumb {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
}
.live-search-thumb--empty { display: inline-block; }
.live-search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.live-search-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-search-price { font-weight: 700; font-size: 12.5px; color: var(--theme-color); white-space: nowrap; }
.live-search-empty { padding: 18px 16px; color: var(--ink-500); font-size: 13.5px; text-align: center; }
.live-search-viewall {
  display: block; text-align: center;
  padding: 11px; font-size: 13px; font-weight: 700;
  color: var(--theme-color) !important; text-decoration: none !important;
  border-top: 1px solid var(--border-soft);
  transition: background var(--t-fast) var(--ease);
}
.live-search-viewall:hover { background: var(--theme-color-tint); }


/* ==========================================================================
   11. CATEGORY GRID
   ========================================================================== */
/* Category listing page ("Shop by Category") - deliberately not circular;
   a rounded-square image with its own border + soft shadow reads more
   like a product/category tile than an avatar. */
.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit !important;
  text-decoration: none !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 16px 10px !important;
  height: 100%;
  transition: transform var(--t-base) var(--ease-spring), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  animation: fadeInUp var(--t-slow) var(--ease) both;
}
.category-card:hover { transform: translateY(-4px) !important; border-color: var(--theme-color-soft) !important; box-shadow: var(--shadow-md) !important; }
.category-image {
  width: 84px !important; height: 84px !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-base) var(--ease-spring);
}
.category-image img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.category-card:hover .category-image { transform: scale(1.05); }
.category-name { color: var(--ink-700) !important; font-weight: 600 !important; font-size: 12px !important; margin-top: 10px !important; line-height: 1.3; }

/* ---- sort + price filter bar (category & brand grid pages) - one shared
   partial/CSS block, so both stay identical automatically ---- */
/* Pages that open straight into a filter-bar (category/brand grids) don't
   need the generous 40px breathing room .inner-section gives form/content
   pages - the breadcrumb already separates header from content. */
.inner-section { padding-top: 18px !important; }

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin: 0 0 16px;
}
.filter-bar__sort { display: flex; align-items: center; gap: 8px; }
.filter-bar__sort label { font-size: 12px; font-weight: 700; color: var(--ink-500); white-space: nowrap; }
.filter-bar__select {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-900);
  background: var(--bg-card);
  cursor: pointer;
}
.filter-bar__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--theme-color) !important;
  background: var(--theme-color-tint) !important;
  color: var(--theme-color) !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.filter-bar__toggle:hover, .filter-bar__toggle.is-active { background: var(--theme-color) !important; color: #fff !important; }

.filter-panel {
  display: none;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  margin: -6px 0 16px;
}
.filter-panel.is-open { display: flex; animation: fadeInUp var(--t-fast) var(--ease) both; }
.filter-panel__field { display: flex; flex-direction: column; gap: 4px; }
.filter-panel__field label { font-size: 11px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .2px; }
.filter-panel__field input,
.filter-panel__select {
  width: 110px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink-900);
  background: var(--bg-card);
  cursor: pointer;
}
.filter-panel__apply {
  border: none !important;
  background: var(--accent-green) !important;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.filter-panel__apply:hover { background: var(--accent-green-dark) !important; }
@media (max-width: 480px) {
  .filter-bar__sort { flex: 1; }
  .filter-bar__select { flex: 1; min-width: 0; }
}


/* ==========================================================================
   12. PRODUCT CARDS (primary grid)
   ========================================================================== */
.product-card {
  background: var(--bg-card) !important;
  border: 1px solid rgba(20, 22, 26, .16) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 8px 8px 6px !important;
  margin-bottom: 14px !important;
  position: relative;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  /* Every card renders the exact same rows in the exact same order (see
     product-card.blade.php) - image, title, weight, price, always one
     line each. That alone makes cards come out equal height; height:100%
     here just fills the Bootstrap-flex-stretched column so the border
     itself reaches the row's full height too (row is `display:flex` by
     default, so columns already stretch - this is purely cosmetic). */
  height: 100%;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  animation: fadeInUp var(--t-slow) var(--ease) both;
}
/* Minimal hover: a slightly deeper shadow + border tint. No lift, no full
   card shine - the shine lives on the product image only (below). */
.product-card:hover { border-color: var(--theme-color-soft) !important; box-shadow: var(--shadow-sm) !important; }

/* ---- Grid gutter: category/search/wishlist/brand grids all use
   `.row.product-row`. Bootstrap's default horizontal gutter (--bs-gutter-x,
   24px via column padding) has no vertical counterpart of its own -
   relying on .product-card's margin-bottom for row spacing put the two
   axes on different mechanisms (column padding vs. child margin inside a
   height:100% flex-stretched column), which is what made rows read as
   stuck together next to a much wider column gap. row-gap now matches
   --bs-gutter-x exactly so horizontal and vertical spacing are pixel-equal,
   and the card's own margin-bottom is zeroed out here (only here - it's
   still needed for the homepage carousels, which don't use .product-row). */
.product-row { --bs-gutter-x: 14px; row-gap: 14px; }
.product-row .product-card { margin-bottom: 0 !important; }
@media (max-width: 768px) {
  .product-row { --bs-gutter-x: 10px; row-gap: 10px; }
}

/* ---- top badge - a small hanging ribbon; at most one ever renders
   (discount > label > trending), so this never has to deal with stacking ---- */
.product-card__ribbon {
  position: absolute;
  top: 0; left: 12px;
  z-index: 2;
  font-size: 10px; font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 8px 7px;
  line-height: 1.05;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  white-space: nowrap;
  color: #fff;
  background: var(--accent-orange);
}
/* Discount ribbon - soft/light instead of a shouty saturated block. */
.product-card__ribbon--discount {
  background: #FFE1E1;
  color: #C81E3A;
}
.product-card__ribbon--trending {
  background: linear-gradient(135deg, var(--theme-color), var(--theme-color-dark));
  color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 9px 7px;
  font-weight: 700;
}
/* Small blinking dot instead of a busy icon - reads as a live/active cue. */
.product-card__blink {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: dotBlink 1.1s ease-in-out infinite;
}
@keyframes dotBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}

/* ---- lowest-price callout - sits on the image itself so it never adds
   to the card's flow height; use on a handful of products only ---- */
.product-card__lowest {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--accent-green-dark);
  color: #fff;
  font-size: 9px; font-weight: 800;
  letter-spacing: .2px;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.product-card__lowest i { font-size: 8px; }

/* ---- wishlist (top-right overlay on the image) - a lighter touch than
   before: smaller resting state, soft shadow instead of a hard circle, and
   a real "added" moment (fills in pink + pops + a burst ring) instead of
   only a toast the shopper might not even look at. ---- */
.product-card__wish {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 25px; height: 25px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--ink-500);
  font-size: 12px;
  box-shadow: 0 1px 4px rgba(16, 17, 20, .16);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease);
}
.product-card__wish:hover { background: #fff; color: #E0447A; transform: scale(1.12); }
.product-card__wish:active { transform: scale(.9); }
.product-card__wish.is-added {
  background: #E0447A;
  color: #fff;
  animation: wishPop .45s var(--ease-spring);
}
.product-card__wish.is-added::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #E0447A;
  opacity: 0;
  animation: wishRing .5s ease-out;
  pointer-events: none;
}
@keyframes wishPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes wishRing {
  0% { opacity: .6; transform: scale(.6); }
  100% { opacity: 0; transform: scale(1.7); }
}
/* wishlist page: heart is already "on" - filled pink, click removes it */
.product-card__wish--remove { color: #E0447A; background: rgba(255, 255, 255, .9); }
.product-card__wish--remove:hover { background: #E0447A; color: #fff; }

/* ---- image + out-of-stock state ---- */
.product-image {
  background: var(--bg-soft);
  border-radius: var(--radius-md) !important;
  position: relative;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease);
}
.product-card:hover .product-image img { transform: scale(1.06); }
/* Shine sweep - scoped to the image only, not the whole card. */
.product-image::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  z-index: 2;
  pointer-events: none;
  transition: left .7s ease;
}
.product-card:hover .product-image::before { left: 130%; }
.product-card--oos .product-image img { opacity: .4; transform: none !important; }
.product-card--oos .product-image::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, .55);
}
.product-card__oos-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  display: flex; justify-content: center;
  padding-bottom: 10px;
}
.product-card__oos-overlay span {
  background: var(--ink-900);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* ---- body: title / weight / price, tight fixed rhythm, no elastic gaps ---- */
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 4px;
}
/* single-line title (Blinkit-style, compact) instead of always reserving
   two lines' worth of height even when the title fits on one - that
   reserved blank line was the biggest single contributor to the card
   feeling taller than it needed to be. */
.product-title a {
  color: var(--ink-900) !important;
  font-size: 13.5px !important;
  font-weight: 700;
  text-decoration: none !important;
  text-transform: capitalize;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
  line-height: 1.3em;
  transition: color var(--t-fast) var(--ease);
}
.product-title a:hover { color: var(--theme-color) !important; }

.product-weight {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 3px 0 0;
}
.product-weight__pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--theme-color) !important;
  background: var(--theme-color-tint);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  line-height: 1.4;
}
.product-card__lowstock { font-size: 10.5px; color: var(--accent-orange); font-weight: 700; }

/* ---- weight switcher (2+ products sharing a "Weight Group") - same pill
   treatment as the plain weight text, but green instead of blue so a
   selectable weight visibly reads as different/interactive ---- */
.product-weight--select {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-top: 3px;
  background: var(--accent-green-soft);
  border-radius: var(--radius-sm);
  padding: 2px 20px 2px 7px;
}
.product-variant-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--accent-green-dark) !important;
  font-size: 10.5px !important;
  font-weight: 600;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.product-weight--select i {
  position: absolute; right: 7px; top: 50%;
  transform: translateY(-50%);
  color: var(--accent-green-dark);
  font-size: 8px;
  pointer-events: none;
}

/* ---- price row ---- */
.product-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* auto instead of a fixed value - pins the price/Add row to the bottom
     of the card regardless of how much (or little) sits above it, so a
     card with a discount line lines its Add button up with a sibling card
     that doesn't have one, instead of the row floating at a different
     height card to card. */
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px solid var(--border-soft);
}
.product-price-detail { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.current-price { color: var(--ink-900) !important; font-size: 15px !important; font-weight: 700; line-height: 1.15; }
.mrp-price { color: var(--ink-300) !important; font-size: 11.5px; text-decoration: line-through !important; }

/* ---- ADD button - bordered text pill, Blinkit-style but in brand green ---- */
.add-to-cart-btn {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  min-width: 56px;
  padding: 7px 12px;
  border: 1px solid var(--accent-green) !important;
  background: var(--accent-green-soft) !important;
  color: var(--accent-green-dark) !important;
  font-size: 11.5px !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-decoration: none !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--t-fast) var(--ease-spring);
}
.add-to-cart-btn:hover { background: var(--accent-green) !important; color: #fff !important; }
.add-to-cart-btn:active { transform: scale(.94); }
.add-to-cart-btn--disabled {
  border-color: var(--border-soft) !important;
  background: var(--bg-soft) !important;
  color: var(--ink-300) !important;
  font-size: 9.5px !important;
  cursor: not-allowed;
}

/* ---- search results: a vertical list of list-mode rows, capped to a
   readable width instead of stretching full-bleed on wide screens ---- */
.search-results-list {
  max-width: 780px;
  margin: 0 auto;
}
.search-results-list .product-card--list { margin-bottom: 12px; }

/* ---- list mode: horizontal row (search results) - image left, title +
   category + weight in the middle, price/Add pinned to the far right.
   Same component/CSS as the grid card, just re-flowed with a modifier
   class, so both stay in sync automatically. ---- */
.product-card--list {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: auto;
}
/* the base .product-image rule forces width:100% with !important (so grid
   cards always fill their column) - needs the same weight here to actually
   shrink the image in list mode, otherwise it silently loses and stays
   full-width, squeezing the title/price body out of view entirely. */
.product-card--list .product-image { width: 92px !important; flex-shrink: 0; }
.product-card--list .product-card__body {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 0;
  min-width: 0;
}
.product-card--list .product-card__info { min-width: 0; flex: 1; }
.product-card--list .product-title a { -webkit-line-clamp: 1; min-height: 0; font-size: 13.5px !important; }
.product-card--list .product-card__category {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 3px;
}
.product-card--list .product-weight { margin-top: 5px; }
.product-card--list .product-price {
  flex-direction: column;
  align-items: flex-end;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  flex-shrink: 0;
  gap: 8px;
}
.product-card--list .product-price-detail { align-items: flex-end; flex-direction: column; gap: 1px; }
@media (max-width: 480px) {
  .product-card--list .product-image { width: 68px !important; }
  .product-card--list .product-title a { font-size: 12.5px !important; }
}

.product-row > div:nth-child(4n+1) .product-card, .row > div:nth-child(4n+1) .product-card { animation-delay: .02s; }
.product-row > div:nth-child(4n+2) .product-card, .row > div:nth-child(4n+2) .product-card { animation-delay: .07s; }
.product-row > div:nth-child(4n+3) .product-card, .row > div:nth-child(4n+3) .product-card { animation-delay: .12s; }
.product-row > div:nth-child(4n+4) .product-card, .row > div:nth-child(4n+4) .product-card { animation-delay: .17s; }

/* ---- product detail page price block ---- */
.product-detail-promotion {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  color: var(--accent-green-dark);
  background: var(--accent-green-soft);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}


/* ==========================================================================
   20e. PRODUCT DETAIL PAGE
   ========================================================================== */
.pdp { padding-top: 18px !important; }

/* ---- gallery ---- */
.pdp-gallery { position: relative; }
.product-details-slider.pd-slider-for {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-soft);
}
.product-details-slider .item {
  aspect-ratio: 1 / 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.product-details-slider .item img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.thumbnail-card.pd-slider-nav { margin-top: 10px; }
.thumbnail-card .slick-slide {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  margin-right: 8px;
  transition: border-color var(--t-fast) var(--ease);
}
.thumbnail-card .slick-slide img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.thumbnail-card .slick-slide.slick-current, .thumbnail-card .slick-slide:hover { border-color: var(--theme-color) !important; }

.pdp-gallery__ribbon {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  color: #fff;
  background: var(--accent-orange);
  font-size: 12px; font-weight: 700;
  padding: 7px 12px 8px;
  line-height: 1.05;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.pdp-gallery__ribbon--discount { background: #FFE1E1; color: #C81E3A; }
.pdp-gallery__ribbon--trending {
  background: linear-gradient(135deg, var(--theme-color), var(--theme-color-dark));
  display: inline-flex; align-items: center; gap: 5px;
}
.pdp-gallery__lowest {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--accent-green-dark);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}
.pdp-gallery__wish {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink-500);
  font-size: 16px;
  box-shadow: 0 1px 4px rgba(16, 17, 20, .16);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease);
}
.pdp-gallery__wish:hover { background: #fff; color: #E0447A; transform: scale(1.08); }
.pdp-gallery__wish.is-added { background: #E0447A; color: #fff; animation: wishPop .45s var(--ease-spring); }

/* ---- details column ---- */
.pdp-brand {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: var(--theme-color) !important;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 6px;
}
.pr_details .product_title {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--ink-900) !important;
  text-transform: capitalize;
  line-height: 1.3;
  margin-bottom: 8px;
}
.pdp-rating {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none !important;
  margin-bottom: 12px;
}
.pdp-rating strong { color: var(--ink-900); font-size: 13.5px; }
.pdp-rating__count { color: var(--ink-500); font-size: 12.5px; }
.pdp-short-desc { color: var(--ink-500); font-size: 14px; line-height: 1.6; margin-bottom: 16px; }

.pdp-weight { margin-bottom: 16px; }
.pdp-weight label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.pdp-weight__options { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-weight__pill {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-900) !important;
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
}
.pdp-weight__pill:hover { border-color: var(--theme-color); }
.pdp-weight__pill.is-active { border-color: var(--theme-color); background: var(--theme-color-tint); color: var(--theme-color) !important; }

.pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pdp-price__current { font-size: 30px; font-weight: 800; color: var(--ink-900); }
.pdp-price__mrp { font-size: 16px; color: var(--ink-300); text-decoration: line-through; }
.pdp-price__off { font-size: 13px; font-weight: 700; color: var(--accent-green-dark); }

.pdp-stock { margin-bottom: 18px; }
.pdp-stock__badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); }
.pdp-stock__badge--in { background: var(--accent-green-soft); color: var(--accent-green-dark); }
.pdp-stock__badge--low { background: #FFF4E0; color: var(--accent-orange); }
.pdp-stock__badge--out { background: #FFE1E1; color: #C81E3A; }

.pdp-buy-row { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.qty-stepper--lg {
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 0;
}
.qty-stepper--lg .qty-stepper__btn { width: 40px; height: 40px; background: transparent; font-size: 20px; border-radius: var(--radius-sm); }
.qty-stepper--lg .qty-stepper__btn:hover { background: var(--theme-color-tint); }
.qty-stepper--lg .qty-stepper__input {
  width: 44px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 15px; font-weight: 700;
  color: var(--ink-900);
}
.pdp-add-btn, .pdp-buy-btn {
  flex: 1;
  min-width: 160px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
}
.pdp-add-btn {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--accent-green) !important;
  color: var(--accent-green-dark) !important;
}
.pdp-add-btn:hover { background: var(--accent-green) !important; color: #fff !important; }
.pdp-add-btn--disabled { border: 1.5px solid var(--border-soft) !important; background: var(--bg-soft) !important; color: var(--ink-300) !important; cursor: not-allowed; }
.pdp-buy-btn { background: var(--theme-color) !important; border: 1.5px solid var(--theme-color) !important; color: #fff !important; }
.pdp-buy-btn:hover { background: var(--theme-color-dark) !important; }

.pdp-trust { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.pdp-trust__item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.pdp-trust__item i { color: var(--theme-color); font-size: 15px; }

/* ---- description / details / reviews tabs ---- */
.pr-description-review { margin-top: 36px; }
.desc-review-nav a { text-transform: none !important; }
.desc-review-nav a.active, .desc-review-nav a:hover { color: var(--theme-color) !important; border-color: var(--theme-color) !important; }

.pdp-details-card { padding: 22px 0; max-width: 640px; }
.pdp-details-list { list-style: none; margin: 0 0 22px; padding: 0; }
.pdp-details-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed var(--border-soft); font-size: 13.5px; }
.pdp-details-list li strong { color: var(--ink-500); font-weight: 600; }
.pdp-details-list li span, .pdp-details-list li span a { color: var(--ink-900) !important; font-weight: 600; text-decoration: none !important; }
.pdp-share label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 10px; }
.pdp-share__icons { display: flex; gap: 10px; }
.pdp-share__icons a {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-500) !important;
  transition: all var(--t-fast) var(--ease);
}
.pdp-share__icons a:hover { background: var(--theme-color); color: #fff !important; transform: translateY(-2px); }

.pdp-reviews { padding: 22px 0; max-width: 720px; }
.pdp-reviews__summary { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.pdp-reviews__score { font-size: 34px; font-weight: 800; color: var(--ink-900); }
.rating-wrap--lg .stars-outer:before, .rating-wrap--lg .stars-inner::before { font-size: 20px; letter-spacing: 3px; }
.pdp-reviews__count { font-size: 12.5px; color: var(--ink-500); }
.rating-wrap .stars-outer:before { color: var(--border-soft) !important; }
.rating-wrap .stars-inner::before { color: var(--accent-amber) !important; }

.pdp-reviews__form { background: var(--bg-soft); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 26px; }
.pdp-reviews__form h6 { font-weight: 800; color: var(--ink-900); margin-bottom: 12px; }
.pdp-reviews__form textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 13.5px;
  margin: 10px 0 12px;
  resize: vertical;
}
.pdp-reviews__locked { font-size: 13.5px; color: var(--ink-500); margin: 0; }
.pdp-reviews__locked a { color: var(--theme-color) !important; font-weight: 700; }

.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-picker input { display: none; }
.star-picker label { color: var(--border-soft); font-size: 24px; cursor: pointer; transition: color var(--t-fast) var(--ease); }
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label { color: var(--accent-amber); }

.review-body { display: flex; flex-direction: column; gap: 16px; }
.review-card { display: flex; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.review-photo {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--theme-color);
  display: flex; align-items: center; justify-content: center;
}
.review-photo img { width: 100%; height: 100%; object-fit: cover; }
.review-photo .username { color: #fff; font-weight: 700; font-size: 15px; }
.review-info .author-name { font-weight: 700; color: var(--ink-900); font-size: 13.5px; }
.review-info .rating-wrap { margin: 4px 0; }
.review-info .date { font-size: 11px; color: var(--ink-300); margin-bottom: 6px; }
.review-info .desc p { font-size: 13.5px; color: var(--ink-700); margin: 0; }

@media (max-width: 767px) {
  .pdp-buy-row { flex-direction: column; }
  .qty-stepper--lg { align-self: flex-start; }
  .pr_details .product_title { font-size: 20px !important; }
  .pdp-price__current { font-size: 24px; }
}


/* ==========================================================================
   13. LEGACY ITEM-CARD (deals carousel)
   ========================================================================== */
.item-card {
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  border: 1px solid var(--border-soft) !important;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.item-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important; }
.item-card .item-image {
  aspect-ratio: 1 / 1;
  background: var(--bg-soft);
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.item-card .item-image img { width: 100% !important; height: 100% !important; object-fit: contain; }
.item-card .item-label { background: var(--accent-orange) !important; color: #fff !important; border-radius: var(--radius-sm) !important; font-weight: 700; }
.item-card .item-title a { color: var(--ink-900) !important; }
.item-card .new-price { color: var(--ink-900) !important; }
.item-card .old-price { color: var(--ink-300) !important; }
.rating-wrap .stars-outer:before, .rating-wrap .stars-inner::before { color: var(--accent-amber) !important; }
.item-card-bottom .add-to-cart, .item-card-bottom a.add-to-cart {
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  width: auto !important; height: auto !important;
  padding: 9px 18px !important;
  font-weight: 600;
}
.item-card-bottom .add-to-cart:hover { background: var(--accent-green-dark) !important; }
.item-cart-list a { transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring); }
.item-cart-list a:hover { color: var(--theme-color) !important; transform: scale(1.12); }
.item-card .deals-countdown-card { background: rgba(16, 17, 20, .72) !important; }


/* ==========================================================================
   13b. BREADCRUMB — a quiet trail, not a coloured banner section
   ========================================================================== */
.breadcrumb-section {
  background: transparent !important;
  padding: 10px 0 8px !important;
  border-bottom: 1px solid var(--border-soft);
}
.breadcrumb-section .breadcrumb { margin-bottom: 0 !important; }
.breadcrumb-section .breadcrumb-item,
.breadcrumb-section .breadcrumb-item a {
  font-size: 11.5px !important;
  color: var(--ink-500) !important;
}
.breadcrumb-section .breadcrumb-item a:hover { color: var(--theme-color) !important; }
.breadcrumb-section .breadcrumb-item.active { color: var(--ink-300) !important; }
.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before { color: var(--ink-300) !important; }
.breadcrumb-section .page-title h1 {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--ink-300) !important;
  text-transform: uppercase;
  letter-spacing: .3px;
}


/* ==========================================================================
   14. SECTION CHROME / BUTTONS
   ========================================================================== */
.section-header .highlight { color: var(--theme-color) !important; }
/* Headline treatment: bold near-black text reads as a proper heading, the
   blue accent bar carries the brand colour instead of tinting the whole
   line blue (which read as thin/weak before). */
/* Every inner page (PDP, checkout, cart, account, legal...) sits on
   `.inner-section-bg`, which the original theme tinted with whichever
   admin-configurable "lightness green" colour was set - inconsistent with
   the rest of this redesign and not the clean neutral canvas asked for.
   Same light-grey token used everywhere else, white cards floating on top. */
.inner-section-bg { background: var(--bg-section-tint) !important; }

.section-title {
  position: relative;
  padding-left: 16px;
  color: var(--ink-900) !important;
  font-family: var(--secondary-font-family);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.2px;
}
.section-title::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 4px; height: 20px; border-radius: var(--radius-pill);
  background: var(--theme-color);
}
.see-all { color: var(--theme-color) !important; display: inline-flex; align-items: center; gap: 4px; transition: transform var(--t-fast) var(--ease); }
.see-all:hover { transform: translateX(3px); }

.btn-primary {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  box-shadow: none;
  transition: all var(--t-fast) var(--ease);
}
.btn-primary:hover { background: var(--theme-color-dark) !important; border-color: var(--theme-color-dark) !important; }
.theme-btn {
  border-radius: var(--radius-pill) !important;
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  transition: all var(--t-fast) var(--ease);
}
.theme-btn:hover { background: var(--theme-color-dark) !important; }

/* ---- 5-column grid step (Bootstrap only ships /12 divisions) ---- */
/* Only adds the desktop 20% (5-up) step. Width below 992px is left
   entirely to the col-6/col-sm-4/col-md-3 classes already on the same
   element (2-up on phones, 3-up on tablets) - this used to also set
   `width: 100%` unconditionally here, which fought with those classes and
   collapsed the category grid to one column on mobile. */
@media (min-width: 992px) {
  .col-lg-2dot4 { flex: 0 0 20%; max-width: 20%; }
}

/* ---- "Best Selling" — same section chrome as the rest of the page, just
   a small flame badge next to the title so it still reads as "featured" ---- */
.best-selling__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.best-selling__title-group { display: flex; align-items: center; gap: 8px; }
.best-selling__icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-amber));
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
}
.best-selling__row { padding: 0; }

/* ---- product-section rhythm: white background, normal (not 80px) gaps
   between Best Selling / featured-category carousels ---- */
.product-section {
  background: #fff !important;
  padding: 28px 0 !important;
}
@media (max-width: 768px) {
  .product-section { padding: 20px 0 !important; }
}

/* ---- compact card modifier (used in dense/carousel-style rows) ---- */
.product-card--compact { padding: 6px 6px 5px !important; }
.product-card--compact .product-title a { font-size: 12.5px !important; min-height: 2.3em; line-height: 1.15em; }
.product-card--compact .product-weight,
.product-card--compact .product-variant-select { font-size: 10.5px !important; }
.product-card--compact .product-price { margin-top: 6px; padding-top: 6px; }
.product-card--compact .current-price { font-size: 13.5px !important; }
.product-card--compact .mrp-price { font-size: 10px; }
.product-card--compact .add-to-cart-btn { min-width: 44px; padding: 5px 8px; font-size: 10px !important; }
.product-card--compact .product-card__wish { width: 22px; height: 22px; font-size: 11px; }
.product-card--compact .product-card__ribbon { font-size: 9px; padding: 5px 7px 6px; }
.product-card--compact .product-card__lowest { font-size: 8px; padding: 2px 5px; }

@media (max-width: 768px) {
  .best-selling__icon { width: 22px; height: 22px; font-size: 11px; }
}

/* ---- horizontal product carousel — used for Best Selling and the
   admin-picked featured-category rows on the homepage. Native scroll-snap
   instead of owl-carousel so cards keep their real markup/behaviour
   (wishlist, add-to-cart) with no plugin re-init cost. ---- */
.prod-carousel { position: relative; }
.prod-carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 2px 2px 6px;
  margin: 0 -2px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.prod-carousel__track::-webkit-scrollbar { display: none; }
/* Phone and tablet keep the original ladder: every step leaves part of a
   card showing at the right edge, which is what tells someone the row
   scrolls (the arrows are desktop-only). Desktop is the size that was
   actually wrong - it pinned every card to a flat 165px, so a product looked
   far narrower on the homepage than on its own category page. Above 992px
   the track matches that grid instead: col-lg-3 is 4 across, so 4 across at
   the grid's own 14px gutter. */
.prod-carousel__item {
  flex: 0 0 auto;
  width: 42%;
  scroll-snap-align: start;
  display: flex;
}
/* The card's own margin-bottom exists to separate grid ROWS. A carousel has
   no row beneath it, so there it was just dead space under every card -
   which is why the homepage card looked bottom-heavy next to the same card
   on a category page, where .product-row already zeroes it. */
.prod-carousel__item > .product-card { width: 100%; margin-bottom: 0 !important; }
@media (min-width: 480px) { .prod-carousel__item { width: 33%; } }
@media (min-width: 576px) { .prod-carousel__item { width: 27%; } }
@media (min-width: 768px) { .prod-carousel__item { width: 21%; } }
@media (min-width: 992px) {
  /* Six across, not the category grid's four. These homepage rows are for
     browsing past rather than studying, so a smaller card shows more of the
     range in the same space. Six items leave five 14px gaps. */
  .prod-carousel__track { gap: 14px; }
  .prod-carousel__item { width: calc((100% - 70px) / 6); }
}
.prod-carousel__arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  color: var(--theme-color) !important;
  transition: all var(--t-fast) var(--ease);
}
.prod-carousel__arrow--prev { left: -14px; }
.prod-carousel__arrow--next { right: -14px; }
.prod-carousel__arrow:hover { background: var(--theme-color) !important; color: #fff !important; }
.prod-carousel__arrow:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 991px) {
  .prod-carousel__arrow { display: none; }
}


/* ==========================================================================
   15. HERO / PROMO BANNER — no colored surround
   ========================================================================== */
/* No band of its own. The category strip directly above ends its wash on
   white, so the slider carries that straight on instead of starting a new
   coloured block a few pixels later. */
.promo-banner-1 { background: transparent !important; padding: 4px 0 18px !important; }
.promo-banner-1 .carousel-inner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.promo-banner-1 img {
  border-radius: var(--radius-lg) !important;
  display: block;
  width: 100%;
  height: auto;
}
/* The whole slide is the link. Block, so the anchor is the size of the
   poster rather than a text-height sliver of it, and the pointer says so. */
.hero-carousel__link {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.hero-carousel__link:focus-visible {
  outline: 3px solid var(--theme-color);
  outline-offset: 3px;
}

/* nav controls sit in a strip BELOW the image, never overlapping it */
.hero-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
.hero-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-700);
  font-size: 15px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.hero-carousel__arrow:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
  transform: scale(1.06);
}
.hero-carousel__arrow:active { transform: scale(.94); }

.hero-carousel__dots {
  position: static;
  display: flex;
  align-items: center;
  margin: 0;
}
.carousel-indicators [data-bs-target] {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background-color: var(--border-soft) !important;
  opacity: 1;
  margin: 0 3px;
  transition: background-color var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.carousel-indicators .active { background-color: var(--theme-color) !important; width: 18px; border-radius: 4px; }


/* ==========================================================================
   15b. CATEGORY STRIP — compact scroll-snap carousel under the header
   ========================================================================== */
.cat-strip {
  /* faint blue-into-white wash so the strip reads as its own band without
     fighting the white header above it */
  background: linear-gradient(180deg, #F1F6FB 0%, #FFFFFF 100%);
  padding: 18px 0 14px;
}
.cat-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cat-strip__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.2px;
}
.cat-strip__title span { color: var(--theme-color); }
.cat-strip__tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cat-strip__all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--theme-color) !important;
  text-decoration: none !important;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  transition: background var(--t-fast) var(--ease);
}
.cat-strip__all:hover { background: var(--theme-color-tint); }
.cat-strip__all i { font-size: 11px; transition: transform var(--t-fast) var(--ease); }
.cat-strip__all:hover i { transform: translateX(2px); }

.cat-strip__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-soft);
  background: #fff;
  border-radius: 50%;
  color: var(--ink-700);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.cat-strip__arrow:hover:not(:disabled) {
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #fff;
}
.cat-strip__arrow:disabled { opacity: .35; cursor: default; }

.cat-strip__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;              /* Firefox */
}
.cat-strip__track::-webkit-scrollbar { display: none; }

.cat-tile {
  flex: 0 0 auto;
  width: 78px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-decoration: none !important;
  padding: 10px 4px 12px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.cat-tile:hover {
  transform: translateY(-3px);
  border-color: var(--theme-color-soft);
  box-shadow: var(--shadow-sm);
}
.cat-tile__img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-tile__img img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile__name {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-700);
  text-align: center;
  /* two lines max, then ellipsis — keeps every tile the same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cat-strip { padding: 26px 0 20px; }
  .cat-strip__title { font-size: 20px; }
  .cat-strip__arrow { width: 32px; height: 32px; font-size: 13px; }
  .cat-strip__track { gap: 12px; }
  .cat-tile { width: 96px; padding: 14px 6px 15px; }
  .cat-tile__img { width: 58px; height: 58px; }
  .cat-tile__name { font-size: 11.5px; }
}


/* ==========================================================================
   16. PRE-FOOTER — trust signals + SEO content
   ========================================================================== */
.pre-footer {
  background: var(--bg-section-tint);
}
.pre-footer .section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.pre-footer .section-header h2 { margin: 0; font-size: 23px; font-weight: 800; color: var(--ink-900); text-align: center; }
.pre-footer .section-header .highlight { color: var(--theme-color) !important; }
.pre-footer .section-header img { opacity: .5; height: 16px; flex-shrink: 0; }
/* the decorative arrows only really work next to a single-line heading -
   once it wraps to two lines on narrow screens they read as misaligned,
   so they step aside and let the heading centre itself cleanly */
@media (max-width: 480px) {
  .pre-footer .section-header img { display: none; }
  .pre-footer .section-header h2 { font-size: 18px; }
}

/* Fixed a real layout bug here: .feature-cards had no grid/flex rule at
   all, so the three .card blocks just stacked full-width; and .card-icon
   had no size, so it stretched into the full-width colour bar. Both are
   pinned down explicitly now, with a different accent colour per card so
   the row reads as three distinct trust signals, not one blue block. */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  /* Full container width, in line with every other section. What made this
     strip look oversized was the icon circle and the padding, not the width -
     those are a size down now (see .card-icon below), so at full width it
     reads normally. */
  margin: 0 0 36px;
}
.feature-cards .card {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  padding: 18px 14px;
  text-align: center;
  align-items: center;
  transition: transform var(--t-base) var(--ease-spring), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.feature-cards .card:hover { transform: translateY(-4px) !important; border-color: var(--theme-color-soft) !important; box-shadow: var(--shadow-md) !important; }
.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sized against the two lines of text beneath it, not the card box. */
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  background: var(--theme-color) !important;
  border-radius: 50% !important;
}
.card-icon img { width: 21px; height: 21px; filter: brightness(0) invert(1); }
.card-icon i { font-size: 18px; color: #fff; }
.feature-cards .card:nth-child(1) .card-icon { background: var(--theme-color) !important; }
.feature-cards .card:nth-child(2) .card-icon { background: var(--accent-green) !important; }
.feature-cards .card:nth-child(3) .card-icon { background: var(--accent-orange) !important; }
.feature-cards .card:nth-child(4) .card-icon { background: var(--accent-amber) !important; }
.feature-cards .card h3 { font-size: 15px; font-weight: 800; color: var(--ink-900) !important; margin-bottom: 3px; }
.feature-cards .card p { font-size: 12.5px; color: var(--ink-500) !important; margin: 0; }

/* the min-order/delivery/cutoff/closed-day strip needs 4 columns, not 3 */
.feature-cards--4 { grid-template-columns: repeat(4, 1fr); }

/* stays in-a-row on phones too - just shrinks down instead of stacking */
@media (max-width: 576px) {
  .feature-cards { gap: 8px; }
  .feature-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-cards .card { padding: 14px 6px; border-radius: var(--radius-md) !important; }
  .card-icon { width: 40px; height: 40px; margin-bottom: 8px; }
  .card-icon img { width: 19px; height: 19px; }
  .card-icon i { font-size: 17px; }
  .feature-cards .card h3 { font-size: 12px; margin-bottom: 2px; line-height: 1.2; }
  .feature-cards .card p { font-size: 10.5px; line-height: 1.2; }
}

/* readable measure for the long-form SEO copy, not full page width -
   collapsed to a peek by default (content stays in the DOM for SEO, just
   visually clipped) and expands on click via #preFooterToggle. */
.pre-footer__content {
  /* Full container width, like the rest of the page. */
  margin: 34px 0 0;
  max-height: 230px;
  overflow: hidden;
  position: relative;
  transition: max-height .45s ease;
}
.pre-footer__content::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 80px;
  /* Fades into the section's OWN background. This used to fade to
     --bg-soft (grey) while the section had moved to --bg-section-tint
     (blue), which showed as a grey haze across the bottom of the text. */
  background: linear-gradient(180deg, transparent, var(--bg-section-tint));
  pointer-events: none;
  transition: opacity .3s ease;
}
/* Running text still needs a sane line length even in a 1320px block, so the
   paragraphs (not the block) are what's held back - the headings and the
   twelve-item list use the full width. */
.pre-footer__content .intro-text { max-width: 78ch; }
.pre-footer__content.is-expanded { max-height: 3000px; }
.pre-footer__content.is-expanded::after { opacity: 0; }

.pre-footer__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px auto 0;
  padding: 9px 22px;
  border: 1.5px solid var(--theme-color) !important;
  background: #fff !important;
  color: var(--theme-color) !important;
  font-weight: 700;
  font-size: 13px;
  border-radius: var(--radius-pill) !important;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.pre-footer__toggle:hover { background: var(--theme-color) !important; color: #fff !important; }
.pre-footer__toggle i { transition: transform var(--t-fast) var(--ease); font-size: 11px; }
.pre-footer__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.trust-heading { color: var(--ink-900) !important; font-weight: 800; margin: 26px 0 10px; }
.pre-footer__content > .trust-heading:first-child { margin-top: 0; }
.intro-text { color: var(--ink-500) !important; font-size: 13.5px; line-height: 1.75; }

.product-variety {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 20px;
}
@media (min-width: 576px) { .product-variety { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .product-variety { grid-template-columns: repeat(3, 1fr); } }
/* Now that the block runs the full container width, three columns leave each
   short item ("Dal & pulses") floating in ~430px. Twelve items over four
   columns is three even rows. */
@media (min-width: 1200px) { .product-variety { grid-template-columns: repeat(4, 1fr); } }
.product-variety li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink-700) !important;
  font-size: 13.5px;
  line-height: 1.4;
}
.product-variety li i { color: var(--accent-green); font-size: 13px; margin-top: 2px; flex-shrink: 0; }


/* ==========================================================================
   17. FOOTER — one premium footer: brand, categories, links, legal,
   contact, payment badges, bottom bar
   ========================================================================== */
.footer-section {
  background: var(--footer-bg) !important;
  color: rgba(255, 255, 255, .72) !important;
  position: relative;
}
/* brand-colour accent strip: blue to red, matching the logo palette */
.footer-section::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--theme-color-dark), var(--theme-color) 55%, var(--accent-red) 100%);
}
.footer-middle { padding-top: 40px !important; padding-bottom: 8px !important; }
.footer-section .row.gy-4 { row-gap: 32px !important; }

.footer-logo { display: inline-flex; margin-bottom: 14px; }
.footer-logo img {
  height: 34px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 5px 10px;
}
.footer-brand-text { max-width: 320px; }

.footer-social { display: flex; gap: 10px; margin-top: 14px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring);
}
.footer-social a:hover { transform: translateY(-2px); color: #fff; }
/* real brand colours on hover instead of one generic blue for every icon */
.footer-social a:nth-child(1):hover { background: #1877F2; }
.footer-social a:nth-child(2):hover { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }
.footer-social a:nth-child(3):hover { background: #000; }
.footer-social a:nth-child(4):hover { background: #FF0000; }

.footer-section .footer-title {
  color: #fff !important;
  font-size: 14.5px !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 16px !important;
  line-height: 1.3;
}
.footer-section .footer-title::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 30px; height: 3px; border-radius: var(--radius-pill);
  background: var(--theme-color);
}
/* each column gets its own accent colour instead of repeating the same blue */
.footer-section .row.gy-4 > div:nth-child(2) .footer-title::after { background: var(--accent-green); }
.footer-section .row.gy-4 > div:nth-child(3) .footer-title::after { background: var(--accent-amber); }
.footer-section .row.gy-4 > div:nth-child(4) .footer-title::after { background: var(--accent-orange); }
.footer-section .row.gy-4 > div:nth-child(5) .footer-title::after { background: var(--theme-color); }
.footer-section .footer-text, .footer-section p {
  color: rgba(255, 255, 255, .62) !important;
  font-size: 13.5px;
  line-height: 1.7;
  margin-bottom: 6px;
}
/* icon + text as a proper flex pair - icon stays pinned top-left and the
   text wraps naturally in its own column instead of the icon and a long
   value (the email) stacking into two visually mismatched "lines" */
.footer-section .footer-text--row { display: flex; align-items: flex-start; gap: 8px; }
.footer-section .footer-text--row i { width: 15px; flex-shrink: 0; margin-top: 2px; }
.footer-section .footer-text--row span { flex: 1; min-width: 0; word-break: break-word; }
.footer-section .footer-text i.bi-telephone-fill { color: var(--accent-green); }
.footer-section .footer-text i.bi-envelope-fill { color: var(--accent-amber); }
.footer-section .footer-text i.bi-geo-alt-fill { color: var(--accent-orange); }
/* the theme's global `a { color: var(--color-gray-dark) }` (meant for light
   backgrounds) otherwise wins over this paragraph's inherited color for the
   phone/email links here, since a direct rule on `a` beats an inherited
   value regardless of the parent's specificity - made the email link nearly
   invisible against the dark footer. */
.footer-section .footer-text a {
  color: rgba(255, 255, 255, .8) !important;
  font-weight: 600;
  font-size: 12.5px;
}
.footer-section .footer-text a:hover { color: #fff !important; }
.footer-section ul.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-section ul.footer-links li { margin-bottom: 10px; line-height: normal; }
.footer-section ul.footer-links a {
  color: rgba(255, 255, 255, .68) !important;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.footer-section ul.footer-links a:hover { color: #fff !important; padding-left: 4px; }
.footer-hr { border-color: rgba(255, 255, 255, .12) !important; opacity: 1; margin: 24px 0 20px !important; }
.footer-border { border-right: 1px solid rgba(255, 255, 255, .08); }

/* ---- delivery facts strip (min order / cutoff time / closed day) - each
   its own bordered pill, same treatment as the payment badges below, all
   centered as one tidy block instead of a ragged left-aligned list ---- */
.footer-delivery-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 26px 0 20px;
}
.footer-fact {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
}
.footer-fact i { color: var(--accent-green); font-size: 13px; }

/* ---- payment methods strip - label on its own centered line, badges in
   a centered 2-column grid below so it always reads as two clean rows
   regardless of viewport width instead of wrapping raggedly ---- */
.footer-payments {
  text-align: center;
  padding-bottom: 28px;
}
.footer-payments__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 12px;
}
.footer-payments__grid {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, auto));
  gap: 10px;
}
@media (min-width: 768px) {
  /* plenty of width here - one row of 4 instead of a 2x2 grid */
  .footer-payments__grid { grid-template-columns: repeat(4, auto); }
}
.footer-payment-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  color: rgba(255, 255, 255, .75);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.footer-payment-badge:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .12); }
.footer-payment-badge i { font-size: 13px; }
.footer-payment-badge:nth-child(1) i { color: var(--accent-green); }
.footer-payment-badge:nth-child(2) i { color: #6EA8FE; }
.footer-payment-badge:nth-child(3) i { color: var(--accent-amber); }
.footer-payment-badge:nth-child(4) i { color: var(--accent-orange); }

.footer-bottom { background: #031A30 !important; padding: 16px 0 !important; border-top: none !important; }
.footer-bottom .copy-right {
  color: rgba(255, 255, 255, .5) !important;
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 4px;
}
.footer-bottom .copy-right:last-child { margin-bottom: 0; }
.footer-bottom .copy-right--year { color: rgba(255, 255, 255, .65) !important; font-weight: 500; }
.footer-bottom strong { color: #fff; }


/* ==========================================================================
   18. COOKIE CONSENT
   ========================================================================== */
.cookie_consent_card {
  background: var(--ink-900) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.cookie_consent_head { color: #fff !important; }
.cookie_consent_text { color: rgba(255, 255, 255, .7) !important; }
.cookie_consent_card .accept_btn {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  border-radius: var(--radius-pill) !important;
}


/* ==========================================================================
   19. SCROLL-TO-TOP
   ========================================================================== */
a.scroll-to-top {
  background: var(--theme-color) !important;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base) var(--ease), bottom var(--t-base) var(--ease) !important;
}
a.scroll-to-top:hover { transform: translateY(-3px); }
/* Mobile/tablet: the bottom tab bar is fixed at the true viewport bottom,
   so the default bottom:30px sits right on top of it - lift the button
   above the bar instead. */
@media (max-width: 991px) {
  a.scroll-to-top {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 14px) !important;
    right: 16px !important;
    width: 36px !important; height: 36px !important; line-height: 36px !important;
  }
}


/* ==========================================================================
   19b. FLOATING CART TOAST (Blinkit-style "N item(s) - View Cart")
   ========================================================================== */
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 14px);
  transform: translate(-50%, 16px);
  width: calc(100% - 32px);
  max-width: 420px;
  z-index: 1030;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease-spring), visibility var(--t-base);
}
.cart-toast.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.cart-toast__link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-green-dark);
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.cart-toast__icon { font-size: 17px; flex-shrink: 0; }
.cart-toast__text { flex: 1; font-size: 13px; font-weight: 600; }
.cart-toast__text strong { font-size: 14px; }
.cart-toast__cta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; }
@media (min-width: 992px) {
  .cart-toast { bottom: 26px; }
}


/* ==========================================================================
   20. TOAST / ALERT NOTIFICATIONS (add-to-cart, wishlist, etc.)
   Reskins the jQuery Gritter plugin already wired up by onSuccessMsg() /
   onErrorMsg() in jquery.gritter.min.js - not touching that file, just
   overriding every class it applies (.gritter-item-wrapper, .gritter-item,
   .gritter-title, .gritter-close) with a clean modern toast.
   ========================================================================== */
#gritter-notice-wrapper {
  top: 90px !important;
  right: 18px !important;
  width: 330px !important;
}
.gritter-item-wrapper {
  background: none !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}
.gritter-top, .gritter-bottom { display: none !important; height: 0 !important; background: none !important; }
.gritter-item {
  display: flex !important;
  align-items: center;
  background: var(--bg-card) !important;
  color: var(--ink-900) !important;
  font-family: var(--primary-font-family), sans-serif !important;
  padding: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border-left: 4px solid var(--accent-green) !important;
  animation: fadeInUp var(--t-base) var(--ease) both;
}
.gritter-danger .gritter-item { border-left-color: #C81E3A !important; }
.gritter-title {
  width: 34px !important;
  height: 34px !important;
  margin: 12px 0 12px 12px !important;
  float: none !important;
  flex-shrink: 0;
}
.gritter-title .gritter-title-text {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  float: none !important;
  padding-top: 0 !important;
  font-size: 16px !important;
  color: #fff !important;
}
.gritter-success .gritter-title .gritter-title-text { background: var(--accent-green) !important; }
.gritter-danger .gritter-title .gritter-title-text { background: #C81E3A !important; }
.gritter-warning .gritter-title .gritter-title-text { background: var(--accent-amber) !important; }
.gritter-info .gritter-title .gritter-title-text { background: var(--theme-color) !important; }
.gritter-item p {
  flex: 1;
  margin: 0 !important;
  padding: 13px 30px 13px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ink-900) !important;
  text-align: left !important;
  line-height: 1.4 !important;
}
.gritter-close {
  display: flex !important;
  align-items: center; justify-content: center;
  position: absolute;
  top: 8px !important; right: 8px !important;
  width: 22px !important; height: 22px !important;
  padding-top: 0 !important;
  border-radius: 50%;
  font-size: 14px !important;
  color: var(--ink-300) !important;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.gritter-close:hover { background: var(--bg-soft) !important; color: var(--ink-700) !important; }
@media (max-width: 480px) {
  #gritter-notice-wrapper { left: 12px !important; right: 12px !important; width: auto !important; top: 78px !important; }
}


/* ==========================================================================
   20b. CART PAGE
   ========================================================================== */
.cart-list { display: flex; flex-direction: column; gap: 12px; }
.cart-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 12px;
}
.cart-item__img {
  flex-shrink: 0;
  width: 76px; height: 76px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-item__title {
  color: var(--ink-900) !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  text-transform: capitalize;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-item__title:hover { color: var(--theme-color) !important; }
.cart-item__unit {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 600;
  color: var(--theme-color);
  background: var(--theme-color-tint);
  border-radius: var(--radius-sm);
  padding: 2px 7px;
}
.cart-item__price { font-size: 13px; color: var(--ink-500); }
.cart-item__price-each { font-size: 11px; color: var(--ink-300); }
.cart-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.cart-item__remove {
  border: none; background: none;
  color: var(--ink-300);
  font-size: 15px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.cart-item__remove:hover { color: #E0447A; }
.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
}
.qty-stepper__btn {
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.qty-stepper__btn:hover { background: var(--theme-color-tint); color: var(--theme-color); }
.qty-stepper__value { font-size: 13px; font-weight: 700; color: var(--ink-900); min-width: 14px; text-align: center; }
.cart-item__line-total { font-size: 14.5px; font-weight: 700; color: var(--ink-900); }

.order-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  position: sticky;
  top: 90px;
}
.order-summary__title { font-size: 15px; font-weight: 800; color: var(--ink-900); margin-bottom: 14px; }
.order-summary__row {
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--ink-500);
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
}
.order-summary__row--total {
  border-bottom: none;
  margin-top: 4px;
  padding-top: 12px;
  font-size: 16px; font-weight: 800;
  color: var(--ink-900);
}
.order-summary__checkout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: var(--theme-color) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-md);
  text-decoration: none !important;
  transition: background var(--t-fast) var(--ease);
}
.order-summary__checkout:hover { background: var(--theme-color-dark) !important; }
.order-summary__continue {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--ink-500) !important;
  text-decoration: none !important;
}
.order-summary__continue:hover { color: var(--theme-color) !important; }

/* ---- empty state (cart / wishlist / search / grid) ---- */
.empty_card { padding: 40px 20px; text-align: center; }
.empty_card .empty_img { padding: 0 0 16px; max-width: 180px; margin: 0 auto; }
.empty_card .empty_img img { width: 100%; opacity: .85; }
.empty_card h3 { font-size: 16px; font-weight: 700; color: var(--ink-700); margin-bottom: 4px; }

@media (max-width: 767px) {
  .cart-item { flex-wrap: wrap; }
  .cart-item__actions { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; margin-top: 4px; }
  .order-summary { position: static; margin-top: 20px; }
}


/* ==========================================================================
   20c. CHECKOUT PAGE — visual polish only, every id/name/value/class the
   existing checkout.js and parsley validation depend on is untouched.
   ========================================================================== */
#checkout_formid h5 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-soft);
}
#checkout_formid h5.mt10 { margin-top: 30px; }
#checkout_formid .form-control {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#checkout_formid .form-control:focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 3px var(--theme-color-tint) !important;
}
#checkbox_label { font-size: 13.5px; color: var(--ink-700); display: inline-flex; align-items: center; gap: 6px; }
.checkout-h5-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--theme-color-tint);
  color: var(--theme-color) !important;
  font-size: 13px;
  vertical-align: middle;
}

/* Salumbar-only delivery notice + the locked city/state/zip fields under it */
.delivery-zone-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent-green-soft);
  color: var(--accent-green-dark) !important;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 18px;
}
.delivery-zone-badge i { font-size: 15px; }
#checkout_formid input[readonly] {
  background: var(--bg-soft) !important;
  color: var(--ink-500) !important;
  cursor: not-allowed;
}

/* ---- payment method cards - one compact row instead of stacked full-width
   cards, each with its own accent colour so the section doesn't read as
   flat grey/white ---- */
.payment-methods-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.payment_card {
  flex: 1 1 150px;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  background: var(--bg-card);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.payment_card:has(input:checked) { border-color: var(--theme-color); background: var(--theme-color-tint); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.checkboxlist label.checkbox-title {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-900);
}
.payment_card img { max-height: 26px; width: auto; }
.payment_card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--theme-color-tint);
  color: var(--theme-color);
  font-size: 15px;
  flex-shrink: 0;
}
.payment_card--cod .payment_card__icon { background: var(--accent-green-soft); color: var(--accent-green-dark); }
.payment_card--counter .payment_card__icon { background: var(--accent-amber-soft); color: var(--accent-amber); }
.payment_card--bank .payment_card__icon { background: var(--accent-orange-soft); color: var(--accent-orange); }
.payment-method-desc { font-size: 12px; color: var(--ink-500); margin: 10px 2px 0; }

/* ---- order summary (checkout reuses the .carttotals-* classes from
   before the cart page rewrite - restyled here to match, class names
   left alone since checkout.js reads .shipping_fee/.total_amount) ---- */
.carttotals-card {
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-card) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: sticky;
  top: 90px;
}
.carttotals-card .carttotals-head {
  background: var(--theme-color-tint) !important;
  color: var(--theme-color) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--border-soft);
}
.carttotals-card .carttotals-body { padding: 8px 18px 18px !important; }
.carttotals-card .carttotals-body table { margin: 0; }
.carttotals-card .carttotals-body td { border-color: var(--border-soft) !important; padding: 10px 0 !important; font-size: 13px; vertical-align: top; }
.carttotals-body__img { width: 48px !important; padding-right: 4px !important; }
.carttotals-body__img img {
  width: 44px; height: 44px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  padding: 4px;
}
.carttotals-card .carttotals-body .title a { color: var(--ink-900) !important; font-weight: 600; text-decoration: none !important; }
.carttotals-card .carttotals-body .sub-title { color: var(--ink-500); font-size: 11.5px; }
.carttotals-card .carttotals-body .price { color: var(--ink-900); font-weight: 700; float: right; }
.carttotals-card .carttotals-body .sub-price { color: var(--ink-300); font-size: 11px; float: right; clear: both; }
.carttotals-card .carttotals-body tr:last-child td { border-bottom: none !important; }
.carttotals-card .carttotals-body .total { font-size: 16px; font-weight: 800; color: var(--ink-900); }
.carttotals-card .carttotals-body .total-price { font-size: 18px; font-weight: 800; color: var(--accent-green-dark) !important; float: right; }
.checkout_btn {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 700 !important;
  padding: 13px !important;
  transition: background var(--t-fast) var(--ease);
}
.checkout_btn:hover { background: var(--theme-color-dark) !important; }

@media (max-width: 991px) {
  .carttotals-card { position: static; }
}


/* ==========================================================================
   20d. 404 PAGE
   ========================================================================== */
.error_card {
  text-align: center;
  padding: 40px 0 60px;
}
.error_card .error_img { width: 100%; max-width: 380px; margin: 0 auto 8px; }
.error_card .error_img img { width: 100%; }
.error_eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--theme-color);
  background: var(--theme-color-tint);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.error_heading { font-size: 24px; font-weight: 800; color: var(--ink-900); margin-bottom: 10px; }
.error_card p { font-size: 14px; color: var(--ink-500); margin: 0 auto 26px; max-width: 460px; }

.error_search {
  display: flex;
  align-items: center;
  max-width: 460px;
  margin: 0 auto 24px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.error_search input {
  flex: 1;
  border: none;
  outline: none;
  padding: 13px 18px;
  font-size: 13.5px;
  color: var(--ink-900);
}
.error_search button {
  border: none;
  background: var(--theme-color);
  color: #fff;
  width: 46px;
  flex-shrink: 0;
  align-self: stretch;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.error_search button:hover { background: var(--theme-color-dark); }

.error_actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.error_actions .btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill) !important;
  font-weight: 700;
  padding: 11px 22px;
}
.error_btn-outline {
  background: #fff !important;
  border: 1.5px solid var(--border-soft) !important;
  color: var(--ink-700) !important;
}
.error_btn-outline:hover { border-color: var(--theme-color) !important; color: var(--theme-color) !important; }


/* ==========================================================================
   21. GLOBAL MOBILE-FIRST REFINEMENTS
   ========================================================================== */
@media (max-width: 768px) {
  .section { padding: 24px 0 !important; }
  .pre-footer .section-header h2 { font-size: 19px; }
  .category-image { width: 58px !important; height: 58px !important; }
  .category-card { padding: 10px 10px 14px !important; }
  .footer-middle { padding-top: 28px !important; }
  .footer-border { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 20px; }
  /* was 22px - user feedback: still too much air below each card on mobile */
  .product-card { margin-bottom: 12px !important; }
}

/* ==========================================================================
   22. TURBO DRIVE — progress bar theming + page transition
   ========================================================================== */
/* Turbo injects its own default progress-bar styles; this overrides the
   color/height to match the site and adds a small "flowing" look instead of
   the flat default bar. !important since it's competing with Turbo's own
   injected <style>, which can land after this stylesheet in the head. */
.turbo-progress-bar {
  height: 3px !important;
  background: linear-gradient(90deg, var(--theme-color), var(--accent-green, #16a34a)) !important;
}

/* Page-swap crossfade itself is handled by the browser's native View
   Transitions API (see the view-transition meta tag in layouts/frontend -
   Turbo 8 drives it automatically), not CSS keyframes here: the <body>
   element is never removed/re-inserted by Turbo (only its contents change),
   so a plain CSS animation on `body` would only ever play once and not
   replay on subsequent navigations. */

/* ==========================================================================
   23. PDP — quick-fact chips + mobile mini add-to-cart bar (Blinkit-style)
   ========================================================================== */
.pdp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.pdp-facts__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700);
}
.pdp-facts__chip i { color: var(--theme-color); font-size: 12px; }

.pdp-mini-bar {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  z-index: 1015;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 10px 14px;
  border-top: 1px solid var(--hdr-line, var(--border-soft));
  box-shadow: 0 -6px 18px rgba(16, 17, 20, .08);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.pdp-mini-bar.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pdp-mini-bar__price { flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pdp-mini-bar__now { font-size: 15px; font-weight: 800; color: var(--ink-900); }
.pdp-mini-bar__mrp { font-size: 11px; color: var(--ink-300); text-decoration: line-through; }
.pdp-mini-bar__stepper {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 2px;
}
.pdp-mini-bar__stepper .qty-stepper__btn { width: 30px; height: 30px; background: transparent; font-size: 16px; border-radius: var(--radius-sm); }
.pdp-mini-bar__stepper .qty-stepper__btn:hover { background: var(--theme-color-tint); }
.pdp-mini-bar__stepper .qty-stepper__value { width: 26px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-900); }
.pdp-mini-bar__add {
  flex: 1;
  min-width: 0 !important;
  margin: 0 !important;
  background: var(--accent-green) !important;
  border: 1.5px solid var(--accent-green) !important;
  color: #fff !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
}
.pdp-mini-bar__add:hover { background: var(--accent-green-dark) !important; }

@media (min-width: 992px) {
  .pdp-mini-bar { display: none !important; }
}
@media (max-width: 991.98px) {
  .pdp-mini-bar { display: flex; }
  /* room so page content (and the sticky footer) never sits underneath the
     fixed mini bar once it's showing */
  .pdp { padding-bottom: 74px; }
}

/* ==========================================================================
   24. LEGAL PAGES (Privacy / Refund / Terms)
   ========================================================================== */
.legal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 32px 28px;
  max-width: 860px;
  margin: 0 auto;
}
.policy-section h2.h5,
.terms-section h2.h5 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 10px;
  padding-top: 4px;
}
.policy-section p, .terms-section p,
.policy-section ul, .terms-section ul {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-700);
}
.policy-section ul, .terms-section ul { padding-left: 20px; margin-bottom: 0; }
.policy-section li, .terms-section li { margin-bottom: 6px; }
.policy-section a, .terms-section a { color: var(--theme-color) !important; font-weight: 600; text-decoration: none !important; }
.policy-section a:hover, .terms-section a:hover { text-decoration: underline !important; }
.policy-section section, .terms-section section { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-soft); }
.policy-section section:last-child, .terms-section section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
@media (max-width: 576px) {
  .legal-card { padding: 22px 16px; }
}

/* ---- generic admin-authored pages (About Us, Career, FAQ, etc.) ---- */
.info-page-card { position: relative; padding-top: 44px; }
.info-page-card__icon {
  position: absolute; top: -26px; left: 28px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--theme-color) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow-md);
}
.entry h6 { font-size: 16px; font-weight: 800; color: var(--ink-900) !important; margin: 26px 0 10px; }
.entry h6:first-child { margin-top: 0; }
.entry p { font-size: 14px; line-height: 1.75; color: var(--ink-700) !important; }
.entry ul { padding-left: 20px; margin-bottom: 16px; }
.entry ul li { font-size: 14px; line-height: 1.8; color: var(--ink-700) !important; }
.entry ul li i.bi-check-circle-fill { color: var(--accent-green); margin-right: 6px; }
.entry a { color: var(--theme-color) !important; font-weight: 600; text-decoration: none !important; }
.entry a:hover { text-decoration: underline !important; }
@media (max-width: 576px) {
  .info-page-card { padding-top: 38px; }
  .info-page-card__icon { width: 44px; height: 44px; font-size: 18px; left: 20px; top: -22px; }
}

/* ---- Contact Us page - matches the same small filled-circle icon
   language used everywhere else, instead of the old outlined icons ---- */
.contact_card .heading { font-size: 18px; font-weight: 800; color: var(--ink-900) !important; }
.contact-form, .contact-info, .contact-map {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xs) !important;
  border: 1px solid var(--border-soft);
  padding: 28px !important;
}
.contact-form .form-control {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.contact-form .form-control:focus { border-color: var(--theme-color) !important; box-shadow: 0 0 0 3px var(--theme-color-tint) !important; }
.contact-info .info .icon {
  border: none !important;
  box-shadow: none !important;
  background: var(--theme-color) !important;
  color: #fff !important;
  width: 40px; height: 40px; line-height: 40px;
}
.contact-info .info:nth-child(2) .icon { background: var(--accent-amber) !important; }
.contact-info .info:nth-child(3) .icon { background: var(--accent-orange) !important; }
.contact-info .info .icon i { font-size: 15px; }
.contact-info .info .desc span { font-size: 11.5px; font-weight: 700; color: var(--ink-500) !important; text-transform: uppercase; letter-spacing: .3px; }
.contact-info .info .desc p { font-size: 14px; color: var(--ink-900) !important; font-weight: 600; margin-top: 2px !important; }
.contact-info .info .desc p a { color: var(--ink-900) !important; text-decoration: none !important; }
.contact-info .info .desc p a:hover { color: var(--theme-color) !important; }
.google_map { border-radius: var(--radius-md); overflow: hidden; }

/* ==========================================================================
   25. AUTH PAGES (Login / Register / Reset Passcode) + MY ACCOUNT
   ========================================================================== */
.auth-wrap { display: flex; justify-content: center; padding: 12px 0 8px; }
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 36px 32px;
  animation: fadeInUp var(--t-slow) var(--ease) both;
}
.auth-card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--theme-color-tint);
  color: var(--theme-color) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px;
}
.auth-card h4 { text-align: center; font-size: 21px; font-weight: 800; color: var(--ink-900) !important; margin-bottom: 6px; }
.auth-card > p.auth-sub { text-align: center; font-size: 13.5px; color: var(--ink-500) !important; margin-bottom: 26px; }

.auth-field { margin-bottom: 16px; }
.auth-field label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px;
}
/* Marks a field as optional inside the label, so nobody stalls on it. */
.auth-field__hint {
  font-weight: 500; color: var(--ink-300); text-transform: none; letter-spacing: 0;
}
.auth-field .form-control {
  width: 100%;
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 12px 14px !important;
  font-size: 14px;
  color: var(--ink-900);
  background: var(--bg-card) !important;
  box-shadow: none !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.auth-field .form-control:focus { border-color: var(--theme-color) !important; outline: none; box-shadow: 0 0 0 3px var(--theme-color-tint) !important; }
.auth-field .form-control.is-invalid { border-color: #C81E3A !important; }
.auth-field .text-danger { display: block; font-size: 12px; color: #C81E3A !important; margin-top: 5px; font-weight: 600; }

/* +91 prefix badge on phone fields */
.auth-phone { display: flex; border: 1.5px solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.auth-phone:focus-within { border-color: var(--theme-color); box-shadow: 0 0 0 3px var(--theme-color-tint); }
.auth-phone.is-invalid { border-color: #C81E3A; }
.auth-phone.is-valid { border-color: var(--accent-green); }
.auth-phone__prefix {
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px;
  background: var(--bg-soft);
  color: var(--ink-700) !important;
  font-weight: 700; font-size: 14px;
  border-right: 1.5px solid var(--border-soft);
  flex-shrink: 0;
}
.auth-phone input { flex: 1; min-width: 0; border: none !important; padding: 12px 14px !important; font-size: 14px; background: transparent !important; box-shadow: none !important; }
.auth-phone input:focus { outline: none; }

/* password field with show/hide eye toggle */
.auth-password { position: relative; }
.auth-password input { padding-right: 44px !important; }
.auth-password__toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--ink-300);
  cursor: pointer; border-radius: var(--radius-sm);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.auth-password__toggle:hover, .auth-password__toggle:focus-visible { color: var(--theme-color); background: var(--theme-color-tint); }

.auth-check { display: flex; align-items: center; gap: 8px; margin: -4px 0 20px; font-size: 13px; color: var(--ink-700); }
.auth-check input { accent-color: var(--theme-color); width: 16px; height: 16px; }
.auth-check label { margin: 0; font-weight: 500; color: var(--ink-700) !important; cursor: pointer; }

.auth-submit.btn.theme-btn {
  width: 100%;
  border-radius: var(--radius-md) !important;
  padding: 13px !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}

.auth-links { margin-top: 22px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.auth-links a { color: var(--theme-color) !important; font-weight: 700; font-size: 13.5px; text-decoration: none !important; }
.auth-links a:hover { text-decoration: underline !important; }

.auth-alert { padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.auth-alert--danger { background: #FFE1E1; color: #C81E3A !important; }
.auth-alert--success { background: var(--accent-green-soft); color: var(--accent-green-dark) !important; }

@media (max-width: 576px) {
  .auth-card { padding: 28px 20px; border-radius: var(--radius-lg) !important; }
}

/* admin login - same component, slate instead of brand blue so it visibly
   reads as a different, staff-only area rather than the customer login */
.auth-card--admin { border-color: #2B2F38 !important; }
.auth-card__icon--admin { background: #2B2F38 !important; color: #fff !important; }
.auth-submit--admin.btn.theme-btn { background: #2B2F38 !important; border-color: #2B2F38 !important; }
.auth-submit--admin.btn.theme-btn:hover { background: #1a1d24 !important; }

/* ---- My Account / dashboard ---- */
.dashbord-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.dashbord-sidebar .profile-info {
  text-align: center;
  padding: 28px 20px;
  background: var(--theme-color-tint);
  border-bottom: 1px solid var(--border-soft);
}
.dashbord-sidebar .avatar {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--theme-color) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
  text-transform: uppercase;
}
.dashbord-sidebar .profile-info h5 { font-size: 15px; font-weight: 800; color: var(--ink-900) !important; margin-bottom: 2px; }
.dashbord-sidebar .profile-info p { font-size: 12.5px; color: var(--ink-500) !important; margin: 0; word-break: break-word; }
.dashbord-sidebar .sidebar-nav ul { list-style: none; margin: 0; padding: 10px; }
.dashbord-sidebar .sidebar-nav li { margin-bottom: 2px; }
.dashbord-sidebar .sidebar-nav li a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 600;
  color: var(--ink-700) !important;
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
}
.dashbord-sidebar .sidebar-nav li a:hover { background: var(--bg-soft); }
/* the page-specific inline script toggles .active on the <a> itself, not
   the <li> - covering both so highlighting works regardless */
.dashbord-sidebar .sidebar-nav li.active a,
.dashbord-sidebar .sidebar-nav li a.active { background: var(--theme-color-tint); color: var(--theme-color) !important; }

/* small, consistent icon chips - one flat colour each, same size, so the
   nav reads as one organised set instead of mismatched bare glyphs */
.sidebar-nav__icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: #fff !important;
}
.sidebar-nav__icon--blue { background: var(--theme-color) !important; }
.sidebar-nav__icon--green { background: var(--accent-green) !important; }
.sidebar-nav__icon--amber { background: var(--accent-amber) !important; }
.sidebar-nav__icon--orange { background: var(--accent-orange) !important; }
.sidebar-nav__icon--purple { background: #7C5CFC !important; }
.sidebar-nav__icon--red { background: #E5484D !important; }
.sidebar-nav__divider { height: 1px; background: var(--border-soft); margin: 8px 4px; }

.my_card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 28px 26px;
}
.my_card h4 { font-size: 19px; font-weight: 800; color: var(--ink-900) !important; margin-bottom: 8px; }
.my_card p { font-size: 13.5px; color: var(--ink-500) !important; }
.my_card p a { color: var(--theme-color) !important; font-weight: 700; text-decoration: none !important; }
.my_card p a:hover { text-decoration: underline !important; }
.my_card .mb-3 label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 6px; }
.profile-readonly {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: var(--ink-700);
  font-size: 14px; font-weight: 600;
}
.profile-readonly i { color: var(--accent-green); font-size: 13px; }

/* ---- Order Tracking: search card + responsive stepper (the old stepper
   used float + a fixed 200px width per step - 4 steps needed 800px
   minimum, forcing horizontal overflow on any phone) ---- */
.tracking-search-card {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 32px 28px;
}
.tracking-search-card__icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--theme-color-tint);
  color: var(--theme-color) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.tracking-search-form .auth-field { margin-bottom: 14px; text-align: left; }

.order-tracking-card { text-align: center; padding: 8px 0 28px; }
.order-tracking-card__no { font-size: 15px; font-weight: 800; color: var(--ink-900); margin-bottom: 28px; }
.order-track { display: flex; max-width: 560px; margin: 0 auto; }
.order-track__step { flex: 1; position: relative; text-align: center; padding: 0 4px; }
.order-track__step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 17px; left: -50%;
  width: 100%; height: 3px;
  background: var(--border-soft);
  z-index: 0;
}
.order-track__step.is-done:not(:first-child)::before { background: var(--theme-color); }
.order-track__dot {
  position: relative; z-index: 1;
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft);
  color: var(--ink-300);
  font-size: 16px;
  border: 3px solid var(--bg-app);
}
.order-track__step.is-done .order-track__dot { background: var(--theme-color) !important; color: #fff !important; }
.order-track__label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-500); line-height: 1.3; }
.order-track__step.is-done .order-track__label { color: var(--ink-900); }
@media (max-width: 480px) {
  .order-track__label { font-size: 9.5px; }
  .order-track__dot { width: 30px; height: 30px; font-size: 13px; }
  .order-track__step:not(:first-child)::before { top: 14px; }
}
.my_card .form-control, .my_card textarea.form-control {
  border: 1.5px solid var(--border-soft) !important;
  border-radius: var(--radius-md) !important;
  padding: 11px 14px !important;
  font-size: 14px;
  box-shadow: none !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.my_card .form-control:focus { border-color: var(--theme-color) !important; box-shadow: 0 0 0 3px var(--theme-color-tint) !important; }

.my_card table.table { border-color: var(--border-soft) !important; font-size: 13px; }
.my_card table.table thead th { background: var(--bg-soft); color: var(--ink-500) !important; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; border-color: var(--border-soft) !important; white-space: nowrap; }
.my_card table.table td { vertical-align: middle; border-color: var(--border-soft) !important; }
.my_card table.table a { color: var(--theme-color) !important; font-weight: 700; text-decoration: none !important; }

/* ---- My Account hub: hero + icon-box grid (Blinkit-style), not a list ---- */
.account-hero {
  text-align: center;
  padding: 36px 20px 30px;
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--theme-color-tint) 0%, var(--bg-card) 75%);
  border: 1px solid var(--border-soft);
  margin-bottom: 18px;
}
.account-hero__avatar {
  width: 76px; height: 76px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--theme-color) !important;
  color: #fff !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
  border: 3px solid #fff;
}
.account-hero__name { font-size: 21px; font-weight: 800; color: var(--ink-900) !important; margin-bottom: 4px; }
.account-hero__meta {
  font-size: 13px; color: var(--ink-500) !important; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.account-hero__meta i { color: var(--accent-green); font-size: 12px; }

/* inline name edit */
.account-hero__name-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 4px; }
.account-hero__name-row .account-hero__name { margin-bottom: 0; }
.account-hero__edit-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-500);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  flex-shrink: 0;
}
.account-hero__edit-btn:hover { background: var(--theme-color-tint); color: var(--theme-color); }
.account-hero__name-form {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-bottom: 4px;
}
.account-hero__name-input {
  max-width: 220px;
  text-align: center;
  border: 1.5px solid var(--theme-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 6px 12px !important;
  font-size: 16px; font-weight: 700;
  color: var(--ink-900);
  background: var(--bg-card);
}
.account-hero__name-input:focus { outline: none; box-shadow: 0 0 0 3px var(--theme-color-tint); }
.account-hero__name-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-500);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.account-hero__name-btn:hover { background: var(--border-soft); }
.account-hero__name-btn--save { background: var(--accent-green) !important; color: #fff !important; }
.account-hero__name-btn--save:hover { background: var(--accent-green-dark) !important; }

.account-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.account-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
  animation: fadeInUp var(--t-slow) var(--ease) both;
}
.account-grid__item:hover { transform: translateY(-3px); border-color: var(--theme-color-soft); box-shadow: var(--shadow-md); }
.account-grid__icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  color: #fff !important;
}
.account-grid__icon--green { background: var(--accent-green) !important; }
.account-grid__icon--blue { background: var(--theme-color) !important; }
.account-grid__icon--red { background: #E5484D !important; }
.account-grid__icon--amber { background: var(--accent-amber) !important; }
.account-grid__icon--orange { background: var(--accent-orange) !important; }
.account-grid__icon--purple { background: #7C5CFC !important; }
.account-grid__icon--danger { background: #C81E3A !important; }
.account-grid__label { font-size: 12.5px; font-weight: 700; color: var(--ink-900) !important; text-align: center; line-height: 1.25; }
.account-grid__item--logout .account-grid__label { color: #C81E3A !important; }

/* ---- simple back link for Orders/Addresses/Change Passcode/Order
   Details - each of these pages shows only its own content now, so this
   is the only navigation element needed to get back to the hub. ---- */
.account-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-700) !important;
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
}
.account-back-link:hover { background: var(--theme-color-tint); color: var(--theme-color) !important; border-color: var(--theme-color-soft); }
.account-back-link i { font-size: 14px; }

@media (max-width: 767px) {
  .account-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .account-grid__item { padding: 16px 6px; }
  .account-grid__icon { width: 40px; height: 40px; font-size: 16px; }
  .account-grid__label { font-size: 11px; }
  .account-hero { padding: 30px 16px 24px; }
  .account-hero__avatar { width: 64px; height: 64px; font-size: 25px; }
  .account-hero__name { font-size: 18px; }
}
.status_btn { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; background: var(--bg-soft); color: var(--ink-700); }

@media (max-width: 767px) {
  .my-dashbord .col-sm-12.col-md-4 { margin-bottom: 18px; }
  .my_card { padding: 20px 16px; }
}

/* ---- My Orders: a card list, not a wide multi-column table - nothing on
   this page ever needs horizontal scrolling on a phone, everything wraps
   and stacks like the rest of the app instead. ---- */
.order-list { display: flex; flex-direction: column; gap: 14px; }
.order-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.order-card:hover { border-color: var(--theme-color-soft); box-shadow: var(--shadow-xs); }
.order-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.order-card__no { font-size: 14.5px; font-weight: 800; color: var(--ink-900) !important; text-decoration: none !important; }
.order-card__no:hover { color: var(--theme-color) !important; }
.order-card__date { font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.order-card__amount { font-size: 16px; font-weight: 800; color: var(--theme-color); flex-shrink: 0; }
.order-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.order-card__meta { font-size: 12.5px; color: var(--ink-500); }
.order-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order-card__action {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-700) !important;
  text-decoration: none !important;
  transition: all var(--t-fast) var(--ease);
}
.order-card__action:hover { background: var(--bg-soft); }
.order-card__action--primary { background: var(--theme-color) !important; border-color: var(--theme-color) !important; color: #fff !important; }
.order-card__action--primary:hover { background: var(--theme-color-dark) !important; }
@media (max-width: 480px) {
  .order-card__action { flex: 1; justify-content: center; }
}

/* ---- Order Details: line items as rows that wrap, not a 5-column table
   forcing horizontal scroll on a phone ---- */
.order-line-items { display: flex; flex-direction: column; gap: 12px; }
.order-line-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}
.order-line-item__img {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.order-line-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.order-line-item__body { flex: 1; min-width: 0; }
.order-line-item__title { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-900) !important; text-decoration: none !important; }
.order-line-item__title:hover { color: var(--theme-color) !important; }
.order-line-item__size { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }
.order-line-item__qty { font-size: 12px; color: var(--ink-500); margin-top: 3px; }
.order-line-item__total { flex-shrink: 0; font-size: 14px; font-weight: 800; color: var(--ink-900); }
@media (max-width: 480px) {
  .order-line-item__img { width: 46px; height: 46px; }
  .order-line-item__title { font-size: 12.5px; }
}

/* ==========================================================================
   26. CONTACT PAGE — WhatsApp help button
   ========================================================================== */
.whatsapp-help-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 13px 18px;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(37, 211, 102, .28);
  transition: all var(--t-fast) var(--ease);
}
.whatsapp-help-btn i { font-size: 18px; }
.whatsapp-help-btn:hover { background: #1EBE5A !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(37, 211, 102, .35); }

/* ==========================================================================
   27. LANGUAGE SWITCHER — a real pill tab (icon + the *other* language's
   name only), not a circular icon-only button. Appended last on purpose so
   it wins over the older icon-button rules regardless of breakpoint.
   ========================================================================== */
.site-header__lang .language-menu .dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 7px 14px 7px 11px !important;
  border-radius: var(--hdr-radius-pill) !important;
  background: var(--hdr-blue-tint) !important;
  border: 1.5px solid var(--hdr-blue) !important;
  color: var(--hdr-blue) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background var(--hdr-ease) 150ms, color var(--hdr-ease) 150ms;
}
.site-header__lang .language-menu .dropdown-toggle i {
  font-size: 15px !important;
  color: var(--hdr-blue) !important;
  background: transparent !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
}
.site-header__lang .language-menu .dropdown-toggle:hover,
.site-header__lang .language-menu .dropdown-toggle:focus-visible {
  background: var(--hdr-blue) !important;
  color: #fff !important;
}
.site-header__lang .language-menu .dropdown-toggle:hover i { color: #fff !important; }
@media (max-width: 480px) {
  .site-header__lang .language-menu .dropdown-toggle {
    padding: 6px 10px 6px 8px !important;
    font-size: 11px !important;
  }
  .site-header__lang .language-menu .dropdown-toggle i { font-size: 13px !important; }
}

/* Mobile: show Contact Info (with WhatsApp button) above the form -
   people want the phone/WhatsApp/address before they bother typing a form */
@media (max-width: 991px) {
  .contact_card > .container > .row { display: flex; flex-direction: column; }
  .contact_card > .container > .row > [class*="col-lg-7"] { order: 2; margin-top: 24px; }
  .contact_card > .container > .row > [class*="col-lg-5"] { order: 1; }
}

/* ==========================================================================
   28. FESTIVAL CAMPAIGNS — homepage strip + campaign landing page
   The two --camp-* custom properties are set inline per campaign from the
   admin's chosen colours, so one stylesheet serves Diwali, Raksha Bandhan
   or anything else without a code change.
   ========================================================================== */

/* ---- homepage promo strip ---- */
.campaign-strip-section { padding: 6px 0 2px; }
.campaign-strip {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  text-decoration: none !important;
  background: linear-gradient(100deg, var(--camp-1, #C1121F), var(--camp-2, #F0672A));
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.campaign-strip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.campaign-strip__art {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
}
.campaign-strip__body {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 16px 20px;
}
.campaign-strip__badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, .95);
  color: var(--camp-1, #C1121F) !important;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.campaign-strip__text { flex: 1; min-width: 160px; }
.campaign-strip__title {
  color: #fff !important;
  font-family: var(--secondary-font-family);
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.campaign-strip__tagline {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 13px;
  margin: 3px 0 0;
}
.campaign-strip__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: var(--camp-1, #C1121F) !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
}
.campaign-strip__countdown {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cd-mini {
  background: rgba(0, 0, 0, .22);
  color: #fff;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cd-mini b { font-weight: 800; }

/* ---- campaign landing page ---- */
.campaign-hero { position: relative; overflow: hidden; }
.campaign-hero__art { display: block; }
.campaign-hero__art img {
  width: 100%;
  height: clamp(220px, 34vw, 400px);
  object-fit: cover;
  display: block;
}
.campaign-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Dark wash so white text stays readable over any artwork admin uploads. */
  background: linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.28));
}
/* No artwork uploaded - fall back to the campaign's own colours. */
.campaign-hero--plain { background: linear-gradient(110deg, var(--camp-1, #C1121F), var(--camp-2, #F0672A)); }
.campaign-hero--plain .campaign-hero__overlay { position: static; background: none; padding: 40px 0; }
.campaign-hero__inner { max-width: 640px; }
.campaign-badge {
  display: inline-block;
  background: #fff;
  color: var(--camp-1, #C1121F) !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
}
.campaign-title {
  color: #fff !important;
  font-family: var(--secondary-font-family);
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 8px;
}
.campaign-tagline {
  color: rgba(255, 255, 255, .92) !important;
  font-size: 15px;
  margin: 0 0 14px;
}
.campaign-dates {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .85) !important;
  font-size: 12.5px;
  margin: 12px 0 0;
}
.campaign-desc { background: var(--bg-card); padding: 18px 0; }
.campaign-desc p { color: var(--ink-700); margin: 0; font-size: 14.5px; }

/* ---- countdown ---- */
.campaign-countdown__label {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.campaign-countdown__clock { display: flex; align-items: center; gap: 6px; }
.cd-unit {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  min-width: 56px;
  text-align: center;
}
.cd-unit b {
  display: block;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cd-unit span {
  display: block;
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.cd-sep { color: rgba(255, 255, 255, .5); font-size: 18px; font-weight: 700; }

/* Swapped in by scripts.js the moment the clock reaches zero, so a finished
   offer never keeps showing a live-looking timer. */
.campaign-countdown__over { display: none; color: #fff !important; font-size: 13px; font-weight: 700; }
.campaign-countdown.is-over .campaign-countdown__clock,
.campaign-countdown.is-over .campaign-countdown__label { display: none; }
.campaign-countdown.is-over .campaign-countdown__over { display: block; }
.campaign-strip__countdown.is-over .cd-mini { display: none; }
.campaign-strip__countdown.is-over .campaign-countdown__over { display: block; }

@media (max-width: 767px) {
  .campaign-strip__body { padding: 14px 15px; gap: 9px 12px; }
  .campaign-strip__title { font-size: 16.5px; }
  .campaign-strip__tagline { font-size: 12px; }
  .campaign-strip__cta { padding: 8px 13px; font-size: 12.5px; }
  .campaign-strip__text { min-width: 100%; order: -1; }
  .cd-unit { min-width: 48px; padding: 6px 8px; }
  .cd-unit b { font-size: 18px; }
  .campaign-hero__overlay { background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.45)); }
}

/* ==========================================================================
   29. DELIVERY-AREA NOTICE — thin strip above the header
   The shop only ships to Salumbar (enforced in checkout), so the limit is
   stated before a basket is filled rather than at the payment step.
   ========================================================================== */
.delivery-area-bar {
  background: linear-gradient(90deg, var(--theme-color-dark), var(--theme-color));
  color: #fff;
}
.delivery-area-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  line-height: 1.35;
}
.delivery-area-bar i {
  font-size: 13px;
  flex-shrink: 0;
  color: var(--accent-amber);
}
@media (max-width: 480px) {
  .delivery-area-bar__inner { font-size: 11.5px; padding: 5px 10px; gap: 6px; }
  .delivery-area-bar i { font-size: 12px; }
}

/* ==========================================================================
   30. CATEGORY PRE-FOOTER — every category, above the footer
   Lives on every page (included from layouts/frontend.blade.php). Replaces
   the footer's old hardcoded top-ten column, which silently hid the 11th
   category onwards; this one is driven by the table, so a category added in
   admin turns up here on its own.
   ========================================================================== */
/* White, not the page's blue tint: this band sits between the tinted
   pre-footer above and the navy footer below, and on the same tint it read
   as part of the section above rather than as its own block. */
.cat-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-soft);
  padding: 30px 0 32px;
}
.cat-footer__head {
  text-align: center;
  margin-bottom: 16px;
}
.cat-footer__title {
  font-family: var(--secondary-font-family);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-900) !important;
  margin: 0;
}

/* A wrapping list rather than a fixed column count: 35 categories today,
   any number tomorrow, and it stays readable at every width. Centred, so
   the last (partial) row sits under the middle of the block instead of
   trailing off to the left. No max-width - it uses the same container as
   the footer and the rest of the site, so the band lines up with them. */
.cat-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.cat-footer__list li { display: flex; }
.cat-footer__list a {
  display: inline-block;
  /* Chips are the tinted element now that the band itself is white -
     the two swapped so the band reads as its own block. */
  background: var(--bg-section-tint);
  border: 1px solid var(--theme-color-soft);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700) !important;
  text-decoration: none !important;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cat-footer__list a:hover {
  border-color: var(--theme-color);
  background: var(--theme-color);
  color: #fff !important;
}

@media (max-width: 767px) {
  .cat-footer { padding: 22px 0 24px; }
  .cat-footer__title { font-size: 17px; }
  .cat-footer__list { gap: 7px; }
  .cat-footer__list a { padding: 6px 12px; font-size: 12.5px; }
}

/* ==========================================================================
   31. INSTAGRAM + WHATSAPP COMMUNITY CARDS
   Each card is a link out, not an embedded feed: a real Instagram feed needs
   a Graph API token that expires and has to be refreshed, which is a running
   cost for a shop this size. These need nothing and cannot break.
   ========================================================================== */
.social-join { padding: 8px 0 28px; }
.social-join__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.social-join__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  text-decoration: none !important;
  color: #fff !important;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease);
}
.social-join__card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-join__card--insta { background: linear-gradient(120deg, #F58529, #DD2A7B 55%, #8134AF); }
.social-join__card--wa    { background: linear-gradient(120deg, #1EBE5A, #25D366); }
.social-join__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .2);
  border-radius: 50%;
  font-size: 22px;
}
.social-join__body { flex: 1; min-width: 0; }
.social-join__body h3 {
  font-family: var(--secondary-font-family);
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 3px;
}
.social-join__body p {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .9) !important;
  margin: 0;
  line-height: 1.4;
}
.social-join__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .95);
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
}
.social-join__card--insta .social-join__cta { color: #C13584 !important; }
.social-join__card--wa .social-join__cta { color: #128C4A !important; }

@media (max-width: 767px) {
  .social-join__grid { grid-template-columns: 1fr; gap: 10px; }
  .social-join__card { padding: 14px 15px; gap: 11px; }
  .social-join__icon { width: 40px; height: 40px; font-size: 19px; }
  .social-join__body h3 { font-size: 14.5px; }
  .social-join__body p { font-size: 11.5px; }
  .social-join__cta { padding: 7px 12px; font-size: 12px; }
}

/* ============================================================
   32. Collection grid density
   ------------------------------------------------------------
   The category/search grid was inheriting Bootstrap's plain column
   widths, which put three cards across a sidebar layout - noticeably
   larger than the same card in the homepage carousel, and a lot of
   scrolling for a 145-product catalogue.

   Bootstrap's 12-column grid cannot express "five across", so the
   widths are set here instead: four from 992px, five from 1400px.
   The "sidebar" category layout is an off-canvas Filter panel rather
   than a real column, so both variations get the same widths. Mobile
   and tablet are left exactly as they were - two across still reads
   best on a phone.
   ============================================================ */

@media (min-width: 992px) {
  .product-row > .col-lg-4,
  .product-row > .col-lg-3 { flex: 0 0 auto; width: 25%; }
}

@media (min-width: 1400px) {
  .product-row > .col-xxl-4,
  .product-row > .col-xxl-3 { flex: 0 0 auto; width: 20%; }
}






/* ============================================================
   33. Off-screen heading
   ------------------------------------------------------------
   The homepage needs an <h1> - it had none - but the client did
   not want a heading block above the category strip. This keeps
   the heading in the document for search engines and screen
   readers without taking any space. Not display:none, which
   would hide it from assistive technology too.
   ============================================================ */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ============================================================
   34. Pincode gate
   ------------------------------------------------------------
   The shop delivers to one town. Someone arriving from a search
   result would otherwise discover that at checkout, after
   filling a basket. This asks once, on arrival, and remembers.

   It is dismissible on purpose: refusing to show the shelves to
   a visitor who might buy later gains nothing.
   ============================================================ */

.pin-gate {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pin-gate[hidden] { display: none; }

.pin-gate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 18, 30, 0.55);
  backdrop-filter: blur(2px);
}

.pin-gate__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border-radius: 16px;
  padding: 34px 28px 24px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(9, 18, 30, 0.28);
  animation: pinGateIn 0.22s ease-out;
}

@keyframes pinGateIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pin-gate__card { animation: none; }
}

.pin-gate__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-300);
  font-size: 14px;
  cursor: pointer;
}

.pin-gate__close:hover { background: var(--bg-soft); color: var(--ink-700); }

.pin-gate__mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--theme-color-tint);
  color: var(--theme-color);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-gate__title {
  margin: 0 0 6px;
  font-size: 21px;
  font-weight: 800;
  color: var(--ink-900);
}

.pin-gate__sub {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-500);
}

.pin-gate__form {
  display: flex;
  gap: 8px;
}

.pin-gate__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--color-gray-400);
  border-radius: 10px;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-900);
  text-align: center;
}

.pin-gate__input:focus {
  outline: none;
  border-color: var(--theme-color);
  box-shadow: 0 0 0 3px var(--theme-color-tint);
}

.pin-gate__btn {
  flex-shrink: 0;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--theme-color);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.pin-gate__btn:hover { background: var(--theme-color-dark); }
.pin-gate__btn:disabled { opacity: 0.6; cursor: default; }

.pin-gate__msg {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.pin-gate__msg[hidden] { display: none; }

.pin-gate__msg--yes {
  background: var(--accent-green-soft);
  color: var(--accent-green-dark);
}

/* Not an error colour: they have done nothing wrong, the shop simply does
   not reach them yet. */
.pin-gate__msg--no {
  background: var(--accent-amber-soft);
  color: #8A5A08;
}

.pin-gate__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px;
  color: var(--ink-500);
}

.pin-gate__pin {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.pin-gate__skip {
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: var(--ink-500);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

.pin-gate__skip:hover { color: var(--ink-700); }

.delivery-area-bar__change {
  margin-left: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.9;
}

.delivery-area-bar__change:hover { opacity: 1; }

@media (max-width: 480px) {
  .pin-gate__card { padding: 30px 20px 20px; }
  .pin-gate__title { font-size: 19px; }
  .pin-gate__btn { padding: 0 16px; }
}

/* ============================================================
   35. Loyalty points
   ------------------------------------------------------------
   The shop has always been able to set earning rules in admin,
   but customers had no way to see what those rules had earned
   them. This is that view: what you have, what is on its way,
   and how it was worked out - a shopper should never have to
   guess at a points balance.

   Green is the shop's "money in" colour, already used for
   savings and delivery; points reuse it rather than
   introducing a fifth accent.
   ============================================================ */

.loyalty-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 20px;
}

.loyalty-card__top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--accent-green-soft) 0%, var(--bg-card) 70%);
  border-bottom: 1px solid var(--border-soft);
}

.loyalty-card__badge {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--accent-green);
  color: #fff;
  font-size: 22px;
}

.loyalty-card__figures { flex: 1 1 auto; min-width: 0; }

.loyalty-card__balance {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.loyalty-card__balance span { font-size: 15px; font-weight: 700; color: var(--ink-500); margin-left: 4px; }

.loyalty-card__sub { font-size: 13px; color: var(--ink-500); margin: 3px 0 0; }

.loyalty-card__pending {
  flex: 0 0 auto;
  text-align: right;
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.4;
}

.loyalty-card__pending strong {
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: var(--theme-color);
  font-variant-numeric: tabular-nums;
}

.loyalty-card__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 22px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--accent-amber-soft);
  color: var(--ink-700);
  border-bottom: 1px solid var(--border-soft);
}

.loyalty-card__note i { color: var(--accent-amber); margin-top: 2px; }

.loyalty-card__rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 14px 22px;
  font-size: 13px;
  color: var(--ink-500);
}

.loyalty-card__rules i { color: var(--accent-green); margin-right: 5px; }
.loyalty-card__rules b { color: var(--ink-900); font-weight: 700; }

.loyalty-history { border-top: 1px solid var(--border-soft); }

.loyalty-history__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 22px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  text-align: left;
}

.loyalty-history__head:hover { background: var(--bg-soft); }
.loyalty-history__head:focus-visible { outline: 2px solid var(--theme-color); outline-offset: -2px; }
.loyalty-history__head i { transition: transform var(--t-base) var(--ease); color: var(--ink-300); }
.loyalty-history__head[aria-expanded="true"] i { transform: rotate(180deg); }

.loyalty-history__scroll { overflow-x: auto; }

.loyalty-history table { width: 100%; border-collapse: collapse; font-size: 13px; }

.loyalty-history th,
.loyalty-history td {
  padding: 9px 22px;
  text-align: left;
  white-space: nowrap;
  border-top: 1px solid var(--border-soft);
}

.loyalty-history th { font-weight: 700; color: var(--ink-500); background: var(--bg-soft); }
.loyalty-history td { color: var(--ink-700); }
.loyalty-history td:last-child,
.loyalty-history th:last-child { text-align: right; }
.loyalty-history .pts { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-900); }

.loyalty-state {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.loyalty-state--earned  { background: var(--accent-green-soft); color: var(--accent-green-dark); }
.loyalty-state--pending { background: var(--theme-color-tint); color: var(--theme-color); }
.loyalty-state--expired { background: var(--color-gray-400); color: var(--ink-500); }

@media (max-width: 620px) {
  .loyalty-card__top { flex-wrap: wrap; gap: 12px; padding: 18px; }
  .loyalty-card__badge { width: 44px; height: 44px; font-size: 19px; }
  .loyalty-card__balance { font-size: 26px; }
  .loyalty-card__pending { text-align: left; flex-basis: 100%; }
  .loyalty-card__pending strong { display: inline; font-size: 15px; margin-right: 4px; }
  .loyalty-card__rules { flex-direction: column; gap: 6px; padding: 13px 18px; }
  .loyalty-card__note,
  .loyalty-history__head { padding-left: 18px; padding-right: 18px; }
  .loyalty-history th,
  .loyalty-history td { padding-left: 18px; padding-right: 18px; }
}