/* ============================================================
FILE: kalpataru-shared.css
============================================================ */

/* Home-page compatible tokens (needed for navbar / my list / bottom nav) */
:root {
  --brown-primary: #7B2D00; --brown-mid: #A0522D; --brown-light: #C4825A;
  --brown-pale: #E8D5C4; --green-primary: #2D7A1F; --green-deep: #1E5413;
  --green-mid: #4A9E39; --green-pale: #D6EAD1; --gold-accent: #C17F24;
  --gold-light: #E6B86A; --gold-pale: #FBF0D9; --parchment: #F5EDD6;
  --cream: #FBF7EF; --white: #FFFFFF; --espresso: #1A1208; --ink: #2C1A0E;
  --umber: #5C3D1E; --stone: #8B7355; --border: #DDD0BB; --border-dark: #C4A882;
  --color-primary: var(--brown-primary); --color-accent: var(--gold-accent);
  --color-success: var(--green-primary); --color-whatsapp: #25D366;
  --color-whatsapp-dark: #128C4A; --color-danger: #B3261E;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-cormorant: 'Cormorant Garamond', Georgia, serif;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem;
  --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem;
  --text-4xl: 3rem; --text-5xl: 3.75rem; --text-6xl: 4.5rem;
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --radius-2xl: 24px; --radius-full: 9999px;
  --shadow-xs: 0 1px 3px rgba(26,18,8,0.08); --shadow-sm: 0 2px 8px rgba(26,18,8,0.10);
  --shadow-md: 0 4px 20px rgba(26,18,8,0.12); --shadow-lg: 0 8px 40px rgba(26,18,8,0.15);
  --shadow-xl: 0 16px 60px rgba(26,18,8,0.18);
  --shadow-card: 0 2px 12px rgba(123,45,0,0.08), 0 1px 3px rgba(123,45,0,0.04);
  --shadow-card-hover: 0 8px 32px rgba(123,45,0,0.15), 0 2px 8px rgba(123,45,0,0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms;
  --container-max: 1280px; --container-pad: clamp(1rem, 4vw, 2.5rem);
  --navbar-height: 72px; --navbar-height-mobile: 64px; --bottom-nav-height: 68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.65; color: var(--espresso); background-color: var(--parchment); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2.5px solid var(--gold-accent); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.navbar { position: sticky; top: 0; z-index: 1000; background: rgba(251,247,239,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(196,168,130,0.22); height: var(--navbar-height); box-shadow: 0 1px 24px rgba(26,18,8,0.06), 0 1px 4px rgba(26,18,8,0.04); transition: box-shadow var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.navbar.scrolled { background: rgba(251,247,239,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: rgba(196,168,130,0.32); box-shadow: 0 2px 32px rgba(26,18,8,0.09), 0 1px 6px rgba(26,18,8,0.05); }
.navbar__inner { display: flex; align-items: center; height: 100%; gap: var(--space-8); padding-inline: clamp(1.25rem, 3.5vw, 2.5rem); }
.navbar__brand { flex-shrink: 0; display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.navbar__logo { height: 44px; width: 44px; object-fit: contain; flex-shrink: 0; display: block; border-radius: 50%; }
.navbar__brand-text { display: flex; flex-direction: column; gap: 0; line-height: 1; }
.navbar__logo-text { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--brown-primary); letter-spacing: -0.02em; line-height: 1.15; }
.navbar__logo-text span { color: var(--green-primary); }
.navbar__brand-sub { font-family: var(--font-cormorant); font-size: 0.72rem; font-weight: 500; color: var(--stone); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; margin-top: 3px; }
.navbar__nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
.navbar__links { display: flex; align-items: center; gap: 0.15rem; }
.nav-link { position: relative; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--umber); padding: 0.45rem 0.85rem; border-radius: 0; letter-spacing: 0.01em; transition: color var(--duration-base) var(--ease-out); white-space: nowrap; background: transparent; }
.nav-link::after { content: ''; position: absolute; bottom: 0.2rem; left: 0.85rem; right: 0.85rem; height: 1px; background: var(--gold-accent); transform: scaleX(0); transform-origin: center; transition: transform var(--duration-base) var(--ease-out); }
.nav-link:hover { color: var(--brown-primary); background: transparent; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--brown-primary); background: transparent; }
.nav-link.active::after { transform: scaleX(1); background: var(--brown-primary); }
.navbar__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.mylist-btn { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(251,247,239,0.6); color: var(--brown-primary); border: 1.5px solid rgba(196,168,130,0.55); border-radius: var(--radius-full); padding: 0.5rem 1.05rem; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; transition: all var(--duration-base) var(--ease-out); flex-shrink: 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 1px 4px rgba(26,18,8,0.06), inset 0 1px 0 rgba(255,255,255,0.5); }
.mylist-btn:hover { background: rgba(251,247,239,0.9); border-color: var(--gold-accent); color: var(--gold-accent); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(193,127,36,0.18), 0 2px 6px rgba(26,18,8,0.08), inset 0 1px 0 rgba(255,255,255,0.7); }
.mylist-btn svg { flex-shrink: 0; }
.mylist-btn__label { display: none; }
@media (min-width: 480px) { .mylist-btn__label { display: inline; } }
.mylist-btn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-full); background: var(--gold-accent); color: var(--white); font-size: 10px; font-weight: 700; line-height: 1; transition: transform var(--duration-fast) var(--ease-out); }
.mylist-btn__count[data-bump="true"] { animation: bumpCount 0.35s var(--ease-out); }
@keyframes bumpCount { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.mylist-btn__count:empty, .mylist-btn__count[data-zero="true"] { background: rgba(123,45,0,0.15); color: var(--stone); }
.navbar__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; border-radius: var(--radius-sm); transition: background var(--duration-fast); }
.navbar__hamburger:hover { background: var(--gold-pale); }
.navbar__hamburger span { display: block; height: 1.5px; background: var(--brown-primary); border-radius: 2px; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base); transform-origin: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: all var(--duration-base) var(--ease-out); white-space: nowrap; line-height: 1; }
.btn--xs { font-size: var(--text-xs); padding: 0.4rem 0.75rem; }
.btn--sm { font-size: var(--text-sm); padding: 0.55rem 1.1rem; }
.btn--md { font-size: var(--text-base); padding: 0.75rem 1.5rem; }
.btn--lg { font-size: var(--text-md); padding: 0.9rem 1.8rem; }
.btn--ghost { background: transparent; color: var(--umber); border-color: var(--border-dark); }
.btn--ghost:hover { background: var(--gold-pale); color: var(--brown-primary); border-color: var(--brown-primary); }
.btn--whatsapp { background: var(--color-whatsapp); color: var(--white); border-color: var(--color-whatsapp); }
.btn--whatsapp:hover { background: var(--color-whatsapp-dark); border-color: var(--color-whatsapp-dark); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(37,211,102,0.35); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.mylist-overlay { position: fixed; inset: 0; background: rgba(26,18,8,0.55); backdrop-filter: blur(2px); z-index: 1100; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out); }
.mylist-overlay.open { opacity: 1; pointer-events: auto; }
.mylist-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--cream); z-index: 1101; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--duration-slow) var(--ease-out); box-shadow: -8px 0 40px rgba(26,18,8,0.25); }
.mylist-drawer.open { transform: translateX(0); }
.mylist-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mylist-drawer__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: var(--space-2); }
.mylist-drawer__title-count { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; color: var(--white); background: var(--brown-primary); border-radius: var(--radius-full); padding: 2px 8px; }
.mylist-drawer__close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); color: var(--umber); transition: background var(--duration-fast), color var(--duration-fast); }
.mylist-drawer__close:hover { background: var(--gold-pale); color: var(--brown-primary); }
.mylist-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-5); }
.mylist-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-12) var(--space-4); color: var(--stone); }
.mylist-empty svg { color: var(--border-dark); }
.mylist-empty p { color: var(--stone); font-size: var(--text-sm); max-width: 260px; }
.mylist-empty strong { color: var(--umber); font-size: var(--text-md); }
.mylist-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.mylist-item:last-child { border-bottom: none; }
.mylist-item__thumb { width: 52px; height: 52px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; background: var(--border); }
.mylist-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mylist-item__info { flex: 1; min-width: 0; }
.mylist-item__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); line-height: 1.35; margin-bottom: 2px; }
.mylist-item__meta { font-size: var(--text-xs); color: var(--stone); }
.mylist-item__qty { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.qty-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-dark); color: var(--umber); font-size: var(--text-sm); font-weight: 700; transition: background var(--duration-fast), color var(--duration-fast); }
.qty-btn:hover { background: var(--brown-primary); color: var(--cream); border-color: var(--brown-primary); }
.qty-value { min-width: 18px; text-align: center; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.mylist-item__remove { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); color: var(--stone); transition: background var(--duration-fast), color var(--duration-fast); }
.mylist-item__remove:hover { background: rgba(179,38,30,0.1); color: var(--color-danger); }
.mylist-drawer__footer { flex-shrink: 0; padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--border); background: var(--cream); display: flex; flex-direction: column; gap: var(--space-3); }
.mylist-drawer__note { font-size: var(--text-xs); color: var(--stone); text-align: center; line-height: 1.5; }
.mylist-drawer__actions { display: flex; gap: var(--space-3); }
.mylist-drawer__actions .btn { flex: 1; }

