body {
  font-family: var(--font-family);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding-bottom: 80px;
}

.menu-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-sm);
}

.menu-header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  gap: var(--spacing-sm);
}

.menu-header__logo {
  flex-shrink: 0;
}

.menu-header__logo-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(4, 120, 87, 0.15);
}

.menu-header__title {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
}

.menu-header__lang {
  position: relative;
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}
.lang-options {
  display: flex;
  gap: 0.25rem;
}
/* The compact dropdown trigger is desktop-hidden; only shows on small screens */
.lang-trigger {
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem 0.375rem 0.625rem;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.lang-trigger svg { transition: transform 0.2s ease; }
.menu-header__lang.is-open .lang-trigger svg { transform: rotate(180deg); }

/* ── Small screens (<640px): collapse the language buttons into a dropdown ─ */
@media (max-width: 639px) {
  .lang-trigger { display: inline-flex; }
  .lang-options {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 96px;
    padding: 0.375rem;
    background: var(--color-bg-secondary, #fff);
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    z-index: 120;
  }
  .menu-header__lang:not(.is-open) .lang-options { display: none; }
  .lang-options .lang-btn {
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.625rem;
  }
}

.lang-btn {
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}

.lang-btn--active {
  color: var(--color-accent-emerald);
  background: rgba(4, 120, 87, 0.1);
}

.venue-hero {
  position: relative;
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Text colours adapt to the background tone (set via data-hero-text). */
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255, 255, 255, 0.9);
  --hero-chip-bg: rgba(255, 255, 255, 0.16);
  --hero-chip-border: rgba(255, 255, 255, 0.25);
  --hero-chip-dot: rgba(255, 255, 255, 0.7);
  --hero-chip-hover: rgba(255, 255, 255, 0.3);
}
/* Light background → dark text + dark chips for contrast. */
.venue-hero[data-hero-text="dark"] {
  --hero-text: #0f172a;
  --hero-text-soft: rgba(15, 23, 42, 0.78);
  --hero-chip-bg: rgba(15, 23, 42, 0.08);
  --hero-chip-border: rgba(15, 23, 42, 0.16);
  --hero-chip-dot: rgba(15, 23, 42, 0.5);
  --hero-chip-hover: rgba(15, 23, 42, 0.16);
}

.venue-hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.venue-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Image background: a strong dark scrim guarantees white text stays legible
   over any photo — light or dark. Two layers: an overall darkening plus a
   stronger bottom-up gradient where most of the text sits. */
.venue-hero[data-bg-type="image"] .venue-hero__background {
  background-color: #1a1a1a;
}
.venue-hero[data-bg-type="image"] .venue-hero__overlay {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.78) 100%),
    rgba(15, 23, 42, 0.28);
}
/* Force light text + light chips over images regardless of the gradient logic. */
.venue-hero[data-bg-type="image"] {
  --hero-text: #ffffff;
  --hero-text-soft: rgba(255, 255, 255, 0.92);
  --hero-chip-bg: rgba(255, 255, 255, 0.18);
  --hero-chip-border: rgba(255, 255, 255, 0.3);
  --hero-chip-dot: rgba(255, 255, 255, 0.75);
  --hero-chip-hover: rgba(255, 255, 255, 0.32);
}
.venue-hero[data-bg-type="image"] .venue-hero__name {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
/* Gradient background: keep the restaurant's colours visible; add only a soft
   scrim so text stays readable — dark scrim for light text, light scrim for
   dark text. */
.venue-hero[data-bg-type="gradient"][data-hero-text="light"] .venue-hero__overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.28) 100%);
}
.venue-hero[data-bg-type="gradient"][data-hero-text="dark"] .venue-hero__overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.25) 100%);
}

.venue-hero__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.venue-hero__logo {
  flex-shrink: 0;
}

.venue-hero__logo-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--hero-chip-border);
  box-shadow: var(--shadow-xl);
  object-fit: cover;
}

