/* =====================================================================
   Pure Desi In-Store Menu — menu.css
   Responsive full-menu layout (mobile QR target + on-screen reading).
   "The Wine List": restrained editorial, cream surface, cherry accents.
   ===================================================================== */

:root {
  --menu-max: 760px;          /* comfortable single-column reading measure */
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------------------------------------------------------------------
   Cover header
   --------------------------------------------------------------------- */
.cover {
  position: relative;
  text-align: center;
  padding: clamp(40px, 9vw, 88px) var(--gutter) clamp(28px, 6vw, 56px);
  background:
    radial-gradient(120% 80% at 50% 0%, var(--pd-bg-elevated), var(--pd-bg) 70%);
  border-bottom: 1px solid var(--pd-border);
}
.cover__logo {
  width: clamp(180px, 42vw, 300px);
  margin: 0 auto var(--pd-sp-16);
}
.cover__eyebrow {
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: var(--pd-fs-12);
  color: var(--pd-fg-subtle);
  margin: 0;
}
.cover__rule {
  width: 48px;
  height: 2px;
  background: var(--pd-cherry);
  border: 0;
  margin: var(--pd-sp-16) auto 0;
}

/* ---------------------------------------------------------------------
   Layout container
   --------------------------------------------------------------------- */
.menu {
  max-width: var(--menu-max);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 10vw, 96px);
}

/* ---------------------------------------------------------------------
   Zone dividers — carry the existing menu's colour zones.
   Each zone sets --zone (accent) consumed by its divider + section rules.
   --------------------------------------------------------------------- */
.zone {
  --zone: var(--pd-cardamom);
  margin-top: clamp(40px, 8vw, 72px);
}
.zone[data-zone="sweets"]   { --zone: var(--pd-oregon-grape); }
.zone[data-zone="gifting"]  { --zone: var(--pd-cherry); }
.zone[data-zone="takeaway"] { --zone: var(--pd-motichoor); }
.zone[data-zone="drinks"]   { --zone: var(--pd-saffron-dust); }
.zone[data-zone="kitchen"]  { --zone: var(--pd-cardamom); }

.zone__divider {
  display: flex;
  align-items: center;
  gap: var(--pd-sp-16);
  margin-bottom: clamp(20px, 4vw, 32px);
}
.zone__num {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-28);
  color: var(--zone);
  line-height: 1;
}
.zone__title {
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  font-size: clamp(1.75rem, 6vw, var(--pd-fs-48));
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--pd-fg);
}

/* Photographic band that introduces a zone (mobile/print divider imagery) */
.zone__photo {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--pd-radius-4);
  overflow: hidden;
  margin-bottom: clamp(20px, 4vw, 32px);
  background: var(--pd-bg-sunken);
}
.zone__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.zone__photo::after {            /* subtle ink scrim for cohesion */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%,
    color-mix(in srgb, var(--pd-cardamom) 22%, transparent));
}

/* ---------------------------------------------------------------------
   Section block + accent on the section title's dot/eyebrow per zone
   --------------------------------------------------------------------- */
.section {
  margin-bottom: clamp(28px, 6vw, 48px);
}
.section .eyebrow { color: var(--zone, var(--pd-cherry)); }
.section .dot     { color: var(--zone, var(--pd-cherry)); }

/* Curry sizing card */
.sizing {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pd-sp-8);
  margin: 0 0 var(--pd-sp-16);
  padding: var(--pd-sp-16);
  background: var(--pd-bg-elevated);
  border-radius: var(--pd-radius-4);
}
.sizing__cell { text-align: center; }
.sizing__lbl {
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--pd-fs-12);
  color: var(--pd-fg-subtle);
}
.sizing__price {
  font-family: var(--pd-font-serif);
  font-size: var(--pd-fs-22);
  color: var(--pd-fg);
  margin-top: 2px;
}

/* Addon chip line under burgers etc. */
.addons {
  margin-top: var(--pd-sp-8);
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-subtle);
}

/* ---------------------------------------------------------------------
   GIFT BOXES (spec §6.1) — occasions · range · how to pack
   Feature layout inside the Wine List system: cream cards, cherry accents,
   Staatliches eyebrows, Instrument Serif numerals.
   --------------------------------------------------------------------- */
