@charset "UTF-8";
/* ==========================================================================
   Jalall Hot Dog — هات داگ جلال
   Digital menu stylesheet. Mobile-first, bilingual (FA/RTL default, EN/LTR).
   No external requests. Logical properties throughout.
   --------------------------------------------------------------------------
   00 TOKENS
   01 RESET & BASE
   02 ATMOSPHERE (grain / scanlines / vignette)
   03 HERO
   04 CATEGORY NAV
   05 MENU LIST & CATEGORIES
   06 ITEM CARD
   07 MEDIA & PLACEHOLDER STARBURST
   08 PRICE & BADGES
   09 STATES (sold out / ask price)
   10 FOOTER — SHOP INFO
   11 MOTION: reveal, flicker, sheen
   12 BREAKPOINTS 768 / 1100
   13 REDUCED MOTION
   14 PRINT
   ========================================================================== */

/* ==========================================================================
   00 TOKENS
   ========================================================================== */
:root {
  /* Brand palette — binding (SPEC) */
  --brick: #A81E17;
  --brick-deep: #7A140F;
  --cream: #EFE0C6;
  --ink: #1A0B09;
  --neon-pink: #FF2E88;
  --neon-cyan: #25E0E8;
  --neon-amber: #FFB43A;
  --neon-lime: #9CFF4E;
  --paper: #12060A;

  /* Derived surfaces */
  --bg: var(--paper);
  --bg-deep: #0A0306;
  --panel: #1C0C11;
  --panel-2: #2A1219;
  --panel-cream: #F6EBD6;
  --line: rgba(239, 224, 198, 0.16);
  --line-strong: rgba(239, 224, 198, 0.34);
  --muted: rgba(239, 224, 198, 0.62);
  --muted-soft: rgba(239, 224, 198, 0.40);

  /* Type */
  --font-fa: 'Vazirmatn', 'IRANSans', Tahoma, system-ui, sans-serif;
  --font-en: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-display: 'Bebas Neue', 'Oswald', 'Impact', 'Haettenschrift',
                  'Arial Narrow', system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.625rem;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows & glow */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .5);
  --sh-2: 0 6px 18px rgba(0, 0, 0, .45);
  --sh-3: 0 18px 44px rgba(0, 0, 0, .55);
  --glow-pink: 0 0 6px rgba(255, 46, 136, .55), 0 0 18px rgba(255, 46, 136, .30);
  --glow-cyan: 0 0 6px rgba(37, 224, 232, .55), 0 0 18px rgba(37, 224, 232, .28);
  --glow-amber: 0 0 6px rgba(255, 180, 58, .55), 0 0 18px rgba(255, 180, 58, .26);

  /* Layout */
  --wrap: 1120px;
  --gutter: var(--sp-4);
  --nav-h: 3.25rem;

  /* Easing */
  --ease-out: cubic-bezier(.22, .78, .30, 1);
  --ease-soft: cubic-bezier(.35, .06, .18, 1);

  color-scheme: dark;
}

/* ==========================================================================
   01 RESET & BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--nav-h) + var(--sp-4));
}

body.menu {
  margin: 0;
  min-block-size: 100svh;
  font-family: var(--font-fa);
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--cream);
  background-color: var(--bg);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(168, 30, 23, .38) 0%, transparent 62%),
    radial-gradient(90% 60% at 100% 108%, rgba(255, 46, 136, .16) 0%, transparent 60%),
    radial-gradient(80% 55% at 0% 96%, rgba(37, 224, 232, .12) 0%, transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

[dir="ltr"] body.menu { font-family: var(--font-en); }

img { max-inline-size: 100%; display: block; }
button { font: inherit; color: inherit; }

h1, h2, h3, p, ul { margin: 0; }
ul { padding-inline-start: 0; list-style: none; }

a {
  color: var(--neon-cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--neon-amber); }

:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--neon-pink); color: var(--ink); }

/* ==========================================================================
   02 ATMOSPHERE — CRT scanlines, film grain, vignette
   Applied as fixed pseudo-layers on body so nothing in the DOM is invented.
   ========================================================================== */
body.menu::before,
body.menu::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

