/* ============================================================
   ROSIE'S — blocks.css
   Блоки страницы: шапка, секции, каталог, футер.
   Все значения — только через var(--token) из tokens.css.
   Порядок подключения: после components.css и sections.css.
   ============================================================ */


/* ============================================================
   ШАПКА — .site-header__city / __cart / счётчик
   ============================================================ */

/* Обёртка переключателя города: два чипа в ряд */
.site-header__city {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Кнопка корзины: позиционирование для бейджа-счётчика */
.site-header__cart {
  position: relative;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  /* Прижимаем корзину к правому краю: логотип слева, города по центру.
     Так делают почти все магазины, и рука тянется туда по привычке. */
  margin-left: auto;
}

/* Иконка корзины: фиксированный размер, не сжимается */
.site-header__cart-icon {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* Бейдж-счётчик: круглый, поверх иконки */
.site-header__cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  display: none; /* скрыт при нуле; .cart-count--has-items покажет */
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--rose);
  color: var(--ink-inv);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  z-index: 1;
  /* Пружинка управляется JS-классом */
  transition: transform var(--t-fast) var(--ease-back);
}

/* Видимое состояние счётчика: есть хотя бы один товар */
.cart-count--has-items {
  display: inline-flex;
}

/* Пружинка при добавлении товара */
.cart-count--bounce {
  animation: cart-count-bounce var(--t-base) var(--ease-back);
}

@keyframes cart-count-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55); }
  100% { transform: scale(1); }
}

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

/* Сумма рядом с иконкой: скрывается на мобиле */
.site-header__cart-sum {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 479px) {
  .site-header__cart-sum {
    display: none;
  }
}


/* ============================================================
   HERO — eyebrow, media, font-accent
   ============================================================ */

/* Надпись над заголовком: мелкая, отслеженная, приглушённая */
.hero__eyebrow {
  margin: 0 0 var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: var(--tracking-wide);
  text-transform: lowercase;
}

/* Правый визуальный блок hero (плейсхолдер или фото) */
/* .hero__media — правила живут в sections.css (там же order для мобилы).
   Дубликат отсюда убран: он перебивал min-height и порядок блоков. */

/* Утилита: акцентный шрифт Caveat + цвет --rose */
.font-accent {
  font-family: var(--font-accent);
  color: var(--rose);
}


/* ============================================================
   СЕКЦИЯ WHY — .why-grid
   В sections.css уже есть .why__grid (BEM), здесь — flat-класс
   ============================================================ */

/* 1 колонка на мобиле, 3 от 768 px */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-10);
  list-style: none;
  padding: 0;
}

@media (min-width: 480px) and (max-width: 767px) {
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
  }
}


/* ============================================================
   СЕКЦИЯ HOW — .how-steps, .how-step__body
   Используется в разметке как flat-классы (не BEM).
   sections.css покрывает .how__steps; здесь — отдельные классы.
   ============================================================ */

/* Список шагов: 1 колонка → 4 на десктопе */
.how-steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-top: var(--s-12);
  list-style: none;
  padding: 0;
}

/* Пунктирная линия-связка между шагами — только на широком экране */
@media (min-width: 900px) {
  .how-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .how-steps::before {
    content: '';
    position: absolute;
    top: 22px; /* по центру кружка с номером (44px / 2) */
    left: calc(22px + var(--s-6));
    right: calc(22px + var(--s-6));
    height: 0;
    border-top: 2px dashed var(--line-strong);
    z-index: 0;
    pointer-events: none;
  }
}

@media (min-width: 480px) and (max-width: 899px) {
  .how-steps {
    grid-template-columns: 1fr 1fr;
  }
}

/* Тело шага: текстовая часть рядом с номером */
.how-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.how-step__body .how-step__title {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
  margin: 0;
}

.how-step__body .how-step__text {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-normal);
  margin: 0;
}


/* ============================================================
   СЕКЦИЯ PAYMENT — .payment-list, .payment-item
   ============================================================ */

/* Сетка карточек оплаты */
.payment-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-top: var(--s-10);
  list-style: none;
  padding: 0;
}

