/* TINO custom styles. Tailwind handles layout; this file holds the repeated pieces. */
/* ==========================================================================
   DESIGN TOKENS: the single source of truth for every color on the site.
   Colors are stored as space-separated RGB channels (e.g. 37 41 38) so they can be used as
   rgb(var(--color-text)) or with any opacity, rgb(var(--color-text) / .5). js/tailwind-config.js reads
   these same variables, so Tailwind utilities such as bg-linen, text-mocha/90 and border-espresso/10 follow them.
   To retheme the site, change the channel values below. The dark theme only overrides these same tokens (see the
   :root[data-theme="dark"] block right after this one); nothing else on the site hard-codes a theme color.
   Current values: TINO light mode, a mostly monochrome palette of porcelain, white, light grey and charcoal with one
   restrained green-grey accent.
   ========================================================================== */
:root {
  /* Surfaces */
  --color-bg: 247 248 246;              /* #F7F8F6 page background (porcelain) */
  --color-surface: 255 255 255;         /* #FFFFFF primary surfaces */
  --color-surface-alt: 240 242 239;     /* #F0F2EF secondary surfaces: the menu section, top bar and footer */
  --color-surface-raised: 255 255 255;  /* #FFFFFF cards, inputs and other raised surfaces */
  --color-placeholder: 236 239 235;     /* #ECEFEB image frames and photo placeholders */

  /* Typography */
  --color-text: 37 41 38;               /* #252926 primary text (charcoal) */
  --color-text-muted: 98 106 100;       /* #626A64 secondary text (darkened to pass AA on grey surfaces) */

  /* Accents */
  --color-accent: 90 100 90;            /* #5A645A restrained green-grey: selected details, links, outlines (darkened so text passes AA, including on hover tints) */
  --color-accent-strong: 37 41 38;      /* #252926 primary button fill (charcoal) */
  --color-accent-secondary: 79 90 81;   /* #4F5A51 hover and focus details */
  --color-accent-tertiary: 90 100 90;   /* #5A645A small labels and eyebrows */
  --color-on-accent: 255 255 255;       /* #FFFFFF text and icons placed on accent backgrounds */

  /* Borders, shadows and overlays: channels first, then the steps the site uses */
  --color-border: 226 230 225;          /* #E2E6E1 borders and dividers */
  --color-shadow: 37 41 38;
  --color-overlay: 37 41 38;            /* dark scrim over photos and video */
  --border-faint: rgb(var(--color-border));
  --border-subtle: rgb(var(--color-border));
  --border-strong: rgb(var(--color-text) / .12);  /* outlines drawn on photo frames */
  --leader-line: rgb(var(--color-text) / .4);
  --wash-track: rgb(var(--color-text) / .06);     /* soft pill behind the menu tabs */
  --wash-hover: rgb(var(--color-text) / .07);     /* hover tint on quiet buttons */
  --wash-dot: rgb(var(--color-text) / .2);        /* idle carousel dot */
  --shadow-faint: rgb(var(--color-shadow) / .06);
  --shadow-soft: rgb(var(--color-shadow) / .07);
  --shadow-lift: rgb(var(--color-shadow) / .16);
  --glass: rgb(var(--color-surface) / .78);       /* translucent header */
  --glass-solid: rgb(var(--color-surface) / .96); /* header when backdrop blur is unsupported */

  /* Hero (background video): cinematic in BOTH themes, so these are NOT overridden by the dark theme */
  --hero-bg: 37 41 38;                  /* #252926 fallback behind the video */
  --hero-overlay: 37 41 38;             /* dark scrim over the video (used at 60% opacity) */
  --hero-text: 247 248 246;             /* #F7F8F6 hero script, heading and paragraph */
  --hero-cta-bg: 247 248 246;           /* #F7F8F6 light CTA button */
  --hero-cta-text: 37 41 38;            /* #252926 dark text on the CTA */
  --hero-cta-hover-bg: 240 242 239;     /* #F0F2EF CTA hover */

  color-scheme: light;                  /* native controls and scrollbars follow the active theme */
}

/* ==========================================================================
   DARK THEME: Soft Charcoal x Silver x Restrained Sage. Same token names, different channels.
   Applied by <html data-theme="dark"> (set before first paint by the small script in <head>, then by js/theme.js).
   Layering: page (darkest) < secondary surfaces < raised surfaces and cards. Green is only a quiet accent.
   ========================================================================== */
