/* Ambrosia DC — the menu, set the way the printed card is set.
 *
 * The card that was approved (Ambrosia-Menu-2026-v155b.pdf) is a serif document: dish
 * names in title case, the Vietnamese name beside them in gold italic, a line of dots
 * running the eye to a forest-green price, section names large and quiet over their
 * Vietnamese subtitle, everything left-aligned under a gold hairline.
 *
 * The theme is the opposite of all that. Jost, uppercase, letterspaced, centred: correct
 * for a hero band, wrong for sixty-eight dishes a diner is trying to read. Structure was
 * already in place here — two columns, a leader, the Chef's Reserve set apart — but the
 * typography underneath it was still the theme's, which is why the page read cold next to
 * the card it was meant to echo. This sets the type.
 *
 * The serif is a system stack on purpose. Nothing is fetched, nothing is added to a page
 * that has just had 1.4 MB taken off it, and Palatino/Iowan/Georgia are all old-style
 * faces close in colour to the printed card. A web font would have looked no better and
 * cost a round trip.
 *
 * Loaded after ambrosia-white.css so it wins on the menu page, and only on that page.
 */

:root{
  --am-menu-rule:rgba(138,106,30,.32);   /* the gold hairline, quiet */
  --am-menu-dots:rgba(138,106,30,.55);   /* the leader */
  --am-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
             Georgia,"Times New Roman",serif;
  --am-desc:#4c4e47;                      /* description grey, still AA on white */
}

/* -------------------------------------------------------------- one section, one block
   The widget lays its children out in columns, which would cut a section in half and run
   the next one down the other side. Each section is therefore a single full-width block
   carrying its own two-column dish grid, so a section always reads as a section. */
.qodef-restaurant-menu-list .qodef-grid-inner{
  display:block !important; column-count:1 !important;
}
/* The theme parks these widgets in Elementor columns of wildly different widths — the
   narrow ones were built for a five-line list, not a section. On the menu page the row
   stacks and every section gets the full measure, so no dish wraps two words to a line. */
.e-con:has(.qodef-restaurant-menu-list),
.e-con-full:has(.qodef-restaurant-menu-list){
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  width:100% !important; max-width:100% !important;
  flex-basis:100% !important; flex-grow:1 !important;
}
/* Elementor gives each widget its own width, and the section headings were set to 430px
   inside a container that centres its children — so every heading floated in the middle
   of the page while its dishes started at the left edge, and "The First Temptation" broke
   over two lines for want of room. Heading and list are the same object to a reader, so
   they are given the same width, the same measure and the same axis. */
/* Written as two rules, and with no :has() inside a :has(). Nesting them is invalid, and
   an invalid selector takes its whole rule down with it — which is how the dish list lost
   the full width it already had the moment the heading was added to the same block. */
.elementor-element:has(> .elementor-widget-container > .qodef-restaurant-menu-list){
  width:100% !important; max-width:100% !important; flex-basis:100% !important;
  align-self:center !important;
}
.elementor-element:has(> .elementor-widget-container > .qodef-section-title .am-sec-vn--head){
  width:100% !important; max-width:100% !important; flex-basis:100% !important;
  align-self:center !important;
}
.e-con:has(.am-sec-vn--head),
.e-con-full:has(.am-sec-vn--head){
  align-items:stretch !important;
}
.qodef-restaurant-menu-list{ width:100% !important; display:block !important; }
.am-block{
  width:100% !important; flex:0 0 100% !important; grid-column:1 / -1;
  padding:0; margin:0;
}
/* A measure, and a margin. Full-bleed, the first letter of every dish sat against the
   left edge of the window — printed menus do not do that, and neither should this. */
.qodef-restaurant-menu-list,
.qodef-section-title:has(.am-sec-vn--head){
  max-width:1180px; margin-inline:auto;
  padding-inline:clamp(1.15rem, 4vw, 2.25rem);
}
.am-dishes{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:2.1rem 4.5rem; align-items:start;
}
.am-item{ margin:0 !important; padding:0 !important; }

/* ---------------------------------------------------------------- section headings
   Large forest serif, the Vietnamese name in gold italic beneath it, a gold hairline
   under the pair — the card's own lockup, left-aligned like the card. */
/* The widget ships as an inline-block, so it shrinks to its text and an ancestor centres
   what is left — which is how "The First Temptation" ended up broken over two lines in
   the middle of the page. And the heading itself is an inline-flex, so the Vietnamese
   line became a second column beside the English one instead of sitting under it. Both
   have to be told to be blocks before any of the type below matters. */