/* Initial-letter placeholder when no logo image is set */
.logo-thumb--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: var(--hero-chip-bg, rgba(255, 255, 255, 0.18));
  color: var(--hero-text, #fff);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.venue-hero__logo-img.logo-thumb--placeholder {
  font-size: 2.5rem;
}
.menu-header__logo-img.logo-thumb--placeholder {
  font-size: 1rem;
  background: rgba(4, 120, 87, 0.1);
  color: var(--color-accent-emerald, #047857);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.venue-hero__content {
  flex: 1;
  text-align: center;
}

.venue-hero__name {
  font-size: 2rem;
  font-weight: 700;
  color: var(--hero-text);
  margin-bottom: var(--spacing-sm);
}
.venue-hero[data-hero-text="light"] .venue-hero__name {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.venue-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.venue-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--hero-text);
  background: var(--hero-chip-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hero-chip-border);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
/* Small leading dot so many tags still read as distinct chips */
.venue-hero__tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--hero-chip-dot);
  flex-shrink: 0;
}

/* Restaurant note (short blurb under the tags) */
.venue-hero__note {
  max-width: 560px;
  margin: 0 auto var(--spacing-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hero-text-soft);
  text-align: center;
}

/* Social links row */
.venue-hero__socials {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: var(--spacing-md);
  padding: 0.4rem;
  background: var(--hero-chip-bg);
  border: 1px solid var(--hero-chip-border);
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.venue-hero__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--hero-text);
  background: transparent;
  border: none;
  border-radius: 50%;
  /* transform is driven by the GSAP magnetic effect; animate only colour/shadow */
  transition: background 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.venue-hero__social svg {
  will-change: transform;
}
.venue-hero__social:hover {
  background: var(--hero-chip-hover);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.venue-hero__social svg {
  width: 19px;
  height: 19px;
}

.venue-hero__info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.venue-hero__info p {
  font-size: 0.9375rem;
  color: var(--hero-text-soft);
  margin: 0;
  line-height: 1.6;
}

.venue-hero__info a {
  color: var(--hero-text);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-base);
}

.venue-hero__info a:hover {
  color: var(--color-accent-amber);
}

.venue-hero__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hero-text);
  text-decoration: none;
  margin-top: 0.5rem;
  transition: all var(--transition-base);
}

.venue-hero__map-link:hover {
  color: var(--color-accent-amber);
}

