/* ============================================================
   Mayuri menu widgets: mev_menu_hero, mev_menu_nav, mev_menu_cat
   Shared tokens on .mev-menu so each widget stands alone and does not
   depend on lovable-scoped.css being present on the page.

   Layout (two columns, sticky nav) comes from the Elementor container, not
   from here, so the team can restructure the page without touching CSS.
   ============================================================ */
.mev-menu{
  --m-cream:oklch(0.972 0.018 85);
  --m-forest:oklch(0.32 0.075 148);
  --m-deep:oklch(0.22 0.06 148);
  --m-saffron:oklch(0.68 0.19 42);
  --m-gold:oklch(0.78 0.13 75);
  --m-fg:oklch(0.18 0.03 148);
  --m-muted:oklch(0.45 0.03 148);
  --m-card:oklch(1 0 0);
  --m-second:oklch(0.94 0.02 85);
  --m-border:oklch(0.88 0.02 85);
  --m-veg:oklch(0.55 0.16 145);
  --m-nonveg:oklch(0.53 0.19 27);
  --m-egg:oklch(0.70 0.15 70);
  --m-serif:"Fraunces",Georgia,serif;
  --m-sans:"Inter",system-ui,sans-serif;
  --m-navh:0px;
  color:var(--m-fg); font-family:var(--m-sans); line-height:1.6;
}
.mev-menu *{ box-sizing:border-box; }
.mev-menu [hidden]{ display:none !important; }
.mev-menu img{ max-width:100%; display:block; }
.mev-menu p{ margin:0; }
.mev-menu a{ color:inherit; text-decoration:none; }
.mev-menu button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.mev-menu h1,.mev-menu h2,.mev-menu h3{
  font-family:var(--m-serif); font-weight:500; letter-spacing:-.02em; line-height:1.08; margin:0; }
.mev-menu :focus-visible{ outline:2px solid var(--m-saffron); outline-offset:3px; border-radius:6px; }
.mgn-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* the square-with-dot diet mark */
.mgc-dot{ width:12px; height:12px; border-radius:3px; border:1.7px solid currentColor;
  position:relative; display:inline-block; flex-shrink:0; }
.mgc-dot::after{ content:""; position:absolute; inset:2px; border-radius:50%; background:currentColor; }
.mgc-dot[data-d="veg"]{ color:var(--m-veg); }
.mgc-dot[data-d="nonveg"]{ color:var(--m-nonveg); }
.mgc-dot[data-d="egg"]{ color:var(--m-egg); }

/* ---------------- top fold ---------------- */
.mgh{ position:relative; isolation:isolate; overflow:hidden; color:var(--m-cream);
  display:flex; align-items:center; background:var(--m-deep); }
/* the theme ships img{height:auto}, which would let a portrait image overflow */
.mev-menu .mgh-bg{ position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:cover; z-index:0; }
.mgh-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,var(--ov-a),var(--ov-b) 46%,var(--ov-c)); }
.mgh-in{ position:relative; z-index:2; width:100%; max-width:1340px;
  margin-inline:auto; padding:3.4rem 1.5rem; }
.mgh-eyebrow{ font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.26em; color:var(--m-saffron); }
.mgh-h{ font-size:clamp(2.1rem,4.8vw,3.6rem); margin-top:.9rem !important;
  color:var(--m-cream); text-wrap:balance; max-width:20ch; }
.mgh-sub{ max-width:52ch; margin-top:1.1rem !important; font-size:1.02rem;
  color:oklch(0.94 0.02 85/.88); }
.mgh-facts{ display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.2rem;
  padding-top:1.5rem; border-top:1px solid oklch(1 0 0/.2); }
.mgh-facts b{ display:block; font-family:var(--m-serif); font-size:1.9rem;
  font-weight:600; line-height:1; color:var(--m-gold); }
.mgh-facts span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.18em;
  color:oklch(0.94 0.02 85/.7); }

/* ---------------- navigator ---------------- */
.mgn.is-sticky{ position:sticky; top:calc(var(--m-navh) + var(--mgn-gap,22px));
  align-self:start; z-index:5; }
.mgn-in{ display:flex; flex-direction:column; gap:.9rem;
  max-height:calc(100vh - var(--m-navh) - var(--mgn-gap,22px) - 1.5rem); }
