@charset "UTF-8";
/* ==========================================================================
   GanesH website — shared stylesheet (2026 design system)
   Tokens are copied from the Claude Design "Ganesh Indian Restaurant" design
   system (tokens/*.css). Components below are CSS versions of its React
   components (Button, Card, Badge, SectionTitle, ShopButton, MenuCategoryTile,
   MenuItem, PriceTag, HeaderBar, SiteFooter, BannerSlider).
   Fonts load from Google Fonts in each page's <head>.
   ========================================================================== */

/* ---------- Tokens: colours ---------- */
:root{
  --ganesh-orange-900:#6E2507; --ganesh-orange-800:#8F310A; --ganesh-orange-700:#B8410C;
  --ganesh-orange-600:#DE5312; --ganesh-orange-500:#F26A21; --ganesh-orange-400:#F79233;
  --ganesh-orange-300:#FBB56C; --ganesh-orange-100:#FDE6D3; --ganesh-orange-050:#FFF4EA;

  --ganesh-green-800:#0A4A19; --ganesh-green-700:#0F6323; --ganesh-green-600:#157A2E;
  --ganesh-green-500:#1E9B3C; --ganesh-green-400:#5FBF4E; --ganesh-green-300:#95D77F;
  --ganesh-green-100:#E1F1D9; --ganesh-green-050:#F2F9ED;

  --ganesh-yellow-600:#DE9A0C; --ganesh-yellow-500:#F6B41A; --ganesh-yellow-400:#FCC93F;
  --ganesh-yellow-300:#FFDD6B; --ganesh-yellow-100:#FFF3CE;

  --ganesh-brown-800:#331608; --ganesh-brown-700:#4A2412; --ganesh-brown-500:#7A4423;
  --ganesh-brown-300:#B98A63; --ganesh-brown-200:#D9BFA8;

  --ganesh-teal-500:#3FA9AE; --ganesh-teal-400:#6EC6CB; --ganesh-teal-100:#DBF0F1;
  --ganesh-lime-400:#A8CE5B; --ganesh-lime-100:#EDF5DA;
  --ganesh-pink-300:#F2A8B8; --ganesh-pink-200:#F9D2DA;

  --ganesh-red-600:#C10017; --ganesh-red-500:#E3001B;

  --ganesh-paper:#FFFFFF; --ganesh-cream:#FFF8EC; --ganesh-sand:#F6EEE1;
  --ganesh-ink-900:#2B1A10; --ganesh-ink-700:#4A3A2E; --ganesh-ink-500:#7A6A5D;
  --ganesh-ink-300:#C9BCAF; --ganesh-ink-200:#E4DACE; --ganesh-ink-100:#EFE7DC;

  --spice-1:#A6CE39; --spice-2:#C7D02A; --spice-3:#E0C11E; --spice-4:#E8A81C;
  --spice-5:#EE8A1B; --spice-6:#F0701A; --spice-7:#EE4A18; --spice-8:#E3001B;

  --text-heading:var(--ganesh-brown-700); --text-body:var(--ganesh-ink-700);
  --text-muted:var(--ganesh-ink-500); --text-inverse:var(--ganesh-paper);
  --text-brand:var(--ganesh-orange-700); --text-brand-alt:var(--ganesh-green-600);
  --text-price:var(--ganesh-red-500);
  --text-link:var(--ganesh-orange-700); --text-link-hover:var(--ganesh-orange-800);

  --surface-page:var(--ganesh-cream); --surface-card:var(--ganesh-paper);
  --surface-sunken:var(--ganesh-sand); --surface-brand:var(--ganesh-orange-500);
  --surface-brand-soft:var(--ganesh-orange-050); --surface-alt:var(--ganesh-green-500);
  --surface-alt-soft:var(--ganesh-green-050); --surface-warm:var(--ganesh-yellow-400);
  --surface-warm-soft:var(--ganesh-yellow-100); --surface-dark:var(--ganesh-brown-700);

  --border-subtle:var(--ganesh-ink-200); --border-strong:var(--ganesh-ink-300);
  --border-brand:var(--ganesh-orange-500); --border-alt:var(--ganesh-green-500);

  --action-primary-bg:var(--ganesh-orange-700); --action-primary-bg-hover:var(--ganesh-orange-800);
  --action-primary-bg-active:var(--ganesh-orange-900); --action-primary-fg:var(--ganesh-paper);
  --action-secondary-bg:var(--ganesh-green-600); --action-secondary-bg-hover:var(--ganesh-green-700);
  --action-secondary-bg-active:var(--ganesh-green-800); --action-secondary-fg:var(--ganesh-paper);
  --action-disabled-bg:var(--ganesh-ink-200); --action-disabled-fg:var(--ganesh-ink-500);
  --focus-ring:var(--ganesh-yellow-500);
}

