/* ============================================================================
   Site chrome — announcement, header, search, drawer, footer, FAB, action bar
   ========================================================================== */

/* ---- announcement bar --------------------------------------------------- */
.announce {
  background: var(--brand-primary-dark);
  color: var(--announce-fg);
  font-size: var(--fs-caption);
  text-align: center;
}
.announce .wrap {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--announce-h);
  padding-block: var(--space-1);
}
.announce b { color: var(--brand-accent); font-weight: var(--fw-semibold); }

/* ---- header ------------------------------------------------------------- */
/* The chrome is injected into a plain <div data-site-header>. A sticky element
   can only stick inside its own containing block, and that div is exactly as
   tall as the header it holds — so the header scrolled away the moment you
   passed it and was never actually sticky. `display: contents` removes the
   wrapper's box so the header sticks against the page instead. */
[data-site-header] { display: contents; }
/* Before the chrome is injected the wrapper has no box, so the page begins at
   the very top and everything jumps down the moment the header appears. While
   it is still empty, hold exactly the space the header will occupy. */
[data-site-header]:empty {
  display: block;
  min-height: calc(var(--header-h) + var(--announce-h));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 253, 249, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-line);
}
/* The header met the page on a bare hairline. The printed card ends on a
   scalloped saffron valance, so the header borrows it — the boundary becomes
   part of the identity instead of a default border. It hangs below the header
   and must not intercept clicks meant for the page. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 13px;
  pointer-events: none;
  background-image: var(--edge-scallop);
  background-size: var(--edge-scallop-size);
  background-repeat: repeat-x;
  opacity: 0.85;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--space-3); margin-right: auto; flex: none; }
/* The two lockups have different aspect ratios (mr 1.5:1, en 2:1), so a shared
   height renders the Marathi mark visibly smaller. Sized per language instead
   so both land at a comparable width. */
.brand img { height: 60px; width: auto; }
.lang-mr .brand img { height: 72px; }
@media (min-width: 768px) {
  .brand img { height: 80px; }
  .lang-mr .brand img { height: 100px; }
}
.brand__name { display: none; }

.nav-links { display: none; align-items: center; gap: var(--space-5); }
.nav-links a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding-block: var(--space-2);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--brand-primary); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--brand-primary); font-weight: var(--fw-semibold); }

.header-actions { display: flex; align-items: center; gap: var(--space-1); flex: none; }
.header-actions > * { flex: none; }
/* account lives in the drawer on mobile — the top bar has no room for it */
.icon-btn--desktop { display: none; }

/* language switch — one compact control naming the language it switches TO.
   The previous two-button segmented control needed 115px and pushed the header to 390px on a
   360px phone, so flex shrank its second button to zero and Marathi became a one-way trip. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  min-height: 38px;
  padding: 0 var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  background: var(--color-surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-switch:hover { background: var(--brand-primary-soft); border-color: var(--brand-primary); }
.lang-switch svg { flex: none; opacity: 0.7; }
.lang-switch--full { width: 100%; justify-content: center; min-height: 46px; font-size: var(--fs-sm); }

/* ---- search ------------------------------------------------------------- */
.search { position: relative; flex: 1; max-width: 380px; display: none; }
.search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  background: var(--color-surface-2);
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  transition: all var(--dur) var(--ease);
}
.search__field:focus-within { background: var(--color-surface); border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-soft); }
.search__field input {
  flex: 1;
  min-height: 42px;
  border: none;
  background: none;
  color: var(--color-text);
  min-width: 0;
}
.search__field input:focus { outline: none; }
.search__field input::-webkit-search-cancel-button { display: none; }
.search__clear { display: none; }
.search__field.has-value .search__clear { display: grid; }

.search__results {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0; right: 0;
  z-index: 10;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
}
.search__results:empty { display: none; }
.search__result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none; border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}
.search__result:hover, .search__result[aria-selected="true"] { background: var(--color-surface-2); }
.search__result img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-xs); flex: none; background: var(--color-surface-2); }
.search__result-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.search__result-meta { font-size: var(--fs-caption); color: var(--color-muted); }
.search__empty { padding: var(--space-4); text-align: center; font-size: var(--fs-sm); color: var(--color-muted); }

/* full-screen search on mobile */
.search-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--color-bg);
  padding: var(--space-4);
  display: none;
  flex-direction: column;
  gap: var(--space-4);
}
.search-sheet.is-open { display: flex; }
.search-sheet .search { display: block; max-width: none; }
.search-sheet__head { display: flex; align-items: center; gap: var(--space-3); }

/* ---- mobile drawer ------------------------------------------------------ */
.scrim {
  position: fixed; inset: 0;
  z-index: var(--z-scrim);
  background: rgba(30, 16, 10, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overscroll-behavior: contain;
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.drawer__title { font-family: var(--font-display); font-size: var(--fs-h4); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-4) var(--space-6); }
.drawer__body a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) 0;
  font-size: var(--fs-lead);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-line);
}
.drawer__body a:hover { color: var(--brand-primary); }
.drawer__foot { padding: var(--space-4); border-top: 1px solid var(--color-line); display: grid; gap: var(--space-3); }

body.is-locked { overflow: hidden; }