.qodef-section-title:has(.am-sec-vn--head){
  display:block !important;
  width:100% !important;
  border-bottom:1px solid var(--am-menu-rule);
  padding-bottom:.85rem;
  margin:4.5rem auto 2rem;      /* auto, not 0 — 0 would undo margin-inline above */
  text-align:left !important;
}
/* the theme hangs a diamond either side of every section title */
:is(h1,h2,h3,h4,h5).qodef-m-title:has(.am-sec-vn--head)::before,
:is(h1,h2,h3,h4,h5).qodef-m-title:has(.am-sec-vn--head)::after{
  content:none !important; display:none !important;
}
:is(h1,h2,h3,h4,h5).qodef-m-title:has(.am-sec-vn--head){
  display:block !important;
  font-family:var(--am-serif) !important;
  font-size:clamp(1.75rem, 3.2vw, 2.45rem) !important;
  font-weight:700 !important;
  line-height:1.08 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--ambrosia-forest) !important;
  text-align:left !important;
  margin:0 !important;
}
.am-sec-vn--head{
  display:block !important;
  margin:.3rem 0 0 !important;
  font-family:var(--am-serif) !important;
  font-style:italic !important;
  font-size:clamp(1rem, 1.5vw, 1.22rem) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--ambrosia-gold-deep) !important;
  white-space:normal !important;
}
/* the theme's decorative diamonds and the rules this file used to hang either side of
   the Vietnamese line: the hairline under the header does that job now, once */
.am-sec-vn--head::before, .am-sec-vn--head::after{ content:none !important; }
.qodef-section-title:has(.am-sec-vn--head) .qodef-m-decoration,
.qodef-section-title:has(.am-sec-vn--head) svg{ display:none !important; }

/* the standalone lockup, where a section is not the theme's heading widget */
.am-sec{
  display:block; margin:4.5rem auto 2rem; padding-bottom:.85rem; max-width:1180px;
  border-bottom:1px solid var(--am-menu-rule); text-align:left;
}
.am-block:first-child .am-sec{ margin-top:.5rem; }
.am-sec-en{
  display:block;
  font-family:var(--am-serif); font-size:clamp(1.75rem, 3.2vw, 2.45rem);
  font-weight:700; line-height:1.08; letter-spacing:0; text-transform:none;
  color:var(--ambrosia-forest);
}
.am-sec-vn{
  display:block; margin-top:.3rem;
  font-family:var(--am-serif); font-style:italic;
  font-size:clamp(1rem, 1.5vw, 1.22rem); letter-spacing:0; text-transform:none;
  color:var(--ambrosia-gold-deep);
}
.am-sec-vn::before, .am-sec-vn::after{ content:none; }

/* ------------------------------------------------------------------------- a dish
   Name and Vietnamese name on one line, divided by a gold slash exactly as the card
   divides them, then dots, then the price. */
.am-item .qodef-e-heading{
  display:flex; align-items:baseline; gap:.5rem; width:100%;
}
.am-item .qodef-e-title{
  display:flex; flex-flow:row wrap; align-items:baseline; gap:.1rem .45rem;
  margin:0; flex:0 1 auto;
}
.am-item .am-en{
  display:inline;
  font-family:var(--am-serif) !important;
  font-size:1.08rem !important; font-weight:700 !important;
  line-height:1.3 !important; letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--ambrosia-ink) !important;
}
.am-item .am-vn{
  display:inline;
  font-family:var(--am-serif) !important;
  font-size:.97rem !important; font-style:italic !important; font-weight:400 !important;
  line-height:1.3 !important; letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--ambrosia-gold-deep) !important;
}
.am-item .am-vn::before{ content:"/ "; color:var(--am-menu-rule); font-style:normal; }

/* the leader: dots, like the card, not a rule. Painted rather than typed so it always
   lands on the baseline and never breaks the line when a dish name runs long. */