/* ---------- Tokens: type, spacing, radius, elevation, motion ---------- */
:root{
  --font-display:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --font-latin-display:"Fredoka","M PLUS Rounded 1c",sans-serif;
  --font-hand:"Patrick Hand","M PLUS Rounded 1c",cursive;

  --weight-regular:400; --weight-medium:500; --weight-bold:700; --weight-heavy:800; --weight-black:900;

  --text-3xs:11px; --text-2xs:12px; --text-xs:13px; --text-sm:14px; --text-base:16px; --text-md:18px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:64px;
  --text-6xl:84px;

  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.6; --leading-loose:1.85;
  --tracking-tight:-0.02em; --tracking-wide:0.06em; --tracking-wider:0.14em; --tracking-lockup:0.34em;

  --type-display:var(--weight-black) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-heavy) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-h2:var(--weight-heavy) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-lead:var(--weight-medium) var(--text-md)/var(--leading-loose) var(--font-body);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-caption:var(--weight-medium) var(--text-2xs)/var(--leading-normal) var(--font-body);
  --type-label:var(--weight-bold) var(--text-sm)/1 var(--font-display);
  --type-hand:var(--weight-regular) var(--text-md)/var(--leading-snug) var(--font-hand);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --gutter-page:20px; --container-wide:1200px;
  --control-h-sm:36px; --control-h-md:48px; --control-h-lg:60px; --tap-min:48px;

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px;
  --radius-2xl:36px; --radius-pill:999px; --radius-circle:50%;
  --border-regular:2px; --border-chunky:3px; --border-poster:4px;

  --shadow-xs:0 1px 2px rgba(74,36,18,.10);
  --shadow-sm:0 2px 6px rgba(74,36,18,.10);
  --shadow-md:0 4px 14px rgba(74,36,18,.12);
  --shadow-lg:0 10px 28px rgba(74,36,18,.16);
  --shadow-press:inset 0 2px 5px rgba(74,36,18,.22);
  --scrim-bottom:linear-gradient(to top,rgba(43,26,16,.72) 0%,rgba(43,26,16,.38) 45%,transparent 100%);

  --ease-out:cubic-bezier(.22,.8,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slide:600ms; --press-scale:.97; --hover-lift:-2px;

  /* Paper grain: a tiny warm-brown noise tile (inline SVG) laid over page backgrounds. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.14 0 0 0 0 0.07 0.16 0 0 0 -0.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");

  /* page padding used by every section */
  --pad-x:clamp(20px,4vw,40px);
  --pad-section:clamp(48px,7vw,80px);
}
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slide:0ms; --press-scale:1; --hover-lift:0px; }
  html{ scroll-behavior:auto !important; }
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:140px; }
body{ margin:0; background-color:var(--surface-page); background-image:var(--grain); color:var(--text-body); font:var(--type-body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
h1,h2,h3,h4{ color:var(--text-heading); margin:0; }
p{ margin:0; text-wrap:pretty; }
/* height:auto: without it, an <img width= height=> keeps its attribute height (e.g. 397px) whenever CSS sets only the width. */
img{ max-width:100%; height:auto; }
a{ color:var(--text-link); }
a:hover{ color:var(--text-link-hover); }
:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-xs); }
[hidden]{ display:none !important; }
.g-skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--action-primary-bg); color:#fff; padding:10px 16px; border-radius:var(--radius-pill); text-decoration:none; font:var(--type-label); }
.g-skip:focus{ top:12px; color:#fff; }
.g-wrap{ max-width:var(--container-wide); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }
.g-hand{ font:var(--type-hand); }
.g-muted{ color:var(--text-muted); }
.g-icon{ display:block; flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Header (HeaderBar + nav) ---------- */
.g-top{ position:sticky; top:0; z-index:50; box-shadow:var(--shadow-sm); padding-top:env(safe-area-inset-top,0px); background:var(--surface-card); }
.g-header{ display:grid; grid-template-columns:56px 1fr 56px; align-items:center; padding:var(--space-3) var(--gutter-page); background:var(--surface-card); border-bottom:var(--border-chunky) solid var(--ganesh-orange-500); }
.g-header__back{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-circle); background:var(--ganesh-orange-050); color:var(--text-brand); text-decoration:none; }
.g-header__back:hover{ background:var(--ganesh-orange-100); }
.g-header__back .g-icon{ width:22px; height:22px; }
.g-header__logo{ display:grid; place-items:center; text-decoration:none; }
.g-header__logo img{ height:48px; width:auto; display:block; }
.g-header__lang{ justify-self:end; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:var(--radius-pill); border:var(--border-regular) solid var(--ganesh-green-500); background:var(--surface-card); color:var(--ganesh-green-600); font:var(--weight-bold) var(--text-2xs)/1 var(--font-display); letter-spacing:var(--tracking-wide); text-decoration:none; white-space:nowrap; }
.g-header__lang:hover{ background:var(--ganesh-green-050); color:var(--ganesh-green-700); }
.g-header__lang .g-icon{ width:14px; height:14px; }

.g-nav{ background:var(--ganesh-paper); border-bottom:2px solid var(--ganesh-orange-100); }
.g-nav__inner{ max-width:var(--container-wide); margin:0 auto; padding:8px clamp(12px,3vw,40px); display:flex; gap:4px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.g-nav__inner::-webkit-scrollbar{ display:none; }
.g-nav__link{ flex:none; display:inline-flex; align-items:center; padding:10px 16px; min-height:44px; border-radius:var(--radius-pill); font:700 15px/1 var(--font-display); white-space:nowrap; color:var(--ganesh-brown-700); text-decoration:none; transition:background var(--dur-base) var(--ease-out); }
.g-nav__link:hover{ background:var(--ganesh-orange-050); color:var(--ganesh-brown-700); }
.g-nav__link.is-active{ background:var(--action-primary-bg); color:var(--ganesh-paper); }
.g-nav__spacer{ flex:1 0 12px; }

/* ---------- Button ---------- */
.g-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); height:var(--control-h-md); padding:0 var(--space-6); font:var(--weight-bold) var(--text-base)/1 var(--font-display); letter-spacing:var(--tracking-wide); color:var(--action-primary-fg); background:var(--action-primary-bg); border:var(--border-regular) solid transparent; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out); }
.g-btn .g-icon{ width:20px; height:20px; }
.g-btn:hover{ background:var(--action-primary-bg-hover); color:var(--action-primary-fg); transform:translateY(var(--hover-lift)); }
.g-btn:active{ background:var(--action-primary-bg-active); box-shadow:var(--shadow-press); transform:scale(var(--press-scale)); }
.g-btn--sm{ height:var(--control-h-sm); padding:0 var(--space-4); font-size:var(--text-sm); }
.g-btn--sm .g-icon{ width:16px; height:16px; }
.g-btn--lg{ height:var(--control-h-lg); padding:0 var(--space-8); font-size:var(--text-md); }
.g-btn--lg .g-icon{ width:24px; height:24px; }
.g-btn--block{ display:flex; width:100%; }
.g-btn--secondary{ background:var(--action-secondary-bg); color:var(--action-secondary-fg); }
.g-btn--secondary:hover{ background:var(--action-secondary-bg-hover); color:var(--action-secondary-fg); }
.g-btn--secondary:active{ background:var(--action-secondary-bg-active); }
.g-btn--outline{ background:var(--surface-card); color:var(--text-brand); border-color:var(--ganesh-orange-500); }
.g-btn--outline:hover{ background:var(--ganesh-orange-050); color:var(--text-brand); }
.g-btn--outline:active{ background:var(--ganesh-orange-100); }
.g-btn--warm{ background:var(--ganesh-yellow-400); color:var(--ganesh-brown-700); }
.g-btn--warm:hover{ background:var(--ganesh-yellow-500); color:var(--ganesh-brown-700); }
.g-btn--warm:active{ background:var(--ganesh-yellow-600); }
.g-btn--disabled,.g-btn--disabled:hover{ background:var(--action-disabled-bg); color:var(--action-disabled-fg); box-shadow:none; transform:none; cursor:not-allowed; }

