/*
  Reusable components, BEM-style:
    .block             the component           (.button)
    .block__element    a part inside it        (.site-header__nav)
    .block--modifier   a variant               (.button--primary)
  Uses semantic and typography tokens only — never primitives, never raw values.
*/

/* ---------- Visually hidden (for screen-reader-only text) ---------- */
.visually-hidden {
  position: absolute;
  width: var(--size-hairline);
  height: var(--size-hairline);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-md);
  z-index: 100;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-background-primary);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Button ---------- */
/*
  Figma component "Button" (node 57:297).
  Type (pick one):  .button--primary   .button--secondary   .button--secondary-light (on dark backgrounds)
  Size:             medium by default, add .button--large
  States:           :hover, :focus-visible, and disabled via the `disabled` attribute
                    (or aria-disabled="true" on a link).
*/
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--size-touch-target);
  padding: var(--button-padding-block-medium) var(--button-padding-inline-medium);
  border: var(--border-width) solid transparent;
  border-radius: var(--button-radius);
  background-color: transparent;
  font-family: var(--button-m-font-family);
  font-weight: var(--button-m-font-weight);
  font-size: var(--button-m-font-size);
  line-height: var(--button-m-line-height);
  letter-spacing: var(--button-m-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button--large {
  padding: var(--button-padding-block-large) var(--button-padding-inline-large);
  font-family: var(--button-l-font-family);
  font-weight: var(--button-l-font-weight);
  font-size: var(--button-l-font-size);
  line-height: var(--button-l-line-height);
  letter-spacing: var(--button-l-letter-spacing);
}

/* Primary */
.button--primary {
  background-color: var(--color-button-fill-primary);
  border-color: var(--color-button-border-primary);
  color: var(--color-button-text-primary);
}

.button--primary:hover {
  background-color: var(--color-button-fill-primary-hover);
  border-color: var(--color-button-border-primary-hover);
  color: var(--color-button-text-primary-hover);
}

/* Secondary — outline that fills on hover */
.button--secondary {
  border-color: var(--color-button-border-secondary);
  color: var(--color-button-text-secondary-alt);
}

.button--secondary:hover {
  background-color: var(--color-button-fill-secondary-hover);
  border-color: var(--color-button-border-secondary-hover);
  color: var(--color-button-text-secondary);
}

/* Secondary light — for dark backgrounds */
.button--secondary-light {
  border-color: var(--color-button-border-secondary-light);
  color: var(--color-button-text-secondary-light);
}

.button--secondary-light:hover {
  background-color: var(--color-button-fill-secondary-light-hover);
  border-color: var(--color-button-border-secondary-light-hover);
  color: var(--color-button-text-secondary-light-hover);
}

.button--secondary-light:focus-visible {
  outline-color: var(--color-focus-ring-light);
}

/* Disabled — listed after :hover so hovering a disabled button changes nothing */
.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
}

.button--primary:disabled,
.button--primary[aria-disabled="true"] {
  background-color: var(--color-button-fill-primary-disabled);
  border-color: var(--color-button-border-primary-disabled);
  color: var(--color-button-text-primary-disabled);
}

.button--secondary:disabled,
.button--secondary[aria-disabled="true"],
.button--secondary-light:disabled,
.button--secondary-light[aria-disabled="true"] {
  background-color: transparent;
  border-color: var(--color-button-border-secondary-disabled);
  color: var(--color-button-text-secondary-disabled);
}

/* ---------- Site header / navigation bar ---------- */
/*
  Figma component "Navbar" (node 58:1198).
  Variants:  tablet/mobile (closed / open)  and  desktop.
  The layout switches on the header's own width (container query), not the window,
  so it also works inside the style guide's preview boxes.
  Below 64rem (1024px): logo + menu icon; the menu drops down with a short slide.
  64rem and up: logo, inline links, Order Now button.
  Open/close is handled in js/main.js by toggling .site-header__nav--open.
*/
.site-header {
  position: relative;
  z-index: 10;
  container-type: inline-size;
  background-color: var(--color-background-brand);
  color: var(--color-text-primary-light);
}

/* The default focus ring is green and would vanish on the green bar */
.site-header :focus-visible {
  outline-color: var(--color-focus-ring-light);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--navbar-padding-block-mobile) var(--navbar-padding-inline-mobile);
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
}