/* ---- footer ------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: var(--fs-sm);
  padding-block: var(--space-8) var(--space-5);
  margin-top: var(--space-8);
}
.site-footer a { color: var(--footer-fg); }
.site-footer a:hover { color: var(--brand-accent); }
.site-footer h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--brand-accent);
  margin-bottom: var(--space-4);
}
.footer-grid { display: grid; gap: var(--space-7); }
.footer-brand p { color: var(--footer-muted); max-width: 40ch; }
.footer-list { display: grid; gap: var(--space-3); }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.footer-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(216, 198, 184, 0.28);
  border-radius: 50%;
}
.footer-social a:hover { border-color: var(--brand-accent); }
.footer-bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(216, 198, 184, 0.18);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--footer-muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---- floating WhatsApp -------------------------------------------------- */
.wa-fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 52px;
  padding-inline: var(--space-4);
  background: var(--brand-whatsapp);
  color: var(--color-on-whatsapp);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease), bottom var(--dur) var(--ease);
}
.wa-fab:hover { transform: translateY(-2px); color: var(--color-on-whatsapp); }
.wa-fab__label { display: none; }
/* lift clear of the action bar so it never covers the primary CTA */
body.has-action-bar .wa-fab { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* On phones WhatsApp lives in the bottom nav, so the floating button would be a
   duplicate sitting on top of it. Desktop keeps the FAB (no bottom nav there). */
@media (max-width: 767.98px) { .wa-fab { display: none; } }

/* ---- single shopping action bar (replaces stickyBar + cartBar) ---------- */
.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-actionbar);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(255, 253, 249, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -4px 20px rgba(74, 44, 30, 0.10);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.action-bar.is-visible { transform: translateY(0); }
.action-bar__summary { flex: 1; min-width: 0; line-height: 1.25; }
.action-bar__count { font-size: var(--fs-caption); color: var(--color-muted); display: block; }
.action-bar__total { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--color-text); }
.action-bar .btn { flex: none; }
.action-bar--single .btn { flex: 1; }
body.has-action-bar { padding-bottom: 86px; }

/* ---- responsive --------------------------------------------------------- */
@media (min-width: 768px) {
  .brand img { height: 40px; }
  .search { display: block; }
  .search-toggle { display: none; }
  .icon-btn--desktop { display: inline-grid; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .wa-fab__label { display: inline; }
}
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .burger { display: none; }
  .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; }
  .action-bar { display: none; }
  body.has-action-bar { padding-bottom: 0; }
  body.has-action-bar .wa-fab { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
}

/* ---- bottom sheet (filters, options) ------------------------------------ */
.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  max-height: 85dvh;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-xl);
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out);
  overscroll-behavior: contain;
}
.sheet.is-open { transform: translateY(0); }
.sheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.sheet__body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-4); }
.sheet__foot {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-line);
}
.sheet__foot .btn { flex: 1; }

@media (min-width: 900px) {
  .sheet {
    inset-block: 0;
    inset-inline: auto 0;
    width: min(90vw, 380px);
    max-height: none;
    border-radius: 0;
    transform: translateX(100%);
  }
  .sheet.is-open { transform: translateX(0); }
}

/* ---- shop page head ----------------------------------------------------- */
.shop-head { margin-bottom: var(--space-5); }
.shop-head h1 { font-size: var(--fs-h1); margin-bottom: var(--space-2); }
.shop-head p { color: var(--color-muted); max-width: 56ch; }


/* ---- mobile bottom navigation ------------------------------------------- */
.bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-actionbar);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--color-line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(90, 52, 30, 0.07);
}
.bottomnav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 44px is the accessible minimum; the label sits below the icon, never replaced by it */
  min-height: 56px;
  padding: var(--space-2) var(--space-1);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: var(--color-muted);
  text-align: center;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.bottomnav__item svg { flex: none; }
.bottomnav__item:hover { color: var(--brand-primary); }
.bottomnav__item[aria-current="page"] {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
}
/* Active underline sits BETWEEN the icon and the label, never over the icon.
   The slot is always present (transparent when inactive) so switching pages
   never shifts the bar. flex order puts it after the icon, before the label. */
.bottomnav__item svg { order: 0; }
.bottomnav__item::after {
  content: "";
  order: 1;
  width: 20px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: transparent;
  transition: background var(--dur) var(--ease);
}
.bottomnav__item > span { order: 2; }
.bottomnav__item[aria-current="page"]::after { background: var(--brand-primary); }
.bottomnav__item--wa[aria-current="page"]::after { background: var(--brand-green); }
.bottomnav__item--wa { color: var(--brand-green); }
.bottomnav__item--wa:hover { color: var(--brand-green-dark); }
.bottomnav__icon-wrap { position: relative; display: inline-flex; order: 0; }
.bottomnav__icon-wrap .icon-btn__count { top: -4px; right: -8px; }

/* Clearance for the fixed bar is added to the footer, not to <body>.
   Padding on the body rendered as a band of page background below the footer —
   an empty stretch at the end of every page. Putting it on the footer runs the
   footer's own dark ground all the way under the bar instead. Every public page
   renders a footer, so nothing is left sitting beneath the bar. */
body.has-bottomnav { padding-bottom: 0; }
body.has-bottomnav .site-footer {
  /* the bar's measured height plus the footer's ordinary bottom padding —
     nothing more, so the page ends tight against the bar */
  padding-bottom: calc(var(--space-4) + var(--bottomnav-h, 60px));
}
/* when the cart action bar is up it stacks directly above the nav, never over it */
body.has-bottomnav.has-action-bar .site-footer {
  padding-bottom: calc(var(--space-4) + var(--bottomnav-h, 60px) + 86px);
}
body.has-bottomnav .action-bar { bottom: var(--bottomnav-h, 60px); }

@media (min-width: 768px) {
  .bottomnav { display: none; }
  body.has-bottomnav .site-footer,
  body.has-bottomnav.has-action-bar .site-footer { padding-bottom: var(--space-5); }
  .site-footer { margin-top: var(--space-7); }
  body.has-bottomnav.has-action-bar { padding-bottom: 86px; }
  body.has-bottomnav .action-bar { bottom: 0; }
}