@media (min-width: 600px) {
  .payment-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .payment-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Карточка способа оплаты */
.payment-item {
  /* Иконка НАД текстом, а не сбоку: в колонке ~250 px боковая иконка
     оставляла тексту ~170 px, и описание вставало «столбиком» по слову в строку. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-xs);
  transition:
    box-shadow var(--t-base) var(--ease-soft),
    transform  var(--t-base) var(--ease-soft);
}

.payment-item:hover {
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}

/* Иконка способа оплаты */
.payment-item__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--ink-2);
}

/* Строка заголовка с бейджем */
.payment-item__title-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-1);
}

/* Название способа оплаты */
.payment-item__title {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink);
  line-height: var(--lh-snug);
}

/* Тело карточки: заголовок + подсказка */
.payment-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* Подсказка */
.payment-item__hint {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: var(--lh-normal);
  margin: 0;
}





/* ============================================================
   СЕКЦИЯ ABOUT — .about-inner, .about__contacts
   В HTML используется .about-inner (без BEM-разделителя)
   ============================================================ */

/* Двухколоночный layout: медиа + контент */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-8), 6vw, var(--s-16));
  align-items: center;
}

@media (max-width: 767px) {
  .about-inner {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
}

/* Кнопки связи в секции «О нас» */
.about__contacts {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}



/* ============================================================
   АККОРДЕОН — .accordion__arrow, .accordion__panel
   ============================================================ */

/* Стрелка/плюс в триггере аккордеона */
.accordion__arrow {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: transform var(--t-base) var(--ease-back);
}

/* Раскрытое состояние: стрелка смотрит вверх */
.accordion__trigger[aria-expanded="true"] .accordion__arrow {
  transform: rotate(180deg);
  color: var(--rose);
}

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

/* Раскрывающаяся панель аккордеона */
.accordion__panel {
  overflow: hidden;
  /* JS анимирует max-height через inline-style */
}

/* Скрытая панель: браузерный hidden */
.accordion__panel[hidden] {
  display: none;
}

/* Контент внутри панели */
.accordion__panel .accordion__body {
  padding: 0 var(--s-7) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--ink-2);
  line-height: var(--lh-loose);
}

.accordion__panel .accordion__body p,
.accordion__panel .accordion__body li {
  margin-bottom: var(--s-2);
}

.accordion__panel .accordion__body p:last-child,
.accordion__panel .accordion__body li:last-child {
  margin-bottom: 0;
}

.accordion__panel .accordion__body ul,
.accordion__panel .accordion__body ol {
  padding-left: var(--s-6);
  margin-bottom: var(--s-3);
}

.accordion__panel .accordion__body strong {
  color: var(--ink);
  font-weight: 700;
}

.accordion__panel .accordion__body a {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 479px) {
  .accordion__panel .accordion__body {
    padding: 0 var(--s-5) var(--s-5);
  }
}


/* ============================================================
   ДОСТАВКА — .delivery-tabs, .delivery-panel
   ============================================================ */

/* Две таблетки-таба Паттайя / Бангкок */
.delivery-tabs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}

/* Панель условий доставки */
.delivery-panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding: var(--s-8);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

/* Скрытая панель неактивного города */
.delivery-panel--hidden,
.delivery-panel[hidden] {
  display: none;
}

/* Строка условия: иконка + текст */
.delivery-panel__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--ink-2);
  line-height: var(--lh-normal);
}

.delivery-panel__row strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: var(--s-1);
}

.delivery-panel__row p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.delivery-panel__row a {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Иконка строки условия */
.delivery-panel__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--pink-050);
}

@media (max-width: 479px) {
  .delivery-panel {
    padding: var(--s-5);
  }
}


/* ============================================================
   БАННЕР БЛИЖАЙШЕГО РЕЙСА В БАНГКОК — .delivery-trip-banner
   Ключевой элемент: клиент обязан увидеть дату ДО набора корзины.
   ============================================================ */

.delivery-trip-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--pink-050);
  border: 2px solid var(--rose);
  position: relative;
  overflow: hidden;
}

/* Акцентная полоска слева */
.delivery-trip-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--rose);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Иконка рейса */
.delivery-trip-banner__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--pink-100);
  color: var(--rose);
}

