/* =====================================================================
   LAYOUT — announcement, header, navigation, footer
   ===================================================================== */

/* ---- Announcement bar -----------------------------------------------
   A slow, seamless marquee. Two identical halves means -50% lands exactly on
   the start of the second half, so there is no jump. It pauses on hover and
   on focus, and reduced-motion gets a single centred line instead.
   ------------------------------------------------------------------- */
.announce {
  background: var(--green-900);
  color: var(--green-100);
  font-size: var(--step--2);
  letter-spacing: .02em;
  position: relative;
  z-index: 60;
  overflow: hidden;
}

/* The fade belongs on the viewport, not on the bar. A mask applies to the
   element's own background as well, so masking `.announce` thinned the green
   at both ends and the near-white page showed through as a pale halo. Masking
   the viewport fades only the text travelling inside it. */
.announce__viewport {
  min-height: var(--announce-h);
  display: flex;
  align-items: center;
  padding-block: var(--sp-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.announce__track {
  display: flex;
  flex: none;
  width: max-content;
  animation: announce-marquee 54s linear infinite;
  will-change: transform;
}
.announce:hover .announce__track,
.announce:focus-within .announce__track { animation-play-state: paused; }

.announce__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  padding-inline: clamp(1.1rem, 2.6vw, 2.2rem);
  color: inherit;
  transition: color var(--dur-fast) var(--ease);
}
.announce__icon { flex: none; color: var(--gold-400); }
a.announce__item:hover { color: var(--gold-400); }

@keyframes announce-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .announce__viewport {
    justify-content: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .announce__track { animation: none; width: auto; }
  .announce__item:not(:first-child) { display: none; }
}

/* ---- Header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  /* Frosted rather than flatly opaque: what passes underneath stays faintly
     visible, which is what reads as depth. The tint is still 92% opaque, so
     a browser without backdrop-filter simply gets a solid bar. */
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
          backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: transparent;
  box-shadow: var(--ring), var(--shadow);
}

/* Over a dark hero the header starts transparent and inverts. */
.site-header.is-over-hero:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
}
.site-header.is-over-hero:not(.is-stuck) .nav-link,
.site-header.is-over-hero:not(.is-stuck) .header-action { color: var(--white); }
/* The logo is full-colour on a light disc — it reads correctly on the dark
   hero as-is, so it is never inverted. Only the wordmark changes colour. */
.site-header.is-over-hero:not(.is-stuck) .brand__name { color: var(--white); }
.site-header.is-over-hero:not(.is-stuck) .brand__sub  { color: var(--gold-400); }
.site-header.is-over-hero:not(.is-stuck) .brand__mark {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}
/* Over the dark hero the normal hover wash (a near-white green-050 disc)
   reads as a white blob and swallows the icon. A translucent wash keeps the
   affordance and lets the icon stay white. */
.site-header.is-over-hero:not(.is-stuck) .header-action:hover,
.site-header.is-over-hero:not(.is-stuck) .header-action:focus-visible {
  background: color-mix(in srgb, var(--white) 16%, transparent);
  color: var(--white);
}

.header__inner {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
}

/* ---- Brand lockup ---------------------------------------------------
   The logo is a circular seal: at header size the type inside it is not
   legible, so the mark is paired with a text wordmark. Mark alone on the
   narrowest phones, where horizontal space is the scarcer resource.
   ------------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, .8rem);
  flex: none;
  min-width: 0;
}

.brand__mark {
  width: auto;
  height: 40px;
  flex: none;
  transition: height var(--dur) var(--ease);
}
.is-stuck .brand__mark { height: 34px; }

.brand__text {
  display: grid;
  line-height: 1;
  min-width: 0;
}
.brand__name {
  font-family: var(--font-display);
  font-size: clamp(.98rem, 2vw, 1.12rem);
  font-weight: 500;
  letter-spacing: .005em;
  color: var(--green-800);
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-display);
  font-size: clamp(.7rem, 1.25vw, .78rem);
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-top: 5px;
  white-space: nowrap;
}

/* ---- Primary nav --------------------------------------------------- */
.primary-nav { justify-self: center; }
.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
}
.nav-link svg {
  flex: none;
  color: color-mix(in srgb, var(--gold-700) 78%, transparent);
  transition: color var(--dur-fast) var(--ease);
}
.nav-link:hover svg,
.nav-link[aria-current="page"] svg { color: var(--gold-600); }
.site-header.is-over-hero:not(.is-stuck) .nav-link svg { color: var(--gold-400); }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold-600);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease-out);
}
.nav-link:hover { color: var(--green-700); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--green-800); }

