/* ==========================================================================
   BRAMA — стилі
   Кольори з брендбуку (assets/brand/svg): бежевий/коричневий/чорний
   ========================================================================== */

:root {
  --color-cream: #f6efe4;
  --color-cream-alt: #efe1d0;
  --color-card: #fbf6ee;
  --color-brown: #68483e;
  --color-brown-dark: #473026;
  --color-ink: #1b1613;
  --color-ink-soft: #26201c;
  --color-text: #382a23;
  --color-text-muted: #8a7264;
  --color-on-dark: #f6efe4;
  --color-on-dark-muted: #cbb9a8;
  --color-border: #ddc9b1;
  --color-border-dark: #3c332c;

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --max-width: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Фонова текстура — цегляна кладка в перев'язку (running bond), а не
     стерильна квадратна сітка: перегукується з реальними цегляними
     склепіннями кав'ярні. Малюнок цегли 72×56, шви зміщені через ряд. */
  --grid-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='56'%3E%3Cg fill='none' stroke='%23f6efe4' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M0 .5h72M0 28.5h72M36 1v27M0 29v27M72 29v27'/%3E%3C/g%3E%3C/svg%3E");
  --grid-size: 72px 56px;
}

* {
  box-sizing: border-box;
}

/* Атрибут hidden має завжди ховати елемент. Без цього правила наші
   власні display: grid/flex перебивали браузерне [hidden]{display:none},
   і, наприклад, форма оформлення лишалась на екрані після успішного
   замовлення. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-brown-dark);
  margin: 0 0 0.4em;
}

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark .eyebrow {
  color: var(--color-on-dark);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-brown);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Статус-індикатор (пульсуюча крапка) — напр. "відкрито зараз" */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}

.status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fbf7f;
  box-shadow: 0 0 0 0 rgba(127, 191, 127, 0.6);
  animation: status-pulse 2s infinite;
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 191, 127, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(127, 191, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 191, 127, 0); }
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-brown);
  color: var(--color-brown-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease);
}

.btn:hover::before {
  left: 120%;
}

.btn:hover {
  background: var(--color-brown);
  color: var(--color-cream);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(104, 72, 62, 0.35);
}

.btn--solid {
  background: var(--color-brown);
  color: var(--color-cream);
}

/* Наведення: кнопка лишається темною й помітною на будь-якому фоні —
   трохи світлішає, піднімається й відкидає тінь (раніше ставала
   кремовою і зливалася зі світлим фоном) */
.btn--solid:hover {
  background: #7d5748;
  border-color: #7d5748;
  color: var(--color-cream);
  box-shadow: 0 12px 28px -8px rgba(71, 48, 38, 0.55);
}

.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
  transition-duration: 0.08s;
}

.btn:focus-visible {
  outline: 3px solid rgba(104, 72, 62, 0.45);
  outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn:disabled::before {
  display: none;
}

/* На темних блоках — світла обводка при наведенні, щоб теж було видно */
.page-hero .btn--solid:hover,
.hero .btn--solid:hover,
.mn-hero .btn--solid:hover {
  box-shadow: 0 0 0 1px rgba(246, 239, 228, 0.35), 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}

.btn--ghost-dark {
  border-color: rgba(246, 239, 228, 0.4);
  color: var(--color-on-dark);
}

.btn--ghost-dark:hover {
  background: var(--color-on-dark);
  color: var(--color-ink);
  box-shadow: 0 10px 30px rgba(246, 239, 228, 0.2);
}

/* Scroll reveal ------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  /* Затримку задає --reveal-delay: для статичної розмітки — правилами
     нижче, для динамічних карток меню — скриптом при створенні */
  transition:
    opacity 0.65s var(--ease) var(--reveal-delay, 0s),
    transform 0.65s var(--ease) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Хвиля появи для карток у сітках — кожна наступна трохи пізніше */
.menu-grid > .reveal:nth-child(2), .explore-grid > .reveal:nth-child(2),
.merch > .reveal:nth-child(2) { --reveal-delay: 0.07s; }
.menu-grid > .reveal:nth-child(3), .explore-grid > .reveal:nth-child(3),
.merch > .reveal:nth-child(3) { --reveal-delay: 0.14s; }
.menu-grid > .reveal:nth-child(4), .explore-grid > .reveal:nth-child(4),
.merch > .reveal:nth-child(4) { --reveal-delay: 0.21s; }
.menu-grid > .reveal:nth-child(5), .explore-grid > .reveal:nth-child(5),
.merch > .reveal:nth-child(5) { --reveal-delay: 0.28s; }
.menu-grid > .reveal:nth-child(6), .merch > .reveal:nth-child(6) { --reveal-delay: 0.35s; }

/* Заголовок категорії виїжджає збоку — відрізняється від карток,
   тож перехід між блоками меню читається краще */
.menu-category__head.reveal {
  transform: translateX(-22px);
}

.menu-category__head.reveal.is-visible {
  transform: translateX(0);
}

/* Header --------------------------------------------------------------- */

/* Шапка однакова на всіх сторінках і не змінює кольори при скролі.
   Раніше вона перемикалася з прозорої на світлу (і лого з білого на
   темне) — це виглядало смиканим і по-різному на кожній сторінці. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 16px 0;
  background: rgba(27, 22, 19, 0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246, 239, 228, 0.1);
  transition: box-shadow 0.35s var(--ease), background 0.35s var(--ease),
    transform 0.35s var(--ease);
}

/* Гортаємо вниз — шапка ховається й не закриває контент;
   гортаємо вгору — з'являється знову */
.site-header.is-hidden {
  transform: translateY(-100%);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* Єдина зміна при скролі — м'яка тінь, яка відділяє шапку від контенту.
   Кольори лишаються ті самі. */
.site-header.scrolled {
  background: #1b1613;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  height: 30px;
}

.site-header .logo-light {
  height: 30px;
  width: auto;
  transition: transform 0.3s var(--ease);
}

/* Темний варіант лого не потрібен — шапка завжди темна */
.site-header .logo-dark {
  display: none;
}

.logo:hover .logo-light {
  transform: scale(1.04);
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-dark-muted);
  position: relative;
  transition: color 0.25s var(--ease);
}

.nav-links a:hover {
  color: var(--color-on-dark);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 1.5px;
  background: var(--color-on-dark);
  transition: width 0.25s var(--ease);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  width: 100%;
}

.nav-links a.is-active {
  color: var(--color-on-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-on-dark);
  cursor: pointer;
}

/* Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #2f251f 0%, var(--color-ink) 55%, #120e0c 100%),
    var(--grid-line);
  background-size: 100% 100%, var(--grid-size);
  color: var(--color-on-dark);
  overflow: hidden;
  padding-top: 90px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, transparent 0%, var(--color-ink) 72%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 24px 60px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero .eyebrow {
  color: var(--color-on-dark-muted);
  justify-content: center;
}

.hero__logo-wrap {
  position: relative;
  display: block;
  width: min(80vw, 460px);
  margin: 26px auto 0;
}

.hero__logo-wrap::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: radial-gradient(circle, rgba(104, 72, 62, 0.55), transparent 65%);
  filter: blur(32px);
  z-index: -1;
  opacity: 0.25;
  animation: logo-glow 3.4s ease-in-out 1.6s infinite alternate;
}

.hero__logo {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.hero__logo--draw path {
  fill: var(--color-on-dark);
  stroke: var(--color-on-dark);
  stroke-width: 1.1;
  fill-opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    logo-draw-stroke 1.3s var(--ease) forwards calc(var(--i) * 0.09s),
    logo-draw-fill 0.5s ease forwards calc(1.1s + var(--i) * 0.09s);
}

@keyframes logo-draw-stroke {
  to { stroke-dashoffset: 0; }
}

@keyframes logo-draw-fill {
  to { fill-opacity: 1; }
}

@keyframes logo-glow {
  from { opacity: 0.2; transform: scale(0.96); }
  to { opacity: 0.5; transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__logo--draw path {
    animation: none;
    fill-opacity: 1;
    stroke-dashoffset: 0;
  }
  .hero__logo-wrap::before {
    animation: none;
    opacity: 0.35;
  }
}

.hero p.tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.01em;
  color: var(--color-on-dark-muted);
  max-width: 480px;
  margin: 26px auto 36px;
}

.hero .status-dot {
  justify-content: center;
  margin-bottom: 36px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Кутові засічки — технічна рамка навколо hero, як у видошукачі камери */
.hero__corner {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(246, 239, 228, 0.25);
  z-index: 3;
}

.hero__corner--tl {
  top: 28px;
  left: 24px;
  border-right: none;
  border-bottom: none;
}

.hero__corner--tr {
  top: 28px;
  right: 24px;
  border-left: none;
  border-bottom: none;
}

.hero__corner--bl {
  bottom: 28px;
  left: 24px;
  border-right: none;
  border-top: none;
}

.hero__corner--br {
  bottom: 28px;
  right: 24px;
  border-left: none;
  border-top: none;
}

@media (max-width: 720px) {
  .hero__corner {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Section shared --------------------------------------------------------- */

section {
  padding: 100px 0;
}

section.alt {
  background: var(--color-cream-alt);
}

/* Темна секція (напр. блок мерчу) — без цегляної текстури: фото товарів
   на візерунку виглядають строкато, чистий фон дає їм дихати */
section.dark {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}

/* About ------------------------------------------------------------------ */

.about {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.about h2 {
  font-size: clamp(2rem, 4vw, 2.6rem);
}

.about p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  margin-top: 32px;
}

.about__stats strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-brown-dark);
}

.about__stats span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.about__visual {
  position: relative;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(104, 72, 62, 0.35), transparent 55%),
    repeating-linear-gradient(135deg, #e7d5bd 0 2px, transparent 2px 40px),
    linear-gradient(160deg, #e9d9c4, #d8bfa0);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

.about__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__visual .mark {
  width: 30%;
  opacity: 0.5;
}

.about__visual figcaption {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-brown-dark);
  background: rgba(251, 246, 238, 0.85);
  padding: 8px 14px;
  border-radius: 999px;
  text-align: center;
}

/* Menu --------------------------------------------------------------- */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  counter-reset: card-index;
}

.menu-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 38px 26px 30px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.menu-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-brown);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.menu-card:hover::before {
  transform: scaleX(1);
}