/* Текстовое тело баннера */
.delivery-trip-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Метка «Ближайший рейс» */
.delivery-trip-banner__label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rose);
  margin: 0;
}

/* Крупная дата рейса — основной акцент */
.delivery-trip-banner__date {
  font-family: var(--font-ui);
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Дата дедлайна приёма заказов */
.delivery-trip-banner__cutoff {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: var(--lh-normal);
  margin: 0;
}

/* Срочное состояние: сегодня или завтра закрывается приём */
.bangkok-banner--urgent .delivery-trip-banner,
.delivery-trip-banner.bangkok-banner--urgent {
  background: var(--warn-bg);
  border-color: var(--warn);
}

.bangkok-banner--urgent .delivery-trip-banner::before,
.delivery-trip-banner.bangkok-banner--urgent::before {
  background: var(--warn);
}

.bangkok-banner--urgent .delivery-trip-banner__label,
.delivery-trip-banner.bangkok-banner--urgent .delivery-trip-banner__label {
  color: var(--warn);
}

/* Баннер — самостоятельный элемент, может нести класс напрямую */
.delivery-trip-banner.bangkok-banner--urgent {
  background: var(--warn-bg);
  border-color: var(--warn);
}

.delivery-trip-banner.bangkok-banner--urgent::before {
  background: var(--warn);
}

.delivery-trip-banner.bangkok-banner--urgent .delivery-trip-banner__label {
  color: var(--warn);
}

@media (max-width: 479px) {
  .delivery-trip-banner {
    flex-direction: column;
    gap: var(--s-3);
  }

  .delivery-trip-banner__date {
    font-size: var(--fs-h3);
  }
}


/* ============================================================
   КАТАЛОГ — липкие табы, группы, заголовки
   ============================================================ */

/* Липкая обёртка табов под шапкой */
.catalog-tabs-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: rgba(255, 251, 249, 0.90);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  padding-block: var(--s-3);
  /* Лента во всю ширину экрана: элемент лежит вне .wrap,
     поэтому никаких отрицательных margin не нужно. */
  width: 100%;
  box-shadow: 0 4px 16px -4px rgba(110, 44, 59, 0.07);
}

/* Горизонтальный скролл табов на мобиле, snap, без переноса */
.catalog-tabs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
  padding-bottom: var(--s-1);
  /* Первый чип встаёт ровно по левому краю текста секции: половина
     свободного места плюс внутренний отступ сетки. */
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  /* Без этого scroll-snap прижимает первый чип к нулю, игнорируя padding,
     и «Пельмени» уезжали под левый край экрана. */
  scroll-padding-inline-start: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  /* Затухание ТОЛЬКО справа: слева гасить нечего, там начало списка,
     и первый чип из-за маски выглядел обрезанным.
     #000 здесь — не цвет, а альфа маски (непрозрачно → прозрачно),
     поэтому под запрет на хардкод цветов из CONTRACT §1 не подпадает. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent 100%);
}

.catalog-tabs::-webkit-scrollbar {
  display: none;
}

.catalog-tabs .chip {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Обёртка всех групп-категорий */
.catalog__groups {
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-12), 6vw, var(--s-20));
}

/* Группа одной категории */
.catalog__group {
  /* Отступ при скролле к якорю: учитываем шапку + панель табов (~56 px) */
  scroll-margin-top: calc(var(--header-h) + 68px);
}

/* Заголовок группы: эмодзи и текст В ОДНУ СТРОКУ */
.catalog__group-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

/* Иконка-эмодзи группы: не сжимается */
.catalog__group-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Заголовок группы категории */
.catalog__group-title {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 800;
  color: var(--ink);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}


/* ============================================================
   КАРТОЧКА ТОВАРА — расширения: .card--unavailable, .card__badge-wrap, .card__pieces
   ============================================================ */

/* Недоступная карточка: приглушена, фото обесцвечено, кнопки заблокированы */
.card--unavailable {
  opacity: 0.6;
  pointer-events: none; /* сама карточка некликабельна */
}

.card--unavailable .card__media img,
.card--unavailable .card__media-placeholder {
  filter: grayscale(1);
}

/* Разрешаем интерактивность только на бейдже (для читаемости) */
.card--unavailable .card__media .badge {
  pointer-events: auto;
}