.site-header__logo-img {
  width: auto;
  height: var(--navbar-logo-height-mobile);
}

/* 40px icon in a 44px tap target; negative margin keeps the bar at Figma's height */
.site-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-touch-target);
  height: var(--size-touch-target);
  margin: calc((var(--navbar-toggle-icon-size) - var(--size-touch-target)) / 2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}

.site-header__toggle-icon {
  width: var(--navbar-toggle-icon-size);
  height: var(--navbar-toggle-icon-size);
}

/* Dropdown: animates its height from 0 to its content (grid row 0fr → 1fr) */
.site-header__nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  background-color: var(--color-background-brand);
  transition:
    grid-template-rows var(--motion-duration-menu) var(--motion-easing-menu),
    visibility 0s linear var(--motion-duration-menu);
}

.site-header__nav--open {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--motion-duration-menu) var(--motion-easing-menu),
    visibility 0s;
}

.site-header__panel {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--motion-duration-menu) var(--motion-easing-menu);
}

.site-header__nav--open .site-header__panel {
  opacity: 1;
}

.site-header__menu {
  display: flex;
  flex-direction: column;
  gap: var(--navbar-menu-gap);
  padding: var(--navbar-menu-padding);
}

.site-header__list {
  display: flex;
  flex-direction: column;
  gap: var(--navbar-menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Mobile menu item: full-width outlined box, "button large" text */
.site-header__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--navbar-menu-item-height);
  border: var(--border-width) solid var(--color-button-border-secondary-light);
  font-family: var(--button-l-font-family);
  font-weight: var(--button-l-font-weight);
  font-size: var(--button-l-font-size);
  line-height: var(--button-l-line-height);
  letter-spacing: var(--button-l-letter-spacing);
  color: var(--color-button-text-secondary-light);
  text-decoration: none;
}

.site-header__link:hover {
  background-color: var(--color-button-fill-secondary-light-hover);
  color: var(--color-button-text-secondary-light-hover);
}

/* Order Now: a .button--primary that fills the menu width on mobile */
.site-header__cta {
  display: flex;
  width: 100%;
  height: var(--navbar-menu-item-height);
  border-radius: 0;
}

@container (min-width: 64rem) {
  .site-header__inner {
    max-width: calc(var(--size-content-max) + 2 * var(--space-xl));
    padding: var(--navbar-padding-block) var(--space-xl);
  }

  .site-header__logo-img {
    height: var(--navbar-logo-height);
  }

  .site-header__toggle {
    display: none;
  }

  .site-header__nav {
    position: static;
    display: flex;
    flex: 1;
    visibility: visible;
    background: none;
    transition: none;
  }

  .site-header__panel {
    display: flex;
    flex: 1;
    overflow: visible;
    opacity: 1;
    transition: none;
  }

  .site-header__menu {
    flex: 1;
    flex-direction: row;
    align-items: center;
    padding: 0;
  }

  /* Links sit in the space between logo and button, like Figma's "space between" */
  .site-header__list {
    flex-direction: row;
    gap: var(--navbar-link-gap);
    margin-inline: auto;
  }

  .site-header__link {
    display: inline;
    height: auto;
    border: 0;
    font-family: var(--nav-menu-font-family);
    font-weight: var(--nav-menu-font-weight);
    font-size: var(--nav-menu-font-size);
    line-height: var(--nav-menu-line-height);
    letter-spacing: var(--nav-menu-letter-spacing);
    color: var(--color-text-primary-light);
    white-space: nowrap;
  }

  /* Current page is underlined on desktop only; mobile items have no current-page style */
  .site-header__link:hover,
  .site-header__link[aria-current="page"] {
    background: none;
    color: var(--color-text-primary-light);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .site-header__cta {
    display: inline-flex;
    width: auto;
    height: auto;
    border-radius: var(--button-radius);
  }
}

/* ---------- Site footer ---------- */
/*
  Figma component "Footer" (node 58:1308).
  Variants:  tablet/mobile (one column)  and  desktop (four columns, 64rem / 1024px and wider).
  Like the header, it switches on its own width (container query).
  HTML order is the desktop order (brand, Explore, Connect, Order Now);
  on mobile, Order Now moves up under the brand, as in Figma.
*/
.site-footer {
  container-type: inline-size;
  background-color: var(--color-background-brand);
  color: var(--color-text-primary-light);
}

/* The default focus ring is green and would vanish on the green footer */
.site-footer :focus-visible {
  outline-color: var(--color-focus-ring-light);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--footer-section-gap-mobile);
  padding: var(--footer-padding-block-mobile) var(--footer-padding-inline-mobile);
}