.menu-card {
  counter-increment: card-index;
}

.menu-card::after {
  content: "0" counter(card-index);
  position: absolute;
  top: 16px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  opacity: 0.6;
}

.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(71, 48, 38, 0.14);
  border-color: var(--color-brown);
}

.menu-card__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-brown);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.menu-card:hover .menu-card__icon {
  background: var(--color-brown);
  border-color: var(--color-brown);
  color: var(--color-cream);
}

.menu-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.menu-card p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.menu-teaser {
  text-align: center;
  max-width: 640px;
}

.menu-teaser .eyebrow {
  justify-content: center;
}

.menu-teaser p {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  margin-bottom: 30px;
}

/* Блок «Досліджуй» на головній ----------------------------------------- */

/* Рівна сітка з компактних карток. Раніше «Меню» займало 2x2 і
   всередині зяяла порожнеча — блок виглядав незібраним. Тепер усі
   картки однакові, а акцент на меню тримається кольором, не розміром. */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  counter-reset: card-index;
}

.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Ледь помітна тепла фактура — картка «дихає», а не виглядає
     плоскою плашкою */
  background:
    radial-gradient(ellipse 120% 90% at 100% 0%, rgba(221, 201, 177, 0.35), transparent 55%),
    var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

/* Тепле світло розходиться з-за іконки при наведенні — картка «оживає» */
.link-card::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(
    circle,
    rgba(104, 72, 62, 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  z-index: -1;
}

.link-card:hover::after {
  opacity: 1;
  transform: translate(12%, 8%);
}

.link-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-brown);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.link-card:hover::before {
  transform: scaleX(1);
}

.link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(71, 48, 38, 0.16);
  border-color: var(--color-brown);
}



.link-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-alt);
  border: 1px solid var(--color-border);
  color: var(--color-brown);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    transform 0.4s var(--ease), border-color 0.35s var(--ease);
}

.link-card__icon svg {
  width: 21px;
  height: 21px;
}

.link-card:hover .link-card__icon {
  background: var(--color-brown);
  border-color: var(--color-brown);
  color: var(--color-cream);
  transform: translateY(-3px) rotate(-4deg);
}

.link-card h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.link-card p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 16px;
  flex: 1;
}

.link-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-brown);
  transition: gap 0.3s var(--ease);
}

.link-card:hover .link-card__arrow {
  gap: 13px;
}

/* Головна картка — темна, з аркою: контраст веде око саме до меню */
.link-card--feature {
  /* Без span: та сама висота, що й у сусідів. Виділяємо темним фоном */
  padding: 22px 20px;
  /* Фактура старої цегляної стіни + тепле світло згори зліва, ніби
     промінь з вікна підвалу — те, що бачить гість у самій кав'ярні */
  background:
    radial-gradient(ellipse 70% 90% at 12% -5%, rgba(196, 142, 96, 0.28), transparent 60%),
    var(--grid-line),
    linear-gradient(155deg, #2b211a 0%, var(--color-ink) 55%, #14100d 100%);
  background-size: 100% 100%, var(--grid-size), 100% 100%;
  border-color: var(--color-border-dark);
  color: var(--color-on-dark);
}

/* Арка проступає у правому куті — мотив бренду замість порожнечі */
.link-card--feature .link-card__bg {
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 150px;
  height: auto;
  opacity: 0.09;
  z-index: -1;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.link-card--feature:hover .link-card__bg {
  transform: translateY(-10px) scale(1.05);
  opacity: 0.14;
}

.link-card--feature::after {
  background: radial-gradient(
    circle,
    rgba(196, 142, 96, 0.22),
    transparent 70%
  );
}

.link-card--feature::before {
  background: var(--color-on-dark);
}

.link-card--feature:hover {
  border-color: rgba(246, 239, 228, 0.35);
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.4);
}


.link-card--feature .link-card__icon {
  background: rgba(246, 239, 228, 0.1);
  border-color: rgba(246, 239, 228, 0.22);
  color: var(--color-on-dark);
}

.link-card--feature:hover .link-card__icon {
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-ink);
}

.link-card--feature h3 {
  color: var(--color-on-dark);
}

.link-card--feature p {
  color: var(--color-on-dark-muted);
}