@media (max-width: 767px) {
  :root { --navbar-height: var(--navbar-height-mobile); }
  .navbar__inner { gap: var(--space-3); }
  .navbar__logo { height: 38px; width: 38px; }
  .navbar__logo-text { font-size: var(--text-base); }
  .navbar__brand-sub { display: none; }
  .navbar__nav { display: none; }
  .navbar__hamburger { display: none !important; }
  .navbar__actions { display: none; }
  .mylist-drawer { width: 100vw; }
}
@media (max-width: 639px) {
  .navbar { height: 56px; }
  .navbar__inner { padding-inline: var(--container-pad); gap: var(--space-2); }
  .navbar__logo-text { font-size: 1rem; letter-spacing: -0.02em; white-space: nowrap; }
  .navbar__brand-sub { display: none; }
  .mylist-drawer { width: 100vw; bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .mylist-drawer__header { padding: 1rem; }
  .mylist-drawer__title { font-size: 1.05rem; }
  .mylist-drawer__close { width: 40px; height: 40px; border-radius: var(--radius-full); }
  .mylist-drawer__body { padding: 0.75rem 1rem; }
  .mylist-item { padding: 0.75rem 0; gap: 0.625rem; }
  .mylist-item__thumb { width: 48px; height: 48px; border-radius: var(--radius-md); }
  .mylist-item__name { font-size: 0.875rem; line-height: 1.3; }
  .mylist-item__meta { font-size: 0.75rem; }
  .qty-btn { width: 32px; height: 32px; font-size: 1rem; }
  .qty-value { font-size: 0.875rem; min-width: 20px; }
  .mylist-item__remove { width: 34px; height: 34px; }
  .mylist-drawer__footer { padding: 0.875rem 1rem; gap: 0.625rem; padding-bottom: max(0.875rem, env(safe-area-inset-bottom)); }
  .mylist-drawer__note { font-size: 0.75rem; line-height: 1.5; }
  .mylist-drawer__actions { gap: 0.5rem; }
  .mylist-drawer__actions .btn { padding-block: 0.8125rem; font-size: 0.875rem; justify-content: center; }
  .mylist-empty { padding: 2.5rem 1rem; gap: 0.75rem; }
  .mylist-empty p { font-size: 0.875rem; }
  .btn--md { font-size: 0.875rem; padding: 0.75rem 1.25rem; }
  .btn--sm { font-size: 0.8125rem; padding: 0.6rem 1rem; }
}
@media (max-width: 767px) {
  .navbar { height: var(--navbar-height-mobile); }
  .mylist-drawer__close { width: 44px; height: 44px; }
}
#products { scroll-margin-top: 90px; }

/* ═══════════════════════════════════════════════════════
   5-SLOT MOBILE BOTTOM NAV + EXPLORE SHEET + MOBILE SEARCH
═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    --bottom-nav-height: 66px;
    --center-logo-size: 74px;
    --sticky-search-height: 64px;
  }
  body { padding-top: var(--sticky-search-height); padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }

  /* Static mobile search header */
  .mobile-search-header {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1048;
    padding: 7px 12px;
    background: rgba(251, 247, 239, 0.96);
    border-bottom: 1px solid rgba(196, 168, 130, 0.30);
    box-shadow: 0 2px 12px rgba(26, 18, 8, 0.07), 0 1px 3px rgba(26, 18, 8, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: visible;
  }
  .mobile-search-header__form {
    display: flex; align-items: center; gap: 8px;
    width: 100%; height: 50px;
    padding: 0 6px 0 16px;
    background: var(--white);
    border: 1px solid rgba(196, 168, 130, 0.42);
    border-radius: 13px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.88) inset, 0 1px 6px rgba(26,18,8,0.05);
    transition: border-color 200ms ease, box-shadow 200ms ease;
    position: relative; z-index: 2;
  }
  .mobile-search-header__form:focus-within {
    border-color: var(--gold-accent);
    box-shadow: 0 0 0 3px rgba(193,127,36,0.13), 0 1px 6px rgba(26,18,8,0.06);
  }
  .mobile-search-header__icon { flex-shrink: 0; color: var(--stone); transition: color 180ms ease; }
  .mobile-search-header__form:focus-within .mobile-search-header__icon { color: var(--brown-primary); }
  .mobile-search-header__input {
    flex: 1; min-width: 0; height: 100%; border: none; outline: none;
    background: transparent; font-family: var(--font-body);
    font-size: 15px; font-weight: 400; color: var(--ink);
    letter-spacing: 0.005em; padding: 0; min-height: 50px;
  }
  .mobile-search-header__input::placeholder { color: var(--stone); opacity: 0.85; }
  .mobile-search-header__input::-webkit-search-cancel-button,
  .mobile-search-header__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
  .mobile-search-header__submit {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--brown-primary); color: var(--cream); border: none; cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .mobile-search-header__submit:active { transform: scale(0.94); background: var(--ink); }
  .mobile-search-header__submit svg { width: 18px; height: 18px; }
  .mobile-search-header__panel {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 4px);
    z-index: 5; background: var(--white);
    border: 1px solid rgba(196, 168, 130, 0.42);
    border-radius: 14px;
    box-shadow: 0 14px 40px rgba(26,18,8,0.16), 0 2px 8px rgba(26,18,8,0.06);
    max-height: min(60vh, 420px);
    overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .mobile-search-header__panel.is-open { opacity: 1; transform: translateY(0); }
  .mobile-search-header__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px; border-radius: 10px;
    background: transparent; border: none;
    color: var(--ink); font-family: var(--font-body);
    text-align: left; cursor: pointer; transition: background 140ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-search-header__item:active,
  .mobile-search-header__item:hover { background: rgba(193,127,36,0.10); }
  .mobile-search-header__item-thumb {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
    overflow: hidden; background: linear-gradient(145deg, #fdf4ec, #fceadb);
    display: flex; align-items: center; justify-content: center;
    color: var(--brown-primary);
  }
  .mobile-search-header__item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mobile-search-header__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .mobile-search-header__item-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-search-header__item-meta { font-size: 11px; color: var(--stone); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-search-header__item-arrow { flex-shrink: 0; color: var(--stone); opacity: 0.6; }
  .mobile-search-header__empty { display: flex; flex-direction: column; gap: 4px; padding: 20px 14px; text-align: center; color: var(--stone); }
  .mobile-search-header__empty strong { color: var(--umber); font-size: 14px; }
  .mobile-search-header__empty span { font-size: 12px; line-height: 1.4; }
  .mobile-search-header__more { padding: 8px 12px 4px; font-size: 11px; color: var(--stone); text-align: center; border-top: 1px solid rgba(196, 168, 130, 0.18); margin-top: 4px; }

  /* 5-slot bottom nav */
  .mobile-bottom-nav {
    display: none;
    grid-template-columns: 1fr 1fr auto 1fr 1fr;
    align-items: stretch;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1052;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--cream);
    border-top: 1px solid rgba(196, 168, 130, 0.30);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.65) inset, 0 -6px 28px rgba(26, 18, 8, 0.08), 0 -1px 4px rgba(26, 18, 8, 0.04);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav::before {
    content: ''; position: absolute; top: -1px; left: 22%; right: 22%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(193,127,36,0.42), transparent);
    pointer-events: none;
  }
  .mobile-bottom-nav__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 44px; padding: 0 2px;
    color: var(--stone); text-decoration: none; background: none; border: none;
    font-family: var(--font-body); cursor: pointer;
    transition: color 240ms cubic-bezier(.16,1,.3,1), opacity 240ms cubic-bezier(.16,1,.3,1);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav__item.active, .mobile-bottom-nav__item:active { color: var(--brown-primary); }
  .mobile-bottom-nav__icon {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 26px; border-radius: var(--radius-full);
    transition: background 240ms cubic-bezier(.16,1,.3,1);
  }
  .mobile-bottom-nav__item.active .mobile-bottom-nav__icon { background: rgba(123,45,0,0.06); }
  .mobile-bottom-nav__icon svg { display: block; flex-shrink: 0; transition: transform 200ms cubic-bezier(.16,1,.3,1); }
  .mobile-bottom-nav__item:active .mobile-bottom-nav__icon svg { transform: scale(0.92); }
  .mobile-bottom-nav__label { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; text-align: center; white-space: nowrap; }
  .mobile-bottom-nav__item::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    height: 2px; border-radius: 0 0 2px 2px; background: var(--gold-accent);
    width: 0; transition: width 320ms cubic-bezier(.16,1,.3,1); pointer-events: none;
  }
  .mobile-bottom-nav__item.active::before { width: 22px; }
  .mobile-bottom-nav__badge {
    position: absolute; top: 0; right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-full);
    background: var(--gold-accent); color: var(--white); font-size: 9px; font-weight: 700; line-height: 1;
    border: 1.5px solid var(--cream);
    transition: transform 200ms cubic-bezier(.16,1,.3,1), opacity 200ms;
  }
  .mobile-bottom-nav__badge[data-zero="true"] { opacity: 0; transform: scale(0.4); pointer-events: none; }
  .mobile-bottom-nav__badge[data-bump="true"] { animation: bottomNavBadgeBump 0.35s var(--ease-out); }
  @keyframes bottomNavBadgeBump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
  .mobile-bottom-nav__center { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; padding: 0; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mobile-bottom-nav__center-inner { position: relative; display: flex; align-items: center; justify-content: center; width: var(--center-logo-size); height: var(--center-logo-size); margin-top: -6px; padding: 0; background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none; transition: transform 340ms cubic-bezier(.16,1,.3,1); }
  .mobile-bottom-nav__center-inner::after { display: none; }
  .mobile-bottom-nav__center:active .mobile-bottom-nav__center-inner { transform: translateY(0) scale(0.96); }
  .mobile-bottom-nav__center[aria-expanded="true"] .mobile-bottom-nav__center-inner { transform: translateY(-2px); }
  .mobile-bottom-nav__center-mark { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; color: var(--brown-primary); transition: opacity 220ms ease, transform 380ms cubic-bezier(.16,1,.3,1); }
  .mobile-bottom-nav__center-image { width: 100%; height: 100%; object-fit: contain; display: block; flex-shrink: 0; border-radius: 0; border: none; box-shadow: none; transition: opacity 220ms ease, transform 380ms cubic-bezier(.16,1,.3,1); }
  .mobile-bottom-nav__center-mark-fallback { opacity: 0; transform: scale(0.6); }
  .mobile-bottom-nav__center[aria-expanded="true"] .mobile-bottom-nav__center-image { opacity: 0; transform: rotate(40deg) scale(0.6); }
  .mobile-bottom-nav__center[aria-expanded="true"] .mobile-bottom-nav__center-mark-fallback { opacity: 0; transform: rotate(40deg) scale(0.6); }
  .mobile-bottom-nav__center-close { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; color: var(--brown-primary); opacity: 0; transform: rotate(-40deg) scale(0.6); transition: opacity 220ms ease, transform 380ms cubic-bezier(.16,1,.3,1); }
  .mobile-bottom-nav__center[aria-expanded="true"] .mobile-bottom-nav__center-mark { opacity: 0; transform: rotate(40deg) scale(0.6); }
  .mobile-bottom-nav__center[aria-expanded="true"] .mobile-bottom-nav__center-close { opacity: 1; transform: rotate(0deg) scale(1); }
  body.explore-open .mobile-bottom-nav__item { pointer-events: none; opacity: 0.5; }
}