.am-leader{
  flex:1 1 auto; min-width:1.5rem; align-self:baseline;
  height:1em; border:0 !important; transform:none;
  background-image:radial-gradient(circle, var(--am-menu-dots) .9px, transparent 1.1px);
  background-size:5px 5px;
  background-position:0 .62em;
  background-repeat:repeat-x;
}
.am-item .qodef-e-price{
  flex:0 0 auto; white-space:nowrap;
  font-family:var(--am-serif) !important;
  font-size:1.08rem !important; font-weight:700 !important;
  letter-spacing:0 !important;
  color:var(--ambrosia-forest) !important;
}
.am-item .qodef-e-description{
  margin-top:.35rem !important;
  font-family:var(--am-serif) !important;
  font-size:.92rem !important; font-weight:400 !important;
  line-height:1.55 !important; letter-spacing:0 !important;
  color:var(--am-desc) !important;
  max-width:54ch;
}

/* prices that are not numbers carry their own weight */
.am-mp{
  font-family:var(--am-serif); font-size:.9em; font-weight:700;
  letter-spacing:0; text-transform:none;
  color:var(--ambrosia-forest);
}
.am-soon{
  font-family:var(--am-serif); font-size:.86em; font-style:italic;
  letter-spacing:0; text-transform:none;
  color:var(--ambrosia-ink); opacity:.6;
}

/* portion and upgrade notes belong beside the dish, not inside the sentence */
.am-note{
  margin:.3rem 0 0 !important;
  font-family:var(--am-serif) !important; font-style:italic !important;
  font-size:.84rem !important; letter-spacing:0 !important;
  color:var(--ambrosia-gold-deep) !important; opacity:1 !important;
}
.am-note::before{ content:none; }

/* ------------------------------------------------ the Forbidden Feast (Chef's Reserve)
   The printed card sets this tier apart, so the page does too: the section and its
   dishes sit together on forest, in gold leaf and cream — a menu within the menu. */
/* THE CHEF'S RESERVE — set apart by a rule, not by a slab.

   This block used to carry a solid forest background. The trouble is that its
   heading is not inside it: "The Forbidden Feast / Chef's Reserve · Farm-to-Table"
   is a separate Elementor widget in a different container, 113px further up the
   page. So the dark rectangle began below its own title and ended above the next
   one — a black band floating in the middle of a white card, attached to nothing.
   That is the "nền đen" the restaurant asked about, and no amount of colour
   tuning fixes it while the heading lives somewhere else.

   Set apart the way a printed card does it instead: a gold hairline above and
   below, a little more air, and the same type as every other section. The
   section now reads as part of the same document, which is the consistency that
   has been asked for on every page. */
/* No border and no extra padding: the heading above it already draws the gold
   hairline every section on this card is introduced by, and adding a second one
   here produced two rules with 120px of white between them and the dishes
   floating below both. The Chef's Reserve is distinguished by its name and its
   "Chef's Reserve · Farm-to-Table" line, the same way the printed card does it —
   not by a box. */
.am-block--reserve{
  background:transparent;
  margin:0;
  padding:0;
  border:0;
}
.am-block--reserve .am-sec{ margin-top:0; }
/* Everything inside goes back to the card's own ink — the overrides below existed
   only to hold cream type on the slab that is no longer there. */
.am-block--reserve :is(.am-en, .qodef-e-title, .am-sec-en){
  color:var(--ambrosia-forest) !important;
}
.am-block--reserve .qodef-e-description{ color:var(--am-desc) !important; }
.am-block--reserve :is(.am-vn, .qodef-e-price, .am-mp, .am-note, .am-sec-vn){
  color:var(--ambrosia-gold-deep) !important;
}
.am-block--reserve .am-soon{ color:var(--am-desc) !important; opacity:.85; }

/* --------------------------------------------------------------------- the close
   The card ends on a line worth reading twice, a gold rubric, and the small print. */
/* The close of the card. Every line shares one centre.

   It did not. `align-items:center` was written here and never applied, because
   the theme's grid makes this element `display:inline-block` — so the four lines
   laid out as plain blocks, each with its own max-width and a left margin of 0,
   and every one of them started at the same left edge with a different width.
   Measured: the block's centre was at x=713 and the four lines were centred at
   447, 713, 438 and 388. That is the "mất cân đối".

   display:flex is forced so the declaration below means something, and
   margin-inline:auto is set on the children as well — so the lines stay centred
   even if something downstream makes this a block again. */
