/* ============================================================
   MISHTHI SATTVA — DESIGN SYSTEM ENTRY POINT
   Consumers link this single file. Keep it @import-only.
   ============================================================ */

@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/radius.css";
@import "./tokens/base.css";

/* Mobile sticky Call + WhatsApp bar — hidden on desktop, shown under 680px.
   Defined here (shared) so EVERY page behaves the same; some page <style> blocks
   (account/contact/policy) were missing this rule, leaking the bar onto desktop. */
.ms-mobilebar { display: none; }
@media (max-width: 680px) {
  .ms-mobilebar { display: flex; }
  .ms-fab { display: none !important; }
  main { padding-bottom: 76px; }
}

/* Compact site header on phones so the logo + Account + Shop button never
   overflow the viewport (Account becomes icon-only, tighter Shop button). */
@media (max-width: 600px) {
  header .ms-container { gap: 8px; }
  .ms-headacts { gap: 8px !important; }
  .ms-logo-tag { width: 112px !important; }
  .ms-acct-label { display: none !important; }
  .ms-head-divider { display: none !important; }
  .ms-headacts a[href*="account"] { padding: 0.45rem 0.5rem !important; }
  .ms-headacts a[href*="shop/index.html"], .ms-shopbtn { padding: 0.5rem 0.85rem !important; font-size: 13px !important; }
}

/* Product badge glow — a soft pulsing halo in the badge's own colour so tags
   like Bestseller / Limited / Special Offer catch the eye. --glow is set inline
   to each badge's background colour. */
@keyframes msBadgePulse {
  0%, 100% { box-shadow: 0 0 5px 0 color-mix(in oklab, var(--glow, var(--accent)) 45%, transparent); transform: scale(1); }
  50%      { box-shadow: 0 0 18px 4px color-mix(in oklab, var(--glow, var(--accent)) 95%, transparent); transform: scale(1.07); }
}
.ms-badge-glow { animation: msBadgePulse 1.6s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .ms-badge-glow { animation: none; } }


/* Header tagline — the three words rotate one at a time under the logo, so it
   stays compact (a long static line looked unbalanced under the small mark).
   Words are stacked absolutely and cross-fade; only one shows at a time. */
@keyframes msTagCycle {
  0%   { opacity: 0; transform: translateY(4px); }
  5%   { opacity: 1; transform: translateY(0); }
  28%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.ms-tagcycle { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; opacity: 0; animation: msTagCycle 7.5s infinite var(--ease-standard, ease); }
/* Each word keeps the original lockup look: green text in a gold "tube" pill. */
.ms-tagpill { display: inline-block; background: var(--gold); color: var(--forest-deep); padding: 3px 13px; border-radius: var(--radius-pill); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
/* Respect reduced motion: no cycling — show the first word's pill, static. */
@media (prefers-reduced-motion: reduce) {
  .ms-tagcycle { animation: none; opacity: 0; }
  .ms-tagcycle:first-child { opacity: 1; }
}

/* ============================================================
   SIZE SELECT — the weight/price picker (ui_kits/shared/SizeSelect.jsx)
   A listbox rather than a native <select> so each size can carry its price
   and saving, and the chosen one a tick. Colours come from the brand tokens;
   motion is transform/opacity only and is disabled under reduced motion.
   ============================================================ */
.ms-ss { position: relative; width: 100%; }

.ms-ss-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 13px; color: var(--primary);
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.ms-ss--lg .ms-ss-btn { padding: 12px 15px; font-size: 14px; }
.ms-ss-btn:hover { border-color: color-mix(in oklab, var(--accent) 65%, var(--border)); }
.ms-ss-btn:active { transform: scale(.995); }
.ms-ss-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); }
.ms-ss-btn.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 16%, transparent); }

.ms-ss-val { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.ms-ss-weight { font-weight: 700; white-space: nowrap; }
.ms-ss-price { color: var(--muted-foreground); font-weight: 600; white-space: nowrap; }
.ms-ss-caret { flex-shrink: 0; transition: transform .25s var(--ease-standard, ease); }
.ms-ss-btn.is-open .ms-ss-caret { transform: rotate(180deg); }

/* The open panel. z-index clears neighbouring cards in the shop grid. */
.ms-ss-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  margin: 0; padding: 4px; list-style: none;
  background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl, 0 20px 46px -18px rgba(30, 60, 49, .42));
  max-height: 260px; overflow-y: auto;
  animation: msSsIn .18s var(--ease-out, ease) both;
}
.ms-ss-panel:focus-visible { outline: none; }
@keyframes msSsIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }

.ms-ss-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: calc(var(--radius-md) - 2px); cursor: pointer;
  color: var(--primary); transition: background .14s ease, color .14s ease;
  /* each row arrives a beat after the one above it */
  animation: msSsOptIn .22s var(--ease-out, ease) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes msSsOptIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.ms-ss-opt.is-active { background: color-mix(in oklab, var(--accent) 14%, var(--card)); }
.ms-ss-opt.is-sel { background: color-mix(in oklab, var(--accent) 20%, var(--card)); }
.ms-ss-opt-main { display: grid; gap: 2px; min-width: 0; }
.ms-ss-opt-weight { font-size: 14px; font-weight: 700; }
.ms-ss-opt-sub { font-size: 12px; color: var(--muted-foreground); }
.ms-ss-opt.is-active .ms-ss-opt-sub, .ms-ss-opt.is-sel .ms-ss-opt-sub { color: color-mix(in oklab, var(--primary) 72%, transparent); }
.ms-ss-save { color: var(--destructive); font-weight: 700; }
.ms-ss-tick { display: inline-flex; flex-shrink: 0; color: var(--accent); animation: msSsTick .25s var(--ease-out, ease) both; }
@keyframes msSsTick { from { transform: scale(0); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ms-ss-panel, .ms-ss-opt, .ms-ss-tick { animation: none; }
  .ms-ss-caret, .ms-ss-btn { transition: none; }
}

/* ============================================================
   PRODUCT PAGE — /product/<slug>  (ui_kits/shared/ProductPage.jsx)
   ============================================================ */
.ms-pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 18px 24px 0; font-size: 12.5px; color: var(--muted-foreground); }
.ms-pp-crumbs a { color: var(--muted-foreground); text-decoration: none; }
.ms-pp-crumbs a:hover { color: var(--primary); }
.ms-pp-crumbs b { color: var(--primary); font-weight: 600; }

.ms-pp-top { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 26px 24px 56px; align-items: start; }
@media (max-width: 900px) { .ms-pp-top { grid-template-columns: 1fr; gap: 28px; padding: 18px 18px 40px; } }