@media (min-width: 768px) {
  .venue-hero {
    min-height: 320px;
  }

  .venue-hero__container {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .venue-hero__logo-img {
    width: 120px;
    height: 120px;
  }

  .venue-hero__content {
    text-align: left;
  }

  .venue-hero__name {
    font-size: 2.5rem;
  }

  .venue-hero__tags {
    justify-content: flex-start;
  }
}

.category-nav {
  position: sticky;
  top: 72px;
  z-index: 90;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}

.category-nav__container {
  display: flex;
  gap: 0.5rem;
  padding: var(--spacing-sm) var(--spacing-md);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.category-nav__container::-webkit-scrollbar {
  display: none;
}

.category-nav__item {
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: block;
}

.category-nav__item--active {
  color: var(--color-accent-emerald);
  font-weight: 700;
  border-bottom-color: var(--color-accent-emerald);
}

.menu-main {
  min-height: calc(100vh - 200px);
}

.menu-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}
/* Widen the menu area on larger screens so the multi-column grid has room. */
@media (min-width: 1024px) {
  .menu-container { max-width: 1140px; }
}
@media (min-width: 1440px) {
  .menu-container { max-width: 1320px; }
}

.menu-section {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.menu-section__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  text-align: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid rgba(15, 23, 42, 0.06);
}

/* Mobile-first: a single column of compact horizontal cards (image left). */
.menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.menu-card {
  background: var(--color-bg-secondary);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.menu-card:active {
  transform: scale(0.98);
}

.menu-card {
  align-items: stretch;
}
.menu-card__image {
  flex-shrink: 0;
  width: 116px;          /* compact on phones so text gets the room it needs */
  align-self: center;    /* keep a clean square — don't stretch into a tall sliver */
  aspect-ratio: 1 / 1;   /* square food photo reads far better than a 1:2 strip */
  height: auto;
  margin: 0.75rem 0 0.75rem 0.75rem;
  border-radius: var(--radius-md);
  overflow: visible;     /* let the floating plate and its shadow breathe */
}

.menu-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── 3D dish plate ─────────────────────────────────────────────────────────
   The photo sits on a round plate held at a fixed 3D tilt: perspective plus a
   static rotateX/rotateY reads as a solid object on a table. It does NOT
   animate — a menu is for reading prices and names, and plates drifting under
   the text pull the eye off the words. The depth comes from the tilt, the
   shadow and the fixed highlight; motion is reserved for touch, where it
   answers the guest's own action by lifting the plate flat. */
.menu-card__image {
  perspective: 620px;
  perspective-origin: 50% 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-card__disc {
  position: relative;
  /* Must stay a true square or the "plate" renders as an oval and the photo
     can't cover it — the flex parent stretches children by default. */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: center;
  /* Same shape whether the dish has a photo or a stand-in tile — a circle for
     one and a rounded square for the other made the grid look broken. */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;   /* no plate showing behind the tilted photo */
  transform-style: preserve-3d;
  /* Depth only — no inset white ring: under rotation the ring's far side
     widens into a visible white crescent. */
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.22),
    0 3px 8px rgba(15, 23, 42, 0.14);
  /* Flat at rest — the tilt is the hover reward, not the default. */
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

/* A moving specular highlight — the strongest depth cue on the plate. */
.menu-card__disc::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0.20) 47%,
    rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;   /* rides the photo instead of washing it out */
}

/* The photo fills the plate edge to edge. It deliberately does NOT counter-
   rotate: combined with the plate's rotateY the image foreshortens, and no
   amount of oversizing keeps the far edge inside the circular mask — it left
   a white crescent. The plate's own 3D swing carries the effect. */
.menu-card__img,
.menu-card__placeholder {
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Touch/hover brings the plate upright and forward — the guest gets a clean,
   flat look at the food the moment they reach for it. This is the only
   movement on the page, and it answers a deliberate action. */
.menu-card:hover .menu-card__disc,
.menu-card:active .menu-card__disc,
.menu-card:focus-within .menu-card__disc {
  transform: rotateX(14deg) rotateY(-13deg) translateY(0px) scale(1.06);
  box-shadow:
    0 20px 36px rgba(15, 23, 42, 0.28),
    0 4px 10px rgba(15, 23, 42, 0.16);
}

/* Placeholder tiles sit a touch flatter — a flat graphic tilted as hard as a
   photo just looks skewed, since it has no depth of its own to foreshorten. */
.menu-card--no-photo .menu-card__disc {
  transform: rotateX(0deg) rotateY(0deg);
}
.menu-card--no-photo:hover .menu-card__disc,
.menu-card--no-photo:active .menu-card__disc {
  transform: rotateX(10deg) rotateY(-8deg) translateY(0px) scale(1.04);
}

/* Respect a reduced-motion preference: drop even the touch transition. */
@media (prefers-reduced-motion: reduce) {
  .menu-card__disc { transition: none; }
}

/* Photos are optional — a dish without one gets a decorative tinted tile with
   a food glyph instead of an empty box (see placeholderArt() in menu.js). */
.menu-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  border-radius: var(--radius-lg);
  color: rgba(15, 23, 42, 0.42);
}
.menu-card__placeholder svg {
  width: 42%;
  height: 42%;
  max-width: 64px;
  max-height: 64px;
}

.menu-card__content {
  flex: 1;
  min-width: 0;            /* let flex children shrink so text can wrap/ellipsis */
  padding: 0.75rem 0.875rem;
  display: flex;
  flex-direction: column;
}

.menu-card__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;   /* a long dish name can't break the layout */
}