:root[data-theme="dark"] {
  /* Surfaces */
  --color-bg: 37 43 39;                 /* #252B27 main background */
  --color-surface: 44 51 46;            /* #2C332E primary surfaces and the translucent header */
  --color-surface-alt: 44 51 46;        /* #2C332E secondary surfaces: the menu section, top bar and footer */
  --color-surface-raised: 48 56 50;     /* #303832 cards and other raised surfaces */
  --color-placeholder: 52 60 54;        /* #343C36 image frames and photo placeholders */

  /* Typography */
  --color-text: 240 242 238;            /* #F0F2EE primary text (soft white) */
  --color-text-muted: 183 192 184;      /* #B7C0B8 secondary text */

  /* Accents */
  --color-accent: 164 176 159;          /* #A4B09F restrained sage: links, outlines, selected states */
  --color-accent-strong: 215 221 213;   /* #D7DDD5 silver: primary button fill */
  --color-accent-secondary: 195 206 190;/* #C3CEBE hover and focus details */
  --color-accent-tertiary: 164 176 159; /* #A4B09F small labels and eyebrows */
  --color-on-accent: 31 37 33;          /* #1F2521 text and icons placed on accent backgrounds */

  /* Borders, shadows and washes (light-on-dark washes are a touch stronger so they stay visible) */
  --color-border: 61 71 64;             /* #3D4740 borders and dividers */
  --color-shadow: 0 0 0;
  --wash-track: rgb(var(--color-text) / .07);
  --wash-hover: rgb(var(--color-text) / .09);
  --wash-dot: rgb(var(--color-text) / .22);
  --shadow-faint: rgb(var(--color-shadow) / .22);
  --shadow-soft: rgb(var(--color-shadow) / .28);
  --shadow-lift: rgb(var(--color-shadow) / .45);
  --glass: rgb(var(--color-surface) / .8);
  --glass-solid: rgb(var(--color-surface) / .97);

  color-scheme: dark;
}
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { background: rgb(var(--color-bg)); color: rgb(var(--color-text)); -webkit-font-smoothing: antialiased; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: rgb(var(--color-accent-strong)); color: rgb(var(--color-on-accent));
  font-weight: 600; font-size: .875rem; padding: .7rem 1.5rem;
  transition: background-color .2s;
}
.btn:hover { background: rgb(var(--color-accent)); }

/* Cards: soft, realistic shadow, no borders on one side only */
.card {
  background: rgb(var(--color-surface-raised)); border: 1px solid var(--border-subtle); border-radius: .5rem;
  box-shadow: 0 2px 14px var(--shadow-soft); overflow: hidden;
}

/* Image frames show a warm tone if a photo fails to load */
.frame { background: rgb(var(--color-placeholder)); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Empty photo slots (waiting for a photo): a quiet inset outline inside the normal frame, sized by the frame's aspect ratio.
   A slot counts as empty while it has no <img> inside, so stray spaces or comments in the HTML make no difference.
   The outline disappears on its own once an <img> is placed inside the frame. */
.frame[data-slot]:not(:has(img)) { position: relative; }
.frame[data-slot]:not(:has(img)):not(.moments-frame)::after {
  content: ''; position: absolute; inset: .875rem; border: 1px solid var(--border-strong); border-radius: .125rem; pointer-events: none;
}
.moments-frame[data-slot]:not(:has(img))::before { content: ''; } /* keep the label-frame outline, hide the label text while empty */
.peek[data-slot]:not(:has(img)) { background: rgb(var(--color-placeholder)); }

.section-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; color: rgb(var(--color-text)); }

/* Theme switch (sun/moon). The icon follows the active theme; js/theme.js keeps the labels and every switch in sync. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: none;
  width: 2.5rem; height: 2.5rem; border: 1px solid rgb(var(--color-border)); border-radius: 9999px;
  background: transparent; color: rgb(var(--color-text-muted)); cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.theme-toggle:hover { color: rgb(var(--color-text)); background: var(--wash-hover); border-color: rgb(var(--color-accent)); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; flex: none; }
.theme-toggle--row { width: auto; height: auto; padding: .5rem 1rem; align-self: flex-start; font-size: .875rem; font-weight: 600; }
:root[data-theme="dark"] .theme-icon-sun,
:root:not([data-theme="dark"]) .theme-icon-moon { display: none; }

/* Appearance widget (phones only): a draggable handle that docks to the left or right screen edge and opens a small Light / Dark panel.
   Behavior: js/theme.js. Hidden from 768px up (the md breakpoint), where the header has its own theme switch. */