/* ---- gallery ---- */
.ms-pp-gallery { position: sticky; top: 96px; }
@media (max-width: 900px) { .ms-pp-gallery { position: static; } }
.ms-pp-shot { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-2xl); overflow: hidden; background: var(--cream); display: grid; place-items: center; }
.ms-pp-shot img { width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; }
.ms-pp-noshot { font-family: var(--font-display); font-size: 28px; color: var(--primary); opacity: .35; padding: 24px; text-align: center; }
.ms-pp-badge { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-pill); }
.ms-pp-arrow { position: absolute; top: 50%; transform: translateY(-50%); height: 38px; width: 38px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--primary); font-size: 22px; line-height: 1; cursor: pointer; }
.ms-pp-arrow.is-prev { left: 10px; } .ms-pp-arrow.is-next { right: 10px; }
.ms-pp-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.ms-pp-thumb { flex: 0 0 72px; height: 72px; padding: 4px; border-radius: var(--radius-md); border: 1.5px solid var(--border); background: var(--cream); cursor: pointer; }
.ms-pp-thumb.is-on { border-color: var(--accent); }
.ms-pp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- buy box ---- */
.ms-pp-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ms-pp-buy h1 { margin: 8px 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4vw, 42px); line-height: 1.06; color: var(--primary); }
.ms-pp-rating { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--accent); font-size: 15px; }
.ms-pp-rating small { color: var(--muted-foreground); font-size: 12.5px; }
.ms-pp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ms-pp-price b { font-family: var(--font-display); font-weight: 600; font-size: 32px; color: var(--primary); }
.ms-pp-price s { color: var(--muted-foreground); font-size: 17px; }
.ms-pp-price em { font-style: normal; font-size: 13px; font-weight: 700; color: var(--destructive); }
.ms-pp-tagline { margin: 14px 0 0; font-size: 13.5px; font-weight: 700; color: var(--primary); }
.ms-pp-blurb { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: color-mix(in oklab, var(--foreground) 82%, transparent); }
.ms-pp-ticks { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ms-pp-ticks li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.ms-pp-ticks li::before { content: "✔"; position: absolute; left: 0; color: var(--accent); font-size: 12px; }
.ms-pp-ship { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: var(--primary); }

.ms-pp-pin { margin-top: 18px; }
.ms-pp-pin label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 7px; }
.ms-pp-pinrow { display: flex; gap: 8px; }
.ms-pp-pinrow input { flex: 1; min-width: 0; padding: 11px 13px; font-family: var(--font-sans); font-size: 14px; color: var(--primary); background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius-md); }
.ms-pp-pinrow input:focus-visible { outline: none; border-color: var(--accent); }
.ms-pp-pinrow button { flex-shrink: 0; padding: 11px 18px; border: none; border-radius: var(--radius-md); background: var(--secondary); color: var(--primary); font-family: var(--font-sans); font-weight: 700; font-size: 14px; cursor: pointer; }
.ms-pp-pinsaid { margin: 8px 0 0; font-size: 13px; font-weight: 600; }
.ms-pp-pinsaid.is-ok { color: var(--success, #2e7d32); } .ms-pp-pinsaid.is-bad { color: var(--destructive); }

.ms-pp-size { margin-top: 18px; }
.ms-pp-size label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 7px; }

.ms-pp-low { margin: 16px 0 0; font-size: 13px; font-weight: 700; color: var(--destructive); }
.ms-pp-sold { margin: 20px 0 0; padding: 13px 15px; border-radius: var(--radius-md); background: var(--secondary); font-size: 14px; line-height: 1.55; color: var(--primary); }
.ms-pp-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.ms-pp-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card); flex-shrink: 0; }
.ms-pp-qty button { height: 46px; width: 42px; border: none; background: transparent; color: var(--primary); font-size: 19px; cursor: pointer; }
.ms-pp-qty span { min-width: 26px; text-align: center; font-weight: 700; color: var(--primary); }
.ms-pp-add { flex: 1; padding: 15px; border: none; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); font-family: var(--font-sans); font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: var(--shadow-lg); }
.ms-pp-buynow { display: block; margin-top: 10px; padding: 14px; text-align: center; border-radius: var(--radius-pill); border: 1.5px solid var(--primary); color: var(--primary); font-weight: 700; font-size: 15px; text-decoration: none; }
.ms-pp-ask { display: block; margin-top: 16px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--whatsapp, #128C4B); text-decoration: none; }

/* ---- tabs ---- */
.ms-ptabs { margin: 8px 24px 40px; }
.ms-ptabs-bar { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.ms-ptab { flex-shrink: 0; padding: 13px 16px; border: none; background: transparent; cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--muted-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ms-ptab:hover { color: var(--primary); }
.ms-ptab.is-on { color: var(--primary); font-weight: 700; border-bottom-color: var(--accent); }
.ms-ptabs-body { padding: 24px 2px 0; max-width: 760px; }

/* ---- legal declarations ---- */
.ms-pp-legal { margin: 8px 24px 56px; padding: 20px 22px; border-radius: var(--radius-2xl); background: var(--secondary); max-width: 760px; }
.ms-pp-legal p { margin: 0 0 7px; font-size: 13px; line-height: 1.6; color: color-mix(in oklab, var(--foreground) 82%, transparent); }
.ms-pp-legal b { color: var(--primary); }
.ms-pp-legal a { color: inherit; }
.ms-pp-legalnote { margin-top: 12px !important; font-size: 12.5px !important; color: var(--muted-foreground) !important; }

/* ---- "you may also like" rows ---- */
.ms-pp-row { padding: 8px 0 48px; }
.ms-pp-row h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--primary); }
.ms-pp-rowsub { margin: 5px 0 0; font-size: 13.5px; color: var(--muted-foreground); }
.ms-pp-rowscroll { display: flex; gap: 16px; margin-top: 18px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.ms-pp-mini { flex: 0 0 190px; scroll-snap-align: start; display: grid; gap: 6px; padding: 12px; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--card); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.ms-pp-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.ms-pp-minishot { display: block; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; background: var(--cream); }
.ms-pp-minishot img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.ms-pp-mininame { font-size: 14px; font-weight: 700; color: var(--primary); line-height: 1.3; }
.ms-pp-miniprice { font-size: 13.5px; font-weight: 700; color: var(--primary); display: flex; gap: 7px; align-items: baseline; }
.ms-pp-miniprice s { font-weight: 400; color: var(--muted-foreground); font-size: 12px; }
.ms-pp-minicta { justify-self: start; font-size: 12px; font-weight: 700; color: var(--accent); }

.ms-pp-empty { padding: 100px 24px; text-align: center; }
.ms-pp-empty h1 { font-family: var(--font-display); font-size: 34px; color: var(--primary); }
.ms-pp-btn { display: inline-block; margin-top: 18px; padding: 13px 24px; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); font-weight: 700; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .ms-pp-mini { transition: none; } }

/* ============================================================
   ANNOUNCEMENT MARQUEE (js/marquee.js)
   Content comes from MS_MARQUEE in js/config.js.
   ============================================================ */
#ms-marquee {
  position: relative; z-index: 60; overflow: hidden;
  /* A pale gold band, not another dark green one. Above a dark green header the
     two used to merge into a single heavy slab and the offer read as part of
     the navigation; this separates them and makes it look like the promo strip
     it is. */
  background: color-mix(in oklab, var(--gold, #c9a227) 20%, var(--cream, #f4efe2));
  color: var(--forest-deep, #16332a);
  border-bottom: 1px solid color-mix(in oklab, var(--gold, #c9a227) 45%, transparent);
  /* Dissolve both ends so a message is never sliced through mid-word at the
     edge of the screen — the thing that made it look broken rather than moving. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ms-marquee-track {
  display: flex; width: max-content;
  animation: msMarquee 30s linear infinite;
  will-change: transform;
}
.ms-marquee-group { display: flex; align-items: center; }
.ms-marquee-item {
  padding: 8px 0; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.06em; white-space: nowrap;
}
.ms-marquee-dot { padding: 0 22px; color: color-mix(in oklab, var(--gold, #c9a227) 80%, var(--forest-deep)); font-size: 10px; }
/* Linked messages: underline only on hover, so the bar still reads as one line
   rather than a row of links. */
a.ms-marquee-item { color: inherit; text-decoration: none; }
a.ms-marquee-item:hover { color: var(--forest, #1f3d31); text-decoration: underline; text-underline-offset: 3px; }
a.ms-marquee-item:focus-visible { outline: 2px solid var(--forest, #1f3d31); outline-offset: 3px; border-radius: 3px; }

/* Moving exactly half the track puts the duplicate strip where the first
   started, so the loop has no visible seam. */
@keyframes msMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Let people stop it to read — a moving line is hard work for some readers. */
#ms-marquee:hover .ms-marquee-track,
#ms-marquee:focus-within .ms-marquee-track { animation-play-state: paused; }

@media (max-width: 600px) { .ms-marquee-item { font-size: 11.5px; } .ms-marquee-dot { padding: 0 16px; } }

/* Motion sensitivity: show the messages, still, rather than scrolling them. */
@media (prefers-reduced-motion: reduce) {
  .ms-marquee-track { animation: none; width: 100%; justify-content: center; }
  .ms-marquee-track .ms-marquee-group:nth-child(2) { display: none; }
  .ms-marquee-group { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   HOME HERO — full-bleed food photograph with the copy laid over it
   ============================================================ */
.ms-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* The page's mobile stylesheet forces 56px onto every <section>; the hero is
     full-bleed and sets its own, so index.html excludes it there too. */
  padding: 0;
  /* Taller, using the space reclaimed from the section below. More height on a
     fixed width means a gentler crop of the 16:9 clip — at 1440 this takes the
     band from 2.58:1 to 2.09:1, so noticeably more of the table and the jar
     stay in shot. Still capped so the buttons hold above the fold. */
  min-height: clamp(500px, 82vh, 760px);
  display: grid; align-items: center;
  background: var(--cream, #f4efe2);
}
/* Full height, anchored right, and its width follows from its own 16:9 ratio —
   so the clip is never cropped at any hero height. The cream to its left is the
   page's own background, which is where the words sit and what the clip's table
   surface fades into, so the two read as one scene. */
.ms-hero-media {
  /* Full bleed and sharp throughout. A 16:9 clip in a wide band does lose a
     good slice off the top and bottom, but that is the look: real footage
     everywhere, the plate large, the words sitting on the scene itself — not a
     panel of colour or a blurred stand-in beside it. */
  position: absolute; inset: 0; z-index: -2;
}
.ms-hero-media img, .ms-hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  /* Biased down a touch: keeps the spoon and the table edge in shot and takes
     the crop off the ceiling, which carries nothing. */
  object-position: center 44%;
  display: block;
}
/* Ivory wash, heaviest where the words are and gone by the middle, so the food
   is never dulled but the text always has something to sit on. */
.ms-hero-wash {
  position: absolute; inset: 0; z-index: -1;
  /* Barely there. Measured against the actual frame, forest-green text on the
     bare footage is 5.82:1 — already past the 4.5 minimum — so the old wash was
     buying nothing and flattening the left third into a pale band that read as
     "the image doesn't reach". This is just insurance for darker frames. */
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--cream, #f4efe2) 30%, transparent) 0%,
      color-mix(in oklab, var(--cream, #f4efe2) 16%, transparent) 20%,
      transparent 38%);
}

.ms-hero-inner { width: 100%; max-width: 1280px; margin-inline: auto; padding: 0 clamp(20px, 4vw, 40px); box-sizing: border-box; }
.ms-hero-copy { max-width: 46%; }

.ms-hero-eyebrow {
  margin: 0 0 18px; display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
}
.ms-hero-eyebrow span { color: color-mix(in oklab, var(--primary) 70%, transparent); }
.ms-hero-eyebrow::after { content: ""; flex: 0 0 84px; height: 1px; background: color-mix(in oklab, var(--accent) 55%, transparent); }

.ms-hero-h1 {
  margin: 0;
  font-family: var(--font-display);
  /* Sized so the description and BOTH calls to action stay above the fold. */
  font-size: clamp(44px, 5.6vw, 84px);
  font-weight: 600; line-height: 1.02; letter-spacing: -0.022em;
  color: var(--primary);
}
.ms-hero-h1 span { font-style: italic; color: var(--accent); }
.ms-hero-sub { margin: 22px 0 0; max-width: 34ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.6; color: color-mix(in oklab, var(--foreground) 82%, transparent); }
.ms-hero-hindi { margin: 12px 0 0; font-size: 18px; color: color-mix(in oklab, var(--primary) 90%, transparent); }

.ms-hero-cta { margin-top: 30px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; }
.ms-hero-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--radius-pill);
  background: var(--primary); color: var(--primary-foreground);
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; text-decoration: none;
  box-shadow: var(--shadow-lg); transition: transform .18s ease;
}
.ms-hero-btn:hover { transform: translateY(-1px); }
/* Secondary reads as a link, not a second button — one clear primary action. */
.ms-hero-link {
  border: none; background: transparent; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--primary);
  border-bottom: 1.5px solid var(--accent);
}
.ms-hero-link:hover { color: var(--accent); }


@media (max-width: 1024px) { .ms-hero-copy { max-width: 56%; } }

@media (max-width: 760px) {
  /* On a phone there isn't room to read over the photo, so the food sits
     underneath the words rather than behind them. */
  .ms-hero { min-height: 0; display: flex; flex-direction: column; }
  .ms-hero-inner { order: 1; }
  .ms-hero-media {
    order: 2; position: relative; inset: auto; z-index: 0;
    width: 100%; aspect-ratio: 16 / 11;
  }
  .ms-hero-media img, .ms-hero-media video { object-position: center 48%; }
  .ms-hero-wash { display: none; }
  .ms-hero-inner { padding: 36px 20px 28px; }
  .ms-hero-copy { max-width: none; }
  .ms-hero-h1 { font-size: clamp(34px, 9vw, 46px); }
  .ms-hero-cta { margin-top: 24px; }
}

/* ---- reassurance strip under the hero ---- */
.ms-reassure {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center;
  gap: 8px 18px; padding: 13px 20px;
  /* Tracking dialled back from 0.22em: at that spacing the four lines needed
     more than 1440px and wrapped to a second row, leaving a diamond dangling
     at the end of the first. Either they all fit on one row or they stack. */
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
}
.ms-reassure-item { white-space: nowrap; }
.ms-reassure-dot { color: var(--accent); }

@media (max-width: 1200px) {
  /* Below this the four lines can't share a row without breaking mid-phrase. */
  .ms-reassure { flex-direction: column; flex-wrap: wrap; gap: 9px; letter-spacing: 0.16em; font-size: 12px; }
  .ms-reassure-item { white-space: normal; text-align: center; }
  .ms-reassure-dot { display: none; }
}
@media (max-width: 480px) { .ms-reassure { font-size: 11px; letter-spacing: 0.12em; padding: 14px 18px; } }