/* ==========================================================================
   The Slice n' Piece — stylesheet
   Palette is taken straight from the logo: green, orange, cream.
   ========================================================================== */

:root {
  --green:       #10793C;
  --green-dark:  #0B5C2D;
  --green-soft:  #E7F2E9;
  --orange:      #F2811D;
  --orange-dark: #D96C0C;
  --orange-soft: #FDEEDD;
  --cream:       #FBF3E4;
  --cream-deep:  #F5E8D2;
  --ink:         #23201B;
  --ink-soft:    #5C554A;
  --white:       #FFFFFF;
  --line:        rgba(35, 32, 27, .12);

  --radius:      18px;
  --radius-lg:   26px;
  --shadow:      0 10px 30px rgba(35, 32, 27, .08);
  --shadow-lg:   0 20px 50px rgba(35, 32, 27, .14);

  --head: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 108px; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--head); line-height: 1.12; margin: 0 0 .4em; font-weight: 800; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.9rem); letter-spacing: -.5px; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { margin: 0 0 1em; }
a  { color: var(--green); text-decoration: none; }
a:hover { color: var(--orange); }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 800px); }
.ink-o { color: var(--orange); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--green); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--head); font-weight: 700; font-size: 1rem;
  padding: .78rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--orange); color: #fff; box-shadow: 0 6px 18px rgba(242,129,29,.32); }
.btn--primary:hover { background: var(--orange-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--green); border-color: var(--green); }
.btn--ghost:hover { background: var(--green); color: #fff; }
.btn--wa { background: var(--green); color: #fff; box-shadow: 0 6px 18px rgba(16,121,60,.28); }
.btn--wa:hover { background: var(--green-dark); color: #fff; }
.btn--sm { padding: .5rem 1.1rem; font-size: .92rem; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1.08rem; }

/* ---------------- Stars ----------------
   Two stacked rows of ★★★★★; the gold row is clipped to --pct so any
   fractional rating (4.9 → 98%) is drawn exactly, using only plain glyphs. */
.stars {
  position: relative; display: inline-block; line-height: 1;
  font-size: 1rem; color: rgba(35, 32, 27, .22);
  --pct: 100%;
}
.stars::before { content: '★★★★★'; }
.stars::after {
  content: '★★★★★'; position: absolute; inset: 0;
  width: var(--pct); overflow: hidden; white-space: nowrap; color: #F5A623;
}
.stars--sm { font-size: .82rem; }
.stars--lg { font-size: 1.5rem; }
.topbar .stars { color: rgba(255, 255, 255, .35); }

/* ---------------- Top announcement bar ---------------- */
.topbar { background: var(--green); color: #fff; font-size: .9rem; }
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; flex-wrap: wrap; }
.topbar__msg { margin: 0; }
.topbar__rating {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.14); color: #fff;
  padding: .28rem .8rem; border-radius: 999px; font-size: .88rem;
  transition: background .15s ease;
}
.topbar__rating:hover { background: rgba(255,255,255,.26); color: #fff; }
.topbar__count { opacity: .85; }
.g-mark { display: inline-flex; background: #fff; border-radius: 50%; padding: 3px; }
.g-mark--lg { padding: 6px; box-shadow: var(--shadow); }

/* ---------------- Header ---------------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251,243,228,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__in { display: flex; align-items: center; gap: 1.2rem; padding: .55rem 0; }
/* logo-rectangle.png carries ~24% transparent padding above and below the
   artwork (measured: art is 51.4% of the file's height). So we size it larger
   than the visual target and pull the empty margin back in, which keeps the
   header compact. Re-measure if the logo file is ever replaced. */
.brand { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; }
.brand img { height: 74px; width: auto; margin-block: -10px; }
/* Below the logo, right-aligned under it. Negative margin pulls it up past
   the logo file's own internal padding (see the comment on .brand img
   above); if the logo file changes, this may need re-tuning like that
   margin does. */
/* Caveat has no true italic face, so italic here is browser-synthesized
   (oblique) — normal, expected behaviour for a script font and still reads
   as intentionally handwritten. */
.brand__credit {
  margin-top: -4px; margin-right: 20px; white-space: nowrap;
  font: 600 1.05rem/1 'Caveat', cursive; color: var(--ink-soft);
  letter-spacing: .02em;
}
.brand__credit:empty { display: none; }
.nav { display: flex; gap: 1.5rem; margin-left: auto; font-weight: 500; }
/* Never let a link break across two lines when the header gets tight. */
.nav a { color: var(--ink); position: relative; white-space: nowrap; }
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--orange); transition: width .2s ease;
}
.nav a:hover::after, .nav a.is-active::after { width: 100%; }
.nav a.is-active { color: var(--green); }

.header__actions { display: flex; align-items: center; gap: .7rem; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: .4rem; cursor: pointer; }
.burger span { width: 24px; height: 2.5px; background: var(--green); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------------- Hero ---------------- */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: center; }
.eyebrow {
  font-family: var(--head); font-weight: 700; color: var(--orange);
  text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; margin-bottom: .6rem;
}
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 52ch; }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.6rem 0 2rem; }