/* scanlines + grain */
body.menu::before {
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, .045) 0px,
      rgba(255, 255, 255, .045) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-conic-gradient(
      rgba(255, 255, 255, .030) 0% 25%,
      rgba(0, 0, 0, .030) 0% 50%
    );
  background-size: auto, 3px 3px;
  opacity: .5;
  mix-blend-mode: soft-light;
}

/* vignette */
body.menu::after {
  background: radial-gradient(
    120% 85% at 50% 42%,
    transparent 44%,
    rgba(0, 0, 0, .34) 78%,
    rgba(0, 0, 0, .68) 100%
  );
}

/* ==========================================================================
   03 HERO
   ========================================================================== */
.hero {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-7) var(--sp-5);
  padding-inline: var(--gutter);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  border-block-end: 1px solid var(--line);
  background:
    radial-gradient(70% 100% at 50% 0%, rgba(168, 30, 23, .55), transparent 70%);
}

.hero::after {
  content: "";
  position: absolute;
  inset-inline: 12%;
  inset-block-end: -1px;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-amber), transparent);
  box-shadow: var(--glow-pink);
  opacity: .8;
}

.hero__logo {
  inline-size: clamp(88px, 27vw, 128px);
  block-size: auto;
  filter:
    drop-shadow(0 0 10px rgba(255, 46, 136, .45))
    drop-shadow(0 6px 14px rgba(0, 0, 0, .6));
  animation: badge-in .9s var(--ease-out) both;
}

.hero__name {
  font-family: var(--font-fa);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--cream);
  text-shadow:
    0 0 4px rgba(255, 255, 255, .55),
    0 0 12px var(--neon-pink),
    0 0 28px rgba(255, 46, 136, .55),
    0 0 52px rgba(255, 46, 136, .30);
  animation: letters-in .8s .12s var(--ease-out) both, neon-flicker 7s 1.4s infinite;
}

[dir="ltr"] .hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__tagline {
  font-size: var(--fs-sm);
  color: var(--muted);
  letter-spacing: .04em;
  max-inline-size: 30ch;
  animation: letters-in .8s .26s var(--ease-out) both;
}

.hero__lang {
  --_c: var(--neon-cyan);
  margin-block-start: var(--sp-2);
  padding-block: .4rem;
  padding-inline: var(--sp-4);
  border: 1px solid var(--_c);
  border-radius: var(--r-pill);
  background: rgba(37, 224, 232, .07);
  color: var(--_c);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--glow-cyan), inset 0 0 10px rgba(37, 224, 232, .12);
  transition: transform .25s var(--ease-out), background-color .25s, color .25s;
  animation: letters-in .8s .38s var(--ease-out) both;
}
.hero__lang:hover,
.hero__lang:focus-visible {
  background: var(--neon-cyan);
  color: var(--ink);
  transform: translateY(-2px);
}
.hero__lang:active { transform: translateY(0) scale(.97); }

/* ==========================================================================
   04 CATEGORY NAV (sticky, condenses on scroll)
   ========================================================================== */
.catnav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding-block: var(--sp-3);
  padding-inline: var(--gutter);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(10, 3, 6, .92), rgba(10, 3, 6, .72));
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border-block-end: 1px solid transparent;
  transition: padding .3s var(--ease-out), background-color .3s, border-color .3s;
}
.catnav::-webkit-scrollbar { display: none; }

.catnav--stuck {
  padding-block: var(--sp-2);
  background: rgba(8, 2, 5, .96);
  border-block-end-color: var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.catnav--stuck .catnav__chip {
  padding-block: .32rem;
  font-size: var(--fs-xs);
}

.catnav__chip {
  position: relative;
  flex: 0 0 auto;
  padding-block: .5rem;
  padding-inline: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(239, 224, 198, .05);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    background-color .3s var(--ease-out),
    box-shadow .3s var(--ease-out),
    transform .22s var(--ease-out);
}

/* animated gradient sheen */
.catnav__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, .22) 48%,
    transparent 66%
  );
  background-size: 260% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity .3s;
}

.catnav__chip:hover {
  color: var(--cream);
  border-color: var(--neon-amber);
  transform: translateY(-1px);
}

