/* ============================================================
   ShopEase — Main Design System
   Light theme, premium personal-care e-commerce
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');

/* ── CSS Custom Properties (Design Tokens) ─────────────────── */
:root {
  /* Brand Colors */
  --color-primary: #16a34a;
  --color-primary-dark: #15803d;
  --color-primary-light: #86efac;
  --color-primary-50: #f0fdf4;
  --color-accent: #65a30d;
  --color-accent-dark: #4d7c0f;

  /* Semantic colors */
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-info: #0284c7;
  --color-info-bg: #f0f9ff;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  /* Text */
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-muted: var(--color-gray-400);
  --text-on-primary: #FFFFFF;

  /* Backgrounds */
  --bg-body: #FAFAFA;
  --bg-surface: #FFFFFF;
  --bg-muted: var(--color-gray-50);

  /* Borders */
  --border-color: var(--color-gray-200);
  --border-radius-sm: 6px;
  --border-radius: 10px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --border-radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-primary: 0 4px 20px rgba(108, 92, 231, 0.25);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Transitions */
  --transition-fast: all 0.15s ease;
  --transition: all 0.25s ease;
  --transition-slow: all 0.40s ease;

  /* Z-index
     --z-sticky is the header band: .navbar (search bar) and .category-nav
     (category bar) both sit on it. They are siblings and both create a
     stacking context, so at equal z-index the later one in the markup wins -
     and .category-nav is later. Anything positioned inside .navbar is
     therefore capped at the navbar's own level and cannot paint over the
     category bar, which is what the live-search dropdown needs to do. The
     navbar gets its own level one step above, so a child's z-index competes
     with the category bar directly instead of being trapped. */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-sticky-top: 1021;
  --z-modal: 1050;
  --z-toast: 1080;
}

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

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

body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

/* ── Typography ────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
}

h3 {
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
}

h4 {
  font-size: 1.15rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

.text-display {
  font-family: var(--font-serif);
}

/* ── Layout Utilities ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.product-layout-grid {
  display: grid;
  /* minmax(0, 1fr) and not a bare 1fr: a 1fr track's automatic minimum is its
     min-content, and the thumbnail strip (a horizontal scroller) reports the
     summed width of every thumb as its min-content. That inflated this track to
     ~507px on a 390px phone, so the gallery overflowed the page sideways and the
     image stage got clipped. Capping the minimum at 0 lets the strip scroll. */
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.product-gallery-container {
  min-width: 0;
}

.gallery-thumbs-strip {
  min-width: 0;
  max-width: 100%;
}

/* Listing page header — was inline styles on the shop view, moved here so the
   mobile pass below can actually compact it (inline styles beat media queries). */
.shop-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.shop-page-header .section-title {
  margin-bottom: 0.25rem;
}

.shop-page-header__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
}

.shop-page-header__title p {
  margin: 0;
}

.shop-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.shop-sidebar {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
}

/* Category educational summary — collapsed by default.
   The text used to sit in an always-open bordered panel between the filters and
   the grid, which read as a notice. As <details> it stays fully server-rendered
   (so crawlers and answer engines still index every word) while taking one line
   above the fold. Moved out of inline styles so the copy can be styled at all. */
.category-editorial {
  background: #fbfbf7;
  border: 1px solid rgba(15, 46, 26, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

.category-editorial > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  list-style: none;
  color: #374151;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Safari/Chrome draw their own disclosure triangle; the chevron replaces it. */
.category-editorial > summary::-webkit-details-marker { display: none; }
.category-editorial > summary::marker { content: ''; }

.category-editorial-summary { flex: 1; }

.category-editorial-chevron {
  flex: none;
  font-size: 0.85rem;
  color: #15803d;
  transition: transform 0.2s ease;
}

.category-editorial[open] > summary {
  border-bottom: 1px solid rgba(15, 46, 26, 0.07);
}

.category-editorial[open] .category-editorial-chevron { transform: rotate(180deg); }

/* Keyboard users get a visible focus ring; the summary is the interactive part. */
.category-editorial > summary:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: -2px;
}

.category-editorial-body {
  padding: 1rem 1.25rem 1.15rem;
}

.category-editorial-body p {
  margin: 0;
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.65;
  /* No max-width cap. At 950px the paragraph stopped ~250px short of the
     summary sentence above it on a laptop, so the expanded text read as a
     narrower block that did not line up with the collapsed sentence. It now
     fills the same content width as the rest of the card. */
  text-align: justify;
  text-justify: inter-word;
}

/* Category FAQ accordion.
   This block used to open its OWN .container inside the listing's .container.
   The two paddings stacked, so the card sat 32px narrower than the grid above
   it (16px on a phone) and read as a centred, inset card. It is a plain sibling
   of .shop-layout-grid now, so it lines up with everything else on the page. */
.cat-faq-wrap { padding-bottom: 3.5rem; }

.cat-faq-card {
  background: #fff;
  border: 1px solid rgba(15, 46, 26, 0.09);
  border-radius: 16px;
  padding: 2rem;
}

.cat-faq-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.cat-faq-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat-faq-head-icon i {
  color: var(--color-primary);
  font-size: 1rem;
}

.cat-faq-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.cat-faq-item { border-bottom: 1px solid var(--border-color); }
.cat-faq-item:first-child { border-top: 1px solid var(--border-color); }

.cat-faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.cat-faq-q i {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--color-primary);
  transition: transform 0.25s;
}

.cat-faq-answer {
  padding-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Match the surrounding cards on a phone: the flat 2rem was noticeably more
   inset than the editorial banner and the product grid. */
@media (max-width: 767px) {
  .cat-faq-wrap { padding-bottom: 2.5rem; }
  .cat-faq-card { padding: 1.25rem; border-radius: 14px; }
  .cat-faq-head { gap: 0.6rem; margin-bottom: 1.1rem; }
}

/* On a phone the summary sentence wraps to four lines, which would make the
   collapsed state almost as tall as the panel it replaced. Clamp it to two
   lines with an ellipsis -- the full sentence, and the whole intro, are still
   in the DOM and still indexed; only the collapsed preview is trimmed. */
@media (max-width: 575px) {
  .category-editorial > summary {
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
  }
  .category-editorial-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .category-editorial-body { padding: 0.85rem 1rem 1rem; }
  /* Justify needs a long measure. At ~300px and 7-8 lines it produces visible
     rivers of whitespace between words, which is worse than a ragged edge. */
  .category-editorial-body p { text-align: left; }
}

/* On phones every pixel above the grid is a product row, so the listing
   header and filter panel collapse down. Placed after the base rules above
   on purpose — these have to win. */
@media (max-width: 639px) {
  .shop-listing {
    padding-top: 0.75rem;
  }
  .shop-page-header {
    margin-bottom: 0.5rem;
    gap: 0.25rem;
  }
  .shop-page-header .section-title {
    font-size: 1.25rem;
    margin-bottom: 0.1rem;
  }
  .shop-layout-grid {
    gap: 0.75rem;
  }
  .shop-sidebar {
    padding: 0.6rem 0.7rem;
  }
  .shop-sidebar h3 {
    font-size: 0.9rem;
  }
  .subcat-hub-grid,
  .subcat-peers {
    margin-bottom: 0.75rem;
  }
}

.cart-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.checkout-layout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

/* ── REVIEWS (PDP) ──────────────────────────────────────────────
   Written as classes rather than inline styles: the PDP view used to carry this
   whole block inline, and inline styles win over media queries, so nothing here
   could be compacted on a phone. */
.reviews-section {
  margin-top: 3rem;
  scroll-margin-top: 100px;
}

.reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.reviews-head .section-title {
  font-size: 1.4rem;
}

.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  background: #fbfbf7;
  border: 1px solid rgba(15, 46, 26, 0.08);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  margin-bottom: 1.5rem;
}

.reviews-score {
  text-align: center;
  min-width: 92px;
}