.menu-card__description {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin-bottom: 0.5rem;
  /* Keep descriptions to two tidy lines on the compact mobile card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-card__allergens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  margin: 0.5rem 0 0;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
/* The "Allergens:" label always sits on its own line so the pills below it
   read as a tidy group — important once there are several pills. */
.menu-card__allergens .allergen-label {
  flex: 0 0 100%;
  margin-bottom: 0.15rem;
}

/* "Allergens:" label with a small amber warning triangle */
.allergen-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #b45309;
}
.menu-card__allergens-icon {
  color: #d97706;
  flex-shrink: 0;
}

.allergen-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-full);
}

/* ── Allergen icons ────────────────────────────────────────────────────────
   Allergens show as small round icons instead of text pills; the name appears
   in a bubble on tap (and on hover where there's a pointer). */
.allergen-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #b45309;
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease;
}
.allergen-icon:hover { background: rgba(217, 119, 6, 0.18); }
.allergen-icon:active { transform: scale(0.92); }
.allergen-icon svg {
  /* Bigger glyph inside a bigger chip — these are read at a glance on a
     phone, so legibility beats compactness. */
  width: 24px;
  height: 24px;
  display: block;
}

/* The name bubble — hidden until the icon is tapped (or hovered). */
.allergen-icon__name {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  z-index: 20;
  padding: 0.28rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  background: rgba(15, 23, 42, 0.94);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
/* Little arrow pointing down at the icon. */
.allergen-icon__name::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(15, 23, 42, 0.94);
}
.allergen-icon.is-open .allergen-icon__name {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Hover only where there's a real pointer — never on touch. */
@media (hover: hover) and (pointer: fine) {
  .allergen-icon:hover .allergen-icon__name {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

.menu-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: var(--spacing-sm);
}

.label-chip {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

.label-chip--diet {
  color: var(--color-accent-emerald);
  background: rgba(4, 120, 87, 0.1);
  border: 1px solid rgba(4, 120, 87, 0.2);
}

.menu-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: auto;
  padding-top: 0.7rem;
}

.menu-card__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-accent-emerald);
  white-space: nowrap;   /* keep "8.50 ₼" on one line */
}

.menu-card__add-btn {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-emerald);
  background: rgba(4, 120, 87, 0.08);
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
}

.menu-card__add-btn:hover {
  background: var(--color-accent-emerald);
  color: #ffffff;
}

/* ── Tablet (≥640px): two columns, slightly larger image ─────────────────── */
/* ── Tablet (640–1023px): stay one column, but a roomy horizontal card.
   A single wide card reads far better here than two cramped ones — text and
   allergens get space, and the image can be larger. */
@media (min-width: 640px) {
  .menu-card__image {
    width: 160px;
    margin: 0.875rem 0 0.875rem 0.875rem;
  }
  .menu-card__content {
    padding: 1rem 1.25rem;
  }
  .menu-card__name {
    font-size: 1.125rem;
  }
  .menu-card__description {
    font-size: 0.9375rem;
  }
}

/* ── Desktop (≥1024px): three columns of vertical cards (image on top) ─────
   A vertical layout uses wide screens far better than one narrow column and
   reads as a modern menu grid. */
@media (min-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
  .menu-card {
    flex-direction: column;
    align-items: stretch;
  }
  .menu-card__image {
    /* A round plate needs a square box — and room to float without clipping. */
    width: 74%;
    max-width: 200px;
    aspect-ratio: 1 / 1;
    min-height: 0;
    margin: var(--spacing-md) auto 0;
    border-radius: 0;
    overflow: visible;
  }
  .menu-card__content {
    padding: var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + 0.1rem);
  }
  .menu-card__name {
    font-size: 1.0625rem;
  }
  .menu-card__description {
    font-size: 0.875rem;
    -webkit-line-clamp: 3;   /* vertical cards have room for a third line */
  }
}