.giftbox .gb-part { margin-top: clamp(24px, 4vw, 40px); }
.giftbox .gb-part:first-of-type { margin-top: clamp(20px, 3vw, 28px); }

/* Mini eyebrow used inside the section, with a short cherry rule */
.gb-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--pd-sp-12);
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg);
  margin-bottom: var(--pd-sp-16);
}

/* a) Occasions — "For…" chips */
.oc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-sp-8) var(--pd-sp-12);
}
.oc {
  font-family: var(--pd-font-sans);
  font-size: var(--pd-fs-14);
  font-weight: 500;
  color: var(--pd-fg-muted);
  padding: 6px 14px;
  border-radius: var(--pd-radius-pill);
  background: color-mix(in srgb, var(--pd-cherry) 8%, var(--pd-bg-elevated));
}

/* b) The Range — box-style gallery */
.gb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(14px, 2.5vw, 24px);
}
.gb-box { margin: 0; break-inside: avoid; }
.gb-box__img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--pd-radius-4);
  overflow: hidden;
  background: var(--pd-bg-sunken);
}
.gb-box__img img { width: 100%; height: 100%; object-fit: cover; }
/* Styled placeholder for box styles we don't yet have a photo for */
.gb-box__img--ph {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg,
      var(--pd-chai-milk-2) 0 10px, var(--pd-chai-milk-3) 10px 20px);
}
.gb-box__phmark {
  font-family: var(--pd-font-script);
  font-size: var(--pd-fs-22);
  color: var(--pd-cardamom-40);
}
.gb-box__img--more {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-subtle);
  background: var(--pd-bg-sunken);
}
.gb-box--more .gb-box__img--more .confirm { margin-top: 6px; }
.gb-box__cap {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--pd-sp-8);
}
.gb-box__name {
  font-family: var(--pd-font-sans);
  font-weight: 600;
  font-size: var(--pd-fs-16);
  color: var(--pd-fg);
}
.gb-box__for {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-subtle);
}

/* c) How to Pack — numbered vertical steps */
.gb-steps { list-style: none; margin: 0; padding: 0; }
.gb-step {
  display: flex;
  gap: clamp(14px, 3vw, 24px);
  padding: var(--pd-sp-16) 0;
  break-inside: avoid;
}
.gb-step__n {
  flex: 0 0 auto;
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-48);
  line-height: 0.8;
  color: var(--zone, var(--pd-cherry));
  width: 1.2em;
  text-align: center;
}
.gb-step__body { flex: 1 1 auto; min-width: 0; }
.gb-step__title {
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--pd-fs-22);
  margin: 0 0 var(--pd-sp-8);
  color: var(--pd-fg);
}
.gb-step__lede {
  font-family: var(--pd-font-serif);
  font-size: var(--pd-fs-18);
  color: var(--pd-fg);
  margin: 0 0 var(--pd-sp-4);
}
.gb-step__lede strong { font-style: italic; }
.gb-step__note {
  font-family: var(--pd-font-sans);
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-muted);
  margin: 0;
  line-height: 1.5;
}

/* Size grid-table */
.gb-sizes {
  margin-top: var(--pd-sp-12);
  border-radius: var(--pd-radius-4);
  overflow: hidden;
  background: var(--pd-bg-elevated);
}
.gb-srow {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 0.9fr 0.9fr 1.3fr;
  align-items: center;
  gap: var(--pd-sp-8);
  padding: 9px var(--pd-sp-16);
}
.gb-srow--head {
  background: var(--pd-bg-sunken);
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--pd-fs-12);
  color: var(--pd-fg-subtle);
}
.gb-cell { font-family: var(--pd-font-sans); font-size: var(--pd-fs-14); }
.gb-cell--size {
  font-family: var(--pd-font-display);
  letter-spacing: 0.06em;
  font-size: var(--pd-fs-16);
  color: var(--pd-fg);
}
.gb-cell--gift, .gb-cell--reg {
  font-family: var(--pd-font-serif);
  font-size: var(--pd-fs-18);
  color: var(--pd-fg);
}
.gb-srow--head .gb-cell { font-family: var(--pd-font-display); font-size: var(--pd-fs-12); }
.gb-dash { color: var(--pd-fg-subtle); }
.gb-cell--prem { color: var(--pd-fg-muted); }

