/* ===================================================================
   The Tee Room Cafe — Menu stylesheet
   Reuses The Golf Lounge's exact palette (same CSS variable names as
   style.css) so this page matches the rest of the site precisely.
   Built for two contexts at once: a Samsung Galaxy Tab A9 sitting on
   a table as a passive/touch menu, and a normal browser visit.
   =================================================================== */

:root {
  --color-bg: #121212;
  --color-card: #1a1a1a;
  --color-darkest: #0a0a0a;
  --color-accent: #d3f357;
  --color-text: #ffffff;
  --color-text-light: #a8a8a8;
  --font-display: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  /* clip, not hidden, where the browser knows it: `hidden` makes the body a
     scroll box of its own that never scrolls, and the sticky title and
     categories (.menu-top) would scroll away with it. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Prevents the double-tap-to-zoom / accidental text selection that
     makes touch kiosks feel janky */
  user-select: none;
  -webkit-user-select: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* ---------- The title and the categories stay at the top ----------
   Mazin, 28 Sep 2026: "On the menu, when someone scrolls down, I want the
   title and the filter buttons to stay static". One sticky block, opaque so
   the menu slides under it, with a shadow once the page has moved. Its
   height never changes as it sticks, so nothing on the page jumps. Under
   the popups (9000), the screensaver (9999), the order bar and the call
   buttons; the call buttons keep below it (--uc-menu-top, service-box.js). */
.menu-top { position: sticky; top: 0; z-index: 60; background: var(--color-bg); transition: box-shadow .2s ease; }
.menu-top.is-stuck { box-shadow: 0 8px 18px rgba(0, 0, 0, .45); }

/* ---------- Header (kept minimal on this page — the menu is the star) ---------- */
.menu-header {
  /* env(safe-area-inset-top) is 0 on Android fullscreen and on desktop, so
     this adds nothing there. On an iPad run from the home screen it keeps
     the title clear of the notch/status bar instead of sliding under it. */
  padding: calc(4px + env(safe-area-inset-top, 0px)) 0 6px;
  text-align: center;
}
.menu-header .cafe-name {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 4vw, 40px); color: var(--color-text); margin: 0;
  letter-spacing: .02em;
  /* Body line-height of 1.5 puts ~10px of invisible leading above the
     caps on a 40px title, which reads as a gap even with no padding. */
  line-height: 1.1;
}
.menu-header .cafe-name .accent { color: var(--accent-ink, var(--color-accent)); }
.menu-header .cafe-sub { color: var(--color-text-light); font-size: 13.5px; margin: 4px 0 0; }
/* ---------- Category tabs ---------- */
.category-tabs {
  /* Wraps onto as many lines as it needs so every category is visible at
     once. Sideways scrolling hid categories off-screen with no hint they
     were there. Pills shrink a little rather than overflow. */
  display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 16px;
  justify-content: center;
}
@media (min-width: 900px) {
  .category-tabs { justify-content: center; }
}
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab {
  flex: 0 1 auto; min-width: 0; background: var(--color-card); border: 1px solid transparent;
  color: var(--color-text-light); font-family: var(--font-display); font-weight: 600;
  font-size: 13.5px; padding: 9px 16px; border-radius: 30px; cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.category-tab.active { background: var(--color-accent); color: var(--color-darkest); }
.category-tab:not(.active):hover { border-color: var(--color-accent); color: var(--color-text); }

/* ---------- Menu grid ---------- */
.menu-section { display: none; padding: 0 24px 60px; }
.all-view-heading {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 18px; color: var(--accent-ink, var(--color-accent)); letter-spacing: .03em;
  max-width: var(--max-width); margin: 22px auto 10px; padding: 0 0 7px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.all-view-heading:first-child { margin-top: 8px; }
.menu-section.active { display: block; }
.menu-grid {
  display: grid;
  /* Fixed 4 columns so the layout is predictable rather than reflowing
      to 2 on mid-size screens; 1fr lets the cards size to the space. */
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  gap: 12px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.item-card {
  background: var(--color-card);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: grid-column .25s ease, transform .2s ease, box-shadow .2s ease;
  border: 1px solid rgba(255,255,255,.06);
}
.item-card:hover { transform: translateY(-3px); border-color: rgba(211,243,87,.35); border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); }

.item-card .thumb-wrap {
  aspect-ratio: 16/10; overflow: hidden; position: relative; background: #0d0d0d;
}
.item-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.item-card:hover .thumb-wrap img { transform: scale(1.04); }

.item-card .card-body { padding: 10px 12px 12px; }
.item-card .item-name { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; margin: 0 0 2px; line-height: 1.25; }
.item-card .item-price { color: var(--accent-ink, var(--color-accent)); font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.item-card .item-teaser { color: var(--color-text-light); font-size: 11.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



/* ---------- Tablet-specific tuning ----------
   Samsung Galaxy Tab A9, used flat on a table in landscape, sits in
   roughly this width range. Larger touch targets, denser default
   grid so it looks well-populated and inviting at rest. */
@media (min-width: 1000px) and (max-width: 1400px) and (pointer: coarse) {
  .menu-grid { grid-template-columns: repeat(4, 1fr); justify-content: center; gap: 12px; }
  .item-card .item-name { font-size: 16px; }
  .category-tab { padding: 11px 20px; font-size: 14.5px; }
}

@media (max-width: 640px) {
  /* Phones keep 2 across — 3 would make the photos too small to read. */
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .category-tabs { padding: 10px 12px 12px; gap: 6px; }
  .category-tab { padding: 8px 13px; font-size: 12.5px; }
      }

/* ---------- Attract mode (kiosk screensaver) ----------
   Full-bleed product photography with the name and price over it. Two
   stacked image layers crossfade so there's never a blank frame between
   slides. Sits above everything and swallows the first touch, so waking
   the tablet can't accidentally open a menu item. */
.attract {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--color-bg);
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.attract.on { opacity: 1; pointer-events: auto; }

.attract-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s ease;
}
.attract-slide.visible { opacity: 1; }

/* Blurred, dimmed copy of the same photo, filling the screen. Gives the
   slide an edge-to-edge backdrop in the product's own colours instead of
   flat black bars, without cropping anything meaningful. */
/* A canvas 32 pixels wide, stretched: the browser's smoothing is the blur,
   and cafe-menu.js darkens it as it draws. No CSS filter - a full-screen
   blur(34px) redrawn every few seconds, all day, is what the menu tablets
   froze on (Mazin, 8 Oct 2026). */
.attract-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; background: #000;
}

/* The photo itself — "contain" so the whole product is always visible,
   whatever shape it is. Inset from the bottom so it sits above the name
   and price rather than behind them. */
.attract-fg {
  position: absolute;
  top: 5vh; left: 6vw; right: 6vw; bottom: 26vh;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* Gradient keeps the text legible over any photo, light or dark. */
.attract::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,.1) 62%);
}
.attract-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 8vw 9vh; z-index: 2; text-align: center;
}
.attract-cat {
  font-family: var(--font-display); font-weight: 600; font-size: 2.1vh;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink, var(--color-accent));
  margin-bottom: 1.4vh;
}
.attract-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 6.4vh; line-height: 1.08; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.attract-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4vh; color: var(--accent-ink, var(--color-accent)); margin-top: 1.6vh;
}
.attract-hint {
  position: absolute; left: 0; right: 0; bottom: 3vh; z-index: 2;
  text-align: center; font-size: 1.8vh; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  animation: attract-pulse 2.6s ease-in-out infinite;
}
@keyframes attract-pulse { 0%,100% { opacity:.35 } 50% { opacity:.8 } }