.hero__proof { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.proof-card {
  display: flex; align-items: center; gap: .9rem;
  background: var(--white); border-radius: var(--radius); padding: .8rem 1.2rem;
  box-shadow: var(--shadow); color: var(--ink);
}
.proof-card:hover { color: var(--ink); transform: translateY(-2px); transition: transform .15s ease; }
.proof-card__num { font-family: var(--head); font-size: 2.1rem; font-weight: 800; color: var(--green); line-height: 1; }
.proof-card small { display: block; color: var(--ink-soft); font-size: .82rem; }
.hero__facts { display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; color: var(--ink-soft); }

.hero__art { position: relative; min-height: 430px; display: flex; align-items: center; justify-content: center; }
/* A single pre-composited collage (assets/gallery/hero-banner.png) — rounded
   corners, shadows and layout are baked into the image itself, not applied
   here, and it's transparent around the edges so it blends into the page.
   This is a fixed, hand-picked image, kept deliberately separate from
   assets/gallery/hero-collage.png (the auto-generated, randomised one — see
   README "The hero collage") so regenerating that script never overwrites
   this choice. Point the <img> in index.html at hero-collage.png instead to
   switch back to the random rotation. Works at any aspect ratio. */
.hero__collage { width: 100%; max-width: 680px; height: auto; }

/* ---------------- Sections ---------------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint { background: var(--white); }
.section__head { max-width: 640px; margin-bottom: 2.6rem; }
.section__sub { color: var(--ink-soft); margin: 0; }

/* ---------------- Festival special ----------------
   Deliberately the loudest block on the page — it is a limited-time offer and
   should not read like the evergreen sections around it. */
.festival {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 55%, #14603A 100%);
  color: #fff; padding: clamp(1.75rem, 4vw, 3rem) 0;
}
.festival[hidden] { display: none; }
/* Soft festive glow, purely decorative. */
.festival::before,
.festival::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.festival::before { width: 420px; height: 420px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(242,129,29,.38), transparent 68%); }
.festival::after  { width: 340px; height: 340px; bottom: -160px; left: -100px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }

.festival__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.festival__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--orange); color: #fff;
  font: 700 .78rem/1 var(--head); text-transform: uppercase; letter-spacing: .1em;
  padding: .45rem .9rem; border-radius: 999px; margin-bottom: 1rem;
}
.festival__emoji { font-size: 1rem; }
.festival h2 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.1rem); margin-bottom: .25rem; }
.festival__greeting { font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: #FFD9A8; margin-bottom: .8rem; }
.festival__blurb { color: rgba(255,255,255,.88); max-width: 46ch; }

.festival__countdown {
  display: inline-block; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: .5rem 1.1rem; font-family: var(--head); font-weight: 700; font-size: .95rem;
  margin: .4rem 0 1.6rem;
}
.festival__countdown.is-urgent { background: var(--orange); border-color: var(--orange); }
.festival__countdown.is-closed { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.2); font-weight: 500; font-size: .88rem; }