.reviews-score-num {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

.reviews-score-stars {
  color: #f59e0b;
  font-size: 1.05rem;
  margin: 0.3rem 0 0.15rem;
}

.reviews-score-count {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.reviews-bars {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
}

.reviews-bar-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
}

.reviews-bar-star {
  width: 12px;
  text-align: right;
  font-weight: 600;
  color: var(--text-muted);
}

.reviews-bar-row > i {
  color: #f59e0b;
  font-size: 0.68rem;
}

.reviews-bar-track {
  flex: 1;
  height: 7px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.reviews-bar-fill {
  height: 100%;
  background: #f59e0b;
  border-radius: 4px;
}

.reviews-bar-count {
  color: var(--text-muted);
  width: 26px;
}

/* Review cards in the list. The first batch and every "load more" batch render
   through the same partial, so one set of rules covers them all. */
.review-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.review-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
}

.review-card__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.review-card__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.review-card__customer {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.review-verified {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.review-card__stars {
  color: #f59e0b;
  font-size: 0.9rem;
  margin-top: 2px;
}

.review-card__date {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.review-card__title {
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text-primary);
}

.review-card__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.review-card__foot {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.review-card__helpful-label {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.review-helpful-btn {
  border: 1px solid var(--border-color);
  background: none;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}

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

.review-loadmore-wrap {
  text-align: center;
  margin-bottom: 1.5rem;
}

.review-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: #fff;
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.55rem 1.4rem;
  border-radius: 30px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

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

.review-loadmore-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.review-loadmore-status {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.review-loadmore-status:empty {
  margin: 0;
}

/* Write a review card */
.review-form-card {
  background: #fff;
  border: 1px solid rgba(15, 46, 26, 0.1);
  border-radius: 16px;
  padding: 1.35rem 1.5rem 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 46, 26, 0.04);
  scroll-margin-top: 100px;
  /* Sits between the heading and the review list now, so it needs space below. */
  margin-bottom: 1.5rem;
}

.review-form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  margin-bottom: 1rem;
}

.review-form-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.review-form-title i {
  color: var(--color-primary);
}

.review-form-sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.review-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.review-hint {
  font-weight: 400;
  color: var(--text-muted);
}

.review-rating {
  margin-bottom: 0.9rem;
}

.review-rating-control {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.review-stars {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.review-stars i {
  padding: 2px;
  font-style: normal;
  transition: color 0.15s, transform 0.15s;
}

.review-stars i:hover {
  transform: scale(1.14);
}

.review-rating-caption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s;
}

.review-rating-caption.is-set {
  color: #b45309;
}

.review-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.review-field {
  margin-bottom: 0.75rem;
}

/* Written as .form-control.review-input, not .review-input: this sheet has a
   global `.form-control` rule further down (and so does Bootstrap), and with
   one class each the later one would win and reset the type/padding. */
.form-control.review-input {
  border-radius: 10px;
  font-size: 0.88rem;
  padding: 0.48rem 0.7rem;
  border: 1px solid var(--border-color);
  background: #fcfdfb;
}

.form-control.review-input:focus {
  background: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.12);
}

.review-textarea {
  min-height: 84px;
  resize: vertical;
}

/* Live character count for the review body. Sits under the textarea and
   right-aligns, so it reads as a counter rather than as an error - it is only
   red while the text is still short of the 25 character floor. */
.review-count {
  margin: 0.3rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: right;
  transition: color 0.15s ease;
}
.review-count.is-short {
  color: #b45309;
  font-weight: 600;
}
.review-count.is-enough {
  color: #15803d;
}

.review-msg {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  margin-bottom: 0.75rem;
}

.review-form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Same reason as .form-control.review-input: the sheet's global `.btn` rule
   appears later in the file and would otherwise re-set these. */
.btn.review-submit {
  padding: 0.48rem 1.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 10px;
}

/* Phones: tighter card, single-column fields, full-width button, and 1rem
   inputs so iOS Safari does not zoom the page on focus. */
@media (max-width: 767px) {
  .reviews-section {
    margin-top: 2rem;
  }
  .reviews-head {
    margin-bottom: 0.85rem;
  }
  .reviews-head .section-title {
    font-size: 1.1rem;
  }
  .reviews-summary {
    padding: 0.9rem 1rem;
    gap: 0.9rem 1.25rem;
    margin-bottom: 1.1rem;
  }
  .reviews-score {
    min-width: 78px;
  }
  .reviews-score-num {
    font-size: 2.1rem;
  }
  .reviews-score-stars {
    font-size: 0.95rem;
  }
  .reviews-bars {
    min-width: 140px;
  }
  .review-list {
    gap: 0.7rem;
    margin-bottom: 1.1rem;
  }
  .review-card {
    padding: 0.85rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    margin-bottom: 0.65rem;
  }
  .review-card__top {
    margin-bottom: 0.35rem;
    gap: 0.35rem;
    align-items: flex-start;
  }
  .review-card__customer {
    font-size: 0.86rem;
    font-weight: 700;
  }
  .review-verified {
    font-size: 0.64rem;
    padding: 2px 7px;
  }
  .review-card__stars {
    font-size: 0.8rem;
    margin-top: 1px;
    color: #f59e0b;
  }
  .review-card__title {
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
  }
  .review-card__text {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
  }
  .review-card__date {
    font-size: 0.72rem;
    color: var(--text-muted);
  }
  .review-card__foot {
    margin-top: 0.5rem;
    padding-top: 0.45rem;
    border-top: 1px solid #f1f5f9;
  }
  .review-helpful-btn {
    font-size: 0.72rem;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .review-loadmore-btn {
    width: 100%;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
  }
  .review-loadmore-wrap {
    margin-bottom: 1.25rem;
  }
  .review-form-card {
    padding: 1rem;
    border-radius: 14px;
    margin-bottom: 1.1rem;
  }
  .review-form-head {
    margin-bottom: 0.8rem;
  }
  .review-form-title {
    font-size: 0.98rem;
  }
  .review-fields {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .review-stars {
    font-size: 1.75rem;
  }
  .form-control.review-input {
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
  }
  .review-textarea {
    min-height: 96px;
  }
  .review-form-actions {
    gap: 0.5rem;
  }
  .btn.review-submit {
    width: 100%;
    padding: 0.6rem 1rem;
  }
}

@media (min-width: 900px) {
  .product-layout-grid {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: start;
    gap: 2.25rem;
  }
}

.shop-listing {
  max-width: 1440px !important;
}

@media (min-width: 992px) {
  .shop-layout-grid {
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
  }

  .shop-sidebar {
    position: sticky;
    top: 80px;
    height: fit-content;
  }

  .cart-layout-grid {
    grid-template-columns: 1fr 340px;
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .checkout-layout-grid {
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
  }
}

@media (min-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

.section {
  padding: 3rem 0;
}

.section-lg {
  padding: 5rem 0;
}

/* ── NAVBAR ────────────────────────────────────────────────── */
.navbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  /* One step above .category-nav. See --z-sticky-top in :root. The live
     search dropdown is a child of this bar; without the extra step its own
     z-index is capped by this element and the category bar paints over the
     top of the results. */
  z-index: var(--z-sticky-top);
  box-shadow: var(--shadow-sm);
}

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 68px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.navbar-brand img {
  height: 38px;
  width: auto;
}

.navbar-brand-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-search {
  flex: 1;
  max-width: 520px;
  position: relative;
  margin: 0 auto;
}

.navbar-search form {
  position: relative;
  width: 100%;
}

.navbar-search input {
  width: 100%;
  padding: 0.65rem 2.6rem 0.65rem 2.75rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-full);
  font-size: 0.92rem;
  background: var(--bg-muted);
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}

.navbar-search input:focus {
  outline: none;
  border-color: #166534;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.15);
}

.navbar-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 0.95rem;
  z-index: 2;
}

/* Spinner in search input */
.navbar-search-spinner {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 3;
}

.navbar-search-spinner .search-spinner-circle {
  width: 18px;
  height: 18px;
  border: 2px solid #e5e7eb;
  border-top-color: #166534;
  border-radius: 50%;
  animation: searchSpin 0.6s linear infinite;
}

@keyframes searchSpin {
  to { transform: rotate(360deg); }
}

/* Live Search Dropdown */
.live-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  box-shadow: 0 16px 40px -8px rgba(15, 46, 26, 0.16), 0 4px 16px rgba(0, 0, 0, 0.06);
  z-index: 1050;
  overflow: hidden;
  max-height: 490px;
  display: flex;
  flex-direction: column;
  animation: searchDropIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: top center;
}

@keyframes searchDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Live search on phones: the input is only a slice of the top bar (burger and
   brand sit to its left), so a panel anchored to it reads as a narrow strip.
   Pin the panel to the viewport instead — full width, sitting just under the
   search row. `top` is written by JS from the input's live position, because
   the ribbon + navbar height above it is not a fixed number. */
@media (max-width: 767px) {
  .live-search-dropdown {
    position: fixed;
    left: 8px;
    right: 8px;
    top: 0;
    border-radius: 14px;
    max-height: calc(100vh - 165px);
    max-height: min(490px, calc(100dvh - 165px));
  }
}

.live-search-header {
  padding: 10px 16px 8px;
  background: #fdfdfd;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.live-search-header .count-badge {
  background: #ecfdf5;
  color: #166534;
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.live-search-results {
  overflow-y: auto;
  max-height: 380px;
  overscroll-behavior: contain;
}

/* Result item */
.live-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none !important;
  color: inherit !important;
  border-bottom: 1px solid #f8fafc;
  transition: all 0.15s ease;
  position: relative;
  cursor: pointer;
}

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

.live-search-item:hover,
.live-search-item.is-focused {
  background: #f0fdf4;
}

.live-search-item.is-focused {
  border-left: 3px solid #166534;
  padding-left: 13px;
}

.live-search-thumb {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
  transition: filter 0.2s ease;
}

.live-search-thumb.is-out-of-stock {
  filter: grayscale(85%) opacity(0.75);
}

.live-search-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-search-cat {
  font-size: 0.7rem;
  color: #166534;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-highlight {
  color: #166534;
  background: #dcfce7;
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

.live-search-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.live-search-stock-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.3;
}

.live-search-stock-pill.pill-out {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.live-search-stock-pill.pill-limited {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.live-search-pricing {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.live-search-price {
  font-size: 0.92rem;
  font-weight: 700;
  color: #166534;
  line-height: 1.2;
}

.live-search-mrp-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.live-search-mrp {
  font-size: 0.76rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.live-search-discount {
  font-size: 0.68rem;
  font-weight: 700;
  color: #15803d;
  background: #dcfce7;
  padding: 0px 4px;
  border-radius: 3px;
}

.live-search-footer {
  padding: 11px 16px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  text-align: center;
}

.live-search-view-all {
  color: #166534 !important;
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s ease;
}

.live-search-view-all:hover {
  gap: 9px;
  color: #14532d !important;
}

.live-search-empty {
  padding: 28px 16px;
  text-align: center;
  color: #6b7280;
}

.live-search-empty-icon {
  font-size: 1.6rem;
  color: #9ca3af;
  display: block;
  margin-bottom: 6px;
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

.navbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius);
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
}

.navbar-icon-btn:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.navbar-icon-btn .icon-3d {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.navbar-icon-btn:hover .icon-3d {
  transform: scale(1.15) rotate(-3deg);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.nav-account-dropdown .dropdown-toggle::after {
  display: none !important;
}

.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-primary);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.nav-location-selector,
.nav-account-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
}

.nav-location-selector:hover,
.nav-account-btn:hover {
  border-color: var(--border-color);
}

.nav-loc-icon {
  font-size: 1.2rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
}

.nav-loc-text,
.nav-account-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-loc-line1,
.nav-account-line1 {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: 0.15rem;
}

.nav-loc-line2,
.nav-account-line2 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* Original mobile menu button overrides */
.hide-mobile {
  display: inline;
}

@media (max-width: 768px) {
  html, body {
    overflow-x: clip;
    width: 100%;
    max-width: 100vw;
  }

  /* ── Single-row compact navbar (Meesho/Amazon pattern) ── */
  /* Scoped to #main-navbar: Bootstrap 5's `.navbar > .container` rule
     (specificity 0,2,0) sets flex-wrap: inherit and justify-content:
     space-between on every .container child of a .navbar, and inherit picks up
     `wrap` from .navbar itself. That outranks this plain class selector, so on
     phones the navbar quietly wrapped and the brand floated across the search
     bar. An ID beats it outright. */
  #main-navbar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 1045 !important;
    background: #ffffff !important;
  }

  #main-navbar .navbar-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    height: 58px;
    padding: 0 0.75rem;
    gap: 0.5rem;
    align-items: center;
  }

  .navbar-brand {
    flex-shrink: 0;
    order: 1;
  }

  /* Logo smaller on mobile to save row space */
  .navbar-brand img,
  .navbar-brand > img,
  .navbar-logo-img {
    height: 36px !important;
    max-height: 36px !important;
  }

  /* Search bar — inline, and now the full remaining width since .navbar-actions
     is hidden above. */
  .navbar-search {
    order: 2;
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    min-width: 0;
  }

  .navbar-search input {
    padding: 0.5rem 0.5rem 0.5rem 2.2rem;
    font-size: 0.84rem;
    height: 38px;
  }

  .navbar-search-icon {
    left: 0.65rem;
    font-size: 0.85rem;
  }

  /* Custom placeholder hides on mobile (too cramped) */
  #custom-search-placeholder {
    display: none !important;
  }

  /* The account and bag icons are handled by the fixed bottom nav, which
     appears at 767px. They are left in place here for the 768px band, where
     the bottom nav is not yet showing, and hidden at 767px in the rule
     below. Keeping the two breakpoints in step is what stops there being a
     width at which cart and account are unreachable. */

  .navbar-icon-btn {
    width: 36px;
    height: 36px;
  }

  .nav-location-selector,
  .nav-account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    transition: var(--transition);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
  }

  .nav-account-btn::after {
    display: none !important;
  }

  .nav-loc-text,
  .nav-account-text,
  .nav-account-line1,
  .nav-account-line2,
  .nav-loc-line1,
  .nav-loc-line2 {
    display: none !important;
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Body padding-bottom for bottom nav */
  body {
    padding-bottom: 64px;
  }
}

/* The burger only exists below 768px; the bar is the menu above it. */
.navbar-burger {
  display: none;
}

/* Category nav bar.
   The horizontal overflow that used to live here is gone. It clipped the
   sub-category panels, because an absolutely-positioned child of an
   overflow:auto box is cut off at the box edge. The bar only renders at
   768px and up now (below that the drawer owns the tree) and is narrow
   enough there to fit without scrolling. */
.category-nav {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: var(--z-sticky);
}

.category-nav-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  height: 48px;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .category-nav-inner {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 0.5rem;
  }
  .category-nav-inner::-webkit-scrollbar {
    display: none;
  }
}

.cat-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.8rem;
  height: 48px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 3px solid transparent;
  transition: var(--transition);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

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

.cat-nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

/* ── SECTION SCROLL ANCHORS (TOP MENU BAR SMOOTH SCROLL) ─────── */
#best-sellers,
#curated-kits,
#combo-section,
#offers,
#about-us,
#our-story-section {
  scroll-margin-top: 75px;
}
@media (max-width: 768px) {
  #best-sellers,
  #curated-kits,
  #combo-section,
  #offers,
  #about-us,
  #our-story-section {
    scroll-margin-top: 60px;
  }
}

/* Inside an item the marker is drawn on .cat-nav-item::after so it spans the
   whole item, so the link's own border stays out of it. */
.cat-nav-item .cat-nav-link {
  border-bottom-color: transparent !important;
}

/* ── NESTED CATEGORY PANELS (768px and up) ────────────────────────
   Three of the four top-level categories have children, so those become
   items with a panel; Combo Products has none and stays a plain link. The
   parent label remains a real link to its rollup page; the panel opens on
   hover or focus, so opening it never swallows the parent click. */
.cat-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
}

