/* ===========================================================================
   Interior pages, in the homepage's language.
   ---------------------------------------------------------------------------
   Replaces assets/pages.css, which was left over from an earlier design
   generation: it declared Poppins, Lato and Lobster (none of which this theme
   ever loads, so interior body copy fell back to a generic sans while the
   chrome used Inria Sans) and it painted the primary button yellow-on-yellow,
   which made the "Order Online" label on the contact page invisible.

   Class names are kept EXACTLY as they were so no template markup, and no
   analytics or DOM hook that depends on them, has to change.

   Same geometry as home-taq.css: 1180 container, 24px gutter, 8/12/16 radii,
   Archivo Narrow display, Raleway accent, Inria Sans body, --tmt-* colour.
   ======================================================================== */

.tm-page-body {
  width: 100%; max-width: var(--tq-wrap, 1180px); margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) var(--tq-gutter, 24px);
}

/* ---- interior hero band ------------------------------------------------- */
.tm-page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 300px; display: grid; place-items: center;
  /* The header is fixed and opaque, and interior pages start at y=0 under it,
     so the band needs the header's height added to its top padding or the
     eyebrow sits jammed against the nav. */
  padding: calc(80px + clamp(30px, 4vw, 56px)) var(--tq-gutter, 24px) clamp(44px, 6vw, 72px);
  background: var(--tmt-ink); text-align: center;
}
.tm-ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tm-ph-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.58); z-index: -1; }
.tm-ph-inner {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 14px; max-width: 720px;
}
.tm-ph-eyebrow {
  margin: 0; font-family: var(--tq-accent, 'Raleway', sans-serif); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; color: var(--tmt-yellow);
}
.tm-page-hero h1 {
  margin: 0; font-family: var(--tq-display, 'Archivo Narrow', sans-serif); font-weight: 700;
  text-transform: uppercase; font-size: clamp(30px, 5vw, 50px); line-height: 1.02;
  letter-spacing: 0.01em; color: var(--tmt-white); text-wrap: balance;
}
.tm-ph-sub {
  margin: 0; font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; color: rgba(255,255,255,0.9); max-width: 60ch; text-wrap: pretty;
}
.tm-ph-sub a { color: var(--tmt-yellow); }

/* ---- prose (legal, story copy) ----------------------------------------- */
.tm-prose { font-family: var(--font-inria); font-size: 16.5px; line-height: 1.7; color: var(--tmt-charcoal); max-width: 68ch; }
.tm-prose h2, .tm-prose h3 {
  font-family: var(--tq-display, 'Archivo Narrow', sans-serif); font-weight: 700;
  text-transform: uppercase; color: var(--tmt-ink); line-height: 1.1;
  margin: 1.9em 0 0.5em; letter-spacing: 0.01em;
}
.tm-prose h2 { font-size: clamp(22px, 2.4vw, 30px); }
.tm-prose h3 { font-size: 20px; }
.tm-prose a { color: var(--tmt-red-deep); }
.tm-prose ul, .tm-prose ol { padding-left: 1.15em; }
.tm-prose li { margin: 0.35em 0; }

/* ---- section head ------------------------------------------------------- */
.tm-section-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.tm-section-head h2, .tm-aside h2 {
  margin: 0; font-family: var(--tq-display, 'Archivo Narrow', sans-serif); font-weight: 700;
  text-transform: uppercase; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.06;
  letter-spacing: 0.01em; color: var(--tmt-ink);
}
.tm-section-head p { margin: 0; font-family: var(--font-inria); font-size: 16px; line-height: 26px; color: var(--tmt-charcoal); max-width: 64ch; }

/* ---- buttons ------------------------------------------------------------
   The old rule set --tm-orange (yellow) as the primary fill with white text,
   and something downstream turned the text yellow too: a 1:1 contrast label.
   Primary is now the same red-deep pill the homepage uses (5.87:1 on white). */
.tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; font-family: var(--font-inria); font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em; text-transform: none; padding: 12px 28px;
  border-radius: var(--tq-r-btn, 8px); text-decoration: none; border: 2px solid transparent;
  transition: background 200ms var(--tq-ease, ease), transform 200ms var(--tq-ease, ease), color 200ms;
}
.tm-btn--primary { background: var(--tmt-red-deep); color: var(--tmt-white); }
.tm-btn--primary:hover, .tm-btn--primary:focus-visible { background: var(--tmt-red-ink); color: var(--tmt-white); transform: scale(1.04); }
.tm-btn--royal { background: var(--tmt-teal-ink); color: var(--tmt-white); }
.tm-btn--royal:hover, .tm-btn--royal:focus-visible { background: var(--tmt-teal-deep); color: var(--tmt-white); transform: scale(1.04); }
.tm-btn--ghost { background: transparent; color: var(--tmt-teal-ink); border-color: var(--tmt-teal-ink); }
.tm-btn--ghost:hover, .tm-btn--ghost:focus-visible { background: var(--tmt-teal-ink); color: var(--tmt-white); }
.tm-btn:active { transform: scale(0.98); }

/* ---- forms -------------------------------------------------------------- */
.tm-form-wrap { max-width: 700px; }
.tm-form {
  display: flex; flex-direction: column; gap: 18px; background: var(--tmt-white);
  border: 1px solid rgba(0,0,0,0.1); border-radius: var(--tq-r-card, 16px);
  padding: clamp(22px, 3.4vw, 34px); box-shadow: 0 12px 30px rgba(0,0,0,0.07);
}
.tm-field-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.tm-field { display: flex; flex-direction: column; gap: 7px; font-family: var(--font-inria); }
.tm-field span {
  font-family: var(--font-inria); font-weight: 700; font-size: 13.5px;
  letter-spacing: 0.02em; color: var(--tmt-ink);
}
.tm-field span i { color: var(--tmt-red-deep); font-style: normal; margin-left: 3px; }
.tm-field input, .tm-field select, .tm-field textarea {
  font-family: var(--font-inria); font-size: 15.5px; color: var(--tmt-ink);
  padding: 12px 14px; background: var(--tmt-white);
  border: 1px solid rgba(0,0,0,0.22); border-radius: var(--tq-r-btn, 8px);
  transition: border-color 160ms, box-shadow 160ms;
}
.tm-field textarea { min-height: 140px; resize: vertical; }
/* Placeholders are the one thing that must not go pale: --tmt-stone is 5.6:1. */
.tm-field input::placeholder, .tm-field textarea::placeholder { color: var(--tmt-stone); opacity: 1; }
.tm-field input:focus-visible, .tm-field select:focus-visible, .tm-field textarea:focus-visible {
  outline: none; border-color: var(--tmt-teal-deep);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tmt-teal-deep) 22%, transparent);
}
.tm-form .tm-btn { align-self: flex-start; margin-top: 4px; }
.tm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---- notices ------------------------------------------------------------ */
.tm-notice {
  font-family: var(--font-inria); font-size: 15.5px; line-height: 1.55;
  padding: 14px 18px; border-radius: var(--tq-r-media, 12px); margin-bottom: 22px;
}
.tm-notice--ok  { background: #E9F6EE; color: #17603A; border: 1px solid #BFE3CA; }
.tm-notice--err { background: #FCEAEA; color: var(--tmt-red-ink); border: 1px solid #F2C4C4; }

/* ---- split (form + aside) ---------------------------------------------- */
.tm-split { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 52px); align-items: start; }
.tm-aside { font-family: var(--font-inria); color: var(--tmt-charcoal); }
.tm-aside h2 { margin-bottom: 18px; }
.tm-info {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  margin-bottom: 16px; font-size: 15.5px; line-height: 1.6;
}
.tm-info svg { color: var(--tmt-teal-deep); margin-top: 3px; }
.tm-info a { color: var(--tmt-red-deep); text-decoration: none; }
.tm-info a:hover { text-decoration: underline; }
.tm-info strong { color: var(--tmt-ink); }

/* ---- locations ---------------------------------------------------------- */
.tm-loc-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.tm-loc-card {
  overflow: hidden; border-radius: var(--tq-r-card, 16px); background: var(--tmt-white);
  border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 10px 26px rgba(0,0,0,0.1);
  display: flex; flex-direction: column;
}
.tm-loc-map { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tmt-cream-deep); }
.tm-loc-map img, .tm-loc-map iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.tm-loc-inner { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tm-loc-inner h3 {
  margin: 0; font-family: var(--tq-display, 'Archivo Narrow', sans-serif); font-weight: 700;
  text-transform: uppercase; font-size: 23px; line-height: 1.05; color: var(--tmt-ink);
}
.tm-loc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 8px; }
.tm-loc-actions .tm-btn { font-size: 15px; padding: 10px 20px; }

/* ---- FAQ accordion ------------------------------------------------------ */
.tm-faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.tm-faq details {
  background: var(--tmt-white); border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--tq-r-media, 12px); overflow: hidden;
  transition: border-color 200ms, box-shadow 200ms;
}
.tm-faq details[open] { border-color: color-mix(in oklab, var(--tmt-teal-deep) 40%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,0.07); }
.tm-faq summary {
  cursor: pointer; list-style: none; padding: 17px 52px 17px 20px; position: relative;
  font-family: var(--font-inria); font-weight: 700; font-size: 16.5px; color: var(--tmt-ink);
}
.tm-faq summary::-webkit-details-marker { display: none; }
/* The marker is a CSS cross, not an icon font: two 2px bars, one rotated away
   when the panel opens. Nothing to load and it inherits currentColor. */
