.menu-page {
  --menu-paper: var(--secondary-color-light);
  --menu-ink: var(--ink-soft);
  --menu-name: var(--primary-color);
  --menu-heading: #9c5547;
  --menu-note: #8a5f1f;
  --menu-dot: #adb8af;
  --menu-hero-line: var(--quaternary-color);
  --menu-hero-bg: #f7ead6;
  --menu-season-line: var(--primary-color);
  --menu-season-bg: var(--meo-green-soft);
  --menu-offer-line: var(--accent-color);
  --menu-extras-line: var(--secondary-color);
  --menu-extras-bg: #f9f0e4;
  --menu-dark-fill: var(--primary-color);
  --menu-dark-head: #e8b98a;
  --menu-dark-name: var(--secondary-color-light);
  --menu-dark-price: var(--secondary-color);
  --menu-dark-dot: #7f9a86;
  --menu-badge: var(--quaternary-color-text);
  --poster-signature-bg: var(--menu-heading);
  --poster-signature-fg: var(--secondary-color-light);
  --poster-offer-bg: var(--accent-color);
  --poster-offer-fg: var(--ink-soft);
  --poster-new-bg: var(--primary-color);
  --poster-new-fg: var(--secondary-color);
  --poster-rosette: var(--menu-heading);
  --menu-head-font: "Gyst", Georgia, serif;
  --menu-head-weight: 520;
  --menu-pad: clamp(1.125rem, 4vw, 3rem);
  --menu-gap: 0.875rem;
  --menu-max: 72rem;

  display: block;
  background-color: var(--menu-paper);
  color: var(--menu-ink);
  font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
}

.menu-page--mexican {
  --menu-paper: var(--mexican-secondary-light-color);
  --menu-heading: var(--mexican-primary-color);
  --menu-note: var(--mexican-primary-color);
  --menu-dot: #c9c9b4;
  --menu-hero-line: var(--mexican-primary-color);
  --menu-hero-bg: #fbe9df;
  --menu-season-line: #4e7d3a;
  --menu-season-bg: #ecf5dc;
  --menu-offer-line: var(--mexican-primary-color);
  --menu-extras-line: #e8d3b0;
  --menu-extras-bg: #fff8ea;
  --menu-badge: var(--mexican-primary-color);
  --poster-signature-bg: var(--mexican-primary-color);
  --poster-signature-fg: var(--mexican-secondary-light-color);
  --poster-offer-bg: var(--mexican-primary-color);
  --poster-offer-fg: var(--mexican-secondary-light-color);
  --poster-new-bg: #ecf5dc;
  --poster-new-fg: var(--primary-color);
  --poster-rosette: var(--mexican-primary-color);
  --menu-head-font: "League Gothic", "Arial Narrow", sans-serif;
  --menu-head-weight: 400;
}

html:has(.menu-page),
body:has(.menu-page) {
  overflow-x: clip;
}

body:has(.menu-page) {
  background-color: var(--secondary-color-light);
}

body:has(.menu-page--mexican) {
  background-color: var(--mexican-secondary-light-color);
}

.menu-page :where(h1, h2, h3, h4, p) {
  margin: 0;
}

.menu-page abbr[title] {
  text-decoration: none;
}

.menu-hero,
.menu-highlights,
.menu-bar,
.menu-group,
.menu-notes {
  max-inline-size: var(--menu-max);
  margin-inline: auto;
  padding-inline: var(--menu-pad);
}

.menu-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;

  &::after {
    content: "";
    flex-basis: 100%;
    border-block-end: 2px dotted var(--menu-dot);
  }
}

.menu-hero__text {
  display: grid;
  flex: 1 1 24rem;
  gap: 0.75rem;
  min-inline-size: 0;
}

.hl-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--menu-heading);
}

.menu-hero__title {
  font-family: "Gyst", Georgia, serif;
  font-style: italic;
  font-variation-settings: "wght" 400;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--menu-name);
  text-wrap: balance;
}

.menu-page--mexican .menu-hero__title {
  font-family: var(--menu-head-font);
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(3.25rem, 10vw, 6rem);
  color: var(--menu-heading);
}

.menu-hero__meta {
  font-size: 1.0625rem;

  & strong {
    color: var(--menu-name);
  }
}

.menu-hero__downloads {
  font-size: 0.9375rem;
}

.menu-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.menu-page--mexican .btn {
  background-color: var(--mexican-primary-color);
}