/* ── Large desktop (≥1440px): four columns ───────────────────────────────── */
@media (min-width: 1440px) {
  .menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  background: var(--color-bg-secondary);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
  padding: var(--spacing-md);
  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
}

.cart-bar__content--empty {
  text-align: center;
}

.cart-bar__text {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.cart-bar__content--filled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.cart-bar__info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.cart-bar__label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.cart-bar__total {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-emerald);
}

.cart-bar__view-btn {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-accent-emerald);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  cursor: pointer;
}

.cart-bar__view-btn:active {
  transform: scale(0.96);
}

/* Visibility controlled by the HTML `hidden` attribute (set/removed by menu.js) */
.cart-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.cart-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cart-panel__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  /* Initial position set by GSAP (gsap.set y:'100%') — no CSS transform here */
}

.cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-md);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.cart-panel__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cart-panel__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: 50%;
  transition: all var(--transition-base);
  cursor: pointer;
}

.cart-panel__close:hover {
  background: var(--color-bg-primary);
}

.cart-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.cart-items {
  margin-bottom: var(--spacing-lg);
}

.cart-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-primary);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-sm);
}

.cart-item__info {
  flex: 1;
}

.cart-item__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.cart-item__price {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.cart-item__controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart-item__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: var(--color-accent-emerald);
  background: rgba(4, 120, 87, 0.1);
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-base);
}

.cart-item__btn:active {
  transform: scale(0.9);
}

.cart-item__quantity {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cart-notes {
  margin-bottom: var(--spacing-lg);
}

.cart-notes__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.cart-notes__textarea {
  width: 100%;
  padding: var(--spacing-sm);
  font-family: var(--font-family);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: border-color var(--transition-base);
}

.cart-notes__textarea:focus {
  outline: none;
  border-color: var(--color-accent-emerald);
}

.cart-tips {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
}

.cart-tips__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.cart-tips__buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: var(--spacing-md);
}

.tip-btn {
  padding: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  cursor: pointer;
}

.tip-btn.active {
  color: var(--color-accent-amber);
  background: rgba(245, 158, 11, 0.1);
  border-color: var(--color-accent-amber);
}

.cart-tips__custom {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-tips__custom-label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.cart-tips__custom-input {
  padding: 0.625rem;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base);
}

.cart-tips__custom-input:focus {
  outline: none;
  border-color: var(--color-accent-emerald);
}

.cart-summary {
  padding: var(--spacing-md);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.cart-summary__row:last-child {
  margin-bottom: 0;
}

.cart-summary__row--total {
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cart-panel__footer {
  padding: var(--spacing-md);
  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.cart-panel__submit-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-accent-emerald);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  cursor: pointer;
}

.cart-panel__submit-btn:active {
  transform: scale(0.98);
}

/* Visibility controlled by the HTML `hidden` attribute (set/removed by menu.js) */
.waiter-view {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--color-bg-secondary);
  overflow-y: auto;
}

.waiter-view__content {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
}

.waiter-view__back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent-emerald, #047857);
  border: none;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-xl);
  cursor: pointer;
  opacity: 1;
  transition: background var(--transition-base);
}

.waiter-view__back:hover {
  background: #065f46;
}

.waiter-view__header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 2px solid rgba(15, 23, 42, 0.08);
}

.waiter-view__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.waiter-view__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-secondary);
}

.waiter-view__items {
  margin-bottom: var(--spacing-xl);
}

.waiter-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.waiter-item:last-child {
  border-bottom: none;
}

.waiter-item__info {
  flex: 1;
}

.waiter-item__name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
}

.waiter-item__quantity {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.waiter-item__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-accent-emerald);
}

.waiter-view__note {
  padding: var(--spacing-md);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-amber);
  margin-bottom: var(--spacing-xl);
}

.waiter-view__note strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
  font-weight: 600;
}