/* The active marker spans the whole item so category labels underline fully. */
.cat-nav-item::after {
  content: '';
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  z-index: 2;
}

.cat-nav-item.is-active::after,
.cat-nav-item.is-open::after {
  opacity: 1;
}

.cat-nav-item.is-active .cat-nav-parent,
.cat-nav-item.is-open .cat-nav-parent {
  color: var(--color-primary);
  font-weight: 600;
}

.cat-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 470px;
  padding: 0.85rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: var(--z-dropdown);
}

.cat-nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Set by the controller when a panel would run past the right edge of the
   window, which happens once the container is narrow enough that the last
   panel-capable item sits less than 470px from the edge. */
.cat-nav-panel.is-end {
  left: auto;
  right: 0;
}

.cat-nav-panel-title {
  margin: 0 0 0.5rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cat-nav-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.cat-nav-sub {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--border-radius);
  text-decoration: none;
  transition: var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.cat-nav-sub:hover,
.cat-nav-sub:focus-visible {
  background: var(--bg-muted);
  transform: translateX(2px);
}

.cat-nav-sub.is-current {
  background: var(--bg-muted);
}

.cat-nav-sub-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--border-radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.95rem;
}

.cat-nav-sub-name {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.cat-nav-panel-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.65rem 0.6rem 0.15rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
}

.cat-nav-panel-foot:hover {
  color: var(--color-primary-dark);
}

.cat-nav-panel-foot i {
  margin-left: auto;
  transition: transform var(--transition);
}

.cat-nav-panel-foot:hover i {
  transform: translateX(3px);
}