/* ---------- Item popup ----------
   Sized entirely in viewport units so it always fits the screen without
   scrolling, whatever the device — the image takes the space left after
   the text rather than the other way round. */
body.popup-open { overflow: hidden; }

.item-popup {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw;
  background: rgba(0,0,0,.82);
  opacity: 0; transition: opacity .2s ease;
  cursor: pointer;
}
.item-popup.on { opacity: 1; }

.item-popup-inner {
  display: flex; flex-direction: column;
  width: min(560px, 92vw); max-height: 92vh;
  background: var(--color-card);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px; overflow: hidden;
  transform: scale(.96); transition: transform .2s ease;
}
.item-popup.on .item-popup-inner { transform: scale(1); }

.item-popup-media { flex: 1 1 auto; min-height: 0; background: #0d0d0d; }
.item-popup-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.item-popup-body { flex: 0 0 auto; padding: 16px 20px 18px; }
.item-popup-name {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  line-height: 1.2; margin-bottom: 4px;
}
.item-popup-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--accent-ink, var(--color-accent));
}
.item-popup-desc {
  color: var(--color-text-light); font-size: 13.5px; line-height: 1.5;
  margin: 8px 0 0;
  /* Capped rather than scrolled — a long description must not push the
     popup taller than the screen. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.item-popup-hint {
  margin-top: 12px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.38);
}
/* Option chips inside the popup reuse the menu's own styling. */
.item-popup .option-group { margin-top: 12px; }

/* ---- Wave 3 batch 6: accessibility ----------------------------------------
   Where the focus is, for anyone moving with a keyboard: every control that
   takes it shows a ring in the venue's accent. Fields keep the border they
   already change on focus; the ring is for what has no other sign.
   And less movement for anyone whose device asks for it: nothing slides,
   fades or scrolls by itself. */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible,
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 3px solid var(--color-accent, #d3f357) !important;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- The showcase look (booking_page.look = "showcase") ----------
   RazmAzaan and Roosters, 13 Oct 2026: the menu to look like their new
   websites: the venue's display face set big and bold on a band of its brand
   colour, large food photos (the dishes that have one come first), cards that
   rise in as they scroll into view, categories that stay on screen and
   scroll sideways on a phone, English or Arabic. cafe-menu.js sets the
   attribute, loads the faces and the language; a venue that never chose it
   sees no change. It sits before the elegant finish, whose checks read from
   there to the end of the file. */
[data-bp-look="showcase"] {
  --sc-accent: var(--color-accent);
  --sc-on-accent: var(--accent-text, #fff);
  --sc-ink: var(--accent-ink, var(--color-accent));
  --sc-line: var(--line, rgba(0, 0, 0, .1));
  --sc-soft: var(--surface-raised, var(--color-card));
  --sc-r: calc(var(--radius, 14px) + 4px);
  --sc-ease: cubic-bezier(.2, .7, .2, 1);
}
[data-bp-look="showcase"] body { font-family: var(--font-body); }
[data-bp-look="showcase"][dir="rtl"] body,
[data-bp-look="showcase"][dir="rtl"] .category-tab,
[data-bp-look="showcase"][dir="rtl"] .all-view-heading,
[data-bp-look="showcase"][dir="rtl"] .sc-lang { font-family: var(--font-display), 'Tajawal', sans-serif; }
[data-bp-look="showcase"][dir="rtl"] .item-teaser,
[data-bp-look="showcase"][dir="rtl"] .item-popup-desc { font-family: 'Tajawal', var(--font-body); }

/* The band: the name scrolls away under the categories, which stay
   (cafe-menu.js measures the band into --sc-head). */
[data-bp-look="showcase"] .menu-top { top: calc(-1 * var(--sc-head, 0px)); background: var(--color-bg); }
[data-bp-look="showcase"] .menu-top.is-stuck { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35); }
[data-bp-look="showcase"] .menu-header {
  position: relative; overflow: hidden;
  padding: calc(58px + env(safe-area-inset-top, 0px)) 20px 30px;
  background: var(--sc-accent); color: var(--sc-on-accent);
  border-radius: 0 0 28px 28px;
}
[data-bp-look="showcase"] .menu-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
  background: radial-gradient(circle at 1.5px 1.5px, currentColor 1.5px, transparent 0) 0 0 / 16px 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
[data-bp-look="showcase"] .menu-header .cafe-name {
  position: relative; color: inherit; font-weight: 800; text-transform: uppercase;
  font-size: clamp(38px, 9vw, 76px); line-height: .95; letter-spacing: -.01em;
  animation: sc-rise .7s var(--sc-ease) both;
}
[data-bp-look="showcase"] .menu-header .cafe-sub {
  position: relative; color: inherit; opacity: .88; font-size: clamp(14px, 2.2vw, 17px);
  max-width: 34em; margin: 10px auto 0; animation: sc-rise .7s .08s var(--sc-ease) both;
}
[data-bp-look="showcase"] .sc-lang {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-end: 14px; z-index: 1;
  font: 600 13px/1 var(--font-display); color: inherit; cursor: pointer;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px; padding: 8px 14px; min-height: 34px;
}
[data-bp-look="showcase"] .sc-lang:hover { background: rgba(255, 255, 255, .24); }
[data-bp-look="showcase"] .sc-lang:focus-visible,
[data-bp-look="showcase"] .category-tab:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }

/* The categories: one row; a phone swipes it, a wide screen centres it. */
[data-bp-look="showcase"] .category-tabs {
  flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; gap: 8px; padding: 14px 16px 12px; scroll-padding-inline: 16px;
}
[data-bp-look="showcase"] .category-tab:first-child { margin-inline-start: auto; }
[data-bp-look="showcase"] .category-tab:last-child { margin-inline-end: auto; }
[data-bp-look="showcase"] .category-tab {
  flex: 0 0 auto; scroll-snap-align: center; font-weight: 600; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; min-height: 42px;
  background: var(--color-card); color: var(--color-text); border: 1.5px solid var(--sc-line);
  transition: background .25s var(--sc-ease), color .25s var(--sc-ease), border-color .25s var(--sc-ease), transform .25s var(--sc-ease);
}
[data-bp-look="showcase"] .category-tab.active { background: var(--sc-accent); color: var(--sc-on-accent); border-color: var(--sc-accent); transform: scale(1.04); }
[data-bp-look="showcase"] .category-tab:not(.active):hover { border-color: var(--sc-accent); color: var(--color-text); }

/* The dishes: one column on a phone, then two and three. */
[data-bp-look="showcase"] .menu-section { padding: 0 16px 100px; }
[data-bp-look="showcase"] .menu-section.active { animation: sc-fade .35s var(--sc-ease); }
[data-bp-look="showcase"] .all-view-heading {
  font-weight: 800; text-transform: none; letter-spacing: -.005em; color: var(--color-text);
  font-size: clamp(28px, 6vw, 44px); line-height: 1.05; border: 0;
  margin: 40px auto 18px; padding: 0 0 12px;
  background: linear-gradient(var(--sc-accent), var(--sc-accent)) 0 100% / 64px 5px no-repeat;
}
[data-bp-look="showcase"][dir="rtl"] .all-view-heading { background-position: 100% 100%; }
[data-bp-look="showcase"] .all-view-heading:first-child { margin-top: 26px; }
[data-bp-look="showcase"] .menu-grid { grid-template-columns: 1fr; gap: 14px; max-width: 1180px; align-items: start; }
[data-bp-look="showcase"] .menu-section:not(#section-all) .menu-grid { padding-top: 22px; }
[data-bp-look="showcase"] .item-card { position: relative; order: 1; border-radius: var(--sc-r); border: 1px solid var(--sc-line); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -20px rgba(0, 0, 0, .3); transition: transform .35s var(--sc-ease), box-shadow .35s var(--sc-ease), opacity .6s var(--sc-ease); }
[data-bp-look="showcase"] .item-card:not(.no-photo) { order: 0; }
[data-bp-look="showcase"] .item-card:hover { transform: translateY(-4px); border-color: var(--sc-line); box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 22px 40px -22px rgba(0, 0, 0, .4); }
[data-bp-look="showcase"] .item-card .thumb-wrap { aspect-ratio: 4 / 3; background: var(--sc-soft); }
[data-bp-look="showcase"] .item-card .thumb-wrap img { transition: transform .8s var(--sc-ease); }
[data-bp-look="showcase"] .item-card:hover .thumb-wrap img { transform: scale(1.06); }
[data-bp-look="showcase"] .item-card.no-photo .thumb-wrap { display: none; }
[data-bp-look="showcase"] .item-card .card-body { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: start; padding: 16px 18px 18px; }
[data-bp-look="showcase"] .item-card .item-name { font-weight: 700; font-size: 20px; line-height: 1.2; margin: 0; unicode-bidi: plaintext; text-align: start; }
[data-bp-look="showcase"] .item-card .item-price {
  justify-self: end; white-space: nowrap; font-size: 15px; font-weight: 700;
  color: var(--sc-on-accent); background: var(--sc-accent); border-radius: 999px; padding: 5px 12px;
}
[data-bp-look="showcase"] .item-card:not(.no-photo) .item-price { position: absolute; top: 12px; inset-inline-end: 12px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .45); }
[data-bp-look="showcase"] .item-card:not(.no-photo) .item-name { grid-column: 1 / -1; font-size: 22px; }
[data-bp-look="showcase"] .item-card .item-teaser { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; margin: 0; unicode-bidi: plaintext; text-align: start; }
[data-bp-look="showcase"] .item-card .item-teaser:empty { display: none; }
[data-bp-look="showcase"] .item-card .option-group { grid-column: 1 / -1; }
/* Rising in as they come into view (cafe-menu.js adds sc-pre, then takes
   it off; without the script, or with reduced motion, there is none). */
[data-bp-look="showcase"] .item-card.sc-pre { opacity: 0; transform: translateY(22px); }
@media (min-width: 640px) {
  [data-bp-look="showcase"] .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  [data-bp-look="showcase"] .menu-section { padding: 0 28px 100px; }
}
@media (min-width: 1000px) {
  [data-bp-look="showcase"] .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  [data-bp-look="showcase"] .menu-header { padding-top: calc(64px + env(safe-area-inset-top, 0px)); padding-bottom: 46px; border-radius: 0 0 40px 40px; }
}

/* The dish, opened. */
[data-bp-look="showcase"] .item-popup { background: rgba(0, 0, 0, .78); }
[data-bp-look="showcase"] .item-popup-inner { border-radius: calc(var(--sc-r) + 6px); border: 0; transform: translateY(16px) scale(.98); transition: transform .35s var(--sc-ease); }
[data-bp-look="showcase"] .item-popup.on .item-popup-inner { transform: none; }
[data-bp-look="showcase"] .item-popup-name { font-family: var(--font-display); font-weight: 800; unicode-bidi: plaintext; }
[data-bp-look="showcase"] .item-popup-price { display: inline-block; color: var(--sc-on-accent); background: var(--sc-accent); border-radius: 999px; padding: 4px 14px; }
[data-bp-look="showcase"] .item-popup-desc { unicode-bidi: plaintext; }

@keyframes sc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-bp-look="showcase"] .menu-header .cafe-name,
  [data-bp-look="showcase"] .menu-header .cafe-sub,
  [data-bp-look="showcase"] .menu-section.active { animation: none; }
  [data-bp-look="showcase"] .item-card,
  [data-bp-look="showcase"] .item-card .thumb-wrap img,
  [data-bp-look="showcase"] .category-tab,
  [data-bp-look="showcase"] .item-popup-inner { transition: none; }
  [data-bp-look="showcase"] .item-card:hover,
  [data-bp-look="showcase"] .item-card:hover .thumb-wrap img,
  [data-bp-look="showcase"] .category-tab.active { transform: none; }
}
/* ---------- End of the showcase look ---------- */