.tm-faq summary::before, .tm-faq summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 13px; height: 2px;
  background: var(--tmt-red-deep); border-radius: 2px; transition: transform 220ms var(--tq-ease, ease);
}
.tm-faq summary::before { transform: translateY(-50%); }
.tm-faq summary::after  { transform: translateY(-50%) rotate(90deg); }
.tm-faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }
.tm-faq details > div, .tm-faq details > p {
  margin: 0; padding: 0 20px 20px; font-family: var(--font-inria);
  font-size: 16px; line-height: 1.65; color: var(--tmt-charcoal); max-width: 68ch;
}
.tm-faq a { color: var(--tmt-red-deep); }

/* ---- feature / package / step cards ------------------------------------ */
.tm-feature-grid, .tm-pkg-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.tm-feature, .tm-pkg {
  background: var(--tmt-white); border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--tq-r-card, 16px); padding: 24px 24px 26px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 10px;
}
.tm-feature h3, .tm-pkg h3 {
  margin: 0; font-family: var(--tq-display, 'Archivo Narrow', sans-serif); font-weight: 700;
  text-transform: uppercase; font-size: 23px; line-height: 1.05; color: var(--tmt-ink);
}
.tm-feature p, .tm-pkg p { margin: 0; font-family: var(--font-inria); font-size: 15.5px; line-height: 1.6; color: var(--tmt-charcoal); }
.tm-steps { display: grid; grid-template-columns: 1fr; gap: 20px; }
.tm-step { display: flex; flex-direction: column; gap: 8px; }
.tm-step h3 {
  margin: 0; font-family: var(--tq-display, 'Archivo Narrow', sans-serif); font-weight: 700;
  text-transform: uppercase; font-size: 20px; color: var(--tmt-ink);
}
.tm-step p { margin: 0; font-family: var(--font-inria); font-size: 15.5px; line-height: 1.6; color: var(--tmt-charcoal); }

/* ---- bands, showcase, policy ------------------------------------------- */
.tm-band { background: var(--tmt-cream-deep); padding: clamp(40px, 5vw, 64px) 0; }
.tm-showcase { display: grid; grid-template-columns: 1fr; gap: 18px; }
.tm-showcase img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--tq-r-media, 12px); display: block; }
.tm-policy { font-family: var(--font-inria); font-size: 14px; line-height: 1.6; color: var(--tmt-stone); }
.tm-badge-confirm {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px;
  border-radius: 999px; background: var(--tmt-cream-deep); color: var(--tmt-teal-ink);
  font-family: var(--font-inria); font-weight: 700; font-size: 13px;
}

/* ---- breakpoints -------------------------------------------------------- */
@media (min-width: 768px) {
  .tm-field-row { grid-template-columns: 1fr 1fr; }
  .tm-loc-grid, .tm-feature-grid, .tm-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tm-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tm-split { grid-template-columns: 1.12fr 0.88fr; }
  .tm-loc-grid, .tm-pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tm-btn:hover, .tm-btn:active { transform: none; }
  .tm-faq summary::before, .tm-faq summary::after { transition: none; }
}

/* ===========================================================================
   Interior display type.
   ---------------------------------------------------------------------------
   The menu, drinks, catering and 404 pages are generated from Claude Design
   exports, so their type is set in INLINE styles that resolve the theme's font
   tokens. There is no class to hook. Remapping the one token they all use
   converts the display face across every one of those pages in a single rule,
   which is also the only way to reach inline styles without !important.

   Scoped away from .home so the rebuilt homepage, which uses --tq-display
   directly, cannot be touched by this.

   Rauda Slab Solid is not deleted, just no longer the interior display face:
   the brief was to carry the homepage's language across the whole site, and
   two display faces on one site is the seam this pass exists to close. */
body:not(.home) {
  --font-rauda-solid: 'Archivo Narrow', 'Arial Narrow', Impact, sans-serif;
  --font-display: var(--font-rauda-solid);
  --font-slab: var(--font-rauda-solid);
}

/* Archivo Narrow at the weights the slab used reads light, and it has real
   700; the export asked for `normal` because Rauda Slab has one weight. */
body:not(.home) [style*="--font-rauda-solid"],
body:not(.home) h1, body:not(.home) h2, body:not(.home) h3 { font-weight: 700; }

/* ---- menu + drinks: filter chips and dividers --------------------------
   The export draws 3px ink borders and hard offset shadows; the rest of the
   site is 1px hairlines and 8px radii. These are the only two rules in
   design-menu.css that carry the old treatment. */
body:not(.home) .tmt-thumb { border-radius: var(--tq-r-media, 12px); }
[data-cat-row] { border-bottom-color: rgba(0,0,0,0.09) !important; }

button[data-filter], button[data-cat], .mp-chip, [data-chip] {
  border-width: 1px !important; border-color: rgba(0,0,0,0.2) !important;
  border-radius: 999px !important; box-shadow: none !important;
  font-family: var(--font-inria) !important; letter-spacing: 0.01em !important;
}
button[data-filter][aria-pressed="true"], button[data-cat][aria-pressed="true"],
button[data-filter].is-on, button[data-cat].is-on {
  background: var(--tmt-red-deep) !important; color: var(--tmt-white) !important;
  border-color: var(--tmt-red-deep) !important;
}

/* ---- menu + drinks hero -------------------------------------------------
   The export tints the photo toward red-deep in the middle of the gradient
   and puts a 6px hard offset shadow behind the headline. Both are the old
   treatment; the rest of the site uses a flat scrim and no offset shadow. */
[data-menu-hero] > div[aria-hidden="true"] {
  background: rgba(0,0,0,0.58) !important;
}
[data-menu-hero] h1 {
  text-shadow: none !important; letter-spacing: 0.01em;
  font-size: clamp(34px, 6vw, 62px) !important; line-height: 1.02 !important;
}
[data-menu-hero] > div:last-child {
  padding-top: calc(80px + clamp(30px, 4vw, 56px)) !important;
  padding-bottom: clamp(44px, 6vw, 72px) !important;
}
[data-menu-hero] p:first-of-type {
  font-family: var(--tq-accent, 'Raleway', sans-serif) !important;
  font-weight: 700 !important; letter-spacing: 0.14em !important;
  font-size: 13px !important;
}
/* The filter bar's 2px ink rule against 1px hairlines everywhere else. */
[data-filterbar] { border-bottom: 1px solid rgba(0,0,0,0.12) !important; }

/* ---- buttons: yellow fill, ink label (see home-taq.css for the why) ----- */
.tm-btn--primary { background: var(--tmt-yellow); color: var(--tmt-ink); }
.tm-btn--primary:hover, .tm-btn--primary:focus-visible {
  background: var(--tmt-yellow-deep); color: var(--tmt-ink);
}
button[data-filter][aria-pressed="true"], button[data-cat][aria-pressed="true"],
button[data-filter].is-on, button[data-cat].is-on {
  background: var(--tmt-yellow) !important; color: var(--tmt-ink) !important;
  border-color: var(--tmt-yellow-deep) !important;
}
/* Titles are Rauda Slab site-wide now, so the interior remap that pointed the
   export's font token at Archivo Narrow is no longer wanted. */
body:not(.home) {
  --font-rauda-solid: 'Rauda Slab Solid', 'Alfa Slab One', serif;
}
[data-menu-hero] h1 { letter-spacing: 0 !important; }

/* Rauda Slab has a single weight, so setting font-weight:normal on the display
   text dropped two things below the WCAG "large text" threshold (>=18.66px AND
   bold), which moved them from a 3.0 requirement to 4.5:
     menu prices, red on white   4.09  ->  red-deep 5.87
   Measured, same ramp, no new colour. */
li[data-menu-row] p[style*="--tmt-red"] { color: var(--tmt-red-deep) !important; }

/* Titles Rauda Slab, everything else Inria Sans (see home-taq.css). */
body:not(.home) { --tmt-mono: var(--font-inria); }

/* ---- catering page AA gaps ---------------------------------------------
   Four small-text and numeral contrast failures remain on this page:
     yellow diamond on red        2.66
     teal 01-04 numerals on white 2.96 (needs 3.0)
     yellow label on red-deep     3.81

   A first attempt at broad [style*="--tmt-yellow"] overrides is REVERTED: it
   also caught a yellow label sitting on a light ground and turned it white on
   white (1.54). The catering page is generated from catering.dc.html by
   build_catering.py, so the fix belongs in that source next to the values it
   is correcting, not in blanket !important rules from here. Left failing
   rather than papered over. */

/* ===========================================================================
   CONTACT PAGE — lostontos.be layout, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The reference runs: centred title, one intro line, the hours, a pill to the
   FAQ, two centred info cells, then the map beside the form. The page hero
   above all of this is untouched by request.
   ======================================================================== */
.tq-contact { background: var(--tmt-cream-deep); padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 96px); }
.tq-contact .tq-wrap { display: flex; flex-direction: column; align-items: center; }

.tq-contact__head { text-align: center; margin-bottom: clamp(22px, 3vw, 34px); }
.tq-contact__intro {
  margin: 10px auto 0; max-width: 46ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.6; color: var(--tmt-charcoal);
}