/* Below 1200px the eight labels no longer fit the container. The rhythm
   tightens rather than reintroducing a scrollbar, because a scrollbar
   would clip the panels again. Measured: at 768px the labels occupy 785px of a
   785px container, so this tier is tuned to the narrowest desktop width, not
   guessed at. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .cat-nav-link {
    padding: 0 0.55rem;
    font-size: 0.8rem;
  }
}

/* 768px to 991px, where the container is 720-960px and even the tier above
   overflows. Labels tighten again. Measured at 768px, the narrowest desktop
   width: 731px of labels in a 753px container, so about 22px of slack rather
   than a guess. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cat-nav-link {
    padding: 0 0.15rem;
    font-size: 0.74rem;
    letter-spacing: -0.01em;
  }
}

/* ── CUSTOM FORMULATION FLASK ICON (Bootstrap Icons polyfill) ─ */
.bi-flask,
i.bi-flask {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31L4.36 19.4A2 2 0 0 0 6.06 22h11.88a2 2 0 0 0 1.7-2.6L14 9.31V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 0 0-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v7.31L4.36 19.4A2 2 0 0 0 6.06 22h11.88a2 2 0 0 0 1.7-2.6L14 9.31V2'/%3E%3Cpath d='M8.5 2h7'/%3E%3Cpath d='M14 9.3a6.5 6.5 0 0 0-4 0'/%3E%3Cpath d='M5.52 16h12.96'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 2px solid transparent;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}

.btn-outline-primary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-outline-primary:hover:not(:disabled) {
  background: var(--color-primary);
  color: white;
  transform: translateY(-1px);
}

.btn-success {
  background: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
  background: #00a880;
  color: white;
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--color-danger);
  color: white;
  border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
  background: #c0392b;
  color: white;
}

.btn-light {
  background: var(--color-gray-100);
  color: var(--text-primary);
  border-color: var(--color-gray-200);
}

.btn-light:hover:not(:disabled) {
  background: var(--color-gray-200);
  color: var(--text-primary);
}

.btn-sm {
  padding: 0.38rem 0.9rem;
  font-size: 0.82rem;
  border-radius: var(--border-radius-sm);
}

.btn-lg {
  padding: 0.8rem 2rem;
  font-size: 1rem;
  border-radius: var(--border-radius-lg);
}

.btn-full {
  width: 100%;
}

/* ── BUTTON UNIQUE CLICK ANIMATION ──────────────────────────── */
@keyframes slickPop {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes slickPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.6);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(108, 92, 231, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
  }
}

.btn-animate-click {
  animation: slickPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), slickPulse 0.6s ease-out;
}

/* ── PRODUCT CARD ───────────────────────────────────────────── */
/* ── PRODUCT GRID — 5 per row on desktop, 3 on tablet, 2 on mobile ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

@media (min-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.65rem;
  }
}

@media (min-width: 1200px) {
  .product-grid {
    gap: 0.75rem;
  }
}

.product-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 0.35rem 0.45rem 0.45rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: rgba(22, 101, 52, 0.25);
}

.product-card.out-of-stock {
  opacity: 0.75;
}

.product-card.out-of-stock:hover {
  transform: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

.product-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 9px;
  background: #f4f4f1;
  display: block;
  width: 100%;
  isolation: isolate;
  flex-shrink: 0;
}

.product-image-wrap img,
.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-image-wrap .secondary-img,
.product-card-img.secondary-img,
.compact-img-wrap .secondary-img,
.na-media .secondary-img,
.so-media .secondary-img,
.bs-media .secondary-img,
.combo-media .secondary-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.05);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

/* Hover swap when secondary image exists */
.product-card:hover .has-secondary-img .primary-img,
.compact-card:hover .has-secondary-img .primary-img,
.na-card:hover .has-secondary-img .primary-img,
.so-card:hover .has-secondary-img .primary-img,
.bs-card:hover .has-secondary-img .primary-img,
.combo-card:hover .has-secondary-img .primary-img {
  opacity: 0;
  transform: scale(0.96);
}

.product-card:hover .has-secondary-img .secondary-img,
.compact-card:hover .has-secondary-img .secondary-img,
.na-card:hover .has-secondary-img .secondary-img,
.so-card:hover .has-secondary-img .secondary-img,
.bs-card:hover .has-secondary-img .secondary-img,
.combo-card:hover .has-secondary-img .secondary-img {
  opacity: 1;
  transform: scale(1);
}

/* Fallback subtle scale when no secondary image */
.product-card:hover .product-image-wrap:not(.has-secondary-img) img,
.compact-card:hover .compact-img-wrap:not(.has-secondary-img) img,
.na-card:hover .na-media:not(.has-secondary-img) img,
.so-card:hover .so-media:not(.has-secondary-img) img,
.bs-card:hover .bs-media:not(.has-secondary-img) img,
.combo-card:hover .combo-media:not(.has-secondary-img) img {
  transform: scale(1.05);
}

.product-badge {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  z-index: 2;
}

.badge-discount {
  background: #dc2626;
  color: white;
}

.badge-oos {
  background: #1f2937;
  color: white;
}

.badge-new {
  background: #166534;
  color: white;
}