/* Обёртка бейджа и плашек поверх медиа — единственный позиционированный
   элемент. Внутри всё в потоке, никаких наложений.
   Строка из двух групп: слева плашки состава, справа .card__status.
   left + right задают ширину во всё фото: иначе обёртка сжималась бы
   по содержимому, и правой группе некуда было бы уйти вправо.
   flex-wrap: не хватило ширины — правая группа переносится на следующую
   строку (и остаётся справа за счёт margin-left: auto), а не наезжает. */
.card__badge-wrap {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  right: var(--s-3);
  z-index: var(--z-base);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-1);
  pointer-events: none;
}

/* Правая группа: «Хит», «Новинка», «Без глютена», «Нет в наличии»
   и статусные плашки вроде «Премиум». Столбиком, по правому краю. */
.card__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-1);
  margin-left: auto;
}

/* Строка «≈ N шт»: мелкая, приглушённая */
.card__pieces {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  margin: 0;
}


/* ============================================================
   DOCK — .dock__inner (внутренняя раскладка)
   ============================================================ */

/* Внутренний flex-контейнер липкой панели корзины */
.dock__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
}


/* ============================================================
   ФУТЕР — .site-footer__nav, __contacts-label, __contact-link
   Тёмный фон --rose-deep задан в sections.css на .site-footer
   ============================================================ */

/* Навигация по странице в подвале */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.site-footer__nav a {
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-inv);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity var(--t-fast) var(--ease-soft);
}

.site-footer__nav a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Подпись «Связаться с нами» */
.site-footer__contacts-label {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 248, 246, 0.5);
  margin: 0 0 var(--s-2);
}

/* Ссылка-контакт в подвале */
.site-footer__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-inv);
  text-decoration: none;
  min-height: 44px; /* тач-зона */
  transition: opacity var(--t-fast) var(--ease-soft);
}

.site-footer__contact-link:hover {
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__contact-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}


/* ============================================================
   ТОСТЫ — .toast--visible, .toast--hiding, .toast__close
   Базовые стили .toast (display, padding, border-radius, animation) — в components.css.
   Здесь только состояния видимости, которых в components.css нет.
   ============================================================ */

/*
   JS-поток: toast монтируется → rAF → .toast--visible → setTimeout → .toast--hiding → remove.
   components.css даёт toast-in анимацию по умолчанию; .toast--visible подтверждает конечное состояние.
*/

/* Видимое состояние: JS добавляет после монтирования */
.toast--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Анимация ухода: JS добавляет перед удалением */
.toast--hiding {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition:
    opacity  var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
  pointer-events: none;
  /* Перебиваем стандартную анимацию компонента */
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .toast--visible,
  .toast--hiding {
    transition: none;
    transform: none;
    animation: none;
  }
}

/* Кнопка закрытия тоста */
.toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 44px; /* увеличиваем тач-зону через padding */
  padding: var(--s-2);
  box-sizing: content-box;
  border: none;
  background: transparent;
  color: currentColor;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-pill);
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}

.toast__close:hover {
  opacity: 1;
}


/* ============================================================
   СЕКЦИЯ HERO — .hero
   В HTML: <section class="section hero"> — нужна минимальная специфика
   ============================================================ */

/* Секция hero: без лишних правил — визуальные декорации в sections.css (#hero).
   Класс .hero задаёт только то, чего не покрывает #hero (ID-селектор). */
.hero {
  position: relative;
  overflow: hidden;
}


/* ============================================================
   ФОРМА ЧЕКАУТА — .checkout-datetime
   Создаётся в checkout.js: el('div', 'checkout-datetime')
   ============================================================ */

/* Контейнер секции даты и времени в форме чекаута */
.checkout-datetime {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}


/* ============================================================
   КНОПКА TELEGRAM ПРИ ОШИБКЕ — .order-error-tg
   Создаётся в checkout.js в showErrorScreen(): el('a', 'btn btn--primary btn--block order-error-tg')
   Основные стили даёт .btn + .btn--primary + .btn--block;
   .order-error-tg нужна только для идентификации (JS проверяет наличие через querySelector)
   ============================================================ */