/* Dropdown for Categories */
.nav-item { position: relative; }
/* The panel used to start 14px below the link. That gap was dead space: the
   pointer left the nav item on its way down and the menu closed before it
   could be reached. It now begins flush at the bottom of the link and pushes
   itself clear with padding, so the hover target is continuous. */
.nav-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  width: max-content;
  min-width: 240px;
  /* Never wider than the viewport allows, however many categories exist. */
  max-width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-3);
  margin-top: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
  display: grid;
  gap: 2px;
}
/* An invisible bridge across the 12px margin keeps the pointer inside the
   hover target while it travels from the link to the panel. */
.nav-drop::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
}
.nav-drop a:hover { background: var(--cream); color: var(--green-800); }
.nav-drop a span { font-size: var(--step--2); color: var(--muted); }

/* ---- Header actions ------------------------------------------------ */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  justify-self: end;
}
.header-action {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.header-action:hover { background: var(--green-050); color: var(--green-700); }

.header-action__count {
  position: absolute;
  top: 4px; right: 2px;
  min-width: 20px; height: 20px;
  padding-inline: 5px;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  background: var(--chilli);
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease-out);
}
.header-action__count[hidden] { display: none; }
.header-action__count.bump { animation: bump .5s var(--ease-out); }
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

.burger { display: none; }

/* ---- Search overlay ------------------------------------------------ */
.search-panel {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 320;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease-out);
  max-height: 100dvh;
  overflow-y: auto;
}
.search-panel.is-open { transform: translateY(0); }

.search-panel__inner { padding-block: clamp(1.75rem, 4vw, 3rem); }

.search-form {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--green-700);
  padding-bottom: var(--sp-3);
}
.search-form input {
  flex: 1;
  /* Without this a flex item will not shrink below its content width, and
     the placeholder pushed the Search button past the edge at 320px. */
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--green-900);
  padding: var(--sp-2) 0;
}
.search-form input:focus { outline: none; }
.search-form input::placeholder { color: color-mix(in srgb, var(--muted) 60%, transparent); }

.search-hint {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--muted);
}
.search-hint b { color: var(--green-700); font-weight: 600; }

.search-results { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.search-result {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease);
}
.search-result:hover { background: var(--cream); }
.search-result img {
  width: 58px; height: 58px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
  flex: none;
}
.search-result__name { font-family: var(--font-display); font-size: var(--step-1); color: var(--green-900); }
.search-result__hindi { font-family: var(--font-hindi); font-size: var(--step--1); color: var(--muted); }
.search-result__price { margin-left: auto; font-weight: 600; color: var(--green-800); white-space: nowrap; }

/* ---- Mobile menu --------------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: 320;
  width: min(400px, 88vw);
  background: var(--white);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}

.mobile-menu__nav { padding: var(--sp-3) var(--sp-5) var(--sp-4); display: grid; }

/* Rows are sized so the whole menu, including the account buttons, fits a
   typical phone screen without hunting for the bottom of a long scroll. */
.mobile-menu__nav > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--green-900);
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.mobile-menu__nav > a:hover { padding-left: var(--sp-3); color: var(--gold-700); }
.mobile-menu__nav > a svg { color: var(--gold-600); flex: none; }

.mobile-menu__label {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-2);
}

/* Categories read as a secondary group, two per row where there is space. */
.mobile-menu__cats {
  display: grid;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}
.mobile-menu__cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  background: var(--cream);
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mobile-menu__cats a:hover { background: var(--green-050); color: var(--green-800); }
.mobile-menu__cats .count {
  font-size: var(--step--2);
  color: var(--muted);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  min-width: 26px;
  text-align: center;
}

.mobile-menu__foot {
  margin-top: auto;
  padding: var(--sp-5);
  background: var(--cream);
  display: grid;
  gap: var(--sp-4);
}
.mobile-menu__foot .socials { justify-content: flex-start; }

