/* The feature carousel on the home page: the calorie chip, the CO₂ chip and the
   wine-pairing panel. Colours come from the --b-accent / --b-ink / --b-border /
   --b-radius custom properties the host sets. */

/* ---- Feature demo elements ---- */
/* Small muted text never drops below .72 opacity: on a white chip that is the
   floor for WCAG AA at these sizes, and the demos are checked for it. */

/* Wine pairing. The shape is the guest menus' - the wine named under the dish,
   and on tap its region, a tasting note and the glass price - with a little more
   dressing than a guest menu would wear, because on a marketing page this card
   has to look like something worth buying. A filled glass chip carries the line,
   the open panel hangs off an accent rule, and the tasting note is italic. */
.wp-stack { display: flex; flex-direction: column; gap: .75rem; }
.wp-link {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem .45rem;
  margin: .4rem 0 0; padding: .3rem .6rem .3rem .35rem; min-height: 28px;
  border-radius: 999px; background: #fff; border: 1px solid var(--b-border);
  font-size: 12px; color: var(--b-ink); text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wp-link:hover { border-color: var(--b-accent); }
.wp-link:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.wp-link-glass {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--b-accent); color: #fff;
}
.wp-link-glass svg { width: 12px; height: 12px; }
.wp-link-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .72; }
.wp-link-name { font-weight: 700; color: var(--b-accent); }
.wp-link-chev { flex: none; color: var(--b-ink); opacity: .45; transition: transform .2s ease; }
.wp-link[aria-expanded="true"] { border-color: var(--b-accent); box-shadow: 0 0 0 1px var(--b-accent); }
.wp-link[aria-expanded="true"] .wp-link-chev { transform: rotate(180deg); }
.wp-info {
  margin-top: .45rem; padding: .85rem 1rem .8rem;
  background: #fff; border: 1px solid var(--b-border); border-left: 3px solid var(--b-accent);
  border-radius: var(--b-radius);
}
.wp-info-region { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--b-accent); margin: 0; }
.wp-info-name { font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--b-ink); margin: .2rem 0 0; }
.wp-info-desc { font-size: 12.5px; font-style: italic; line-height: 1.55; color: var(--b-ink); opacity: .72; margin: .4rem 0 0; }
.wp-info-foot {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed rgba(43,24,16,.25); font-size: 12px;
}
.wp-info-price {
  font-weight: 800; color: #fff; background: var(--b-accent);
  border-radius: 999px; padding: .2rem .55rem; font-variant-numeric: tabular-nums;
}
.wp-info-glass { font-size: 11px; color: var(--b-ink); opacity: .72; }

/* ---- Dieetwensen: the guest menus' allergy sheet, expanding in flow ----
   A fixed overlay cannot be used here: inside the horizontal carousel the
   nearest scroll container is the shell, not the viewport, so it would pin to
   the wrong box. Everything else - the shield trigger, the count, the two
   labelled groups, clear-all and done - is the sheet the guest sees. */