.site-footer__brand {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-brand-gap-mobile);
}

.site-footer__logo {
  display: block;
}

.site-footer__logo-img {
  width: auto;
  height: var(--footer-logo-height-mobile);
}

.site-footer__text {
  display: flex;
  flex-direction: column;
  gap: var(--footer-text-gap);
}

.site-footer__tagline {
  font-family: var(--body-xl-font-family);
  font-weight: var(--body-xl-font-weight);
  font-size: var(--body-xl-font-size);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  color: var(--color-text-secondary-light);
}

.site-footer__copyright {
  margin-top: 0; /* spacing comes from the wrapper's gap */
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
  color: var(--color-text-accent);
}

.site-footer__copyright small {
  font-size: inherit;
}

/* Order Now: a .button--primary.button--large, full width on mobile */
.site-footer__cta {
  order: 2;
  width: 100%;
}

.site-footer__nav {
  order: 3;
}

.site-footer__social {
  order: 4;
}

/* Column label ("Explore", "Connect with us") */
.site-footer__heading {
  margin-bottom: var(--footer-list-gap);
  font-family: var(--accent-font-family);
  font-weight: var(--accent-font-weight);
  font-size: var(--accent-font-size);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  color: var(--color-text-accent);
  text-transform: uppercase;
  white-space: nowrap; /* one line, as in Figma */
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--footer-list-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__link {
  display: block;
  width: fit-content;
  font-family: var(--footer-menu-font-family);
  font-weight: var(--footer-menu-font-weight);
  font-size: var(--footer-menu-font-size);
  line-height: var(--footer-menu-line-height);
  letter-spacing: var(--footer-menu-letter-spacing);
  color: var(--color-text-primary-light);
  text-decoration: none;
}

.site-footer__link:hover {
  color: var(--color-text-primary-light);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@container (min-width: 64rem) {
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--footer-section-gap);
    max-width: calc(var(--footer-content-max) + 2 * var(--footer-padding));
    margin-inline: auto;
    padding: var(--footer-padding);
  }

  .site-footer__brand,
  .site-footer__cta,
  .site-footer__nav,
  .site-footer__social {
    order: 0;
  }

  /* 400px in Figma; may shrink so the columns still fit at 1024px */
  .site-footer__brand {
    flex: 0 1 var(--footer-brand-width);
    min-width: 0;
    gap: var(--footer-brand-gap);
  }

  .site-footer__logo-img {
    height: var(--footer-logo-height);
  }

  .site-footer__cta {
    width: auto;
  }
}

/* ---------- Providers badge ---------- */
/*
  Social links: round Facebook / Instagram buttons (Figma "footer-social-links").
  Used in the footer and the Menu page "find us" panel.
  .social-links--tight   12px between buttons instead of 24px.
*/
.social-links {
  display: flex;
  align-items: center;
  gap: var(--social-links-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-links--tight {
  gap: var(--social-links-gap-tight);
}

.social-links__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--social-links-size);
  height: var(--social-links-size);
  border-radius: var(--radius-pill);
  background-color: var(--color-background-light);
}

.social-links__link:hover {
  background-color: var(--color-background-brand-alt-light);
}

.social-links__icon {
  width: auto;
  height: var(--social-links-icon-size);
}

/*
  Figma component "Providers Badge" (node 57:240). Static: not a link, not interactive.
  Types:   .providers-badge             compact, black (default)
           .providers-badge--full       full width, brand green, larger logos, uppercase label
  Layout:  stacked (logos above text) below 64rem (1024px); side by side from 64rem.
           .providers-badge--stacked    keeps it stacked at every width.
           .providers-badge--inline     keeps it side by side at every width.
           .providers-badge--logos-only  just the logo tiles (64px), no box or text.
  Logos:   .providers-badge__logo--grab / --foodpanda / --shopeefood / --5neo
  Logos are decorative (alt=""): the text already names the providers.
*/
.providers-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--providers-badge-gap);
  padding: var(--providers-badge-padding);
  border-radius: var(--providers-badge-radius);
  /* Inside border, like Figma: drawn without adding to the size */
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border-primary-subtle);
  background-color: var(--color-background-black);
  --providers-badge-tile: var(--providers-badge-logo-size);
}