.link-card--feature .link-card__arrow {
  color: var(--color-on-dark);
}

@media (max-width: 1000px) {
  .explore-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .explore-grid {
    grid-template-columns: 1fr;
  }
}

/* Menu page hero --------------------------------------------------------- */

.page-hero {
  position: relative;
  background:
    radial-gradient(ellipse 90% 120% at 50% 0%, rgba(104, 72, 62, 0.5), transparent 60%),
    var(--grid-line),
    var(--color-ink);
  background-size: 100% 100%, var(--grid-size);
  color: var(--color-on-dark);
  padding: 170px 0 90px;
  text-align: center;
  overflow: hidden;
}

/* Тематичний малюнок банера — свій для кожної сторінки.
   Промальовується контуром, як лого на головній. */
.page-hero__art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(52vw, 340px);
  transform: translate(-50%, -48%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.page-hero__art path,
.page-hero__art circle {
  fill: none;
  stroke: var(--color-on-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.13;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: art-draw 1.6s var(--ease) forwards;
}

/* Лінії проступають одна за одною — ефект живого креслення */
.page-hero__art > *:nth-child(1) { animation-delay: 0.1s; }
.page-hero__art > *:nth-child(2) { animation-delay: 0.25s; }
.page-hero__art > *:nth-child(3) { animation-delay: 0.4s; }
.page-hero__art > *:nth-child(4) { animation-delay: 0.55s; }
.page-hero__art > *:nth-child(5) { animation-delay: 0.7s; }
.page-hero__art > *:nth-child(6) { animation-delay: 0.85s; }
.page-hero__art > *:nth-child(7) { animation-delay: 1s; }

@keyframes art-draw {
  to { stroke-dashoffset: 0; }
}

/* Пара над чашкою / деталі, що ледь колишуться після промальовування */
.page-hero__art .hero-art__steam {
  animation:
    art-draw 1.6s var(--ease) forwards,
    art-float 3.5s ease-in-out 1.8s infinite;
}

@keyframes art-float {
  0%, 100% { transform: translateY(0); opacity: 0.13; }
  50% { transform: translateY(-6px); opacity: 0.22; }
}

/* Кола радара на сторінці локації розходяться хвилями */
.page-hero__art .hero-art__pulse {
  animation:
    art-draw 1.6s var(--ease) forwards,
    art-pulse 4s ease-out 1.8s infinite;
  transform-origin: 120px 130px;
}

.page-hero__art--location .hero-art__pulse:nth-child(2) { animation-delay: 0.25s, 2.3s; }
.page-hero__art--location .hero-art__pulse:nth-child(3) { animation-delay: 0.4s, 2.8s; }

@keyframes art-pulse {
  0% { transform: scale(0.75); opacity: 0.22; }
  70% { transform: scale(1.12); opacity: 0.04; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* Промінь, що повільно сканує банер згори вниз */
.page-hero__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  top: -140px;
  pointer-events: none;
  z-index: 1;
  /* Тепле світло, що повільно сповзає по кладці — як промінь лампи
     в підвалі, а не холодний технічний сканер */
  background: linear-gradient(
    180deg,
    transparent,
    rgba(196, 142, 96, 0.05) 40%,
    rgba(246, 239, 228, 0.06) 55%,
    transparent
  );
  animation: hero-scan 11s ease-in-out 1.2s infinite;
}

@keyframes hero-scan {
  0% { top: -140px; }
  100% { top: 100%; }
}

/* Кутові засічки — як у видошукачі, перегукуються з головною */
.page-hero__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1.5px solid rgba(246, 239, 228, 0.22);
  z-index: 2;
  opacity: 0;
  animation: corner-in 0.5s var(--ease) 0.5s forwards;
}

@keyframes corner-in {
  to { opacity: 1; }
}

.page-hero__corner--tl { top: 92px; left: 24px; border-right: none; border-bottom: none; }
.page-hero__corner--tr { top: 92px; right: 24px; border-left: none; border-bottom: none; }
.page-hero__corner--bl { bottom: 24px; left: 24px; border-right: none; border-top: none; }
.page-hero__corner--br { bottom: 24px; right: 24px; border-left: none; border-top: none; }

.page-hero .container {
  position: relative;
  z-index: 3;
}

@media (max-width: 720px) {
  .page-hero__corner {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero__art path,
  .page-hero__art circle {
    animation: none;
    stroke-dashoffset: 0;
  }
  .page-hero__scan {
    animation: none;
    display: none;
  }
  .page-hero__corner {
    animation: none;
    opacity: 1;
  }
}

.page-hero .eyebrow {
  justify-content: center;
}

.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--color-on-dark);
}

.page-hero .tagline {
  font-family: var(--font-body);
  color: var(--color-on-dark-muted);
  font-size: 1.05rem;
  margin: 0;
}

.page-hero .container > * {
  animation: page-hero-in 0.6s var(--ease) both;
}

.page-hero .container > *:nth-child(2) { animation-delay: 0.08s; }
.page-hero .container > *:nth-child(3) { animation-delay: 0.16s; }
.page-hero .container > *:nth-child(4) { animation-delay: 0.24s; }

/* Кнопки дії в банері сторінки (напр. «Забронювати зал» на «Просторі») */
.page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

@media (max-width: 480px) {
  .page-hero__cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@keyframes page-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero .container > * {
    animation: none;
  }
}

/* Мерч ------------------------------------------------------------------- */

.merch-lead {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin: 0;
}

.merch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.merch-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.merch-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-brown);
  box-shadow: 0 22px 44px rgba(71, 48, 38, 0.16);
}

.merch-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.merch-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.merch-card:hover .merch-card__media img {
  transform: scale(1.06);
}

/* Мітка «Хіт» / «Новинка» — привертає увагу до конкретної позиції */
.merch-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-brown);
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.merch-card__tag--new {
  background: #4f7a4f;
}

.merch-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.merch-card__body h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.merch-card__desc {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0 0 18px;
  flex: 1;
}

.merch-card__sizes {
  display: flex;
  gap: 7px;
  margin-bottom: 20px;
}

.merch-card__sizes span {
  min-width: 34px;
  padding: 5px 0;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.merch-card:hover .merch-card__sizes span {
  border-color: var(--color-brown);
  background: var(--color-cream-alt);
  color: var(--color-brown-dark);
}

.merch-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.merch-card__price {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-brown-dark);
}