.menu-link,
.hl-card__link {
  color: var(--menu-name);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;

  &:hover {
    color: var(--menu-heading);
  }
}

.menu-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--menu-gap);
  padding-block: 1.5rem 0.5rem;
}

.hl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 1.5px solid var(--menu-hero-line);
  border-radius: 0.875rem;
  background-color: var(--menu-hero-bg);
}

.hl-card--offer {
  border-color: var(--menu-offer-line);
  background-color: var(--menu-paper);
}

.hl-card--new {
  border-color: var(--menu-dot);
  background-color: var(--menu-paper);
}

.hl-card__poster {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.375rem;
  aspect-ratio: 16 / 9;
  max-inline-size: 100%;
  padding: 1.25rem;
  background-color: var(--poster-signature-bg);
  color: var(--poster-signature-fg);
  text-align: center;

  &::before {
    content: "";
    position: absolute;
    inset: 0.625rem;
    border: 1.5px solid currentColor;
    border-radius: 0.5rem;
    opacity: 0.4;
  }
}

.hl-card--offer .hl-card__poster {
  background-color: var(--poster-offer-bg);
  color: var(--poster-offer-fg);
}

.hl-card--new .hl-card__poster {
  background-color: var(--poster-new-bg);
  color: var(--poster-new-fg);
}

.hl-card__img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hl-card__big {
  font-family: "Gyst", Georgia, serif;
  font-style: italic;
  font-variation-settings: "wght" 600;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 0.95;
}

.menu-page--mexican .hl-card__big {
  font-family: var(--menu-head-font);
  font-style: normal;
  font-variation-settings: normal;
  text-transform: uppercase;
  font-size: clamp(3rem, 6vw, 4.25rem);
}