/* Маркерный класс — стили берутся от .btn, .btn--primary, .btn--block */
.order-error-tg {
  margin-top: var(--s-3);
}


/* ============================================================
   ШТОРКА — .drawer__panel, .drawer--open .drawer__panel
   Открытое состояние задаётся классом .drawer--open на КОРНЕ шторки,
   селектор — .drawer--open .drawer__panel
   ============================================================ */

/* Внутренняя панель шторки — растягивается на весь drawer */
.drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  /* Кликабельна только панель: фон вокруг остаётся «прозрачным» для мыши,
     и клик по нему доходит до оверлея, который закрывает шторку. */
  pointer-events: auto;

  /* Мобиль: снизу */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 92svh;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background-color: var(--surface);
  box-shadow: var(--sh-xl);
  z-index: var(--z-drawer);

  /* Скрыта */
  transform: translateY(110%);
  visibility: hidden;
  transition:
    transform   var(--t-slow) var(--ease-out),
    visibility  0ms linear var(--t-slow);
}

/* Ручка-грабер на мобиле */
.drawer__panel::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 40px;
  height: 4px;
  background-color: var(--line-strong);
  border-radius: var(--r-pill);
  margin: var(--s-3) auto var(--s-1);
}

/* Открытое состояние шторки */
.drawer--open .drawer__panel {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform   var(--t-slow) var(--ease-out),
    visibility  0ms linear 0ms;
}

/* Десктоп: панель справа */
@media (min-width: 900px) {
  .drawer__panel {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0;
    width: 460px;
    max-height: 100%;
    height: 100%;
    border-radius: var(--r-2xl) 0 0 var(--r-2xl);
    transform: translateX(110%);
  }

  .drawer__panel::before {
    display: none;
  }

  .drawer--open .drawer__panel {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer__panel,
  .drawer--open .drawer__panel {
    transition: visibility 0ms linear;
  }
}

/* Плавность раскрытия аккордеона.
   Раньше высоту анимировал JS через max-height и scrollHeight — в связке
   с атрибутом hidden панель оставалась нулевой высоты, и вопросы
   не раскрывались. Теперь показ мгновенный, плавность — через opacity. */
/* Без плавности: панель показывается сразу вместе со снятием hidden.
   Вариант с opacity требовал навешивания класса следующим кадром и давал
   раскрытый, но полностью прозрачный ответ. Надёжность важнее анимации. */

/* Стрелка поворачивается на раскрытом вопросе */
.accordion__trigger--open .accordion__arrow {
  transform: rotate(180deg);
}

/* Подсказка под ценой: фасовка одна, но количество набирается счётчиком */
.card__pack-hint {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-2xs);
  line-height: 1.35;
  color: var(--ink-3);
}

/* ============================================================
   ДИЕТИЧЕСКИЕ МЕТКИ — .tag-row / .tag
   Несколько на позицию, под названием. Компактные, читаемые,
   с иконкой: так их сканируют глазами, не вчитываясь.
   ============================================================ */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid transparent;
}

.tag__icon {
  font-size: 0.9em;
  line-height: 1;
}

/* Тона подобраны приглушёнными: метки не должны спорить
   с розовым брендом и перетягивать внимание с фото и цены. */
.tag--green {
  background: var(--tone-green-bg);
  color: var(--tone-green-ink);
  border-color: var(--tone-green-line);
}

.tag--amber {
  background: var(--tone-amber-bg);
  color: var(--tone-amber-ink);
  border-color: var(--tone-amber-line);
}

.tag--blue {
  background: var(--tone-blue-bg);
  color: var(--tone-blue-ink);
  border-color: var(--tone-blue-line);
}

/* Плашка «Премиум» на картинке — тёмная, с золотым отливом */
.badge--premium {
  background: linear-gradient(135deg, var(--premium-from), var(--premium-to));
  color: var(--premium-ink);
}

/* Подсказка про бесплатную доставку в корзине.
   Раньше здесь было предупреждение о минимальном заказе, которое блокировало
   кнопку. Минимума нет: 700 ฿ — порог бесплатной доставки, то есть стимул
   добрать корзину, а не барьер. */
.cart-free-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
  border-radius: var(--r-md);
  background: var(--pink-050);
  border: 1px solid var(--pink-100);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}