.tq-contact__hours { border-collapse: collapse; font-family: var(--font-inria); font-size: 15px; }
.tq-contact__hours th, .tq-contact__hours td { padding: 5px clamp(18px, 4vw, 54px) 5px 0; text-align: left; font-weight: 400; color: var(--tmt-ink); }
.tq-contact__hours td:last-child { padding-right: 0; text-align: right; }
.tq-contact__faq { margin: clamp(22px, 3vw, 34px) 0 clamp(34px, 4.5vw, 56px); }
/* The ghost button is white-on-transparent, built for a dark band; on this
   cream ground it needs the ink treatment instead. */
.tq-contact__faq .tq-btn--ghost { color: var(--tmt-ink); border-color: var(--tmt-ink); }
.tq-contact__faq .tq-btn--ghost:hover { background: var(--tmt-ink); color: var(--tmt-cream); }

.tq-contact__cols {
  display: grid; grid-template-columns: 1fr; gap: clamp(26px, 3.4vw, 44px);
  width: 100%; margin-bottom: clamp(30px, 4vw, 48px);
}
.tq-contact__cell { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.tq-contact__cell p { margin: 0; font-family: var(--font-inria); font-size: 15.5px; line-height: 1.55; color: var(--tmt-ink); }
.tq-contact__cell strong { font-family: var(--tq-display); font-weight: 400; font-size: 19px; text-transform: uppercase; }
.tq-contact__cell a { color: var(--tmt-red); text-decoration: none; }
.tq-contact__cell a:hover { text-decoration: underline; }
.tq-contact__icon { color: var(--tmt-red); display: block; }

.tq-contact__panels { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 30px); width: 100%; }
.tq-contact__map, .tq-contact__form {
  background: var(--tmt-white); border-radius: var(--tq-r-card);
  overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}
/* The iframe has no intrinsic height, so the panel has to state one or the
   map collapses to nothing. */
.tq-contact__map { min-height: 340px; }
.tq-contact__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.tq-contact__form { padding: clamp(20px, 2.6vw, 32px); }

@media (min-width: 768px) {
  .tq-contact__cols   { grid-template-columns: repeat(2, 1fr); }
  .tq-contact__panels { grid-template-columns: 1fr 1.1fr; }
}

/* ===========================================================================
   MENU PAGE — lostontos.be layout, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   A plain two-column text menu. The columns are CSS `columns`, not a grid: the
   browser balances the category blocks by height, which is how the reference's
   two columns end up level despite the blocks being wildly different lengths.
   A grid would deal them left/right in pairs and leave one column short.
   ======================================================================== */
.tq-menupage { background: var(--tmt-cream-deep); padding: clamp(44px, 5.5vw, 76px) 0 clamp(56px, 7vw, 92px); }

.tq-menupage__head { text-align: center; margin-bottom: clamp(34px, 4.5vw, 58px); }
/* Two-tone title, the reference's own treatment: the lead-in in red and the
   restaurant's name under it in the cream. */
.tq-menupage__title {
  margin: 0; font-family: var(--tq-display);
  font-size: clamp(30px, 4.6vw, 58px); line-height: 1.02;
  text-transform: uppercase;
}
.tq-menupage__title span { display: block; color: var(--tmt-red); }
.tq-menupage__title em { display: block; font-style: normal; color: var(--tmt-teal-deep); }
.tq-menupage__cross { margin-top: clamp(16px, 2vw, 24px); }
.tq-menupage__cross .tq-btn--ghost { color: var(--tmt-ink); border-color: var(--tmt-ink); }
.tq-menupage__cross .tq-btn--ghost:hover { background: var(--tmt-ink); color: var(--tmt-cream); }

.tq-menupage__cols { columns: 1; column-gap: clamp(30px, 4.5vw, 72px); }

.tq-mgroup {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(34px, 4vw, 54px);
}
.tq-mgroup__title {
  margin: 0 0 6px; text-align: center;
  font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(21px, 2.3vw, 28px);
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-mgroup__note {
  margin: 0 auto 10px; max-width: 40ch; text-align: center;
  font-family: var(--font-inria); font-size: 13px; line-height: 1.45; color: var(--tmt-charcoal);
}
.tq-mgroup__list {
  list-style: none; margin: 0; padding: clamp(12px, 1.6vw, 18px) 0 0;
  border-top: 1px solid rgba(0,0,0,0.18);
}
.tq-mdish { margin: 0 0 clamp(14px, 1.8vw, 20px); }
/* Name and price on one baseline, price hard right. The name box is the flex
   item that shrinks, so a two-line dish name never pushes the price onto its
   own line and the price column stays straight all the way down. */
.tq-mdish__line {
  display: flex; align-items: baseline; gap: 10px 14px; margin: 0;
}
.tq-mdish__name {
  flex: 1; min-width: 0;
  font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.15;
  text-transform: uppercase; color: var(--tmt-ink);
}
.tq-mdish__flags { margin-left: 7px; font-size: 12px; letter-spacing: 2px; }
.tq-mdish__price {
  flex: none; margin-left: auto; white-space: nowrap;
  font-family: var(--tq-display); font-size: clamp(15px, 1.4vw, 18px); color: var(--tmt-red);
}
.tq-mdish__desc {
  margin: 5px 0 0; max-width: 52ch;
  font-family: var(--font-inria); font-size: 14px; line-height: 1.5;
  color: var(--tmt-charcoal); text-wrap: pretty;
}
.tq-mdish__mods {
  margin: 4px 0 0; font-family: var(--font-inria);
  font-size: 13px; line-height: 1.45; color: var(--tmt-stone);
}
.tq-menupage__key {
  margin: clamp(18px, 2.4vw, 30px) 0 0; text-align: center;
  font-family: var(--font-inria); font-size: 13px; color: var(--tmt-charcoal);
}

@media (min-width: 820px) { .tq-menupage__cols { columns: 2; } }

/* ---- menu page: filter bar + hover photo -------------------------------- */
/* The pills and chips carry inline styles from tm_menu_pill_style() /
   tm_menu_chip_style(), which is what design-menu.js toggles as it filters —
   so only the bar's own layout is set here, never the control's colours. */
.tq-menufilter {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin: 0 0 clamp(28px, 3.6vw, 46px);
}
.tq-menufilter__pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.tq-menufilter__pills button, .tq-menufilter__chips button { cursor: pointer; }
.tq-menufilter__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tq-menufilter__picker { display: none; align-items: center; gap: 8px; }
.tq-menufilter__picker label { font-family: var(--font-inria); font-size: 13px; color: var(--tmt-charcoal); }
.tq-menufilter__picker select {
  font-family: var(--font-inria); font-size: 15px; padding: 9px 12px;
  border: 2px solid var(--tmt-ink); border-radius: var(--tq-r-btn);
  background: var(--tmt-white); color: var(--tmt-ink);
}
/* Fourteen pills in a 360px bar means three visible and eleven guessed at, so
   the phone gets the native select instead. */
@media (max-width: 639px) {
  .tq-menufilter__pills { display: none; }
  .tq-menufilter__picker { display: flex; }
}

.tq-menupage__list { position: relative; }
.tq-menupage__empty {
  margin: 30px 0 0; text-align: center;
  font-family: var(--font-inria); font-size: 15px; color: var(--tmt-charcoal);
}

/* The floating photo. Framed the way the reference frames its hover shot — a
   cream border and a drop shadow, so it reads as a print laid on the page
   rather than as part of the column. */
.tq-mshot {
  position: absolute; z-index: 3; pointer-events: none;
  left: 0; top: 0;
  width: clamp(170px, 20vw, 240px); aspect-ratio: 3 / 4;
  border: 6px solid var(--tmt-white);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 16px 38px rgba(0,0,0,0.3);
  opacity: 0; transform: translateY(-50%) rotate(-3deg) scale(0.97);
  transition: opacity 260ms var(--tq-ease), transform 420ms var(--tq-ease), top 340ms var(--tq-ease);
}
.tq-menupage__list.is-shot .tq-mshot { opacity: 1; transform: translateY(-50%) rotate(-3deg) scale(1); }
.tq-mshot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hovered row: the name goes red, the way the homepage's category rows do. */
.tq-mdish { transition: opacity 200ms var(--tq-ease); }
.tq-mdish__name { transition: color 200ms var(--tq-ease); }
.tq-mdish:hover .tq-mdish__name { color: var(--tmt-red); }

/* No pointer: no frame to raise, and no room beside a single column for it. */
@media (hover: none), (max-width: 819px) {
  .tq-mshot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-mshot, .tq-mdish__name { transition-duration: 1ms; }
}

/* ===========================================================================
   MENU PAGE — a ground per category, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Fourteen categories down two columns all on one cream page ran together, so
   each block becomes a panel with its own ground and, on four of the six, one
   of the theme's patterns.

   Every variant sets the SAME five tokens and the block paints from those, so
   a ground is one rule and nothing downstream has to know which one is on.
   That is also what keeps contrast honest: the light grounds get ink text and
   the dark ones get cream, and there is no combination where a token is left
   over from another variant.

   The variant is a CLASS (tq-mgroup--gN), assigned in source order in PHP, not
   a :nth-child. The category filter hides blocks, and with :nth-child the
   surviving blocks would renumber and the whole page would change colour every
   time somebody picked a category.
   ======================================================================== */
.tq-mgroup {
  --g-bg:    var(--tmt-white);
  --g-pat:   none;
  --g-title: var(--tmt-red);
  --g-ink:   var(--tmt-ink);
  --g-muted: var(--tmt-charcoal);
  --g-rule:  rgba(0,0,0,0.18);
  --g-price: var(--tmt-red);

  background: var(--g-bg);
  background-image: var(--g-pat);
  background-size: cover;
  background-position: center;
  border-radius: var(--tq-r-card);
  padding: clamp(18px, 2.2vw, 28px) clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.09);
}
.tq-mgroup__title { color: var(--g-title); }
.tq-mgroup__note  { color: var(--g-muted); }
.tq-mgroup__list  { border-top-color: var(--g-rule); }
.tq-mgroup .tq-mdish__name  { color: var(--g-ink); }
.tq-mgroup .tq-mdish__desc  { color: var(--g-muted); }
.tq-mgroup .tq-mdish__mods  { color: var(--g-muted); opacity: 0.85; }
.tq-mgroup .tq-mdish__price { color: var(--g-price); }
.tq-mgroup .tq-mdish:hover .tq-mdish__name { color: var(--g-price); }