/* Inline cherry chip for the +$2/row upgrade */
.gb-chip {
  display: inline-block;
  font-family: var(--pd-font-sans);
  font-weight: 700;
  font-size: var(--pd-fs-12);
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--pd-cherry);
  border-radius: var(--pd-radius-pill);
  padding: 1px 8px;
  vertical-align: middle;
}
.gb-premiumline {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-16);
  color: var(--pd-fg-muted);
  margin: var(--pd-sp-16) 0 0;
}

@media (max-width: 560px) {
  .gb-srow { grid-template-columns: 0.8fr 0.8fr 0.9fr 0.9fr 1.1fr; gap: 4px; padding: 8px 10px; }
  .gb-cell, .gb-cell--gift, .gb-cell--reg { font-size: var(--pd-fs-12); }
  .gb-cell--size { font-size: var(--pd-fs-14); }
  .gb-step__n { font-size: var(--pd-fs-36); }
}

/* ---------------------------------------------------------------------
   GIFTING (spec §6.2) — platters & hampers
   --------------------------------------------------------------------- */
.gifting .gift-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 3vw, 28px);
}
.gifting .gift-grid + .gb-eyebrow { margin-top: clamp(28px, 5vw, 44px); }
.gcard {
  break-inside: avoid;
  background: var(--pd-bg-elevated);
  border-radius: var(--pd-radius-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gcard__img {
  aspect-ratio: 3 / 2;
  background: var(--pd-bg-sunken);
}
.gcard__img img { width: 100%; height: 100%; object-fit: cover; }
.gcard__body { padding: var(--pd-sp-16); display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.gcard__name {
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--pd-fs-18);
  color: var(--pd-fg);
}
.gcard__desc {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-muted);
}
.gcard__prices {
  margin-top: auto;
  padding-top: var(--pd-sp-12);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gprice {
  display: flex;
  align-items: baseline;
  gap: var(--pd-sp-8);
}
.gprice .lbl {
  font-family: var(--pd-font-sans);
  font-size: var(--pd-fs-12);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pd-fg-subtle);
  min-width: 3.2em;
}
.gprice .lead {
  flex: 1 1 auto;
}
.gprice .val { font-family: var(--pd-font-serif); font-size: var(--pd-fs-18); white-space: nowrap; }
.gprice .val--tbc { color: var(--pd-fg-subtle); }

/* ---------------------------------------------------------------------
   From the Kitchen close
   --------------------------------------------------------------------- */
.kitchen {
  text-align: center;
  padding: clamp(28px, 6vw, 48px) 0 0;
}
.kitchen__note {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-18);
  line-height: 1.55;
  color: var(--pd-fg-muted);
  max-width: 52ch;
  margin: 0 auto var(--pd-sp-32);
}
.kitchen__locations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pd-sp-24) var(--pd-sp-48);
  margin-bottom: var(--pd-sp-32);
}
.kitchen__loc { text-align: center; }
.kitchen__city {
  font-family: var(--pd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--pd-fs-18);
  color: var(--pd-fg);
}
.kitchen__suburb {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-subtle);
}
.kitchen__web {
  font-family: var(--pd-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--pd-fs-14);
  color: var(--pd-cherry);
}
.kitchen__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-sp-8);
  margin-top: var(--pd-sp-32);
}
.kitchen__qr-code {
  width: 120px;
  height: 120px;
  padding: var(--pd-sp-8);
  background: #fff;
  border-radius: var(--pd-radius-4);
}
.kitchen__qr-code svg { width: 100%; height: 100%; display: block; }
.kitchen__qr-cap {
  font-family: var(--pd-font-serif);
  font-style: italic;
  font-size: var(--pd-fs-14);
  color: var(--pd-fg-subtle);
}

/* ---------------------------------------------------------------------
   Responsive — single column below 560px, keep two-col lists tight
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .cols-2 { column-count: 1; }
  .sizing { grid-template-columns: repeat(2, 1fr); row-gap: var(--pd-sp-12); }
}