.providers-badge--full {
  display: flex;
  width: 100%;
  box-shadow: none;
  background-color: var(--color-background-brand);
  --providers-badge-tile: var(--providers-badge-logo-size-large);
}

.providers-badge--logos-only {
  padding: 0;
  box-shadow: none;
  background-color: transparent;
  --providers-badge-tile: var(--providers-badge-logo-size-xl);
}

.providers-badge__logos {
  display: flex;
  align-items: center;
  gap: var(--providers-badge-logo-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.providers-badge__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--providers-badge-tile);
  height: var(--providers-badge-tile);
  overflow: hidden;
  border-radius: var(--providers-badge-logo-radius);
}

.providers-badge__logo-img {
  height: auto;
}

/* Logo widths are proportions of the tile, measured from Figma */
.providers-badge__logo--grab {
  background-color: var(--color-background-grab);
}

.providers-badge__logo--grab .providers-badge__logo-img {
  width: 77.5%;
}

.providers-badge__logo--foodpanda {
  background-color: var(--color-background-foodpanda);
}

.providers-badge__logo--foodpanda .providers-badge__logo-img {
  width: 83.33%;
}

/* In Figma the Foodpanda logo stays 40px wide on the 64px tile */
.providers-badge--logos-only .providers-badge__logo--foodpanda .providers-badge__logo-img {
  width: 62.5%;
}

.providers-badge__logo--shopeefood {
  background-color: var(--color-background-shopeefood);
}

.providers-badge__logo--shopeefood .providers-badge__logo-img {
  width: calc(100% - 2 * var(--providers-badge-logo-inset));
}

.providers-badge__logo--5neo {
  border-radius: var(--providers-badge-venue-radius);
  background-color: var(--color-background-primary);
}

.providers-badge__logo--5neo .providers-badge__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.providers-badge__text {
  display: flex;
  flex-direction: column;
  gap: var(--providers-badge-text-gap);
}

.providers-badge--full .providers-badge__text {
  gap: var(--providers-badge-text-gap-large);
}

.providers-badge__label {
  font-family: var(--accent-font-family);
  font-weight: var(--accent-font-weight);
  font-size: var(--accent-font-size);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  color: var(--color-text-primary-faded);
}

.providers-badge--full .providers-badge__label {
  text-transform: uppercase;
}

.providers-badge__names {
  margin: 0; /* cancel the default space between paragraphs; the gap above sets it */
  font-family: var(--body-l-font-family);
  font-weight: var(--body-l-font-weight);
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  color: var(--color-text-primary-light);
  white-space: nowrap;
}

/* Stays side by side at every width (e.g. the single-logo 5NEO badge on mobile) */
.providers-badge--inline {
  flex-direction: row;
  align-items: center;
  padding: var(--providers-badge-padding-compact) var(--providers-badge-padding) var(--providers-badge-padding-compact) var(--providers-badge-padding-compact);
}

@media (min-width: 64rem) {
  .providers-badge:not(.providers-badge--stacked) {
    flex-direction: row;
    align-items: center;
  }

  .providers-badge:not(.providers-badge--stacked, .providers-badge--full) {
    padding: var(--providers-badge-padding-compact) var(--providers-badge-padding) var(--providers-badge-padding-compact) var(--providers-badge-padding-compact);
  }
}

/* ---------- Testimonial card ---------- */
/*
  Figma component "testimonial-card" (node 58:899). One variant, static (no hover or focus).
  Width comes from its parent (413px on desktop, 340–350px on mobile in the designs);
  text switches to the Mobile sizes through the typography tokens.
  Stars are decorative; the "5/5" text carries the rating for screen readers.
*/
.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--testimonial-card-gap);
  margin: 0;
  padding: var(--testimonial-card-padding);
  border-radius: var(--testimonial-card-radius);
  background-color: var(--color-background-primary);
  box-shadow: var(--testimonial-card-shadow);
}