/* Плейсхолдер ціни виглядає стриманіше за реальну ціну */
.merch-card__price[data-price]:not([data-price=""]) {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.merch-card__cta {
  padding: 11px 22px;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* Форма заявки на мерч ---------------------------------------------- */

.merch-order {
  margin-top: 52px;
  padding: 38px 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: linear-gradient(
    140deg,
    var(--color-cream-alt),
    var(--color-card) 60%
  );
}

.merch-order__intro {
  max-width: 520px;
  margin-bottom: 28px;
}

.merch-order__intro h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.merch-order__intro p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

.merch-order__form {
  max-width: 720px;
}

.merch-order__form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Прибираємо стандартну стрілку браузера й малюємо свою — рідна
   вибивалася з дизайну форми */
.merch-order__form select,
.field select {
  width: 100%;
  padding: 13px 40px 13px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2368483e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.merch-order__form select:hover,
.field select:hover {
  background-color: var(--color-card);
}

.merch-order__form select:focus {
  outline: none;
  border-color: var(--color-brown);
}

.merch-order__form .field-hint {
  margin-top: 14px;
}

.merch-order__form .field-hint a {
  color: var(--color-brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Підтвердження заявки */
.merch-order__success {
  text-align: center;
  padding: 34px 24px;
  animation: success-in 0.5s var(--ease) both;
}

.merch-order__success .mark {
  width: 46px;
  margin: 0 auto 16px;
}

.merch-order__success h4 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-brown-dark);
  margin: 0 0 8px;
}

.merch-order__success p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Коротка підсвітка після натискання «Замовити» — видно, куди перекинуло */
@keyframes cta-highlight {
  0% { box-shadow: 0 0 0 0 rgba(104, 72, 62, 0.4); }
  100% { box-shadow: 0 0 0 18px rgba(104, 72, 62, 0); }
}

.merch-order.is-highlighted {
  animation: cta-highlight 0.9s var(--ease);
  border-color: var(--color-brown);
}

@media (max-width: 620px) {
  .merch-order {
    padding: 28px 22px;
  }

  .merch-order__form .field-row {
    grid-template-columns: 1fr;
  }
}

/* Локація / контакти ------------------------------------------------------ */

.location {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: start;
}

.location__info {
  display: grid;
  gap: 14px;
}

.info-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.info-card:hover {
  border-color: var(--color-brown);
  transform: translateX(3px);
}

.info-card__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown);
}

.info-card__icon svg {
  width: 21px;
  height: 21px;
}

.info-card__body h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 5px;
}

.info-card__body p {
  margin: 0;
  font-size: 1rem;
  color: var(--color-text);
}

.info-card__note {
  font-size: 0.85rem !important;
  color: var(--color-text-muted) !important;
  margin-top: 3px !important;
}

.location__social {
  margin-top: 6px;
  padding: 20px 22px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.location__social-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links a {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-brown-dark);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.social-links a:hover {
  background: var(--color-brown);
  border-color: var(--color-brown);
  color: var(--color-cream);
}

/* Карта --------------------------------------------------------------- */

.map-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.map-embed {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 460px;
  background: var(--color-card);
  box-shadow: 0 18px 40px rgba(71, 48, 38, 0.12);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 460px;
  border: 0;
  display: block;
  /* Google-карта своїми синьо-білими кольорами вибивається з теплої
     палітри — приглушуємо й підтеплюємо її, лишаючи читабельною */
  filter: sepia(0.42) saturate(0.78) hue-rotate(-12deg) contrast(0.94)
    brightness(1.03);
  transition: filter 0.45s var(--ease);
}

/* Теплий серпанок по краях — карта не обрізається різко, а розчиняється
   у фоні сторінки */
.map-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 78% 70% at 50% 50%,
      transparent 55%,
      rgba(246, 239, 228, 0.32) 100%
    );
  transition: opacity 0.45s var(--ease);
}

/* При наведенні повертаємо звичні кольори й прибираємо серпанок —
   так зручніше роздивлятись орієнтири */
.map-embed:hover iframe {
  filter: none;
}

.map-embed:hover::after {
  opacity: 0;
}

/* Кутові засічки — той самий мотив, що на банерах сторінок */
.map-embed__corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(104, 72, 62, 0.55);
  pointer-events: none;
  z-index: 2;
}

.map-embed__corner--tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.map-embed__corner--tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.map-embed__corner--bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.map-embed__corner--br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

/* Підпис-плашка з лого замість синьої картки Google */
.map-embed__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: var(--radius-sm);
  background: rgba(27, 22, 19, 0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(246, 239, 228, 0.18);
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.map-embed__badge img {
  width: 15px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Ховаємо плашку при наведенні — не заважає роздивлятись карту */
.map-embed:hover .map-embed__badge {
  opacity: 0;
}

.map-card__route {
  align-self: flex-start;
}

/* Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
  padding: 64px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border-dark);
}

.footer-grid img {
  height: 30px;
  margin-bottom: 14px;
}

.footer-grid p {
  font-size: 0.9rem;
  max-width: 280px;
}

.footer-grid h4 {
  color: var(--color-on-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.footer-grid a {
  text-decoration: none;
  font-size: 0.92rem;
  color: var(--color-on-dark-muted);
  transition: color 0.2s ease;
}

.footer-grid a:hover {
  color: var(--color-on-dark);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  font-size: 0.8rem;
}

/* Підпис розробника у підвалі */
.footer-bottom__end {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}

.footer-dev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-on-dark-muted);
}

.footer-dev::before {
  content: "";
  width: 1px;
  height: 12px;
  margin-right: 12px;
  background: rgba(246, 239, 228, 0.2);
}

.footer-dev a {
  color: var(--color-on-dark);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 239, 228, 0.3);
  transition: border-color 0.2s ease;
}

.footer-dev a:hover {
  border-color: var(--color-on-dark);
}

@media (max-width: 560px) {
  .footer-dev::before {
    display: none;
  }
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 900px) {
  .about,
  .location {
    grid-template-columns: 1fr;
  }

  .merch {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .nav-links {
    position: fixed;
    inset: 70px 16px auto 16px;
    background: rgba(27, 22, 19, 0.98);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(246, 239, 228, 0.14);
    border-radius: var(--radius);
    flex-direction: column;
    gap: 18px;
    padding: 22px;
    display: none;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-toggle {
    display: block;
  }

  section {
    padding: 70px 0;
  }

  .merch {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Меню: компактні рядки ------------------------------------------------ */

.menu-status {
  text-align: center;
  padding: 50px 20px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

.menu-category {
  /* Категорія — це <section>, тож скидаємо загальний відступ секцій
     сайту (100px згори й знизу), інакше між категоріями зяяли
     двохсотпіксельні порожнечі */
  padding: 0;
  margin-bottom: 44px;
  scroll-margin-top: 150px;
}

.menu-category:last-child {
  margin-bottom: 0;
}

.menu-category__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.menu-category__head h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  margin: 0;
}

.menu-category__head .menu-card__icon {
  margin: 0;
  flex: none;
  width: 44px;
  height: 44px;
}

.menu-category__head .menu-card__icon svg {
  width: 22px;
  height: 22px;
}

/* Дві колонки на широких екранах — більше позицій в полі зору */
.menu-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.menu-item {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 16px 16px 20px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.menu-item:hover {
  border-color: var(--color-brown);
  box-shadow: 0 10px 26px rgba(71, 48, 38, 0.1);
  transform: translateY(-2px);
}

.menu-item__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.menu-item__name {
  font-size: 1.02rem;
  margin: 0 0 5px;
  line-height: 1.3;
}

.menu-item__desc {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0 0 12px;
  /* Обрізаємо довгі описи — рядки лишаються однакової висоти */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.menu-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.menu-item__price {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-brown-dark);
  white-space: nowrap;
}

/* Фото фіксованого розміру — рядки не стрибають по висоті */
.menu-item__media {
  flex: none;
  width: 92px;
  height: 92px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  align-self: center;
  background: var(--color-cream-alt);
}

.menu-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.menu-item:hover .menu-item__media img {
  transform: scale(1.07);
}

.menu-item__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-border);
  border: 1px dashed var(--color-border);
}

.menu-item__media--empty svg {
  width: 34px;
  height: 34px;
}

/* Додавання просто з меню ---------------------------------------------- */

.menu-item__control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: none;
  /* Фіксована ширина: кнопка «+» і лічильник займають однаково, тож
     рядок не смикається при додаванні товару. Саме width, а не min-width —
     інакше активний стан розтягувався й налазив на фото товару. */
  width: 108px;
  height: 40px;
}

.menu-item__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-brown);
  border-radius: var(--radius-sm);
  background: var(--color-brown);
  color: var(--color-cream);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.25s var(--ease),
    background 0.2s var(--ease);
}