.festival__cta { display: flex; gap: .8rem; flex-wrap: wrap; }
.festival__btn { background: #fff; color: var(--green-dark); }
.festival__btn:hover { background: var(--cream); color: var(--green-dark); }
.festival__btn--ghost { border-color: rgba(255,255,255,.65); color: #fff; }
.festival__btn--ghost:hover { background: #fff; color: var(--green-dark); }

.festival__panel { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
/* When there's no text list beside it (.festival__panel--solo — see
   js/main.js), the photo runs alone. */
.festival__panel--solo { grid-template-columns: 1fr; justify-items: center; }

/* Sized for a real portrait photo/promo graphic (the shop's own marketing
   images tend to be tall, e.g. Instagram-post shaped). object-fit: contain
   so nothing baked into the image — pricing, headline text — ever gets
   cropped off; letterboxing blends into the cream background.
   aspect-ratio must match whatever photo is currently in festival.image
   (js/config.js) — update it here if a differently-shaped photo goes in. */
.festival__img {
  width: 200px; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; background: var(--cream);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
/* Capped by height, not width, so a tall 9:16 photo can't blow the section
   out — width just follows from the aspect ratio. Adjust this one number to
   make it bigger/smaller; it's independent of the text column's height. */
.festival__panel--solo .festival__img {
  width: auto; height: 360px; max-width: 100%;
  /* festival-onam.png already has its own rounded corners, gold border and
     transparent margin baked in — the base rule's cream background and
     border-radius were painting a mismatched rectangular box behind that
     transparent margin, visible as an ugly "border" against the green
     section. Drop those, and use filter: drop-shadow instead of box-shadow
     since it follows the image's actual (alpha) shape, not its full
     rectangular bounding box. */
  background: transparent; border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .35));
}
.festival__specials { display: flex; flex-direction: column; gap: .55rem; }
.special {
  background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: .75rem 1rem;
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; align-items: baseline;
}
.special__name  { font-family: var(--head); font-weight: 700; font-size: 1.02rem; }
.special__price { font-family: var(--head); font-weight: 700; color: #FFD9A8; white-space: nowrap; }
.special__note  { grid-column: 1 / -1; font-size: .84rem; color: rgba(255,255,255,.75); }

/* Nav entry, only present while a festival is live. */
.nav__festival { color: var(--orange) !important; font-weight: 700; }

/* ---------------- Categories ---------------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; }
.cat-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; text-align: left; cursor: pointer; font: inherit; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--orange); }
/* Optional — a category with no photo configured just skips straight to
   .cat-card__body, unchanged from before photos existed. */
.cat-card__media { aspect-ratio: 1; overflow: hidden; background: var(--cream-deep); }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cat-card:hover .cat-card__media img { transform: scale(1.06); }
.cat-card__body { padding: 1.6rem; display: flex; flex-direction: column; gap: .3rem; }
.cat-card__ico {
  font-size: 1.6rem; width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--orange-soft); border-radius: 16px; margin-bottom: .6rem;
}
.cat-card h3 { margin: 0; color: var(--green); }
.cat-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.cat-card__more { font-family: var(--head); font-weight: 700; color: var(--orange); margin-top: .8rem; font-size: .95rem; }

/* ---------------- Filters ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 2rem; }
.chip {
  font: 600 .95rem/1 var(--body); padding: .6rem 1.15rem; border-radius: 999px;
  background: var(--cream); border: 1.5px solid var(--line); color: var(--ink-soft);
  cursor: pointer; transition: all .15s ease;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------------- Best Sellers (home page cards) ---------------- */
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem; }
.bs-card {
  background: var(--cream); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--line); cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column;
}
.bs-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.bs-card__media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--cream-deep); display: block; }
.bs-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.bs-card:hover .bs-card__media img { transform: scale(1.06); }
.bs-card__body { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; }
.bs-card__name { font-family: var(--head); font-weight: 700; font-size: 1.05rem; }
.bs-card__note { color: var(--ink-soft); font-size: .82rem; margin-top: .1rem; }
.bs-card__price { color: var(--orange); font-family: var(--head); font-weight: 700; margin-top: .5rem; }
.bestsellers__more { text-align: center; margin: 2.4rem 0 0; }
.bestsellers__more-note { color: var(--ink-soft); font-size: .9rem; margin: 0 0 .8rem; }
/* Safety net: even the shortened button label above could one day get
   edited into something longer — .btn forces white-space: nowrap, which on
   a narrow screen runs the button off the edge instead of wrapping. Undo
   that here specifically, rather than globally, since most .btn uses
   elsewhere are already short enough that nowrap is what keeps them tidy. */