/* 1 — cream paper, monogram pattern */
.tq-mgroup--g1 { --g-bg: var(--tmt-cream); --g-pat: url('taq/fondo_tequilamama.webp'); }
/* 2 — deep teal, cream type */
.tq-mgroup--g2 {
  --g-bg: var(--tmt-teal-deep); --g-title: var(--tmt-yellow);
  --g-ink: var(--tmt-cream); --g-muted: rgba(255,255,255,0.74);
  --g-rule: rgba(255,255,255,0.24); --g-price: var(--tmt-yellow);
}
/* 3 — sol yellow, sunburst */
.tq-mgroup--g3 {
  --g-bg: var(--tmt-yellow); --g-pat: url('taq/fondo_amarillento.webp');
  --g-title: var(--tmt-red-ink); --g-ink: var(--tmt-ink);
  --g-muted: var(--tmt-charcoal); --g-rule: rgba(0,0,0,0.22); --g-price: var(--tmt-red-ink);
}
/* 4 — plain cream-deep, the quiet one between the loud ones */
.tq-mgroup--g4 { --g-bg: var(--tmt-cream-deep); }
/* 5 — ink, tequila-bottle texture, cream type */
.tq-mgroup--g5 {
  --g-bg: var(--tmt-ink); --g-pat: url('taq/fondo_tequila.webp');
  --g-title: var(--tmt-yellow); --g-ink: var(--tmt-cream);
  --g-muted: rgba(255,255,255,0.7); --g-rule: rgba(255,255,255,0.22); --g-price: var(--tmt-yellow);
}
/* 6 — talavera tile */
.tq-mgroup--g6 {
  --g-bg: var(--tmt-yellow-light); --g-pat: url('taq/fondo_talavera.webp');
  --g-title: var(--tmt-teal-ink); --g-ink: var(--tmt-ink);
  --g-muted: var(--tmt-charcoal); --g-rule: rgba(0,0,0,0.2); --g-price: var(--tmt-red);
}
/* The patterns are busy behind small type, so the panel lays a wash of its own
   ground over them and the text sits on that rather than straight on the tile. */
.tq-mgroup--g1, .tq-mgroup--g3, .tq-mgroup--g5, .tq-mgroup--g6 { position: relative; isolation: isolate; }
.tq-mgroup--g1::before, .tq-mgroup--g3::before,
.tq-mgroup--g5::before, .tq-mgroup--g6::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; background: var(--g-bg); opacity: 0.72;
}

/* Blocks are panels now, so they need air between them down the column. */
.tq-menupage__cols { column-fill: balance; }
.tq-mgroup { margin: 0 0 clamp(20px, 2.4vw, 30px); }

/* ---- double-click: the photo, full size -------------------------------- */
.tq-mdish[data-dimg] { cursor: zoom-in; }
/* The dblclick dialog reuses design-menu.css's .tmt-lightbox rules; it only
   needs to sit above the floating hover frame and the sticky header. */
.tq-zoom { z-index: 200; }
.tq-zoom .tmt-lightbox__img { max-width: min(92vw, 900px); max-height: 82vh; }

/* ---- menu grounds: the brand four, not a near-black -------------------- */
/* Ground 5 was --tmt-ink + the bottle texture. Ink is a real token but it is a
   TEXT colour here, and a near-black panel is the least Tequila Mama thing on
   the page — the brand is red / teal / yellow / cream. So 5 becomes chile red
   and the set is now the four brand colours plus the two cream papers, and
   nothing on the menu is coloured with anything that is not in tokens.css. */
.tq-mgroup--g5 {
  --g-bg: var(--tmt-red);
  --g-pat: url('taq/fondo_tequila.webp');
  --g-title: var(--tmt-yellow);
  --g-ink: var(--tmt-white);
  --g-muted: rgba(255,255,255,0.82);
  --g-rule: rgba(255,255,255,0.3);
  --g-price: var(--tmt-yellow);
}

/* The interior page hero can be film now; same box as the still it replaces. */
.tm-ph-bg--vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---- menu page: the title block is a film band -------------------------- */
.tq-menupage__head--film {
  position: relative; isolation: isolate;
  margin: calc(-1 * clamp(44px, 5.5vw, 76px)) calc(-1 * var(--tq-gutter)) clamp(34px, 4.5vw, 58px);
  padding: clamp(56px, 8vw, 110px) var(--tq-gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: clamp(240px, 34vh, 380px);
  overflow: hidden;
}
.tq-menupage__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tq-menupage__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: rgba(0,0,0,0.56);
}
/* Over film the two-tone title needs the light half to be light — teal on a
   dark frame is unreadable, and the frame changes every few seconds. */
.tq-menupage__head--film .tq-menupage__title span { color: var(--tmt-red); }
.tq-menupage__head--film .tq-menupage__title em   { color: var(--tmt-white); }
.tq-menupage__head--film .tq-menupage__title {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

/* The film band is a HERO, so it runs edge to edge rather than stopping at the
   wrap. Bleed measured from the wrap (this block sits inside it); `calc(50% -
   50vw)` would be measured against the block's own width and overshoot. The
   page clips, so the bleed can never raise a horizontal scrollbar. */
.tq-menupage { overflow-x: clip; }
.tq-menupage__head--film {
  margin-inline: calc(-1 * ((100vw - min(var(--tq-wrap), 100vw - 2 * var(--tq-gutter))) / 2 + var(--tq-gutter)));
}

/* ===========================================================================
   CATERING PAGE — rebuilt in the site's language, 2026-09-09 (Santi)
   ======================================================================== */
.tq-cater { background: var(--tmt-cream-deep); padding-bottom: clamp(56px, 7vw, 96px); overflow-x: clip; }

/* ---- film band, same as the menu page's ---------------------------------- */
.tq-cater__hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(280px, 42vh, 460px);
  display: flex; align-items: center;
  padding: clamp(56px, 8vw, 110px) 0;
  margin-bottom: clamp(38px, 5vw, 66px);
}
.tq-cater__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-cater__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,0.6); }
.tq-cater__hero-in { text-align: center; }
.tq-cater__title {
  margin: 0; font-family: var(--tq-display);
  font-size: clamp(32px, 5.4vw, 68px); line-height: 1.0;
  text-transform: uppercase; text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.tq-cater__title span { display: block; color: var(--tmt-red); }
.tq-cater__title em   { display: block; font-style: normal; color: var(--tmt-white); }
.tq-cater__lede {
  margin: 16px auto 0; max-width: 52ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.6; color: rgba(255,255,255,0.9);
}

.tq-cater__sec { margin: 0 0 clamp(44px, 6vw, 80px); }
.tq-cater__split { display: grid; grid-template-columns: 1fr; gap: clamp(30px, 4vw, 56px); }
@media (min-width: 860px) { .tq-cater__split { grid-template-columns: 1.05fr 1fr; } }

/* ---- the four bars ------------------------------------------------------ */
.tq-bars { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(20px, 2.6vw, 30px); }
@media (min-width: 700px)  { .tq-bars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tq-bars { grid-template-columns: repeat(4, 1fr); } }
.tq-bar {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--tq-r-card);
  background: var(--tmt-white);
  box-shadow: 0 10px 26px rgba(0,0,0,0.1);
}
/* One brand ground per bar, cycling — the same four the menu panels use. */
.tq-bar--g1 { background: var(--tmt-cream); }
.tq-bar--g2 { background: var(--tmt-teal-deep); color: var(--tmt-cream); }
.tq-bar--g3 { background: var(--tmt-yellow); }
.tq-bar--g4 { background: var(--tmt-red); color: var(--tmt-white); }
.tq-bar__price {
  margin: 0; font-family: var(--tq-display);
  font-size: clamp(28px, 3vw, 38px); line-height: 1; color: var(--tmt-red);
}
.tq-bar__price span { font-size: 13px; margin-left: 6px; opacity: 0.8; }
.tq-bar--g2 .tq-bar__price, .tq-bar--g4 .tq-bar__price { color: var(--tmt-yellow); }
.tq-bar--g3 .tq-bar__price { color: var(--tmt-red-ink); }
.tq-bar__name {
  margin: 0; font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.1; text-transform: uppercase;
}
.tq-bar__blurb, .tq-bar__list { font-family: var(--font-inria); font-size: 14px; line-height: 1.5; }
.tq-bar__blurb { margin: 0; opacity: 0.86; }
.tq-bar__list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; opacity: 0.86; }
.tq-bar__list li { padding-left: 15px; position: relative; }
.tq-bar__list li::before { content: '·'; position: absolute; left: 3px; font-weight: 700; }