/* ---- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--green-900);
  color: var(--green-100);
  position: relative;
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  overflow: hidden;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: .4;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.site-footer > * { position: relative; z-index: 1; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  padding-bottom: clamp(1.1rem, 2vw, 1.6rem);
}

.footer-brand__lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.footer-brand__mark { height: 64px; width: auto; flex: none; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); }
.footer-brand__text { display: grid; line-height: 1; }
.footer-brand__text .l1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--white);
}
.footer-brand__text .l2 {
  font-family: var(--font-display);
  font-size: .8rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-top: 6px;
}
.footer-brand p {
  font-size: var(--step--1);
  line-height: 1.72;
  color: color-mix(in srgb, var(--green-100) 82%, transparent);
  max-width: 34ch;
}
.footer-brand .tagline {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-style: italic;
  color: var(--gold-400);
  margin-bottom: var(--sp-2);
}

.footer-col h5 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-3);
}
.footer-col ul { display: grid; gap: 2px; }
.footer-col a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: 7px;
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--green-100) 86%, transparent);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a svg {
  flex: none;
  color: color-mix(in srgb, var(--gold-400) 78%, transparent);
  transition: color var(--dur-fast) var(--ease);
}
.footer-col a:hover { color: var(--white); }
.footer-col a:hover svg { color: var(--gold-400); }

.footer-contact { display: grid; gap: var(--sp-3); font-size: var(--step--1); }
.footer-contact a, .footer-contact span {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: color-mix(in srgb, var(--green-100) 86%, transparent);
  line-height: 1.55;
}
.footer-contact svg { flex: none; margin-top: 3px; color: var(--gold-400); }

.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.socials a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  color: var(--green-100);
  border: 1px solid color-mix(in srgb, var(--green-100) 26%, transparent);
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease);
}
.socials a:hover {
  background: var(--gold-600);
  border-color: var(--gold-600);
  color: var(--green-900);
}

.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--green-100) 15%, transparent);
  padding-block: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--step--2);
  color: color-mix(in srgb, var(--green-100) 66%, transparent);
}
.footer-bottom__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.footer-credit { color: color-mix(in srgb, var(--green-100) 52%, transparent); }
.footer-credit a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* Enough vertical padding to clear a comfortable tap target without
     changing the line box, so the credit still reads as one sentence. */
  padding-block: .55rem;
}
.footer-credit a:hover { color: var(--white); }
.footer-bottom nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-bottom nav a { display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; }
.footer-bottom nav a svg { flex: none; color: color-mix(in srgb, var(--gold-400) 70%, transparent); }
.footer-bottom a:hover { color: var(--gold-400); }

.footer-legal {
  font-size: var(--step--2);
  color: color-mix(in srgb, var(--green-100) 55%, transparent);
  padding-bottom: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

/* ---- Floating WhatsApp --------------------------------------------- */
.wa-float {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 180;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: #1FA855;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform var(--dur) var(--ease-out);
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px solid #1FA855;
  border-radius: 50%;
  opacity: .5;
  animation: wa-pulse 2.6s var(--ease) infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: .5; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 1080px) {
  .primary-nav ul { gap: var(--sp-4); }
  /* Anchored to the link's left edge rather than centred, so a narrow
     window cannot push the panel off the side of the page. */
  .nav-drop { left: 0; transform: translate(0, 8px); }
  .nav-item:hover .nav-drop,
  .nav-item:focus-within .nav-drop { transform: translate(0, 0); }
  .nav-link { font-size: var(--step--2); }
}

@media (max-width: 940px) {
  :root { --header-h: 64px; }
  .primary-nav { display: none; }
  .burger { display: grid; }
  .header__inner { grid-template-columns: auto 1fr; }
  .header-actions { gap: 0; }
  .header-action.hide-mobile { display: none; }
  .brand__mark, .is-stuck .brand__mark { height: 42px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 360px) {
  /* Below this the wordmark and the action icons fight for the same pixels —
     the seal alone is still unmistakably the brand. */
  .brand__text { display: none; }
  .brand__mark, .is-stuck .brand__mark { height: 40px; }
}

/* Two columns of icon-led links still fit at 390px, the commonest phone
   width: each column gets about 166px, and "Terms & Conditions" needs 125px.
   Only below 360px do the longer labels start wrapping badly enough to be
   worth a single column. */
@media (max-width: 359px) {
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .footer-brand__lockup { gap: var(--sp-3); }
  .footer-brand__mark { height: 52px; }
  /* The two link lists stay side by side here. Stacking them made the phone
     footer roughly twice as tall for no gain in legibility. */
  .footer-grid { gap: var(--sp-4) var(--sp-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  /* .62rem resolved to 9.92px. The layout sweep exempts the announcement bar
     as an off-canvas element, so it never caught this. */
  .announce { font-size: .72rem; }
}

/* The sticky buy bar appears at 860px and is 74px tall, but the floating
   WhatsApp button used to lift clear of it only below 560px — so between
   those widths the button sat on top of the bar. Tie the offset to the bar
   actually being present instead of to a viewport width. */
body.has-buy-bar .wa-float { bottom: calc(var(--sp-4) + 68px); }