.testimonial-card__rating {
  display: flex;
  align-items: center;
  gap: var(--testimonial-card-rating-gap);
}

.testimonial-card__stars {
  display: flex;
  gap: var(--testimonial-card-star-gap);
}

.testimonial-card__star {
  width: var(--testimonial-card-star-size);
  height: var(--testimonial-card-star-size);
}

.testimonial-card__score {
  font-family: var(--accent-font-family);
  font-weight: var(--accent-font-weight);
  font-size: var(--accent-font-size);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  color: var(--color-text-secondary-alt);
}

.testimonial-card__quote {
  display: flex;
  flex-direction: column;
  gap: var(--testimonial-card-quote-gap);
  margin: 0;
}

/* Highlighted line, "h6" text style */
.testimonial-card__featured {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  color: var(--color-text-primary-alt);
}

/* Full review, "body large" text style */
.testimonial-card__full {
  margin: 0; /* cancel the default space between paragraphs; the gap above sets it */
  font-family: var(--body-l-font-family);
  font-weight: var(--body-l-font-weight);
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  color: var(--color-text-secondary-alt);
}

/* ---------- Dish card ---------- */
/*
  Figma component "Dish Card" (node 58:1055). Static (no hover or focus).
  Stack:  vertical by default (photo on top, 320px tall)
          .dish-card--horizontal   photo left, text right, each half the width
                                   (from 768px; stacks like vertical on phones)
  Width comes from its parent (387px vertical / 590px horizontal on desktop,
  340–350px vertical on mobile in the designs).
  The photo is decorative (alt=""): the dish name sits right next to it.
*/
.dish-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--dish-card-radius);
}

.dish-card__image {
  display: block;
  width: 100%;
  height: var(--dish-card-image-height);
  object-fit: cover;
}

.dish-card__body {
  flex: 1 1 auto; /* fills the card when a row stretches cards to equal height */
  display: flex;
  flex-direction: column;
  gap: var(--dish-card-gap);
  padding: var(--dish-card-padding);
  border-radius: 0 0 var(--dish-card-radius) var(--dish-card-radius);
  /* Inside border, like Figma: drawn without adding to the size */
  box-shadow: inset 0 0 0 var(--border-width) var(--color-border-primary);
  background-color: var(--color-background-primary);
}

/* Dish name, "h6" text style */
.dish-card__name {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  color: var(--color-text-primary);
}

/* Description, "body large" text style (vertical) */
.dish-card__description {
  margin: 0;
  font-family: var(--body-l-font-family);
  font-weight: var(--body-l-font-weight);
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  color: var(--color-text-secondary);
}

/* Horizontal from 48rem (768px); on phones it stacks like the vertical card */
@media (min-width: 48rem) {
  .dish-card--horizontal {
    flex-direction: row;
  }

  /* Photo fills its half and takes its height from the text side */
  .dish-card--horizontal .dish-card__image {
    flex: 0 0 50%;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto; /* ignore the photo's own shape */
    contain: size;      /* so the text side alone sets the height */
  }

  .dish-card--horizontal .dish-card__body {
    flex: 0 0 50%;
    min-width: 0;
    border-radius: 0 var(--dish-card-radius) var(--dish-card-radius) 0;
  }

  /* Horizontal uses "body extra large" for the description */
  .dish-card--horizontal .dish-card__description {
    font-family: var(--body-xl-font-family);
    font-weight: var(--body-xl-font-weight);
    font-size: var(--body-xl-font-size);
    line-height: var(--body-xl-line-height);
    letter-spacing: var(--body-xl-letter-spacing);
  }
}

/* ---------- Plain card ---------- */
/*
  Figma component "card" (node 58:827). One layout; the three Figma variants
  are the same card with different illustration and text. Static (no hover or focus).
  Width and height come from the parent: in a row of cards (a grid) they stretch to
  equal heights, like Figma's fixed 344px desktop cards; on mobile they fit the text.
  The illustration is decorative (alt="").
*/
.plain-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--plain-card-gap);
  padding: var(--plain-card-padding);
  border-radius: var(--plain-card-radius);
  background-color: var(--color-background-primary);
  box-shadow: var(--plain-card-shadow);
}