.am-promise{
  display:flex !important; flex-direction:column; align-items:center;
  width:100%; max-width:1180px; margin:5rem auto 0;
  padding:3.5rem clamp(1.15rem, 4vw, 2.25rem) 0; text-align:center;
  border-top:1px solid var(--am-menu-rule);
}
.am-promise > *{ margin-inline:auto !important; }
.am-promise-quote{
  margin:0; max-width:36ch;
  font-family:var(--am-serif) !important;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem) !important; font-style:italic !important;
  line-height:1.45 !important; letter-spacing:0 !important; text-transform:none !important;
  color:var(--ambrosia-forest) !important;
}
.am-promise-title{
  margin:1.75rem 0 .75rem;
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ambrosia-gold-deep) !important;
}
.am-promise-body{
  margin:0; max-width:62ch;
  font-family:var(--am-serif) !important;
  font-size:.98rem !important; line-height:1.7 !important;
  color:var(--ambrosia-ink) !important;
}
.am-footnote{
  margin:2.5rem 0 0; max-width:62ch;
  font-family:var(--am-serif) !important;
  font-size:.78rem !important; letter-spacing:0 !important; line-height:1.7 !important;
  color:var(--ambrosia-ink) !important; opacity:.62;
}

@media (max-width:880px){
  .am-dishes{ grid-template-columns:1fr; gap:1.9rem; }
  .qodef-section-title:has(.am-sec-vn--head), .am-sec{ margin:3rem 0 1.6rem; }
  .am-item .qodef-e-heading{ flex-wrap:wrap; gap:.35rem; }
  .am-leader{ display:none; }              /* a leader to nowhere helps no one */
  .am-item .qodef-e-price{ margin-left:auto; }
  .am-block--reserve{ padding-left:1.15rem; padding-right:1.15rem; }
}


/* =========================================================================
   7. THE ARTWORK FROM THE CARD

   The printed menu is not only type. A gold lotus, etched, sits in the top corner of
   every spread, and a small stylised lotus stands beside the section that carries its
   name. Both were lifted straight out of Ambrosia-Menu-2026-v155b.pdf rather than
   redrawn — the vector was rendered at 500 dpi, everything that was not a gold stroke
   was dropped (which is how the section rules and the word "Flame" came out of the
   crop), and the result was quantised to 32 colours: 347 KB as RGBA, 51 KB as this.

   Faint on purpose. On the card the flower is a watermark you notice second, after the
   food; louder than that on a screen and it starts competing with the dishes.
   ========================================================================= */
.qodef-restaurant-menu-list{ position:relative; }

/* the etched lotus, once, in the corner of the first section — as the card has it */
.am-block:first-child::before,
.qodef-restaurant-menu-list:first-of-type::before{
  content:"";
  /* high and wide, so it reads as a watermark in the margin and not as a stain over the
     right-hand column of dishes */
  position:absolute; top:-9.5rem; right:-3.5rem; z-index:0;
  width:clamp(170px, 24vw, 310px); aspect-ratio:620 / 520;
  background:url("/wp-content/themes/fidalgo/assets/img/lotus-botanical.png")
             no-repeat center / contain;
  opacity:.34; pointer-events:none;
}
.am-block, .am-dishes, .qodef-section-title{ position:relative; z-index:1; }

/* the stylised lotus, before every section name, the way it marks The Lotus Garden */
:is(h1,h2,h3,h4,h5).qodef-m-title:has(.am-sec-vn--head)::before{
  content:"" !important; display:inline-block !important;
  width:1.35em !important; height:.62em !important; margin-right:.45rem !important;
  vertical-align:baseline; border:0 !important; transform:none !important;
  /* !important, or the theme's own diamond keeps the slot: this pseudo-element already
     carries a base64 SVG background from the theme, and re-enabling content: "" here
     brought the diamond back rather than the lotus. */
  background:url("/wp-content/themes/fidalgo/assets/img/lotus-mark.png")
             no-repeat left center / contain !important;
}

@media (max-width:880px){
  .am-block:first-child::before,
  .qodef-restaurant-menu-list:first-of-type::before{ top:-3rem; right:-.5rem; opacity:.38; }
}


/* =========================================================================
   THE TITLE BAND — a scrim, and white type

   Asked for: a cleaner photograph, a dimmed layer over it, and the title in
   white so it can be read. The photograph is swapped in tools/menu_hero.py; the
   dimming and the type are here, because a scrim tuned in CSS can be adjusted
   without re-encoding the picture underneath it.

   The gradient is weighted to the top, where the title sits, and eases off over
   the board so the food is still the thing being looked at. On ::before rather
   than as a second background layer: the band already carries the photograph as
   its own background, and a second layer would have to be re-declared in full
   every time the photograph changed.
   ========================================================================= */