@media (max-width: 767px) {
  .mobile-bottom-nav { display: grid !important; }
}

/* Desktop: absolutely hide the mobile bottom navigation. */
@media (min-width: 768px) {
  #mobileBottomNav { display: none !important; }
}

@media (min-width: 768px) { .mobile-search-header { display: none; } }

.explore-backdrop { position: fixed; inset: 0; z-index: 1049; background: rgba(26, 18, 8, 0.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 300ms cubic-bezier(.16,1,.3,1); }
.explore-backdrop.is-open { opacity: 1; pointer-events: auto; }
.explore-sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px)); z-index: 1051; max-width: 520px; margin-inline: auto; background: var(--cream); border-radius: 22px 22px 0 0; border-top: 1px solid rgba(196, 168, 130, 0.35); border-left: 1px solid rgba(196, 168, 130, 0.16); border-right: 1px solid rgba(196, 168, 130, 0.16); box-shadow: 0 -14px 52px rgba(26, 18, 8, 0.20), 0 -2px 10px rgba(26, 18, 8, 0.06); transform: translateY(calc(100% + 24px)); transition: transform 440ms cubic-bezier(.16, 1, .3, 1); will-change: transform; max-height: calc(100svh - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px) - 12px); display: flex; flex-direction: column; overflow: hidden; }
.explore-sheet.is-open { transform: translateY(0); }
.explore-sheet__handle { display: flex; justify-content: center; padding: 10px 0 6px; flex-shrink: 0; }
.explore-sheet__handle::before { content: ''; display: block; width: 36px; height: 3px; border-radius: 999px; background: rgba(139, 115, 85, 0.35); }
.explore-sheet__header { padding: 6px 24px 14px; text-align: center; border-bottom: 1px solid rgba(196, 168, 130, 0.22); flex-shrink: 0; }
.explore-sheet__eyebrow { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-accent); margin-bottom: 6px; }
.explore-sheet__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.15; }
.explore-sheet__title em { display: block; font-family: var(--font-cormorant); font-style: italic; font-weight: 500; font-size: 13.5px; color: var(--stone); letter-spacing: 0.06em; margin-top: 4px; }
.explore-sheet__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 8px 16px; overscroll-behavior: contain; }
.explore-sheet__group + .explore-sheet__group { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgba(196, 168, 130, 0.18); }
.explore-sheet__group-label { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--stone); padding: 12px 16px 6px; }
.explore-sheet__link { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border-radius: 12px; color: var(--ink); text-decoration: none; font-family: var(--font-body); font-size: 15px; font-weight: 500; letter-spacing: 0.005em; transition: background 180ms ease; -webkit-tap-highlight-color: transparent; }
.explore-sheet__link:active { background: rgba(193, 127, 36, 0.10); }
.explore-sheet__link-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(193, 127, 36, 0.09); color: var(--brown-primary); transition: background 180ms ease; }
.explore-sheet__link:active .explore-sheet__link-icon { background: rgba(193, 127, 36, 0.20); }
.explore-sheet__link-icon svg { display: block; }
.explore-sheet__link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.explore-sheet__link-label small { display: block; font-size: 11.5px; color: var(--stone); font-weight: 400; letter-spacing: 0.01em; margin-top: 1px; }
.explore-sheet__link-arrow { flex-shrink: 0; color: var(--stone); opacity: 0.55; transition: transform 220ms cubic-bezier(.16,1,.3,1), color 220ms ease, opacity 220ms ease; }
.explore-sheet__link:active .explore-sheet__link-arrow { transform: translateX(3px); color: var(--brown-primary); opacity: 1; }
@media (min-width: 768px) { .explore-backdrop, .explore-sheet { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .explore-sheet, .explore-backdrop,
  .mobile-bottom-nav__center-inner, .mobile-bottom-nav__center-mark, .mobile-bottom-nav__center-close { transition: none !important; }
}
@media (max-width: 359px) { .mobile-bottom-nav { --center-logo-size: 50px; } .mobile-bottom-nav__label { font-size: 9.5px; letter-spacing: 0.02em; } }

/* Shared search visual overrides */
/* Premium Kalpataru search treatment — visual only */
.mobile-search-header__form {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(253,249,242,.98)) !important;
    border: 1px solid rgba(193,127,36,.34) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 6px 18px rgba(26,18,8,.06), 0 1px 4px rgba(26,18,8,.04) !important;
    padding-left: 18px !important;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease !important;
}
.mobile-search-header__form:hover {
    border-color: rgba(193,127,36,.50) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.95) inset, 0 9px 24px rgba(26,18,8,.08), 0 2px 6px rgba(26,18,8,.04) !important;
}
.mobile-search-header__form:focus-within {
    border-color: rgba(193,127,36,.78) !important;
    box-shadow: 0 0 0 4px rgba(193,127,36,.10), 0 10px 26px rgba(26,18,8,.08) !important;
}
.mobile-search-header__icon { color: #8B7355 !important; }
.mobile-search-header__form:focus-within .mobile-search-header__icon { color: #7B2D00 !important; }
.mobile-search-header__input { color: #2C1A0E !important; font-size: 15px !important; }
.mobile-search-header__input::placeholder { color: #8B7355 !important; opacity: .82 !important; }
.mobile-search-header__submit {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(145deg, #8B3A12, #6E2400) !important;
    color: #FBF7EF !important;
    box-shadow: 0 3px 10px rgba(123,45,0,.22) !important;
}
.mobile-search-header__submit:hover { background: linear-gradient(145deg, #9A4519, #7B2D00) !important; }
.mobile-search-header__submit:active { transform: scale(.94) !important; }
.mobile-search-header__panel {
    border: 1px solid rgba(193,127,36,.24) !important;
    border-radius: 18px !important;
    box-shadow: 0 20px 48px rgba(26,18,8,.14), 0 4px 12px rgba(26,18,8,.06) !important;
}