@media (max-width: 480px) {
  .bestsellers__more .btn { white-space: normal; max-width: 100%; }
}

/* ---------------- Menu page (/menu/) intro ---------------- */
.breadcrumb { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.6rem; }
.breadcrumb a { color: var(--ink-soft); text-decoration: underline; }
.breadcrumb a:hover { color: var(--orange); }
.menu-intro h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); }

/* ---------------- Menu ---------------- */
.menu-jump { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.2rem; }
.menu-jump .chip { text-decoration: none; }

.menu-notes { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 2.4rem; }
.menu-notes li {
  position: relative; padding-left: 1.3rem; color: var(--ink-soft); font-size: .92rem;
}
.menu-notes li::before { content: '✦'; position: absolute; left: 0; color: var(--orange); }

.menu-group {
  padding: 2.4rem 0; border-top: 1px solid var(--line); scroll-margin-top: 100px;
}
.menu-group:first-child { border-top: 0; padding-top: 0; }

.menu-group__body h3 { color: var(--green); margin-bottom: .2rem; }
.menu-group__tagline { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.2rem; }

.menu-item-list { display: flex; flex-direction: column; }
.menu-item { padding: .65rem 0; border-bottom: 1px dashed var(--line); }
.menu-item:last-child { border-bottom: 0; }
.menu-item__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.menu-item__name { font-weight: 500; }
.menu-item__name small { display: block; color: var(--ink-soft); font-size: .8rem; font-weight: 400; margin-top: .1rem; }
.menu-item__right { display: flex; align-items: baseline; gap: .6rem; flex-shrink: 0; }
.menu-item__prices { display: flex; gap: 1rem; flex-shrink: 0; }
.menu-item__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.menu-item__price b { color: var(--orange); font-family: var(--head); font-size: .98rem; }
.menu-item__price small { color: var(--ink-soft); font-size: .74rem; }

/* Expandable "ingredients" panel — only items with at least one filled-in
   field (see js/config.js "Menu" comment) get the button below. */
.menu-item--has-info summary { cursor: pointer; list-style: none; }
.menu-item--has-info summary::-webkit-details-marker { display: none; }
.menu-item__info-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--green); font-size: .8rem; line-height: 1; align-self: center;
  transition: transform .15s ease, background-color .15s ease;
}
.menu-item--has-info details[open] .menu-item__info-btn { transform: rotate(45deg); background: var(--green-soft); }
.menu-item__ingredients {
  margin: .7rem 0 .2rem; padding: .8rem 1rem; background: var(--cream-deep); border-radius: 12px;
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; font-size: .87rem;
}
.menu-item__ingredients dt { color: var(--green); font-weight: 600; }
.menu-item__ingredients dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) {
  .menu-item__ingredients { grid-template-columns: 1fr; gap: .05rem 0; }
  .menu-item__ingredients dt { margin-top: .35rem; }
}