.hl-card__rosette {
  display: grid;
  place-items: center;
  inline-size: clamp(4.75rem, 9vw, 6rem);
  aspect-ratio: 1;
  background-color: var(--poster-rosette);
  color: var(--secondary-color-light);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100.0,50.0 L99.7,51.3 L98.8,52.6 L97.4,53.7 L95.6,54.8 L93.6,55.7 L91.6,56.6 L89.8,57.4 L88.3,58.1 L87.2,58.9 L86.7,59.8 L86.7,60.9 L87.2,62.1 L88.2,63.5 L89.3,65.1 L90.7,66.8 L91.9,68.7 L92.9,70.5 L93.5,72.2 L93.7,73.7 L93.3,75.0 L92.4,76.0 L91.0,76.6 L89.2,76.9 L87.1,77.0 L84.9,76.8 L82.8,76.5 L80.8,76.3 L79.1,76.2 L77.8,76.4 L76.9,76.9 L76.4,77.8 L76.2,79.1 L76.3,80.8 L76.5,82.8 L76.8,84.9 L77.0,87.1 L76.9,89.2 L76.6,91.0 L76.0,92.4 L75.0,93.3 L73.7,93.7 L72.2,93.5 L70.5,92.9 L68.7,91.9 L66.8,90.7 L65.1,89.3 L63.5,88.2 L62.1,87.2 L60.9,86.7 L59.8,86.7 L58.9,87.2 L58.1,88.3 L57.4,89.8 L56.6,91.6 L55.7,93.6 L54.8,95.6 L53.7,97.4 L52.6,98.8 L51.3,99.7 L50.0,100.0 L48.7,99.7 L47.4,98.8 L46.3,97.4 L45.2,95.6 L44.3,93.6 L43.4,91.6 L42.6,89.8 L41.9,88.3 L41.1,87.2 L40.2,86.7 L39.1,86.7 L37.9,87.2 L36.5,88.2 L34.9,89.3 L33.2,90.7 L31.3,91.9 L29.5,92.9 L27.8,93.5 L26.3,93.7 L25.0,93.3 L24.0,92.4 L23.4,91.0 L23.1,89.2 L23.0,87.1 L23.2,84.9 L23.5,82.8 L23.7,80.8 L23.8,79.1 L23.6,77.8 L23.1,76.9 L22.2,76.4 L20.9,76.2 L19.2,76.3 L17.2,76.5 L15.1,76.8 L12.9,77.0 L10.8,76.9 L9.0,76.6 L7.6,76.0 L6.7,75.0 L6.3,73.7 L6.5,72.2 L7.1,70.5 L8.1,68.7 L9.3,66.8 L10.7,65.1 L11.8,63.5 L12.8,62.1 L13.3,60.9 L13.3,59.8 L12.8,58.9 L11.7,58.1 L10.2,57.4 L8.4,56.6 L6.4,55.7 L4.4,54.8 L2.6,53.7 L1.2,52.6 L0.3,51.3 L0.0,50.0 L0.3,48.7 L1.2,47.4 L2.6,46.3 L4.4,45.2 L6.4,44.3 L8.4,43.4 L10.2,42.6 L11.7,41.9 L12.8,41.1 L13.3,40.2 L13.3,39.1 L12.8,37.9 L11.8,36.5 L10.7,34.9 L9.3,33.2 L8.1,31.3 L7.1,29.5 L6.5,27.8 L6.3,26.3 L6.7,25.0 L7.6,24.0 L9.0,23.4 L10.8,23.1 L12.9,23.0 L15.1,23.2 L17.2,23.5 L19.2,23.7 L20.9,23.8 L22.2,23.6 L23.1,23.1 L23.6,22.2 L23.8,20.9 L23.7,19.2 L23.5,17.2 L23.2,15.1 L23.0,12.9 L23.1,10.8 L23.4,9.0 L24.0,7.6 L25.0,6.7 L26.3,6.3 L27.8,6.5 L29.5,7.1 L31.3,8.1 L33.2,9.3 L34.9,10.7 L36.5,11.8 L37.9,12.8 L39.1,13.3 L40.2,13.3 L41.1,12.8 L41.9,11.7 L42.6,10.2 L43.4,8.4 L44.3,6.4 L45.2,4.4 L46.3,2.6 L47.4,1.2 L48.7,0.3 L50.0,0.0 L51.3,0.3 L52.6,1.2 L53.7,2.6 L54.8,4.4 L55.7,6.4 L56.6,8.4 L57.4,10.2 L58.1,11.7 L58.9,12.8 L59.8,13.3 L60.9,13.3 L62.1,12.8 L63.5,11.8 L65.1,10.7 L66.8,9.3 L68.7,8.1 L70.5,7.1 L72.2,6.5 L73.7,6.3 L75.0,6.7 L76.0,7.6 L76.6,9.0 L76.9,10.8 L77.0,12.9 L76.8,15.1 L76.5,17.2 L76.3,19.2 L76.2,20.9 L76.4,22.2 L76.9,23.1 L77.8,23.6 L79.1,23.8 L80.8,23.7 L82.8,23.5 L84.9,23.2 L87.1,23.0 L89.2,23.1 L91.0,23.4 L92.4,24.0 L93.3,25.0 L93.7,26.3 L93.5,27.8 L92.9,29.5 L91.9,31.3 L90.7,33.2 L89.3,34.9 L88.2,36.5 L87.2,37.9 L86.7,39.1 L86.7,40.2 L87.2,41.1 L88.3,41.9 L89.8,42.6 L91.6,43.4 L93.6,44.3 L95.6,45.2 L97.4,46.3 L98.8,47.4 L99.7,48.7Z'/></svg>") center / contain no-repeat;
}

.hl-card__small {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hl-card__body {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  flex: 1;
  padding: 0.875rem 1rem 1.125rem;
}

.hl-card__title {
  font-family: var(--menu-head-font);
  font-variation-settings: "wght" var(--menu-head-weight);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--menu-name);
}

.menu-page--mexican .hl-card__title {
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--menu-ink);
}

.hl-card__text {
  font-size: 1rem;
}

.hl-card__price {
  font-variant-numeric: tabular-nums;
}

.hl-card__link {
  margin-block-start: 0.25rem;
  font-size: 0.9375rem;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
  }
}

.menu-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  margin-block-start: 1.25rem;
  padding-block: 0.5rem 0;
  background-color: var(--menu-paper);
  border-block-end: 1px solid var(--menu-dot);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
}

.menu-bar__chips {
  grid-column: 1 / -1;
}