/* ---------- The elegant finish (booking_page.look = "elegant") ----------
   Terrace 77, 13 Oct 2026: "make the menu much more elegant, to match the
   improved website". A printed menu rather than a grid of tiles: names in
   the venue's display face, a dotted line to the price, hairline rules,
   small widely spaced capitals for the categories, squared corners. An item
   with a photo keeps it as a small arch beside its line; one without draws no
   empty box (.no-photo). Only a venue that asks for it changes;
   cafe-menu.js sets the attribute and loads the face, as the booking page
   does for its own [data-bp-look] rules (booking.css). */
[data-bp-look="elegant"] {
  --bp-hair: color-mix(in srgb, var(--color-text) 13%, transparent);
  --bp-dot: color-mix(in srgb, var(--color-text) 32%, transparent);
  --bp-ink: var(--accent-ink, var(--color-accent));
}
[data-bp-look="elegant"] .menu-top.is-stuck { box-shadow: 0 1px 0 var(--bp-hair), 0 14px 28px -22px rgba(0, 0, 0, .6); }
[data-bp-look="elegant"] .menu-header { padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 0; }
[data-bp-look="elegant"] .menu-header .cafe-name { font-weight: 400; text-transform: none; font-size: clamp(30px, 4.6vw, 48px); letter-spacing: .01em; }
[data-bp-look="elegant"] .menu-header .cafe-sub { font-family: var(--font-display); font-size: 15px; margin-top: 6px; }
[data-bp-look="elegant"] .menu-header::after {
  content: ""; display: block; width: 140px; height: 1px; margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, var(--bp-ink), transparent);
}
[data-bp-look="elegant"] .category-tabs { gap: 2px 4px; padding: 8px 16px 2px; }
[data-bp-look="elegant"] .category-tab {
  background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  font-family: var(--font-body); font-weight: 500; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  padding: 11px 11px 9px; color: var(--color-text-light);
}
[data-bp-look="elegant"] .category-tab.active { background: transparent; color: var(--bp-ink); border-bottom-color: currentColor; }
[data-bp-look="elegant"] .category-tab:not(.active):hover { border-color: transparent; color: var(--color-text); }