.bites { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.bites__title { color: var(--green); margin-bottom: 1rem; }
.bites__list { display: flex; flex-wrap: wrap; gap: .7rem; }
.bites__list li {
  display: flex; align-items: center; gap: .5rem;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  padding: .55rem 1.1rem; font-size: .92rem;
}
.bites__name { font-weight: 600; }
.bites__price { color: var(--orange); font-family: var(--head); font-weight: 700; font-size: .88rem; }

/* ---------------- Gallery (/gallery/) ---------------- */
.gallery-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
.gallery-tabs .chip { text-decoration: none; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem;
}
.gallery-tile {
  border: 0; padding: 0; cursor: pointer; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 1; background: var(--cream-deep);
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.gallery-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-tile[hidden] { display: none; }

/* ---------------- Features ---------------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.feature { background: var(--white); border-radius: var(--radius-lg); padding: 1.8rem; border: 1px solid var(--line); }
.feature__ico { font-size: 2rem; display: block; margin-bottom: .6rem; }
.feature h3 { color: var(--green); }
.feature p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------------- Instagram ---------------- */
.insta-scroll {
  display: flex; gap: 1rem; overflow-x: auto; padding: .3rem .3rem 1rem;
  scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--orange) transparent;
}
.insta-scroll::-webkit-scrollbar { height: 8px; }
.insta-scroll::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 999px; }
.insta-scroll::-webkit-scrollbar-track { background: var(--cream-deep); border-radius: 999px; }

.insta-card {
  flex: 0 0 200px; scroll-snap-align: start; aspect-ratio: 1;
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  box-shadow: var(--shadow); background: var(--cream-deep);
  transition: transform .18s ease, box-shadow .18s ease;
}
.insta-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.insta-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insta-card__badge {
  position: absolute; top: .6rem; right: .6rem; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0, 0, 0, .45); display: grid; place-items: center;
  color: #fff; opacity: 0; transition: opacity .18s ease;
}
.insta-card:hover .insta-card__badge { opacity: 1; }

/* Official Instagram embeds (js/config.js instagramFeed) size themselves —
   just stop them shrinking in the flex row and let them scroll like cards.
   328px width matches the entries in config.js (Instagram won't render
   narrower than ~326px, so that's as compact as the widget goes). */
.insta-scroll--embeds { align-items: flex-start; gap: .7rem; }
.insta-scroll--embeds > .instagram-media {
  flex: 0 0 auto !important; scroll-snap-align: start;
  max-width: 328px !important; min-width: 328px !important;
}

.insta-more { text-align: center; margin: .5rem 0 0; }

/* ---------------- Reviews ---------------- */
.reviews { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }
.review-summary {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.8rem; text-align: center; position: sticky; top: 120px;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
}
.review-summary__label { color: var(--ink-soft); margin: .6rem 0 0; font-size: .92rem; }
.review-summary__num { font-family: var(--head); font-size: 3.4rem; font-weight: 800; color: var(--green); line-height: 1; margin: 0; }
.review-summary__count { color: var(--ink-soft); font-size: .9rem; margin: .3rem 0 1rem; }
.link-quiet { font-size: .88rem; color: var(--ink-soft); margin-top: .8rem; }

.review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.review {
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem;
}
.review__top { display: flex; align-items: center; gap: .7rem; }
.review__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--cream-deep);
}
/* Shown only when a reviewer has no photo, or their photo fails to load. */
.review__avatar--fallback {
  display: grid; place-items: center; font-family: var(--head); font-weight: 800;
  background: var(--green); color: #fff;
}
.review__who { font-family: var(--head); font-weight: 700; line-height: 1.2; }
.review__when { color: var(--ink-soft); font-size: .8rem; }
.review__text { margin: 0; font-size: .95rem; color: var(--ink-soft); white-space: pre-line; }
/* Long reviews are collapsed to keep the grid tidy; the button below reveals the rest. */
.review__text.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__more {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 .85rem/1 var(--head); color: var(--orange); text-decoration: underline;
}
.review__more:hover { color: var(--orange-dark); }
.review__src { font-size: .78rem; color: var(--ink-soft); display: flex; align-items: center; gap: .3rem; margin-top: auto; padding-top: .4rem; }

.notice {
  grid-column: 1 / -1; background: var(--orange-soft); border: 1px dashed var(--orange);
  border-radius: var(--radius); padding: .9rem 1.2rem; font-size: .9rem; color: var(--ink-soft);
}