/* ---------- Badge ---------- */
.g-badge{ display:inline-flex; align-items:center; gap:var(--space-1); padding:5px var(--space-3); border-radius:var(--radius-pill); background:var(--ganesh-orange-700); color:var(--ganesh-paper); font:var(--weight-bold) var(--text-2xs)/1 var(--font-display); letter-spacing:var(--tracking-wide); white-space:nowrap; }
.g-badge--green{ background:var(--ganesh-green-600); }
.g-badge--yellow{ background:var(--ganesh-yellow-400); color:var(--ganesh-brown-700); }
.g-badge--red{ background:var(--ganesh-red-500); }
.g-badge--brown{ background:var(--ganesh-brown-700); color:var(--ganesh-cream); }
.g-badge--teal{ background:var(--ganesh-teal-400); color:var(--ganesh-brown-700); }
.g-badge--lg{ padding:7px 14px; font-size:var(--text-sm); line-height:1.4; white-space:normal; max-width:100%; }

/* ---------- Card ---------- */
.g-card{ display:block; background:var(--surface-card); color:var(--text-body); border:var(--border-regular) solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); box-shadow:var(--shadow-sm); }
.g-card--md{ box-shadow:var(--shadow-md); }
.g-card--flat{ box-shadow:none; }
.g-card--orange{ background:var(--ganesh-orange-050); border-color:var(--ganesh-orange-300); color:var(--ganesh-brown-700); }
.g-card--green{ background:var(--ganesh-green-050); border-color:var(--ganesh-green-400); color:var(--ganesh-green-700); }
.g-card--yellow{ background:var(--ganesh-yellow-100); border-color:var(--ganesh-yellow-400); color:var(--ganesh-brown-700); }
.g-card--teal{ background:var(--ganesh-teal-100); border-color:var(--ganesh-teal-400); color:var(--ganesh-brown-700); }
.g-card--dark{ background:var(--surface-dark); border-color:var(--ganesh-brown-500); color:var(--ganesh-cream); }
a.g-card{ text-decoration:none; transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out); }
a.g-card:hover{ transform:translateY(var(--hover-lift)); box-shadow:var(--shadow-md); color:inherit; }

