/* Vi&Vie · Menu V2 page styles — minimal, mirrors homepage card layout.
   Heavy lifting for .vv-menu .item lives in site.css; this file only adds
   the page chrome (hero, sticky section nav, filter bar, section heads,
   pairing line, sold-out, allergen key, legal disclaimer). */

.vv-m2 { background: var(--vv-white); }
/* Page hero — cream opening with a bleeding cello super-graphic, matching
   the sub-page header DNA (light display headline + eyebrow + orange-italic
   second line). Generous but contained so the menu chrome stays close. */
.vv-m2-hero {
  position: relative;
  background: var(--vv-paper);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  min-height: max(440px, calc(100svh - 110px));
  padding-top: clamp(56px, 13vh, 150px);
  padding-bottom: clamp(40px, 7vh, 88px);
}
.vv-m2-hero .vv-pagehead-copy { max-width: 640px; position: relative; z-index: 2; }
.vv-m2-hero .vv-pagehead-h { font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; }
.vv-m2-hero .vv-pagehead-h em { font-style: italic; color: var(--vv-orange); }
.vv-m2-hero .vv-pagehead-lede { max-width: 50ch; margin-top: 14px; }
/* Pomegranate accent — round fruit, centred on the right of the cream block */
/* Cello accent — copy sub-page super-graphic treatment exactly:
   pinned top, bleeding off the bottom, while the copy is vertically centred. */
.vv-pagehead-ill.is-band {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
  pointer-events: none;
  padding-top: 0;
  padding-right: clamp(8px, 5vw, 96px);
  overflow: hidden;
}
.vv-pagehead-ill.is-band img {
  display: block;
  height: min(126%, 1150px);
  width: auto;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: clamp(-24px, -2vw, -8px);
  mix-blend-mode: multiply;
}
@media (max-width: 879px) {
  .vv-m2-hero { min-height: max(360px, 56vh); }
  .vv-pagehead-ill.is-band { opacity: 0.16; padding-right: 0; align-items: flex-end; }
  .vv-pagehead-ill.is-band img { height: auto; width: 96vw; max-height: 72vh; }
}

/* ─── Sticky chrome (section nav + filter bar) ─────────────── */
.vv-m2-sticky {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: var(--vv-white);
  border-top: 1px solid var(--vv-line);
  border-bottom: 1px solid var(--vv-line);
}
@media (min-width: 880px) { .vv-m2-sticky { top: 82px; } }
@media (min-width: 880px) { .vv-m2-hero { min-height: max(520px, calc(100vh - 120px)); } }
.vv-m2-sticky .vv-container { padding-top: 0; padding-bottom: 0; }

.vv-m2-sectionnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--vv-line);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
.vv-m2-sectionnav::-webkit-scrollbar { display: none; }
.sn-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 4px;
  margin-right: 28px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--fg-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.sn-btn .sn-n {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.sn-btn:hover { color: var(--vv-orange); }
.sn-btn.is-active { color: var(--vv-black); border-bottom-color: var(--vv-orange); }
.sn-btn.is-active .sn-n { color: var(--vv-orange); }

/* Filter bar */
.vv-m2-filterbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.vv-m2-filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.vv-m2-filterchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vv-m2-filterchips::-webkit-scrollbar { display: none; }
.vv-chip {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--vv-line);
  border-radius: var(--r-pill);
  background: var(--vv-white);
  color: var(--vv-black);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.vv-chip:hover { border-color: var(--vv-black); }
.vv-chip.is-active {
  background: var(--vv-orange);
  color: var(--vv-white);
  border-color: var(--vv-orange);
}
.vv-m2-filter-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.vv-m2-filter-meta b { color: var(--vv-black); font-weight: 500; }
.vv-m2-filter-meta .clear {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 0;
  background: transparent;
  color: var(--vv-black);
  padding: 4px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vv-m2-filter-meta .clear:hover { color: var(--vv-orange); }

@media (max-width: 880px) {
  .vv-m2-filterbar { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .vv-m2-filter-label { display: none; }
  .vv-m2-filterchips { flex-wrap: wrap; overflow-x: visible; gap: 8px; }
  .vv-m2-sectionnav { display: none; }
}

/* ─── Section blocks ───────────────────────────────────────── */
.vv-m2-section { padding: clamp(48px, 7vw, 100px) 0; }
.vv-m2-section:first-of-type { border-top: 0; }
.vv-m2-sticky + .vv-m2-section { padding-top: clamp(24px, 3vw, 40px); }
.vv-m2-section-head { margin-bottom: clamp(28px, 4vw, 56px); }
.vv-m2-section-head .vv-h-display { font-size: clamp(40px, 6vw, 72px); }
.vv-m2-section-kicker {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--vv-orange);
  margin: 10px 0 0;
  text-wrap: pretty;
}
.vv-m2-section-note {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 15px);
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 16px 0 0;
  max-width: 60ch;
  text-transform: none;
}

.vv-m2-subgroup + .vv-m2-subgroup { margin-top: clamp(40px, 5vw, 64px); }
.vv-m2-subgroup-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vv-orange);
  margin-bottom: 18px;
}