.plain-card__icon {
  width: auto;
  height: var(--plain-card-icon-height);
}

.plain-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--plain-card-content-gap);
}

/* Title, "h5" text style */
.plain-card__title {
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  color: var(--color-text-primary);
}

/* Text, "body large" text style */
.plain-card__text {
  margin: 0;
  font-family: var(--body-l-font-family);
  font-weight: var(--body-l-font-weight);
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  color: var(--color-text-secondary);
}

/* ---------- Page header ---------- */
/*
  Top of an inner page: illustration beside the page title (h1) and a subtitle,
  on a light-green band. From the Menu page (Figma node 4:938).
  The illustration is decorative (alt="") and hidden on phones, as in Figma.
*/
.page-header {
  padding-block: var(--page-header-padding-block-mobile);
  background-color: var(--color-background-brand-alt-light);
}

.page-header__inner {
  display: flex;
  align-items: center;
  gap: var(--page-header-gap);
}

.page-header__icon {
  display: none;
  flex-shrink: 0;
  width: auto;
  height: var(--page-header-icon-height);
}

.page-header__content {
  display: flex;
  flex-direction: column;
  gap: var(--page-header-text-gap);
  max-width: var(--page-header-content-width);
}

.page-header__subtitle {
  margin: 0;
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  color: var(--color-text-secondary);
}

@media (min-width: 64rem) {
  .page-header {
    padding-block: var(--page-header-padding-block);
  }

  .page-header__icon {
    display: block;
  }
}

/* ---------- Location card ---------- */
/*
  A branch: colored text panel (name, address, "Open in Maps" button) beside a photo.
  From the Branches page (Figma node 58:2146).
  Panel color:  .location-card--accent-alt (magenta)  or  .location-card--brand (green)
  Photo side:   right by default; .location-card--reverse puts it on the left (desktop).
  Phones: text panel on top, 200px photo below. Desktop (64rem+): 50/50, at least 420px tall.
  The photo is decorative (alt=""): the name and address say where it is.
*/
.location-card {
  display: flex;
  flex-direction: column;
}

.location-card__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--location-card-gap-mobile);
  padding: var(--location-card-padding-block-mobile) var(--space-gutter);
}

.location-card--accent-alt .location-card__panel {
  background-color: var(--color-background-accent-alt);
}

.location-card--brand .location-card__panel {
  background-color: var(--color-background-brand);
}

/* The default focus ring is green and would vanish on the colored panels */
.location-card :focus-visible {
  outline-color: var(--color-focus-ring-light);
}

.location-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--location-card-text-gap);
}

/* Branch name, "h3" text style */
.location-card__name {
  margin: 0;
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  color: var(--color-text-primary-light);
}

/* Address, "body extra large" text style */
.location-card__address {
  font-family: var(--body-xl-font-family);
  font-weight: var(--body-xl-font-weight);
  font-size: var(--body-xl-font-size);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
  font-style: normal;
  color: var(--color-text-primary-light-subtle);
}

.location-card__photo {
  display: block;
  width: 100%;
  height: var(--location-card-photo-height-mobile);
  object-fit: cover;
}

@media (min-width: 64rem) {
  .location-card {
    flex-direction: row;
    min-height: var(--location-card-min-height);
  }

  .location-card__panel {
    flex: 0 0 50%;
    min-width: 0;
    gap: var(--location-card-gap);
    padding: var(--location-card-padding);
  }

  .location-card__photo {
    flex: 0 0 50%;
    min-width: 0;
    height: auto;
    aspect-ratio: auto;
    contain: size; /* the text side sets the height */
  }

  .location-card--reverse .location-card__photo {
    order: -1;
  }
}

/* ---------- Section heading ---------- */
/*
  Small light-green label (eyebrow) above a section title, centered.
  From the Home page sections ("Fan favorites" / "Super Healthee Best-sellers").
  Eyebrow: "h6" text style, uppercase. Title: "h2" text style.
  .section-heading--start  left-aligned. The title can also be a plain <h1>/<h2>
                           using the page's heading style (e.g. 404 page).
*/
.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--section-heading-gap);
  text-align: center;
}

/* Left-aligned version (e.g. the 404 page heading) */
.section-heading--start {
  text-align: start;
}