.mgn-search{ position:relative; flex-shrink:0; }
.mgn-search svg{ position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  width:16px !important; height:16px !important; stroke:var(--m-muted); fill:none; stroke-width:2; }
/* the theme styles form controls and its padding wins without this */
.mev-menu .mgn-search .mgn-q{ width:100%; margin:0; height:auto; box-shadow:none;
  padding:.68rem 2.2rem .68rem 2.6rem !important; border-radius:999px !important;
  border:1px solid var(--m-border); background:var(--m-card);
  font-size:.88rem; line-height:1.4; color:var(--m-fg); font-family:inherit; }
.mgn-q::placeholder{ color:var(--m-muted); }
.mgn-clear{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; color:var(--m-muted); font-size:1.1rem;
  line-height:1; display:none; align-items:center; justify-content:center; }
.mgn-clear:hover{ background:var(--m-second); color:var(--m-forest); }
.mgn-search.has .mgn-clear{ display:flex; }
.mgn-diets{ display:flex; gap:.35rem; flex-shrink:0; }
.mgn-chip{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.45rem .3rem; border-radius:999px; border:1px solid var(--m-border);
  background:var(--m-card); font-size:.72rem; font-weight:500; white-space:nowrap;
  transition:background .2s, border-color .2s; }
.mgn-chip[aria-pressed="true"]{ background:var(--m-second); }
.mgn-chip[aria-pressed="true"] .mgn-chiplbl{ color:var(--m-forest); font-weight:600; }
.mgn-count{ font-size:.72rem; color:var(--m-muted); text-transform:uppercase;
  letter-spacing:.14em; padding-left:.2rem; flex-shrink:0; }
.mgn-count b{ color:var(--m-forest); font-weight:600; }
.mgn-list{ min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;
  border-top:1px solid var(--m-border); padding-top:.7rem;
  display:flex; flex-direction:column; gap:1px; }
.mgn-list::-webkit-scrollbar{ width:5px; }
.mgn-list::-webkit-scrollbar-thumb{ background:var(--m-border); border-radius:99px; }
.mgn-list a{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.42rem .75rem; border-radius:8px; font-size:.82rem; font-weight:500;
  color:var(--mgn-link,var(--m-muted)); transition:background .18s, color .18s; }
.mgn-list a em{ font-style:normal; font-size:.68rem; font-variant-numeric:tabular-nums;
  color:oklch(0.45 0.03 148/.55); }
.mgn-list a:hover{ background:var(--m-second); color:var(--m-forest); }
.mgn-list a.on{ background:var(--mgn-active-bg,var(--m-forest));
  color:var(--mgn-active-tx,var(--m-cream)); font-weight:600; }
.mgn-list a.on em{ color:var(--m-gold); }