.cart-free-hint--reached {
  background: var(--ok-bg);
  border-color: var(--tone-green-line);
  color: var(--tone-green-ink);
  font-weight: 600;
}

.cart-free-hint__icon {
  flex: none;
  line-height: 1.3;
}

/* ============================================================
   ЧИТАЕМАЯ ШИРИНА ТЕКСТА ВНУТРИ ШИРОКИХ СЕКЦИЙ
   Секции выровнены по общей сетке 1180 px, чтобы края совпадали
   со всей страницей. Но строка текста в 1180 px нечитаема, поэтому
   ограничиваем измеряемую длину строки, а не сам контейнер.
   ============================================================ */

.section__lead {
  max-width: 60ch;
  margin-inline: auto;
}

.accordion__panel .accordion__body p,
.accordion__panel .accordion__body li {
  max-width: 78ch;
}

/* ============================================================
   ФОН ГЕРОЯ — фотография + градиентная вуаль
   ============================================================ */

#hero {
  position: relative;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Смещаем кадр вправо: слева на фотографии скалка и миска с мукой —
     самая спокойная зона, поверх неё и ложится текст. */
  object-position: 70% 50%;
  display: block;
}

/* Вуаль. Фотография светлая и пёстрая, тёмный текст на ней теряется.
   Слева даём почти непрозрачный кремовый, к правому краю сводим на нет —
   так снимок остаётся виден, а заголовок читается без «плашки». */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Плотную зону тянем до 52%: текстовая колонка заканчивается примерно
     на 49% ширины экрана, и на прежнем градиенте кнопки уже теряли контраст. */
  background:
    linear-gradient(
      100deg,
      rgba(255, 251, 249, 0.92) 0%,
      rgba(255, 251, 249, 0.86) 38%,
      rgba(255, 251, 249, 0.70) 54%,
      rgba(255, 251, 249, 0.18) 76%,
      rgba(255, 251, 249, 0.00) 100%
    ),
    /* Мягкое затухание к нижней границе — стык со следующей секцией */
    linear-gradient(
      to bottom,
      transparent 60%,
      var(--bg) 100%
    );
}

/* На узких экранах текст идёт поверх всей фотографии, поэтому вуаль
   становится вертикальной и заметно плотнее. */
@media (max-width: 900px) {
  .hero__bg img {
    object-position: 60% 45%;
  }

  .hero__scrim {
    /* Было 0.90–0.96 по всей высоте — фотография превращалась в белое пятно.
       Теперь плотно только там, где лежит текст, а низ кадра открыт. */
    background:
      linear-gradient(
        to bottom,
        rgba(255, 251, 249, 0.86) 0%,
        rgba(255, 251, 249, 0.80) 42%,
        rgba(255, 251, 249, 0.55) 72%,
        rgba(255, 251, 249, 0.75) 100%
      );
  }

  .hero__content {
    max-width: 100%;
  }
}


/* Прозрачная кнопка поверх фотографии нечитаема — подкладываем полупрозрачный
   фон с размытием. Матовое стекло вместо сплошной заливки, чтобы снимок
   продолжал просвечивать. */
#hero .btn--ghost {
  background-color: rgba(255, 251, 249, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: var(--line-strong);
}

#hero .btn--ghost:hover {
  background-color: rgba(255, 251, 249, 0.95);
}

/* Герой перерастал экран, и строка доверия обрезалась снизу. */
@media (min-width: 901px) {
  #hero {
    min-height: min(78vh, 720px);
  }
}

/* Знак в подвале. Файл тот же, что в шапке (без подложки), но подвал тёмный,
   а знак винного цвета — на нём он бы утонул. Осветляем фильтром вместо
   заведения отдельного белого файла. */
/* 224 px: в квадрате файла знак занимает около 60%, и при 56 px колпак
   с надписью выходили размером с иконку — в подвале терялись.
   Владелец попросил крупнее ещё дважды: 56 → 112 → 224.
   Над знаком в файле ~40 px пустого поля — отрицательный отступ поднимает
   его вровень с первой строкой навигации и контактов. */