/* ---------- SectionTitle ---------- */
.g-title{ display:grid; justify-items:center; gap:var(--space-2); }
.g-title__row{ display:flex; align-items:center; gap:var(--space-3); }
.g-title h1,.g-title h2{ font:var(--type-h2); color:var(--text-heading); text-align:center; text-wrap:balance; }
.g-title__sub{ font:var(--type-small); color:var(--text-muted); text-align:center; }
.g-title__rule{ display:flex; align-items:center; gap:4px; color:var(--ganesh-green-500); flex:none; }
.g-title__rule--flip{ transform:scaleX(-1); }
.g-title__rule i{ display:block; border-radius:50%; background:currentColor; }
.g-title__rule i:nth-child(1){ width:8px; height:8px; opacity:.45; }
.g-title__rule i:nth-child(2){ width:6px; height:6px; opacity:.7; }
.g-title__rule i:nth-child(3){ width:34px; height:3px; border-radius:2px; }
.g-title--orange .g-title__rule{ color:var(--ganesh-orange-500); }
.g-title--brown .g-title__rule{ color:var(--ganesh-brown-700); }
.g-title--left{ justify-items:start; }
.g-title--left .g-title__sub{ text-align:left; }
.g-title--left h1,.g-title--left h2{ text-align:left; }
@media (max-width:420px){ .g-title__rule i:nth-child(3){ width:18px; } }

/* page header bands (Menu / Shop pages) */
.g-band{ padding:clamp(32px,5vw,56px) var(--pad-x); border-bottom:2px solid var(--ganesh-orange-100); background:var(--grain), var(--ganesh-orange-050); }
.g-band--green{ background:var(--grain), var(--ganesh-green-050); border-bottom-color:var(--ganesh-green-100); }
.g-band--yellow{ background:var(--grain), var(--ganesh-yellow-100); border-bottom-color:var(--ganesh-yellow-300); }
.g-band > *{ max-width:var(--container-wide); margin:0 auto; }

