/* ══════════════════════════════════════════════════════
   mobile.css — Cinematic luxury mobile redesign
   Applies ONLY at max-width: 767px.
   Desktop is completely unchanged.
   Links after all other CSS — overrides take effect last.
══════════════════════════════════════════════════════ */

@media (max-width: 767px) {

/* =========================================================
   mobile.css — shared mobile overrides, ALL inside this @media (max-width:767px).
   Linked LAST on every page, so these rules win the cascade.
   Find a section: grep "=== ". Anchors:
     MOBILE: GLOBAL / HOME / ABOUT / MENU / CONTACT / OTHER PAGES
   Map: PROJECT_MAP.md  ·  Rules: CLAUDE.md
========================================================= */

/* === MOBILE: GLOBAL === */
/* ════════════════════════════════════════════
   GLOBAL
════════════════════════════════════════════ */
/* Единая минимальная высота основных кнопок на мобильной — 48px.
   .button уже inline-flex с центровкой (styles.css:228), механика не меняется. */
.button {
  min-height: 48px;
}

.page-width {
  padding-left: 1.25rem;   /* 20px — единый боковой отступ мобильного контейнера */
  padding-right: 1.25rem;
}


/* ════════════════════════════════════════════
   HOME HERO — cinematic luxury editorial
════════════════════════════════════════════ */

/* === MOBILE: HOME === */
.page-home .hero {
  min-height: 56svh;      /* зона hero короче на 20%, срез снизу */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  /* Ниже опускать нельзя: шапка занимает 99px, и при меньшем отступе
     заголовок уезжает под логотип. Это физический предел подъёма. */
  padding-top: 10svh;
}

/* Плашка-анонс (position:fixed) сдвигает шапку вниз на свою высоту —
   index.css:2205 делает это через --holiday-banner-h. Hero про сдвиг не знал,
   и заголовок уезжал под логотип. Двигаем его на столько же.
   Класс и переменную ставит script.js:607. */
body.page-home.has-holiday-banner .hero {
  padding-top: calc(10svh + var(--holiday-banner-h, 46px));
}

.page-home .hero-photo {
  inset: 0 0 0 20%;            /* wider photo panel — hero image ~14% larger */
  background-image: url('photos/main-page/hero-mobile.webp') !important;
  /* Кадр поднят на 20 пунктов (было 8%) и снят сдвиг вниз: композиция выше.
     Двигаем кроп, а не сам блок — иначе снизу открылась бы пустота. */
  background-position: 100% 18%;   /* кадр опущен на 10 пунктов (было 28%) */
  background-size: cover;
  transform: translate(calc(25px + 12%), 0);  /* сдвиг вправо +5% (было 7%) */
}

.page-home .hero-vignette::before {
  display: none;
}

/* Split vignette: dark left (text readable), wine glass bleeds through right */
.page-home .hero-vignette {
  background:
    linear-gradient(to bottom,
      rgba(8,2,2,0.6) 0%,
      rgba(8,2,2,0.18) 14%,
      transparent 28%
    ),
    linear-gradient(to right,
      rgba(8,2,2,0.86) 0%,
      rgba(8,2,2,0.68) 24%,
      rgba(8,2,2,0.44) 46%,
      rgba(8,2,2,0.2) 68%,
      rgba(8,2,2,0.05) 86%,
      transparent 100%
    ),
    linear-gradient(to top,
      #080202 0%,
      rgba(8,2,2,0.82) 16%,
      rgba(8,2,2,0.38) 36%,
      transparent 56%
    );
}

.page-home .hero-inner {
  align-items: flex-end;
  padding: 0 1.25rem;
  width: 100%;
}

.page-home .hero-copy {
  width: 100%;  /* full content width so CTAs reach the right edge (level with the menu icon) */
  max-width: none;
  padding: 1.25rem 0 0.5rem;   /* низ подрезан почти под ноль */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Hide eyebrow — header already shows brand */
.page-home .hero-eyebrow {
  display: none;
}

.page-home .hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.01rem, 9.17vw, 2.45rem);  /* −10%: 34.4 на 375, 35.8 на 390, 39.2 на 430 */
  font-weight: 400;
  line-height: 1.04;           /* a touch more open for an editorial feel */
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--cream, #EFE2CF);
  margin: 0.5rem 0 0;          /* heading→divider gap is owned by .hero-rule margin-top */
  text-shadow: 0 2px 30px rgba(0,0,0,0.38);
  max-width: none;            /* let each conceptual line stay on its own row */
  white-space: nowrap;        /* "European Cuisine" / "& Rare Wines" never break mid-line */
}

/* Hero title swap: mobile shows "Europa" (desktop keeps "Wine Bar & Kitchen") */
.page-home .hero h1 .hero-title-desktop { display: none; }
.page-home .hero h1 .hero-title-mobile { display: block; }

/* Описание hero: на мобильной короткий вариант, без Richmond District */
.page-home .hero-text .hero-text-full { display: none; }
.page-home .hero-text .hero-text-short { display: inline; }

.page-home .hero-rule {
  display: block;
  width: 3rem;                /* match About Us hero divider width */
  height: 1px;                /* match About Us divider thickness */
  background: linear-gradient(to right, #c9a96e, rgba(201,169,110,0.2)); /* match About Us divider color */
  margin: 1rem 0 0.85rem;     /* отбивки поджаты вслед за остальным */
}

.page-home .hero-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.984rem;               /* 15.75px — +5% */
  line-height: 1.55;                 /* плотнее: меньше строк, меньше высота hero */
  color: rgba(244,235,220,0.86);
  max-width: 14.75rem;               /* 236px — общая ширина текста и кнопок */
  margin-bottom: 1.1rem;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55); /* keep contrast against lighter photo areas */
}

/* Stacked luxury buttons */
/* Кнопки hero −7%: высота 48 → 44.6px (ровно порог тап-зоны 44px, ниже нельзя)
   и подпись 12 → 11.2px. Только hero главной. */
.page-home .hero-actions .button {
  min-height: 44.6px;
}
.page-home .hero-actions .button-primary,
.page-home .hero-actions .button-outline {
  font-size: 0.7rem;
}

.page-home .hero-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: 100%;
  /* Та же величина, что у .hero-text — в rem, иначе ch считается от разных кеглей */
  max-width: 14.75rem;
}