.catnav__chip.is-active,
.catnav__chip[aria-selected="true"],
.catnav__chip[aria-current="true"] {
  color: var(--ink);
  border-color: transparent;
  background-image: linear-gradient(100deg, var(--neon-amber), var(--neon-pink));
  box-shadow: var(--glow-pink), inset 0 1px 0 rgba(255, 255, 255, .45);
  transform: translateY(-1px) scale(1.02);
}
.catnav__chip.is-active::before,
.catnav__chip[aria-selected="true"]::before {
  opacity: 1;
  animation: chip-sheen 2.8s linear infinite;
}

/* ==========================================================================
   05 MENU LIST & CATEGORY SECTIONS
   ========================================================================== */
.menu-list {
  position: relative;
  z-index: 1;
  inline-size: min(100%, var(--wrap));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--sp-6) var(--sp-8);
  display: grid;
  gap: var(--sp-7);
}

.cat { scroll-margin-block-start: calc(var(--nav-h) + var(--sp-4)); }

.cat__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow: 0 0 10px rgba(255, 180, 58, .35), 0 2px 0 rgba(0, 0, 0, .5);
}
[dir="ltr"] .cat__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.cat__title::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--neon-amber);
  box-shadow: var(--glow-amber);
}
.cat__title::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: linear-gradient(
    to var(--_dir, left),
    var(--line-strong),
    transparent
  );
}
[dir="ltr"] .cat__title::after { --_dir: right; }

.cat__items {
  display: grid;
  gap: var(--sp-3);
}

/* ==========================================================================
   06 ITEM CARD
   ========================================================================== */
.item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(42, 18, 25, .92), rgba(18, 6, 10, .92));
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(239, 224, 198, .06);
  overflow: hidden;
  /* entrance pre-state */
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition:
    opacity .62s var(--ease-out),
    transform .62s var(--ease-out),
    filter .62s var(--ease-out),
    border-color .3s,
    box-shadow .3s;
}

/* glowing tube edge */
.item::before {
  content: "";
  position: absolute;
  inset-block: var(--sp-3);
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--neon-pink), var(--neon-amber));
  box-shadow: var(--glow-pink);
  opacity: .85;
}

.item.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* stagger — driven purely by CSS so JS only toggles .is-in */
.cat__items .item:nth-child(1)  { transition-delay: .00s; }
.cat__items .item:nth-child(2)  { transition-delay: .05s; }
.cat__items .item:nth-child(3)  { transition-delay: .10s; }
.cat__items .item:nth-child(4)  { transition-delay: .15s; }
.cat__items .item:nth-child(5)  { transition-delay: .20s; }
.cat__items .item:nth-child(6)  { transition-delay: .25s; }
.cat__items .item:nth-child(7)  { transition-delay: .30s; }
.cat__items .item:nth-child(n+8){ transition-delay: .35s; }

.item:hover {
  border-color: rgba(255, 180, 58, .45);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 180, 58, .18);
}

.item__body {
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  min-inline-size: 0;
  padding-inline-end: var(--sp-1);
}

.item__name {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.35;
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  overflow-wrap: anywhere;
}
[dir="ltr"] .item__name { letter-spacing: .005em; }

.item__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
}

/* ==========================================================================
   07 MEDIA & ILLUSTRATED PLACEHOLDER
   ========================================================================== */
.item__media {
  position: relative;
  inline-size: 84px;
  block-size: 84px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--panel-2);
  box-shadow:
    inset 0 0 0 1px rgba(239, 224, 198, .14),
    0 4px 12px rgba(0, 0, 0, .45);
}

.item__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out), filter .4s;
}
.item:hover .item__img { transform: scale(1.06); }