/* ─── Dietary tags on cards (positive, green-ink) ───────────── */
.vv-diet-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vv-diet-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  color: var(--vv-blue);
  border: 1px solid var(--vv-blue-20, rgba(0,92,125,0.25));
  background: var(--vv-blue-10, rgba(0,92,125,0.06));
  white-space: nowrap;
}

/* ─── Rainbow choose-from tier (salads/dips you pick from) ───── */
.vv-m2-choose { margin-top: clamp(40px, 5vw, 64px); }
.vv-m2-choose-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: clamp(24px, 5vw, 72px);
}
@media (min-width: 640px) { .vv-m2-choose-list { columns: 2; } }
@media (min-width: 900px) { .vv-m2-choose-list { columns: 3; } }
.vv-m2-choose-item {
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vv-line);
}
.vv-m2-choose-item .cmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vv-m2-choose-item .cn {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--vv-black);
}
.vv-m2-choose-item .cd {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}
.vv-m2-choose-item .ca {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 2px;
}
.vv-m2-choose-item .ca .ca-label { color: var(--fg-3); opacity: 0.7; }
.vv-m2-choose-item.is-sold { opacity: 0.5; }
.vv-m2-choose-item.is-sold .cn { text-decoration: line-through; }

/* ─── Card overrides on top of homepage .vv-menu .item ──────
   Most of the layout comes from site.css. We just add jar/hp tags,
   a pairing line, an oat-milk note, and the sold-out state. */
.vv-m2-grid.vv-menu { margin: 0; }
.vv-m2-grid.vv-menu .items { border-top: 1px solid var(--vv-line); }
.vv-m2-subgroup-label + .vv-m2-grid.vv-menu .items { border-top: 0; }
.vv-m2-grid.vv-menu .item { position: relative; grid-template-columns: 1fr auto; }

/* tags next to the name */
.vv-jar-tag, .vv-hp-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
}
.vv-jar-tag { color: var(--vv-blue);   border: 1px solid var(--vv-blue); background: transparent; }
.vv-hp-tag  { background: var(--vv-orange); color: var(--vv-white); }
.vv-badge-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--fg-3);
  border: 1px solid var(--vv-line);
  background: transparent;
}
/* Taste of Austria — provenance badge, petrol blue (brand) */
.vv-badge-tag.vv-badge-toa { color: var(--vv-blue); border-color: var(--vv-blue); background: transparent; }

/* pairing line */
.vv-menu .item .pair {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
}
.vv-menu .item .pair .pair-mark {
  font-family: var(--font-mono);
  color: var(--vv-orange);
  margin-right: 6px;
}
.vv-menu .item .pair i {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--vv-black);
}

/* oat-milk note (vegan/lactose-free coffee) */
.vv-menu .item .oat {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vv-orange);
}

/* sold-out */
.vv-m2-grid.vv-menu .item.is-sold .ill,
.vv-m2-grid.vv-menu .item.is-sold .item-body,
.vv-m2-grid.vv-menu .item.is-sold .price {
  filter: grayscale(80%);
  opacity: 0.55;
  pointer-events: none;
}
.vv-m2-grid.vv-menu .item .sold-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  pointer-events: none;
}
.vv-m2-grid.vv-menu .item .sold-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--vv-black);
  color: var(--vv-white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 2px;
  max-width: 90%;
  text-align: center;
  pointer-events: auto;
}
.vv-m2-grid.vv-menu .item .sold-banner .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vv-orange);
  flex: 0 0 auto;
}

/* Empty state */
.vv-m2-empty {
  padding: 60px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-2);
  font-style: italic;
}

/* ─── Allergen key panel ──────────────────────────────────── */
.vv-m2-key {
  padding: 32px 0 16px;
  border-top: 1px solid var(--vv-line);
  background: var(--vv-paper);
}
.vv-m2-key-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--vv-black);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.vv-m2-key-toggle:hover { color: var(--vv-orange); }
.vv-m2-key-panel { padding: 8px 0 20px; max-width: 80ch; }
.vv-m2-key-intro {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0 0 16px;
}
.vv-m2-key-list {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 6px;
  margin: 0;
}
.vv-m2-key-list dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--vv-black);
}
.vv-m2-key-list dd {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--vv-black);
  margin: 0;
}
@media (min-width: 700px) {
  .vv-m2-key-list { grid-template-columns: repeat(2, auto 1fr); column-gap: 24px; row-gap: 8px; }
}

/* ─── Sticky legal disclaimer ──────────────────────────────── */
.vv-m2-legal {
  position: sticky;
  bottom: 0;
  background: var(--vv-paper);
  border-top: 1px solid var(--vv-line);
  z-index: 30;
  padding: 10px 0;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.vv-m2-legal.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vv-m2-legal p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-2);
  font-style: italic;
  max-width: 90ch;
  text-wrap: pretty;
}