.site-footer__logo-img {
  display: block;
  width: 224px;
  height: 224px;
  margin-top: calc(-1 * var(--s-8));
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ============================================================
   БУРГЕР И НАВИГАЦИЯ ПО РАЗДЕЛАМ
   Страница длинная (каталог сам по себе ~14 000 px), без быстрого
   перехода к блокам ориентироваться в ней тяжело.
   ============================================================ */

.site-header__burger {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft);
}

.site-header__burger:hover {
  background: var(--pink-050);
  border-color: var(--rose-soft);
}

/* Три полоски рисуем псевдоэлементами — без лишней разметки */
.site-header__burger-lines,
.site-header__burger-lines::before,
.site-header__burger-lines::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) linear;
}

.site-header__burger-lines {
  position: relative;
}

.site-header__burger-lines::before,
.site-header__burger-lines::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-header__burger-lines::before { top: -6px; }
.site-header__burger-lines::after  { top: 6px; }

/* Открытое состояние — крестик */
.site-header__burger[aria-expanded="true"] .site-header__burger-lines {
  background: transparent;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-lines::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-lines::after {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(46, 27, 32, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.nav-menu {
  position: fixed;
  top: var(--header-h);
  /* Выпадает справа — там же, где сама кнопка-бургер.
     Раньше панель уезжала к левому краю, и связь с кнопкой терялась. */
  right: 0;
  z-index: var(--z-header);
  width: min(300px, 86vw);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--s-4);
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-bottom-left-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}

.nav-menu__list {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-menu__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  min-height: 44px;
  transition: background var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft);
}

.nav-menu__link:hover {
  background: var(--pink-050);
  color: var(--rose);
}

.nav-menu__cta {
  margin-top: var(--s-2);
}

/* ============================================================
   ФИЛЬТРЫ КАТАЛОГА по диетическим меткам
   ============================================================ */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  max-width: var(--wrap);
  margin: var(--s-6) auto 0;
  padding-inline: var(--gutter);
}

.filter-bar__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  margin-right: var(--s-1);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 40px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft);
}

.filter-chip:hover {
  border-color: var(--rose-soft);
}

/* Нажатое состояние окрашиваем в тон самой метки — так связь
   между фильтром и значком на карточке считывается сразу. */
.filter-chip[aria-pressed="true"] {
  color: var(--ink);
}

.filter-chip--green[aria-pressed="true"] {
  background: var(--tone-green-bg);
  border-color: var(--tone-green-strong);
}

.filter-chip--amber[aria-pressed="true"] {
  background: var(--tone-amber-bg);
  border-color: var(--tone-amber-strong);
}

.filter-chip--blue[aria-pressed="true"] {
  background: var(--tone-blue-bg);
  border-color: var(--tone-blue-strong);
}

.filter-reset {
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rose);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Город в меню — виден только там, где он спрятан из шапки */
.nav-menu__city {
  display: none;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
  /* Бургер, логотип, два города и корзина в 375 px не помещаются —
     корзина обрезалась. Города уезжают в меню. */
  .site-header__city {
    display: none;
  }

  .nav-menu__city {
    display: flex;
  }

  .site-header__logo img {
    /* Шапка на телефоне 60 px, знак 42 — по 9 px по краям.
       Ниже не опускаем: рядом стоят корзина и бургер по 44×44,
       им нужен воздух, иначе кнопки упрутся в края шапки. */
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   ШАПКА НА ТЕЛЕФОНЕ: корзина как компактная иконка
   Сумма ниже 480 px скрыта, но у кнопки оставался padding 12/20 от .btn —
   получалась пустая рамка 66×50 с иконкой 22 px внутри. Приводим её
   к тому же формату, что и бургер рядом: квадрат 44×44.
   ============================================================ */

@media (max-width: 479px) {
  .site-header__cart {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
    gap: 0;
    border-radius: var(--r-md);
  }

  /* Счётчик перестаёт быть скрытым от глаз и превращается в бейдж
     поверх иконки — иначе на телефоне не видно, что в корзине что-то есть. */
  .site-header__cart-count.visually-hidden {
    position: absolute;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    overflow: visible;
    white-space: nowrap;

    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding-inline: 4px;
    border-radius: var(--r-pill);
    background: var(--rose);
    color: var(--ink-inv);
    font-size: var(--fs-2xs);
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg);
  }

  /* Пустую корзину бейджем не отмечаем */
  .site-header__cart-count.visually-hidden:not(.cart-count--has-items) {
    display: none;
  }
}

/* Мелочи, оставшиеся без описания */

.cart-free-hint__text {
  flex: 1;
  min-width: 0;
}

/* Кнопка «Уточнить дату в Telegram» в баннере Бангкока */
.delivery-trip-banner__cta {
  margin-top: var(--s-3);
  align-self: flex-start;
}

/* Приём заказов закрывается сегодня или завтра — подсвечиваем */
.delivery-trip-banner__cutoff--urgent {
  color: var(--warn);
  font-weight: 700;
}

/* ============================================================
   КАТАЛОГ: НИЧЕГО НЕ НАШЛОСЬ
   Показывается, когда набор фильтров не даёт ни одной позиции.
   ============================================================ */

.catalog-empty {
  max-width: var(--wrap);
  margin: var(--s-10) auto 0;
  padding: var(--s-12) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
}

.catalog-empty__icon {
  font-size: 2.5rem;
  line-height: 1;
  opacity: 0.55;
}

.catalog-empty__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--ink);
}