.appearance {
  --peek: 1.75rem; /* resting: half of the 3.5rem circle is tucked past the screen edge; .is-out (after a tap) slides it fully in */
  position: fixed; z-index: 50; /* above the sticky header (z-40) and its menu, so the widget never hides behind them */
  right: calc(env(safe-area-inset-right, 0px) - var(--peek)); top: 66%; transform: translateY(-50%);
  transition: right .3s cubic-bezier(.22, .61, .36, 1), left .3s cubic-bezier(.22, .61, .36, 1);
}
.appearance.is-out { --peek: -.5rem; } /* negative: rests .5rem in from the edge, a full circle */
.appearance.is-dragging { transition: none; }
@media (min-width: 768px) { .appearance { display: none; } }
html:has(.search-input:focus) .appearance { visibility: hidden; } /* never sits over the menu search field while typing */
.appearance-handle {
  display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; padding: 0 var(--tuck-pad, 0) 0 0; /* resting: icon centered in the half that stays visible */
  border: 1px solid rgb(var(--color-border)); border-radius: 50%;
  background: rgb(var(--color-surface-raised)); color: rgb(var(--color-text-muted)); cursor: pointer;
  box-shadow: 0 4px 14px var(--shadow-soft); -webkit-tap-highlight-color: transparent; touch-action: none; /* the handle is dragged, so the browser must not scroll or zoom from it */
  transition: background-color .2s, color .2s, border-color .2s;
}
.appearance.is-dragging .appearance-handle { cursor: grabbing; }
/* Left-side dock (the widget can be dragged to either side and snaps to the nearer one): everything is mirrored */
.appearance:not(.is-out) { --tuck-pad: 1.75rem; }
.appearance.is-left .appearance-handle { padding: 0 0 0 var(--tuck-pad, 0); }
.appearance.is-left { right: auto; left: calc(env(safe-area-inset-left, 0px) - var(--peek)); }
.appearance.is-left .appearance-panel {
  right: auto; left: calc(100% + .5rem); transform-origin: left center;
  transform: translate(-.75rem, calc(-50% + var(--shift, 0px))) scale(.96);
}
.appearance.is-left.is-open .appearance-panel { transform: translate(0, calc(-50% + var(--shift, 0px))) scale(1); }
.appearance-handle:hover { color: rgb(var(--color-text)); border-color: rgb(var(--color-accent)); }
.appearance-handle:focus-visible { outline: 2px solid rgb(var(--color-accent-secondary)); outline-offset: -5px; }
.appearance.is-open .appearance-handle { background: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); }

.appearance-panel {
  position: absolute; right: calc(100% + .5rem); top: 50%; width: min(15rem, calc(100vw - 4.5rem));
  max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; padding: 1rem;
  border: 1px solid rgb(var(--color-border)); border-radius: 1rem; background: rgb(var(--color-surface-raised));
  box-shadow: 0 10px 28px var(--shadow-soft);
  transform-origin: right center; transform: translate(.75rem, calc(-50% + var(--shift, 0px))) scale(.96); opacity: 0; visibility: hidden;
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), opacity .2s ease, visibility 0s linear .25s, background-color .3s, border-color .3s;
}
.appearance.is-open .appearance-panel {
  transform: translate(0, calc(-50% + var(--shift, 0px))) scale(1); opacity: 1; visibility: visible; transition-delay: 0s;
}
.appearance-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 600; color: rgb(var(--color-text)); }
.appearance-desc { margin-top: .25rem; font-size: .8125rem; line-height: 1.45; color: rgb(var(--color-text-muted)); }
.appearance-options { display: flex; gap: .5rem; margin-top: .875rem; }
.appearance-option {
  position: relative; flex: 1; min-height: 4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
  border: 1px solid rgb(var(--color-border)); border-radius: .75rem; background: transparent; color: rgb(var(--color-text));
  font-size: .875rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .2s, color .2s, border-color .2s;
}
.appearance-option:hover { background: var(--wash-hover); border-color: rgb(var(--color-accent)); }
.appearance-option[aria-pressed="true"] { background: rgb(var(--color-accent)); border-color: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); }
.appearance-check { position: absolute; top: .375rem; right: .375rem; display: none; } /* a check mark, so the choice never depends on color alone */
.appearance-option[aria-pressed="true"] .appearance-check { display: block; }
@media (prefers-reduced-motion: reduce) {
  .appearance-panel, .appearance-handle, .appearance-option { transition: none; }
}