.product-body {
  padding: 0.25rem 0.1rem 0.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.product-category-tag {
  align-self: flex-start;
  max-width: 100%;
  margin: 0.2rem 0 0.05rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: #eaf8ee;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e7038;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.product-urgency-badge {
  display: none !important;
}

.product-name {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
  min-height: 1.25em !important;
  max-height: 1.25em !important;
  width: 100% !important;
  transition: color 0.15s ease;
}

.product-name:hover {
  color: #166534;
}

.product-pricing {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: auto 0 0.55rem !important;
  padding-top: 0.15rem;
  line-height: 1.15;
}

.price-offer {
  font-size: 0.88rem;
  font-weight: 800;
  color: #166534;
}

.price-mrp {
  font-size: 0.68rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
}

.price-off-badge {
  font-size: 0.62rem;
  font-weight: 700;
  color: #dc2626;
  background: #fee2e2;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
}

/* Compact star row */
.vo-rating { display: none !important; }

.product-actions {
  padding: 0;
  margin-top: 0;
  width: 100%;
}

.btn-add-to-cart {
  width: 100%;
  margin: 0;
  padding: 0.15rem 0.4rem;
  border: 1.5px solid #17522d;
  border-radius: 50px;
  background: #ffffff;
  color: #17522d;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 28px;
  height: 28px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn-add-to-cart:hover:not(:disabled) {
  background: #17522d;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(23, 82, 45, 0.2);
  transform: none;
}

.btn-add-to-cart:disabled,
.btn-add-to-cart.disabled {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #94a3b8 !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Wishlist button inside product-card */
.product-card .toggle-wishlist {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  font-size: 0.72rem;
  padding: 0;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.product-card .toggle-wishlist:hover {
  background: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.product-card .toggle-wishlist i {
  font-size: 0.72rem;
  line-height: 1;
}

.product-card .toggle-wishlist.wishlisted i,
.product-card .toggle-wishlist i.bi-heart-fill {
  color: #dc2626;
}

/* ── Product Card Quick View Button ──────────────────────────────────── */
.product-media-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  width: 100%;
}

.product-quick-view-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 10px);
  opacity: 0;
  visibility: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(22, 101, 52, 0.22);
  color: #14532d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.38rem 0.95rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 4;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
  text-decoration: none;
  pointer-events: none;
}

.product-quick-view-btn i {
  font-size: 0.8rem;
  line-height: 1;
}

.product-card:hover .product-quick-view-btn,
.product-media-wrap:hover .product-quick-view-btn {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.product-quick-view-btn:hover {
  background: #14532d !important;
  color: #ffffff !important;
  border-color: #14532d !important;
  box-shadow: 0 6px 18px rgba(20, 83, 45, 0.3) !important;
  transform: translate(-50%, -2px) scale(1.02) !important;
}

.product-quick-view-btn:active {
  transform: translate(-50%, 0) scale(0.98) !important;
}

@media (max-width: 768px) {
  .product-quick-view-btn {
    display: none !important;
  }
}

@media (max-width: 639px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
  .product-card {
    padding: 0.35rem 0.4rem 0.55rem;
    border-radius: 10px;
  }
  .product-image-wrap {
    border-radius: 8px;
  }
  .product-body .product-urgency-badge,
  .product-urgency-badge {
    display: none !important;
  }
  .product-name {
    font-size: 0.72rem;
    line-height: 1.25;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    min-height: 1.25em !important;
    max-height: 1.25em !important;
    width: 100% !important;
  }
  .product-pricing {
    margin: auto 0 0.55rem !important;
    padding-top: 0.15rem;
    line-height: 1.15;
  }
  .product-actions {
    margin-top: 0 !important;
  }
  .btn-add-to-cart {
    min-height: 28px;
    height: 28px;
    font-size: 0.68rem;
    padding: 0.1rem 0.3rem;
    margin-top: 0 !important;
  }
  .price-offer {
    font-size: 0.82rem;
  }
  .price-mrp {
    font-size: 0.64rem;
  }
}

/* ── HERO SECTION ───────────────────────────────────────────── */
.hero {
  /* background: linear-gradient(135deg, var(--color-primary-50) 0%, #fff 60%, #F0FDFA 100%); */
  background: var(--color-primary-50);
  padding: 6rem 0;
  overflow: hidden;
  position: relative;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% center;
  z-index: 0;
  opacity: 0.9;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(240, 253, 244, 0.85) 0%, rgba(240, 253, 244, 0.2) 100%);
  z-index: 1;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.hero-inner {
  display: block;
  /* Override grid */
}

@media (min-width: 768px) {
  .hero-inner {
    display: block;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  color: var(--color-primary);
  padding: 0.35rem 0.9rem;
  border-radius: var(--border-radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid rgba(108, 92, 231, 0.2);
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.hero-title span {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-desc {
  color: var(--text-secondary);
  font-size: 1.05rem;
  margin-bottom: 2rem;
  max-width: 480px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@keyframes fadeUpStagger {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-badge {
  animation: fadeUpStagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title {
  animation: fadeUpStagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
  opacity: 0;
}

.hero-desc {
  animation: fadeUpStagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  opacity: 0;
}

.hero-actions {
  animation: fadeUpStagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  opacity: 0;
}

.hero-stats {
  animation: fadeUpStagger 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  opacity: 0;
}

/* ── CATEGORY CARDS ─────────────────────────────────────────── */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.category-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem 0.75rem;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.category-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-50);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.category-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--border-radius);
  background: var(--color-primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  font-size: 1.6rem;
  transition: var(--transition);
}

.category-card:hover .category-icon {
  background: var(--color-primary);
}

.category-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.category-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* ── FORMS ──────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 1.1rem;
}

.form-label {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.form-label .required {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: 0.92rem;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-surface);
  transition: var(--transition);
  line-height: 1.5;
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

.form-control.is-invalid {
  border-color: var(--color-danger);
}

.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(225, 112, 85, 0.15);
}

.form-control.is-valid {
  border-color: #27ae60;
}

.form-control.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15);
}

.form-success {
  font-size: 0.8rem;
  color: #27ae60;
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.form-error {
  font-size: 0.8rem;
  color: var(--color-danger);
  margin-top: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* Checkbox & Radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.form-check-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  cursor: pointer;
  line-height: 1.5;
}

/* ── CARDS ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.card-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.card-body {
  padding: 1.5rem;
}

.card-body-sm {
  padding: 1rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-muted);
}

/* ── ALERTS / FLASH MESSAGES ─────────────────────────────────── */
.alert {
  padding: 0.9rem 1.2rem;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.alert-success {
  background: var(--color-success-bg);
  border-color: rgba(0, 184, 148, 0.3);
  color: #00695c;
}

.alert-danger {
  background: var(--color-danger-bg);
  border-color: rgba(225, 112, 85, 0.3);
  color: #c0392b;
}

.alert-warning {
  background: var(--color-warning-bg);
  border-color: rgba(253, 203, 110, 0.5);
  color: #7d6008;
}

.alert-info {
  background: var(--color-info-bg);
  border-color: rgba(9, 132, 227, 0.25);
  color: #1565c0;
}

/* ── BADGES ──────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--border-radius-full);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-primary {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.badge-success {
  background: var(--color-success-bg);
  color: #006644;
}

.badge-warning {
  background: var(--color-warning-bg);
  color: #7d6008;
}

.badge-danger {
  background: var(--color-danger-bg);
  color: #c0392b;
}

.badge-muted {
  background: var(--color-gray-100);
  color: var(--text-secondary);
}

/* ── TABLES ──────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--bg-surface);
}

.table thead tr {
  background: var(--bg-muted);
}

.table th {
  padding: 0.8rem 1rem;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}

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

.table tbody tr:hover {
  background: var(--color-gray-50);
}

/* ── PAGINATION ──────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  justify-content: center;
  margin-top: 2rem;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius);
  border: 1.5px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.page-btn:hover,
.page-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── CART STYLES ─────────────────────────────────────────────── */
.cart-page {
  min-height: 60vh;
}

.cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
}

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

.cart-item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--border-radius);
  object-fit: cover;
  border: 1px solid var(--border-color);
}

.cart-item-name {
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.25rem;
}

.cart-item-price {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--bg-surface);
}

.qty-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: var(--bg-muted);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.qty-btn:hover {
  background: var(--color-primary-50);
  color: var(--color-primary);
}

.qty-input {
  width: 48px;
  height: 44px;
  border: none;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface);
}

.qty-input:focus {
  outline: none;
}

/* ── ORDER TRACKING TIMELINE ─────────────────────────────────── */
.tracking-timeline {
  position: relative;
  padding-left: 2rem;
}

.tracking-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.tracking-step {
  position: relative;
  padding-bottom: 1.5rem;
}

.tracking-step:last-child {
  padding-bottom: 0;
}

.tracking-dot {
  position: absolute;
  left: -1.5rem;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-gray-300);
  border: 3px solid white;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracking-step.done .tracking-dot {
  background: var(--color-success);
}

.tracking-step.current .tracking-dot {
  background: var(--color-primary);
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(108, 92, 231, 0);
  }
}

.tracking-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.tracking-step:not(.done):not(.current) .tracking-label {
  color: var(--text-muted);
}

.tracking-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* -- ORDER CONFIRMATION (/checkout/success) ------------------------
   Scoped under .oc-* because "success" and "card" are far too generic to
   claim at global scope in a sheet this size.

   One column on a phone, because a phone is where this is read: order number
   first, then what was bought, then the money, then what happens next. From
   900px the totals move into a sticky rail so the grand total stays in view
   while a long item list scrolls. */

.oc-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2.5rem 0 4rem;
}

/* Hero ---------------------------------------------------------------- */
.oc-hero {
  text-align: center;
  margin-bottom: 2rem;
}

.oc-seal {
  width: 76px;
  height: 76px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  background: var(--color-success-bg);
  color: var(--color-success);
  position: relative;
}

/* A single ring that fades out, not a bounce. It exists to pull the eye to
   the confirmation and then get out of the way, so it runs once. */
.oc-seal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-success);
  opacity: 0;
  animation: oc-ring 1.1s ease-out 1 forwards;
}

.oc-seal--pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.oc-seal--pending::after {
  border-color: var(--color-warning);
}

@keyframes oc-ring {
  from {
    opacity: 0.5;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.45);
  }
}

.oc-title {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.oc-lede {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 46ch;
  margin: 0 auto;
}

/* Order number plus the two facts that matter, as one strip ------------ */
.oc-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.oc-meta-item {
  background: var(--bg-surface);
  padding: 1.1rem 1.25rem;
}

.oc-meta-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.oc-meta-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.oc-num {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  word-break: break-all;
}

/* Copy button for the order number. That number is the one thing a customer
   reads off this screen to talk to support or to track, so it gets a real
   affordance instead of "please select this text by hand". */
.oc-copy {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-primary);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-light);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  transition: var(--transition-fast);
}

.oc-copy:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.oc-copy:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Body: items on the left, money on the right from 900px --------------- */
.oc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.oc-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
}

.oc-card+.oc-card {
  margin-top: 1.25rem;
}

.oc-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* Items ---------------------------------------------------------------- */
.oc-item {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-color);
}

.oc-item:first-child {
  padding-top: 0;
}

.oc-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.oc-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius);
  object-fit: cover;
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
}

.oc-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.oc-item-name {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  margin-bottom: 0.2rem;
}