.menu-item__add svg {
  width: 19px;
  height: 19px;
}

.menu-item__add:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 16px rgba(104, 72, 62, 0.32);
}

.menu-item__add:active {
  transform: scale(0.93);
}

/* Коли товар у кошику — кнопка стає лічильником */
.menu-item__control.is-active {
  /* Ширину успадковуємо від базового контролу (108px), лише
     розподіляємо вміст — мінус ліворуч, плюс праворуч */
  justify-content: space-between;
  border: 1.5px solid var(--color-brown);
  border-radius: var(--radius-sm);
  padding: 2px;
  background: var(--color-card);
  animation: control-expand 0.28s var(--ease);
}

@keyframes control-expand {
  from { transform: scale(0.88); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

.menu-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--color-brown-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s var(--ease);
}

.menu-item__qty-btn svg {
  width: 17px;
  height: 17px;
}

.menu-item__qty-btn:hover {
  background: var(--color-cream-alt);
}

.menu-item__qty-btn:active {
  transform: scale(0.88);
}

/* На останній одиниці «мінус» стає видаленням — явно показуємо, що
   наступне натискання прибере товар, а не просто зменшить кількість */
.menu-item__qty-btn--remove {
  color: #a13b3b;
}

.menu-item__qty-btn--remove:hover {
  background: #f7eaea;
  color: #8c2f2f;
}

.menu-item__qty {
  min-width: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-brown-dark);
}

@media (max-width: 520px) {
  .menu-item {
    padding: 14px;
    gap: 12px;
  }

  .menu-item__media {
    width: 76px;
    height: 76px;
  }
}

/* Панель кошика знизу ------------------------------------------------------ */

.cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: rgba(27, 22, 19, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border-dark);
  padding: 14px 0;
  animation: cart-bar-in 0.35s var(--ease);
}

@keyframes cart-bar-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.cart-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cart-bar__info {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: var(--color-on-dark);
}

.cart-bar__count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-on-dark-muted);
}

.cart-bar__total {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .cart-bar {
    animation: none;
  }
}

/* Оформлення замовлення ---------------------------------------------------- */

.checkout-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}

.checkout-title {
  font-size: 1.25rem;
  margin-bottom: 22px;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  transition: border-color 0.2s var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-brown);
}

.field-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 7px 0 0;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.form-error {
  background: #fdeaea;
  border: 1px solid #e5a1a1;
  color: #8c2f2f;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.form-error:empty {
  display: none;
}

/* Підсумок замовлення — оформлений як акуратний чек ------------------- */

.order-summary {
  position: sticky;
  top: 100px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(71, 48, 38, 0.1);
}

/* Шапка чека — темна, з логотипом: одразу зрозуміло, чий це рахунок */
.order-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px;
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.order-summary__head img {
  height: 20px;
}

.order-summary__head span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-dark-muted);
}

.order-summary__body {
  padding: 8px 24px 24px;
}

.order-summary .checkout-title {
  display: none;
}

.cart-item {
  display: grid;
  /* Фіксовані колонки для лічильника й суми: інакше кожен рядок —
     окрема сітка, і ціни не ставали одна під одною */
  grid-template-columns: 1fr 92px 92px 28px;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-border);
}

.cart-item:last-of-type {
  border-bottom: none;
}

.cart-item__name {
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
}

.cart-item__unit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.qty-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px;
  background: #fff;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-brown-dark);
  transition: background 0.2s ease, transform 0.15s var(--ease);
}

.qty-btn:hover {
  background: var(--color-cream-alt);
}

.qty-btn:active {
  transform: scale(0.88);
}

.qty-value {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.88rem;
}

.cart-item__total {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  text-align: right;
  color: var(--color-brown-dark);
}

.cart-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 5px 6px;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.cart-item__remove:hover {
  color: #a13b3b;
  background: #f7eaea;
}

/* Підсумок — виділяємо, це головна цифра */
.order-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
  padding: 18px 0 0;
  border-top: 2px solid var(--color-brown);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

.order-summary__total strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-brown-dark);
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Примітка про оплату всередині чека */
.order-summary__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.success-box {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding: 50px 30px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.success-box .mark {
  width: 56px;
  margin: 0 auto 22px;
}

.success-box h2 {
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.success-box strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--color-brown-dark);
}

.success-box .muted-note {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin: 18px 0 28px;
}

@media (max-width: 900px) {
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .order-summary {
    position: static;
    order: -1;
  }
}

/* ==========================================================================
   Додаткові анімації та шліфування
   ========================================================================== */

/* Плавна поява сторінки, щоб контент не «блимав» при завантаженні */
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body {
  animation: page-in 0.4s ease both;
}

/* Товар у меню -------------------------------------------------------- */

/* Фото ледь наближається при наведенні — картка «оживає» */
.product-card__image {
  transition: transform 0.6s var(--ease);
}

.product-card:hover .product-card__image {
  transform: scale(1.05);
}

.product-card__body {
  position: relative;
  z-index: 1;
  background: var(--color-card);
}

/* Ціна трохи підростає при наведенні — акцент на головному */
.product-card__price {
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
  transform-origin: left center;
}

.product-card:hover .product-card__price {
  transform: scale(1.06);
  color: var(--color-brown);
}

/* Підтвердження додавання в кошик — коротка пружна реакція */
@keyframes added-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.09); }
  100% { transform: scale(1); }
}

.product-card__add.is-added {
  animation: added-pop 0.42s var(--ease);
}

/* Панель кошика ------------------------------------------------------- */

/* Сума помітно оновлюється, коли змінюється кошик */
@keyframes total-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.11); }
  100% { transform: scale(1); }
}

.cart-bar__total.is-updated,
.order-summary__total strong.is-updated {
  animation: total-bump 0.4s var(--ease);
}

/* Кошик і кількість --------------------------------------------------- */

.qty-btn {
  transition: background 0.2s ease, transform 0.15s var(--ease);
}

.qty-btn:active {
  transform: scale(0.88);
}

.cart-item {
  animation: cart-item-in 0.35s var(--ease) both;
}

@keyframes cart-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Екран підтвердження замовлення -------------------------------------- */

.success-box {
  animation: success-in 0.55s var(--ease) both;
}

@keyframes success-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Знак бренду проступає з легким поворотом */
.success-box .mark {
  animation: mark-in 0.7s var(--ease) 0.15s both;
}

