/* ══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — scene, glass primitive, switcher & component overrides
   Loaded after liquid-glass-tokens.css.

   The "glass recipe" applied to every surface is exactly these lines:
     background: var(--glass-bg);          (use --glass-bg-2 for small controls)
     box-shadow: var(--glass-bevel);
     backdrop-filter: var(--glass-blur);
     -webkit-backdrop-filter: var(--glass-blur);
     border: none;
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Background scene ───────────────────────────────────────────────────── */
.lg-scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.lg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--blob-op);
  animation: lg-drift 22s ease-in-out infinite alternate;
}
.lg-blob--1 { width: 600px; height: 600px; background: radial-gradient(circle, var(--aqua), #3b82f6); top: -160px; left: -120px; }
.lg-blob--2 { width: 520px; height: 520px; background: radial-gradient(circle, var(--color-teal), #0d4f6e); bottom: -160px; right: -120px; animation-delay: -8s; }
.lg-blob--3 { width: 380px; height: 380px; background: radial-gradient(circle, var(--color-coral), #ffd27f); top: 55%; left: 50%; animation-delay: -13s; }
@keyframes lg-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, -40px) scale(1.08); }
  100% { transform: translate(-30px, 40px) scale(0.96); }
}
.lg-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Lift normal-flow content above the fixed scene (z-index:0). The nav,
   promo bar and FAB are already fixed with higher z-index, so they stay put. */
#main, footer { position: relative; z-index: 1; }

/* ── Section background neutralisation (let the scene show through) ──────── */
.section--white, .section--light, .section--dark, .section--teal {
  background: transparent;
  color: var(--lg-text);
}
.section__title { color: var(--lg-text); }
.section__subtitle { color: var(--lg-muted); opacity: 1; }

/* ── Global buttons ─────────────────────────────────────────────────────── */
.btn--primary {
  background: linear-gradient(135deg, var(--color-coral), #ff8a5b);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 107, 53, 0.4), var(--glass-bevel);
}
.btn--primary:hover {
  background: linear-gradient(135deg, #ff7d4d, #ff9568);
  transform: translateY(-2px);
}
.btn--outline {
  background: var(--glass-bg-2);
  box-shadow: var(--glass-bevel);
  border: none;
  color: var(--lg-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.btn--outline:hover { background: var(--glass-bg); }

/* ── NAV ────────────────────────────────────────────────────────────────── */
#site-nav {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  gap: var(--sp-3);          /* keep the globe and the switcher from touching */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
#site-nav.scrolled { box-shadow: var(--glass-bevel), 0 8px 24px rgba(0, 0, 0, 0.18); }
.nav__logo, .nav__logo-text { color: var(--lg-text); }
#nav-links a { color: var(--lg-text); opacity: 0.72; }
#nav-links a:hover, #nav-links a.active { opacity: 1; color: var(--lg-text); }
#nav-hamburger { color: var(--lg-text); }

/* ── HERO: keep the photo, glass the content panel ──────────────────────── */
#hero { color: #fff; }
.hero__content {
  background: color-mix(in srgb, var(--c-glass) 16%, transparent);
  box-shadow: var(--glass-bevel);
  border: none;
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 680px;
}

/* ── THEME SWITCHER (liquid glass segmented control) ────────────────────── */
.switcher {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 126px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 10px;
  border: none;
  border-radius: 99em;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--c-glass) 14%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow: var(--glass-bevel);
  transition: background-color 0.4s cubic-bezier(1, 0, 0.4, 1), box-shadow 0.4s cubic-bezier(1, 0, 0.4, 1);
}
.switcher__legend {
  position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0;
  white-space: nowrap; clip-path: inset(100%); overflow: hidden;
}
.switcher__input {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(100%); white-space: nowrap;
}
.switcher__option {
  --c: var(--c-content);
  display: flex; justify-content: center; align-items: center;
  width: 50px; height: 100%; padding: 0 13px; box-sizing: border-box;
  border-radius: 99em; transition: all 0.16s;
}
.switcher__option:hover { --c: var(--c-action); cursor: pointer; }
.switcher__option:hover .switcher__icon { scale: 1.18; }
.switcher__option:has(input:checked) { --c: var(--c-content); cursor: auto; }
.switcher__icon { display: block; width: 100%; transition: scale 0.2s cubic-bezier(0.5, 0, 0, 1); }
.switcher__filter { position: absolute; width: 0; height: 0; z-index: -1; }
.switcher::after {
  content: "";
  position: absolute; left: 4px; top: 4px;
  width: 66px; height: calc(100% - 8px);
  border-radius: 99em; z-index: -1;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  box-shadow:
    inset 0 0 0 1px       color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0 -1px   color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    0 3px 6px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  transition: translate 0.4s cubic-bezier(1, 0, 0.4, 1), background-color 0.4s, box-shadow 0.4s;
}
.switcher:has(input[c-option="1"]:checked)::after { translate: 0 0; transform-origin: right; animation: lg-sc 0.44s ease; }
.switcher:has(input[c-option="2"]:checked)::after { translate: 56px 0; transform-origin: left; animation: lg-sc 0.44s ease; }
@keyframes lg-sc { 0% { scale: 1 1; } 50% { scale: 1.12 1; } 100% { scale: 1 1; } }
@media (max-width: 480px) {
  .switcher { width: 112px; height: 36px; }
  .switcher::after { width: 58px; }
  .switcher:has(input[c-option="2"]:checked)::after { translate: 50px 0; }
  .switcher__option { width: 44px; padding: 0 11px; }
}

/* ── Nav layout: logo left, links centred, controls grouped right ──────────── */
@media (min-width: 768px) {
  #nav-links { flex: 1; }            /* absorb the slack → links centre, controls go right */
}

/* ── Language toggle (glass) + left-opening panel ─────────────────────────── */
.lang-toggle-btn {
  background: var(--glass-bg-2);
  box-shadow: var(--glass-bevel);
  border: none;
  color: var(--lg-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.lang-toggle-btn:hover { color: var(--lg-text); }
.lang-toggle-btn[aria-expanded="true"] {
  background: var(--color-coral);
  border-color: transparent;
  color: #fff;
}
/* Open the panel horizontally into the free space to the LEFT of the globe */
.lang-panel {
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  transform-origin: right center;
  transform: scale(0.9) translateY(-50%);
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel), 0 8px 32px rgba(0, 0, 0, 0.22);
  border: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.lang-panel.is-open { transform: scale(1) translateY(-50%); }
.lang-panel .lang-slider__track { background: var(--glass-bg-2); border: none; }
.lang-btn { color: var(--lg-muted); }
.lang-btn.active { color: var(--lg-text); }

/* ══ Section glass panels — give content sections a hero-like surface ═══════ */
#about .section__inner,
#wholesale .section__inner,
#vacancies .section__inner,
#feedback .section__inner,
#contact .section__inner,
#gallery .section__inner {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  border-radius: var(--radius-xl);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: clamp(1.5rem, 4vw, 3rem);
}
/* Narrower panels for centred-content sections — hug the content, not full-width slabs */
#wholesale .section__inner,
#vacancies .section__inner,
#feedback .section__inner { max-width: 760px; }

/* ══ Species cards ═════════════════════════════════════════════════════════ */
.species-card {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.species-card:hover { box-shadow: var(--glass-bevel), 0 16px 40px rgba(0, 0, 0, 0.18); }
.species-card__name { color: var(--lg-text); }
.species-attr__label { color: var(--color-teal); }
.species-attr__value { color: var(--lg-text); }

/* ══ About ═════════════════════════════════════════════════════════════════ */
.about__text h2 { color: var(--lg-text); }
.about__text p { color: var(--lg-muted); }
.about__ta-link { box-shadow: var(--glass-bevel); }
.about__visual { box-shadow: var(--glass-bevel); }

/* ══ Wholesale ═════════════════════════════════════════════════════════════ */
#wholesale .wholesale__body p { color: var(--lg-muted); }
.wholesale__stat-num { color: var(--color-coral); }
.wholesale__stat-label { color: var(--lg-muted); }

/* ══ Vacancies ═════════════════════════════════════════════════════════════ */
#vacancies .vacancies__body p { color: var(--lg-muted); }

/* ══ Feedback form ═════════════════════════════════════════════════════════ */
.feedback-form__field {
  background: var(--glass-bg-2);
  box-shadow: var(--glass-bevel);
  border: none;
  color: var(--lg-text);
}
.feedback-form__field:focus {
  outline: none;
  box-shadow: var(--glass-bevel), 0 0 0 3px color-mix(in srgb, var(--color-teal) 35%, transparent);
}
.feedback-form__field::placeholder { color: var(--lg-muted); }
.feedback-form__status { color: var(--color-teal); }

/* ══ Gallery + lightbox ════════════════════════════════════════════════════ */
.gallery-item { box-shadow: var(--glass-bevel); }
.lightbox { background: rgba(4, 10, 20, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lightbox__close, .lightbox__nav { background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: #fff; }

/* ══ Contact / hours / social / map ════════════════════════════════════════ */
.contact__info h2 { color: var(--lg-text); }
.contact__label, .hours-table h3 { color: var(--color-teal); }
.contact__value, .contact__value a { color: var(--lg-text); }
.contact__value a:hover { color: var(--color-coral); }
.hours-row { color: var(--lg-muted); border-color: color-mix(in srgb, var(--lg-text) 12%, transparent); }
.hours-row--closed .hours-val { color: var(--lg-muted); }
.social-link { background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text); }
.social-link:hover { background: var(--color-coral); color: #fff; }
/* Authentic brand colours for the footer social buttons (attr selectors beat the glass default). */
.social-link[aria-label="Facebook"] { background: #1877f2; color: #fff; }
.social-link[aria-label="Facebook"]:hover { background: #1466d8; color: #fff; }
.social-link[aria-label="Instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; }
.social-link[aria-label="Instagram"]:hover { filter: brightness(1.08); color: #fff; }
.social-link[aria-label="TripAdvisor"] { background: #34e0a1; color: #033d2b; }
.social-link[aria-label="TripAdvisor"]:hover { background: #22c98d; color: #033d2b; }
.map-wrap { box-shadow: var(--glass-bevel); border: none; }

/* ══ Footer ════════════════════════════════════════════════════════════════ */
footer { background: transparent; color: var(--lg-muted); }
footer a { color: var(--lg-muted); }
footer a:hover { color: var(--lg-text); }
.footer__tagline { color: var(--lg-muted); }

/* ══ Promo bar ═════════════════════════════════════════════════════════════ */
#promo-bar {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  color: var(--lg-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ══════════════════════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITION — cross-fade glass surfaces & text on data-theme flip
   (the body gradient cross-fades via the @property colours in the tokens file)
   ══════════════════════════════════════════════════════════════════════════ */
#site-nav, #promo-bar, footer,
.hero__content,
#about .section__inner, #wholesale .section__inner, #vacancies .section__inner,
#feedback .section__inner, #contact .section__inner, #gallery .section__inner,
.fish-card, .menu-card, .species-card,
.shop-tabs, .shop-view, .shop-search, .shop-pill, .shop-tab, .shop-sort select,
.lang-toggle-btn, .lang-panel, .lang-panel .lang-slider__track,
.feedback-form__field, .social-link, .map-wrap, .gallery-item,
.fish-card__status, .btn--outline, .switcher {
  transition:
    background-color 0.45s var(--ease-theme),
    box-shadow 0.45s var(--ease-theme),
    color 0.45s var(--ease-theme),
    border-color 0.45s var(--ease-theme),
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Text colours that snap otherwise — fade them too */
.section__title, .section__subtitle,
.about__text h2, .about__text p,
.contact__info h2, .contact__value, .contact__value a, .contact__label, .hours-table h3, .hours-row,
.wholesale__body p, .wholesale__stat-label,
.vacancies__body p,
.fish-card__name, .fish-card__price, .menu-card .menu-item__name, .menu-card__price,
.species-card__name, .species-attr__label, .species-attr__value,
.nav__logo, .nav__logo-text, .footer__tagline {
  transition: color 0.45s var(--ease-theme);
}

/* ══ Respect reduced-motion — kill the scene drift, dot pulse & all transitions ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .lg-blob { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOP / MENU surfaces + colour-coded glass status badges
   ══════════════════════════════════════════════════════════════════════════ */
.shop-search {
  background: var(--glass-bg-2);
  box-shadow: var(--glass-bevel);
  border: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.shop-search:focus-within { box-shadow: var(--glass-bevel), 0 0 0 3px color-mix(in srgb, var(--color-teal) 35%, transparent); }
.shop-search__input:focus-visible { outline: none; }   /* drop the inner outline; the wrapper ring shows focus */
.shop-search__input { color: var(--lg-text); }
.shop-search__icon { color: var(--lg-muted); }
.shop-search__clear { background: var(--glass-bg); color: var(--lg-muted); }
.shop-tabs, .shop-view {
  background: var(--glass-bg-2);
  box-shadow: var(--glass-bevel);
  border: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.shop-tab, .shop-view__btn { color: var(--lg-muted); }
.shop-tab:hover, .shop-view__btn:hover { color: var(--lg-text); }
.shop-tab.is-active, .shop-view__btn.is-active { background: linear-gradient(135deg, var(--color-teal), var(--teal-br)); color: #fff; }
.shop-pill {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  color: var(--lg-text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.shop-pill:hover { transform: translateY(-1px); }
.shop-pill.is-active { background: linear-gradient(135deg, var(--color-teal), var(--teal-br)); color: #fff; }
.shop-sort { color: var(--lg-muted); }
.shop-sort select { background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text); }
/* native option list needs a solid bg, otherwise it's white-on-white in dark theme */
.shop-sort select option { background: var(--input-fill); color: var(--lg-text); }
.board-updated, #board-updated-time, .board-message { color: var(--lg-muted); }

/* ── Fish & lunch cards (keep the photo, glass the card) ── */
.fish-card, .menu-card {
  background: var(--glass-bg);
  box-shadow: var(--glass-bevel);
  border: none;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.fish-card:hover, .menu-card:hover { box-shadow: var(--glass-bevel), 0 16px 40px rgba(0, 0, 0, 0.18); }
.fish-card__name, .menu-card .menu-item__name { color: var(--lg-text); }
.fish-card__price, .menu-card__price { color: var(--color-teal); }
.fish-card__notes, .menu-card__notes, .menu-card__weight, .menu-card__from,
.fish-card__price .per-kg, .menu-card__price .per-kg { color: var(--lg-muted); }
.fish-card__variants { background: var(--glass-bg-2); box-shadow: var(--glass-bevel); border: none; }
.fish-card__variant { color: var(--lg-muted); }
.fish-card__variant.is-active { background: linear-gradient(135deg, var(--color-teal), var(--teal-br)); color: #fff; }
.fish-card__add, .menu-card__add {
  background: linear-gradient(135deg, var(--color-coral), #ff8a5b);
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.35), var(--glass-bevel);
}
.fish-card__add.disabled, .fish-card__add:disabled, .menu-card__add.disabled {
  background: var(--glass-bg-2); box-shadow: var(--glass-bevel); color: var(--lg-muted);
}
.happy-hour-banner, .menu-card__deal { background: linear-gradient(135deg, var(--color-coral), #ff8a5b); box-shadow: var(--glass-bevel); }
.fish-notice, #board-demo-note {
  background: var(--glass-bg); box-shadow: var(--glass-bevel); border: none; color: var(--lg-text);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}

/* ── Status badges: solid status-colour fill (clearly visible over photos) ── */
.fish-card__status {
  background: var(--badge-bg, var(--color-teal));
  color: #fff;
  box-shadow: var(--glass-bevel);
  border: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.fish-card__status .status-dot { background: #fff; }
.fish-card__status--trending    { --badge-bg: linear-gradient(135deg, #e11d48, #fb5d7a); }
.fish-card__status--new         { --badge-bg: linear-gradient(135deg, #2563eb, #4f86f7); }
.fish-card__status--available   { --badge-bg: linear-gradient(135deg, #15a34a, #28c069); }
.fish-card__status--limited     { --badge-bg: linear-gradient(135deg, #d97706, #f59e0b); }
.fish-card__status--unavailable { --badge-bg: linear-gradient(135deg, #6b7280, #8b93a1); }
.fish-card__status--promo       { --badge-bg: linear-gradient(135deg, #ff6b35, #ff8a5b); }
/* live pulse on trending / new / available */
.fish-card__status--trending .status-dot,
.fish-card__status--new .status-dot,
.fish-card__status--available .status-dot { animation: lg-pulse 1.8s ease-in-out infinite; }
@keyframes lg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }

/* ══════════════════════════════════════════════════════════════════════════
   ROBUSTNESS — graceful degradation + focus visibility
   ══════════════════════════════════════════════════════════════════════════ */

/* Where backdrop-filter is unsupported, fall back to a solid-ish glass surface. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="light"] .lg-scene { opacity: 0.5; }
  #site-nav, .fish-card, .menu-card, .species-card, .shop-tabs, .shop-pill, .hero__content,
  .quick-add__card, .cart-modal__window, .lang-panel, #promo-bar, .cart-fab,
  #about .section__inner, #wholesale .section__inner, #vacancies .section__inner,
  #feedback .section__inner, #contact .section__inner, #gallery .section__inner {
    background: color-mix(in srgb, var(--c-glass) 88%, var(--bg2));
  }
  html[data-theme="dark"] #site-nav,
  html[data-theme="dark"] .fish-card,
  html[data-theme="dark"] .menu-card,
  html[data-theme="dark"] .species-card { background: color-mix(in srgb, var(--bg2) 92%, #000); }
}

/* Keyboard focus ring (teal). */
:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.switcher__option:has(input:focus-visible) { outline: 2px solid var(--color-teal); outline-offset: 2px; border-radius: 99em; }
.skip-link { background: var(--color-navy); color: #fff; }

/* Theme native checkboxes / radios */
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-teal); }

/* Keep autofilled inputs on-theme (Chrome forces a white/yellow fill otherwise) */
.cart-field__input:-webkit-autofill,
.cart-field__input:-webkit-autofill:hover,
.cart-field__input:-webkit-autofill:focus,
.feedback-form__field:-webkit-autofill,
.feedback-form__field:-webkit-autofill:hover,
.feedback-form__field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lg-text);
  -webkit-box-shadow: 0 0 0 1000px var(--input-fill) inset;
  caret-color: var(--lg-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — slide-in nav legibility, downward language panel, performance
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Slide-in nav as a theme-aware opaque frosted panel (glassy look, no blur cost) */
  #nav-links { background: var(--glass-solid); box-shadow: var(--glass-bevel); border: none; }
  #nav-links a { color: var(--lg-text); opacity: 0.85; }
  #nav-links a:hover, #nav-links a.active { color: var(--lg-text); opacity: 1; }

  /* language panel opens DOWNWARD here (left-open would cover the logo) */
  .lang-panel {
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    transform-origin: top right;
    transform: scale(0.9) translateY(-6px);
  }
  .lang-panel.is-open { transform: scale(1) translateY(0); }

  /* ── Performance ──
     A moving blurred backdrop makes every glass surface re-sample it each frame,
     and many backdrop-filter layers are costly to composite on phones. Freeze the
     blobs and turn the numerous/large surfaces into opaque frosted glass — the
     bevel + tint keep the "glass" look, the expensive live blur is dropped. */
  .lg-blob { animation: none; filter: blur(55px); }
  #site-nav, #promo-bar,
  .fish-card, .menu-card, .species-card, .gallery-item, .shop-pill,
  .shop-tabs, .shop-view, .shop-search, .shop-sort select, .fish-notice, #board-demo-note,
  #about .section__inner, #wholesale .section__inner, #vacancies .section__inner,
  #feedback .section__inner, #contact .section__inner, #gallery .section__inner {
    background: var(--glass-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Short landscape phones use the same slide-in panel */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  #nav-links { background: var(--glass-solid); box-shadow: var(--glass-bevel); border: none; }
  #nav-links a { color: var(--lg-text); opacity: 0.85; }
  #nav-links a:hover, #nav-links a.active { color: var(--lg-text); opacity: 1; }
}