.elementor-element-b8d61b9{ position:relative; }
.elementor-element-b8d61b9::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:linear-gradient(180deg,
             rgba(4,26,24,.72) 0%,
             rgba(4,26,24,.55) 46%,
             rgba(4,26,24,.34) 100%);
}
.elementor-element-b8d61b9 > *{ position:relative; z-index:1; }
.elementor-element-b8d61b9 :is(h1,h2,h3,.qodef-m-title,.qodef-m-subtitle,.qodef-m-text){
  color:#fff !important;
  text-shadow:0 1px 18px rgba(0,0,0,.45);
}


/* =========================================================================
   THE PHOTOGRAPHS — one strip, instead of five stranded frames

   Asked for: stop the pictures falling loose. tools/menu_images.py explains what
   was happening to them and gathers them here; this is what they look like once
   gathered.

   A strip, at the foot of the card and above the promise: a menu is a document
   somebody reads top to bottom, and photographs interleaved between its sections
   were interrupting that — three screens of white between one section and the
   next. object-fit:cover, because the theme's `fill` was stretching a 900x1352
   photograph into a 482x724 hole and squashing every dish in it.
   ========================================================================= */
/* Explicit column counts, not auto-fit. There are five photographs, and auto-fit
   with a 210px floor fitted four across at 1108px and dropped the fifth onto a
   row of its own — the stranding this was written to end, in a new shape. */
.am-menu-shots{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:clamp(.6rem, 1.4vw, 1rem);
  margin:clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1rem, 3vw, 2rem);
}
.am-menu-shot{
  margin:0;
  overflow:hidden;
  border-radius:2px;
}
.am-menu-shot img{
  display:block;
  width:100%;
  aspect-ratio:4 / 5;
  height:auto;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.am-menu-shot:hover img{ transform:scale(1.04); }

/* Between 680 and 1024, five across is too narrow to read a plate in. Six tracks
   of half a column each put three on the first row and centre the remaining two
   under them, rather than leaving one adrift beside a gap.

   Bounded at both ends on purpose: written as max-width alone it also applied
   below 680, where the narrow rules set two columns — and `grid-column: span 2`
   in a two-column grid gives every photograph the full width, one per screen. */
@media (min-width:681px) and (max-width:1024px){
  .am-menu-shots{ grid-template-columns:repeat(6, 1fr); }
  .am-menu-shot{ grid-column:span 2; }
  .am-menu-shot:nth-child(4){ grid-column:2 / span 2; }
  .am-menu-shot:nth-child(5){ grid-column:4 / span 2; }
}

@media (max-width:680px){
  .am-menu-shots{ grid-template-columns:repeat(2, 1fr); }
  .am-menu-shot{ grid-column:auto; }
  .am-menu-shot:last-child{ grid-column:span 2; }
  .am-menu-shot:last-child img{ aspect-ratio:16 / 9; }
}


/* =========================================================================
   THE BOOKING BAND — a plate for the form to sit on

   Asked for: a shape around the form cluster so the words can be read. The band
   is laid over a daylight photograph of a bamboo tray, and the heading and all
   three controls are the theme's light type — the whole cluster was sitting on
   rice noodles. tools/book_plate.py wraps the heading and the form together;
   this is the plate they sit on.

   Forest at .78 with a blur, matching the review cards, so the two panels on the
   site read as the same object rather than two different fixes. Sized to the
   cluster and centred, so the photograph is still the band — painting the band
   itself would have hidden the picture the restaurant chose.
   ========================================================================= */
.am-book-plate{
  /* Sized to the form, not to the band. At 1040px the plate ran a third wider
     than the controls inside it and the cluster read as a heading with an empty
     panel beside it. */
  width:fit-content;
  max-width:min(920px, 92%);
  margin-inline:auto;
  padding:clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem);
  background:rgba(6,42,38,.78);
  backdrop-filter:blur(10px) saturate(1.05);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);
  border:1px solid rgba(201,162,75,.30);
  border-radius:4px;
  box-shadow:0 20px 52px rgba(0,0,0,.34);
}
/* On its own ground the cluster is light type again, which is what the theme
   drew it as — §1 of ambrosia-white.css had darkened it for the white pages. */