@keyframes mark-in {
  from { opacity: 0; transform: scale(0.7) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* Картки-посилання на головній ---------------------------------------- */

/* Стрілка їде вправо, підказуючи перехід */
.link-card__arrow::after {
  content: "";
  display: inline-block;
  width: 0;
  transition: width 0.3s var(--ease);
}

.link-card:hover .link-card__arrow::after {
  width: 6px;
}

/* Контактні картки ---------------------------------------------------- */

.info-card__icon {
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.35s var(--ease);
}

.info-card:hover .info-card__icon {
  background: var(--color-brown);
  color: var(--color-cream);
  transform: rotate(-6deg) scale(1.05);
}

/* Стан завантаження меню ---------------------------------------------- */

/* Пульсуюча підказка, поки меню їде з сервера — видно, що щось триває */
#menu-loading {
  animation: loading-pulse 1.4s ease-in-out infinite;
}

@keyframes loading-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Доступність --------------------------------------------------------- */

/* Видима рамка при навігації з клавіатури — раніше фокус губився */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 3px;
  border-radius: 4px;
}

/* На темних банерах і в темній шапці фокус має бути світлим */
.site-header a:focus-visible,
.site-header button:focus-visible,
.hero a:focus-visible,
.page-hero a:focus-visible,
.mission__inner a:focus-visible {
  outline-color: var(--color-on-dark);
}

/* Повага до системного налаштування «менше руху» ---------------------- */

@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;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* Фільтри меню -------------------------------------------------------- */

/* Липнуть під шапку — категорію можна перемкнути будь-коли під час
   перегляду, не гортаючи назад угору */
.menu-filters {
  position: sticky;
  top: 74px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding: 14px 18px;
  background: rgba(246, 239, 228, 0.94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.menu-filters__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.2s var(--ease);
}

.filter-chip:hover {
  border-color: var(--color-brown);
  transform: translateY(-1px);
}

.filter-chip.is-active {
  background: var(--color-brown);
  border-color: var(--color-brown);
  color: var(--color-cream);
}

.filter-chip__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-cream-alt);
  color: var(--color-text-muted);
}

.filter-chip.is-active .filter-chip__count {
  background: rgba(246, 239, 228, 0.22);
  color: var(--color-cream);
}

/* Пошук */
.menu-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}

.menu-search__icon {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.menu-search input {
  width: 100%;
  padding: 10px 36px 10px 38px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-card);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  transition: border-color 0.2s var(--ease);
}

.menu-search input:focus {
  outline: none;
  border-color: var(--color-brown);
}

/* Прибираємо власний хрестик браузера — маємо свою кнопку */
.menu-search input::-webkit-search-cancel-button {
  display: none;
}

.menu-search__clear {
  position: absolute;
  right: 10px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--color-cream-alt);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-search__clear:hover {
  background: var(--color-brown);
  color: var(--color-cream);
}

@media (max-width: 720px) {
  .menu-filters {
    top: 66px;
    padding: 12px 14px;
    gap: 12px;
  }

  .menu-search {
    min-width: 100%;
  }

  .filter-chip {
    padding: 8px 13px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Стани форм: валідація, надсилання, успіх, помилка
   ========================================================================== */

/* Поле з помилкою — підсвічується й коротко здригається, щоб одразу
   було видно, куди дивитись */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #c56b6b;
  background: #fdf6f6;
  animation: field-shake 0.4s var(--ease);
}

@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  45% { transform: translateX(4px); }
  70% { transform: translateX(-2px); }
}

/* Текст помилки під конкретним полем */
.field__error {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: #a13b3b;
  animation: field-error-in 0.25s var(--ease);
}

@keyframes field-error-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Успішно заповнене поле — тиха зелена позначка, без нав'язливості */
.field.is-valid input,
.field.is-valid select,
.field.is-valid textarea {
  border-color: #8aab8a;
}

/* Загальне повідомлення про помилку — виїжджає, а не зʼявляється різко */
.form-error:not(:empty) {
  animation: form-error-in 0.35s var(--ease);
}

@keyframes form-error-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Кнопка під час надсилання — крутиться індикатор, кнопка неактивна */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
  color: transparent !important;
}

.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-cream);
  animation: btn-spin 0.7s linear infinite;
}

.btn--solid.is-loading::after {
  color: var(--color-cream);
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Кнопка після успіху — коротка зелена «галочка» перед переходом далі */
.btn.is-success {
  background: #4f7a4f !important;
  border-color: #4f7a4f !important;
  color: var(--color-cream) !important;
  animation: btn-success 0.45s var(--ease);
}

@keyframes btn-success {
  0% { transform: scale(1); }
  45% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Сповіщення, що спливає збоку (напр. «Додано в кошик») ---------------- */

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 18px;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-on-dark);
  font-size: 0.88rem;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  animation: toast-in 0.35s var(--ease);
  max-width: 320px;
}

.toast.is-leaving {
  animation: toast-out 0.3s var(--ease) forwards;
}

.toast__icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4f7a4f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.toast--error .toast__icon {
  background: #a13b3b;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateX(24px); }
}

@media (max-width: 520px) {
  .toast-stack {
    right: 12px;
    left: 12px;
    bottom: 90px;
  }

  .toast {
    max-width: none;
  }
}

/* Промокод на екрані підтвердження ------------------------------------ */

.promo-card {
  margin: 26px auto 30px;
  max-width: 340px;
  padding: 22px 24px;
  border: 1.5px dashed var(--color-brown);
  border-radius: var(--radius);
  background: var(--color-cream-alt);
  animation: promo-in 0.5s var(--ease) 0.25s both;
}

@keyframes promo-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.promo-card__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.promo-card__code {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-brown-dark);
}

.promo-card__note {
  margin: 10px 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

/* Знижка для ветеранів ------------------------------------------------- */

/* Стримано: без відсотків великим шрифтом і яскравих плашок —
   це повага, а не рекламна акція */
.veterans-note {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 52px;
  padding: 26px 28px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brown);
  border-radius: var(--radius);
  background: var(--color-card);
}

.veterans-note__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brown);
}

.veterans-note__icon svg {
  width: 30px;
  height: 30px;
}

.veterans-note h3 {
  font-size: 1.02rem;
  margin: 0 0 7px;
}

.veterans-note p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 620px;
}

@media (max-width: 520px) {
  .veterans-note {
    padding: 22px 20px;
    gap: 14px;
  }
}

/* ==========================================================================
   Події
   ========================================================================== */

.events-list {
  display: grid;
  gap: 16px;
}

.event-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  padding: 22px 24px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.event-card:hover {
  border-color: var(--color-brown);
  box-shadow: 0 14px 32px rgba(71, 48, 38, 0.12);
  transform: translateY(-2px);
}

/* Дата великим блоком — афіша сканується за секунди */
.event-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-alt);
  border: 1px solid var(--color-border);
  text-align: center;
}

.event-card__day {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-brown-dark);
}

.event-card__month {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-top: 5px;
}

.event-card__today {
  margin-top: 9px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-brown);
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.event-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.event-card__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}

.event-card__title {
  font-size: 1.2rem;
  margin: 0 0 6px;
}

.event-card__host {
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--color-brown);
}

.event-card__desc {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.event-card__footer {
  margin-top: auto;
}

.event-card__price {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-cream-alt);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--color-brown-dark);
}

/* Безкоштовні події позначаємо окремо — таких у нас чимало */
.event-card__price.is-free {
  background: #eef5ee;
  border-color: #a8c6a8;
  color: #2f5c2f;
}

.event-card__media {
  display: none;
}