/* ---- add-ons and platters ----------------------------------------------- */
.tq-adds { list-style: none; margin: clamp(16px, 2vw, 22px) 0 0; padding: 0; display: grid; gap: 14px; }
.tq-adds li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.14);
}
.tq-adds__name  { font-family: var(--tq-display); font-size: 18px; text-transform: uppercase; color: var(--tmt-ink); }
.tq-adds__price { font-family: var(--tq-display); font-size: 18px; color: var(--tmt-red); text-align: right; }
.tq-adds__price small { font-size: 11px; margin-left: 4px; color: var(--tmt-charcoal); }
.tq-adds__blurb { grid-column: 1 / -1; font-family: var(--font-inria); font-size: 13.5px; line-height: 1.5; color: var(--tmt-charcoal); }
.tq-platters { margin-top: clamp(16px, 2vw, 22px); font-family: var(--font-inria); font-size: 14.5px; line-height: 1.55; color: var(--tmt-charcoal); }
.tq-platters p { margin: 0 0 10px; }
.tq-platters strong { font-family: var(--tq-display); font-weight: 400; font-size: 17px; text-transform: uppercase; color: var(--tmt-ink); }
.tq-platters__call a { color: var(--tmt-red); text-decoration: none; }
.tq-platters__call a:hover { text-decoration: underline; }

/* ---- the quote form ----------------------------------------------------- */
.tq-quote {
  display: grid; gap: clamp(18px, 2.2vw, 26px);
  margin-top: clamp(20px, 2.6vw, 30px);
  padding: clamp(22px, 3vw, 36px);
  background: var(--tmt-white);
  border-radius: var(--tq-r-card);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.tq-quote__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .tq-quote__grid { grid-template-columns: repeat(2, 1fr); } }
.tq-f { display: grid; gap: 6px; }
.tq-f > span {
  font-family: var(--font-inria); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tmt-ink);
}
.tq-f > span small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tmt-stone); }
.tq-f input, .tq-f select, .tq-f textarea {
  font-family: var(--font-inria); font-size: 15.5px; padding: 12px 14px;
  border: 2px solid var(--tmt-ink); border-radius: var(--tq-r-btn);
  background: var(--tmt-white); color: var(--tmt-ink); width: 100%;
}
.tq-f input:focus-visible, .tq-f select:focus-visible, .tq-f textarea:focus-visible {
  outline: 3px solid var(--tmt-yellow); outline-offset: 1px;
}
.tq-fs { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.tq-fs legend {
  padding: 0; font-family: var(--font-inria); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--tmt-ink);
}
.tq-chips { display: flex; flex-wrap: wrap; gap: 9px; }
/* The input stays in the DOM for the keyboard and for the form post; the label
   is what is painted. :focus-visible on the input shows the ring on the chip. */
.tq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tq-chip span {
  display: inline-block; cursor: pointer;
  font-family: var(--font-inria); font-size: 14px;
  padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--tmt-ink); background: var(--tmt-white); color: var(--tmt-ink);
  transition: background 160ms var(--tq-ease), color 160ms var(--tq-ease);
}
.tq-chip span small { opacity: 0.65; margin-left: 5px; }
.tq-chip input:checked + span { background: var(--tmt-red); color: var(--tmt-white); border-color: var(--tmt-red); }
.tq-chip input:checked + span small { opacity: 0.85; }
.tq-chip input:focus-visible + span { outline: 3px solid var(--tmt-yellow); outline-offset: 2px; }

/* ---- the estimate ------------------------------------------------------- */
.tq-est {
  display: grid; gap: 8px;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--tq-r-card);
  background: var(--tmt-teal-deep); color: var(--tmt-cream);
}
.tq-est__label { margin: 0; font-family: var(--font-inria); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tmt-yellow); }
.tq-est__total { margin: 0; font-family: var(--tq-display); font-size: clamp(34px, 4.4vw, 52px); line-height: 1; color: var(--tmt-white); }
.tq-est__lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--font-inria); font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.82); }
.tq-est__fine { margin: 6px 0 0; font-family: var(--font-inria); font-size: 12.5px; color: rgba(255,255,255,0.6); }
.tq-quote__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tq-quote__send p { margin: 0; font-family: var(--font-inria); font-size: 13.5px; color: var(--tmt-stone); }

/* ---- terms -------------------------------------------------------------- */
.tq-terms { list-style: none; margin: clamp(16px, 2vw, 24px) 0 0; padding: 0; display: grid; gap: 10px; max-width: 74ch; }
.tq-terms li { font-family: var(--font-inria); font-size: 15px; line-height: 1.55; color: var(--tmt-ink); padding-left: 18px; position: relative; }
.tq-terms li::before { content: '◆'; position: absolute; left: 0; color: var(--tmt-red); font-size: 11px; top: 4px; }
.tq-terms strong { font-family: var(--tq-display); font-weight: 400; text-transform: uppercase; }
.tq-terms__call { margin: 16px 0 0; font-family: var(--font-inria); font-size: 15px; color: var(--tmt-charcoal); }
.tq-terms__call a { color: var(--tmt-red); text-decoration: none; }
.tq-terms__call a:hover { text-decoration: underline; }

/* ===========================================================================
   CATERING — redistributed, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   The page ran as four full-width stacks with a long gap after the short
   platters column and a lone left-aligned terms block at the foot. Now:

     the bars        four across, unchanged
     add-ons | platters   two columns
     form | terms    side by side — the terms are what you check while filling
                     the form in, so they sit within a glance of it

   The form itself is narrower than the band and the terms are set smaller than
   body copy: reference text read once, not prose.
   ======================================================================== */
.tq-quote__row {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  margin-top: clamp(20px, 2.6vw, 30px);
}
@media (min-width: 940px) {
  .tq-quote__row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
  /* The terms scroll with the form rather than running out early. */
  .tq-terms-aside { position: sticky; top: 104px; }
}
.tq-quote { margin-top: 0; padding: clamp(18px, 2.2vw, 28px); gap: clamp(14px, 1.7vw, 20px); }
/* A narrower form does not need two field columns until it is genuinely wide. */
.tq-quote__grid { grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 1180px) { .tq-quote__grid { grid-template-columns: repeat(2, 1fr); } }
.tq-quote .tq-f input, .tq-quote .tq-f select, .tq-quote .tq-f textarea { padding: 10px 12px; font-size: 15px; }
.tq-quote .tq-chip span { padding: 8px 13px; font-size: 13px; }
.tq-quote .tq-est__total { font-size: clamp(30px, 3.6vw, 42px); }

/* The terms, smaller. */
.tq-terms-aside {
  background: var(--tmt-white);
  border-radius: var(--tq-r-card);
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.09);
}
.tq-terms__h { font-size: clamp(22px, 2.4vw, 30px); }
.tq-terms-aside .tq-terms { margin-top: 14px; gap: 8px; max-width: none; }
.tq-terms-aside .tq-terms li { font-size: 13.5px; line-height: 1.5; padding-left: 16px; }
.tq-terms-aside .tq-terms li::before { font-size: 9px; top: 4px; }
.tq-terms-aside .tq-terms strong { font-size: 13.5px; }
.tq-terms-aside .tq-terms__call { margin-top: 14px; font-size: 13.5px; }

/* Interior pages inherit the button system from home-taq.css (it loads
   site-wide with the chrome). Two local overrides that predate it and would
   otherwise fight it: the contact and menu pages set ghost buttons to ink for
   their cream grounds, which the system now handles. */
.tq-contact__faq .tq-btn--ghost,
.tq-menupage__cross .tq-btn--ghost {
  background: transparent; color: var(--tmt-ink); border-color: var(--tmt-ink);
}
.tq-contact__faq .tq-btn--ghost:hover,
.tq-menupage__cross .tq-btn--ghost:hover {
  background: var(--tmt-red); border-color: var(--tmt-red); color: var(--tmt-white);
}

/* ===========================================================================
   ABOUT PAGE — 2026-09-09 (Santi), after the Mojitos About reference
   ---------------------------------------------------------------------------
   Film hero, an ornamented intro over a photo mosaic, two alternating story
   rows on a dark ground, the three facts, then the gallery strip and a close.
   Every sentence is the client's own deck (tm_taq_about) — no founding story
   is invented, and where the reference has copy the client never wrote, the
   section simply is not built.
   ======================================================================== */
.tq-about { background: var(--tmt-cream-deep); overflow-x: clip; }