.am-book-plate :is(h2,h3,.qodef-m-title,.qodef-m-text,label,.qodef-m-copyright),
.am-book-plate :is(input,select,button,.qodef-btn-text,.qodef-m-field){
  color:var(--ambrosia-cream, #f4ecdd) !important;
}
.am-book-plate :is(input,select){
  border-bottom-color:rgba(201,162,75,.55) !important;
}
/* THE DROP-DOWNS — a list you can actually read.

   The plate paints its controls cream, and a native <select> hands its own
   colour down to the option list the browser renders. So opening "1 Person" gave
   a dark popup with cream-on-cream entries: nothing visible but the one row the
   mouse happened to be over. Every option has to be given BOTH a background and
   a colour of its own — setting only the colour, as this rule first did, leaves
   the popup's background inherited and dark, which is the same problem wearing
   the opposite mask. */
.am-book-plate select option,
.am-book-plate select optgroup{
  background-color:#fbf9f4 !important;
  color:#1b2c27 !important;
  text-shadow:none !important;
}
/* The closed control stays transparent — it is sitting on a plate already, and
   giving it a background of its own drew three dark boxes across the middle of
   that plate. Colouring the <option>s above is what fixes the popup; the control
   itself needed nothing. */
.am-book-plate select{
  background-color:transparent !important;
  color:var(--ambrosia-cream, #f4ecdd) !important;
}
/* Centred under the heading, and allowed to wrap as a group rather than leaving
   "Book now" stranded on a line of its own below three left-aligned fields.

   This rule alone did not do it, and the screenshot the client sent shows why:
   it centres `.qodef-reservation-form`, but the element that actually lays the
   controls out in a row is the <form class="qodef-m-inner"> inside it, and that
   one was still `justify-content:space-between`. Two flex containers, one
   nested in the other, and only the outer was being told anything.

   The other half was width. Elementor ships the reservation widget with
   `elementor-widget__width-initial`, i.e. `max-width:66%`, so inside an 844px
   plate the whole cluster was pinned to a 492px column on the left with a third
   of the plate empty beside it — "layout all in frame how easy to eye and
   comfortable". Released to the plate's own width the row measures 754px inside
   756px of content box, so all four controls sit on one line instead of
   dropping Book Now onto a second, and the group centres on 720 with the plate. */
.am-book-plate{
  display:flex; flex-direction:column; align-items:center;
}
/* !important because the cap is not in a stylesheet this can outrank: Elementor
   writes `.elementor-3816 .elementor-element.elementor-element-8859b71
   {width:var(--container-widget-width,66%); max-width:66%}` into the page's own
   inline <style>, three classes deep. Without the flag the plate widened and the
   form stayed 498px, centred in a 756px space with the gap simply moved to both
   sides instead of one. */
.am-book-plate > .elementor-element{
  width:100% !important; max-width:100% !important;
}
.am-book-plate .qodef-reservation-form,
.am-book-plate .qodef-reservation-form .qodef-m-inner{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end;
  gap:1rem clamp(1rem, 2.5vw, 2rem);
  width:100%;
}
/* The fields keep the theme's own `flex:1 1 auto`. Pinning them to `0 0 auto`
   to stop them stretching was a mistake worth recording: each <select> draws its
   chevron absolutely against its right edge, so a field shrunk to exactly its
   text width puts the arrow through the last character — "1 Persøn", "11:00\am".
   Left alone they grow from 117/198/118 to 131/212/132 and the arrows keep their
   own space. */
/* `text-align:center` alone left this sitting under the first field: the theme
   renders the OpenTable credit as a flex container, and text-align does not move
   a flex line. It needs justify-content of its own. */
.am-book-plate .qodef-m-copyright{
  flex:1 0 100%; text-align:center; justify-content:center;
  margin:.25rem 0 0; opacity:.78;
}

/* =========================================================================
   Section anchors, for the home page's showcase strip

   The four labels on the home strip are deep links — /menu/#khai-vi and its
   three siblings — so each one lands on the section it names rather than at the
   top of the card like the demo's three did (tools/showcase.py).

   The header is fixed and about 90px tall, so a bare anchor parks the heading
   underneath it and the reader arrives looking at the first two dishes with no
   idea which section they are in. scroll-margin-top holds the heading clear;
   it is the property the browser applies to the *target* of a scroll, so it
   costs nothing on any other route into the page.
   ========================================================================= */
.qodef-m-title[id]{ scroll-margin-top:140px; }