.g-section{ max-width:var(--container-wide); margin:0 auto; padding:var(--pad-section) var(--pad-x) 0; }
.g-section--last{ padding-bottom:var(--pad-section); }
.g-section--sunken{ max-width:none; margin-top:var(--pad-section); background:var(--grain), var(--surface-sunken); padding-bottom:var(--pad-section); }
.g-section--sunken > .g-inner{ max-width:var(--container-wide); margin:0 auto; }

/* ---------- Home hero ---------- */
.g-hero{ position:relative; overflow:hidden; background:var(--grain), linear-gradient(160deg,var(--ganesh-yellow-400) 0%,var(--ganesh-yellow-300) 45%,var(--ganesh-orange-400) 100%); }
.g-hero__wedge-a{ position:absolute; left:-6%; bottom:-2px; width:46%; height:42%; background:var(--grain), var(--ganesh-green-500); clip-path:polygon(0 100%,0 35%,100% 100%); }
.g-hero__wedge-b{ position:absolute; right:-4%; top:0; width:38%; height:56%; background:var(--grain), var(--ganesh-orange-500); clip-path:polygon(100% 0,10% 0,100% 100%); }
.g-hero__ring{ position:absolute; right:8%; top:10%; width:420px; height:420px; border-radius:50%; border:2px dashed rgba(255,255,255,.35); box-shadow:0 0 0 28px rgba(255,255,255,.08),0 0 0 60px rgba(255,255,255,.06); }
.g-hero__inner{ position:relative; max-width:var(--container-wide); margin:0 auto; padding:clamp(32px,6vw,72px) var(--pad-x) clamp(48px,7vw,88px); display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,56px); align-items:center; }
.g-hero__text{ flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.g-hero__title{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,6.6vw,80px); line-height:1.08; letter-spacing:-0.02em; color:var(--ganesh-brown-700); text-wrap:balance; }
.g-hero__gloss{ margin-top:-8px; font:var(--type-hand); font-size:24px; color:var(--ganesh-brown-700); }
.g-hero__lead{ font:var(--type-lead); color:var(--ganesh-brown-700); max-width:34em; }
.g-hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.g-hero__media{ flex:1 1 360px; min-width:0; max-width:560px; border-radius:var(--radius-xl); overflow:hidden; border:4px solid var(--ganesh-paper); box-shadow:var(--shadow-lg); background:var(--ganesh-brown-700); }

/* ---------- BannerSlider ---------- */
.g-slider{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ganesh-sand); }
/* Hidden slides are also invisible to clicks and keyboard focus (some slides are links). */
.g-slider__slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity var(--dur-slide) var(--ease-in-out), visibility 0s linear var(--dur-slide); }
.g-slider__slide.is-active{ opacity:1; visibility:visible; transition:opacity var(--dur-slide) var(--ease-in-out); }
.g-slider__slide a{ display:block; width:100%; height:100%; }
.g-slider__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.g-slider__dots{ position:absolute; left:0; right:0; bottom:var(--space-3); display:flex; justify-content:center; gap:var(--space-2); }
.g-slider__dot{ width:10px; height:10px; padding:0; border-radius:var(--radius-pill); border:none; background:rgba(255,255,255,.75); cursor:pointer; transition:width var(--dur-base) var(--ease-out); }
.g-slider__dot.is-active{ width:24px; background:var(--ganesh-orange-500); }

/* ---------- Quick links (home) ---------- */
.g-quick{ max-width:var(--container-wide); margin:-36px auto 0; padding:0 var(--pad-x); position:relative; }
.g-quick__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px; }
.g-quick__item{ display:flex; gap:16px; align-items:center; padding:20px; }
.g-quick__disc{ flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; }
.g-quick__disc .g-icon{ width:28px; height:28px; }
.g-quick__disc--orange{ background:var(--ganesh-orange-100); color:var(--ganesh-orange-700); }
.g-quick__disc--green{ background:var(--ganesh-green-100); color:var(--ganesh-green-700); }
.g-quick__disc--yellow{ background:var(--ganesh-yellow-300); color:var(--ganesh-brown-700); }
.g-quick__disc--red{ background:var(--ganesh-pink-200); color:var(--ganesh-red-600); }
.g-quick__body{ flex:1; min-width:0; }
.g-quick__title{ font:var(--type-h3); color:var(--text-heading); word-break:keep-all; }
.g-quick__sub{ font:var(--type-small); color:var(--text-muted); }
.g-quick__chev{ color:var(--ganesh-orange-700); }