/* Theme change: js/theme.js adds .theme-anim to <html> for a moment, only when the visitor switches (never on page load).
   Zero-specificity selector on purpose: elements that already declare their own transition (menu cards, carousel, slider, tabs) keep it. */
:where(html.theme-anim) :where(*, *::before, *::after) {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease, stroke .3s ease;
}

:focus-visible { outline: 2px solid rgb(var(--color-accent-secondary)); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* Menu category tabs and photo placeholder */
.tab {
  border: 0; color: rgb(var(--color-accent)); border-radius: 9999px; background: transparent;
  padding: .5rem .8rem; font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.tab:hover { background: var(--wash-hover); color: rgb(var(--color-accent-secondary)); }
.tab[aria-pressed="true"] { background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); }
.ph {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem; text-align: center; font-size: .75rem; color: rgb(var(--color-text-muted));
}

/* Menu card pop: a small, smooth lift with a slight spring at the end */
.menu-card {
  position: relative; cursor: pointer;
  transition: transform .3s cubic-bezier(.34, 1.3, .5, 1), box-shadow .3s ease;
}
@media (hover: hover) {
  .menu-card:hover { transform: scale(1.05); box-shadow: 0 10px 28px var(--shadow-lift); z-index: 10; }
}
.menu-card.is-popped, .menu-card:focus-visible {
  transform: scale(1.05); box-shadow: 0 10px 28px var(--shadow-lift); z-index: 10;
}
@media (prefers-reduced-motion: reduce) {
  .menu-card, .menu-card:hover, .menu-card.is-popped, .menu-card:focus-visible { transform: none; }
}

/* Menu card second photo: a layer over the first photo that fades in on hover, keyboard focus, or the tap that pops the card.
   Same square frame, so nothing moves. --alt-bg is the optional per-item background; without it the frame's normal tone is used. */
.frame.has-alt { position: relative; }
.frame-alt { position: absolute; inset: 0; background: var(--alt-bg, rgb(var(--color-placeholder))); opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.frame-alt img { transform: scale(1.03); transition: transform .6s ease; }
@media (hover: hover) {
  .menu-card:hover .frame-alt { opacity: 1; }
  .menu-card:hover .frame-alt img { transform: none; }
}
.menu-card.is-popped .frame-alt, .menu-card:focus-visible .frame-alt { opacity: 1; }
.menu-card.is-popped .frame-alt img, .menu-card:focus-visible .frame-alt img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .frame-alt, .frame-alt img { transition: none; }
  .frame-alt img { transform: none; }
}

/* Category tabs pop: hover on desktop, a quick bounce when a tab is selected (tap on mobile) */
.tab { transition: transform .3s cubic-bezier(.34, 1.3, .5, 1), background-color .2s, color .2s; }
@media (hover: hover) {
  .tab:hover { transform: scale(1.07); }
}
.tab:active { transform: scale(.97); }
.tab[aria-pressed="true"] { animation: tab-pop .4s cubic-bezier(.34, 1.3, .5, 1); }
@keyframes tab-pop { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .tab, .tab:hover, .tab:active { transform: none; }
  .tab[aria-pressed="true"] { animation: none; }
}

/* Hero entrance: plays once on load. Elements are only hidden while an animation is running,
   so nothing stays invisible if animations are off or unsupported. */
.hero-script, .hero-title, .hero-lead, .hero-cta {
  animation: 0.9s cubic-bezier(.22, .61, .36, 1) both;
}
.hero-script { animation-name: hero-from-right; animation-delay: .15s; }
.hero-title  { animation-name: hero-from-left;  animation-delay: .4s; }
.hero-lead   { animation-name: hero-rise;       animation-delay: .75s; }
.hero-cta    { animation-name: hero-rise;       animation-delay: 1.05s; }
@keyframes hero-from-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes hero-from-left  { from { opacity: 0; transform: translateX(-28px); } }
@keyframes hero-rise       { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-script, .hero-title, .hero-lead, .hero-cta { animation: none; }
}

/* Editorial details for the "Why choose TINO" section */
.editorial-label { text-align: center; font-size: 1.125rem; font-weight: 700; color: rgb(var(--color-accent-tertiary)); }
.link-line {
  font-size: .875rem; font-weight: 600; color: rgb(var(--color-accent));
  border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color .2s;
}
.link-line:hover { color: rgb(var(--color-accent-secondary)); }

/* Feature slider: slides share one grid cell, so the stage always keeps the tallest slide's height */
.feature-stage { display: grid; }
.feature-slide { grid-area: 1 / 1; visibility: hidden; }
.feature-slide.is-active { visibility: visible; }
.slider-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 1px solid rgb(var(--color-accent)); border-radius: 9999px; color: rgb(var(--color-accent));
  transition: background-color .2s, color .2s;
}
.slider-btn:hover { background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); }