.tq-about__hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(260px, 40vh, 420px);
  display: flex; align-items: center;
  padding: clamp(64px, 9vw, 120px) 0;
}
.tq-about__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-about__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,0.6); }
.tq-about__hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tq-about__title {
  margin: 0; font-family: var(--tq-display);
  font-size: clamp(32px, 5.6vw, 70px); line-height: 1;
  text-transform: uppercase; color: var(--tmt-white);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.tq-about__rule { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.tq-about__rule i { display: block; width: clamp(40px, 7vw, 80px); height: 1px; background: rgba(255,255,255,0.5); }
.tq-about__rule b { display: block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--tmt-yellow); }
.tq-about__kicker {
  margin: 12px 0 0; font-family: var(--font-inria); font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tmt-yellow);
}

.tq-about__intro { padding: clamp(48px, 6vw, 84px) 0; background: var(--tmt-cream-deep); }
.tq-about__h { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.tq-about__orn {
  display: inline-block; width: 13px; height: 13px; flex: 0 0 auto;
  transform: rotate(45deg); background: var(--tmt-yellow); border: 2px solid var(--tmt-red);
}
.tq-about__mosaic {
  display: grid; gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: 1fr 1fr; margin-top: clamp(26px, 3.4vw, 40px);
}
.tq-about__cell { margin: 0; overflow: hidden; border-radius: var(--tq-r-card); box-shadow: 0 12px 28px rgba(0,0,0,0.16); }
.tq-about__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-about__cell--1 { grid-column: 1 / -1; aspect-ratio: 21 / 8; }
.tq-about__cell--2, .tq-about__cell--3 { aspect-ratio: 16 / 10; }

/* ---- story rows --------------------------------------------------------- */
.tq-story {
  position: relative; isolation: isolate;
  padding: clamp(52px, 7vw, 92px) 0;
  background: var(--tmt-teal-deep) url('taq/fondo_tequila.webp') center / cover;
}
.tq-story::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tmt-teal-deep); opacity: 0.86; }
.tq-story__row {
  display: grid; grid-template-columns: 1fr; gap: clamp(22px, 3vw, 46px);
  align-items: center; margin-bottom: clamp(34px, 4.5vw, 60px);
}
.tq-story__row:last-child { margin-bottom: 0; }
@media (min-width: 860px) {
  .tq-story__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* The flipped row reads image-then-copy in SOURCE order too, so the reading
     order matches the visual one — `direction`/`order` tricks would have put a
     screen reader through the copy before the picture it belongs to. */
}
.tq-story__eye {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--tq-display); font-size: clamp(16px, 1.7vw, 21px);
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--tmt-yellow);
}
.tq-story__eye span { display: block; width: 26px; height: 2px; background: var(--tmt-yellow); }
.tq-story__text {
  margin: 0; max-width: 52ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.65; color: rgba(255,255,255,0.86);
}
.tq-story__shot { margin: 0; overflow: hidden; border-radius: var(--tq-r-card); aspect-ratio: 4 / 3; box-shadow: 0 18px 40px rgba(0,0,0,0.34); }
.tq-story__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- the three facts ---------------------------------------------------- */
.tq-facts { padding: clamp(36px, 4.5vw, 56px) 0; background: var(--tmt-yellow) url('taq/fondo_amarillento.webp') center / cover; }
.tq-facts__row { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); text-align: center; }
@media (min-width: 640px) { .tq-facts__row { grid-template-columns: repeat(3, 1fr); } }
.tq-fact__n { margin: 0; font-family: var(--tq-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1; color: var(--tmt-red-ink); }
.tq-fact__l { margin: 6px 0 0; font-family: var(--font-inria); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tmt-charcoal); }

/* ---- close -------------------------------------------------------------- */
.tq-about__close { padding: clamp(40px, 5vw, 66px) 0; background: var(--tmt-teal-deep); }
.tq-about__close-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.tq-about__close .tq-h2 { color: var(--tmt-white); }
.tq-about__close p { margin: 8px 0 0; font-family: var(--font-inria); font-size: 15px; color: rgba(255,255,255,0.82); }
.tq-about__close-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* The gallery strip is shorter than it was — before the footer it is a seam,
   not a section, so it does not need a third of the viewport. */
.tq-gal__cell { width: clamp(130px, 13vw, 190px); aspect-ratio: 1 / 1; }

/* ===========================================================================
   MENU PAGE — dishes as photo cards, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   After the Mojitos menu: a dish is a card with its photograph, three across.
   Kept from what was already here: the six brand grounds cycling one per
   category, the panel treatment and the Rauda headings.

   The panels stop being CSS `columns` and become full-width blocks stacked down
   the page — a three-up card grid inside a half-width column would be three
   thumbnails, and balancing columns by height cannot work once the blocks each
   hold a grid of their own.
   ======================================================================== */
.tq-menupage__cols { columns: auto; column-gap: normal; }
.tq-mgroup { margin: 0 0 clamp(22px, 2.8vw, 34px); break-inside: auto; }
.tq-mgroup__title { font-size: clamp(24px, 2.8vw, 34px); }
.tq-mgroup__note { font-size: 14px; max-width: 52ch; }
/* The hairline under the heading belonged to a list of text rows; a card grid
   sits on the panel without one. */
.tq-mgroup__list, .tq-dishes { border-top: 0; }

.tq-dishes {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  padding-top: clamp(14px, 1.8vw, 22px);
}
@media (min-width: 620px)  { .tq-dishes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tq-dishes { grid-template-columns: repeat(3, 1fr); } }

.tq-dish {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: clamp(14px, 1.8vw, 20px);
  text-align: center;
  background: var(--tmt-white);
  border-radius: var(--tq-r-card);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 240ms var(--tq-ease), box-shadow 240ms var(--tq-ease);
}
.tq-dish[data-dimg] { cursor: zoom-in; }
.tq-dish:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0,0,0,0.16); }

/* The plate sits in a square well and is CONTAINed, not cropped: these are
   plated dishes shot on white, and cover would slice the plate's edge off. */
.tq-dish__well {
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--tq-r-media);
}
.tq-dish__well img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* No photograph: the monogram on a tint, so the gap reads as deliberate rather
   than as a failed image. 16 of the 80 dishes are in this state. */
.tq-dish.is-noshot .tq-dish__well { background: rgba(0,0,0,0.05); }
.tq-dish__mark { width: 42%; height: auto; opacity: 0.28; }

.tq-dish__name {
  margin: 4px 0 0; font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.15;
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-dish__flags { margin-left: 6px; font-size: 11px; letter-spacing: 2px; }
.tq-dish__desc {
  margin: 0; font-family: var(--font-inria);
  font-size: 13.5px; line-height: 1.5; color: var(--tmt-charcoal);
  text-wrap: pretty;
}
.tq-dish__mods { margin: 0; font-family: var(--font-inria); font-size: 12px; line-height: 1.45; color: var(--tmt-stone); }
.tq-dish__price {
  margin: auto 0 0; padding-top: 6px;
  font-family: var(--tq-display); font-size: clamp(15px, 1.4vw, 18px); color: var(--tmt-ink);
}

/* The cards are white, so on the two light grounds they need an edge to sit
   against rather than melting into the panel. */
.tq-mgroup--g1 .tq-dish, .tq-mgroup--g4 .tq-dish { box-shadow: 0 4px 14px rgba(0,0,0,0.09); border: 1px solid rgba(0,0,0,0.07); }
/* On the dark grounds the card keeps white, and only the name's red needs to
   stay off the panel colour — it already does. */

/* The old text-row rules are dead; nothing emits them any more. */
.tq-mdish, .tq-mshot { display: none; }

/* The filter sets `hidden` on the cards and the panels it is hiding. A UA
   applies [hidden]{display:none} at the LOWEST precedence, so any display of
   our own beats it — .tq-dish is display:flex and .tq-mgroup is a block with a
   ground, and both stayed on screen while the script believed it had hidden
   them. Restate it explicitly. */
.tq-dish[hidden], .tq-mgroup[hidden], .tq-menupage__empty[hidden] { display: none !important; }

/* The bar follows down a long menu, so the chooser is reachable from anywhere
   in it rather than only from the top. */
.tq-menufilter {
  position: sticky; top: 88px; z-index: 20;
  padding: 12px 0; margin-bottom: clamp(20px, 2.6vw, 30px);
  background: color-mix(in oklab, var(--tmt-cream-deep) 92%, transparent);
  backdrop-filter: blur(8px);
}
@media (prefers-reduced-transparency: reduce) {
  .tq-menufilter { background: var(--tmt-cream-deep); backdrop-filter: none; }
}

/* ===========================================================================
   MENU CARDS — the Baires Grill treatment, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   THE BUG THIS FIXES: the cards were rendering with yellow photo wells, and
   nothing on this page set that. `.tq-dish` and `.tq-dish__well` already
   existed in home-taq.css — the ORIGINAL homepage dish card, on --tmt-yellow
   with a --tmt-yellow-deep well — and home-taq.css loads site-wide with the
   chrome. Two different components had grown the same class name. Renamed to
   `.tq-mcard*` rather than fought with specificity, because the collision would
   have come back the next time either component was touched.

   THE AESTHETIC: one flat ground for the whole menu, uniform cards, and the
   sections separated by their headings rather than by colour. The six coloured
   category panels are gone — at three cards across they turned a long menu into
   a stack of loud blocks, and Baires reads calmly precisely because it does not
   do that. Brand still shows: red for the dish names, the monogram in the empty
   wells, Rauda for every heading.
   ======================================================================== */

/* The category panels lose their grounds; the heading does the separating. */
.tq-mgroup {
  background: none !important;
  background-image: none !important;
  box-shadow: none;
  padding: 0;
  margin: 0 0 clamp(34px, 4.4vw, 58px);
}
.tq-mgroup::before { display: none; }
.tq-mgroup__title { color: var(--tmt-red); }
.tq-mgroup__note  { color: var(--tmt-charcoal); }
/* A hairline under the heading, the width of the grid — Baires separates its
   sections with space and a rule, not with a change of colour. */
.tq-mgroup__list, .tq-mcards { border-top: 1px solid rgba(0,0,0,0.12); }

.tq-mcards {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  padding-top: clamp(18px, 2.2vw, 26px);
}
@media (min-width: 620px)  { .tq-mcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tq-mcards { grid-template-columns: repeat(3, 1fr); } }

.tq-mcard {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: clamp(16px, 2vw, 22px);
  text-align: center;
  background: var(--tmt-white);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--tq-r-card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 240ms var(--tq-ease), box-shadow 240ms var(--tq-ease), border-color 240ms;
}
.tq-mcard[data-dimg] { cursor: zoom-in; }
.tq-mcard:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,0.12); border-color: rgba(0,0,0,0.16); }