.al-trigger {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem .4rem .5rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-border); color: var(--b-ink);
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: border-color .15s ease;
}
.al-trigger:hover { border-color: var(--b-accent); }
.al-trigger:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.al-trigger[aria-expanded="true"] { border-color: var(--b-accent); box-shadow: 0 0 0 1px var(--b-accent); }
.al-trigger-icon { display: inline-flex; color: var(--b-accent); }
.al-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 .3rem; border-radius: 999px; background: var(--b-accent); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0;
}
.al-sheet {
  margin-top: .65rem; padding: .75rem .85rem .7rem;
  background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
}
.al-sheet-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-ink); opacity: .6; margin: 0 0 .4rem; }
.al-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.al-chip {
  padding: .28rem .6rem; border-radius: 999px; background: #fff;
  border: 1.5px solid var(--b-border); color: var(--b-ink);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.al-chip:hover { border-color: var(--b-accent); }
.al-chip:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.al-chip[aria-pressed="true"] { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.al-status { font-size: 11px; font-weight: 700; color: var(--b-ink); opacity: .72; margin: 0; }
.al-sheet-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--b-border);
}
.al-clear {
  background: none; border: 0; padding: .2rem 0; cursor: pointer; color: var(--b-ink); opacity: .72;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
.al-clear:hover { opacity: 1; }
.al-done {
  border: 0; border-radius: 999px; padding: .38rem .9rem; cursor: pointer;
  background: var(--b-accent); color: #fff;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
}
.al-list { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .75rem; }
/* One column, at every width. This used to go two-up above a 640px VIEWPORT,
   which was the wrong thing to measure: the card lives in a carousel and is
   ~250-360px wide no matter how wide the window is, so the second column never
   had room. Grid tracks refuse to shrink past their content's minimum, so the
   list ran ~385px wide inside a ~250px card and the dish names on the right
   were cut off by the card edge rather than ellipsised. A container query is
   the correct tool if this ever needs two columns again -- but at 269px of
   usable width, two tracks would leave ~130px each, which truncates a name
   like "Geblakerde Broccolisalade" into uselessness. One column it is.
   The min-width:0 is the belt to that braces: a grid item that can always
   shrink can never push past the card, whatever the track count. */
.al-list > * { min-width: 0; }
.al-empty { grid-column: 1 / -1; font-size: 12px; color: var(--b-ink); opacity: .6; margin: 0; }

/* ---- Taal: the same <select> the guest menus carry in their header ---- */
.lg-bar { position: relative; display: flex; align-items: center; }
.lg-bar-icon {
  position: absolute; left: .6rem; display: inline-flex; pointer-events: none;
  color: var(--b-accent);
}
.lg-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: .5rem 2rem .5rem 2.1rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-border); color: var(--b-ink);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.lg-select:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.lg-chev { position: absolute; right: .75rem; pointer-events: none; color: var(--b-ink); opacity: .5; }
.lg-detected { font-size: 11px; font-weight: 700; color: var(--b-accent); margin: .6rem 0 .5rem; }

/* CO₂: three rising bars like a signal meter, filled to the level and tinted
   by it, so the scale reads at a glance without a leaf emoji doing the work. */