/* Peek: a faded sliver of the next slide's photo under the current one */
.peek {
  height: 5rem; margin-top: .75rem; overflow: hidden; border-radius: .125rem; cursor: pointer; opacity: .7;
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
  transition: opacity .2s;
}
.peek:hover { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* Header: translucent white with a blur, so content softly passes behind it while scrolling.
   The opacity lives in --glass (top of this file): raise it for more solid, lower it for more see-through. */
.site-header {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--glass-solid); }
}

/* Menu: tabs sit in one soft track; cards read like a printed menu */
.tab-track {
  position: relative; display: flex; gap: .25rem; max-width: 100%; padding: .35rem;
  overflow-x: auto; border-radius: 9999px; background: var(--wash-track); scrollbar-width: none;
}
.tab-track::-webkit-scrollbar { display: none; }
.menu-dots { flex: 1; min-width: .75rem; border-bottom: 1px dotted var(--leader-line); }
.menu-price { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; color: rgb(var(--color-accent)); }
.menu-card { animation: menu-in .45s cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .menu-card { animation: none; } }

/* Menu: View more / Show less, a quiet outlined pill under the grid */
.menu-more { display: flex; justify-content: center; margin-top: 2.5rem; }
.menu-more-btn {
  min-height: 2.75rem; padding: 0 1.75rem; border: 1px solid rgb(var(--color-accent)); border-radius: 9999px; background: transparent;
  color: rgb(var(--color-accent)); font-size: .875rem; font-weight: 600; transition: background-color .2s, color .2s;
}
.menu-more-btn:hover { background: var(--wash-hover); }
@media (prefers-reduced-motion: reduce) { .menu-more-btn { transition: none; } }

/* Menu search: a quiet round button beside the tabs. The field opens in a row under them, so the tabs stay fully visible.
   Colors come only from the theme tokens above, so light and dark mode both work. */
.search-toggle {
  flex: none; width: 3rem; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px; background: var(--wash-track); color: rgb(var(--color-accent));
  transition: background-color .2s, color .2s;
}
.search-toggle:hover { background: var(--wash-hover); color: rgb(var(--color-accent-secondary)); }
.search-toggle[aria-expanded="true"] { background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); }
.search-toggle .search-icon-close { display: none; }
.search-toggle[aria-expanded="true"] .search-icon-open { display: none; }
.search-toggle[aria-expanded="true"] .search-icon-close { display: block; }

.menu-search {
  display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
  transition: grid-template-rows .3s ease, opacity .25s ease, visibility 0s linear .3s;
}
.menu-search.is-open { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-search-clip { min-height: 0; overflow: hidden; }
.menu-search-box { max-width: 31rem; margin: 0 auto; padding: .75rem .5rem .5rem; }
.search-field {
  display: flex; align-items: center; gap: .5rem; min-height: 3rem; padding: 0 .125rem 0 1rem;
  border: 1px solid rgb(var(--color-border)); border-radius: 9999px; background: rgb(var(--color-surface-raised));
  color: rgb(var(--color-accent)); transition: border-color .2s;
}
.search-field:hover { border-color: rgb(var(--color-accent) / .6); }
.search-field:focus-within { border-color: rgb(var(--color-accent)); outline: 2px solid rgb(var(--color-accent-secondary)); outline-offset: 3px; }
.search-field-icon { flex: none; }
.search-input {
  flex: 1; min-width: 0; align-self: stretch; border: 0; padding: 0; background: transparent; outline: none;
  font: inherit; font-size: 1rem; color: rgb(var(--color-text)); -webkit-appearance: none; appearance: none;
}
.search-input::placeholder { color: rgb(var(--color-text-muted)); opacity: 1; }
.search-input::-webkit-search-decoration, .search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-clear {
  flex: none; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9999px; background: transparent; color: rgb(var(--color-text-muted)); transition: background-color .2s, color .2s;
}
.search-clear:hover { background: var(--wash-hover); color: rgb(var(--color-text)); }
.search-clear[hidden] { display: none; }

/* Search results: a short note above the cards, a calm message when nothing matches, and no entrance animation while typing */
.menu-results-note { margin-top: 1.5rem; text-align: center; font-size: .875rem; color: rgb(var(--color-text-muted)); }
.menu-results-note[hidden] { display: none; }
.menu-empty { margin-top: 2rem; padding: 3rem 1rem; text-align: center; }
.menu-empty[hidden] { display: none; }
.menu-empty-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.375rem; font-weight: 600; color: rgb(var(--color-text)); }
.menu-empty-hint { margin-top: .5rem; font-size: .9375rem; color: rgb(var(--color-text-muted)); }
#menu-grid[hidden] { display: none; }
.is-searching > .menu-card { animation: none; }