/* ---------- Area chips + ShopButton ---------- */
.g-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0 20px; }
.g-chip{ border:2px solid var(--ganesh-green-300); background:var(--ganesh-paper); color:var(--ganesh-green-700); padding:8px 18px; min-height:44px; border-radius:var(--radius-pill); font:700 15px/1 var(--font-display); cursor:pointer; }
.g-chip:hover{ background:var(--ganesh-green-050); }
.g-chip[aria-pressed="true"]{ background:var(--action-secondary-bg); border-color:var(--action-secondary-bg); color:var(--ganesh-paper); }
.g-shops{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px; }
.g-shopbtn{ display:grid; grid-template-columns:36px 1fr 20px; align-items:center; gap:var(--space-3); width:100%; min-height:var(--tap-min); padding:var(--space-3) var(--space-4); background:var(--surface-card); border:var(--border-regular) solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); text-decoration:none; transition:all var(--dur-base) var(--ease-out); }
.g-shopbtn:hover{ background:var(--ganesh-orange-050); border-color:var(--ganesh-orange-500); box-shadow:var(--shadow-md); transform:translateY(var(--hover-lift)); }
.g-shopbtn__pin{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ganesh-green-100); color:var(--ganesh-green-600); }
.g-shopbtn__pin .g-icon{ width:20px; height:20px; }
.g-shopbtn__text{ display:grid; gap:2px; }
.g-shopbtn__name{ font:var(--weight-heavy) var(--text-md)/1.2 var(--font-display); color:var(--text-heading); }
.g-shopbtn__area{ font:var(--type-caption); color:var(--text-muted); }
.g-shopbtn__chev{ color:var(--ganesh-orange-500); }
.g-shopbtn__chev .g-icon{ width:20px; height:20px; }