/* Retro starburst tile — pure CSS, no emoji, no image request */
.item__ph {
  inline-size: 100%;
  block-size: 100%;
  border-radius: inherit;
  background-color: var(--brick-deep);
  background-image:
    /* 8-point starburst rays */
    repeating-conic-gradient(
      from 22.5deg at 50% 50%,
      rgba(239, 224, 198, .20) 0deg 22.5deg,
      transparent 22.5deg 45deg
    ),
    /* centre medallion */
    radial-gradient(circle at 50% 50%,
      var(--cream) 0 14%,
      var(--brick) 14% 20%,
      transparent 20%),
    /* halo ring */
    radial-gradient(circle at 50% 50%,
      transparent 0 30%,
      rgba(255, 180, 58, .34) 30% 33%,
      transparent 33%),
    /* diner check corners */
    linear-gradient(135deg, rgba(0, 0, 0, .35), transparent 55%),
    linear-gradient(180deg, var(--brick) 0%, var(--brick-deep) 100%);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .55);
}

/* ==========================================================================
   08 PRICE & BADGES
   ========================================================================== */
.item__price {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding-block: .18rem;
  padding-inline: .6rem;
  border: 1px solid rgba(37, 224, 232, .42);
  border-radius: var(--r-sm);
  background: rgba(37, 224, 232, .08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* No animation here on purpose: prices must never flicker. */
}

.item__price-num {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.3;
  color: #EAFEFF;
  text-shadow: 0 0 8px rgba(37, 224, 232, .55);
}
[dir="ltr"] .item__price-num { font-family: var(--font-display); letter-spacing: .04em; }

.item__price-cur {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .03em;
}

.item__badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-block: .16rem;
  padding-inline: .55rem;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--neon-amber);
  background: rgba(255, 180, 58, .10);
}

.item__badge--ask,
.item__badge[data-kind="ask-price"] {
  color: var(--neon-amber);
  background: rgba(255, 180, 58, .12);
  box-shadow: 0 0 10px rgba(255, 180, 58, .22);
}

.item__badge--sold,
.item__badge[data-kind="sold-out"] {
  color: var(--neon-pink);
  background: rgba(255, 46, 136, .14);
  box-shadow: 0 0 10px rgba(255, 46, 136, .25);
}

/* Badge is only meaningful on flagged items; hide by default. */
.item[data-available="1"] .item__badge--sold,
.item[data-available="1"] .item__badge[data-kind="sold-out"] { display: none; }

/* ==========================================================================
   09 STATES — sold out
   ========================================================================== */
.item[data-available="0"] {
  filter: grayscale(.72);
  opacity: .62;
  border-color: rgba(239, 224, 198, .10);
  box-shadow: none;
}
.item[data-available="0"]::before {
  background: linear-gradient(180deg, var(--muted-soft), transparent);
  box-shadow: none;
  opacity: .5;
}
.item[data-available="0"]:hover { border-color: rgba(239, 224, 198, .14); }

/* diagonal muted overlay */
.item[data-available="0"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(239, 224, 198, .09) 0 8px,
    transparent 8px 18px
  );
}

.item[data-available="0"] .item__price { opacity: .55; }

.item[data-available="0"] .item__badge--sold,
.item[data-available="0"] .item__badge[data-kind="sold-out"] {
  display: inline-flex;
  opacity: 1;
  filter: none;
}

/* ==========================================================================
   10 FOOTER — SHOP INFO
   ========================================================================== */
.shop-info {
  position: relative;
  z-index: 1;
  margin-block-start: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-7);
  padding-inline: var(--gutter);
  border-block-start: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 50% 120%, rgba(168, 30, 23, .40), transparent 68%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, .45));
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.shop-info > * {
  inline-size: min(100%, var(--wrap));
  margin-inline: auto;
}

.shop__addr,
.shop__phone,
.shop__hours {
  max-inline-size: 42ch;
  line-height: 1.75;
}

.shop__addr { color: var(--cream); font-weight: 600; }

.shop__phone a,
.shop__phone {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.shop__phone a {
  color: var(--neon-amber);
  text-decoration: none;
  text-shadow: var(--glow-amber);
}

.shop__hours { color: var(--muted-soft); }

.shop__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.shop__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: .35rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  transition: border-color .3s, color .3s, box-shadow .3s, transform .25s var(--ease-out);
}
.shop__social a:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