.oc-item-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.oc-item-line {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.oc-was {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Totals --------------------------------------------------------------- */
.oc-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.oc-sum-row span:last-child {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.oc-sum-row--save span:last-child {
  color: var(--color-success);
}

.oc-sum-row--total {
  border-top: 1px solid var(--border-color);
  margin-top: 0.6rem;
  padding-top: 0.8rem;
  font-size: 1.05rem;
  color: var(--text-primary);
  font-weight: 700;
}

.oc-sum-row--total span:last-child {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-primary);
}

/* Address -------------------------------------------------------------- */
.oc-addr {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.oc-addr-name {
  font-weight: 700;
  color: var(--text-primary);
}

.oc-addr-line {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.7rem;
}

.oc-addr-line i {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

/* What happens next ---------------------------------------------------- */
.oc-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.oc-next-step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.oc-next-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

.oc-next-step:first-child .oc-next-num {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.oc-next-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.oc-next-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Actions -------------------------------------------------------------- */
.oc-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.oc-actions .btn {
  width: 100%;
}

.oc-help {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 1.5rem;
  line-height: 1.6;
}

/* ORDER CONFIRMATION: from 900px ------------------------------------- */
@media (min-width: 900px) {
  .oc-shell {
    padding-top: 3.5rem;
  }

  .oc-meta {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Money in a sticky rail, so the total does not scroll away while a long
     item list is being read. align-items:start on the parent is what stops a
     grid item stretching to the full height of its taller sibling. */
  .oc-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 1.5rem;
  }

  .oc-rail {
    position: sticky;
    top: 1.5rem;
  }

  .oc-card {
    padding: 1.5rem;
  }

  .oc-next {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  /* Track Order is what the customer actually came here to do next, so it
     takes the full row; the rest are equal weight. */
  .oc-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .oc-actions .btn-primary,
  .oc-actions .btn-warning {
    grid-column: 1 / -1;
  }
}

/* Motion here is confirmation, not decoration. Anyone who has asked the OS
   for less of it gets the layout without the ring. */
@media (prefers-reduced-motion: reduce) {

  .oc-seal::after {
    animation: none;
    opacity: 0;
  }
}

/* ── TOAST NOTIFICATIONS ─────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: 2rem;
  right: 2rem;
  bottom: auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 360px;
}

/* Mobile: toasts appear bottom-center above bottom nav */
@media (max-width: 767px) {
  #toast-container {
    top: auto;
    bottom: 74px;
    right: 1rem;
    left: 1rem;
    max-width: 100%;
    align-items: center;
  }
}

.viha-toast {
  padding: 1rem 1.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: #022015;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  border-left: 4px solid var(--gold);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  animation: slide-in-toast 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.85rem;
  color: white;
  flex-shrink: 0;
}

@keyframes slide-in-toast {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slide-out-toast {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(120%); opacity: 0; }
}

.viha-toast-success {
  border-left-color: #2e8555;
}
.viha-toast-success .toast-icon {
  background: #2e8555;
}

.viha-toast-error {
  border-left-color: #d9534f;
}
.viha-toast-error .toast-icon {
  background: #d9534f;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-body);
  color: var(--color-gray-700);
  padding: 1.5rem 0 1rem;
  margin-top: 0;
  border-top: 1px solid var(--border-color);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1.5fr 1.2fr 1fr;
    gap: 3rem;
  }
}

.footer-brand {
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
}

.footer-desc {
  font-size: 0.87rem;
  line-height: 1.7;
  max-width: 280px;
}

.footer-heading {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-900);
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: var(--color-gray-600);
  font-size: 0.88rem;
  transition: var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 2rem;
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copy {
  font-size: 0.82rem;
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.5rem;
}

.gap-2 {
  gap: 1rem;
}

.gap-3 {
  gap: 1.5rem;
}

.mt-1 {
  margin-top: 0.5rem;
}

.mt-2 {
  margin-top: 1rem;
}

.mt-3 {
  margin-top: 1.5rem;
}

.mt-4 {
  margin-top: 2rem;
}

.mb-1 {
  margin-bottom: 0.5rem;
}

.mb-2 {
  margin-bottom: 1rem;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--text-muted);
}

.text-primary {
  color: var(--color-primary);
}

.text-success {
  color: var(--color-success);
}

.text-danger {
  color: var(--color-danger);
}

.fw-bold {
  font-weight: 700;
}

.fw-600 {
  font-weight: 600;
}

.fs-sm {
  font-size: 0.85rem;
}

.fs-xs {
  font-size: 0.75rem;
}

.w-100 {
  width: 100%;
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border-color);
  margin: 1.5rem 0;
}

/* Section title */
.section-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2rem;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state h3 {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── RESPONSIVE HELPERS ──────────────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }

  .hero {
    padding: 2rem 0;
    min-height: 0;
  }

  .section {
    padding: 1.75rem 0;
  }

  .section-lg {
    padding: 2.5rem 0;
  }

  .cart-item {
    grid-template-columns: 70px 1fr;
  }

  .card-body {
    padding: 1rem;
  }

  /* Scroll top button — hidden on mobile (OS native scroll-to-top exists) */
  #scroll-top {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }

  /* Desktop: no bottom nav padding */
  body {
    padding-bottom: 0 !important;
  }
}

/* ── LOADING SKELETON ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-200) 50%, var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--border-radius);
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* ── SCROLL TO TOP ───────────────────────────────────────────── */
#scroll-top {
  position: fixed;
  bottom: 90px;
  right: 30px;
  width: 42px;
  height: 42px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
  z-index: 999;
}

#scroll-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}

#scroll-top.visible {
  display: flex;
}

/* ── WHATSAPP CTA ────────────────────────────────────────────── */
.whatsapp-cta {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: pulse-whatsapp 2s infinite;
}

.whatsapp-cta:hover {
  transform: scale(1.15) rotate(-5deg);
  background-color: #20b858;
  color: white;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  animation: none;
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@media (max-width: 768px) {
  .whatsapp-cta {
    display: none !important; /* hidden on mobile — WhatsApp in bottom nav & footer */
  }
}

/* ── CHATBOT CTA ─────────────────────────────────────────────── */
@keyframes chatbot-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.7);
    transform: translateY(0);
  }

  50% {
    box-shadow: 0 0 0 15px rgba(108, 92, 231, 0);
    transform: translateY(-5px);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
    transform: translateY(0);
  }
}

@keyframes wave-bot {

  0%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(14deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  30% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(0deg);
  }
}

.chatbot-trigger {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: linear-gradient(135deg, #E5C058 0%, #FCEABB 45%, #D4AF37 80%, #aa771c 100%);
  color: #1A1101;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  padding: 8px 16px 8px 8px;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5), 
              inset 0 2px 4px rgba(255, 255, 255, 0.8),
              inset 0 -2px 6px rgba(170, 119, 28, 0.4);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: ctaFloat 3s infinite ease-in-out;
}

@keyframes ctaFloat {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.5), 
                inset 0 2px 4px rgba(255, 255, 255, 0.8),
                inset 0 -2px 6px rgba(170, 119, 28, 0.4);
  }
  50% {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px rgba(212, 175, 55, 0.8), 
                inset 0 2px 4px rgba(255, 255, 255, 0.8),
                inset 0 -2px 6px rgba(170, 119, 28, 0.4);
  }
}

.chatbot-trigger .cta-icon-bg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 17, 1, 0.3);
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1101;
  transition: all 0.3s ease;
}

.chatbot-trigger .cta-text {
  letter-spacing: 0.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  position: relative;
  z-index: 2;
}

.chatbot-trigger .cta-icon-arrow {
  font-size: 1.15rem;
  margin-left: -4px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.chatbot-trigger::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  animation: btnShine 4s infinite;
  transform: skewX(-20deg);
  z-index: 1;
}

@keyframes btnShine {
  0% { left: -100%; }
  15% { left: 200%; }
  100% { left: 200%; }
}