/* The plates are cut-out PNGs on transparency, so the well must stay light —
   they were designed to sit on paper, and any dark or saturated ground behind
   them reads as a box someone forgot to remove. */
.tq-mcard__well {
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; place-items: center; overflow: hidden;
  background: none; padding: 0;
  border-radius: var(--tq-r-media);
}
.tq-mcard__well img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tq-mcard.is-noshot .tq-mcard__well { background: rgba(0,0,0,0.035); }
.tq-mcard__mark { width: 40%; height: auto; opacity: 0.22; }

.tq-mcard__name {
  margin: 4px 0 0; font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.15;
  letter-spacing: 0; text-transform: uppercase; color: var(--tmt-red);
}
.tq-mcard__flags { margin-left: 6px; font-size: 11px; letter-spacing: 2px; }
.tq-mcard__desc {
  margin: 0; font-family: var(--font-inria);
  font-size: 13.5px; line-height: 1.5; color: var(--tmt-charcoal); text-wrap: pretty;
}
.tq-mcard__mods { margin: 0; font-family: var(--font-inria); font-size: 12px; line-height: 1.45; color: var(--tmt-stone); }
.tq-mcard__price {
  margin: auto 0 0; padding-top: 6px;
  font-family: var(--tq-display); font-size: clamp(15px, 1.4vw, 18px); color: var(--tmt-ink);
}
.tq-mcard[hidden] { display: none !important; }

/* ===========================================================================
   CATERING — the Rreal Tacos treatment, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Hero text moves LEFT over the film with a two-tone, hard-offset headline, and
   the four bars stop being flat coloured panels: each is a card with its own
   photograph, the copy, the per-guest price and a button into the estimator.

   The offset shadow is a hard `text-shadow` with no blur — the reference's
   sign-painter cut. It also does real work here: the headline sits over moving
   footage, and a blurred shadow would smear against it while a hard one holds
   an edge whatever frame is underneath.
   ======================================================================== */
.tq-cater__hero-in { text-align: left; align-items: flex-start; }
.tq-cater__title {
  display: grid; gap: 2px; max-width: 16ch;
  font-size: clamp(34px, 5.6vw, 72px); line-height: 0.98;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.55);
}
.tq-cater__title span { color: var(--tmt-white); }
.tq-cater__title em   { font-style: normal; color: var(--tmt-red); }
.tq-cater__lede { margin-left: 0; margin-right: 0; text-align: left; max-width: 44ch; }

/* ---- section head ------------------------------------------------------- */
.tq-cater__head { text-align: center; max-width: 60ch; margin: 0 auto clamp(28px, 3.4vw, 42px); }
.tq-cater__eyebrow {
  margin: 0; font-family: var(--font-script, var(--tq-display));
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1; color: var(--tmt-teal-ink);
}
.tq-cater__h2 {
  display: grid; gap: 0; margin: 8px 0 0;
  font-family: var(--tq-display); font-size: clamp(28px, 4.2vw, 52px);
  line-height: 1; letter-spacing: -0.015em; text-transform: uppercase;
}
.tq-cater__h2 span { color: var(--tmt-teal-deep); }
.tq-cater__h2 em   { font-style: normal; color: var(--tmt-red); }
.tq-cater__sub {
  margin: 14px auto 0; max-width: 50ch;
  font-family: var(--font-inria); font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.6; color: var(--tmt-charcoal);
}

/* ---- the four bars, as cards -------------------------------------------- */
.tq-bars { display: grid; grid-template-columns: 1fr; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 680px)  { .tq-bars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .tq-bars { grid-template-columns: repeat(4, 1fr); } }

/* The coloured panels are gone — a photograph per card carries the difference
   between the bars now, which is the thing a reader is actually choosing on. */
.tq-bar {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--tmt-white);
  border-radius: var(--tq-r-card);
  box-shadow: 0 8px 22px rgba(0,0,0,0.1);
  color: var(--tmt-ink);
  transition: transform 240ms var(--tq-ease), box-shadow 240ms var(--tq-ease);
}
.tq-bar:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(0,0,0,0.16); }
.tq-bar--g1, .tq-bar--g2, .tq-bar--g3, .tq-bar--g4 { background: var(--tmt-white); color: var(--tmt-ink); }
.tq-bar__media { aspect-ratio: 4 / 3; }
.tq-bar__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-bar__body { display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2vw, 22px); flex: 1; }
.tq-bar__name {
  margin: 0; font-family: var(--tq-display); font-weight: 400;
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.08;
  text-transform: uppercase; color: var(--tmt-red);
}
.tq-bar__blurb { margin: 0; font-family: var(--font-inria); font-size: 14px; line-height: 1.5; color: var(--tmt-charcoal); }
.tq-bar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tq-bar__list li {
  position: relative; padding-left: 14px;
  font-family: var(--font-inria); font-size: 12.5px; line-height: 1.45; color: var(--tmt-stone);
}
.tq-bar__list li::before { content: '·'; position: absolute; left: 3px; font-weight: 700; }
.tq-bar__price {
  margin: auto 0 0; padding-top: 8px;
  font-family: var(--font-inria); font-size: 13.5px; color: var(--tmt-charcoal);
}
.tq-bar__price strong { font-family: var(--tq-display); font-weight: 400; font-size: 20px; color: var(--tmt-ink); }
.tq-bar__cta { display: block; text-align: center; margin-top: 4px; font-size: 15px; padding: 11px 18px; }

/* ===========================================================================
   MENU FILTER BAR — the Baires Grill treatment, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Two rows in soft panels: the dietary filters as outlined pills behind a
   "Filters" label, and the categories as underlined TABS. Baires uses tabs for
   the categories and pills only for the diet filters, and the distinction does
   real work — two pill rows stacked read as one long undifferentiated control,
   where a tab row says "you are in one of these" and a pill row says "toggle
   any of these".

   ON THE !important: design-menu.js paints BOTH controls with inline styles
   (paintPill / paintChip write background, color, borderColor and boxShadow
   directly onto the element), and inline beats any stylesheet. Rather than fork
   that script, the active state is driven off the `aria-pressed` it also sets,
   and the inline paint is overridden. This is the case !important exists for —
   a script writing style attributes that the design has to win against.
   ======================================================================== */
.tq-menufilter {
  position: sticky; top: 88px; z-index: 20;
  display: grid; gap: 10px;
  padding: 0 0 14px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  background: color-mix(in oklab, var(--tmt-cream-deep) 94%, transparent);
  backdrop-filter: blur(8px);
}

/* ---- row 1: the dietary pills ------------------------------------------ */
.tq-menufilter__diet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px;
  padding: 12px clamp(14px, 2vw, 22px);
  background: var(--tmt-cream);
  border-radius: 14px;
}
.tq-menufilter__lab {
  font-family: var(--font-inria); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--tmt-charcoal);
}
.tq-menufilter__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tq-menufilter__chips button {
  cursor: pointer;
  padding: 8px 16px !important;
  border: 1.5px solid var(--tmt-red) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--tmt-red) !important;
  box-shadow: none !important;
  font-family: var(--font-inria) !important;
  font-size: 13px !important;
  transition: background 160ms var(--tq-ease), color 160ms var(--tq-ease);
}
.tq-menufilter__chips button[aria-pressed="true"] {
  background: var(--tmt-red) !important;
  color: var(--tmt-white) !important;
}

/* ---- row 2: the category tabs ------------------------------------------ */
.tq-menufilter__cats {
  padding: 4px clamp(14px, 2vw, 22px) 0;
  background: var(--tmt-cream);
  border-radius: 14px;
}
.tq-menufilter__pills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0 clamp(14px, 2vw, 26px);
  list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid rgba(0,0,0,0.14);
}
.tq-menufilter__pills button {
  cursor: pointer; position: relative;
  padding: 12px 2px 13px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--tmt-charcoal) !important;
  font-family: var(--font-inria) !important;
  font-size: 14px !important;
  transition: color 160ms var(--tq-ease);
}
.tq-menufilter__pills button:hover { color: var(--tmt-ink) !important; }
/* The active tab: red, heavier, and the rule under it thickens into a bar that
   sits ON the hairline rather than beside it. */