[data-bp-look="elegant"] .menu-section { padding: 0 24px 90px; }
[data-bp-look="elegant"] .all-view-heading {
  display: flex; align-items: center; gap: 20px; max-width: 1040px; margin: 54px auto 14px; padding: 0; border: 0;
  font-weight: 400; text-transform: none; font-size: clamp(26px, 3vw, 34px); letter-spacing: .01em; color: var(--bp-ink);
}
[data-bp-look="elegant"] .all-view-heading::before, [data-bp-look="elegant"] .all-view-heading::after { content: ""; flex: 1; height: 1px; background: var(--bp-hair); }
[data-bp-look="elegant"] .all-view-heading:first-child { margin-top: 30px; }
[data-bp-look="elegant"] .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; max-width: 1040px; }
[data-bp-look="elegant"] .menu-section:not(#section-all) .menu-grid { padding-top: 26px; }

[data-bp-look="elegant"] .item-card {
  display: flex; gap: 18px; align-items: flex-start; overflow: visible;
  background: transparent; border: 0; border-bottom: 1px solid var(--bp-hair); border-radius: 0; padding: 20px 0 18px;
}
[data-bp-look="elegant"] .item-card:hover { transform: none; border-color: var(--bp-hair); }
[data-bp-look="elegant"] .item-card:hover .item-name { color: var(--bp-ink); }
[data-bp-look="elegant"] .item-card .thumb-wrap { flex: 0 0 64px; width: 64px; aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; background: var(--color-card); }
[data-bp-look="elegant"] .item-card:hover .thumb-wrap img { transform: none; }
[data-bp-look="elegant"] .item-card.no-photo .thumb-wrap { display: none; }
[data-bp-look="elegant"] .item-card .card-body {
  flex: 1; min-width: 0; padding: 0;
  display: grid; grid-template-columns: minmax(0, max-content) minmax(18px, 1fr) auto; align-items: baseline; column-gap: 10px;
}
[data-bp-look="elegant"] .item-card .card-body::before { content: ""; grid-column: 2; grid-row: 1; border-bottom: 1px dotted var(--bp-dot); transform: translateY(-.3em); }
[data-bp-look="elegant"] .item-card .item-name { grid-column: 1; grid-row: 1; margin: 0; font-weight: 500; font-size: 19px; line-height: 1.3; letter-spacing: .005em; transition: color .2s ease; }
[data-bp-look="elegant"] .item-card .item-price {
  grid-column: 3; grid-row: 1; white-space: nowrap; color: var(--bp-ink);
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px; letter-spacing: .06em; font-variant-numeric: lining-nums tabular-nums;
}
[data-bp-look="elegant"] .item-card .item-teaser { grid-column: 1 / -1; grid-row: 2; margin-top: 6px; font-size: 13.5px; line-height: 1.55; }
[data-bp-look="elegant"] .item-card .item-teaser:empty { display: none; }

[data-bp-look="elegant"] .item-popup-inner { border-radius: 2px; background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
[data-bp-look="elegant"] .item-popup-body { padding: 28px 28px 24px; text-align: center; }
[data-bp-look="elegant"] .item-popup-name { font-weight: 500; font-size: 28px; }
[data-bp-look="elegant"] .item-popup-price { margin-top: 8px; font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: .2em; color: var(--bp-ink); }
[data-bp-look="elegant"] .item-popup-desc { max-width: 44ch; margin: 14px auto 0; font-size: 14.5px; }
[data-bp-look="elegant"] .item-popup-hint { margin-top: 18px; letter-spacing: .2em; color: var(--color-text-light); opacity: .7; }
[data-bp-look="elegant"] .attract-cat { font-family: var(--font-body); font-weight: 500; letter-spacing: .3em; }
[data-bp-look="elegant"] .attract-name, [data-bp-look="elegant"] .attract-price { font-weight: 500; }

@media (max-width: 760px) {
  [data-bp-look="elegant"] .menu-grid { grid-template-columns: minmax(0, 1fr); }
  [data-bp-look="elegant"] .menu-section { padding: 0 18px 80px; }
  [data-bp-look="elegant"] .category-tab { font-size: 10.5px; letter-spacing: .14em; padding: 9px 8px 8px; }
  [data-bp-look="elegant"] .item-card .item-name { font-size: 18px; }
}

/* The section's photos behind the menu (cafe-menu.js sectionBg; Terrace 77,
   13 Oct 2026, thread #3; Mazin: "layered and blended as one, but each item
   flows into another image on its own"). Three photos (two on a phone held
   upright) overlap, each with a soft oval edge, so they read as one picture;
   each fades to its next dish on its own, slowly. Only opacity moves, and
   nothing is filtered (the tablets froze on a full-screen blur, see
   .attract-bg): the soft edge is a fixed mask, drawn once. Faint, with a
   scrim in the page's colour down the middle where the lines are. Reduced
   motion: the global rule above stops the fade. */
[data-bp-look="elegant"] { --bp-bg-o: .15; }
[data-bp-look="elegant"][data-theme-mode="dark"] { --bp-bg-o: .32; }
[data-bp-look="elegant"] .bp-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
[data-bp-look="elegant"] .bp-bg-slot {
  position: absolute; top: -6%; height: 112%; width: 52%;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
  mask-image: radial-gradient(closest-side, #000 35%, transparent);
}
[data-bp-look="elegant"] .bp-bg-slot:nth-child(1) { left: -8%; top: -14%; }
[data-bp-look="elegant"] .bp-bg-slot:nth-child(2) { left: 24%; top: 4%; }
[data-bp-look="elegant"] .bp-bg-slot:nth-child(3) { left: 56%; top: -10%; }
[data-bp-look="elegant"] .bp-bg[data-n="2"] .bp-bg-slot { left: -15%; width: 130%; height: 66%; }
[data-bp-look="elegant"] .bp-bg[data-n="2"] .bp-bg-slot:nth-child(1) { top: -4%; }
[data-bp-look="elegant"] .bp-bg[data-n="2"] .bp-bg-slot:nth-child(2) { top: 38%; }
[data-bp-look="elegant"] .bp-bg[data-n="2"] .bp-bg-slot:nth-child(3) { display: none; }
[data-bp-look="elegant"] .bp-bg-slot span {
  position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity 2.2s ease-in-out; will-change: opacity;
}
[data-bp-look="elegant"] .bp-bg-slot span.on { opacity: var(--bp-bg-o); }
[data-bp-look="elegant"] .bp-bg-slot:nth-child(2) span { transition-delay: .35s; }
[data-bp-look="elegant"] .bp-bg-slot:nth-child(3) span { transition-delay: .7s; }
[data-bp-look="elegant"] .bp-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 75% at 50% 55%, color-mix(in srgb, var(--color-bg) 60%, transparent), transparent);
}
[data-bp-look="elegant"] #menu-sections { position: relative; z-index: 1; }