.menu-bar__book {
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;

  .menu-bar[data-stuck="true"] & {
    visibility: visible;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.menu-bar__tabs,
.menu-bar__chips {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-bar__tabs {
  gap: 0.25rem;
}

.menu-bar__tab {
  display: block;
  padding: 0.5rem 0.75rem 0.55rem;
  border-block-end: 3px solid transparent;
  font-family: var(--menu-head-font);
  font-variation-settings: "wght" var(--menu-head-weight);
  font-size: 1.375rem;
  color: var(--menu-ink);

  &[aria-current="true"] {
    border-color: var(--menu-heading);
    color: var(--menu-heading);
  }
}

.menu-page--mexican .menu-bar__tab {
  font-size: 1.875rem;
  text-transform: uppercase;
  padding-block: 0.25rem 0.35rem;
}

.menu-bar__chips {
  gap: 0.5rem;
  overflow-x: auto;
  padding-block: 0.5rem 0.625rem;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }

  & li {
    flex: none;
  }
}

.menu-bar[data-active-group] .menu-bar__chips li {
  display: none;
}

.menu-bar[data-active-group="food"] .menu-bar__chips [data-group="food"],
.menu-bar[data-active-group="drinks"] .menu-bar__chips [data-group="drinks"],
.menu-bar[data-active-group="kids"] .menu-bar__chips [data-group="kids"],
.menu-bar[data-active-group="desserts"] .menu-bar__chips [data-group="desserts"] {
  display: list-item;
}

.menu-bar__chip {
  display: block;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--menu-dot);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--menu-name);
  background-color: var(--menu-paper);

  &[aria-current="true"] {
    background-color: var(--menu-name);
    border-color: var(--menu-name);
    color: var(--menu-paper);
  }
}

.menu-group {
  padding-block: 1.75rem 0.5rem;
  scroll-margin-block-start: 7rem;

  &[hidden] {
    padding-block: 0;
  }
}

.menu-group__title {
  font-family: "Gyst", Georgia, serif;
  font-style: italic;
  font-variation-settings: "wght" 400;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--menu-name);
  margin-block-end: 1rem;
}

.menu-page--mexican .menu-group__title {
  font-family: var(--menu-head-font);
  font-style: normal;
  text-transform: uppercase;
  color: var(--menu-ink);
}

.menu-group--kids .menu-group__title {
  font-family: "Chauncy Pro", "PT Sans", sans-serif;
  font-style: normal;
  font-weight: bold;
}

.menu-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-block-end: 1.25rem;
  font-size: 0.875rem;
}

.menu-filter__label {
  margin-inline-end: 0.25rem;
}

.menu-filter__btn {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--menu-dot);
  border-radius: 999px;
  background-color: var(--menu-paper);
  color: var(--menu-ink);
  font: inherit;
  cursor: pointer;

  &[aria-pressed="true"] {
    background-color: var(--menu-name);
    border-color: var(--menu-name);
    color: var(--menu-paper);
    font-weight: 700;
  }
}

.menu-filter__empty {
  margin-block-end: 1.5rem;
}

.menu-columns {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 3.5rem);
}

.menu-section {
  position: relative;
  break-inside: avoid;
  margin-block-end: 2rem;
  scroll-margin-block-start: 8.5rem;
}

.menu-section__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-block-end: 0.625rem;
}

.menu-section__title {
  font-family: var(--menu-head-font);
  font-variation-settings: "wght" var(--menu-head-weight);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--menu-heading);
}

.menu-page--mexican .menu-section__title {
  font-size: 2.75rem;
  text-transform: uppercase;
}

.menu-section__unit {
  margin-inline-start: auto;
  font-size: 0.875rem;
}

.menu-section__badge {
  align-self: center;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background-color: var(--menu-name);
  color: var(--menu-paper);
  font-size: 0.8125rem;
}

.menu-section__subtitle {
  margin-block: 1.25rem 0.125rem;
  font-family: var(--menu-head-font);
  font-variation-settings: "wght" var(--menu-head-weight);
  font-size: 1.5rem;
  color: var(--menu-heading);
}

.menu-section__intro {
  margin-block: -0.25rem 0.75rem;
  font-size: 0.9375rem;
  font-style: italic;
}

.menu-section__items {
  display: grid;
  gap: 1.125rem;
}

.menu-section--compact .menu-section__items {
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.375rem 1.5rem;
}

.menu-item__row {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
}

.menu-item__name {
  flex: 0 1 auto;
  min-inline-size: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--menu-name);
}

.menu-item__leader {
  flex: 1 1 1.25rem;
  min-inline-size: 1.25rem;
  margin-block-end: 0.3em;
  border-block-end: 2px dotted var(--menu-dot);
}