/* ---------- MenuCategoryTile ---------- */
.g-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.g-tile{ display:grid; justify-items:center; align-content:start; gap:var(--space-2); padding:var(--space-3) var(--space-2) var(--space-4); min-height:124px; background:var(--ganesh-orange-050); color:var(--ganesh-brown-700); border:var(--border-regular) solid var(--ganesh-orange-300); border-radius:var(--radius-lg); box-shadow:var(--shadow-xs); text-decoration:none; transition:all var(--dur-base) var(--ease-out); }
.g-tile:hover{ box-shadow:var(--shadow-md); transform:translateY(var(--hover-lift)); color:var(--ganesh-brown-700); }
/* Category illustrations sit on a white "plate" (the artwork has a white background). */
.g-tile__img{ display:block; width:80px; height:80px; max-width:100%; border-radius:var(--radius-md); background:var(--ganesh-paper); box-shadow:var(--shadow-xs); overflow:hidden; }
.g-tile__img img{ display:block; width:100%; height:100%; object-fit:cover; }
.g-tile:hover .g-tile__img img{ transform:scale(1.04); transition:transform var(--dur-base) var(--ease-out); }
.g-tile__label{ font:var(--weight-heavy) var(--text-sm)/1.25 var(--font-display); text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
.g-tile__sub{ font:var(--type-hand); font-size:var(--text-xs); line-height:1.1; color:var(--ganesh-ink-700); text-align:center; }
.g-tile:nth-child(4n+2){ background:var(--ganesh-green-050); border-color:var(--ganesh-green-400); color:var(--ganesh-green-800); }
.g-tile:nth-child(4n+3){ background:var(--ganesh-yellow-100); border-color:var(--ganesh-yellow-400); }
.g-tile:nth-child(4n+4){ background:var(--ganesh-teal-100); border-color:var(--ganesh-teal-400); }
.g-tile.is-active{ background:var(--ganesh-orange-300); }
.g-tile.is-active:nth-child(4n+2){ background:var(--ganesh-green-400); }
.g-tile.is-active:nth-child(4n+3){ background:var(--ganesh-yellow-400); }
.g-tile.is-active:nth-child(4n+4){ background:var(--ganesh-teal-400); }

/* ---------- MenuItem ---------- */
.g-menuitem{ display:grid; grid-template-columns:84px 1fr auto; gap:var(--space-4); align-items:center; padding:var(--space-4); border-radius:var(--radius-md); border-bottom:1px dashed var(--border-strong); text-decoration:none; color:var(--text-body); transition:background var(--dur-fast) var(--ease-out); }
.g-menuitem:hover{ background:var(--ganesh-orange-050); color:var(--text-body); }
.g-menuitem__img{ width:84px; height:84px; object-fit:cover; border-radius:var(--radius-md); display:block; background:var(--surface-sunken); }
.g-menuitem__body{ min-width:0; }
.g-menuitem__name{ font:var(--weight-heavy) var(--text-md)/1.3 var(--font-display); color:var(--text-heading); }
.g-menuitem__gloss{ font:var(--type-hand); color:var(--text-muted); margin-top:2px; }
.g-menuitem__desc{ font:var(--type-small); color:var(--text-body); margin-top:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.g-menuitem__price{ font:var(--weight-black) var(--text-xl)/1 var(--font-latin-display); color:var(--text-price); white-space:nowrap; letter-spacing:-0.02em; }
@media (max-width:480px){
  .g-menuitem{ grid-template-columns:72px 1fr; padding:var(--space-3) var(--space-2); }
  .g-menuitem__img{ width:72px; height:72px; grid-row:span 2; }
  .g-menuitem__price{ grid-column:2; font-size:var(--text-lg); }
}
.g-group__head{ display:flex; align-items:center; gap:12px; margin:20px 0 4px; }
.g-group__title{ font:var(--type-h3); color:var(--ganesh-orange-700); white-space:nowrap; }
.g-group__rule{ flex:1; height:2px; background:var(--ganesh-orange-100); }

/* ---------- PriceTag ---------- */
.g-price{ display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1; }
.g-price__was{ font:var(--weight-bold) var(--text-sm)/1 var(--font-display); color:var(--ganesh-brown-700); text-decoration:line-through; text-decoration-thickness:2px; margin-bottom:4px; }
.g-price__value{ font:var(--weight-black) var(--text-2xl)/1 var(--font-latin-display); color:var(--text-price); letter-spacing:-0.02em; }
.g-price__note{ font:var(--weight-medium) var(--text-2xs)/1 var(--font-body); color:var(--text-muted); margin-top:4px; }
.g-price--sm .g-price__value{ font-size:var(--text-lg); }
.g-price--lg .g-price__value{ font-size:var(--text-4xl); }
.g-price--lg .g-price__note{ font-size:var(--text-sm); }

/* ---------- Spice scale ---------- */
.g-spice{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(3px,.8vw,8px); }
.g-spice__step{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.g-spice__chip{ width:100%; height:40px; display:grid; place-items:center; border-radius:8px; color:var(--ganesh-brown-700); font:900 clamp(15px,2vw,20px)/1 var(--font-display); }
.g-spice__label{ font:700 clamp(10px,1.4vw,13px)/1.2 var(--font-display); color:var(--text-heading); text-align:center; word-break:keep-all; overflow-wrap:anywhere; }

/* ---------- Info rows (shop details) ---------- */
.g-rows{ margin:12px 0 0; }
.g-row{ display:grid; grid-template-columns:22px 1fr; gap:12px; padding:12px 0; border-bottom:1px dashed var(--border-strong); align-items:start; }
.g-row .g-icon{ width:20px; height:20px; color:var(--ganesh-green-600); margin-top:2px; }
.g-row__label{ display:block; font:var(--type-caption); color:var(--text-muted); }
.g-row a{ font-weight:700; }
.g-map{ flex:1 1 360px; min-width:0; min-height:320px; border-radius:var(--radius-lg); overflow:hidden; border:2px solid var(--border-subtle); background:var(--surface-sunken); box-shadow:var(--shadow-sm); }
.g-map iframe{ display:block; width:100%; height:100%; min-height:320px; border:0; }

/* ---------- Footer ---------- */
.g-footer{ background:var(--surface-dark); color:var(--ganesh-cream); padding:var(--space-10) var(--gutter-page) calc(var(--space-8) + env(safe-area-inset-bottom,0px)); display:grid; justify-items:center; gap:var(--space-6); }
.g-footer__logo{ height:72px; width:auto; display:block; }
.g-footer__links{ display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }
.g-footer__link{ display:inline-flex; align-items:center; gap:var(--space-2); padding:10px var(--space-5); min-height:44px; border-radius:var(--radius-pill); background:var(--action-primary-bg); color:var(--ganesh-paper); font:var(--weight-bold) var(--text-sm)/1 var(--font-display); text-decoration:none; }
.g-footer__link:hover{ background:var(--action-primary-bg-hover); color:var(--ganesh-paper); }
.g-footer__link--green{ background:var(--action-secondary-bg); }
.g-footer__link--green:hover{ background:var(--action-secondary-bg-hover); }
.g-footer__link .g-icon{ width:18px; height:18px; }
.g-footer__text{ display:grid; justify-items:center; gap:4px; text-align:center; }
.g-footer__ja{ font:var(--weight-medium) var(--text-2xs)/1.7 var(--font-body); color:var(--ganesh-brown-200); }
.g-footer__en{ font:var(--type-hand); font-size:var(--text-sm); color:var(--ganesh-brown-200); }
.g-footer__company{ font:var(--weight-bold) var(--text-2xs)/1.7 var(--font-display); color:var(--ganesh-cream); letter-spacing:var(--tracking-wide); margin-top:var(--space-3); }

/* ---------- Campaign card (home) ---------- */
.g-campaigns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:20px; margin-top:24px; }
.g-campaign{ padding:0; overflow:hidden; display:flex; min-height:240px; }
.g-campaign__img{ flex:0 0 38%; width:38%; object-fit:contain; display:block; min-height:100%; padding:8px; background:var(--ganesh-paper); border-right:2px solid var(--border-subtle); }
.g-campaign__body{ flex:1; min-width:0; padding:20px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.g-campaign__title{ font:var(--type-h3); color:var(--text-heading); }
.g-campaign__where{ font:var(--type-small); color:var(--text-muted); }
.g-campaign__foot{ margin-top:auto; display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; width:100%; }
/* Phones and small tablets: picture on top (full width), text below. Desktop keeps picture beside text. */
@media (max-width:640px){
  .g-campaign{ flex-direction:column; min-height:0; }
  .g-campaign__img{ flex:none; width:100%; height:auto; min-height:0; aspect-ratio:2/1; max-height:200px; padding:8px 12px; border-right:0; border-bottom:2px solid var(--border-subtle); }
  .g-campaign__body{ padding:16px 18px 20px; }
}

/* ---------- Generic layout helpers ---------- */
.g-split{ display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,48px); align-items:flex-start; }
.g-stack{ display:flex; flex-direction:column; gap:12px; }
.g-cluster{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.g-center{ display:flex; justify-content:center; }
.g-note{ font:var(--type-small); color:var(--text-muted); }
.g-tiles--wide{ grid-template-columns:repeat(auto-fill,minmax(min(30%,140px),1fr)); }

/* ---------- Menu pages ---------- */
.g-menu-aside{ flex:1 1 300px; max-width:400px; min-width:0; }
.g-menu-main{ flex:999 1 420px; min-width:0; display:flex; flex-direction:column; gap:12px; }
@media (min-width:900px){ .g-menu-aside{ position:sticky; top:150px; } }
@media (max-width:899px){ .g-menu-aside{ order:2; max-width:none; } }
.g-dish-photo{ flex:1 1 360px; max-width:560px; min-width:0; border-radius:var(--radius-xl); overflow:hidden; border:4px solid var(--ganesh-paper); box-shadow:var(--shadow-lg); background:var(--surface-sunken); }
.g-dish-photo img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }

/* Buttons never push past the screen edge: on phones long labels wrap instead. */
.g-btn{ max-width:100%; }
@media (max-width:480px){
  .g-btn{ white-space:normal; text-align:center; height:auto; min-height:var(--control-h-md); padding-top:10px; padding-bottom:10px; line-height:1.25; }
  .g-btn--lg{ min-height:var(--control-h-lg); padding-left:var(--space-6); padding-right:var(--space-6); }
  .g-btn--sm{ min-height:var(--control-h-sm); padding-top:6px; padding-bottom:6px; }
}

/* Nav row: everything stays on one line (the row scrolls sideways if needed). */
.g-nav .g-btn{ flex:none; white-space:nowrap; height:var(--control-h-sm); min-height:0; padding-top:0; padding-bottom:0; line-height:1; }
@media (max-width:480px){
  .g-nav__inner{ padding-top:6px; padding-bottom:6px; }
  .g-nav__link{ min-height:40px; padding:8px 14px; font-size:14px; }
  .g-nav__spacer{ flex:0 0 4px; }
}