/* ---------------- one category ---------------- */
.mgc-cat{ padding-bottom:3.2rem; scroll-margin-top:calc(var(--m-navh) + 22px); }
.mgc-head{ display:flex; align-items:flex-end; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.mgc-title{ font-size:clamp(1.6rem,2.8vw,2.2rem); color:var(--m-forest); }
.mgc-title sup{ font-family:var(--m-sans); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--m-saffron); margin-left:.5rem; }
.mgc-tag{ flex:1 1 320px; max-width:60ch; color:var(--m-muted); font-size:.9rem; }
.mgc-rule{ height:2px; background:linear-gradient(90deg,var(--m-gold),transparent); margin-bottom:1.6rem; }
.mgc-grid{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.mgc-grid[data-cols="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mgc-grid[data-cols="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mgc-grid[data-cols="4"]{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mgc-card{ background:var(--m-card); border:1px solid var(--m-border); border-radius:1rem;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.mgc-card{ position:relative; z-index:0; }
.mgc-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px oklch(0.22 0.06 148/.13); }
.mgc-ph{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--m-second); }
.mev-menu .mgc-ph img{ width:100% !important; height:100% !important; object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1); }
.mgc-card:hover .mgc-ph img{ transform:scale(1.06); }
.mgc-diet{ position:absolute; top:.6rem; left:.6rem; width:20px; height:20px; border-radius:4px;
  background:oklch(1 0 0/.94); display:flex; align-items:center; justify-content:center; }
.mgc-diet .mgc-dot{ width:11px; height:11px; }
.mgc-tagbadge{ position:absolute; top:.6rem; right:.6rem; background:var(--m-saffron); color:#fff;
  font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  padding:.3rem .55rem; border-radius:999px; }
.mgc-body{ padding:.95rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.mgc-top{ display:flex; align-items:baseline; gap:.6rem; }
.mgc-name{ font-family:var(--m-serif); font-size:1.02rem; font-weight:600;
  color:var(--m-forest); line-height:1.2; flex:1; letter-spacing:-.01em; }
.mgc-price{ font-size:.95rem; font-weight:700; color:var(--m-fg);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.mgc-price s{ display:block; font-size:.62rem; font-weight:500; color:var(--m-muted);
  text-decoration:none; text-transform:uppercase; letter-spacing:.1em; text-align:right; }
.mgc-desc{ font-size:.81rem; color:var(--m-muted); line-height:1.5; }
.mgc-note{ margin-top:auto !important; padding-top:.55rem; border-top:1px dashed var(--m-border);
  font-size:.71rem; color:var(--m-forest); }

/* injected by the navigator when a search matches nothing */
.mgn-empty{ text-align:center; padding:3rem 1.5rem 4rem; }
.mgn-empty h3{ font-size:1.8rem; color:var(--m-forest); margin-bottom:.6rem; }
.mgn-empty p{ color:var(--m-muted); margin-bottom:1.4rem; }
.mgn-empty button{ display:inline-flex; align-items:center; border-radius:999px;
  padding:.85rem 1.6rem; background:var(--m-forest); color:var(--m-cream);
  font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; }

@media(max-width:1024px){
  /* The sweep runs left to right, so on a narrow frame the opaque end covers
     the whole hero and the photo disappears. The text fills the frame here, so
     there is no light side to give it: even it out at a strength the picture
     still reads through and the cream type still holds. */
  .mgh-scrim{ background:linear-gradient(180deg,var(--ov-s),var(--ov-m) 62%,var(--ov-s)); }
  .mgn.is-sticky{ position:sticky; top:var(--m-navh); z-index:40;
    background:oklch(0.972 0.018 85/.96); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--m-border); margin-inline:calc(50% - 50vw); padding-inline:1.2rem; }
  .mgn-in{ max-height:none; gap:.6rem; padding:.7rem 0; }
  .mgn-search{ max-width:340px; }
  .mgn-diets{ max-width:420px; }
  .mgn-count{ display:none; }
  .mgn-list{ flex-direction:row; overflow-x:auto; overflow-y:hidden; border-top:0;
    padding-top:0; gap:.4rem; }
  .mgn-list::-webkit-scrollbar{ display:none; }
  .mgn-list a{ border-radius:999px; padding:.42rem .9rem; font-size:.76rem; white-space:nowrap; }
  .mgn-list a em{ display:none; }
}
@media(max-width:560px){
  .mgh-in{ padding:2.6rem 0; }
  .mgh-facts{ gap:1.6rem; margin-top:1.6rem; }
  .mgh-facts b{ font-size:1.5rem; }
  .mev-menu .mgn-search .mgn-q{ font-size:16px; }  /* stop iOS zooming on focus */
  .mgc-grid{ grid-template-columns:1fr 1fr !important; gap:.8rem; }
  .mgc-body{ padding:.75rem .8rem .9rem; }
  .mgc-name{ font-size:.92rem; }
  .mgc-price{ font-size:.88rem; }
  .mgc-desc{ font-size:.76rem; }
  .mgc-cat{ padding-bottom:2.2rem; }
}
@media(prefers-reduced-motion:reduce){
  .mgc-card, .mev-menu .mgc-ph img{ transition:none; }
}

/* The theme adds mev-el/mev-rl/mev-rr entrance animations to elements inside
   widgets. That was tolerable when the menu was one widget; across 21 category
   widgets it re-triggers per widget and looks like a fault. Menu content is
   shown outright, the site's other pages are untouched. */
.mev-menu .mev-el,
.mev-menu .mev-rl,
.mev-menu .mev-rr,
.mev-menu.mev-el,
.mev-menu.mev-rl,
.mev-menu.mev-rr{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
}
/* keep the deliberate card hover, which the rule above would otherwise kill */
.mev-menu .mgc-card{ transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease !important; }
.mev-menu .mgc-card:hover{ transform:translateY(-5px) !important; }
.mev-menu .mgc-ph img{ transition:transform .55s cubic-bezier(.16,1,.3,1) !important; }
.mev-menu .mgc-card:hover .mgc-ph img{ transform:scale(1.06) !important; }