.chatbot-trigger:hover {
  animation: none;
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 15px 30px rgba(212, 168, 83, 0.6),
              inset 0 2px 4px rgba(255, 255, 255, 0.8),
              inset 0 -2px 6px rgba(170, 119, 28, 0.4);
  background: linear-gradient(135deg, #f2d27c, #FCEABB, #e2b254, #aa771c);
}

.chatbot-trigger:hover .cta-icon-arrow {
  transform: translateX(3px);
}

.chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 350px;
  height: 500px;
  max-width: calc(100vw - 40px);
  background: white;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

.chatbot-header {
  background: var(--color-primary);
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.chatbot-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chatbot-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.chatbot-messages {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #f8f9fa;
}

.chatbot-msg {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.9rem;
  line-height: 1.4;
}

.chatbot-msg-bot {
  background: white;
  border: 1px solid var(--color-gray-200);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chatbot-msg-user {
  background: var(--color-primary);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chatbot-input-area {
  padding: 15px;
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  gap: 10px;
  background: white;
}

.chatbot-input {
  flex: 1;
  border: 1px solid var(--color-gray-300);
  border-radius: 20px;
  padding: 10px 15px;
  outline: none;
}

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

.chatbot-send {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}

.chatbot-send:hover {
  background: var(--color-primary-dark);
}

.chatbot-product-card {
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fdfdfd;
}

.chatbot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chatbot-chip {
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.chatbot-chip:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.chatbot-typing {
  color: #6c757d;
  font-size: 0.85rem;
  padding: 8px 12px !important;
  background: transparent !important;
  border: none !important;
}

.chatbot-checkout-bar {
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--color-primary-dark);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* ── WATERMARK ─────────────────────────────────────────────── */
.development-watermark {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 3.5rem;
  color: rgba(0, 0, 0, 0.05);
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  text-transform: uppercase;
  user-select: none;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.1em;
}

@media (max-width: 768px) {
  .development-watermark {
    font-size: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Meesho / Flipkart / Amazon pattern — persistent thumb-zone nav
   ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 767px) {
  /* Single source of truth for the fixed stack at the bottom of a phone.
     Everything that has to clear it derives from this, instead of each file
     hardcoding 64 and drifting apart when only one of them is deployed. */
  :root {
    --viha-bottom-nav-h: 64px;
    /* Measured height of .global-sticky-cart-bar on a phone: a 48px thumb
       plus 0.65rem padding above and below plus a 1px border. The padding is
       declared in the inline <style> in layouts/main.php. */
    --viha-cart-bar-h: 76px;
    /* Gap left between the chatbot CTA and whatever bar is directly below it. */
    --viha-cta-gap: 10px;
  }

  /* Account and bag are duplicated in the bottom nav (Cart, and Account or
     Login), so the two icons in the top bar were the same targets twice.
     They squeezed the search into a cramped strip and crowded the nav row,
     which is the overlap reported from a phone. Removing the top copies
     hands the full width to the search bar.
     Hidden here and not in the 768px navbar block above, so the switchover
     happens on the same pixel the bottom nav appears. */
  .navbar-actions {
    display: none;
  }

  /* ── Mobile menu ──────────────────────────────────────────────
     The category bar and its panels are pointer-and-hover furniture, and the
     bar is a 48px row that costs a phone real vertical space. The drawer
     carries the same two-level tree, so the bar steps aside below 768px. The
     category links stay in the DOM either way, so this is not an SEO change,
     only a change of which one is reachable. */
  .category-nav {
    display: none;
  }

  .navbar-burger {
    order: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    margin-right: 0.15rem;
    padding: 0;
    border: none;
    border-radius: var(--border-radius);
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .navbar-burger-line {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
    transition: var(--transition);
  }

  .navbar-burger:hover {
    background: var(--bg-muted);
  }

  .navbar-burger:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  /* ── Category drawer ───────────────────────────────────────────── */
  .cat-drawer {
    --bs-offcanvas-width: min(86vw, 340px);
    z-index: 1060;
  }

  /* The bottom nav sits at 1050, so its backdrop has to clear that or the nav
     floats on top of the dimmed page. */
  .cat-drawer ~ .offcanvas-backdrop {
    z-index: 1055;
  }

  .cat-drawer-header {
    border-bottom: 1px solid var(--border-color);
    padding: 0.9rem 1.1rem;
  }

  .cat-drawer-header .offcanvas-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .cat-drawer-body {
    padding: 0.9rem 0.75rem 2rem;
    display: flex;
    flex-direction: column;
  }

  .cat-drawer-account {
    padding: 0.85rem;
    margin-bottom: 0.6rem;
    border-radius: var(--border-radius-lg);
    background: var(--bg-muted);
  }

  .cat-drawer-account-id {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
  }

  .cat-drawer-account-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .cat-drawer-account-mail {
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cat-drawer-account-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .cat-drawer-account-links a {
    padding: 0.3rem 0.6rem;
    border-radius: var(--border-radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
  }

  .cat-drawer-account-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
  }

  .cat-drawer-account-hint {
    margin: 0.3rem 0 0;
    font-size: 0.76rem;
    color: var(--text-muted);
  }

  .cat-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-fast);
  }

  .cat-drawer-link i {
    color: var(--color-primary);
    font-size: 1rem;
  }

  .cat-drawer-link:active {
    background: var(--bg-muted);
  }

  .cat-drawer-link-top {
    background: var(--bg-muted);
    margin-bottom: 0.4rem;
  }

  .cat-drawer-accordion {
    margin-bottom: 0.4rem;
  }

  .cat-drawer-accordion .accordion-item {
    border: none;
    background: transparent;
  }

  .cat-drawer-accordion .accordion-button {
    padding: 0.7rem 0.75rem;
    background: transparent;
    box-shadow: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .cat-drawer-accordion .accordion-button:not(.collapsed) {
    color: var(--color-primary);
    background: transparent;
    box-shadow: none;
  }

  .cat-drawer-accordion .accordion-button:focus {
    box-shadow: none;
    border: none;
  }

  .cat-drawer-accordion .accordion-button::after {
    background-size: 0.85rem;
  }

  .cat-drawer-current {
    color: var(--color-primary) !important;
  }

  .cat-drawer-accordion .accordion-body {
    padding: 0 0 0.4rem 0.5rem;
    border-left: 2px solid var(--border-color);
    margin-left: 0.75rem;
  }

  .cat-drawer-sub {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--border-radius);
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
  }

  .cat-drawer-sub i {
    color: var(--color-primary);
    font-size: 0.9rem;
  }

  .cat-drawer-sub.is-current {
    background: var(--bg-muted);
    color: var(--color-primary);
  }

  .cat-drawer-all {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0 0 0.6rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--border-radius-full);
    background: var(--bg-muted);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--viha-bottom-nav-h);
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1050;
    align-items: stretch;
    justify-content: space-around;
  }

  .mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: #6b7280;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
  }

  .mob-nav-item i {
    font-size: 1.35rem;
    line-height: 1;
    display: block;
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .mob-nav-item span {
    font-size: 0.62rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .mob-nav-item:hover,
  .mob-nav-item.active {
    color: var(--color-primary);
  }

  .mob-nav-item:hover i,
  .mob-nav-item.active i {
    transform: translateY(-2px);
    color: var(--color-primary);
  }

  .mob-nav-item .icon-3d {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }

  .mob-nav-item:hover .icon-3d,
  .mob-nav-item.active .icon-3d {
    transform: translateY(-2px) scale(1.08);
    filter: drop-shadow(0 3px 6px rgba(22, 163, 74, 0.25));
  }

  /* Active indicator dot */
  .mob-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
  }

  /* Cart badge in bottom nav */
  .mob-nav-cart-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    margin-left: 4px;
    background: var(--color-primary);
    color: white;
    font-size: 0.58rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid #fff;
    line-height: 1;
  }

  /* WhatsApp tab in bottom nav */
  .mob-nav-item.mob-nav-wa {
    color: #25d366;
  }
  .mob-nav-item.mob-nav-wa i {
    color: #25d366;
  }
  .mob-nav-item.mob-nav-wa:hover {
    color: #20b858;
  }

  /* ── Sticky cart bar: sit ABOVE bottom nav on mobile ──
     !important is load-bearing: the base `bottom: 0` is declared in the
     inline <style> in layouts/main.php, which appears after this stylesheet,
     so without it the later inline rule would win and drop the bar back onto
     the nav. */
  .global-sticky-cart-bar {
    bottom: var(--viha-bottom-nav-h) !important;
  }

  /* ── Chatbot CTA: clear whatever is stacked below it ──
     Empty cart: only the nav is present, 0 to 64px.
     Cart has items: the cart bar sits on the nav, 64 to 140px.
     This is scoped with `body` on purpose. The specificity of
     `body #viha-chatbot-container` beats the bare id selector in the chatbot
     partial, so if that partial is ever deployed at a different version than
     this stylesheet, its stale `bottom` value loses here instead of winning
     and dropping the button on top of the Cart target. The reverse mismatch
     is harmless: an old stylesheet floats the CTA high, it does not overlap. */
  body #viha-chatbot-container {
    bottom: calc(var(--viha-bottom-nav-h) + var(--viha-cta-gap));
    right: 16px;
  }

  body .global-sticky-cart-bar.is-visible ~ #viha-chatbot-container {
    bottom: calc(var(--viha-bottom-nav-h) + var(--viha-cart-bar-h) + var(--viha-cta-gap));
    right: 16px;
  }

  /* ── Chatbot trigger: sit above sticky cart + bottom nav ── */
  .chatbot-trigger {
    bottom: 76px;
    right: 16px;
    padding: 7px 12px 7px 7px;
    font-size: 0.88rem;
    gap: 8px;
  }

  .chatbot-trigger .cta-icon-bg {
    width: 32px;
    height: 32px;
  }

  .chatbot-container {
    bottom: 76px;
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PDP STICKY BOTTOM ADD-TO-CART BAR (Mobile)
   Shows when user scrolls past the main ATC button
   ═══════════════════════════════════════════════════════════════ */
.pdp-sticky-bar {
  display: none;
  position: fixed;
  bottom: 64px; /* above bottom nav */
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1040;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pdp-sticky-bar.is-visible {
  transform: translateY(0);
}

@media (max-width: 767px) {
  .pdp-sticky-bar {
    display: block;
  }
}

.pdp-sticky-bar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
}

.pdp-sticky-product-info {
  flex: 1;
  min-width: 0;
}

.pdp-sticky-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
}

.pdp-sticky-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pdp-sticky-atc-btn {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  transition: background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.pdp-sticky-atc-btn:active {
  background: var(--color-primary-dark);
  transform: scale(0.97);
}

.pdp-sticky-atc-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER MOBILE ACCORDION
   Link columns collapse on mobile
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-col-links .footer-section-title,
  .footer-col-shop .footer-section-title,
  .footer-col-browse .footer-section-title,
  .footer-col-contact .footer-section-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .footer-col-links .footer-section-title::after,
  .footer-col-shop .footer-section-title::after,
  .footer-col-browse .footer-section-title::after,
  .footer-col-contact .footer-section-title::after {
    content: '+';
    font-size: 1.1rem;
    font-weight: 400;
    color: #6b7280;
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }

  .footer-col-links .footer-section-title.open::after,
  .footer-col-shop .footer-section-title.open::after,
  .footer-col-browse .footer-section-title.open::after,
  .footer-col-contact .footer-section-title.open::after {
    content: '−';
  }

  .footer-col-links .footer-title-bar,
  .footer-col-shop .footer-title-bar,
  .footer-col-browse .footer-title-bar,
  .footer-col-contact .footer-title-bar {
    display: none;
  }

  .footer-col-links .footer-accordion-body,
  .footer-col-shop .footer-accordion-body,
  .footer-col-browse .footer-accordion-body,
  .footer-col-contact .footer-accordion-body {
    display: none;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem;
  }

  .footer-col-links .footer-accordion-body.open,
  .footer-col-shop .footer-accordion-body.open,
  .footer-col-browse .footer-accordion-body.open,
  .footer-col-contact .footer-accordion-body.open {
    display: block;
  }

  /* Footer trust bar: horizontal scroll on mobile */
  .footer-trust-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 1rem;
    scrollbar-width: none;
    padding: 12px 16px;
    margin-bottom: 2rem;
  }
  .footer-trust-bar::-webkit-scrollbar {
    display: none;
  }
  .footer-trust-item {
    width: auto;
    flex-shrink: 0;
  }

  /* Footer body padding for bottom nav */
  .site-footer-redesign {
    padding-bottom: 0;
  }
}

/* ── Storefront High-Impact One-By-One Scroll-Driven Motion ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .scroll-reveal-item {
    opacity: 0;
    transform: perspective(1000px) translateY(56px) scale(0.90) rotateX(6deg);
    filter: blur(8px);
    transition: opacity 0.7s cubic-bezier(0.2, 1.25, 0.35, 1),
                transform 0.75s cubic-bezier(0.2, 1.25, 0.35, 1),
                filter 0.6s ease-out;
    will-change: opacity, transform, filter;
  }

  .scroll-reveal-item.is-revealed {
    opacity: 1;
    transform: perspective(1000px) translateY(0) scale(1) rotateX(0deg);
    filter: blur(0px);
  }

  /* Section headers: pronounced glide with letter-spacing settle */
  .scroll-reveal-header {
    opacity: 0;
    transform: translateY(42px);
    filter: blur(5px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.2, 1.2, 0.35, 1),
                filter 0.55s ease-out;
    will-change: opacity, transform, filter;
  }

  .scroll-reveal-header.is-revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }

  /* Once animation completes, clean up transform and filter for pure native hover behavior */
  .scroll-reveal-item.is-revealed.animation-complete {
    transform: none;
    filter: none;
    will-change: auto;
  }

  .scroll-reveal-header.is-revealed.animation-complete {
    transform: none;
    filter: none;
    will-change: auto;
  }

  /* Enhanced interactive hover response during & after reveal */
  .product-card.scroll-reveal-item.is-revealed:hover,
  .na-card.scroll-reveal-item.is-revealed:hover,
  .bs-card.scroll-reveal-item.is-revealed:hover,
  .so-card.scroll-reveal-item.is-revealed:hover,
  .combo-card.scroll-reveal-item.is-revealed:hover,
  .cat-card.scroll-reveal-item.is-revealed:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-item,
  .scroll-reveal-header {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TOP MENU BAR — "Green Botanical" desktop redesign
   Brings the header in line with the storefront system: mint surfaces
   (#f4f9f4 / #d5ebd5) and deep-green type. The category links use the
   editorial serif of the section headings ("New Arrivals"), and the
   selected item is marked with coloured text and an underline rather
   than a filled pill. Desktop only (>=768px); the mobile header and
   drawer keep their own layout.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* ── Search navbar ─────────────────────────────────────────── */
  .navbar {
    background: linear-gradient(180deg, #ffffff 0%, #fcfefc 100%);
    border-bottom: 1px solid #eaf3ea;
    box-shadow: 0 12px 28px -24px rgba(15, 46, 26, 0.55);
  }

  .navbar-search input {
    background: #f4f9f4;
    border-color: #d5ebd5;
    color: #164024;
  }
  .navbar-search input::placeholder {
    color: #7f9e89;
  }
  .navbar-search input:focus {
    background: #ffffff;
    border-color: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
  }
  .navbar-search-icon {
    color: #16a34a;
  }

  .navbar-icon-btn {
    border-radius: 9999px;
  }
  .navbar-icon-btn:hover {
    background: #eaf5ea;
    color: #164024;
  }

  /* ── Category strip ────────────────────────────────────────── */
  .category-nav {
    background: linear-gradient(180deg, #f7fbf7 0%, #f0f7f0 100%);
    border-bottom: 1px solid #d5ebd5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .category-nav-inner {
    gap: 0.35rem;
  }

  /* Editorial serif, matching the "New Arrivals" section heading. The weight
     is the same in every state (plain, hover, selected, open) so hovering or
     activating an item never makes it wider and the row stays static. */
  .cat-nav-link {
    font-family: 'Georgia', 'Playfair Display', serif;
    color: #143522;
    font-weight: 600;
    letter-spacing: 0.005em;
  }
  .cat-nav-link:hover {
    color: #16a34a;
  }

  /* Selected item: coloured label + underline (no filled pill) */
  .category-nav-inner > .cat-nav-link.active,
  .cat-nav-item.is-active .cat-nav-parent,
  .cat-nav-item.is-open .cat-nav-parent {
    color: #16a34a;
    font-weight: 600;
  }
  .category-nav-inner > .cat-nav-link.active {
    border-bottom-color: #16a34a;
  }
  .cat-nav-item::after {
    left: 0;
    right: 0;
    background: #16a34a;
  }

  .category-nav-inner > .cat-nav-link:focus-visible,
  .cat-nav-item .cat-nav-link:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: -2px;
  }

  /* Panels pick up the same mint system */
  .cat-nav-panel-title {
    color: #4d7c5f;
  }
  .cat-nav-sub:hover,
  .cat-nav-sub:focus-visible {
    background: #f1f8f1;
  }
  .cat-nav-sub.is-current {
    background: #eaf5ea;
  }
  .cat-nav-sub-icon {
    background: #dcf1dc;
    color: #15803d;
  }
}

/* ════════════════════════════════════════════════════════════════════
   SHOP MOBILE FILTER DRAWER — right-side off-canvas
   Below 768px the filter sidebar becomes a fixed drawer sliding in from
   the right. A compact "Filter" button in the page header opens it; the
   ✕ button, a backdrop tap, Escape, or any applied filter closes it.
   Desktop (>=768px) keeps the static in-grid sidebar untouched.
   ════════════════════════════════════════════════════════════════════ */

/* Mobile filter button — shown <768px only (hide-desktop kills it up top) */
.shop-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 50px;
  padding: 0.48rem 1.05rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.28);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.shop-filter-btn:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 3px 12px rgba(22, 163, 74, 0.34);
}
.shop-filter-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.shop-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.32rem;
  border-radius: 50px;
  background: #ffffff;
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

/* Backdrop behind the open drawer */
.shop-filter-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 46, 26, 0.45);
  z-index: 1062;
  display: none;
}
.shop-filter-backdrop.is-visible {
  display: block;
  animation: shopBackdropFade 0.3s ease;
}
@keyframes shopBackdropFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 767px) {
  .shop-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 30px rgba(15, 46, 26, 0.16);
    padding: 0;
    background: #ffffff;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(106%);
    visibility: hidden;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s;
    z-index: 1065; /* above navbar (1045), bottom nav (1050), cat-drawer (1060) */
  }
  .shop-filter-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .shop-filter-drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
  }
  .shop-filter-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #ffffff;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .shop-filter-close:hover {
    background: var(--bg-muted);
    border-color: rgba(22, 163, 74, 0.45);
    color: var(--color-primary);
  }
  .shop-filter-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }

  .shop-filter-form {
    margin: 0 !important; /* neutralise Bootstrap .mt-3 */
    padding: 1.25rem;
  }
}