/* ---------------- Delivery ---------------- */
.delivery { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: stretch; }
.delivery__map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); min-height: 380px; border: 1px solid var(--line); }
.delivery__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.delivery__info { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; }
.delivery__info h3 { color: var(--green); }
.towns { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.towns li {
  background: var(--green-soft); color: var(--green-dark); font-size: .87rem;
  padding: .35rem .8rem; border-radius: 999px; font-weight: 500;
}
.delivery__note { font-size: .92rem; color: var(--ink-soft); }
.delivery__row { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------------- Steps ---------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; counter-reset: s; }
.step { background: var(--cream); border-radius: var(--radius-lg); padding: 1.8rem; border: 1px solid var(--line); }
.step__n {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: #fff; font-family: var(--head); font-weight: 800; font-size: 1.25rem;
  margin-bottom: .8rem;
}
.step h3 { color: var(--green); }
.step p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.order-card {
  background: var(--green); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem); display: flex; gap: 2rem;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.order-card h3 { color: #fff; font-size: 1.9rem; }
.order-card p { margin: 0 0 .4rem; opacity: .92; }
.order-card__hours { font-size: .9rem; opacity: .8; }
.order-card__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.order-card .btn--wa { background: #fff; color: var(--green-dark); }
.order-card .btn--wa:hover { background: var(--cream); color: var(--green-dark); }
.order-card .btn--ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.order-card .btn--ghost:hover { background: #fff; color: var(--green-dark); }

/* ---------------- FAQ ---------------- */
.faq { display: flex; flex-direction: column; gap: .7rem; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.4rem;
}
.faq summary {
  font-family: var(--head); font-weight: 700; font-size: 1.05rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--orange); font-size: 1.5rem; line-height: 1; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: .8rem 0 0; color: var(--ink-soft); font-size: .96rem; }

/* ---------------- Footer ---------------- */
.footer { background: var(--ink); color: rgba(255,255,255,.78); padding: 3.5rem 0 1.5rem; margin-bottom: 0; }
.footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
/* The logo is green/orange on transparent, so it needs a light plate on the dark
   footer. The file's own padding does the insetting, so the plate adds almost none. */
.footer__brand img {
  height: 80px; width: auto; background: var(--cream);
  border-radius: 14px; padding: 0 .4rem; margin-bottom: .9rem;
}
.footer__brand p { font-size: .93rem; max-width: 30ch; }
.footer h4 { font-size: 1rem; color: #fff; margin-bottom: .8rem; }
.footer__col a { display: block; color: rgba(255,255,255,.78); margin-bottom: .45rem; font-size: .93rem; }
.footer__col a:hover { color: var(--orange); }
.footer__col p { font-size: .93rem; margin-bottom: .45rem; }
.footer__hours { margin-top: 1rem; opacity: .7; font-size: .85rem; }

/* FSSAI registration badge */
.fssai {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px; padding: .6rem .8rem; max-width: 20ch;
}
.fssai[hidden] { display: none; }
/* The FSSAI mark is navy on transparent, so it needs a white plate to be
   legible on the dark footer. */
.fssai__logo {
  height: 50px !important; width: auto; flex-shrink: 0;
  background: #fff; border-radius: 5px; padding: .2rem .3rem;
}
/* Fallback badge, used only if the logo file is missing. */
.fssai__tag {
  font: 800 .7rem/1 var(--head); letter-spacing: .06em;
  background: var(--green); color: #fff; padding: .35rem .5rem; border-radius: 6px; flex-shrink: 0;
}
.fssai__text { font-size: .82rem; line-height: 1.45; }
.fssai__text strong { color: #fff; letter-spacing: .02em; }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.4rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; opacity: .65;
}
.footer__bar p { margin: 0; }

/* ---------------- Mobile action bar ---------------- */
.mobilebar { display: none; }

/* ---------------- Lightbox ---------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(20,18,15,.9);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none; }
.lightbox__fig { margin: 0; max-width: 620px; width: 100%; background: var(--cream); border-radius: var(--radius-lg); overflow: hidden; }
.lightbox__fig img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lightbox__fig figcaption { padding: 1.2rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.lightbox__fig strong { font-family: var(--head); font-size: 1.4rem; }
.lightbox__fig span { color: var(--ink-soft); font-size: .93rem; margin-bottom: .6rem; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1.4rem; background: none; border: 0;
  color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  background: rgba(255,255,255,.14); border: 0; color: #fff; cursor: pointer;
  width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1;
  display: grid; place-items: center; flex-shrink: 0; margin: 0 .6rem;
}
.lightbox__nav:hover { background: rgba(255,255,255,.28); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Seven nav links (Categories, Best Sellers, Full Menu, Gallery, Reviews,
   Delivery, Order) — or eight on the home page whenever a festival banner
   adds its own link (see renderFestival in js/main.js) — run the header
   out of room earlier than a shorter nav would. Tighten it in stages
   instead of letting the links wrap. */
@media (max-width: 1300px) {
  .header__in { gap: .8rem; }
  .nav { gap: .85rem; font-size: .92rem; }
  .brand img { height: 64px; margin-block: -9px; }
}

/* Below this the WhatsApp CTA no longer fits beside a full nav. It is still
   in the hero, the order section and the mobile bar, so nothing is lost. */
@media (max-width: 1150px) {
  .header__actions .btn--wa { display: none; }
}

@media (max-width: 980px) {
  .festival__in { grid-template-columns: 1fr; gap: 2rem; }
  /* Stacked now, so there's no text-column height to match — go back to a
     simple width cap (same value the solo image used before this rule existed). */
  .festival__panel--solo .festival__img { width: 100%; max-width: 380px; height: auto; }
  .hero__in { grid-template-columns: 1fr; }
  .hero__art { min-height: 340px; order: -1; }
  .reviews { grid-template-columns: 1fr; }
  .review-summary { position: static; }
  .delivery { grid-template-columns: 1fr; }
  .footer__in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 84px; }
  .burger { display: flex; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 0; padding: .5rem 1.25rem 1rem;
    box-shadow: var(--shadow); display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .header__in { position: relative; }
  /* .nav is absolutely positioned at this width, so it no longer pushes the
     actions across. Send them to the right edge so the burger sits flush. */
  .header__actions { margin-left: auto; }
  .header__actions .btn--wa { display: none; }
  .brand img { height: 58px; margin-block: -8px; }
  .topbar__msg { font-size: .82rem; }
  .topbar__count { display: none; }
  .order-card { flex-direction: column; align-items: flex-start; }

  body { padding-bottom: 68px; }
  .mobilebar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    background: var(--white); border-top: 1px solid var(--line); padding: .6rem .8rem;
    gap: .6rem; box-shadow: 0 -6px 20px rgba(0,0,0,.08);
  }
  .mobilebar__btn {
    flex: 1; padding: .75rem; border-radius: 999px;
    font-family: var(--head); font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
  }
  /* Icons are inline SVG using fill: currentColor, so they follow the text colour. */
  .mobilebar__btn svg { flex-shrink: 0; }
  /* Solid orange, matching .btn--primary. */
  .mobilebar__btn--call {
    background: var(--orange); color: #fff; flex: 0 0 34%;
    box-shadow: 0 6px 18px rgba(242, 129, 29, .32);
  }
  .mobilebar__btn--call:hover { background: var(--orange-dark); color: #fff; }
  .mobilebar__btn--wa { background: var(--green); color: #fff; }
  .mobilebar__btn--wa:hover { background: var(--green-dark); color: #fff; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .festival__panel { grid-template-columns: 1fr; }
  .festival__img { width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
  .festival__panel--solo .festival__img { max-width: 240px; }
  .festival__cta .btn { flex: 1; }
  .topbar__in { justify-content: center; text-align: center; }
  .hero__cta .btn { flex: 1; }
  .hero__proof { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hero__facts { flex-direction: row; flex-wrap: wrap; gap: .8rem; }
  .menu-item__row { flex-wrap: wrap; }
  .menu-item__right { margin-left: auto; }
  .bs-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .bs-card__body { padding: .8rem .9rem 1rem; }
  .bs-card__name { font-size: 1rem; }
  .footer__in { grid-template-columns: 1fr; }
  .lightbox__nav { position: absolute; bottom: 1.2rem; }
  .lightbox__nav--prev { left: 1.2rem; }
  .lightbox__nav--next { right: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}