.catalog-empty__text {
  margin: 0 0 var(--s-2);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--ink-3);
}

/* ============================================================
   ГАЛЕРЕЯ ТОВАРА в шторке
   Один снимок — просто картинка. Несколько — лента с прилипанием.
   ============================================================ */

.gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--r-xl);
  background: var(--pink-100);
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

/* Несколько кадров: следующий выглядывает краем. Без этого намёка лента
   выглядит как обычная картинка — точки внизу замечают уже после. */
.gallery__track--multi {
  gap: var(--s-2);
  background: none;
  border-radius: 0;
}

/* Хвост-распорка: иначе последний кадр упирается в правый край и не может
   долистаться до начала контейнера — прилипание его отбрасывает назад. */
.gallery__track--multi::after {
  content: '';
  flex: 0 0 12%;
}

.gallery__track--multi .gallery__slide {
  flex-basis: 88%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--pink-100);
}

.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  display: block;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.gallery__slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.gallery__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease-back);
}

.gallery__dot--active {
  background: var(--rose);
  transform: scale(1.25);
}

.gallery__hint {
  display: block;
  margin-top: var(--s-2);
  text-align: center;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
}

/* ============================================================
   ПРОСМОТР ФОТО ВО ВЕСЬ ЭКРАН
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  background: rgba(46, 27, 32, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: lightbox-in var(--t-base) var(--ease-soft);
}

/* Обязательно: display: flex выше перебивает браузерное
   [hidden] { display: none }, и закрытый просмотр остался бы
   висеть поверх всей страницы. */
.lightbox[hidden] {
  display: none;
}

@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lightbox__figure {
  max-width: min(92vw, 900px);
  max-height: 84dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 100%;
  max-height: 84dvh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Снимков несколько — нажатие на кадр листает (см. catalog.js) */
.lightbox--multi .lightbox__img {
  cursor: pointer;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--r-pill);
  background: rgba(255, 251, 249, 0.14);
  color: var(--ink-inv);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}

/* Та же ловушка, что и у .lightbox: display: flex выше сильнее
   браузерного [hidden] { display: none }. На товаре с одним снимком
   стрелки прячутся именно через hidden — без этой строки они остались бы. */
.lightbox__close[hidden],
.lightbox__nav[hidden] {
  display: none;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 251, 249, 0.28);
}

.lightbox__close {
  top: var(--s-4);
  right: var(--s-4);
  width: 44px;
  height: 44px;
  font-size: var(--fs-lg);
  line-height: 1;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
  padding-bottom: 4px;   /* оптическая компенсация шеврона */
}

.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }

.lightbox__counter {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: rgba(255, 251, 249, 0.14);
  color: var(--ink-inv);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* На телефоне стрелки мешают свайпу и закрывают кадр — прячем,
   листание там пальцем. */
@media (max-width: 640px) {
  .lightbox__nav {
    display: none;
  }

  .lightbox__figure {
    max-width: 100%;
  }
}