/* Порожня афіша — не «нічого немає», а пояснення, що події регулярні */
.events-empty {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 56px 32px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
}

.events-empty .mark {
  width: 52px;
  margin: 0 auto 22px;
  opacity: 0.8;
}

.events-empty h2 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}

.events-empty p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 14px;
}

.events-empty .btn {
  margin-top: 12px;
}

@media (min-width: 860px) {
  .event-card {
    grid-template-columns: 100px 1fr 200px;
  }

  .event-card__media {
    display: block;
    border-radius: var(--radius-sm);
    overflow: hidden;
    align-self: stretch;
  }

  .event-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 520px) {
  .event-card {
    grid-template-columns: 72px 1fr;
    gap: 16px;
    padding: 18px;
  }

  .event-card__day {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Сторінка «Ветеранам»
   ========================================================================== */

.veterans-page__lead {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.veterans-page__lead p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0;
}

.veterans-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 44px;
}

.veterans-card {
  padding: 30px 28px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-brown);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.veterans-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(71, 48, 38, 0.13);
}

.veterans-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-alt);
  color: var(--color-brown);
}

.veterans-card__icon svg {
  width: 26px;
  height: 26px;
}

.veterans-card h2 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.veterans-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Безбар'єрність — практична інформація, тож помітно, але без пафосу */
.access-block {
  padding: 32px 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: linear-gradient(140deg, var(--color-cream-alt), var(--color-card) 65%);
  margin-bottom: 44px;
}

.access-block__head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.access-block__icon {
  flex: none;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-brown);
  color: var(--color-cream);
}

.access-block__icon svg {
  width: 28px;
  height: 28px;
}

.access-block h2 {
  font-size: 1.25rem;
  margin: 0 0 8px;
}

.access-block__head p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 640px;
}

.access-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.access-list li {
  position: relative;
  padding: 18px 20px 18px 46px;
  border-radius: var(--radius-sm);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Галочка перед пунктом — одразу зрозуміло, що це наявна можливість */
.access-list li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 21px;
  width: 15px;
  height: 9px;
  border-left: 2.5px solid var(--color-brown);
  border-bottom: 2.5px solid var(--color-brown);
  transform: rotate(-45deg);
}

.access-list strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-brown-dark);
}

.access-block__note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

.veterans-page__note {
  text-align: center;
  padding: 36px 30px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.veterans-page__note p {
  margin: 0 0 20px;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* Картка доступності на сторінці локації */
.info-card--access {
  border-left: 3px solid var(--color-brown);
}

/* ==========================================================================
   Блок місії на головній
   ========================================================================== */

/* Секція світла, а сам блок — темна картка всередині.
   Раніше секція була темною на всю ширину й зливалася з таким самим
   темним футером в одну суцільну пляму. */
.mission {
  background: var(--color-cream);
}

.mission__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
  padding: 56px 52px;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 80% 100% at 85% 0%, rgba(196, 142, 96, 0.2), transparent 60%),
    var(--grid-line),
    linear-gradient(160deg, #2b211a 0%, var(--color-ink) 60%, #14100d 100%);
  background-size: 100% 100%, var(--grid-size), 100% 100%;
  color: var(--color-on-dark);
  box-shadow: 0 26px 60px rgba(71, 48, 38, 0.22);
}

.mission__text .eyebrow {
  color: var(--color-on-dark-muted);
  margin-bottom: 14px;
}

.mission__text h2 {
  color: var(--color-on-dark);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 20px;
}

.mission__lead {
  color: var(--color-on-dark);
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0 0 16px;
}

.mission__note {
  color: var(--color-on-dark-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 28px;
}

.mission__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.mission__points li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius);
  background: rgba(246, 239, 228, 0.04);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-on-dark-muted);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.mission__points li:hover {
  border-color: rgba(246, 239, 228, 0.3);
  background: rgba(246, 239, 228, 0.07);
  transform: translateX(4px);
}

.mission__points strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-on-dark);
}

.mission__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(246, 239, 228, 0.09);
  border: 1px solid rgba(246, 239, 228, 0.18);
  color: var(--color-on-dark);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.mission__icon svg {
  width: 24px;
  height: 24px;
}

.mission__points li:hover .mission__icon {
  background: var(--color-on-dark);
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .mission__inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 40px 28px;
  }
}

/* Головна: оренда залів ----------------------------------------------------- */

.home-book {
  position: relative;
  overflow: hidden;
  background:
    var(--grid-line) 0 0 / var(--grid-size),
    radial-gradient(90% 120% at 100% 0%, rgba(104, 72, 62, 0.5), transparent 60%),
    var(--color-ink);
  color: var(--color-on-dark);
}

.home-book__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}

.home-book h2 {
  margin: 10px 0 14px;
  color: var(--color-on-dark);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.home-book .eyebrow {
  color: var(--color-on-dark-muted);
}

.home-book__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--color-on-dark-muted);
  font-size: 1.05rem;
}

.home-book__facts {
  list-style: none;
  margin: 28px 0 32px;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 440px;
}

.home-book__facts li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(246, 239, 228, 0.12);
  font-size: 0.95rem;
}

.home-book__facts li:last-child {
  border-bottom: 1px solid rgba(246, 239, 228, 0.12);
}

.home-book__facts li span:first-child {
  padding: 1px 7px;
  border: 1px solid rgba(246, 239, 228, 0.25);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-on-dark-muted);
}

.home-book__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Права частина: фото + «живий» стан залів */
.home-book__panel {
  position: relative;
}

.home-book__photo {
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  aspect-ratio: 4 / 3;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}

.home-book__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-book__live {
  position: relative;
  width: 86%;
  margin: -110px 0 0 -36px;
  padding: 14px 14px 10px;
  border: 1px solid rgba(246, 239, 228, 0.14);
  border-radius: var(--radius);
  background: rgba(27, 22, 19, 0.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.7);
  animation: hb-in 0.5s var(--ease) both;
}

@keyframes hb-in {
  from { opacity: 0; transform: translateY(12px); }
}

.home-book__live-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--color-on-dark-muted);
  text-transform: uppercase;
}

.home-book__day {
  flex: 1;
}

.home-book__pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7fb572;
}

.home-book__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid #7fb572;
  animation: hb-pulse 1.8s ease-out infinite;
}

@keyframes hb-pulse {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(1.8); opacity: 0; }
}

.home-book__tag {
  padding: 1px 6px;
  border: 1px solid rgba(127, 181, 114, 0.5);
  border-radius: 4px;
  color: #a6d49a;
  font-size: 0.62rem;
}

.home-book__rooms {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hb-room {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-top: 1px solid rgba(246, 239, 228, 0.08);
  border-radius: 8px;
  color: var(--color-on-dark);
  text-decoration: none;
  transition: background 0.2s var(--ease);
}

.hb-room:hover {
  background: rgba(246, 239, 228, 0.06);
}

.hb-room__idx {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-on-dark-muted);
}

.hb-room__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hb-room__info strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hb-room__info span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-on-dark-muted);
}

.hb-room__state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #a6d49a;
  white-space: nowrap;
}

.hb-room__bar {
  position: relative;
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: rgba(246, 239, 228, 0.12);
  overflow: hidden;
}

.hb-room__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: #7fb572;
}