.shop__qr {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--panel-cream);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 700;
  box-shadow: var(--sh-2), 0 0 0 1px rgba(0, 0, 0, .25);
  inline-size: auto;
  max-inline-size: 190px;
}
.shop__qr img,
.shop__qr svg {
  inline-size: 130px;
  block-size: 130px;
}

/* ==========================================================================
   11 MOTION
   ========================================================================== */
@keyframes badge-in {
  from { opacity: 0; transform: scale(.7) rotate(-14deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

@keyframes letters-in {
  from { opacity: 0; transform: translateY(14px); letter-spacing: .28em; filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Hero name only — never prices. */
@keyframes neon-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%  { opacity: .58; }
  94%  { opacity: 1; }
  95%  { opacity: .42; }
  96%  { opacity: .96; }
  97%  { opacity: .66; }
  98%  { opacity: 1; }
}

@keyframes chip-sheen {
  from { background-position: 120% 0; }
  to   { background-position: -60% 0; }
}

/* ==========================================================================
   12 BREAKPOINTS
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --gutter: var(--sp-5);
    --fs-2xl: 2.25rem;
    --fs-3xl: 3.4rem;
  }

  .hero { padding-block: var(--sp-8) var(--sp-6); }
  .hero__logo { inline-size: 148px; }

  .catnav { justify-content: center; padding-inline: var(--sp-5); }

  .cat__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .item { padding: var(--sp-4); gap: var(--sp-4); }
  .item__media { inline-size: 104px; block-size: 104px; }

  .shop-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: start;
    text-align: start;
    align-items: start;
    padding-block: var(--sp-7);
  }
  .shop-info > * { margin-inline: 0; }
  .shop__qr { justify-self: end; grid-row: span 3; }
  .shop__social { justify-content: flex-start; }
}

@media (min-width: 1100px) {
  :root { --fs-3xl: 4.25rem; }

  .menu-list { padding-block: var(--sp-7) var(--sp-8); gap: var(--sp-8); }

  .cat__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .item {
    grid-template-columns: 1fr;
    align-content: start;
  }
  .item__media {
    inline-size: 100%;
    /* Square at any column width — no hardcoded height. */
    block-size: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--r-sm);
  }
  /* Fallback for engines without aspect-ratio: keep a sane square-ish box. */
  @supports not (aspect-ratio: 1 / 1) {
    .item__media { block-size: 240px; }
  }
  .item::before { inset-block: auto var(--sp-3); }

  .shop-info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shop__qr { grid-row: auto; }
}

@media (hover: none) {
  .item:hover { box-shadow: var(--sh-2); border-color: var(--line); }
  .item:hover .item__img { transform: none; }
}

/* ==========================================================================
   13 REDUCED MOTION — everything lands in its final state
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .item,
  .hero__logo,
  .hero__name,
  .hero__tagline,
  .hero__lang {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    letter-spacing: normal;
  }

  .item[data-available="0"] {
    opacity: .62 !important;
    filter: grayscale(.72) !important;
  }

  .catnav__chip.is-active,
  .catnav__chip[aria-selected="true"] { transform: none !important; }

  .catnav__chip::before { opacity: 0 !important; }
}

/* ==========================================================================
   14 PRINT
   ========================================================================== */
@media print {
  body.menu {
    background: #fff !important;
    color: #000;
    font-size: 11pt;
  }
  body.menu::before,
  body.menu::after { display: none !important; }

  .hero {
    padding-block: 0 8pt;
    background: none;
    border-block-end: 1pt solid #000;
  }
  .hero::after { display: none; }
  .hero__name,
  .cat__title,
  .item__name,
  .item__price-num { color: #000; text-shadow: none; }
  .hero__logo { inline-size: 70px; filter: none; }
  .hero__lang { display: none; }

  .catnav { display: none; }

  .menu-list { padding: 0; gap: 12pt; display: block; }
  .cat { break-inside: avoid; margin-block-end: 12pt; }
  .cat__title::before { background: #000; box-shadow: none; }
  .cat__items { display: block; }

  .item {
    break-inside: avoid;
    display: flex;
    justify-content: space-between;
    gap: 8pt;
    padding: 4pt 0;
    border: 0;
    border-block-end: .5pt dotted #999;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .item::before,
  .item::after { display: none !important; }
  .item__media { display: none; }
  .item__desc { color: #444; -webkit-line-clamp: 2; line-clamp: 2; }
  .item__price {
    border: 0;
    background: none;
    padding: 0;
  }
  .item__price-num { text-shadow: none; }
  .item__badge { border-color: #000; color: #000; background: none; box-shadow: none; }

  .shop-info {
    display: block;
    background: none;
    border-block-start: 1pt solid #000;
    color: #000;
    padding-inline: 0;
  }
  .shop__social { display: none; }
  .shop__qr { box-shadow: none; background: none; }
}

/* ==========================================================================
   15 MANAGER PATCH — illustrated placeholders + offline notice
   ========================================================================== */

/* The retro SVG tiles ship in assets/img/. They replace the pure-CSS
   starburst when present; the CSS art above remains the fallback layer
   underneath, so a missing file degrades to a handsome tile, not a gap. */
.item__ph[data-ph="dog"],
.item__ph[data-ph="fries"] {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.item__ph[data-ph="dog"]   { background-image: url("img/placeholder-dog.svg"); }
.item__ph[data-ph="fries"] { background-image: url("img/placeholder-fries.svg"); }

/* Price patched by the silent refresh — brief cyan pulse, motion-safe. */
.item__price.is-updated { animation: pricePulse 1.1s var(--ease-out) 1; }
@keyframes pricePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 224, 232, 0); }
  35%      { box-shadow: 0 0 14px 2px rgba(37, 224, 232, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .item__price.is-updated { animation: none; }
}

/* Sold-out must survive the reveal animation. `.item.is-in` sets filter/opacity
   at equal specificity but later in the file, so it was winning; these
   qualified selectors restore the sold-out treatment after reveal. */
.item.is-in[data-available="0"],
.item[data-available="0"] {
  filter: grayscale(.72);
  opacity: .62;
}
.item.is-in[data-available="0"] .item__price { opacity: .55; }

/* ==========================================================================
   16 LIGHTBOX — click-to-enlarge photo overlay
   Markup is injected by app.js; this section only styles it.
   Stacking: .catnav is 40, body atmosphere layers are 60 → lightbox sits at 80.
   ========================================================================== */

/* Affordance: photos are zoomable, CSS-art placeholders are not. */
.item__img { cursor: zoom-in; }
.item__img:hover { filter: brightness(1.08) saturate(1.06); }
.item__ph { cursor: default; }

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  /* Solid fallback first, blur only where supported. */
  background: rgba(6, 2, 4, .92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s var(--ease-out), visibility 0s linear .26s;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lightbox {
    background: rgba(6, 2, 4, .74);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
  }
}

.lightbox[hidden] { display: none; }

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .26s var(--ease-out), visibility 0s;
}

.lightbox__figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  transform: scale(.94);
  opacity: 0;
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
}
.lightbox.is-open .lightbox__figure {
  transform: none;
  opacity: 1;
}

.lightbox__img {
  max-inline-size: min(92vw, 900px);
  max-block-size: 82vh;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  background: var(--panel-2);
  box-shadow:
    0 0 0 1px rgba(255, 46, 136, .55),
    var(--glow-pink),
    0 0 44px rgba(255, 46, 136, .22),
    var(--sh-3);
}

.lightbox__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  max-inline-size: min(92vw, 900px);
  text-align: center;
}

.lightbox__name {
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.35;
  color: var(--cream);
  text-shadow: 0 0 10px rgba(255, 180, 58, .35), 0 1px 0 rgba(0, 0, 0, .55);
  overflow-wrap: anywhere;
}
[dir="ltr"] .lightbox__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Same cyan tube chip as .item__price */
.lightbox__price {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding-block: .18rem;
  padding-inline: .6rem;
  border: 1px solid rgba(37, 224, 232, .42);
  border-radius: var(--r-sm);
  background: rgba(37, 224, 232, .08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: var(--fs-md);
  font-weight: 800;
  color: #EAFEFF;
  text-shadow: 0 0 8px rgba(37, 224, 232, .55);
}

.lightbox__close {
  position: absolute;
  inset-block-start: var(--sp-4);
  inset-inline-end: var(--sp-4);
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(239, 224, 198, .06);
  color: var(--cream);
  cursor: pointer;
  transition: color .25s, border-color .25s, box-shadow .25s, transform .22s var(--ease-out);
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
  transform: scale(1.06);
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 20px;
  block-size: 2px;
  margin-block-start: -1px;
  margin-inline-start: -10px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after  { transform: rotate(-45deg); }

@media (min-width: 768px) {
  .lightbox__close {
    inset-block-start: var(--sp-5);
    inset-inline-end: var(--sp-5);
  }
}

@media (hover: none) {
  .item__img:hover { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__figure {
    transition: none !important;
    transform: none !important;
  }
  .lightbox.is-open .lightbox__figure { opacity: 1; }
  .lightbox__close:hover,
  .lightbox__close:focus-visible { transform: none !important; }
}

@media print {
  .lightbox { display: none !important; }
  body.lightbox-open { overflow: visible !important; }
}

/* ==========================================================================
   17 BILLBOARD HERO, DINER CHECKER BAND & CHARACTER ART
   The hero is now the billboard plaque (billboard-fa/-en.svg), which already
   contains the wordmark and the "FOOD FOR LEGENDS" line — so .hero__name is
   screen-reader-only and .hero__tagline no longer exists. The QR block is gone
   entirely; its old rules below are neutralised rather than deleted in place.
   ========================================================================== */

.u-sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --- the plaque ---------------------------------------------------------- */
.hero__billboard {
  display: block;
  inline-size: min(78vw, 300px);
  block-size: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 0 22px rgba(255, 46, 136, .30))
    drop-shadow(0 10px 26px rgba(0, 0, 0, .55));
  animation: billboardIn 900ms var(--ease-out) both;
}
@keyframes billboardIn {
  from { opacity: 0; transform: translateY(14px) scale(.95); filter: blur(6px); }
  to   { opacity: 1; transform: none; }
}
/* The neon sign "warms up" — a slow, subtle breathing glow, never a strobe. */
.hero__billboard { animation-name: billboardIn, billboardGlow; animation-duration: 900ms, 5.5s; animation-delay: 0s, 900ms; animation-iteration-count: 1, infinite; }
@keyframes billboardGlow {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(255, 46, 136, .24)) drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
  50%      { filter: drop-shadow(0 0 34px rgba(255, 46, 136, .42)) drop-shadow(0 10px 26px rgba(0,0,0,.55)); }
}

/* --- paw prints drifting behind the plaque ------------------------------- */
.hero__paws {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("img/theme-2.svg"), url("img/theme-2.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: 92px, 62px;
  background-position: 8% 18%, 88% 72%;
  opacity: .22;
  filter: saturate(1.2);
}

/* --- diner checkerboard band under the hero ------------------------------ */
.checker-band {
  /* theme.svg is a cat-face border strip above a diner checkerboard; the band
     must be tall enough for both rows to read, or it turns into noise. */
  block-size: 58px;
  background-image: url("img/theme.svg");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: auto 100%;
  opacity: .9;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(239, 224, 198, .18);
}

/* --- the cat, greeting from the footer ----------------------------------- */
.shop__cat {
  display: block;
  inline-size: min(52vw, 190px);
  block-size: auto;
  margin-inline: auto;
  margin-block-start: var(--sp-5);
  opacity: .9;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5));
}

/* --- QR removed: neutralise any leftover rules --------------------------- */
.shop__qr { display: none !important; }

@media (min-width: 768px) {
  .hero__billboard { inline-size: min(52vw, 360px); }
  .checker-band    { block-size: 72px; }
  .hero__paws      { background-size: 130px, 86px; }
  .shop__cat       { grid-column: 1 / -1; inline-size: 210px; }
}
@media (min-width: 1100px) {
  .hero__billboard { inline-size: 400px; }
  .shop__cat       { inline-size: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__billboard { animation: none !important; filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); }
}
@media print {
  .checker-band, .hero__paws, .shop__cat { display: none; }
  .hero__billboard { filter: none; animation: none; inline-size: 180px; }
}