.waiter-view__note p {
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.waiter-view__summary {
  padding: var(--spacing-lg);
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  border: 2px solid rgba(4, 120, 87, 0.2);
}

.waiter-view__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
  font-size: 1.0625rem;
  color: var(--color-text-secondary);
}

.waiter-view__row:last-child {
  margin-bottom: 0;
}

.waiter-view__row--total {
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-sm);
  border-top: 2px solid rgba(15, 23, 42, 0.08);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ── Venue info prefix label ────────────────────────────────────────────── */
.venue-hero__info-prefix {
  font-weight: 600;
  opacity: 0.85;
  margin-right: 0.25rem;
}

/* ── Cart items empty state ─────────────────────────────────────────────── */
.cart-items__empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  padding: 2rem 0;
}

/* ── Floating +1 add-to-cart particle ───────────────────────────────────── */
.add-float {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent-emerald);
  background: rgba(4, 120, 87, 0.1);
  border: 1px solid rgba(4, 120, 87, 0.25);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.625rem;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

/* ── Scroll-lock utility ────────────────────────────────────────────────── */
html.is-scroll-locked {
  overflow: hidden;
}

@media (min-width: 768px) {
  .menu-container {
    padding: 0 var(--spacing-xl);
  }

  .cart-bar {
    max-width: 720px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* Desktop: center via margin (not transform) so GSAP y-animation isn't affected) */
  .cart-panel__content {
    left: 0;
    right: 0;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Dish detail modal ────────────────────────────────────────── */
.dish-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dish-modal[hidden] { display: none; }
.dish-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.dish-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}
.dish-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(15, 23, 42, 0.45);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.18s ease;
}
.dish-modal__close:hover { background: rgba(15, 23, 42, 0.7); }
.dish-modal__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-bg-secondary, #f1f5f9);
}
.dish-modal__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dish-modal__body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.dish-modal__name {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text, #0f172a);
  margin: 0 0 0.5rem;
}
.dish-modal__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #475569);
  margin: 0 0 0.875rem;
}
.dish-modal__allergens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.dish-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.dish-modal__price {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-accent-emerald, #047857);
}
.dish-modal__add {
  padding: 0.7rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent-emerald, #047857);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}
.dish-modal__add:hover { background: #059669; }
.dish-modal__add:active { transform: scale(0.96); }

/* ── "Designed & developed by AILDCO" credit footer ──────────────── */
.site-credit {
  padding: 2.5rem 1rem 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  /* Clear the fixed cart bar so the credit is never hidden behind it. */
  margin-bottom: 90px;
}
.site-credit__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  max-width: 720px;
  margin: 0 auto;
}
/* "Powered by Qreato" — the product brand */
.site-credit__powered {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-secondary, #475569);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color 0.2s ease;
}
.site-credit__powered:hover { color: var(--color-text-primary, #0f172a); }
.site-credit__powered strong { font-weight: 700; }
.site-credit__powered-label { color: var(--color-text-tertiary, #94a3b8); font-weight: 500; }
.site-credit__qreato-logo { height: 20px; width: 20px; display: block; }

.site-credit__divider {
  width: 1px;
  height: 20px;
  background: rgba(15, 23, 42, 0.12);
}
@media (max-width: 420px) {
  .site-credit__divider { display: none; }   /* stacks on narrow phones */
}

/* "Designed & developed by AILDCO" — the agency */
.site-credit__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-text-tertiary, #94a3b8);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-credit__link:hover { color: var(--color-accent-emerald, #047857); }
.site-credit__text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.site-credit__logo {
  height: 19px;
  width: auto;
  display: block;
  color: currentColor;   /* SVG uses currentColor, inherits link colour */
}

/* ── Call waiter / request bill — floating action button ─────────── */
.call-fab {
  position: fixed;
  right: 1rem;
  /* Sit clear above the cart bar. --cart-bar-h is set by menu.js from the bar's
     real height (it grows when the cart has items); fallback covers first paint. */
  bottom: calc(var(--cart-bar-h, 84px) + 16px + env(safe-area-inset-bottom));
  z-index: 115;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.625rem;
}
.call-fab__toggle {
  display: inline-flex;
  align-items: center;
  /* gap: 0.5rem; */
  padding: 0.75rem 1.125rem;
  font-family: var(--font-family);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent-emerald, #047857);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 20px rgba(4, 120, 87, 0.35);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.call-fab__toggle:hover { background: #059669; box-shadow: 0 8px 26px rgba(4, 120, 87, 0.45); }
.call-fab__toggle:active { transform: scale(0.96); }

/* The HTML `hidden` attribute must win over any component's own `display`.
   Without this, `.call-fab__menu { display: flex }` beat `hidden` and the
   call-waiter panel sat permanently open. */
[hidden] { display: none !important; }

/* The toggle is a round icon-only button at every width — see the collapsed
   FAB rules further down, which reveal the label only while the panel is open. */
.call-fab__toggle {
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
/* When open it widens to fit the revealed label. */
.call-fab.is-open .call-fab__toggle {
  width: auto;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-full);
  background: #065f46;
}
.call-fab { flex-direction: column-reverse; }

@media (max-width: 640px) {
  /* Bigger, clearly-separated options that open upward, above the toggle. */
  .call-fab__menu {
    min-width: 180px;
    padding: 0.5rem;
    gap: 0.25rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
  }
  .call-fab__option {
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
  }
}

.call-fab__menu {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.375rem;
  background: var(--color-bg-secondary, #fff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
.call-fab__option {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.call-fab__option:hover { background: rgba(4, 120, 87, 0.08); color: var(--color-accent-emerald, #047857); }
.call-fab__option svg { color: var(--color-accent-emerald, #047857); flex-shrink: 0; }

/* Confirmation toast */
.call-toast {
  position: fixed;
  left: 50%;
  bottom: calc(160px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 120;
  max-width: 90vw;
  padding: 0.75rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: rgba(15, 23, 42, 0.92);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.call-toast.is-visible { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   Venue footer — the venue details that used to sit in the hero.
   The hero now carries only the logo and name; everything a guest may want
   after reading the menu (hours, address, phone, map, socials) lives here.
   ══════════════════════════════════════════════════════════════════════════ */
.venue-footer {
  margin-top: var(--spacing-2xl, 3rem);
  padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
  background: var(--color-bg-secondary, #fff);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.venue-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 1.5rem);
}

/* Brand row: logo + name + cuisine tags */
.venue-footer__brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.venue-footer__logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md, 10px);
  object-fit: cover;
  display: block;
}
.venue-footer__logo.logo-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-emerald, #047857);
  background: rgba(4, 120, 87, 0.1);
}
.venue-footer__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary, #0f172a);
  line-height: 1.3;
}
.venue-footer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.venue-footer__tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
  background: rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-full, 999px);
  padding: 0.2rem 0.6rem;
}

.venue-footer__note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-secondary, #475569);
  padding: 0.875rem 1rem;
  background: rgba(4, 120, 87, 0.055);
  border: 1px solid rgba(4, 120, 87, 0.14);
  border-radius: var(--radius-lg, 12px);
}
/* A small quote glyph replaces the old left bar — it says "a word from the
   venue" without a hard rule cutting into the text. */
.venue-footer__note::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.2rem;
  background: currentColor;
  color: var(--color-accent-emerald, #047857);
  opacity: 0.55;
  -webkit-mask: var(--quote-mask) center / contain no-repeat;
  mask: var(--quote-mask) center / contain no-repeat;
  --quote-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 5C6 6.4 4 9.3 4 12.8V19h6.6v-6.6H7.4c.2-2 1.3-3.4 3.3-4.3zm10.5 0c-3.5 1.4-5.5 4.3-5.5 7.8V19H21v-6.6h-3.2c.2-2 1.3-3.4 3.3-4.3z'/%3E%3C/svg%3E");
}

/* Info rows: icon + label + value (wifi, address, phone, email, hours) */
.venue-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 700px) {
  .venue-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
}
.venue-info__row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.venue-info__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-emerald, #047857);
  background: rgba(4, 120, 87, 0.09);
  border-radius: var(--radius-md, 10px);
}
.venue-info__icon svg { width: 18px; height: 18px; }

.venue-info__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.venue-info__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary, #94a3b8);
}
.venue-info__value {
  font-size: 0.9375rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--color-text-primary, #0f172a);
  text-decoration: none;
  overflow-wrap: anywhere;
}
a.venue-info__value:hover {
  color: var(--color-accent-emerald, #047857);
  text-decoration: underline;
}
.venue-info__sub {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #475569);
}
.venue-info__code {
  padding: 0.05rem 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary, #0f172a);
  background: rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-sm, 5px);
}

/* Copy button on a footer row — sits at the end, quiet until hovered. */
.venue-info__row { position: relative; }
.venue-info__copy {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary, #94a3b8);
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.venue-info__copy svg { width: 16px; height: 16px; }
.venue-info__copy:hover {
  color: var(--color-accent-emerald, #047857);
  border-color: rgba(4, 120, 87, 0.4);
  background: rgba(4, 120, 87, 0.07);
}
.venue-info__copy:active { transform: scale(0.92); }

/* Swap the glyph for a tick for a moment after a successful copy. */
.venue-info__copy.is-copied {
  color: #fff;
  background: var(--color-accent-emerald, #047857);
  border-color: var(--color-accent-emerald, #047857);
}
.venue-info__copy.is-copied svg { display: none; }
.venue-info__copy.is-copied::after {
  content: '';
  width: 11px;
  height: 6px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* Embedded map of the venue's pin. */
.venue-map {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(15, 23, 42, 0.04);
}
.venue-map__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 700px) {
  .venue-map { height: 260px; }
}

/* "Get directions" call to action */
.venue-footer__directions {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent-emerald, #047857);
  border-radius: var(--radius-full, 999px);
  text-decoration: none;
  transition: background 0.16s ease;
}
.venue-footer__directions:hover { background: #059669; }

/* Currency + allergen disclosure */
/* Practical notices a guest should actually read — the old version was one
   grey line of 12px text that disappeared into the footer. Now each notice is
   its own row with an icon, on a tinted panel. */
.venue-footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0.875rem 1rem;
  background: rgba(15, 23, 42, 0.035);
  border-radius: var(--radius-lg, 12px);
}
.venue-footer__legal-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--color-text-secondary, #475569);
}
.venue-footer__legal-item svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--color-text-tertiary, #94a3b8);
}
/* The allergy line matters more than the currency note — give it weight. */
.venue-footer__legal-item:last-child { color: #b45309; }
.venue-footer__legal-item:last-child svg { color: #d97706; }

@media (min-width: 700px) {
  .venue-footer__legal { flex-direction: row; gap: 1.75rem; flex-wrap: wrap; }
}

/* Socials */
.venue-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: var(--spacing-sm, 0.75rem);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.venue-footer__social {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary, #475569);
  background: rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-full, 999px);
  transition: background 0.16s ease, color 0.16s ease;
}
.venue-footer__social svg { width: 20px; height: 20px; }
.venue-footer__social:hover {
  color: #fff;
  background: var(--color-accent-emerald, #047857);
}

/* The hero is now a compact band — logo + name only. */
.venue-hero__container { padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem); }

/* ── Call FAB: collapsed to an icon until tapped ───────────────────────────
   The panel used to sit expanded with its label taking permanent space. It is
   now a round icon button at every width; the label appears only while open. */
.call-fab__toggle { position: relative; }
.call-fab__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.22s ease, opacity 0.18s ease, margin 0.22s ease;
}
.call-fab.is-open .call-fab__label {
  max-width: 12rem;
  opacity: 1;
}