.hb-room.is-busy .hb-room__state { color: #e3bd6e; }
.hb-room.is-busy .hb-room__bar i { background: #e3bd6e; }
.hb-room.is-full .hb-room__state { color: #e08a7f; }
.hb-room.is-full .hb-room__bar i { background: #e08a7f; }
.hb-room.is-off { opacity: 0.5; }
.hb-room.is-off .hb-room__state { color: var(--color-on-dark-muted); }

.hb-room__go {
  color: var(--color-on-dark-muted);
  transition: transform 0.2s var(--ease), color 0.2s;
}

.hb-room:hover .hb-room__go {
  color: var(--color-on-dark);
  transform: translateX(3px);
}

@media (max-width: 960px) {
  .home-book__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .home-book__live {
    width: auto;
    margin: -80px 16px 0;
  }
}

@media (max-width: 560px) {
  .home-book__live {
    margin: -40px 10px 0;
  }

  .hb-room {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .hb-room__go {
    display: none;
  }

  .hb-room__bar {
    display: none;
  }

  .home-book__actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-book__pulse::after,
  .home-book__live {
    animation: none;
  }
}

/* Замовлення: «Коли заберете», стан наживо, панель у меню ------------------ */

.field-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pickup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pickup__opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.pickup__opt strong {
  font-size: 0.9rem;
  color: var(--color-brown-dark);
}

.pickup__opt span,
.pickup__opt input {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--color-text-muted);
}

.pickup__opt input {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.pickup__opt:hover {
  border-color: var(--color-brown);
}

.pickup__opt.is-active {
  border-color: var(--color-brown);
  background: var(--color-card);
  box-shadow: 0 0 0 3px rgba(104, 72, 62, 0.14);
}

/* Вибір конкретної години */
.pickup__opt--time.has-time span {
  font-weight: 600;
  color: var(--color-brown-dark);
}

.pickup-slots {
  margin-top: 10px;
  padding: 14px 14px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  animation: pickup-in 0.3s var(--ease);
}

@keyframes pickup-in {
  from { opacity: 0; transform: translateY(-6px); }
}

.pickup-slots__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-brown-dark);
}

.pickup-slots__tz {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.pickup-slots__grid {
  display: grid;
  gap: 6px;
  max-height: 232px;
  overflow-y: auto;
  padding-right: 4px;
}

.pickup-slots__row {
  display: grid;
  grid-template-columns: 30px repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
}

.pickup-slots__hour {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.pickup-slot {
  padding: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.pickup-slot:hover {
  border-color: var(--color-brown);
}

.pickup-slot.is-active {
  border-color: var(--color-brown-dark);
  background: var(--color-brown-dark);
  color: var(--color-cream);
}

.pickup-slots__none {
  margin: 0;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

@media (max-width: 560px) {
  .pickup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Стан замовлення */
.track {
  margin: 22px auto 24px;
  max-width: 520px;
  padding: 22px 22px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  text-align: left;
}

.track__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.track__steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}

.track__steps li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
}

.track__steps li:first-child::before {
  display: none;
}

.track__steps i {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
}

.track__steps li.is-done i {
  border-color: var(--color-brown);
  background: var(--color-brown);
}

.track__steps li.is-done::before,
.track__steps li.is-current::before {
  background: var(--color-brown);
}

.track__steps li.is-current {
  color: var(--color-brown-dark);
  font-weight: 600;
}

.track__steps li.is-current i {
  border-color: var(--color-brown);
  box-shadow: 0 0 0 5px rgba(104, 72, 62, 0.18);
  animation: track-pulse 1.6s ease-in-out infinite;
}

.track.is-ready .track__steps li.is-current i {
  border-color: #4f7a45;
  background: #7fb572;
  box-shadow: 0 0 0 6px rgba(127, 181, 114, 0.25);
}

@keyframes track-pulse {
  50% { box-shadow: 0 0 0 9px rgba(104, 72, 62, 0.06); }
}

.track__status {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-brown-dark);
  text-align: center;
}

.track.is-ready .track__status {
  color: #4f7a45;
}

.track.is-cancelled .track__status {
  color: #a3342b;
}

.track__pickup {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-align: center;
}

.track__items {
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--color-border);
  list-style: none;
  font-size: 0.9rem;
}

.track__items li {
  padding: 3px 0;
}

.track__note {
  margin: 12px 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .track__steps li.is-current i {
    animation: none;
  }
}

/* Панель у меню */
.order-bar {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.order-bar__active,
.order-bar__repeat {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.order-bar__active {
  background:
    var(--grid-line) 0 0 / var(--grid-size),
    var(--color-ink);
  color: var(--color-on-dark);
}

.order-bar__active.is-ready {
  background: #2f4a2a;
}

.order-bar__pulse {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c99a3e;
  box-shadow: 0 0 0 5px rgba(201, 154, 62, 0.2);
}

.order-bar__active.is-ready .order-bar__pulse {
  background: #7fb572;
  box-shadow: 0 0 0 5px rgba(127, 181, 114, 0.25);
}

.order-bar__text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.order-bar__text span {
  color: var(--color-on-dark-muted);
}

.order-bar__go {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.order-bar__repeat {
  border: 1px dashed var(--color-border);
  background: var(--color-card);
  color: var(--color-text);
}

.order-bar__repeat:hover {
  border-color: var(--color-brown);
  border-style: solid;
}

.order-bar__repeat > span:first-child {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-brown);
  color: var(--color-cream);
  font-size: 1.1rem;
}

.order-bar__repeat > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.order-bar__repeat strong {
  color: var(--color-brown-dark);
}

#order-repeat-list {
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Інтерактивні елементи: однакова поведінка всюди
   - курсор «рука» на всьому, що натискається (включно з текстом усередині);
   - текст кнопок не виділяється й не показує курсор вводу при натисканні;
   - без синього спалаху при торканні на телефоні.
   Звичайні посилання всередині тексту лишаються виділюваними.
   ========================================================================== */

button,
[role="button"],
[role="tab"],
summary,
select,
.btn,
.chip,
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="file"],
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
label:has(> input[type="date"]),
nav a,
header a,
footer a,
a[class] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
[role="button"]:not([aria-disabled="true"]),
[role="tab"],
summary,
select,
input[type="checkbox"],
input[type="radio"],
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
label[for],
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
label:has(> input[type="date"]),
a[href] {
  cursor: pointer;
}

/* Текст, іконки й картинки всередині кнопки — той самий курсор, що й кнопка */
button *,
a[href] *,
summary *,
[role="button"] *,
[role="tab"] * {
  cursor: inherit;
}

button:disabled,
[aria-disabled="true"],
input:disabled {
  cursor: not-allowed;
}

/* Курсор вводу — лише там, де справді пишуть */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea {
  cursor: text;
}

/* Довгі слова без пробілів (напр. посилання) переносяться, а не розпирають сторінку */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, .ev-card, .ev-card *, .evd-title, .evd-summary, .evd-text, .evd-card, .rx__name, .rx__desc,
.mn-card, .mn-card *, .evd-faq__item summary, .evd-callout, .evd-quote { overflow-wrap: anywhere; }

.about > * { min-width: 0; }

@media (max-width: 520px) {
  .about__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .about__stats strong {
    font-size: 1.35rem;
  }
}