/* Barista’s Choice: Drink | Food control and the swap transition */
.seg { display: flex; width: 100%; padding: .25rem; border: 1px solid rgb(var(--color-accent)); border-radius: 9999px; }
.seg-btn {
  flex: 1; min-width: 6.5rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: 9999px;
  color: rgb(var(--color-accent)); font-size: .9375rem; font-weight: 600; transition: background-color .25s, color .25s;
}
.seg-btn:hover { background: var(--wash-hover); }
.seg-btn[aria-pressed="true"] { background: rgb(var(--color-accent)); color: rgb(var(--color-on-accent)); }
.choice-swap { animation: choice-in .35s cubic-bezier(.22, .61, .36, 1) backwards; }
@keyframes choice-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 640px) { .seg { display: inline-flex; width: auto; } }
@media (prefers-reduced-motion: reduce) { .choice-swap { animation: none; } .seg-btn { transition: none; } }

/* Little Moments: automatic rotated slideshow with peeking previews (behavior in js/main.js).
   Each slide features the photo on the left and the title/description on the right.
   Previous and next slides peek in naturally from the left and right edges. */
.moments-intro { max-width: 36rem; margin: 0 auto; text-align: center; }
.moments-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--color-accent-tertiary)); }

.moments-carousel {
  position: relative;
  width: 100%;
  margin-top: 2.5rem;
}
.moments-carousel:focus-visible { outline: 2px solid rgb(var(--color-accent-secondary)); outline-offset: 8px; }

.moments-viewport {
  width: 100%;
  overflow: hidden;
  padding: 1.25rem 0; /* prevents scale & shadow clipping */
  touch-action: pan-y pinch-zoom; /* vertical page scroll stays native; horizontal drags go to the script */
}

.moments-track {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.moments-slide {
  flex: 0 0 85%;
  max-width: 840px;
  opacity: 0.45;
  transform: scale(0.94);
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.55s ease;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.moments-slide img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.moments-slide.is-active {
  opacity: 1;
  transform: scale(1);
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .moments-slide.is-active { cursor: grab; }
}
.moments-carousel.is-dragging, .moments-carousel.is-dragging * { cursor: grabbing !important; }

@media (min-width: 640px) {
  .moments-slide { flex: 0 0 80%; }
}
@media (min-width: 1024px) {
  .moments-slide { flex: 0 0 76%; }
}

/* Slide card: photo on left, title & description on right */
.moments-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  background: rgb(var(--color-surface-raised));
  border: 1px solid var(--border-faint);
  border-radius: 0.5rem;
  box-shadow: 0 4px 22px var(--shadow-faint);
  padding: 1.25rem;
}

@media (min-width: 640px) {
  .moments-card {
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    align-items: center;
    padding: 1.75rem 2rem;
  }
}

@media (min-width: 1024px) {
  .moments-card {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2.75rem;
    padding: 2.25rem 2.75rem;
  }
}

.moments-card-media {
  position: relative;
  width: 100%;
}

.moments-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 0.25rem;
}

.moments-frame::before {
  content: attr(data-label);
  position: absolute;
  inset: 0.875rem;
  display: grid;
  place-items: center;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  text-align: center;
  color: rgb(var(--color-text-muted));
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
}

.moments-frame img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.25rem;
}

.moments-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.moments-card-title {
  margin: 0.5rem 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgb(var(--color-text));
}

@media (min-width: 640px) {
  .moments-card-title { font-size: 2rem; }
}
@media (min-width: 1024px) {
  .moments-card-title { font-size: 2.25rem; }
}

.moments-card-desc {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgb(var(--color-text-muted));
  max-width: 28rem;
}

/* Subtle indicator pills (no buttons) */
.moments-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.moments-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--wash-dot);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
}

.moments-dot.is-active {
  width: 1.75rem;
  background: rgb(var(--color-accent));
}

@media (prefers-reduced-motion: reduce) {
  .moments-track, .moments-slide, .moments-dot {
    transition: none !important;
  }
  .moments-slide {
    opacity: 1;
    transform: none;
  }
}