.menu-item__price {
  flex: none;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.menu-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.menu-tag {
  padding: 0.0625rem 0.375rem;
  border-radius: 0.3rem;
  background-color: var(--menu-season-bg);
  color: var(--menu-name);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.menu-tag--option {
  background-color: transparent;
  border: 1px solid var(--menu-dot);
  font-weight: 400;
}

.menu-item__desc {
  margin-block-start: 0.25rem;
  font-size: 1rem;
  max-inline-size: 62ch;
}

.menu-item__add {
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  color: var(--menu-name);
}

.menu-section--compact .menu-item__name {
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--menu-ink);
}

.new-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  align-self: center;
  background-color: var(--menu-badge);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M100.0,50.0 L99.7,51.3 L98.8,52.6 L97.4,53.7 L95.6,54.8 L93.6,55.7 L91.6,56.6 L89.8,57.4 L88.3,58.1 L87.2,58.9 L86.7,59.8 L86.7,60.9 L87.2,62.1 L88.2,63.5 L89.3,65.1 L90.7,66.8 L91.9,68.7 L92.9,70.5 L93.5,72.2 L93.7,73.7 L93.3,75.0 L92.4,76.0 L91.0,76.6 L89.2,76.9 L87.1,77.0 L84.9,76.8 L82.8,76.5 L80.8,76.3 L79.1,76.2 L77.8,76.4 L76.9,76.9 L76.4,77.8 L76.2,79.1 L76.3,80.8 L76.5,82.8 L76.8,84.9 L77.0,87.1 L76.9,89.2 L76.6,91.0 L76.0,92.4 L75.0,93.3 L73.7,93.7 L72.2,93.5 L70.5,92.9 L68.7,91.9 L66.8,90.7 L65.1,89.3 L63.5,88.2 L62.1,87.2 L60.9,86.7 L59.8,86.7 L58.9,87.2 L58.1,88.3 L57.4,89.8 L56.6,91.6 L55.7,93.6 L54.8,95.6 L53.7,97.4 L52.6,98.8 L51.3,99.7 L50.0,100.0 L48.7,99.7 L47.4,98.8 L46.3,97.4 L45.2,95.6 L44.3,93.6 L43.4,91.6 L42.6,89.8 L41.9,88.3 L41.1,87.2 L40.2,86.7 L39.1,86.7 L37.9,87.2 L36.5,88.2 L34.9,89.3 L33.2,90.7 L31.3,91.9 L29.5,92.9 L27.8,93.5 L26.3,93.7 L25.0,93.3 L24.0,92.4 L23.4,91.0 L23.1,89.2 L23.0,87.1 L23.2,84.9 L23.5,82.8 L23.7,80.8 L23.8,79.1 L23.6,77.8 L23.1,76.9 L22.2,76.4 L20.9,76.2 L19.2,76.3 L17.2,76.5 L15.1,76.8 L12.9,77.0 L10.8,76.9 L9.0,76.6 L7.6,76.0 L6.7,75.0 L6.3,73.7 L6.5,72.2 L7.1,70.5 L8.1,68.7 L9.3,66.8 L10.7,65.1 L11.8,63.5 L12.8,62.1 L13.3,60.9 L13.3,59.8 L12.8,58.9 L11.7,58.1 L10.2,57.4 L8.4,56.6 L6.4,55.7 L4.4,54.8 L2.6,53.7 L1.2,52.6 L0.3,51.3 L0.0,50.0 L0.3,48.7 L1.2,47.4 L2.6,46.3 L4.4,45.2 L6.4,44.3 L8.4,43.4 L10.2,42.6 L11.7,41.9 L12.8,41.1 L13.3,40.2 L13.3,39.1 L12.8,37.9 L11.8,36.5 L10.7,34.9 L9.3,33.2 L8.1,31.3 L7.1,29.5 L6.5,27.8 L6.3,26.3 L6.7,25.0 L7.6,24.0 L9.0,23.4 L10.8,23.1 L12.9,23.0 L15.1,23.2 L17.2,23.5 L19.2,23.7 L20.9,23.8 L22.2,23.6 L23.1,23.1 L23.6,22.2 L23.8,20.9 L23.7,19.2 L23.5,17.2 L23.2,15.1 L23.0,12.9 L23.1,10.8 L23.4,9.0 L24.0,7.6 L25.0,6.7 L26.3,6.3 L27.8,6.5 L29.5,7.1 L31.3,8.1 L33.2,9.3 L34.9,10.7 L36.5,11.8 L37.9,12.8 L39.1,13.3 L40.2,13.3 L41.1,12.8 L41.9,11.7 L42.6,10.2 L43.4,8.4 L44.3,6.4 L45.2,4.4 L46.3,2.6 L47.4,1.2 L48.7,0.3 L50.0,0.0 L51.3,0.3 L52.6,1.2 L53.7,2.6 L54.8,4.4 L55.7,6.4 L56.6,8.4 L57.4,10.2 L58.1,11.7 L58.9,12.8 L59.8,13.3 L60.9,13.3 L62.1,12.8 L63.5,11.8 L65.1,10.7 L66.8,9.3 L68.7,8.1 L70.5,7.1 L72.2,6.5 L73.7,6.3 L75.0,6.7 L76.0,7.6 L76.6,9.0 L76.9,10.8 L77.0,12.9 L76.8,15.1 L76.5,17.2 L76.3,19.2 L76.2,20.9 L76.4,22.2 L76.9,23.1 L77.8,23.6 L79.1,23.8 L80.8,23.7 L82.8,23.5 L84.9,23.2 L87.1,23.0 L89.2,23.1 L91.0,23.4 L92.4,24.0 L93.3,25.0 L93.7,26.3 L93.5,27.8 L92.9,29.5 L91.9,31.3 L90.7,33.2 L89.3,34.9 L88.2,36.5 L87.2,37.9 L86.7,39.1 L86.7,40.2 L87.2,41.1 L88.3,41.9 L89.8,42.6 L91.6,43.4 L93.6,44.3 L95.6,45.2 L97.4,46.3 L98.8,47.4 L99.7,48.7Z'/></svg>") center / contain no-repeat;
}