.tq-menufilter__pills button[aria-pressed="true"] {
  color: var(--tmt-red) !important;
  font-weight: 700 !important;
}
.tq-menufilter__pills button[aria-pressed="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--tmt-red); border-radius: 2px 2px 0 0;
}

.tq-menufilter__picker { display: none; align-items: center; gap: 8px; padding: 10px 0 12px; }
@media (max-width: 639px) {
  .tq-menufilter__pills { display: none; }
  .tq-menufilter__picker { display: flex; justify-content: center; }
  .tq-menufilter__cats { padding-bottom: 4px; }
}
@media (prefers-reduced-transparency: reduce) {
  .tq-menufilter { background: var(--tmt-cream-deep); backdrop-filter: none; }
}

/* The food-safety notice that closes the menu. Set small and quiet — it is
   required information, not something to shout, and it reads better as one
   block of sentence case than as the all-caps it usually arrives in. */
.tq-menupage__notice {
  max-width: 84ch; margin: clamp(26px, 3.2vw, 40px) auto 0;
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid rgba(0,0,0,0.12);
  font-family: var(--font-inria); font-size: 12px; line-height: 1.6;
  color: var(--tmt-stone); text-align: center; text-wrap: pretty;
}
.tq-menupage__notice strong { color: var(--tmt-charcoal); }
.tq-menupage__key { display: none; }

/* Chile red at 15–17px on white measures 3.9:1 — under the 4.5 floor for text
   this size. The dish names take --tmt-red-ink (8.2:1), which is the token that
   exists for exactly this: red text at body sizes. */
.tq-mcard__name { color: var(--tmt-red-ink); }
.tq-mgroup__title { color: var(--tmt-red); }  /* large heading — 3.54:1, passes at 3:1 */
.tq-bar__name { color: var(--tmt-red-ink); }
.tq-adds__name, .tq-adds__price { color: var(--tmt-ink); }
.tq-menufilter__chips button { border-color: var(--tmt-red-ink) !important; color: var(--tmt-red-ink) !important; }
.tq-menufilter__chips button[aria-pressed="true"] { background: var(--tmt-red-ink) !important; color: var(--tmt-white) !important; }
.tq-menufilter__pills button[aria-pressed="true"] { color: var(--tmt-red-ink) !important; }
.tq-menufilter__pills button[aria-pressed="true"]::after { background: var(--tmt-red-ink); }

/* ---- menu card hierarchy, per Section 7 of the brief -------------------- */
/* The price was the same weight as everything else and got lost. It is the
   largest thing on the card now and sits on its own line.
   NOT in the brief's gold (#D9A02E): that measures 2.9:1 on white, which fails
   even the 3:1 large-text floor. Carbón carries it at 15.9:1 and the colour
   accent stays on the dish name, where red-ink clears 8.2:1. */
.tq-mcard { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tq-mcard:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.tq-mcard__name { font-size: 18px; }
.tq-mcard__desc { font-size: 14px; line-height: 1.4; color: var(--tmt-charcoal); }
.tq-mcard__price {
  font-size: 20px; color: var(--tmt-ink);
  padding-top: 10px;
}

/* ---- category tabs: dropdown below 768px, per Section 8 ---------------- */
/* Was 640px. The brief's breakpoint is the better one — fifteen tabs wrap to
   three rows well before 640. */
@media (max-width: 767px) {
  .tq-menufilter__pills { display: none; }
  .tq-menufilter__picker { display: flex; justify-content: center; }
}
@media (min-width: 768px) {
  .tq-menufilter__pills { display: flex; }
  .tq-menufilter__picker { display: none; }
}
/* Inactive tabs get the gold underline on hover the brief asks for. */
.tq-menufilter__pills button:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--tmt-yellow-deep); border-radius: 2px 2px 0 0;
}

/* ===========================================================================
   CATEGORY FILTER — the Mojitos scrolling pill bar, 2026-09-09 (Santi)
   ---------------------------------------------------------------------------
   Replaces the underlined tab row. Fifteen categories fit no screen, and
   wrapped they made the bar taller than the first dish on the page; here the
   row scrolls and an arrow at each end pages it.

   The pills keep their inline paint from design-menu.js, so the active state is
   driven off the `aria-pressed` that script also sets — see the !important note
   in the earlier filter block for why.
   ======================================================================== */
.tq-menufilter__cats {
  display: flex; align-items: center; gap: 8px;
  padding: 10px clamp(10px, 1.4vw, 16px);
  background: var(--tmt-cream);
  border-radius: 14px;
}
.tq-menufilter__scroll {
  flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.tq-menufilter__scroll::-webkit-scrollbar { display: none; }

.tq-menufilter__pills {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 8px; list-style: none; margin: 0; padding: 0;
  border-bottom: 0; width: max-content;
}
/* Pills again, not tabs — and the ::after underline from the tab pass has to be
   switched off or it draws a bar under every one of them. */
.tq-menufilter__pills button {
  white-space: nowrap; cursor: pointer; position: relative;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, var(--tmt-teal) 14%, transparent) !important;
  color: var(--tmt-teal-ink) !important;
  box-shadow: none !important;
  font-family: var(--font-inria) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 160ms var(--tq-ease), color 160ms var(--tq-ease);
}
.tq-menufilter__pills button::after,
.tq-menufilter__pills button:hover::after { content: none !important; }
.tq-menufilter__pills button:hover {
  background: color-mix(in oklab, var(--tmt-teal) 26%, transparent) !important;
}
.tq-menufilter__pills button[aria-pressed="true"] {
  background: var(--tmt-teal-ink) !important;
  color: var(--tmt-white) !important;
}

/* The paging arrows. Disabled at the ends rather than hidden, so the control
   keeps its shape and the row does not jump width as it scrolls. */
.tq-catnav {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--tmt-teal-ink); color: var(--tmt-white);
  cursor: pointer;
  transition: background 160ms var(--tq-ease), opacity 160ms var(--tq-ease);
}
.tq-catnav:hover { background: var(--tmt-red-ink); }
.tq-catnav[disabled] {
  background: color-mix(in oklab, var(--tmt-teal) 22%, transparent);
  color: var(--tmt-teal-ink); cursor: default; opacity: 0.7;
}
@media (max-width: 767px) {
  .tq-menufilter__cats { display: block; padding: 10px; }
  .tq-catnav, .tq-menufilter__scroll { display: none; }
  .tq-menufilter__picker { display: flex; justify-content: center; }
}

/* Arrows only exist while the row actually overflows. */
.tq-menufilter__cats .tq-catnav { display: none; }
.tq-menufilter__cats.is-scrollable .tq-catnav { display: grid; }
/* With no arrows the pills centre instead of hugging the left edge. */
.tq-menufilter__cats:not(.is-scrollable) .tq-menufilter__pills { margin: 0 auto; }

/* The scroller never scrolled because its PARENT never clipped it.
   `.tq-menufilter__cats` is a grid item, and a grid item's default
   `min-width: auto` lets it grow to its content rather than to its track — so
   the bar sized itself to all fifteen pills (1718px) and `overflow-x: auto`
   had nothing left to hide. Both the grid item and the flex child need an
   explicit `min-width: 0` before any of it can work. */
.tq-menufilter__cats { min-width: 0; }
.tq-menufilter__scroll { min-width: 0; }
.tq-menufilter__pills { flex-wrap: nowrap !important; }

/* ===========================================================================
   MENU + DRINKS — the white talavera ground, 2026-09-10 (Santi)
   ---------------------------------------------------------------------------
   The same tile the socials band took on the same day: the yellow talavera
   drained to white (assets/taq/fondo_talavera_white.webp). Flat cream-deep was
   fine and said nothing; the tile gives both menu pages the texture the
   homepage bands have, without touching a single colour decision — it is
   MULTIPLIED into the existing ground, so the base stays cream-deep exactly as
   it was and the motif is that same cream one step warmer. Nothing that was
   measured for contrast against this ground has moved.

   The cards are opaque white, so the pattern reads only in the gutters between
   them, which is where it should be doing its work anyway.
   ======================================================================== */
.tq-menupage {
  background: url('taq/fondo_talavera_white.webp') 0 0 / clamp(140px, 15vw, 210px) auto repeat,
              var(--tmt-cream-deep);
  background-blend-mode: multiply, normal;
}
/* The page head sits directly on the ground with no card under it, and so does
   the footnote at the bottom — both get a wash so the pattern goes quiet
   behind running text rather than competing with it. */
.tq-menupage::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(240,238,236,0.88) 0%, rgba(240,238,236,0.22) 18%,
              rgba(240,238,236,0.22) 82%, rgba(240,238,236,0.88) 100%);
}
/* The section had no positioning context of its own, so the wash above would
   have escaped to the nearest positioned ancestor. Everything inside is lifted
   over it. */
.tq-menupage { position: relative; isolation: isolate; }
.tq-menupage > * { position: relative; z-index: 1; }

@media (prefers-reduced-transparency: reduce) {
  .tq-menupage { background: var(--tmt-cream-deep); background-blend-mode: normal; }
  .tq-menupage::before { display: none; }
}