.co2-chip {
  display: inline-flex; align-items: center; gap: .45rem; flex: none;
  padding: .3rem .6rem .3rem .55rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-border);
  font-size: 10.5px; font-weight: 700; color: var(--b-ink); white-space: nowrap; line-height: 1.2;
}
.co2-scale { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.co2-scale i { display: block; width: 4px; border-radius: 1.5px; background: rgba(43,24,16,.14); }
.co2-scale i:nth-child(1) { height: 4px; }
.co2-scale i:nth-child(2) { height: 7px; }
.co2-scale i:nth-child(3) { height: 10px; }
.co2-chip b { font-weight: 800; opacity: .72; }
.co2-chip[data-level="low"]    .co2-scale i:nth-child(1)    { background: #16A34A; }
.co2-chip[data-level="medium"] .co2-scale i:nth-child(-n+2) { background: #D97706; }
.co2-chip[data-level="high"]   .co2-scale i                 { background: #DC2626; }
.co2-chip[data-level="low"]    .co2-level { color: #15803D; }
.co2-chip[data-level="medium"] .co2-level { color: #B45309; }
.co2-chip[data-level="high"]   .co2-level { color: #B91C1C; }

/* Calories: the number leads, the unit steps back, and both the number and the
   bar are coloured against the other dishes in the same course - green for the
   lightest of them, red for the heaviest. Colour is never the only carrier: the
   figure itself is right there, and each chip also states its band for a screen
   reader. The three greens/ambers/reds are the same ones the CO2 scale uses. */
.kcal-group {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
  color: var(--b-ink); opacity: .6; margin: 0 0 .4rem;
}
.kcal-rows + .kcal-group { margin-top: .85rem; }
.kcal-rows { display: flex; flex-direction: column; gap: .35rem; }
.kcal-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .45rem .55rem .45rem .7rem; background: #fff;
  border: 1px solid var(--b-border); border-radius: var(--b-radius);
}
.kcal-row-name { min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--b-ink); line-height: 1.25; overflow-wrap: anywhere; }
.kcal-chip {
  /* The chip carries a .sr-only band label, and .sr-only is position:absolute.
     Without a positioned ancestor it escapes the carousel's scroller and lands
     at document coordinates, which is enough to scroll the whole page sideways. */
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem; flex: none;
  padding: .3rem .65rem .3rem .6rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--b-border);
  font-size: 10.5px; font-weight: 700; color: var(--b-ink); white-space: nowrap; line-height: 1.2;
  --kcal-tint: var(--b-accent);
}
.kcal-chip[data-band="low"] { --kcal-tint: #15803D; border-color: rgba(21,128,61,.35); }
.kcal-chip[data-band="mid"] { --kcal-tint: #B45309; border-color: rgba(180,83,9,.35); }
.kcal-chip[data-band="high"] { --kcal-tint: #B91C1C; border-color: rgba(185,28,28,.35); }
.kcal-num { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--kcal-tint); }
.kcal-unit { opacity: .72; margin-left: -.3rem; }
.kcal-bar { width: 28px; height: 4px; border-radius: 2px; background: rgba(43,24,16,.14); overflow: hidden; }
.kcal-bar i { display: block; height: 100%; width: var(--fill, 50%); border-radius: 2px; background: var(--kcal-tint); }
.demo-note { font-size: 11.5px; line-height: 1.5; color: var(--b-ink); opacity: .75; margin: .75rem 0 0; }

/* Several of the demos toggle `hidden` on elements that also carry a display
   rule below; the attribute has to win regardless of stylesheet order. */
.feature-demo [hidden] { display: none !important; }

/* ---- Menu samenstellen: a prix-fixe course picker ---- */
.sm-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sm-title { font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--b-ink); margin: 0; }
.sm-price {
  flex: none; display: inline-flex; align-items: baseline; gap: .25rem;
  padding: .35rem .7rem; border-radius: 999px; background: var(--b-accent); color: #fff;
  font-weight: 800; font-size: 14px; line-height: 1; white-space: nowrap;
}
.sm-price small { font-size: 9.5px; font-weight: 700; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.sm-progress { display: grid; grid-auto-flow: column; gap: 4px; margin: .8rem 0 .9rem; }
.sm-progress i { display: block; height: 4px; border-radius: 2px; background: rgba(43,24,16,.14); transition: background .2s ease; }
.sm-progress i.is-done { background: var(--b-accent); }
.sm-course + .sm-course { margin-top: .6rem; }
.sm-legend { margin: 0 0 .4rem; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-ink); opacity: .6; }
.sm-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .4rem; }
.sm-opt {
  display: flex; align-items: center; gap: .5rem; text-align: left;
  padding: .5rem .6rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  color: var(--b-ink); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.sm-opt:hover { border-color: var(--b-accent); }
.sm-opt:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.sm-opt-check {
  flex: none; width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid rgba(43,24,16,.3); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, border-color .15s ease;
}
.sm-opt-check svg { width: 11px; height: 11px; opacity: 0; transition: opacity .15s ease; }
.sm-opt[aria-pressed="true"] { border-color: var(--b-accent); box-shadow: 0 0 0 1px var(--b-accent); }
.sm-opt[aria-pressed="true"] .sm-opt-check { background: var(--b-accent); border-color: var(--b-accent); }
.sm-opt[aria-pressed="true"] .sm-opt-check svg { opacity: 1; }
.sm-opt-name { font-size: 12px; font-weight: 700; line-height: 1.25; min-width: 0; }
.sm-summary { margin-top: .8rem; padding: .65rem .8rem; border-radius: var(--b-radius); border: 1px dashed rgba(43,24,16,.3); }
.sm-summary.is-complete { background: #fff; border-style: solid; border-color: var(--b-border); }
.sm-summary-hint { font-size: 11.5px; font-weight: 700; color: var(--b-ink); opacity: .72; margin: 0; }
.sm-summary-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-accent); margin: 0; }
.sm-summary-list { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .3rem; font-size: 12px; font-weight: 700; color: var(--b-ink); }
.sm-summary-list li + li::before { content: "\00B7"; margin-right: .3rem; opacity: .5; }

/* ---- Filteren op stemming: three tiles and a colour-coded list ---- */
/* One tile per row: the cards are narrow, and "Avontuurlijk" does not fit
   three abreast. The icon sits in a tinted disc at the left, the label and
   its hint beside it, and a pressed tile fills with the accent. */
.md-tiles { display: flex; flex-direction: column; gap: .5rem; }
.md-tile {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: .75rem; row-gap: .1rem; align-items: center; text-align: left;
  padding: .7rem .85rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  color: var(--b-ink); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.md-tile:hover { border-color: var(--b-accent); }
.md-tile:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 2px; }
.md-tile-icon {
  grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(193,58,34,.1); color: var(--b-accent);
}
.md-tile-icon svg { width: 16px; height: 16px; }
.md-tile-label { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.md-tile-hint { font-size: 10.5px; line-height: 1.3; opacity: .72; }
.md-tile[aria-pressed="true"] { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.md-tile[aria-pressed="true"] .md-tile-icon { background: rgba(255,255,255,.18); color: #fff; }
.md-tile[aria-pressed="true"] .md-tile-hint { opacity: .85; }
.md-status { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1.15rem 0 .6rem; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--b-ink); opacity: .85; }
.md-clear { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--b-accent); background: none; border: 0; padding: .2rem 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.md-list { display: flex; flex-direction: column; gap: .5rem; }
/* Name and price on the first line, the mood tag under the name, and a
   colour bar down the left that spans both. */
.md-row {
  display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; align-items: center; column-gap: .75rem; row-gap: .35rem;
  padding: .65rem .85rem .65rem .7rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  --md-tint: var(--b-accent); --md-soft: rgba(193,58,34,.12);
}
.md-row-bar { grid-row: 1 / span 2; }
.md-row-tag { grid-column: 2; justify-self: start; }
.md-row[data-mood-of="fresh"] { --md-tint: #15803D; --md-soft: rgba(21,128,61,.12); }
.md-row[data-mood-of="adventurous"] { --md-tint: #B45309; --md-soft: rgba(180,83,9,.14); }
.md-row-bar { display: block; width: 4px; height: 100%; min-height: 26px; border-radius: 2px; background: var(--md-tint); align-self: stretch; }
.md-row-name { font-size: 12.5px; font-weight: 700; color: var(--b-ink); line-height: 1.25; }
.md-row-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--md-tint); background: var(--md-soft); border-radius: 999px; padding: .2rem .45rem; white-space: nowrap; }
.md-row-price { font-size: 12px; font-weight: 800; color: var(--b-accent); font-variant-numeric: tabular-nums; }

/* ---- Aanbevelingen per type gast: a segmented control and a re-sorted list ---- */
.pr-kicker { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--b-ink); opacity: .85; margin: 0 0 .45rem; }
/* The three labels do not fit side by side at one line each: "Huisfavoriet"
   and "High-protein" both overran the pill and spilled past the card. The icon
   moves above the label so each button has the full column width for its text,
   and the text is allowed to wrap onto a second line instead of overflowing. */
.pr-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding: 3px; background: #fff; border: 1px solid var(--b-border); border-radius: 14px; }
.pr-seg-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  min-height: 46px; min-width: 0; overflow: hidden;
  padding: .35rem .3rem; border: 0; border-radius: 11px; background: transparent; color: var(--b-ink);
  font-size: 10.5px; line-height: 1.2; font-weight: 800; text-align: center; cursor: pointer;
  overflow-wrap: anywhere; hyphens: auto;
  transition: background .15s ease, color .15s ease;
}
.pr-seg-btn:focus-visible { outline: 2px solid var(--b-accent); outline-offset: 1px; }
.pr-seg-icon { display: inline-flex; opacity: .8; }
.pr-seg-icon svg { width: 14px; height: 14px; }
.pr-seg-btn[aria-pressed="true"] { background: var(--b-accent); color: #fff; border-radius: 11px; }
.pr-seg-btn[aria-pressed="true"] .pr-seg-icon { opacity: 1; }
.pr-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .8rem; }
/* Name and price share the first line; a recommended dish gets a second
   line with the reason at the left and the tag at the right, so the name is
   never squeezed by the tag. */
.pr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .7rem; row-gap: .3rem;
  padding: .6rem .8rem; background: #fff; border: 1px solid var(--b-border); border-radius: var(--b-radius);
  transition: opacity .15s ease;
}
/* The left inset rule on a recommended row is drawn inside the box, so the
   padding on that side has to clear it or the name sits on top of it. */
.pr-row.is-rec { padding-left: 1rem; }
.pr-row:not(.is-rec) { opacity: .78; }
.pr-row.is-rec { border-color: var(--b-accent); box-shadow: inset 3px 0 0 var(--b-accent); background: #fff; }
.pr-row-name { font-size: 12.5px; font-weight: 700; color: var(--b-ink); line-height: 1.25; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pr-row-why { font-size: 10.5px; color: var(--b-ink); opacity: .72; margin: 0; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.pr-badge {
  justify-self: end; display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .5rem .22rem .4rem; border-radius: 999px;
  background: var(--b-accent); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
}
.pr-badge svg { width: 10px; height: 10px; }
.pr-row-price { font-size: 12px; font-weight: 800; color: var(--b-accent); font-variant-numeric: tabular-nums; }

/* ---- Interactieve herkomstkaart: the De Reiziger wine map ----
   Colours and type follow that menu (terracotta, cream, Fraunces for names,
   Space Mono for the small caps) rather than the host --b-* set, because the
   brief is that it looks exactly like the demo does. */
.wm-root { position: relative; }
.wm-frame { position: relative; border-radius: 14px; overflow: hidden; border: 2px dashed rgba(226,71,44,.35); background: #F5EBDB; }
.wm-map { width: 100%; height: 264px; isolation: isolate; }
@media (min-width: 640px) { .wm-map { height: 288px; } }
.map-tint .leaflet-tile-pane { filter: sepia(.35) saturate(1.3) hue-rotate(-8deg) brightness(1.03); }
.wm-marker {
  width: 36px; height: 36px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #FBF3E7; color: #C13A22; font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; font-size: 11px;
  border: 1.5px dashed currentColor; box-shadow: 0 2px 6px rgba(43,24,16,.18); cursor: pointer; transition: transform .15s ease;
}
.wm-marker:hover { transform: scale(1.08); }
.wm-home {
  width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #C13A22; color: #FBF3E7; border: 2px solid #FBF3E7; box-shadow: 0 2px 6px rgba(43,24,16,.25);
}
.wm-home svg { width: 13px; height: 13px; }
/* The info panel sits over the whole demo (map, chips and hint), which gives
   a wine's full story room without the map having to be taller than the card. */
.wm-overlay { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: .5rem; }
.wm-backdrop { position: absolute; inset: 0; background: rgba(43,24,16,.45); border: 0; padding: 0; cursor: pointer; border-radius: 14px; }
.wm-panel {
  position: relative; width: 100%; max-height: 100%; overflow-y: auto;
  background: #FBF3E7; color: #2B1810; border-radius: 16px; padding: .85rem .95rem .9rem;
  box-shadow: 0 18px 34px -16px rgba(43,24,16,.35);
}
.wm-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.wm-info-region { font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #C13A22; margin: 0; }
.wm-info-name { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.1; margin: .15rem 0 0; color: #2B1810; }
.wm-info-close { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: rgba(43,24,16,.65); cursor: pointer; border-radius: 999px; }
.wm-info-close:hover { background: rgba(43,24,16,.06); }
.wm-info-close svg { width: 16px; height: 16px; }
.wm-info-desc { font-size: 12.5px; line-height: 1.45; color: rgba(43,24,16,.72); margin: .4rem 0 0; }
.wm-info-about { font-size: 12px; line-height: 1.5; font-style: italic; color: rgba(43,24,16,.72); margin: .45rem 0 0; }
.wm-info-about-label { display: block; font-style: normal; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(43,24,16,.65); margin-bottom: .2rem; }
.wm-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .55rem; }
.wm-tag {
  display: inline-flex; align-items: center; gap: .25rem; font-family: "Space Mono", ui-monospace, monospace;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border-radius: 999px; padding: .15rem .45rem; border: 1px solid;
}
.wm-tag.is-vegan { background: #C9E7CE; color: #1F5C33; border-color: rgba(31,92,51,.2); }
.wm-pairing { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-family: "Space Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; color: rgba(43,24,16,.65); }
.wm-pairing svg { width: 12px; height: 12px; }
.wm-pairing-name { text-decoration: underline dotted; text-underline-offset: 2px; color: #2B1810; }
.wm-info-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed rgba(43,24,16,.15); }
.wm-info-price { font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; color: #C13A22; }
.wm-add { background: #C13A22; color: #fff; border: 0; border-radius: 999px; padding: .5rem 1rem; font-size: 12px; font-weight: 700; cursor: pointer; }
.wm-stepper { display: inline-flex; align-items: center; gap: .75rem; background: #C13A22; color: #fff; border-radius: 999px; padding: .4rem .75rem; font-size: 12px; font-weight: 700; }
.wm-stepper button { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.wm-stepper span { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.wm-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.wm-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .35rem; border-radius: 999px;
  background: #FBF3E7; border: 1px solid rgba(226,71,44,.3); color: #2B1810;
  font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.wm-chip:hover { border-color: #C13A22; }
.wm-chip:focus-visible { outline: 2px solid #C13A22; outline-offset: 2px; }
.wm-chip[aria-pressed="true"] { background: #C13A22; border-color: #C13A22; color: #fff; }
.wm-chip-flag { width: 18px; height: 18px; border-radius: 999px; object-fit: cover; box-shadow: 0 0 0 1.5px #FBF3E7; }
.wm-hint { font-family: "Space Mono", ui-monospace, monospace; font-size: 10.5px; color: rgba(43,24,16,.72); margin: .55rem 0 0; }
/* The map is its own stacking context (isolation above), so Leaflet's
   z-indexes stay inside it and the info overlay, a sibling, sits over all of it. */
.wm-map .leaflet-control-attribution a { text-decoration: underline; }
/* Leaflet's touch zoom buttons are 30px; these get tapped one-handed. */
.wm-map.leaflet-touch .leaflet-bar a { width: 36px; height: 36px; line-height: 36px; font-size: 20px; }

/* On a phone every carousel card takes the height of the tallest, and a card
   has to fit on the screen whole. These two were the outliers (mood at 734px,
   set menu at 620px on a 375px phone), so they tighten up here. Mood puts each
   tile on one line, label then hint, and lists three dishes until a mood is
   picked (no single mood has more than two). The set menu loses some air
   between its courses. */
@media (max-width: 639px) {
  .md-tiles { gap: .4rem; }
  .md-tile { grid-template-columns: 28px auto minmax(0, 1fr); padding: .45rem .7rem; }
  .md-tile-icon { grid-row: auto; width: 28px; height: 28px; }
  .md-tile-icon svg { width: 14px; height: 14px; }
  .md-tile-hint { text-align: right; }
  .md-status { margin: .8rem 0 .5rem; }
  .md-list { gap: .4rem; }
  .md-row { padding: .5rem .75rem .5rem .6rem; row-gap: .25rem; }
  .md-list:not(.is-filtered) .md-row:nth-child(n+4) { display: none; }
  .sm-progress { margin: .6rem 0 .65rem; }
  .sm-course + .sm-course { margin-top: .45rem; }
  .sm-opt { padding: .45rem .6rem; }
  .sm-summary { margin-top: .6rem; }
}

/* Every card in the feature carousel is stretched to the tallest of them, and
   this demo is by far the tallest — at its full size it made all fifteen too
   tall to read a whole card on a phone. The map and the chips give the height
   back: smaller type fits the five wines in three rows instead of four.
   Must stay last in the file — it overrides the rules above at equal weight. */
@media (max-width: 639px) {
  .wm-map { height: 150px; }
  /* Small, but still tappable: 30px tall and 6px apart (axe flagged the
     earlier 23px chips, 5px apart, as below the WCAG 2.2 target size). */
  .wm-legend { gap: .4rem .375rem; margin-top: .55rem; }
  .wm-chip { min-height: 30px; padding: .25rem .55rem .25rem .3rem; gap: .3rem; font-size: 10px; }
  /* Smaller stamps at the zoom a 150px-tall map lands on, so Portugal and
     Spain stop sitting on top of each other. Matches MARKER_SIZE in home.render.js. */
  .wm-marker { width: 30px; height: 30px; font-size: 10px; }
  .wm-chip-flag { width: 14px; height: 14px; }
  .wm-hint { font-size: 9.5px; margin-top: .45rem; }
}

/* ---- The guest menu's own look, in every demo ----
   The demos are the guest menu in miniature, so they are dressed the way the
   menu is (De Reiziger, as in the hero above them): dish names in Fraunces,
   prices and small capitals in Space Mono, and dishes on raised paper cards
   rather than in outlined white boxes. Selected and recommended states keep
   their accent outline; only the resting surfaces lose theirs. */
.feature-demo {
  --fd-paper: #FFFDF9;
  --fd-raise: 0 0 0 1px rgba(43,24,16,.07), 0 1px 2px rgba(43,24,16,.05), 0 8px 18px -12px rgba(43,24,16,.32);
  color: var(--b-ink);
}

/* The shared dish card (miniCard in home.render.js). */
.fd-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .8rem .9rem .75rem; background: var(--fd-paper);
  border-radius: 12px; box-shadow: var(--fd-raise);
}
.fd-card-main { flex: 1 1 150px; min-width: 0; }
.fd-card-extra { margin-left: auto; display: flex; align-items: center; }
.fd-name {
  margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: 15.5px; line-height: 1.2; letter-spacing: -.005em; color: var(--b-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-price {
  margin: .25rem 0 0; font-family: "Space Mono", ui-monospace, monospace; font-weight: 700;
  font-size: 12px; color: var(--b-accent); font-variant-numeric: tabular-nums;
}

/* Photography: the photo is the card's top, the dish its caption. */
.fd-photos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.fd-photo { overflow: hidden; background: var(--fd-paper); border-radius: 14px; box-shadow: var(--fd-raise); }
.fd-photo-img { display: block; width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.fd-photo-body { display: flex; flex-direction: column; gap: .15rem; padding: .55rem .7rem .65rem; }
.fd-photo .fd-name { font-size: 14px; }
.fd-photo .fd-price { margin: 0; }

/* Dish names, prices and small capitals in the other demos. */
.feature-demo .md-row-name, .feature-demo .pr-row-name, .feature-demo .kcal-row-name, .feature-demo .sm-opt-name {
  font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 14px; letter-spacing: -.005em;
}
.feature-demo .sm-title, .feature-demo .wp-info-name {
  font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -.01em;
}
.feature-demo .sm-title { font-size: 17px; }
.feature-demo .wp-info-name { font-size: 18px; }
.feature-demo .md-row-price, .feature-demo .pr-row-price, .feature-demo .sm-price, .feature-demo .wp-info-price {
  font-family: "Space Mono", ui-monospace, monospace; font-weight: 700;
}
.feature-demo .al-sheet-label, .feature-demo .wp-link-label, .feature-demo .wp-info-region, .feature-demo .sm-legend,
.feature-demo .kcal-group, .feature-demo .pr-kicker, .feature-demo .sm-summary-label {
  font-family: "Space Mono", ui-monospace, monospace; font-weight: 700;
}

/* Raised, not outlined. */
.feature-demo .md-row, .feature-demo .pr-row, .feature-demo .kcal-row, .feature-demo .al-sheet {
  background: var(--fd-paper); border-color: transparent; box-shadow: var(--fd-raise);
}
.feature-demo .pr-row.is-rec { background: var(--fd-paper); border-color: var(--b-accent); box-shadow: inset 3px 0 0 var(--b-accent), var(--fd-raise); }
.feature-demo .wp-info {
  background: var(--fd-paper);
  border-color: transparent transparent transparent var(--b-accent);
  box-shadow: var(--fd-raise);
}
.feature-demo .sm-summary.is-complete { background: var(--fd-paper); border-color: transparent; box-shadow: var(--fd-raise); }