.section-heading__eyebrow {
  font-family: var(--h6-font-family);
  font-weight: var(--h6-font-weight);
  font-size: var(--h6-font-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  color: var(--color-text-accent);
  text-transform: uppercase;
}

.section-heading__title {
  margin: 0;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  color: var(--color-text-heading);
}

/* ---------- Swatch (style guide) ---------- */
/* Set the color with style="--swatch: var(--color-…)" on the .swatch. */
.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
}

.swatch__chip {
  height: var(--space-3xl);
  margin-bottom: var(--space-xs);
  border: var(--border-width) solid var(--color-border-primary);
  border-radius: var(--radius-md);
  /* Dark backing makes see-through colors (e.g. text-primary-faded) visible */
  background: linear-gradient(var(--swatch), var(--swatch)), var(--color-background-brand-dark);
}

.swatch__name {
  font-family: inherit;
  font-weight: var(--paragraph-font-weight);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.swatch__value {
  color: var(--color-text-secondary);
}

/* ---------- Specimen (style guide) ---------- */
.specimen {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-bottom: var(--border-width) solid var(--color-border-primary);
}

.specimen__meta {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  font-family: var(--body-s-font-family);
  font-weight: var(--body-s-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  color: var(--color-text-secondary);
}

.specimen__meta div {
  display: flex;
  gap: var(--space-sm);
}

.specimen__meta dt {
  min-width: var(--space-3xl);
  font-weight: var(--paragraph-font-weight);
  color: var(--color-text-primary);
}

.specimen__meta dd {
  margin: 0;
}

.specimen__meta code {
  font-family: inherit;
}

.specimen__sample {
  color: var(--color-text-heading);
}

@media (min-width: 48rem) {
  .specimen {
    grid-template-columns: minmax(var(--size-swatch-min), 1fr) 2fr;
    align-items: start;
  }
}

/* ---------- Demo (style guide) ---------- */
.demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0; /* long code lines scroll inside the snippet instead of widening the page */
  margin: 0;
}

.demo__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  border: var(--border-width) solid var(--color-border-primary);
  border-radius: var(--radius-md);
  background-color: var(--color-background-primary);
}

/* Full-bleed stage for wide components like the navigation bar */
.demo__stage--flush {
  display: block;
  padding: 0;
  overflow: hidden;
  background-color: var(--color-background-brand-alt-light);
}

/* Left-aligned stage for components that sit in the content flow */
.demo__stage--start {
  justify-content: flex-start;
  padding: var(--space-lg);
  background-color: var(--color-background-brand-alt-light);
}

.demo__stage--start .demo__frame {
  flex: 1;
}

.demo__frame--mobile {
  max-width: var(--size-demo-mobile);
}

.demo__frame--card {
  max-width: var(--size-demo-card);
}

.demo__frame--card-mobile {
  max-width: var(--size-demo-card-mobile);
}

.demo__frame--dish {
  max-width: var(--size-demo-dish);
}

.demo__frame--wide {
  max-width: var(--size-demo-wide);
}

.demo__frame--tall {
  min-height: var(--size-demo-tall);
}

.demo--dark .demo__stage {
  border-color: var(--color-background-brand);
  background-color: var(--color-background-brand);
}

.demo__caption {
  font-family: var(--body-s-font-family);
  font-weight: var(--paragraph-font-weight);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  color: var(--color-text-primary);
}

/* ---------- Code snippet (style guide) ---------- */
.code-snippet {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-background-secondary);
  border: var(--border-width) solid var(--color-border-primary);
}

.code-snippet__code {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow-x: auto;
  padding-block: var(--space-sm);
  font-family: var(--code-font-family);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  color: var(--color-text-primary);
}

.code-snippet__copy {
  flex-shrink: 0;
  min-width: var(--size-touch-target);
  min-height: var(--size-touch-target);
  padding-inline: var(--space-sm);
  border: var(--border-width) solid var(--color-border-primary);
  border-radius: var(--radius-sm);
  background-color: var(--color-background-primary);
  font-family: var(--body-s-font-family);
  font-weight: var(--paragraph-font-weight);
  font-size: var(--body-s-font-size);
  color: var(--color-text-primary);
  cursor: pointer;
}

.code-snippet__copy:hover {
  background-color: var(--color-background-brand-alt-light);
}