.menu-item {
  position: relative;
  isolation: isolate;
}

.menu-item--featured {
  & .menu-item__name {
    color: var(--menu-heading);
  }

  &::after {
    content: "";
    position: absolute;
    inset-block: 0.125rem;
    inset-inline-start: -0.75rem;
    inline-size: 3px;
    border-radius: 3px;
    background-color: var(--menu-heading);
  }
}

.menu-item[id] {
  scroll-margin-block-start: 10rem;
}

.menu-item.is-target::before {
  content: "";
  position: absolute;
  inset: -0.5rem -0.75rem;
  z-index: -1;
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--menu-name) 14%, transparent);
  transform-origin: left center;
  animation: menu-target 2.4s ease-out forwards;
}

@keyframes menu-target {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  25% {
    transform: scaleX(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-item.is-target::before {
    animation-name: menu-target-fade;
  }

  @keyframes menu-target-fade {
    0%,
    70% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}

.menu-item__row > .new-badge {
  position: absolute;
  inset-inline-end: calc(100% + 0.375rem);
  inset-block-start: -0.125rem;
}

.new-badge--box {
  position: absolute;
  inset-block-start: -0.875rem;
  inset-inline-start: -0.875rem;
  inline-size: 2rem;
  block-size: 2rem;
  font-size: 0.5625rem;
}

.menu-section--hero,
.menu-section--offer,
.menu-section--season,
.menu-section--season-dark,
.menu-section--cocktails,
.menu-section--extras,
.menu-section--kids {
  --box-pad: 1.125rem;
  --box-border: 1.5px;

  margin-inline: calc(-1 * (var(--box-pad) + var(--box-border)));
  padding: 1rem var(--box-pad) 1.125rem;
  border: 1.5px solid var(--menu-hero-line);
  border-radius: 0.875rem;
  background-color: var(--menu-hero-bg);
}

.menu-section--offer {
  border-color: var(--menu-offer-line);
  background-color: var(--menu-paper);
}

.menu-section--season,
.menu-section--cocktails {
  border-color: var(--menu-season-line);
  background-color: var(--menu-season-bg);
}

.menu-section--extras {
  border-color: var(--menu-extras-line);
  background-color: var(--menu-extras-bg);
}

.menu-section--kids {
  border-style: dashed;
  border-color: var(--menu-dot);
  background-color: var(--menu-paper);
  font-family: "Chauncy Pro", "PT Sans", sans-serif;

  & .menu-section__title,
  & .menu-item__name {
    font-family: "Chauncy Pro", "PT Sans", sans-serif;
    font-weight: bold;
    color: var(--menu-name);
  }

  & .menu-section__title {
    font-size: 2.25rem;
  }
}

.menu-section--season-dark {
  border-color: var(--menu-dark-fill);
  background-color: var(--menu-dark-fill);

  & .menu-section__title {
    color: var(--menu-dark-head);
  }

  & .menu-item__name {
    color: var(--menu-dark-name);
  }

  & .menu-item__price {
    color: var(--menu-dark-price);
  }

  & .menu-item__leader {
    border-color: var(--menu-dark-dot);
  }
}

.menu-section__head:has(> .visually-hidden:only-child) {
  margin-block-end: 0;
}

.menu-bar[data-chips="false"] .menu-bar__chips {
  display: none;
}

.menu-section--offer .menu-section__head {
  justify-content: space-between;
}

.menu-section__offer-price {
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}

.menu-section__note {
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--menu-name);
}

.menu-good-to-know {
  margin-block: 2.5rem 0.5rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid var(--menu-extras-line);
  border-radius: 0.875rem;
  background-color: var(--menu-extras-bg);
  text-align: center;

  & h3 {
    margin-block-end: 0.375rem;
    font-family: var(--menu-head-font);
    font-variation-settings: "wght" var(--menu-head-weight);
    font-size: 1.375rem;
    color: var(--menu-heading);
  }

  & p {
    font-size: 1rem;
  }
}

.menu-group__foot {
  margin-block-start: 2.5rem;
  text-align: center;
  font-family: "Gyst", Georgia, serif;
  font-style: italic;
  font-variation-settings: "wght" 450;
  font-size: 1.25rem;
  color: var(--menu-note);
}

.menu-page--mexican .menu-group__foot {
  font-family: inherit;
  font-style: normal;
  font-size: 1rem;
}

.menu-notes {
  display: grid;
  gap: 0.375rem;
  margin-block-start: 1.5rem;
  padding-block: 1.25rem 2.5rem;
  border-block-start: 1px solid var(--menu-offer-line);
  text-align: center;
  font-size: 0.875rem;

  & .menu-notes__legend {
    font-size: 0.9375rem;
  }

  & .menu-notes__allergens {
    max-inline-size: 70ch;
    margin-inline: auto;
  }
}

.menu-dock {
  display: none;
}

.back-to-top {
  position: fixed;
  inset-block-end: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: max(1.5rem, env(safe-area-inset-right, 0px));
  z-index: 30;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background-color: var(--menu-name);
  color: var(--secondary-color-light);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);

  &:hover,
  &:focus-visible {
    background-color: var(--quinary-color);
    color: var(--primary-color);
  }

  &[hidden] {
    display: none;
  }
}

@media (max-width: 900px) {
  .menu-item__row > .new-badge {
    position: static;
    order: 1;
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }

  .menu-item__leader {
    order: 2;
  }

  .menu-item__price {
    order: 3;
  }
}

@media (max-width: 1024px) {
  .menu-highlights {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 20rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--menu-pad);
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .hl-card {
    scroll-snap-align: start;
  }
}

@media (max-width: 760px) {
  .menu-columns {
    columns: 1;
  }

  .menu-hero__actions .btn,
  .menu-bar__book {
    display: none;
  }

  .menu-dock {
    position: sticky;
    inset-block-end: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.625rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    padding-inline: var(--menu-pad);
    background-color: var(--menu-paper);
    border-block-start: 1px solid var(--menu-dot);

    & .btn {
      flex: none;
    }
  }

  .back-to-top {
    inset-block-end: calc(6rem + env(safe-area-inset-bottom, 0px));
    inset-inline-end: max(1rem, env(safe-area-inset-right, 0px));
  }

  .menu-section--hero,
  .menu-section--offer,
  .menu-section--season,
  .menu-section--season-dark,
  .menu-section--cocktails,
  .menu-section--extras,
  .menu-section--kids {
    --box-pad: var(--menu-pad);
    --box-border: 0px;

    border-inline-width: 0;
    border-radius: 0;
  }

  .new-badge--box {
    inset-inline-start: calc(var(--menu-pad) - 0.875rem);
  }

  .menu-dock__info {
    display: grid;
    gap: 0.125rem;
    min-inline-size: 0;
    font-size: 1rem;
    line-height: 1.25;

    & strong {
      color: var(--menu-name);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.menu-page) {
    scroll-behavior: smooth;
  }
}