/* Primary "Reserve a Table" — soft vertical burgundy gradient, top highlight, gentle depth */
.page-home .hero-actions .button-primary {
  background: linear-gradient(180deg, #7A2034 0%, #611A2B 100%);
  border: 1px solid rgba(110,24,40,0.55);
  color: var(--cream, #EFE2CF);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;   /* 12px — нижняя граница читаемости подписи */
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.72rem 1.8rem;       /* slimmer height, more generous horizontal padding */
  border-radius: 10px;           /* единая форма кнопок на мобильной (было 24px) */
  min-width: unset;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 18px rgba(40,8,16,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.page-home .hero-actions .button-primary:hover {
  background: linear-gradient(180deg, #87263c 0%, #6c1e31 100%);  /* slightly brighter */
  transform: translateY(-2px);
  box-shadow: 0 9px 24px rgba(40,8,16,0.40), inset 0 1px 0 rgba(255,255,255,0.06);
}
.page-home .hero-actions .button-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(40,8,16,0.30), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Secondary "Menu" — transparent with a thin muted-gold border, warm ivory text */
.page-home .hero-actions .button-outline {
  background: transparent;
  border: 1px solid #C9A96E;
  color: var(--cream, #EFE2CF);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;   /* 12px — нижняя граница читаемости подписи */
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.72rem 1.8rem;       /* same proportions as the primary */
  border-radius: 10px;           /* единая форма кнопок на мобильной (было 24px) */
  min-width: unset;
  width: 100%;
  text-align: center;
  box-shadow: none;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.page-home .hero-actions .button-outline:hover {
  background: rgba(122,32,52,0.14);          /* subtle burgundy tint */
  border-color: #C9A96E;       /* gold border a touch brighter */
  color: var(--cream, #EFE2CF);
  transform: translateY(-2px);
}
.page-home .hero-actions .button-outline:active {
  transform: translateY(0);
}


/* ════════════════════════════════════════════
   ABOUT HERO — match menu-style vignette
════════════════════════════════════════════ */
/* === MOBILE: ABOUT === */
.about-hero-title {
  font-size: clamp(2.01rem, 9.17vw, 2.45rem);   /* как заголовок hero на главной */
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.about-hero .hero-vignette {
  /* Затемнение снизу вдвое слабее прежнего: 1 / 1 / 0.9 / 0.5 / 0.15 → половина */
  background:
    linear-gradient(to top,
      /* самые нижние 4% (≈16px) держим глухими: иначе фотография
         обрывается видимым срезом на стыке со следующей секцией */
      #080202 0%,
      rgba(8,2,2,0.5) 4%,
      rgba(8,2,2,0.5) 10%,
      rgba(8,2,2,0.45) 26%,
      rgba(8,2,2,0.25) 50%,
      rgba(8,2,2,0.075) 74%,
      transparent 100%
    ) !important;
}



/* ════════════════════════════════════════════
   HOME — QUOTE STRIP
════════════════════════════════════════════ */
.quote-strip {
  padding: 3.5rem 1.5rem;
}
.quote-strip-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 0;
}
.quote-strip-text {
  font-size: clamp(1.15rem, 5vw, 1.4rem);
  line-height: 1.48;
  max-width: 36ch;
  white-space: normal;
}


/* ════════════════════════════════════════════
   HOME — FOOD FEATURE (upgrade)
════════════════════════════════════════════ */
.feature-image {
  /* Суммарно −30% от исходных 88vw: сначала по 10% сверху и снизу,
     затем ещё по 5%. Высота задана явно: у элемента есть aspect-ratio 16/11,
     который пересиливает min-height, как только тот опускается ниже 268px. */
  aspect-ratio: auto;
  height: 63.36vw;
  min-height: 0;
  background-position: center 30%;
}
.feature-text {
  padding: 2.75rem 1.5rem 2rem;
}
/* «MADE FROM TRADITION» — было 9.3px, ниже порога читаемости */
.page-home .feature-text .section-label {
  font-size: 0.75rem;
  letter-spacing: 0.26em;
}
/* Ссылка-стрелка в блоке еды */
.page-home .feature-text .link-arrow {
  min-height: 44px;
  align-items: center;
}


/* ════════════════════════════════════════════
   HOME — WHAT MAKES US SPECIAL (сетка 2×2)
════════════════════════════════════════════ */
/* Кегли и внутренние отступы плиток заданы ниже, в блоке «КОМПОЗИЦИЯ ПО МАКЕТУ»
   вместе с раскладкой «иконка слева». Здесь их дублировать не нужно. */
.page-home .dark-strip-grid {
  gap: 0.75rem;            /* одинаковый зазор по обеим осям */
}
/* Кнопка брони убрана: она уже есть в hero и в закреплённой нижней панели */
.page-home .dark-strip-cta {
  display: none;
}


/* ════════════════════════════════════════════
   HOME — WINE (один блок вместо карусели)
════════════════════════════════════════════ */
/* Карусель показывала четыре тёмные полупустые карточки. На мобильной
   оставляем один выразительный блок: фото + заголовок + описание + CTA.
   Десктопную карусель это не трогает — правило внутри ≤767px. */
.page-home .wine-carousel-wrap {
  display: none;
}
/* Ширина и отступы текста, как и отсутствие затемняющей подложки, заданы ниже
   в карточке вина (блок «КОМПОЗИЦИЯ ПО МАКЕТУ»). */
.page-home .wine-text .section-label-light {
  font-size: 0.72rem;      /* было 9.1px */
  letter-spacing: 0.2em;
}
.page-home .wine-text p {
  font-size: 0.94rem;      /* 15px */
  line-height: 1.5;
}
/* «Explore Wine List» — полноценная кнопка по ТЗ, в существующей золотой гамме */
.page-home .wine-text .link-arrow-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 1.25rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(201,169,110,0.55);
  border-radius: 0;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* ════════════════════════════════════════════
   HOME — FOR EVERY OCCASION
════════════════════════════════════════════ */
/* Кликабельной была только внутренняя часть (289px из 323). Растягиваем на всю карточку. */
.page-home .acc-trigger {
  width: 100%;
  box-sizing: border-box;
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: 88px;
}
.page-home .acc-label {
  font-size: 0.72rem;      /* было 8px */
  letter-spacing: 0.2em;
}
.page-home .acc-title {
  font-size: 0.98rem;
  line-height: 1.3;
}


/* ════════════════════════════════════════════
   HOME — КОНТАКТНЫЙ БЛОК В ФУТЕРЕ
════════════════════════════════════════════ */
/* «Visit Us» / «Hours» были 9.6px — слишком мелко для ключевой информации. */
.site-footer .footer-col h3 {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
}
/* Один кегль для обеих колонок: адрес был 15px, а дни и время в часах —
   10.4px, из-за чего блок читался как два разных. 13.4px — середина. */
.site-footer .footer-row-body p,
.site-footer .footer-row-body li,
.site-footer .footer-row-body a {
  font-size: 0.84rem;      /* 13.4px */
  line-height: 1.5;
}
/* Строки часов не растягиваем на всю ширину — оставляем воздух по бокам */
.site-footer .footer-hours li {
  font-size: 0.84rem;
}
/* Кегль дней и времени задан в styles.css через :first-child/:last-child —
   перебиваем теми же псевдоклассами, иначе правило слабее. */
.footer-info-card .footer-hours li span:first-child,
.footer-info-card .footer-hours li span:last-child {
  font-size: 0.84rem;      /* 13.4px */
}
.site-footer .footer-hours ul {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.site-footer .footer-phone-inline a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.feature-text h2 {
  font-size: clamp(2rem, 8.5vw, 2.6rem);
  line-height: 1.02;
  margin-bottom: 1.1rem;
}


/* ════════════════════════════════════════════
   HOME — WINE FEATURE (upgrade)
════════════════════════════════════════════ */
.wine-photo {
  min-height: 62vw;
}
.wine-text {
  padding: 2.75rem 1.5rem 2.5rem;
}
.wine-text h2 {
  font-size: clamp(2rem, 8vw, 2.5rem);
  line-height: 1.04;
  margin-bottom: 1rem;
}


/* ════════════════════════════════════════════
   HOME — SERVICE CARDS (upgrade)
════════════════════════════════════════════ */
.svc-hero {
  min-height: 72vw;
}
.svc-catering,
.svc-mornings {
  min-height: 58vw;
}
.svc-hero {
  padding: 2.5rem 1.5rem;
}
.svc-hero .svc-heading {
  font-size: clamp(1.8rem, 7.5vw, 2.2rem);
}
.svc-inner {
  padding: 2rem 1.5rem;
}
.svc-heading {
  font-size: clamp(1.5rem, 6.2vw, 1.85rem);
}


/* ════════════════════════════════════════════
   MENU — HERO (upgrade: 60svh → 75svh)
════════════════════════════════════════════ */
/* === MOBILE: MENU === */
.mn-hero {
  /* Высота как у hero главной: тот же min-height и отступ сверху.
     Контент прижат к низу — иначе под коротким текстом оставалось 128px
     пустоты, и до «OUR MENUS» набегало 176px. */
  /* 56svh оставляли 136px пустоты под текстом; блок сокращён,
     чтобы до «OUR MENUS» было ровно две строки описания (~62px) */
  min-height: 45svh;
  padding-top: 10svh;
  display: flex;
  flex-direction: column;
  /* Как на главной: контент идёт от верха после padding-top, а не центрируется */
  justify-content: flex-start;
}
.mn-hero-inner {
  padding-top: 4.7rem;    /* текст и дивайдер опущены на 10% высоты hero (~47px) */
  padding-bottom: 0.9rem;
}
.mn-hero-inner {
  padding-left: 1.25rem;   /* 20px — единый боковой отступ мобильного контейнера */
  padding-right: 1.25rem;
}
.mn-hero-content {
  padding: 0;   /* 3rem снизу давали лишнюю пустоту под описанием */
  width: 100%;
  max-width: 12.63rem;   /* 202px — ещё −5% */
}
.mn-hero-title {
  font-size: clamp(2.8rem, 11vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.mn-hero-photo-vignette {
  background:
    linear-gradient(to top,
      #080202 0%,
      rgba(8,2,2,0.5) 4%,
      rgba(8,2,2,0.5) 10%,
      rgba(8,2,2,0.45) 26%,
      rgba(8,2,2,0.25) 50%,
      rgba(8,2,2,0.075) 74%,
      transparent 100%
    );
}


/* ════════════════════════════════════════════
   MENU — CINEMATIC CARDS
   Image becomes absolute background, text floats above
════════════════════════════════════════════ */
.mn-body {
  /* верх 1.25rem: вместе с остатком hero даёт ~62px — две пустые строки описания */
  padding: 1.25rem 0 5rem;
}
.mn-body .page-width {
  padding-left: 1.25rem;   /* 20px — единый боковой отступ мобильного контейнера */
  padding-right: 1.25rem;
}
.mn-section {
  margin-bottom: 2.25rem;
}
.mn-section-head {
  margin-bottom: 1.25rem;
}

/* Remove thin gold lines — cards get individual spacing */
.mn-grid-wrap {
  background: transparent;
  border: none;
  border-radius: 0;
}
.mn-grid,
.mn-grid--2,
.mn-grid--3,
.mn-grid--4 {
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

/* Cinematic overlay card */
.mn-card {
  position: relative;
  min-height: 22vh;
  border-radius: 20px;
  overflow: hidden;
  background: #0d0303;
  flex-direction: column;
}
.mn-card:hover {
  background: #0d0303;
}
.mn-card--gathering {
  min-height: 28vh;
}

/* Image: full-bleed absolute background */
.mn-card-img,
.mn-card--gathering .mn-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  order: 0;
  transform: none;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mn-card:active .mn-card-img {
  transform: scale(1.03);
}

/* Stronger cinematic overlay: dark left, photo bleeds through right */
.mn-card-img::before {
  background:
    linear-gradient(to right,
      rgba(8,2,2,0.96) 0%,
      rgba(8,2,2,0.78) 30%,
      rgba(8,2,2,0.42) 60%,
      rgba(8,2,2,0.1) 100%
    );
}

/* Bottom scrim */
.mn-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,2,2,0.55) 0%, transparent 55%);
  z-index: 0;
  pointer-events: none;
}

/* Text floats above image */
.mn-card-text {
  position: relative;
  z-index: 2;
  background: transparent;
  flex: 1;
  padding: 1.75rem 1.5rem;
  justify-content: center;
  min-width: 0;
}
.mn-card-title {
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  color: var(--cream, #EFE2CF);
  margin-bottom: 0.4rem;
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
.mn-card-desc {
  color: rgba(239,226,207,0.52);
  margin-bottom: 1rem;
}
.mn-card-cta {
  color: rgba(201,169,110,0.72);
  border-bottom-color: transparent;
}


/* ════════════════════════════════════════════
   ABOUT — MORE THAN A RESTAURANT
   Override horizontal cream carousel → vertical cinematic dark cards
════════════════════════════════════════════ */
.more-section {
  background: #080202;
  padding: 4rem 0;
}
.more-header {
  padding: 0 1.5rem;
  margin-bottom: 2rem;
  text-align: left;
}
.more-eyebrow {
  color: rgba(201,169,110,0.65);
  letter-spacing: 0.3em;
}
.more-title {
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  line-height: 1.06;
  color: var(--cream, #EFE2CF);
}
.more-banner {
  display: none;
}

/* Vertical cinematic stack */
.more-cards {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: visible;
  overflow-x: visible;
  padding: 0 1.5rem;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: auto;
  align-items: stretch;
}
.more-card {
  flex: none;
  width: 100%;
  min-height: 34vh;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  scroll-snap-align: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0;
  background: #0d0303;
  border: none;
  box-shadow: none;
}

/* Reveal the photo */
.more-card-image {
  display: block !important;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.more-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(8,2,2,0.95) 0%,
      rgba(8,2,2,0.55) 45%,
      rgba(8,2,2,0.15) 100%
    );
}

/* Icon: hidden, text takes over */
.more-card-icon {
  display: none;
}

/* Text anchored at bottom */
.more-card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1.5rem 1.75rem;
  z-index: 2;
  width: 100%;
}
.more-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cream, #EFE2CF);
  margin-bottom: 0.3rem;
  line-height: 1.2;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.more-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(239,226,207,0.52);
  max-width: none;
  margin: 0 auto 0 0;
}

/* Hide carousel dots — not a carousel anymore */
.more-carousel-dots {
  display: none;
}


/* ════════════════════════════════════════════
   CONTACT — HERO  (full mobile)
════════════════════════════════════════════ */
/* === MOBILE: CONTACT === */
.ct-hero {
  min-height: 75svh;
  align-items: flex-end;
}
.ct-hero-photo {
  inset: 0;
  background-size: cover;
  background-position: center;
}
.ct-hero-photo::after {
  background: linear-gradient(
    to top,
    #080202 0%,
    rgba(8,2,2,0.88) 22%,
    rgba(8,2,2,0.38) 52%,
    transparent 80%
  );
}
.ct-hero-photo-vignette {
  background:
    linear-gradient(to right,
      #080202 0%,
      rgba(8,2,2,0.72) 32%,
      rgba(8,2,2,0.18) 65%,
      transparent 100%
    ),
    linear-gradient(to top,
      #080202 0%,
      rgba(8,2,2,0.8) 18%,
      transparent 55%
    );
}
.ct-hero-inner {
  align-items: flex-end;
  padding: 0 1.5rem;
  width: 100%;
}
.ct-hero-content {
  width: 100%;
  padding: 0 0 3rem;
}
.ct-hero-title {
  font-size: clamp(2.01rem, 9.17vw, 2.45rem);   /* как заголовок hero на главной */
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.ct-hero-sub {
  font-size: 0.96rem;
  line-height: 1.62;
}
.ct-hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}


/* ════════════════════════════════════════════
   CONTACT — INFO STRIP  (stack vertically)
════════════════════════════════════════════ */
.ct-info {
  padding: 2.5rem 0;
}
.ct-info .ct-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  /* width:auto — .ct-info-grid тянет width:100% из contact.css, и боковые поля
     прибавлялись сверху: страница уезжала вбок (414px при вьюпорте 390) */
  width: auto;
  margin: 0 1.5rem;
  border: 1px solid rgba(201,169,110,0.12);
  border-radius: 20px;
  overflow: hidden;
}
.ct-info-col {
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid rgba(201,169,110,0.08);
  background: rgba(46,8,16,0.2);
  align-items: flex-start;
  text-align: left;
}
.ct-info-col:last-child {
  border-bottom: none;
}
.ct-info-divider {
  display: none;
}


/* ════════════════════════════════════════════
   CONTACT — MAP (full width, taller)
════════════════════════════════════════════ */
.ct-map-wrap {
  height: clamp(220px, 60vw, 300px);
}


/* ════════════════════════════════════════════
   CONTACT — LOCAL INFO  (stack vertically)
════════════════════════════════════════════ */
.ct-local {
  padding: 2.5rem 0;
}
.ct-local .ct-local-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0 1.5rem;
  grid-template-columns: 1fr;
  border: 1px solid rgba(201,169,110,0.12);
  border-radius: 20px;
  overflow: hidden;
}
.ct-local-item {
  padding: 1.6rem 1.5rem;
  border-bottom: 1px solid rgba(201,169,110,0.08);
  background: rgba(46,8,16,0.15);
  align-items: flex-start;
  text-align: left;
}
.ct-local-item:last-child {
  border-bottom: none;
}
.ct-local-sep {
  display: none;
}


/* ════════════════════════════════════════════
   CONTACT — CTA
════════════════════════════════════════════ */
.ct-cta {
  min-height: 55vw;
}
.ct-cta-inner {
  padding: 0 1.5rem;
}
.ct-cta-title {
  font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  line-height: 1.05;
}


/* ════════════════════════════════════════════
   BRUNCH / WINES / PRIVATE EVENTS / GIFT CARDS / CATERING
   Hero title — match homepage mobile title
════════════════════════════════════════════ */
/* === MOBILE: OTHER PAGES (brunch / wines / private-events / gift-cards / catering) === */
.br-hero-title,
.wn-hero-title,
.pe-hero-title,
.gc-hero-title,
.catr-hero-title {
  font-size: clamp(2.01rem, 9.17vw, 2.45rem);   /* как заголовок hero на главной */
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}


/* ════════════════════════════════════════════
   SUBPAGE HERO — не заезжать под шапку
════════════════════════════════════════════ */
/* === MOBILE: SUBPAGE HERO CLEARANCE === */
/* .site-header — position:fixed и на мобиле занимает ~99px сверху (styles.css:66).
   У этих страниц контент hero выше собственного min-height, поэтому он заполняет
   блок целиком и начинается от края экрана — заголовок уезжал под логотип.
   Отступ = высота шапки + воздух. Меняем только padding-top, композиция та же. */
.br-hero-content,
.wn-hero-content,
.pe-hero-content,
.catr-hero-content,
.gc-hero-content,   /* добавлена 01.09.2026: после роста шапки заголовок задел логотип */
.ct-hero-content {
  padding-top: calc(99px + 1rem);
}

} /* end @media (max-width: 767px) */


/* ══════════════════════════════════════════════════════
   DESKTOP — Homepage hero cinematic upgrade
   Scoped to .page-home so About page is completely unchanged.
   Applies ONLY at min-width: 768px.
══════════════════════════════════════════════════════ */

@media (min-width: 768px) {

  /* Photo: matched to About Us hero (global .hero-photo inset 30%) */
  .page-home .hero-photo {
    inset: 80px 0 0 30%;
    background-position: center 28%;
  }

  /* Hero text column — unified to contact width (min(52%, 560px)) */
  .page-home .hero-inner .hero-copy {
    width: min(52%, 560px);
    max-width: none;
  }

  /* Cinematic vignette — matched to About Us hero (global .hero-vignette) */
  .page-home .hero-vignette {
    background:
      linear-gradient(to right,
        #080202 0%,
        #080202 10%,
        rgba(8,2,2,0.96) 24%,
        rgba(8,2,2,0.82) 40%,
        rgba(8,2,2,0.42) 58%,
        rgba(8,2,2,0.10) 76%,
        transparent 90%
      ),
      linear-gradient(to top,
        #080202 0%,
        rgba(8,2,2,0.75) 14%,
        rgba(8,2,2,0.2) 30%,
        transparent 48%
      );
  }

  /* Headline — match About Us hero title (desktop), incl. heading→divider gap */
  .page-home .hero-inner h1 {
    font-size: clamp(3.15rem, 6.3vw, 5.85rem);
    margin-bottom: 1.25rem;    /* heading→divider = divider→paragraph (.page-home .hero-rule margin-bottom) */
  }

} /* end @media (min-width: 768px) desktop homepage hero */


/* ══════════════════════════════════════════════════════
   DESKTOP — UNIFIED SUBPAGE HERO (эталон: gift-cards .gc-hero)
   Только ≥768px. Мобильная версия НЕ затрагивается.
   Лежит в mobile.css (грузится последним) → перебивает page-CSS.
   Страницы: menu / catering / wines / brunch / private-events
   (contact ИСКЛЮЧЁН по решению пользователя). CTA НЕ входит.
══════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* контейнер — высота (фиксированная → все hero одинаковой высоты) */
  /* Hero высота — как у главной (.hero): min-height без фиксированной height */
  .mn-hero, .catr-hero, .wn-hero, .br-hero, .pe-hero {
    height: auto;
    min-height: 45vh;
  }

  /* фото — позиция панели */
  .mn-hero-photo, .catr-hero-photo, .wn-hero-photo,
  .br-hero-photo, .pe-hero-photo {
    inset: 80px 0 0 30%;       /* было 22% */
  }

  /* vignette / затемнение — 3-слойный градиент gc */
  .mn-hero-photo-vignette, .catr-hero-vignette, .wn-hero-photo-vignette,
  .br-hero-blend, .pe-hero-blend {
    background:
      linear-gradient(to right, #080202 0%, #080202 8%, rgba(8,2,2,0.92) 22%,
        rgba(8,2,2,0.68) 40%, rgba(8,2,2,0.28) 62%, rgba(8,2,2,0.05) 80%, transparent 100%),
      linear-gradient(to top, #080202 0%, rgba(8,2,2,0.7) 12%, rgba(8,2,2,0.15) 28%, transparent 48%),
      linear-gradient(to bottom, rgba(8,2,2,0.55) 0%, transparent 18%);
  }

  /* inner — вертикальное выравнивание (горизонталь уже задана styles.css:376–386) */
  .mn-hero-inner, .catr-hero-inner, .wn-hero-inner,
  .br-hero-inner, .pe-hero-inner {
    align-items: flex-start;
    z-index: 2;                /* фикс wines: было z-index:1 */
  }

  /* content — ширина текстовой колонки + отступы */
  .mn-hero-content, .catr-hero-content, .wn-hero-content,
  .br-hero-content, .pe-hero-content {
    width: min(52%, 560px);    /* unified to contact width */
    padding: clamp(10rem, 20vh, 16rem) 0 1.5rem;   /* как у главной (.hero-inner .hero-copy) */
  }

  /* Wines — текстовый блок уже на 10% (по запросу, только wines) */
  .wn-hero-content { width: min(46.8%, 504px); }

  /* Catering — ширина текстового блока hero (по запросу: +10%, +10%, −10% от базы) */
  .catr-hero-content { width: min(56.6%, 610px); }

  /* eyebrow */
  .mn-eyebrow, .catr-eyebrow, .wn-eyebrow,
  .br-hero-eyebrow, .pe-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(201,169,110,0.72);
    margin: 0 0 1.1rem;
  }

  /* H1 */
  .mn-hero-title, .catr-hero-title, .wn-hero-title,
  .br-hero-title, .pe-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(2.75rem, 5.5vw, 5.02rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: 0.04em;
    text-transform: uppercase;   /* catering станет uppercase */
    color: var(--cream, #EFE2CF);
    margin: 0 0 1.5rem;
  }

  /* rule */
  .mn-hero-rule, .catr-hero-rule, .wn-hero-rule,
  .br-hero-rule, .pe-hero-rule {
    display: block;
    width: 4rem;
    height: 1px;
    background: linear-gradient(to right, #c9a96e, rgba(201,169,110,0.2));
    margin-bottom: 1.5rem;
  }

  /* sub — D2: без white-space:nowrap (текст переносится) */
  .mn-hero-sub, .catr-hero-body, .wn-hero-sub,
  .br-hero-sub, .pe-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.93rem, 1.5vw, 1.05rem);
    font-weight: 400;
    font-style: normal;
    color: rgba(239,226,207,0.58);
    line-height: 1.74;
    max-width: none;
    margin-bottom: 1.5rem;
  }

  /* Hero subtitles: hide hard <br> on desktop — text flows to fill the column on ALL pages */
  .hero-text br, .about-hero-body br,
  .mn-hero-sub br, .ct-hero-sub br, .catr-hero-body br,
  .wn-hero-sub br, .br-hero-sub br, .pe-hero-sub br, .gc-hero-sub br {
    display: none;
  }

} /* end desktop unified hero */


@media (max-width: 767px) {

  /* ════════════════════════════════════════════
     ЕДИНАЯ СТРУКТУРА — ФУТЕР НА ВНУТРЕННИХ СТРАНИЦАХ
  ════════════════════════════════════════════ */
    /* 02.09.2026: правило снято — полный футер (адрес, часы, карта) снова
     виден на всех страницах, где он есть в разметке. Contact и Privacy
     используют сокращённый ct-footer-minimal, контактного блока там нет. */

  /* ════════════════════════════════════════════
     ТИПОГРАФИКА — НИЖНИЕ ПОРОГИ ЧИТАЕМОСТИ
  ════════════════════════════════════════════ */
  /* Копирайт был 7.8px — самый мелкий текст на сайте. */
  .footer-note {
    font-size: 0.75rem;      /* 12px */
    line-height: 1.5;
    /* Кнопка «наверх» висит справа (44px + 20px от края). Строку держим в
       один ряд, но кегль подобран так, чтобы её правый край не доходил до
       кнопки. У элемента был overflow:hidden — строка молча обрезалась;
       теперь она просто помещается. */
    font-size: 0.64rem;      /* 10.24px */
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  /* Тап-зоны минимум 44px. Раньше ссылки футера были 16px высотой,
     иконки соцсетей 34×34, ссылки-стрелки 15px. */
  .footer-quick-links a,
  .footer-map-cta,
  .acc-cta,
  .ct-info-link,
  .ct-info-phone,
  /* .modal-consent и .wn-text-link убраны 01.09.2026: таких классов в разметке нет.
     Ссылка «Privacy Policy» стоит внутри предложения (.form-consent) — инлайновые
     ссылки в тексте из правила 44px исключены стандартом, растягивать её нельзя. */
  .link-arrow,
  .link-arrow-light,
  .pe-space-link,
  .pe-text-link,
  .br-text-link,
  .catr-wine-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .social-icon,
  .ct-info-social-icon {
    min-width: 44px;
    min-height: 44px;
  }
  /* Логотип — отдельно: у него flex-direction:column, и общий align-items:center
     из правила выше выравнивал «EUROPA» и «WINE BAR & KITCHEN» по центру
     друг относительно друга. Нужна только высота тап-зоны, выравнивание — слева. */
  .brand {
    min-height: 44px;
    justify-content: center;
  }
  /* Точки-разделители в футере не должны растягивать строку */
  .footer-quick-links {
    align-items: center;
  }
  /* Крестик модалки брони и закрытие плашки-анонса — до 44×44 */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  .holiday-banner-close {
    min-width: 44px;
    min-height: 44px;
  }
  /* Бургер — гарантированные 44×44 */
  .nav-toggle,
  .nav-close {
    min-width: 44px;
    min-height: 44px;
  }


  /* ════════════════════════════════════════════
     ПЛАШКА-АНОНС — компактная на мобильной
  ════════════════════════════════════════════ */
  /* Было 117px (14% экрана) при CTA 126×20 и кегле 10.5px.
     Текст плотнее, отступы меньше, ссылка — полноценная тап-зона 44px.
     Содержимое по-прежнему приходит из разметки и управляется data-until. */
  /* Плашка имела z-index:200 и перекрывала открытое меню: кнопку закрытия
     нельзя было нажать. Меню лежит внутри .site-header, а та своим z-index:100
     создаёт контекст наложения — значение 200 у меню наружу не действует.
     Опускаем плашку под шапку. Вертикально они не пересекаются, поэтому
     внешне ничего не меняется. Правило только для мобильной. */
  .holiday-banner {
    z-index: 95;
  }

  .holiday-banner-inner {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    row-gap: 0.15rem;
  }
  .holiday-banner-text {
    font-size: 0.8rem;       /* 12.8px */
    line-height: 1.38;
    /* длинный текст переносится, а не ломает верстку */
    overflow-wrap: anywhere;
  }
  .holiday-banner-label {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }
  .holiday-banner-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;        /* тап-зона остаётся 44px… */
    margin-top: -0.55rem;    /* …а визуально плашка не растёт: лишняя высота уходит в минус-поля */
    margin-bottom: -0.6rem;
    font-size: 0.75rem;      /* 12px — заметнее */
    letter-spacing: 0.14em;
  }

} /* end @media (max-width: 767px) — мобильные добавления 01.09.2026 */

/* ════════════════════════════════════════════
   КОНТАКТЫ — АДРЕС И ЧАСЫ НА УЗКИХ ЭКРАНАХ
════════════════════════════════════════════ */
/* До 420px две колонки сжимают адрес в четыре строки («4318 California /
   Street / San Francisco, CA / 94118»). Ставим блоки друг под другом.
   На 430px и шире колонки остаются — текст туда помещается без сжатия. */
@media (max-width: 419px) {
  .footer-info-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "visit"
      "hours";
  }
}

/* ════════════════════════════════════════════
   МОБИЛЬНАЯ ГЛАВНАЯ — КОМПОЗИЦИЯ ПО МАКЕТУ 01.09.2026
   Только раскладка. Тексты, фотографии, телефон и часы — прежние.
════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Плашка-анонс: всё в одну строку-ряд, меньше высоты ── */
  /* Одна строка: OPEN LABOR DAY · RESERVE A TABLE ›
     Полный текст с датой и часами на мобильной не показывается — он остаётся
     на десктопе. Крестик уведён в угол абсолютом. */
  .holiday-banner-inner {
    display: flex;
    flex-direction: row;     /* базовое мобильное правило ставит колонку — было в два ряда */
    flex-wrap: wrap;         /* уже 375px строка переносится, а не наезжает на крестик */
    row-gap: 0.1rem;
    align-items: center;
    justify-content: center;
    position: relative;
    column-gap: 0.25rem;
    /* справа резервируем всю тап-зону крестика (44px + 4px отступ), иначе
       строка заезжает под него и тап по шеврону закрывал плашку вместо брони */
    padding: 0.15rem 3rem 0.15rem 0.75rem;
  }
  .holiday-banner-label,
  .hb-full {
    display: none;
  }
  .hb-compact,
  .hb-hours {
    display: inline;
  }
  /* Разделитель перед часами; второй разделитель — .holiday-banner-text::after */
  .hb-hours::before {
    content: '·';
    margin: 0 0.3rem;
    opacity: 0.65;
  }
  .holiday-banner-text {
    margin: 0;
    font-size: 0.66rem;      /* 10.6px — на 10% крупнее */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
  }
  /* Второй разделитель привязан к кнопке, а не к тексту: при переносе
     строки он иначе повисал в конце первой строки. Позиционируем
     абсолютом — так подчёркивание кнопки его не задевает. */
  .holiday-banner-cta::before {
    content: '·';
    position: absolute;
    left: 0;
    /* при переносе строки (ниже 390px) точка повисает в начале второй строки */
    display: none;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.65;
  }
  /* Шеврон выводим из потока: кнопка — inline-flex, её псевдоэлемент
     становится флекс-элементом, и подчёркивание родителя на него
     распространяется. text-decoration:none у потомка это не снимает,
     а абсолютно позиционированный бокс подчёркивание не наследует. */
  .holiday-banner-cta {
    position: relative;
    padding-left: 0.75rem;   /* место под разделитель слева */
    padding-right: 0.8rem;   /* и под шеврон справа */
    font-size: 0.66rem;
    letter-spacing: 0.02em;
  }
  .holiday-banner-cta::after {
    content: '›';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .holiday-banner-cta {
    margin: 0;               /* 44px тап-зона задаёт высоту плашки — это её минимум */
    white-space: nowrap;
    /* Линия шла по низу 44-пиксельной коробки и висела далеко от букв.
       Переносим её на само начертание — прижимается к тексту. */
    border-bottom: none;
    padding-bottom: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: rgba(239,226,207,0.5);
  }
  /* Шеврон подчёркивать не нужно */
  .holiday-banner-cta::after {
    text-decoration: none;
  }

  /* Крестик: видимая рамка вдвое меньше (22px), тап-зона остаётся 44px */
  .holiday-banner-close {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    line-height: 1;
  }
  .holiday-banner-close::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(239,226,207,0.3);
    pointer-events: none;
  }

  /* ── Плитки «What makes us special»: иконка слева, текст по левому краю ── */
  .page-home .dark-strip-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    /* Иконка слева от всего текста и по центру его высоты;
       заголовок и описание — колонкой справа, по центру ширины. */
    grid-template-areas:
      "icon title"
      "icon desc";
    column-gap: 0.45rem;
    row-gap: 0.2rem;
    align-items: start;
    text-align: left;
    padding: 1.05rem 0.75rem;
  }
  .page-home .dark-strip-item .strip-icon {
    grid-area: icon;
    align-self: center;   /* по центру высоты обеих строк текста */
    margin: 0;
    flex: 0 0 auto;
  }
  .page-home .dark-strip-item .strip-icon svg {
    width: 30px;    /* крупнее: деталь иконок читается, блок выше */
    height: 30px;
  }
  .page-home .dark-strip-item h3 {
    font-size: 0.8rem;       /* 12.8px — подпись карточки */
    letter-spacing: 0.03em;  /* тесный трекинг: заголовок укладывается в две строки */
    line-height: 1.22;
  }
  .page-home .dark-strip-item p {
    font-size: 0.875rem;     /* 14px — нижний порог по ТЗ */
    line-height: 1.42;
    margin-top: 0.35rem;
  }
  .page-home .dark-strip-item h3 {
    grid-area: title;
    margin: 0;
    text-align: left;
    align-self: end;
  }
  .page-home .dark-strip-item p  {
    grid-area: desc;
    margin: 0;
    text-align: left;
    align-self: start;
  }

  /* ── Кнопка «View Menu» в карточке еды — в рамке, как в макете ── */
  .page-home .feature-text .link-arrow {
    justify-content: center;
    min-height: 48px;
    margin-top: 0.5rem;
    padding: 0 1.5rem;
    border: 1px solid rgba(201,169,110,0.5);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  /* ── Цитата: показывается, но вдвое ниже — срезано поровну сверху и снизу.
     Правило раньше не работало: при чистке ссылки на бранч от неё остался
     осколок «.page-home .feature-text» без запятой, и селектор превратился
     в цепочку, которая ни с чем не совпадала. ── */
  .page-home .quote-strip {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}

/* ── Блок вина: карточка, текст слева, бутылка справа (макет 01.09.2026) ──
   Раньше фото лежало абсолютом под текстом. index.css задаёт ему
   position:absolute !important, поэтому здесь нужен свой !important. */
@media (max-width: 767px) {
  .page-home .wine-feature {
    padding: 0 1.25rem;
    background: none;
  }
  .page-home .wine-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: stretch;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(150deg, #4a0d17 0%, #2a0710 55%, #1a0409 100%);
    border: 1px solid rgba(201,169,110,0.16);
  }
  .page-home .wine-feature .wine-photo {
    position: static !important;
    inset: auto !important;
    grid-column: 2;
    grid-row: 1;
    min-height: 100% !important;
    background-position: 82% center;   /* кадр сдвинут: бокал целиком в колонке */
    background-size: cover;
  }
  .page-home .wine-feature .wine-text {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    padding: 1.6rem 1rem 1.6rem 1.25rem;
  }
  /* «Explore Wine List» — залитая бордовая кнопка */
  /* Описание вина на мобильной оставлено скрытым (так было и до правок).
     Настоящий текст — 150+ символов с перечислением стран; в колонке 164px
     он даёт 8 строк и растягивает карточку до 446px, ломая композицию.
     Чтобы показать его, нужно либо сократить текст, либо ставить фото сверху. */
  .page-home .wine-text h2 {
    font-size: 1.45rem;      /* «beyond the usual» укладывается в одну строку */
    line-height: 1.12;
  }
  .page-home .wine-text .link-arrow-light {
    background: linear-gradient(180deg, #7A2034 0%, #611A2B 100%);
    border-color: rgba(110,24,40,0.55);
    color: var(--cream, #EFE2CF);
    margin-top: 0.55rem;   /* кнопка ближе к заголовку */
    padding: 0 0.7rem;
    font-size: 0.75rem;      /* 12px — нижний порог */
    letter-spacing: 0.08em;
    white-space: nowrap;     /* подпись не должна ломаться на две строки */
  }
}

/* ── Быстрые кнопки в контактах: Get Directions / Call Us (макет 01.09.2026) ── */
@media (max-width: 767px) {
  /* Мобильный футер — грид с областями "info"/"map" (styles.css).
     Без своей области блок уезжал под карту, поэтому добавляем "actions". */
  .footer-grid {
    grid-template-areas:
      "info"
      "actions"
      "map";
  }
  .footer-quick-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin: 0;
  }
  .footer-quick-actions .fqa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0 0.75rem;
    border: 1px solid rgba(201,169,110,0.42);
    background: rgba(90,17,26,0.35);
    color: var(--beige, #D9C2A3);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .footer-quick-actions .fqa-btn:active {
    background: rgba(90,17,26,0.6);
  }
  .footer-quick-actions .fqa-btn:focus-visible {
    outline: 2px solid var(--beige, #D9C2A3);
    outline-offset: 2px;
  }
  /* Кнопка поверх карты больше не нужна — действия вынесены наружу */
  .footer-map-cta {
    display: none;
  }
}

/* Разделитель перед кнопкой показываем только там, где строка одна */
@media (min-width: 390px) and (max-width: 767px) {
  .holiday-banner-cta::before { display: block; }
}

/* ════════════════════════════════════════════
   ШАПКА +20% НА МОБИЛЬНОЙ (01.09.2026)
   Вертикальные отступы, логотип и бургер — и в шапке страницы,
   и в шапке выпадающего меню. Всё внутри ≤767px: десктоп не затрагивается.
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .header-inner {
    padding-top: 1.38rem;      /* было 1.15rem */
    padding-bottom: 1.5rem;    /* было 1.25rem */
  }
  .brand-name {
    font-size: clamp(1.38rem, 5.8vw, 1.86rem);
  }
  .brand-subtitle {
    font-size: clamp(0.756rem, 3.31vw, 1.08rem);
  }
  /* Бургер: и рамка нажатия, и сами полоски */
  .nav-toggle {
    width: 3.3rem;
    height: 3.3rem;
  }
  .hamburger {
    width: clamp(1.44rem, 6vw, 1.92rem);
  }
  .hamburger::before { top: -8.4px; }
  .hamburger::after  { top:  8.4px; }

  /* Крестик меню — той же величины, что бургер, который его открыл */
  .nav-close {
    width: 3.3rem;
    height: 3.3rem;
  }

  /* Шапка внутри выпадающего меню */
  .nav-overlay-header {
    padding-top: 2.16rem;      /* было 1.8rem */
    padding-bottom: 1.2rem;    /* было 1rem */
  }
}

/* те же +20% для узких экранов, где кегли логотипа свои */
@media (max-width: 380px) {
  .brand-name {
    font-size: clamp(1.31rem, 5.8vw, 1.58rem);
  }
  .brand-subtitle {
    font-size: clamp(0.756rem, 3.31vw, 0.96rem);
  }
}

/* ════════════════════════════════════════════
   ЕДИНАЯ ФОРМА КНОПОК НА МОБИЛЬНОЙ (01.09.2026)
   Было вразнобой: 0, 2, 3, 4, 10, 24px. Сводим к 10px — это уже самый
   частый радиус на сайте и совпадает со скруглением мелких блоков.
   Цвета, заливки и рамки не трогаем. Только ≤767px.
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .button,
  .mobile-action-bar .mab-btn,
  .footer-quick-actions .fqa-btn,
  .catr-cta-btn,
  .wn-cta-btn,
  .gc-cta-btn,
  .gc-amount-btn,
  .gc-delivery-btn,
  .pe-select-btn,
  .pe-modal-submit,
  .page-home .feature-text .link-arrow,
  .page-home .wine-text .link-arrow-light {
    border-radius: 10px;
  }

  /* Квадратики-крестики: то же семейство, но радиус меньше — иначе
     на 22–44px коробке скругление читается как овал. */
  .modal-close,
  .pe-modal-close,
  .nav-close,
  .holiday-banner-close::before {
    border-radius: 8px;
  }
}

/* ════════════════════════════════════════════
   ЗОЛОТАЯ ОБВОДКА ТЁМНЫХ КНОПОК (01.09.2026)
   #C9A96E — цвет, с которого начинается разделитель в hero
   (.page-home .hero-rule). Было вразнобой: золото с прозрачностью
   0.2–0.75 и кремовые рамки. Заливки и подписи не трогаем. Только ≤767px.
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .button-outline,
  .mobile-action-bar .mab-call,
  .footer-quick-actions .fqa-btn,
  .gc-amount-btn,
  .gc-delivery-btn,
  .catr-cta-btn,
  .wn-cta-btn,
  .pe-select-btn,
  .page-home .feature-text .link-arrow {
    border-color: #C9A96E;
  }
}

/* ════════════════════════════════════════════
   БОРДОВЫЕ КНОПКИ — КАК «REQUEST A RESERVATION» (01.09.2026)
   Тот же градиент, рамка и тень, что у кнопки отправки формы
   (.modal-submit, styles.css). Размеры и подписи у каждой свои.
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .button-primary,
  .page-home .hero-actions .button-primary,
  .mobile-action-bar .mab-reserve,
  .page-home .wine-text .link-arrow-light,
  .gc-cta-btn,
  .pe-modal-submit {
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
    border: 1px solid rgba(122,29,48,0.4);
    box-shadow: 0 4px 24px rgba(70,12,24,0.45);
    transition: background 220ms, box-shadow 220ms;
  }
  .button-primary:active,
  .page-home .hero-actions .button-primary:active,
  .mobile-action-bar .mab-reserve:active,
  .page-home .wine-text .link-arrow-light:active,
  .gc-cta-btn:active,
  .pe-modal-submit:active {
    background: linear-gradient(160deg, #6e1528 0%, #8e2238 55%, #6e1528 100%);
    box-shadow: 0 6px 32px rgba(70,12,24,0.60);
  }
}

/* ════════════════════════════════════════════
   ФУТЕР — ПЕРЕЧЕНЬ СТРАНИЦ В ОДНУ СТРОКУ (01.09.2026)
   Пять ссылок не помещались и уходили на два ряда. Основной вес давала
   разрядка: 42 символа по 2px это ~86px. Ужимаем её и кегль, тап-зона
   44px сохраняется за счёт вертикальных отступов.
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-quick-links {
    /* wrap, а не nowrap: на gift-cards ссылок шесть, и в одну строку они
       не влезают — при nowrap строка выпирала за экран (395 при 390).
       Там будет два ряда, на остальных страницах остаётся один. */
    flex-wrap: wrap;
    column-gap: 0.3rem;
  }
  .footer-quick-links a {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
  .footer-quick-links .footer-quick-dot {
    margin: 0 0.15rem;
  }
}

/* На совсем узких экранах кнопка «наверх» ближе к центру, и строка
   копирайта до неё дотягивается — там разрешаем перенос. */
@media (max-width: 359px) {
  .footer-note {
    white-space: normal;
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }
}

/* ════════════════════════════════════════════
   FOR EVERY OCCASION — ССЫЛКИ ВМЕСТО АККОРДЕОНА (01.09.2026)
   Карточки ведут на свои страницы (переход делает script.js),
   поэтому панель не нужна, а шеврон смотрит вправо.
════════════════════════════════════════════ */
@media (max-width: 767px) {
  .page-home .acc-panel {
    display: none;
  }
  .page-home .acc-chevron svg {
    transform: rotate(-90deg);   /* вниз → вправо */
  }
  /* Фото на 30% шире; object-fit:cover уже стоит — кадр приближается, не тянется */
  .page-home .acc-thumb {
    width: 91px;
  }
}

/* Отступ после hero главной — 5% его высоты */
@media (max-width: 767px) {
  .page-home .feature-section {
    padding-top: 1.5rem;
  }
}

/* Страница меню: текст кроме hero, футера и заголовков — +10%.
   Значения явные: 1.1em считался бы от родителя, а не от своего кегля. */
@media (max-width: 767px) {
  /* Кегли взяты с главной: описание — как .hero-text (15.7px),
     лейбл и ссылка — как подписи и кнопки главной (12px). */
  .page-menu .mn-card-desc { font-size: 0.984rem; }   /* 15.7px */
  .page-menu .mn-card-cta  { font-size: 0.75rem; }    /* 12px */
  .page-menu .mn-eyebrow   { font-size: 0.75rem; }    /* 12px */
  .page-menu .mn-hero-sub  { font-size: 0.984rem; }   /* 15.7px, как описание hero главной */
}

/* Фото в hero меню опущено на 20% высоты блока */
@media (max-width: 767px) {
  .page-menu .mn-hero-photo {
    background-size: auto 135%;
    background-position: 50% 21px;   /* поднято ещё на 10% высоты hero */
  }
}

/* Затемнение hero меню — снизу как на About, плюс лёгкая тень слева под текстом */
@media (max-width: 767px) {
  .page-menu .mn-hero-photo-vignette {
    background:
      linear-gradient(to right,
        rgba(8,2,2,0.55) 0%,
        rgba(8,2,2,0.34) 26%,
        rgba(8,2,2,0.14) 48%,
        transparent 66%
      ),
      linear-gradient(to top,
        #080202 0%,
        rgba(8,2,2,0.5) 4%,
        rgba(8,2,2,0.5) 10%,
        rgba(8,2,2,0.45) 26%,
        rgba(8,2,2,0.25) 50%,
        rgba(8,2,2,0.075) 74%,
        transparent 100%
      ) !important;
  }
}


/* ════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ МАСТЕР БРОНИ — два шага (03.09.2026)
   Только ≤767px. Десктопная форма не затрагивается: вся разметка
   шагов создаётся скриптом, а показывается лишь этими правилами.
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── окно на весь экран, без фотографии ── */
  #reservation-modal .modal {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    border-radius: 0;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(90,17,26,0.28) 0%, transparent 62%),
      #080202;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
  }
  #reservation-modal .modal-atmosphere { display: none; }

  #reservation-modal .modal-content {
    padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  }
  #reservation-modal .modal-close {
    top: calc(1rem + env(safe-area-inset-top));
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201,169,110,0.55);
    border-radius: 10px;
    background: transparent;
    color: var(--beige, #D9C2A3);
  }
  /* нижняя панель не должна конкурировать с формой */
  body:has(#reservation-modal.is-open) .mobile-action-bar { display: none; }

  #reservation-modal .modal-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: #C9A96E;
  }
  #reservation-modal #modal-title { font-size: clamp(2rem, 9vw, 2.4rem); }
  #reservation-modal .modal-subtitle { font-size: 0.94rem; line-height: 1.5; }

  /* ── индикатор шагов ── */
  /* на экране успеха индикатор шагов не нужен */
  #reservation-modal:has(#modal-success:not([hidden])) .rsv-steps { display: none; }

  .rsv-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 1.4rem 0 1.25rem;
    padding: 0;
    list-style: none;
  }
  .rsv-step-item {
    display: flex;
    align-items: stretch;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(239,226,207,0.14);
    color: rgba(239,226,207,0.42);
  }
  .rsv-step-item.is-done { color: rgba(201,169,110,0.7); border-bottom-color: rgba(201,169,110,0.5); }
  .rsv-step-item.is-active {
    color: #C9A96E;
    border-bottom-color: #C9A96E;
    border-bottom-width: 2px;
  }
  .rsv-step-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.4rem; }
  .rsv-step-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
  }
  .rsv-step-item.is-done .rsv-step-name::after { content: ' ✓'; }

  /* ── карточка формы ── */
  #reservation-modal .modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    background: linear-gradient(160deg, rgba(74,13,23,0.55) 0%, rgba(26,4,9,0.94) 62%);
    border: 1px solid rgba(201,169,110,0.22);
    border-radius: 18px;
    padding: 1.4rem 1.15rem 1.5rem;
  }
  #reservation-modal .form-row { display: contents; }

  #reservation-modal .modal-form label:not(.form-consent) {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #C9A96E;
  }
  #reservation-modal .modal-form input[type="text"],
  #reservation-modal .modal-form input[type="tel"],
  #reservation-modal .modal-form textarea {
    font-size: 1rem;
    min-height: 48px;
    border-radius: 10px;
  }
  #reservation-modal .modal-form textarea { min-height: 72px; resize: vertical; }

  /* родные select и поле даты заменены виджетами */
  #reservation-modal #res-guests,
  #reservation-modal #res-time { display: none; }

  /* Поле даты остаётся видимым — по нему открывается полный календарь,
     и flatpickr привязывается к нему, появляясь прямо под словом DATE. */
  #reservation-modal .date-field {
    position: relative;   /* порядок в группе уже верный: подпись, поле, карточки */
    margin-bottom: 0.15rem;
  }
  #reservation-modal #res-date {
    width: 100%;
    min-height: 48px;
    padding-right: 2.6rem;
    border: 1px solid rgba(201,169,110,0.35);
    border-radius: 10px;
    background: rgba(8,2,3,0.35);
    font-size: 1rem;
    cursor: pointer;
  }
  #reservation-modal .date-field .cal-icon {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #C9A96E;
    pointer-events: none;
  }
  .rsv-date-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: rgba(239,226,207,0.55);
    letter-spacing: 0;
    text-transform: none;
  }

  /* ── шаги ── */
  .modal-form.rsv-on-1 [data-rsv-step="2"],
  .modal-form.rsv-on-2 [data-rsv-step="1"] { display: none !important; }
  .modal-form.rsv-on-2 [data-rsv-step="2"] { display: flex; flex-direction: column; gap: 0.4rem; }
  /* согласие — обычная строка текста с чекбоксом, а не золотой лейбл */
  #reservation-modal .form-consent {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(239,226,207,0.82);
  }
  #reservation-modal .form-consent input[type="checkbox"] {
    width: 22px; height: 22px; flex: 0 0 22px; margin-top: 0.1rem;
  }
  #reservation-modal .form-consent a { color: #C9A96E; }
  .modal-form.rsv-on-1 [data-rsv-step="1"] { display: flex; flex-direction: column; gap: 0.55rem; }
  .modal-form .rsv-continue,
  .modal-form .modal-submit { display: flex; }
  .modal-form.rsv-on-1 .modal-submit { display: none !important; }

  /* ── счётчик гостей ── */
  .rsv-stepper {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 0.75rem;
  }
  .rsv-pm {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid rgba(201,169,110,0.5);
    border-radius: 10px;
    color: #C9A96E;
    font-size: 1.3rem;
    cursor: pointer;
  }
  .rsv-count {
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cream, #EFE2CF);
    background: none;
    border: none;
    border-bottom: 1px dashed rgba(201,169,110,0.35);   /* подсказка: можно нажать и ввести */
    min-height: 44px;
    cursor: pointer;
  }
  /* поле ввода количества — до 40 */
  .rsv-count-input {
    display: none;
    width: 100%;
    min-height: 44px;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    color: var(--cream, #EFE2CF);
    background: transparent;
    border: 1px solid #C9A96E;
    border-radius: 10px;
  }
  .rsv-stepper.is-editing .rsv-count { display: none; }
  .rsv-stepper.is-editing .rsv-count-input { display: block; }
  .rsv-stepper.is-max .rsv-pm[data-dir="1"] { opacity: 0.4; }

  /* индикатор шагов кликабелен */
  .rsv-step-go {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  /* ── карточки дат ── */
  .rsv-dates {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  .rsv-dates::-webkit-scrollbar { display: none; }
  .rsv-date {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 62px; min-height: 68px;
    display: grid; place-items: center; gap: 0.1rem;
    background: transparent;
    border: 1px solid rgba(201,169,110,0.3);
    border-radius: 12px;
    color: var(--cream, #EFE2CF);
    cursor: pointer;
  }
  .rsv-dow {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(239,226,207,0.66);
  }
  .rsv-dnum { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; }
  .rsv-date.is-on {
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
    border-color: #C9A96E;
  }

  /* ── чипы времени ── */
  .rsv-times {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .rsv-time {
    min-height: 44px;
    background: transparent;
    border: 1px solid rgba(201,169,110,0.3);
    border-radius: 10px;
    color: var(--cream, #EFE2CF);
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    cursor: pointer;
  }
  .rsv-time.is-on {
    background: linear-gradient(160deg, #5a1120 0%, #7a1d30 55%, #5a1120 100%);
    border-color: #C9A96E;
  }

  /* ── кнопки шага ── */
  .rsv-continue,
  #reservation-modal .modal-submit {
    width: 100%;
    min-height: 52px;
    border-radius: 10px;
    margin-top: 0.35rem;
    /* sticky прилипал к низу и накрывал текст согласия */
    position: static;
  }
  .rsv-call {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: #C9A96E;
    text-decoration: underline;
    text-underline-offset: 4px;
    min-height: 44px;
    line-height: 44px;
  }
  .rsv-back {
    align-self: flex-start;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: #C9A96E;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .rsv-note {
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(239,226,207,0.6);
  }

  .rsv-pm:focus-visible,
  .rsv-date:focus-visible,
  .rsv-time:focus-visible,
  .rsv-back:focus-visible,
  .rsv-continue:focus-visible {
    outline: 2px solid #C9A96E;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rsv-steps, .rsv-step-item, .modal-form { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   ФОРМА БРОНИ — шапка окна (мобильная версия)
   Подзаголовок ужат до одной строки, декоративная чёрточка убрана,
   форма подтянута к тексту.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Поля окна ужаты — строке нужна ширина */
  #reservation-modal .modal-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  #reservation-modal .modal-subtitle {
    /* Размер считается от ширины экрана с запасом ~15%: строка держится
       в одну даже если шрифт подставится системный и окажется шире Inter. */
    font-size: clamp(7.6px, calc(3.5vw - 3.4px), 12px);
    line-height: 1.45;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  #reservation-modal .modal-subtitle::after { display: none; }

  /* Дата выбирается только полем с календарём: карточки ближайших дней
     и подсказка под ними убраны. Сами кнопки остаются в разметке — на них
     завязан paintDates(), — но не показываются. */
  #reservation-modal .rsv-dates,
  #reservation-modal .rsv-date-hint { display: none; }
  /* было 70px до индикатора шагов — забираем 40% */
  /* было 42px до индикатора шагов — забираем ещё 40% */
  #reservation-modal .rsv-steps { margin-top: 0.875rem; }
}


/* Hero страницы вина: просвет над кнопкой равен просвету под дивайдером (24px) */
@media (max-width: 767px) {
  .wn-hero-sub { margin-bottom: 0.75rem; }
}


/* ═══════════════════════════════════════════════════════════
   HERO ВИНА — типографика с главной страницы (мобильная версия)
   Кегль и интерлиньяж заголовка уже совпадали, расходились трекинг
   заголовка и весь набор описания. Ширину колонок не трогаем.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.page-wines .wn-hero-title { letter-spacing: normal; }
  body.page-wines .wn-hero-sub {
    font-size: 0.984rem;          /* 15.744px — как .hero-text на главной */
    line-height: 1.55;
    color: rgba(244,235,220,0.86);
  }

  /* Заголовки карточек «More than a restaurant» — золотой #C9A96E,
     тот же, что у подписей вехи в истории (.story-label). */
  /* Скоуп через body.page-about не годится: у about.html нет класса на
     <body>, в отличие от остальных девяти страниц. Берём тот же селектор,
     что в about.css:1436 — mobile.css грузится позже и выигрывает. */
  .more-section .more-card h3 { color: #C9A96E; }
}


/* Карточки меню: текстовая колонка на 30% у́же, чтобы описание
   не заходило на светлую часть фотографии (было 302px, стало 211px). */
@media (max-width: 767px) {
  .mn-card-text h3,
  .mn-card-text p,
  .mn-card-text .mn-card-link { max-width: 10.56rem; }   /* ещё −20%: 211 → 169px */
}


/* ═══════════════════════════════════════════════════════════
   ВСТРОЕННЫЙ КАЛЕНДАРЬ В ФОРМЕ БРОНИ (мобильная версия)
   У flatpickr день-контейнер имеет min-width 307px — в карточке формы
   он не помещался, и суббота уезжала за край. Растягиваем по месту.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #reservation-modal .flatpickr-wrapper { display: block; width: 100%; }
  #reservation-modal .flatpickr-calendar.static {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
  }
  #reservation-modal .flatpickr-rContainer,
  #reservation-modal .flatpickr-days,
  #reservation-modal .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  #reservation-modal .flatpickr-day {
    max-width: none;
    height: 40px;
    line-height: 40px;
  }
}


/* Колонка описания в hero меню — на 5% у́же (202px → 192px) */
@media (max-width: 767px) {
  body.page-menu .mn-hero-sub { max-width: 12rem; }
}


/* Hero страницы вина: на телефоне заголовок короткий — «Rare Cellar»,
   описание убрано, после разделителя сразу кнопка. */
@media (max-width: 767px) {
  .wn-hero-title > span:not(.wnt-short) { display: none; }
  .wn-hero-title .wnt-short { display: block; }
  /* Описание начинается сразу со слова Wines: первые четыре слова
     («A curated collection of») показываем только на десктопе. */
  .wn-hero-sub .wns-full { display: none; }
  .wn-hero-sub .wns-short { display: inline; }

  /* Содержимое hero прижато к верху и отбито от шапки на те же 14px,
     что и на главной. Шапка подстраниц на телефоне — 99px. */
  body.page-wines .wn-hero {
    align-items: flex-start;
    /* Внутренние блоки hero несут свои отступы, поэтому здесь ноль:
       заголовок и так встаёт в 14px под шапкой — как на главной. */
    padding-top: 0;
    /* Хвост под кнопкой был 116px против 8px на главной: hero держал
       64svh при более коротком содержимом. Теперь высота по содержимому. */
    min-height: 0;
    padding-bottom: 0;
  }
  /* остаток хвоста давал .wn-hero-content своим padding-bottom 24px */
  body.page-wines .wn-hero-content { padding-bottom: 8px; }

  /* Снимок в hero крупнее вдвое: было 95% ширины панели, стало 190%.
     Панель обрезает лишнее, бутылки читаются заметно крупнее. */
  body.page-wines .wn-hero-photo { background-size: 190%; }

  /* Колонка заголовка и описания — 236px, как в hero главной страницы */
  body.page-wines .wn-hero-title,
  body.page-wines .wn-hero-sub { max-width: 14.75rem; }
}


/* Страница вина: золотые волосяные линии между секциями — только на телефоне
   они читались полосками поперёк экрана. Десктоп их сохраняет. */
@media (max-width: 767px) {
  body.page-wines .wn-philosophy,
  body.page-wines .wn-regions,
  body.page-wines .wn-varietals { border-top: none; }
}


/* Сорта на телефоне: три названия в строке, кегль мельче.
   Было два в строке крупным набором — блок выглядел разреженным. */
@media (max-width: 767px) {
  body.page-wines .wn-varietals-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem 0.4rem;
  }
  body.page-wines .wn-varietal-item { gap: 0.45rem; }
  body.page-wines .wn-varietal-name {
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
  }
  body.page-wines .wn-varietal-accent { width: 1.4rem; }
}


/* Нижний блок «Discover the full collection» на телефоне:
   заголовок мельче на 20% (35.2 → 28.16px), текст крупнее на 10% (15.36 → 16.9px). */
@media (max-width: 767px) {
  body.page-wines .wn-cta-title { font-size: 1.76rem; }
  body.page-wines .wn-cta-body { font-size: 1.056rem; line-height: 1.65; }
}


/* «Our Philosophy»: снизу было 104px против 56px сверху — складывались
   собственный нижний отступ секции (48px) и верхний у «Regions» (56px).
   Убираем первый, зазор остаётся ровно 56px с обеих сторон. */
@media (max-width: 767px) {
  body.page-wines .wn-philosophy { padding-bottom: 0; }
}


/* «Our Philosophy» оформлена как «Our Menus» на странице меню:
   золотая подпись и уходящая вправо линия. Линию даёт ::after,
   разметку не трогаем. Значения взяты из menu.css:155 и :166. */
@media (max-width: 767px) {
  body.page-wines .wn-philosophy-label {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #c9a96e;
    white-space: nowrap;
    margin: 0 0 1.5rem;
  }
  body.page-wines .wn-philosophy-label::after {
    content: '';
    display: block;
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(201,169,110,0.35), rgba(201,169,110,0.04));
  }
}


/* ═══════════════════════════════════════════════════════════
   ЧАСЫ В ФУТЕРЕ — ровный правый край пунктира
   Пунктир рисовался dotted-рамкой: её точки идут от левого края,
   поэтому у строк разной длины линия обрывалась на разной фазе —
   у Fri заметнее всего, у неё самый длинный поводок. Заменяем рамку
   фоновым узором и прижимаем его вправо: все строки кончаются ровно.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-info-card .footer-hours li::before {
    border-bottom: none;
    align-self: flex-end;
    height: 2px;
    margin-bottom: 0.42em;
    background-image: radial-gradient(circle at center,
      rgba(201,169,110,0.32) 0.75px, transparent 0.85px);
    background-size: 3px 2px;
    background-repeat: repeat-x;
    background-position: right center;
  }
}


/* Карточки меню выровнены по общей сетке страницы.
   Текст внутри карточки имел свои 24px поверх 20px у страницы —
   заголовки съезжали на 44px, тогда как «OUR MENUS» стоит на 20.
   Карточку раскрываем во всю ширину, а её текст отбиваем ровно на 20px. */
@media (max-width: 767px) {
  body.page-menu .mn-grid-wrap {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    width: auto;
  }
  body.page-menu .mn-card-text {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  /* во всю ширину скругление углов читается как огрех */
  body.page-menu .mn-card { border-radius: 0; }
}


/* Кнопка «Reserve a Table» в hero вина — только компьютерная версия */
@media (max-width: 767px) {
  body.page-wines .wn-hero-reserve { display: none; }
}




/* Кнопки в hero страниц «Вино» и «Кейтеринг» — формат кнопок главной
   (styles.css, .hero-actions .button): без скругления, высота 45px,
   кегль 12px с трекингом 0.14em. Только компьютерная версия. */
@media (min-width: 768px) {
  body.page-wines .wn-hero-cta,
  body.page-wines .wn-hero-reserve,
  body.page-catering .catr-hero-btn,
  body.page-catering .catr-hero-call {
    min-height: 0;
    padding: 12px 22.4px;
    border-radius: 0;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    font-weight: 600;
  }
  /* заливка как у главной кнопки главной страницы */
  body.page-catering .catr-hero-btn {
    background: #5A111A;
    border: 1px solid #5A111A;
    color: var(--cream, #EFE2CF);
  }
  body.page-catering .catr-hero-btn:hover {
    background: #6A1520;
    border-color: #6A1520;
  }
}


/* Отбивка от описания до кнопок в hero — как на главной (24px).
   Было: вино 12px, кейтеринг 52px (24 у абзаца плюс 28 у блока кнопок).
   Только компьютерная версия, мобильные значения не трогаем. */
@media (min-width: 768px) {
  body.page-wines .wn-hero-content .wn-hero-sub { margin-bottom: 1.5rem; }
  body.page-catering .catr-hero-actions { margin-top: 0; }
  body.page-brunch .br-hero-actions { margin-top: 0; }   /* было 35px до кнопок */
  /* Колонка описания у́же на 40% (800 → 480px). Заголовку ширину не
     режем: ему нужны все 800, иначе «GOOD COMPANY» переносится. */
  body.page-catering .catr-hero-body { max-width: 30rem; }
}


/* ═══════════════════════════════════════════════════════════
   ФОРМА КЕЙТЕРИНГА — мобильная версия
   Повторяет окно брони: те же классы .modal-*, тот же двухшаговый
   каркас .rsv-* (его правила выше по файлу не привязаны к id).
   Здесь только то, что в брони заскоплено на #reservation-modal.
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #catering-modal .modal {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    border-radius: 0;
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(90,17,26,0.28) 0%, transparent 62%),
      #080202;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
  }
  #catering-modal .modal-atmosphere { display: none; }

  #catering-modal .modal-content {
    padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  }
  #catering-modal .modal-close {
    top: calc(1rem + env(safe-area-inset-top));
    right: 1.25rem;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201,169,110,0.55);
    border-radius: 10px;
    background: transparent;
    color: var(--beige, #D9C2A3);
  }
  body:has(#catering-modal.is-open) .mobile-action-bar { display: none; }

  #catering-modal .modal-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: #C9A96E;
  }
  #catering-modal #catering-modal-title { font-size: clamp(1.85rem, 8.2vw, 2.2rem); }
  #catering-modal .modal-subtitle { font-size: 0.9rem; line-height: 1.5; }
  #catering-modal:has(#catering-success:not([hidden])) .rsv-steps { display: none; }

  #catering-modal .modal-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    background: linear-gradient(160deg, rgba(74,13,23,0.55) 0%, rgba(26,4,9,0.94) 62%);
    border: 1px solid rgba(201,169,110,0.22);
    border-radius: 18px;
    padding: 1.4rem 1.15rem 1.5rem;
  }
  #catering-modal .form-row { display: contents; }

  #catering-modal .modal-form label:not(.form-consent) {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: #C9A96E;
  }
  #catering-modal .modal-form input,
  #catering-modal .modal-form select,
  #catering-modal .modal-form textarea {
    font-size: 1rem;
    min-height: 48px;
    border-radius: 10px;
  }
  #catering-modal .modal-form textarea { min-height: 72px; resize: vertical; }

  #catering-modal .form-consent {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(239,226,207,0.82);
  }
  #catering-modal .form-consent input[type="checkbox"] {
    width: 22px; height: 22px; flex: 0 0 22px; margin-top: 0.1rem;
  }
  #catering-modal .form-consent a { color: #C9A96E; }

  #catering-modal .modal-submit {
    width: 100%;
    min-height: 52px;
    border-radius: 10px;
    margin-top: 0.35rem;
    position: static;
  }
  #catering-modal .rsv-steps { margin-top: 0.875rem; }
  /* номер и подпись шага — по базовой линии, как в окне брони */
  #catering-modal .rsv-step-item { align-items: baseline; }
}


/* Контакты: инфо-блок Address / Hours / Contact ниже на 20% —
   по 10% высоты (34px) срезано сверху и снизу. Только десктоп. */
@media (min-width: 768px) {
  body.page-contact .ct-info {
    padding-top: 46px;
    padding-bottom: 46px;
  }
}