/* ═══════════════════════════════════════════════════════
   Купи Слона — витрина

   Палитра снята пипеткой с логотипа: тёмно-синий и бирюза.
   Шрифт Nunito, один вариативный файл на все насыщенности, 39 КБ.

   🔴 Два правила, которые держат весь вид:
   1. один радиус у всех плашек — var(--r);
   2. стекло только под карточки и панели. Длинный текст описаний
      ставится на плотный фон: на полупрозрачном его читать тяжело,
      а у нас 77 карточек как раз ради чтения.
   ═══════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-var.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── из логотипа ── */
  --navy:        #162D56;
  --navy-700:    #1E3E6F;
  --teal:        #2BC9CA;
  --teal-light:  #43DCDD;
  --teal-dark:   #17A9B5;

  --blue:        #1A5C9E;
  --blue-600:    #1E6CB8;
  --aqua:        #17A9B5;
  --aqua-light:  #E4F8F8;
  --sky:         #E9F3FB;
  --sand:        #F7A440;

  --ink:         #10203A;
  --ink-2:       #33475C;
  --muted:       #6B8095;
  --line:        #DFE8F1;
  --line-2:      #EEF4F9;
  --bg:          #EFF5FA;
  --white:       #fff;

  --ok:          #16875A;
  --ok-bg:       #E8F5EF;
  --warn:        #C77D12;
  --danger:      #CF3F3F;

  /* ── акцент раздела. Переопределяется ниже по [data-sect] ── */
  --accent:      var(--teal);
  --accent-soft: #E4F8F8;

  /* ── один радиус на все плашки ── */
  --r:       20px;   /* панели, карточки, фото, окна */
  --r-s:     12px;   /* мелочь внутри плашки */
  --r-btn:   14px;   /* кнопки и поля */
  --r-pill:  999px;  /* чипы, теги, значки */
  /* прежние имена оставлены, чтобы не править 700 строк ниже */
  --r-xl: var(--r); --r-lg: var(--r); --r-md: var(--r-btn); --r-sm: var(--r-s);

  /* ── тени: одна шкала, мягкая ── */
  --sh-1: 0 1px 2px rgba(16,32,58,.04), 0 3px 10px rgba(22,45,86,.05);
  --sh-2: 0 2px 6px rgba(16,32,58,.05), 0 14px 34px rgba(22,45,86,.08);
  --sh-3: 0 10px 24px rgba(16,32,58,.08), 0 30px 64px rgba(22,45,86,.14);

  /* ── парение: три слоя тени ──────────────────────────
     контактная под самой плашкой + средняя + широкая мягкая.
     Одна тень не даёт ощущения, что плашка висит в воздухе. */
  --float-s:  0 1px 2px rgba(16,32,58,.05), 0 6px 14px -8px rgba(22,45,86,.18);
  --float:    0 2px 4px rgba(16,32,58,.06), 0 14px 28px -12px rgba(22,45,86,.22),
              0 40px 70px -32px rgba(22,45,86,.28);
  --float-lg: 0 3px 8px rgba(16,32,58,.08), 0 24px 46px -14px rgba(22,45,86,.28),
              0 64px 104px -42px rgba(22,45,86,.36);
  /* кромка стекла: светлый блик сверху, лёгкое затемнение снизу */
  --edge: inset 0 1.5px 0 rgba(255,255,255,.98),
          inset 0 0 0 1px rgba(255,255,255,.42),
          inset 0 -20px 30px -22px rgba(22,45,86,.34);

  /* ── объём без размытия фона ──────────────────────────────────────
     🔴 Настоящее `backdrop-filter` стоит дорого: браузер обязан заново
     прочитать и размыть всё, что под элементом, на каждом кадре. Когда
     таких элементов на странице 72 — а именно столько их и было, — сайт
     показывает 5 кадров в секунду вместо 52. Проверено замером.
     Поэтому стекло рисуем: блик по верхней кромке, лёгкая тень по нижней
     и мягкий внутренний градиент. Под нашими плашками фон светлый
     и однотонный — размывать там нечего, а выглядит так же. */
  --steklo:   linear-gradient(168deg, rgba(255,255,255,.96), rgba(255,255,255,.74));
  --kromka:   inset 0 1px 0 rgba(255,255,255,1),
              inset 0 -1px 0 rgba(22,45,86,.07),
              inset 0 0 0 1px rgba(255,255,255,.55);
  /* 🔴 Тени короткие. Прежние растягивались на 70–104 пикселя, и на светлом
     фоне браузер не мог сгладить такую растяжку — по краю шли ступеньки,
     те самые «полоски». Объём даёт блик и контактная тень под кромкой,
     а не огромное пятно снизу. */
  --sh-btn:   0 1px 1px rgba(22,45,86,.05), 0 3px 8px -3px rgba(22,45,86,.16);
  --sh-btn-h: 0 2px 3px rgba(22,45,86,.07), 0 10px 20px -8px rgba(22,45,86,.24);
  --sh-mega:  0 4px 10px -4px rgba(22,45,86,.14), 0 24px 48px -20px rgba(22,45,86,.30);

  /* ── стекло ── */
  --glass:      rgba(255,255,255,.72);
  --glass-solid: rgba(255,255,255,.93);
  --glass-line: rgba(255,255,255,.75);
  --blur: saturate(1.6) blur(22px);

  --wrap: 1280px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ── Акценты по разделам ──────────────────────────────
   Каркас, шрифт и радиусы одни на весь сайт — меняется только акцент
   и подложка. Переход из аквариума в собак должен читаться как другой
   отдел одного магазина, а не как другой сайт.
   ═══════════════════════════════════════════════════ */
[data-sect="akvarium"] { --accent: #17A9B5; --accent-soft: #E4F8F8; }
[data-sect="koshki"]   { --accent: #D99A4E; --accent-soft: #FBF1E3; }
[data-sect="sobaki"]   { --accent: #C97B3C; --accent-soft: #FAEDE1; }
[data-sect="gryzuny"]  { --accent: #6FA84A; --accent-soft: #EEF6E7; }
[data-sect="pticy"]    { --accent: #4A90C8; --accent-soft: #E8F2FA; }
[data-sect="cherepahi"]{ --accent: #7E9A52; --accent-soft: #F0F4E8; }

*, *::before, *::after { box-sizing: border-box; }
/* 🔴 Браузер прячет [hidden] правилом display:none, но у него вес ноль:
   любой наш `display: flex` по классу его перебивает. Из-за этого окно
   помощника висело раскрытым на каждой странице. Ставим один раз здесь,
   чтобы не ловить это же в следующем блоке. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16.5px/1.65 'Nunito', ui-sans-serif, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
}

/* ── Фон ───────────────────────────────────────────────
   🔴 Рисуется кодом, а не фотографией. Фото рифа — это мегабайты,
   а скорость мы обещали закладывать сразу. Здесь всё вместе весит
   меньше килобайта и грузится мгновенно.

   Три слоя: мягкие цветные пятна, волна у верхней кромки и сетка
   пузырьков. Всё очень тихое — фон не должен спорить с товаром.
   ═══════════════════════════════════════════════════ */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* пятна и волна */
body::before {
  background:
    radial-gradient(60rem 30rem at 12% -6%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(48rem 26rem at 92% 4%, rgba(26,92,158,.13), transparent 70%),
    radial-gradient(40rem 30rem at 50% 108%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #F7FBFE 0%, var(--bg) 46%, #E7EFF7 100%);
  transition: background .4s var(--ease);
}

/* пузырьки */
body::after {
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.7) 6%, transparent 7%);
  background-size: 78px 78px, 52px 52px;
  background-position: 0 0, 26px 34px;
  opacity: .45;
}

img { max-width: 100%; display: block; }
/* Латинские названия, штрихкоды и ссылки не должны распирать колонку. */
h1, h2, h3, p, td, th, li, dd, dt { overflow-wrap: break-word; }
a { color: var(--blue); text-decoration: none; transition: color .15s; }
a:hover { color: var(--navy); }

h1,h2,h3,h4 { line-height: 1.2; letter-spacing: -.015em; margin: 0; }
h1 { font-size: clamp(27px, 3.4vw, 38px); font-weight: 750; }
h2 { font-size: clamp(21px, 2.4vw, 27px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 650; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.full { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ══ Шапка ══════════════════════════════════════════ */

.header { background: var(--white); position: sticky; top: 0; z-index: 60;
          box-shadow: 0 1px 0 var(--line); }
.header__top {
  /* логотип · поиск · «отложено» · телефон.
     🔴 Колонок именно четыре: пока их было три, счётчик отложенного
     выталкивал телефон на вторую строку и шапка разъезжалась. */
  display: grid; grid-template-columns: auto minmax(0,1fr) auto auto;
  gap: 20px; align-items: center; padding: 12px 0 10px;
}
@media (max-width: 1240px) { .header__top { gap: 14px; } }
/* Уже 1080 в строку четыре блока не помещаются. Раскладываем в два ряда:
   сверху логотип, счётчик и телефон, поиск — на всю ширину под ними.
   🔴 Телефон остаётся в верхнем ряду намеренно: позвонить — главное
   действие на витрине, и номер не должен уезжать под сгиб. */
@media (max-width: 1080px) {
  .header__top {
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-areas: "logo fav phone" "search search search";
    row-gap: 12px;
  }
  .logo         { grid-area: logo; }
  .head-fav     { grid-area: fav; justify-self: end; }
  .head-contact { grid-area: phone; }
  .search       { grid-area: search; }
}
@media (max-width: 560px) {
  .head-contact__note { display: none; }
  .head-contact__phone { font-size: 16px; }
}
/* Логотип в шапке — векторный файл, не текст. Высота задана, ширина
   считается сама: так он не дёргается при загрузке страницы.

   🔴 Крупно намеренно: это лицо магазина, а не служебная пометка.
   В первой версии стоял 46 px и терялся — не читалось ни название,
   ни сам слон. */
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 92px; width: auto; transition: transform .3s var(--ease); }
.logo:hover img { transform: scale(1.04) rotate(-.6deg); }
@media (max-width: 1100px) { .logo img { height: 74px; } }
@media (max-width: 780px)  { .logo img { height: 62px; } }
@media (max-width: 480px)  { .logo img { height: 50px; } }

/* 🔑 Поиск уже: он рабочий инструмент, а лицо сайта — знак и название.
   Во всю ширину поле перетягивало на себя весь верх шапки. */
.search { position: relative; width: 100%; max-width: 520px; justify-self: center; }
.search input {
  width: 100%; height: 46px; padding: 0 50px 0 18px;
  border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 15px; background: var(--bg); color: var(--ink);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus {
  outline: none; border-color: var(--blue); background: var(--white);
  box-shadow: 0 0 0 4px rgba(26,92,158,.1);
}
.search button {
  position: absolute; right: 5px; top: 5px; width: 36px; height: 36px;
  border: 0; border-radius: 9px; cursor: pointer; color: #fff; font-size: 16px;
  background: var(--blue); transition: background .15s;
}
.search button:hover { background: var(--navy); }

.head-contact { text-align: right; line-height: 1.3; }
.head-contact__phone { font-size: 18px; font-weight: 750; letter-spacing: -.01em; }
.head-contact__phone a { color: var(--ink); }
.head-contact__note { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* 🔴 Синей полосы больше нет. Разделы — отдельные парящие пилюли
   на общем фоне: полоса поперёк экрана выглядела дёшево. */
.nav { background: transparent; padding: 4px 0 14px; }
.nav__list { display: flex; gap: 9px; margin: 0; padding: 4px 0; list-style: none;
             overflow-x: auto; scrollbar-width: none;
             justify-content: center;
             /* safe center: когда разделы перестают помещаться, выравнивание
                снимается — иначе первые пункты уехали бы за левый край
                и добраться до них прокруткой было нельзя. */
             justify-content: safe center; }
.nav__list::-webkit-scrollbar { display: none; }
.nav__list li { flex: none; }
/* 🔴 Радиус один на весь сайт — `--r-btn`. Здесь стояла «таблетка»
   в обход правила: кнопки разделов были овальными, а все остальные
   на сайте — со скруглёнными углами. */
.nav__list .nav__btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 17px;
  color: var(--ink-2); white-space: nowrap; font-size: 15px; font-weight: 640;
  border-radius: var(--r-btn);
  background: var(--steklo);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--sh-btn), var(--kromka);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s, color .16s;
}
.nav__list .nav__btn:hover,
.nav__item.is-open > .nav__btn {
  transform: translateY(-1px); box-shadow: var(--sh-btn-h), var(--kromka);
  color: var(--navy);
}
.nav__list .nav__btn.is-active {
  background: linear-gradient(168deg,
    color-mix(in srgb, var(--accent) 88%, white),
    color-mix(in srgb, var(--accent) 76%, var(--navy)));
  color: #fff; border-color: color-mix(in srgb, var(--accent) 55%, white);
  box-shadow: var(--sh-btn-h),
              inset 0 1px 0 rgba(255,255,255,.45),
              inset 0 -1px 0 rgba(22,45,86,.18);
}

/* ── Дерево раздела, раскрывается под кнопкой ─────────────────────────
   🔴 Панель не должна закрываться, пока мышь идёт к ней по диагонали:
   задержку держит `menu.js`, здесь только вид. */
/* Панели живут здесь — вне прокручиваемой полки, иначе их срезает. */
.nav__panels { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; }
.mega[hidden] { display: none !important; }
.mega {
  position: absolute; left: 0; top: 8px; z-index: 70;
  width: min(var(--mega-w, 600px), 92vw);
  /* 🔴 Высоту ограничиваем: у «Аквариума» 11 подразделов и 58 пунктов
     под ними — без предела панель уходит ниже экрана, и до нижних
     строк не добраться вовсе. */
  max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px 14px;
  border-radius: var(--r);
  /* 🔴 Непрозрачно. На 95 % под панелью проступало фото с главного
     экрана, и список читался поверх рыбы. Меню — это меню, а не стекло:
     сквозь него ничего видеть не нужно. */
  background: linear-gradient(168deg, #ffffff, #F8FBFD);
  border: 1px solid var(--line);
  box-shadow: var(--sh-mega), inset 0 1px 0 #fff;
  animation: mega-vniz .16s var(--ease);
}
@keyframes mega-vniz { from { opacity: 0; transform: translateY(-6px) } }
/* 🔴 Мостик между кнопкой и панелью: без него мышь проходит по зазору
   мимо обоих, и панель закрывается на полпути. */
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
/* 🔴 Текучие колонки, а не сетка. В сетке каждый подраздел занимал свою
   ячейку целиком: рядом с «Рыбками» на тринадцать строк вставали
   «Аквариумы» на одну, и полколонки зияло пустотой. Здесь содержимое
   перетекает и укладывается плотно. */
.mega__in { columns: 3 210px; column-gap: 26px; }
.mega__col { break-inside: avoid; page-break-inside: avoid;
             display: inline-block; width: 100%; padding-bottom: 12px; }
.mega__head {
  display: flex; align-items: baseline; gap: 7px;
  font-weight: 700; font-size: 14.5px; color: var(--navy);
  padding: 6px 8px; border-radius: var(--r-s); text-decoration: none;
}
.mega__head b { font-weight: 600; font-size: 11.5px; color: var(--muted);
                font-variant-numeric: tabular-nums; }
.mega__head:hover { background: var(--accent-soft); color: var(--accent); }
.mega__sub { list-style: none; margin: 0; padding: 0 0 0 8px; }
.mega__sub a {
  display: flex; align-items: baseline; gap: 7px;
  padding: 4px 8px; border-radius: var(--r-s);
  font-size: 13.5px; color: var(--ink-2); text-decoration: none;
}
.mega__sub b { font-weight: 500; font-size: 11px; color: var(--muted);
               font-variant-numeric: tabular-nums; }
.mega__sub a:hover { background: var(--accent-soft); color: var(--accent); }
.mega__all {
  display: block; margin-top: 8px; padding: 9px 10px;
  border-top: 1px solid var(--line-2);
  font-size: 13.5px; font-weight: 650; color: var(--accent); text-decoration: none;
}
.mega__all:hover { color: var(--navy); }
.nav__count { color: inherit; opacity: .55; }
.nav__emoji { font-size: 17px; }
.nav__count { font-size: 11.5px; opacity: .6; font-variant-numeric: tabular-nums; }

/* Полоса предпросмотра: сотрудник смотрит страницу до публикации. */
.preview-bar {
  background: #fff4e0; border: 1px solid #f0d6a8; border-radius: var(--r-lg);
  padding: 13px 18px; margin: 14px 0 4px; font-size: 14px; color: #7a5510;
  line-height: 1.55;
}
.preview-bar b { color: #5c3f08; }
.preview-bar a { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* ══ Крошки ═════════════════════════════════════════ */

.crumbs { display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
          padding: 18px 0 6px; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }

/* ══ Главная ════════════════════════════════════════ */

.hero {
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(23,162,184,.28), transparent 60%),
    linear-gradient(135deg, var(--navy) 0%, var(--blue) 58%, #2477c4 100%);
  padding: 52px 44px 56px; position: relative; overflow: hidden;
}
@media (max-width: 700px) { .hero { padding: 34px 22px 38px; } }
.hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 68%);
}
/* ── Главный экран ────────────────────────────────────────────────────
   Слева — кто мы и куда идти, справа — четыре настоящие фотографии
   живого товара, каждая ведёт в свою карточку.

   🔴 Фотографии не украшение: пустая правая половина синего
   прямоугольника выглядела как незаполненный макет, а четыре снимка
   из разных разделов за секунду показывают, что магазин не только
   про аквариум. Берём только живой товар, который есть на полке.
   ═══════════════════════════════════════════════════════════════════ */
/* Первый экран: слева текст с кнопками, справа аквариум.
   🔴 Пробовали столбиком с крупным аквариумом по центру — Алексей
   посмотрел вживую и вернул обратно: «так лучше». */
.hero__in {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 40px; align-items: center;
}
@media (max-width: 1020px) { .hero__in { grid-template-columns: 1fr; gap: 28px; } }
.hero__text { max-width: 620px; }

/* ══ Аквариум на первом экране ═════════════════════════════════════
   Рамка делает из видео именно аквариум, а не «ролик на странице»:
   тёмный кант как профиль стекла, блик по верхней грани и мягкая тень
   внутрь — будто смотришь сквозь стекло. */
.akva { margin: 0; }
.akva__steklo {
  position: relative; overflow: hidden;
  border-radius: 16px; aspect-ratio: 16 / 10;
  background: #0d2233;
  border: 3px solid rgba(255,255,255,.55);
  box-shadow:
    0 2px 4px rgba(10,25,45,.22),
    0 18px 40px -16px rgba(10,25,45,.55),
    inset 0 0 0 1px rgba(13,34,51,.9),
    inset 0 -28px 46px -30px rgba(0,0,0,.75);
}
.akva__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Блик по стеклу — узкая диагональная полоса поверх. Не мешает
   разглядывать рыбу: прозрачность низкая. */
.akva__blik {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 16%,
    transparent 34%, transparent 100%);
}
.akva__pod { margin-top: 14px; text-align: center; }
/* 🔴 Кому движение мешает, тот его и не получит — но прятать видео
   нельзя: вместе с ним пропадёт и заставка, а это первый кадр ролика.
   Ролик просто не запускается, см. `pervyy-ekran.js`. */

.hero__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* На планшете и телефоне — одна полоска из четырёх: 2×2 отъедали пол-экрана
   до того, как человек дочитает, куда он попал. */
@media (max-width: 1020px) { .hero__photos { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (max-width: 460px)  { .hero__photos { gap: 7px; } }

.hpic {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-s); aspect-ratio: 1;
  background: rgba(255,255,255,.1);
  box-shadow: 0 10px 26px -10px rgba(5,18,40,.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hpic:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -12px rgba(5,18,40,.7); }
.hpic img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.hpic:hover img { transform: scale(1.06); }
.hpic__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 11px 9px;
  display: flex; flex-direction: column; gap: 1px; color: #fff; font-size: 12.5px;
  background: linear-gradient(to top, rgba(6,18,38,.88), rgba(6,18,38,.52) 55%, transparent);
}
.hpic__cap b { font-weight: 650; line-height: 1.25;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
               overflow: hidden; }
.hpic__cap span { font-weight: 750; font-variant-numeric: tabular-nums; }
/* На узком экране подпись не помещается и мешает: остаётся только фото. */
@media (max-width: 620px) { .hpic__cap { display: none; } }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  padding: 7px 15px; border-radius: 999px; font-size: 13.5px;
}
.hero h1 { color: #fff; margin-bottom: 14px; font-size: clamp(30px, 4.4vw, 46px); }
.hero p { margin: 0 0 30px; font-size: 17.5px; line-height: 1.55;
          color: rgba(255,255,255,.9); max-width: 640px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__fact {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  padding: 13px 20px; border-radius: var(--r-md);
}
.hero__fact b { display: block; font-size: 25px; font-weight: 760; line-height: 1.15;
                font-variant-numeric: tabular-nums; }
.hero__fact span { font-size: 13px; color: rgba(255,255,255,.82); }

.sec { margin: 48px 0; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between;
             gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.sec__head p { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.sec__more { font-size: 14.5px; font-weight: 600; white-space: nowrap; }

/* 🔴 Было auto-fill: при шести разделах на широком экране вставало
   пять в строку и один сиротой на второй. Задаём число явно —
   6 / 3 / 2 / 1 делит шесть без остатка на любой ширине. */
.tiles { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1240px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
/* На телефоне оставляем два в ряд: по одному — это шесть экранов прокрутки
   ради шести ссылок. Одна колонка только на совсем узких. */
@media (max-width: 340px)  { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile {
  position: relative; background: var(--white); border-radius: var(--r-lg);
  padding: 26px 22px 22px; box-shadow: var(--sh-1); color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  border: 1.5px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .18s;
}
/* Мягкий акцентный свет в углу вместо плоского круга: с прозрачной
   плашкой плоский круг читался как пятно грязи. */
.tile::before {
  content: ""; position: absolute; inset: auto -40px -50px auto;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 70%);
  transition: transform .3s var(--ease); pointer-events: none;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-3);
              border-color: color-mix(in srgb, var(--accent) 45%, transparent);
              color: var(--ink); }
.tile:hover::before { transform: scale(1.35); }
.tile > * { position: relative; }
/* Стеклянный кружок с объёмом: блик сверху, тень снизу, акцентная
   подсветка от раздела. Эмодзи внутри остаётся узнаваемым знаком. */
.tile__icon {
  width: 58px; height: 58px; border-radius: 50%; margin-bottom: 10px;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
  background:
    linear-gradient(160deg, rgba(255,255,255,.95), rgba(255,255,255,.35)),
    radial-gradient(circle at 30% 24%,
      color-mix(in srgb, var(--accent) 45%, transparent), transparent 72%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -2px 6px color-mix(in srgb, var(--accent) 18%, transparent),
    0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent);
  transition: transform .22s var(--ease);
}
.tile:hover .tile__icon { transform: translateY(-2px) scale(1.06); }
/* Две строки под название всегда: иначе «Черепахи и рептилии»
   переносится, а «Птицы» нет, и счётчики в ряду не совпадают. */
.tile__name { font-size: 18px; font-weight: 700; letter-spacing: -.01em;
              min-height: 2.4em; display: flex; align-items: flex-start; }
.tile__count { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ══ Карточки товаров ═══════════════════════════════ */

.grid { display: grid; gap: 18px;
        grid-template-columns: repeat(auto-fill, minmax(min(218px, 100%), 1fr)); }

.card {
  background: var(--white); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1); display: flex; flex-direction: column;
  border: 1px solid var(--line-2);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.card__media {
  aspect-ratio: 5/4; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--sky), var(--aqua-light));
  display: grid; place-items: center;
}
.card__media img { width: 100%; height: 100%; object-fit: cover;
                   transition: transform .4s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
/* ── Карточка без фотографии ──────────────────────────────────────────
   350 из 500 карточек сейчас без снимка: корма, миски, декор. Бледный
   эмодзи-кубик на их месте читался как поломка, и поломанным выглядел
   весь раздел. Вместо него — знак магазина водяным знаком и короткая
   честная подпись.

   🔴 Заглушка намеренно тише настоящих фотографий: она не должна
   перетягивать взгляд с товара, у которого снимок есть. Отсюда
   приглушённая насыщенность и прозрачность в четверть.
   ═══════════════════════════════════════════════════════════════════ */
.card__media--empty {
  background:
    radial-gradient(112% 100% at 50% -10%,
      color-mix(in srgb, var(--accent) 15%, #fff) 0%, transparent 72%),
    linear-gradient(168deg, #fff 0%, var(--line-2) 100%);
}
.card__noimg {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 9px;
}
.card__noimg img {
  width: 56%; max-width: 124px; height: auto;
  opacity: .3; filter: saturate(.55);
}
.card__noimg span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); opacity: .75;
}
.card__flags { position: absolute; top: 10px; left: 10px; display: flex;
               flex-direction: column; gap: 5px; align-items: flex-start; }
.card__body { padding: 15px 16px 17px; display: flex; flex-direction: column;
              flex: 1; gap: 10px; }
.card__name {
  font-size: 14.5px; line-height: 1.42; font-weight: 500; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 3.1em;
}
.card:hover .card__name { color: var(--navy); }
.card__foot { margin-top: auto; display: flex; align-items: baseline;
              justify-content: space-between; gap: 10px; }
.card__price { font-size: 20px; font-weight: 760; letter-spacing: -.02em;
               font-variant-numeric: tabular-nums; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
}
.chip--live  { background: rgba(22,135,90,.14);  color: var(--ok); }
.chip--sale  { background: rgba(207,63,63,.13);  color: var(--danger); }
.chip--brand { background: var(--sky);           color: var(--blue); }

.stock { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.stock--in  { color: var(--ok); }
.stock--few { color: var(--warn); }
.stock--out { color: var(--muted); }

/* ══ Раздел ═════════════════════════════════════════ */

.layout { display: grid; grid-template-columns: 258px minmax(0,1fr); gap: 30px;
          align-items: start; }
@media (max-width: 940px) { .layout { grid-template-columns: 1fr; } }

.aside {
  background: var(--white); border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--sh-1); border: 1px solid var(--line-2);
  position: sticky; top: 96px;
}
.aside h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
            color: var(--muted); margin: 0 0 11px; font-weight: 700; }
.aside ul { list-style: none; margin: 0 0 22px; padding: 0; }
.aside ul:last-child { margin-bottom: 0; }
.aside a { display: flex; justify-content: space-between; gap: 10px;
           padding: 8px 11px; border-radius: var(--r-sm); color: var(--ink-2);
           font-size: 14.5px; transition: background .14s, color .14s; }
.aside a:hover { background: var(--sky); color: var(--navy); }
.aside a.is-active { background: var(--navy); color: #fff; font-weight: 550; }
.aside em { font-style: normal; color: var(--muted); font-size: 12.5px;
            font-variant-numeric: tabular-nums; }
.aside a.is-active em { color: rgba(255,255,255,.7); }

.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
           justify-content: space-between; margin-bottom: 20px; }
.toolbar select {
  height: 40px; padding: 0 14px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); background: var(--white); font-size: 14.5px;
  color: var(--ink); cursor: pointer;
}
.toolbar select:focus { outline: none; border-color: var(--blue); }
.found { color: var(--muted); font-size: 14.5px; font-variant-numeric: tabular-nums; }

.pager { display: flex; gap: 7px; justify-content: center; margin: 36px 0 10px;
         flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 42px; height: 42px; display: grid; place-items: center;
  padding: 0 14px; border-radius: var(--r-md); background: var(--white);
  box-shadow: var(--sh-1); font-size: 14.5px; font-weight: 550;
  color: var(--ink-2); border: 1px solid var(--line-2);
}
.pager a:hover { border-color: var(--blue); color: var(--navy); }
.pager .is-current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ══ Карточка товара ════════════════════════════════ */

/* Раскладка карточки: слева фото и весь текст, справа короткий блок покупки.
   Правая колонка липкая — едет за читателем, пока он листает описание.
   🔴 minmax(0,…) обязательно: без него длинное слово или широкая таблица
   раздувают колонку, и блоки наезжают друг на друга. */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
  grid-template-areas: "media side" "body side";
  gap: 30px 40px; align-items: start; margin-top: 4px;
}
.product__media-col { grid-area: media; min-width: 0; }
.product__side      { grid-area: side;  min-width: 0; position: sticky; top: 92px; }
/* Ровные промежутки в правой колонке, чем бы её ни наполнили. */
.product__side > * + * { margin-top: 16px; }
.product__side .lead { font-size: 15.5px; }
.product__side .spec { margin: 0; }
.product__body      { grid-area: body;  min-width: 0; }

.product__head { margin: 6px 0 20px; }
.product__head h1 { margin-bottom: 8px; }

@media (max-width: 980px) {
  .product {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "side" "body";
    gap: 24px;
  }
  .product__side { position: static; }
}

.product__media {
  background: linear-gradient(160deg, var(--sky), var(--aqua-light));
  border-radius: var(--r-xl); aspect-ratio: 5/4; display: grid; place-items: center;
  overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--line-2);
}
.product__media img { width: 100%; height: 100%; object-fit: contain; }
/* Знак вместо снимка: размер задаём отдельным правилом, иначе его
   растянет общее `.product__media img { width: 100% }`. */
.product__media--empty .product__noimg {
  width: 168px; height: auto; opacity: .3; filter: saturate(.55);
}

/* ═══ Галерея товара ═══════════════════════════════════
   Лента миниатюр под снимком + полноэкранный просмотр.
   Без JS ссылки просто открывают файл снимка.
   ═══════════════════════════════════════════════════════ */

.gallery__open { position: relative; display: grid; cursor: zoom-in; }
.gallery__open img { transition: transform .35s ease; }
.gallery__open:hover img { transform: scale(1.03); }

.gallery__zoom {
  position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%; font-size: 16px;
  background: rgba(255,255,255,.92); color: var(--ink-2); box-shadow: var(--sh-1);
  opacity: 0; transform: translateY(4px); transition: all .2s;
}
.gallery__open:hover .gallery__zoom { opacity: 1; transform: none; }

/* Подпись о происхождении снимка. Отдельной строкой и читаемым кеглем —
   мелким шрифтом внизу страницы это не честность, а отписка. */
.photo-note { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }

.gallery__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 84px;
  gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin;
}
.gallery__thumb {
  aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; display: block;
  border: 2px solid transparent; background: var(--sky); transition: border-color .16s;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb:hover { border-color: var(--line); }
.gallery__thumb.is-active { border-color: var(--blue); }

/* ── Полноэкранный просмотр ──────────────────────────── */

body.is-locked { overflow: hidden; }

.lb {
  position: fixed; inset: 0; z-index: 200; display: grid;
  /* 🔴 minmax(0,1fr), а не 1fr: у 1fr минимум считается по содержимому,
     и снимок 1536 px растягивает строку выше экрана. */
  grid-template-rows: minmax(0, 1fr) auto; background: rgba(8,16,26,.94);
  animation: lb-in .18s ease;
}
/* 🔴 Правило автора сильнее браузерного [hidden]{display:none},
   поэтому прячем явно — иначе крестик срабатывает, а окно остаётся. */
.lb[hidden] { display: none; }
.lb:focus { outline: none; }
@keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }

/* 🔴 Здесь была сетка, и max-height: 100% у снимка не срабатывал: строка
   внутри сцены авторазмерная, проценты считать не от чего — снимок вылезал,
   а overflow его обрезал. У флексбокса высота контейнера определённая,
   и ограничение работает. */
.lb__stage { display: flex; align-items: center; justify-content: center;
             padding: 56px 20px 12px; min-height: 0; overflow: hidden; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto;
           object-fit: contain; border-radius: var(--r-lg); }

.lb__close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1;
}
.lb__close:hover { background: rgba(255,255,255,.26); }

.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 34px; line-height: 1;
  padding-bottom: 4px;
}
.lb__nav:hover { background: rgba(255,255,255,.26); }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }

.lb__bar { padding: 10px 20px 20px; display: grid; justify-items: center; gap: 10px; }
.lb__count { color: rgba(255,255,255,.75); font-size: 13px;
             font-variant-numeric: tabular-nums; }
.lb__thumbs { display: flex; gap: 8px; max-width: 100%; overflow-x: auto;
              padding: 2px; scrollbar-width: thin; }
.lb__thumb {
  flex: none; width: 62px; height: 62px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  background: none; opacity: .55; transition: opacity .16s, border-color .16s;
}
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__thumb:hover { opacity: .85; }
.lb__thumb.is-active { opacity: 1; border-color: #fff; }

@media (max-width: 640px) {
  /* ── Витрина на телефоне ──────────────────────────── */
  .wrap { padding: 0 14px; }
  .tile { padding: 16px 14px 14px; }
  .tile__icon { width: 46px; height: 46px; font-size: 22px; margin-bottom: 8px; }
  .tile__name { font-size: 15.5px; min-height: 2.6em; }
  .tile__count { font-size: 12.5px; }
  .hero { padding: 28px 20px 30px; }
  .hero__facts { gap: 10px; }
  .hero__fact { padding: 10px 14px; flex: 1 1 calc(50% - 5px); }
  .hero__fact b { font-size: 21px; }
  .nav { padding: 2px 0 12px; }
  .nav__list a { padding: 9px 14px; font-size: 14px; }
  .product { gap: 18px; }
  .product__head { margin: 4px 0 14px; }
  .buybox { padding: 18px 16px; }
  .buybox__price { font-size: 32px; }
  .text-block { padding: 18px 16px; }
  .text-block h2 { font-size: 17px; }
  .props td:first-child { width: 42%; font-size: 13.5px; }
  .props td { font-size: 14px; padding: 9px 0; }
  .gallery__strip { grid-auto-columns: 68px; gap: 8px; }
  /* 🔴 16 px в полях: иначе Safari на iPhone зумит страницу при касании. */
  input, select, textarea { font-size: 16px; }
  .btn { min-height: 46px; }
  .chan { height: 46px; }

  .lb__stage { padding: 52px 8px 8px; }
  .lb__nav { width: 44px; height: 44px; font-size: 28px; }
  .lb__nav--prev { left: 6px; }
  .lb__nav--next { right: 6px; }
  .lb__thumb { width: 50px; height: 50px; }
}

.product__flags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.buybox {
  background: var(--white); border-radius: var(--r-xl); padding: 24px;
  box-shadow: var(--sh-2); border: 1px solid var(--line-2); margin: 0 0 18px;
}
.buybox__price { font-size: 38px; font-weight: 800; letter-spacing: -.03em;
                 line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.buybox__actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Позвонить — главное действие, во всю ширину блока.
   Написать — вторым уровнем, столько кнопок, сколько каналов включено. */
.buybox__write { margin-top: 16px; }
.buybox__write-head { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em;
                      color: var(--muted); font-weight: 700; margin-bottom: 9px; }
.buybox__chans { display: grid; gap: 8px;
                 grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }

/* Кнопка канала: круглый значок в цвете канала + название.
   Цвет узнаётся быстрее надписи, а рисовать чужие логотипы незачем. */
.chan {
  display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px;
  border-radius: var(--r-md); background: var(--sky); color: var(--ink-2);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: all .15s;
}
.chan:hover { background: #fff; border-color: var(--line); color: var(--ink);
              box-shadow: var(--sh-1); }
.chan__mark {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.chan--vk   .chan__mark { background: #0077ff; }
.chan--tg   .chan__mark { background: #2aabee; font-size: 12px; }
.chan--max  .chan__mark { background: #7a4dff; }
.chan--core .chan__mark { background: var(--aqua); }

/* 🔴 Высота минимальная, а не жёсткая: подпись, не влезшая в строку,
   иначе вылезает ЗА кнопку — на айфоне так торчал значок над кнопкой
   в админке. Здесь `white-space: nowrap` и так стоит, но пусть правило
   будет одинаковым на обеих половинах. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 10px 26px; border-radius: var(--r-md); border: 0;
  font-size: 15.5px; font-weight: 640; cursor: pointer; white-space: nowrap;
  transition: transform .14s var(--ease), box-shadow .18s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; margin-top: 18px; }
.btn--sm { height: 40px; padding: 0 14px; font-size: 14px; }
.btn--primary { background: var(--navy); color: #fff;
                box-shadow: 0 4px 14px rgba(15,58,99,.28); }
.btn--primary:hover { background: #0b2c4d; color: #fff; }
.btn--ghost { background: var(--sky); color: var(--navy);
              border: 1.5px solid color-mix(in srgb, var(--blue) 22%, transparent); }
.btn--ghost:hover { background: #dbe8f6; color: var(--navy); }

.desc { color: var(--ink-2); line-height: 1.7; font-size: 15.5px; margin: 0 0 18px; }

.props { width: 100%; border-collapse: collapse; font-size: 15px; margin: 20px 0;
         table-layout: fixed; }
.props td { padding: 11px 0; border-bottom: 1px solid var(--line-2);
            vertical-align: top; }
.props tr:last-child td { border-bottom: 0; }
.props td:first-child { color: var(--muted); width: 44%; font-size: 14.5px; }

.note {
  display: flex; gap: 12px; background: var(--aqua-light);
  border-radius: var(--r-lg); padding: 16px 18px; font-size: 14.5px;
  color: #0d5a66; line-height: 1.5; margin: 18px 0;
  border: 1px solid rgba(23,162,184,.18);
}
.note__icon { font-size: 20px; flex: none; line-height: 1.3; }

/* ══ Подвал ═════════════════════════════════════════ */

.footer { background: var(--ink); color: #9fb2c4; margin-top: 72px;
          padding: 48px 0 26px; font-size: 14.5px; }
.footer a { color: #dbe7f2; }
.footer a:hover { color: #fff; }
/* 🔴 Было `1.4fr repeat(auto-fit, minmax(160px,1fr))` — так нельзя:
   авторазмерный repeat() не сочетается с гибкой долей fr, браузер
   отбрасывает всё правило целиком. Колонок не оставалось, и подвал
   выстраивался в один столбик. Задаём колонки явно. */
.footer__cols { display: grid; gap: 34px; margin-bottom: 32px;
                grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .footer__cols { grid-template-columns: 1fr 1fr; gap: 26px 30px; } }
@media (max-width: 520px) { .footer__cols { grid-template-columns: 1fr; gap: 24px; } }
.footer h4 { color: #fff; margin: 0 0 13px; font-size: 15px; font-weight: 650; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin: 7px 0; }
.footer p { margin: 0 0 8px; line-height: 1.55; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 22px;
                  font-size: 12.5px; color: #718899; display: flex;
                  flex-wrap: wrap; gap: 14px; justify-content: space-between; }

/* ══ Прочее ═════════════════════════════════════════ */

.empty { background: var(--white); border-radius: var(--r-xl); padding: 56px 28px;
         text-align: center; color: var(--muted); box-shadow: var(--sh-1);
         border: 1px solid var(--line-2); }
.empty__icon { font-size: 52px; margin-bottom: 14px; opacity: .8; }
.empty h1 { margin-bottom: 10px; }

.strip {
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
  background: var(--white); border-radius: var(--r-xl); padding: 26px;
  box-shadow: var(--sh-1); border: 1px solid var(--line-2);
}
.strip__item { display: flex; gap: 13px; align-items: flex-start; }
.strip__icon { font-size: 26px; line-height: 1.1; flex: none; }
.strip__title { font-weight: 650; margin-bottom: 3px; }
.strip__text { font-size: 14px; color: var(--muted); line-height: 1.5; }

@media (max-width: 780px) {
  .header__top { grid-template-columns: 1fr auto; gap: 14px; row-gap: 12px; }
  .search { grid-column: 1 / -1; order: 3; }
  .head-contact__note { display: none; }
  .hero { padding: 34px 24px 38px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px,1fr)); gap: 13px; }
  .card__name { font-size: 13.5px; min-height: 2.9em; }
  .card__price { font-size: 18px; }
}

/* ═══ Блоки описания на карточке ════════════════════
   Не один сплошной текст, а разделы: содержание, совместимость,
   питание. Каждый отвечает на свой вопрос покупателя.
   ═══════════════════════════════════════════════════ */

.lead { font-size: 16px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.6; }

/* Блоки описания живут в левой колонке, под фотографией.
   Один столбец: текст в две узкие колонки читать неудобно. */
.sections-text {
  margin: 22px 0; display: grid; gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
.text-block {
  background: var(--white); border-radius: var(--r-xl); padding: 26px 28px;
  box-shadow: var(--sh-1); border: 1px solid var(--line-2);
}
.text-block h2 {
  font-size: 19px; margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
  color: var(--navy);
}
.text-block h2 span { font-size: 21px; }
.text-block p { margin: 0 0 11px; color: var(--ink-2); line-height: 1.65; font-size: 15.5px; }
.text-block p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .sections-text { gap: 14px; }
  .text-block { padding: 20px 18px; }
}

.latin { font-style: italic; color: var(--muted); font-size: 16px; margin: 0 0 6px; }
.folk  { font-size: 14px; color: var(--muted); margin: 0 0 14px; }

.art { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
       background: var(--sky); padding: 3px 9px; border-radius: 6px; letter-spacing: .02em; }
.art__hint { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ═══ Справка о живом товаре ═════════════════════════
   То, что аквариумист смотрит раньше цены: размер, объём, температура.
   ═══════════════════════════════════════════════════ */
.spec { background: var(--aqua-light); border: 1px solid rgba(23,162,184,.2);
        border-radius: var(--r-lg); padding: 18px 20px; margin: 18px 0; }
.spec__head { font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
              color: #0d7d90; font-weight: 700; margin-bottom: 12px; }
.spec__grid { display: grid; gap: 14px 22px;
              grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); }
.spec__grid b { display: block; font-size: 17px; font-weight: 700; color: var(--navy);
                line-height: 1.25; letter-spacing: -.01em; }
.spec__grid span { font-size: 12.5px; color: var(--muted); }
.spec__own { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(23,162,184,.2);
             font-size: 14px; font-weight: 600; color: #0d7d90; }

/* ═══ Стекло ══════════════════════════════════════════
   Рецептура одна на все плашки: прозрачная подложка с градиентом,
   размытие фона, светлая кромка и три слоя тени. Тени и кромка и дают
   то самое ощущение, что плашка висит над страницей.

   🔴 Прозрачность разная по назначению: там, где читают длинный текст,
   стекло плотнее. Совсем прозрачное стекло под описанием на 400 знаков
   читать невозможно, а у нас 77 карточек написаны именно для чтения.
   ═══════════════════════════════════════════════════ */

.card, .buybox, .tile, .spec, .aside, .empty, .preview-bar,
.text-block, .product__media, .gallery__open, .note, .hero {
  /* 🔴 40 % матовости, а не белая подложка: при 60 % плашка читалась
     как обычная белая карточка, и всё стекло пропадало. Прозрачность
     держится за счёт размытия и светлой кромки, а не за счёт белил. */
  background: linear-gradient(158deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: var(--float), var(--edge);
  border-radius: var(--r);
}

/* 🔴 Главный экран — ДЫМЧАТОЕ стекло, не светлое.
   Текст в нём белый, и на светлой подложке он исчезал: проверено
   рендером, экран получился пустым. Тёмное стекло сохраняет читаемость
   и при этом пропускает фон, как и все остальные плашки. */
.hero {
  background:
    radial-gradient(900px 340px at 14% -14%,
      color-mix(in srgb, var(--accent) 42%, transparent), transparent 62%),
    linear-gradient(158deg, rgba(22,45,86,.86), rgba(26,92,158,.68));
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: var(--float-lg), inset 0 1px 0 rgba(255,255,255,.34);
  color: #fff;
  margin-top: 18px;
}
.hero__badge, .hero__fact {
  background: linear-gradient(158deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 22px -12px rgba(8,16,32,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.hero__fact { border-radius: var(--r-btn); transition: transform .25s var(--ease); }
.hero__fact:hover { transform: translateY(-3px); }

/* плотнее там, где читают */
.text-block, .product__media, .gallery__open {
  background: linear-gradient(158deg, rgba(255,255,255,.66), rgba(255,255,255,.46));
}
.buybox { background: linear-gradient(158deg, rgba(255,255,255,.58), rgba(255,255,255,.34)); }

/**
 * Шапка — плавающая панель матового стекла, а не полоса во всю ширину.
 *
 * 🔴 Размытие фона под липкой шапкой — самое дорогое место на сайте:
 * содержимое едет под неподвижной панелью, и браузер обязан размывать
 * его заново каждый кадр. Полная шапка с `blur(22px)` держала 14 кадров
 * в секунду вместо шестидесяти. Поэтому стекло вернули, но втрое дешевле:
 *   — радиус 10 вместо 22 (стоимость растёт вместе с радиусом);
 *   — площадь вдвое меньше: размывается только плавающая панель,
 *     а не полоса во всю ширину вместе с полкой разделов.
 * 🔴 Радиус не поднимать. Если понадобится «матовее» — добавлять белизны
 * фону, а не размытия.
 */
/* 🔴 Отступ сверху — ПАДДИНГОМ шапки, а не полем панели. Внешнее поле
   схлопывается наружу липкого блока: страница стоит — отступ виден,
   начал прокручивать — панель прилипает к самому краю экрана. Паддинг
   лежит внутри и держится всегда. */
.header { background: transparent; box-shadow: none; padding-top: 10px; }
.header > .wrap { position: relative; }
.header__panel {
  border-radius: var(--r); padding: 4px 20px 10px;
  background: rgba(255,255,255,.60);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--sh-btn-h), var(--kromka);
}
/**
 * 🔑 Размытие снимается на то время, пока страница едет.
 *
 * 🔴 Это не уловка, а единственный способ иметь и стекло, и скорость.
 * Липкая панель с размытием заставляет браузер размывать заново всё,
 * что под ней проезжает, на каждом кадре: замерено 16 кадров в секунду
 * против 46 без размытия — и ни радиус, ни размер панели почти
 * не помогают, дело в самой липкости.
 * Пока страница движется, матовость никто не разглядывает; класс
 * снимается через 140 мс покоя, и стекло возвращается. Ставит его
 * `public/js/menu.js`.
 */
/* ── ПРОБА 28.09: стекло включено постоянно ──────────────────────────
   Алексей смотрит своими глазами, тормозит ли. Механизм снятия размытия
   на время прокрутки никуда не делся — класс `katitsya` по-прежнему
   ставится из `menu.js`, просто правило ниже отключено.
   🔴 Вернуть — раскомментировать блок. Тридцать секунд.

.header__panel { transition: background-color .2s var(--ease); }
html.katitsya .header__panel {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: rgba(255,255,255,.72);
}
   ──────────────────────────────────────────────────────────────────── */
.header__top { padding: 10px 0 8px; }
.nav { background: transparent; padding: 0 0 2px; position: relative; }
/* 🔴 По центру. Когда панель стала плавающей, я выровнял полку по левому
   краю и не заметил — кнопки прижались к углу, а панель осталась широкой. */
.nav__list { justify-content: safe center; padding: 2px 0; }

/* Скругления единые: всё, что плашка, получает var(--r) */
.btn, input, select, textarea { border-radius: var(--r-btn); }
/* 🔴 Один радиус на всё, на что нажимают: `--r-btn`. Овальными остаются
   только ярлыки — «в наличии», «черновик»: это подписи, а не кнопки,
   и путать их формой как раз правильно. */
.chip, .crumbs a { border-radius: var(--r-btn); }
.stock, .badge { border-radius: var(--r-pill); }

/* Акцент раздела */
.chip--live { background: color-mix(in srgb, var(--accent) 18%, white); color: var(--accent); }
.gallery__thumb.is-active { border-color: var(--accent); }
.spec { background: linear-gradient(158deg,
          color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.7)),
          color-mix(in srgb, var(--accent) 7%, rgba(255,255,255,.4)));
        border-color: color-mix(in srgb, var(--accent) 30%, white); }
.spec__head { color: var(--accent); }

/* ═══ Анимации ════════════════════════════════════════
   Наведение: плашка поднимается, тень растёт, по стеклу проходит блик.
   Блик — отдельный слой, поэтому не мешает содержимому.
   ═══════════════════════════════════════════════════ */

.card, .tile {
  position: relative;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .2s;
  will-change: transform;
}
.card::after, .tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%,
    rgba(255,255,255,.55) 46%, rgba(255,255,255,.1) 58%, transparent 70%);
  transform: translateX(-60%);
  transition: opacity .25s, transform .7s var(--ease);
}
.card:hover, .tile:hover, .card:focus-visible, .tile:focus-visible {
  transform: translateY(-7px) scale(1.012);
  box-shadow: var(--float-lg), var(--edge);
  border-color: color-mix(in srgb, var(--accent) 45%, white);
}
.card:hover::after, .tile:hover::after { opacity: 1; transform: translateX(60%); }
.card:active, .tile:active { transform: translateY(-2px) scale(.997); }

/* Фотография в карточке чуть наезжает — оживляет наведение */
.card__media img { transition: transform .5s var(--ease); }
.card:hover .card__media img { transform: scale(1.07); }

/* ── Появление при загрузке ───────────────────────────
   Плашки всплывают снизу по очереди. Работает без JS, поэтому
   не зависит ни от чего и не тормозит страницу. */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.tiles > *, .grid > * {
  animation: rise .5s var(--ease) both;
}
.tiles > *:nth-child(1), .grid > *:nth-child(1) { animation-delay: .02s }
.tiles > *:nth-child(2), .grid > *:nth-child(2) { animation-delay: .06s }
.tiles > *:nth-child(3), .grid > *:nth-child(3) { animation-delay: .10s }
.tiles > *:nth-child(4), .grid > *:nth-child(4) { animation-delay: .14s }
.tiles > *:nth-child(5), .grid > *:nth-child(5) { animation-delay: .18s }
.tiles > *:nth-child(6), .grid > *:nth-child(6) { animation-delay: .22s }
.tiles > *:nth-child(n+7), .grid > *:nth-child(n+7) { animation-delay: .26s }

/* ── На телефоне наведения нет ─────────────────────────
   🔴 Поэтому плашка должна сама показывать, что она нажимается:
   иконка мягко дышит, а стрелка подталкивает к нажатию. */
@media (hover: none) {
  .tile__icon { animation: breathe 3.4s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: none; box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.95),
      0 6px 16px color-mix(in srgb, var(--accent) 24%, transparent); }
    50%      { transform: translateY(-3px); box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,.95),
      0 12px 26px color-mix(in srgb, var(--accent) 42%, transparent); }
  }
  .tile::before { animation: glow 4.2s ease-in-out infinite; }
  @keyframes glow { 0%,100% { opacity: .75 } 50% { opacity: 1; transform: scale(1.12) } }

  .tile__name::after {
    content: ' →'; color: var(--accent); font-weight: 800;
    display: inline-block; animation: nudge 1.8s ease-in-out infinite;
  }
  @keyframes nudge { 0%,100% { transform: translateX(0) } 50% { transform: translateX(4px) } }

  /* нажатие видно сразу — без этого касание кажется непрошедшим */
  .tile:active, .card:active { transform: scale(.975); box-shadow: var(--float-s); }
}

/* 🔴 Уважаем настройку «меньше движения» в системе */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ═══ Кнопки в главном экране ═════════════════════════
   Главный экран ведёт в каталог, а не в контакты: человек пришёл
   смотреть рыбок. Поэтому первая кнопка яркая, вторая стеклянная.
   ═══════════════════════════════════════════════════ */
.hero__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn--glass {
  background: linear-gradient(158deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  color: #fff; border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 8px 22px -12px rgba(8,16,32,.5), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--glass:hover { background: rgba(255,255,255,.34); color: #fff;
                    transform: translateY(-2px); }
@media (max-width: 460px) { .hero__acts .btn { width: 100%; } }

/* ═══ Вакансии ════════════════════════════════════════ */
.vac { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(330px,100%),1fr)); }
.vac__item {
  background: linear-gradient(158deg, rgba(255,255,255,.66), rgba(255,255,255,.44));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: var(--float), var(--edge);
  border-radius: var(--r); padding: 26px 28px;
}
.vac__item h2 { font-size: 21px; margin-bottom: 10px; color: var(--navy); }
.vac__item p { color: var(--ink-2); line-height: 1.65; margin: 0 0 14px; }
.vac__facts { display: grid; gap: 10px; margin: 0 0 18px; }
.vac__facts div { display: flex; gap: 10px; align-items: baseline; }
.vac__facts dt { color: var(--muted); font-size: 13.5px; min-width: 96px; flex: none; }
.vac__facts dd { margin: 0; font-weight: 640; }
.vac__acts { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 460px) { .vac__acts .btn { width: 100%; } }


/* ── Панель администратора ────────────────────────────────────────────────
   Плашка внизу страницы для вошедшего сотрудника: кто вошёл и кнопка
   «Редактировать», ведущая в админку ровно к этой же странице.
   Покупателю не отдаётся вовсе — её нет в разметке. */
.adminbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 900;
  display: flex; align-items: center; gap: 4px; padding: 6px 8px;
  border-radius: 999px; background: rgba(22, 45, 86, .96);
  box-shadow: 0 10px 30px rgba(10, 25, 50, .32);
  font-size: 13.5px; color: #fff;
}
.adminbar__who { padding: 5px 10px; opacity: .8; white-space: nowrap; }
.adminbar__edit, .adminbar__more {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border-radius: 999px; background: var(--brand, #2BC9CA); color: #0d2340;
  font-weight: 650; white-space: nowrap;
}
.adminbar__more { background: rgba(255, 255, 255, .14); color: #fff; padding: 7px 11px; }
.adminbar__edit:hover { filter: brightness(1.08); }
.adminbar__more:hover { background: rgba(255, 255, 255, .24); }
/* Пометка прямо с витрины: свёрнутая кнопка, по нажатию — поле.
   Видна только сотруднику, покупателю этой разметки не отдают. */
.adminbar__note { position: relative; }
.adminbar__note > summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff;
  font-weight: 650;
}
.adminbar__note > summary::-webkit-details-marker { display: none; }
.adminbar__note > summary:hover { background: rgba(255, 255, 255, .24); }
.adminbar__note[open] > summary { background: var(--brand, #2BC9CA); color: #0d2340; }
.adminbar__note form {
  position: absolute; bottom: calc(100% + 10px); right: 0; width: min(320px, 78vw);
  background: #fff; border-radius: 14px; padding: 12px;
  box-shadow: 0 16px 40px rgba(10, 25, 50, .3);
}
.adminbar__note textarea {
  width: 100%; border: 1px solid #d7dce1; border-radius: 9px; padding: 9px 10px;
  font: inherit; font-size: 14px; color: #14263f; resize: vertical;
}
/* Выбор «кому» — тем же видом, что поле ввода. 🔴 16 px, иначе айфон
   зумит страницу при касании, и панель уезжает за край экрана. */
.adminbar__note select {
  width: 100%; margin-top: 8px; border: 1px solid #d7dce1; border-radius: 9px;
  padding: 9px 10px; font: inherit; font-size: 16px; color: #14263f;
  background: #fff;
}
.adminbar__note button {
  margin-top: 8px; width: 100%; border: 0; border-radius: 9px; padding: 9px 12px;
  background: var(--brand, #2BC9CA); color: #0d2340; font: inherit; font-weight: 700;
  cursor: pointer;
}
@media (max-width: 560px) {
  .adminbar { bottom: 10px; font-size: 12.5px; }
  .adminbar__who { display: none; }
}


/* ── Плитка подраздела с фотографией ──────────────────────────────────────
   На третьем уровне разделов много и называются они похоже («Гроты»,
   «Коряги», «Камни»). Слово читать дольше, чем узнать вещь на картинке,
   поэтому плитка подраздела показывает фото товара из него.

   Снимок берётся у первого опубликованного товара раздела — рисовать
   отдельную обложку каждому из 89 подразделов никто не станет, а так
   каталог выглядит живым с первого дня. */
/* ══ Плитка раздела: одна форма для всех ═══════════════════════════
   🔴 Раньше плитка с фотографией и плитка без неё были устроены
   по-разному: у первой картинка шла сверху, у второй — кружок с эмодзи
   внутри отступов. В одном ряду названия вставали на разной высоте,
   и ряд читался как сломанный. Теперь сверху всегда обложка того же
   размера — либо снимок, либо знак магазина на фоне цвета раздела.
   Обложки заполняются сами, по мере того как появляются фотографии. */
.tile { padding: 0 0 16px; gap: 4px; }
.tile__cover {
  display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: 12px; position: relative;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 12%, var(--white)),
    color-mix(in srgb, var(--accent) 26%, var(--white)));
}
.tile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover .tile__img { filter: brightness(1.05); }

/* Обложки пока нет: знак магазина и эмодзи раздела. Спокойно и честно —
   серый прямоугольник выглядел бы как поломка, а таких плиток сейчас
   больше сотни. */
.tile__none { position: absolute; inset: 0; display: grid; place-items: center; }
.tile__none img { width: 46%; max-width: 92px; height: auto;
                  opacity: .30; filter: saturate(.45); }
.tile__emo { position: absolute; top: 10px; left: 12px; font-size: 22px;
             line-height: 1; opacity: .85; }
.tile__name { font-size: 16px; padding: 0 16px; }
.tile__count { padding: 0 16px; }
/* Свет в углу не нужен: под обложкой его не видно, а из-под неё
   он просвечивает грязным пятном. */
.tile::before { display: none; }

/* Подразделов бывает и тринадцать: шесть в ряд превращают их в марки. */
.tiles { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 760px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Карточка товара, у которого фотографии ещё нет. Живность сюда не попадает:
   её без настоящего снимка не публикуют. */
.product__media--empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; padding: 28px;
  background:
    radial-gradient(110% 100% at 50% -8%,
      color-mix(in srgb, var(--accent) 16%, #fff) 0%, transparent 70%),
    linear-gradient(168deg, #fff 0%, var(--line-2) 100%);
}
.product__noimg-note { font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 330px; }
.product__noimg-note b { color: var(--ink-2); }


/* ── Выбор размера в карточке ─────────────────────────────────────────────
   Живой товар продаётся по размерам, и цена у каждого своя. В 1С это
   отдельные позиции со своим остатком, на сайте — одна карточка
   с переключателем: так покупателю видно всю линейку сразу. */
.sizes { margin: 16px 0 4px; }
.sizes__head { font-size: 12.5px; color: var(--muted); text-transform: uppercase;
               letter-spacing: .05em; font-weight: 700; margin-bottom: 8px; }
.sizes__list { display: flex; flex-direction: column; gap: 6px; }
.size {
  display: flex; align-items: baseline; gap: 10px; padding: 9px 13px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--ink); background: var(--white); transition: border-color .15s, background .15s;
}
.size:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.size.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent);
              font-weight: 600; }
.size__name { flex: 1; }
.size__price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 650; }
.size.is-out { opacity: .55; }
.size__no { font-size: 11.5px; color: var(--danger, #b4541f); }
.sizes__hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; }

/* ═══ Помощник магазина ═══════════════════════════════════════════════
   Кнопка в правом нижнем углу и окно разговора.

   🔴 Окно не перекрывает телефон в шапке и кнопку «Позвонить» в карточке:
   ради этого оно прижато к правому краю и не растягивается во всю ширину
   на планшете. Помощник не должен мешать позвонить — звонок здесь
   главное действие, а он всего лишь подсказка.
   ═══════════════════════════════════════════════════════════════════ */

.bot-dock {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
@media (max-width: 560px) { .bot-dock { right: 12px; bottom: 12px; } }

/* ── кнопка ───────────────────────────────────────────────────────── */

.bot-fab {
  display: inline-flex; align-items: center; gap: 9px;
  height: 56px; padding: 0 22px 0 16px; border: 0; cursor: pointer;
  border-radius: var(--r-btn); color: #fff;
  font: 650 15.5px/1 'Nunito', ui-sans-serif, system-ui, sans-serif;
  background: linear-gradient(150deg, var(--navy) 0%, var(--blue) 55%, var(--teal-dark) 130%);
  box-shadow: var(--float), 0 8px 22px -6px rgba(23,169,181,.45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.bot-fab:hover { transform: translateY(-3px); box-shadow: var(--float-lg); }
.bot-fab:active { transform: translateY(-1px); }
.bot-fab:focus-visible { outline: 3px solid var(--teal-light); outline-offset: 3px; }
.bot-fab__face { font-size: 25px; line-height: 1; }
/* Подпись прячем только на совсем узких: круглая кнопка без слова
   читается как «чат поддержки», а нам нужно «спросить про товар». */
@media (max-width: 420px) {
  .bot-fab { height: 54px; width: 54px; padding: 0; justify-content: center; }
  .bot-fab__label { display: none; }
}
/* Когда окно открыто, кнопка уезжает: на телефоне она перекрывала поле ввода. */
body.bot-on .bot-fab { display: none; }

/* ── приветствие у кнопки ─────────────────────────────────────────── */

.bot-teaser {
  position: relative; max-width: 280px;
  background: var(--glass-solid);
  border: 1px solid var(--glass-line); border-radius: var(--r);
  box-shadow: var(--float); animation: botPop .32s var(--ease) both;
}
.bot-teaser__body {
  display: flex; gap: 10px; align-items: flex-start; text-align: left;
  padding: 14px 30px 14px 15px; border: 0; background: none; cursor: pointer;
  font: 500 14.5px/1.45 'Nunito', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-2); border-radius: var(--r);
}
.bot-teaser__body:hover { color: var(--navy); }
.bot-teaser__face { font-size: 22px; line-height: 1.1; flex: none; }
.bot-teaser__x {
  position: absolute; top: 5px; right: 7px; width: 24px; height: 24px;
  border: 0; background: none; cursor: pointer; color: var(--muted);
  font-size: 19px; line-height: 1; border-radius: 50%;
}
.bot-teaser__x:hover { background: var(--line-2); color: var(--ink); }

@keyframes botPop {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ── окно ─────────────────────────────────────────────────────────── */

.bot {
  width: 382px; max-width: calc(100vw - 24px);
  height: min(600px, calc(100dvh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  /* 🔴 Тоже без размытия: окно висит поверх прокручиваемой страницы,
     и каждый кадр прокрутки стоил бы столько же, сколько стоила шапка. */
  background: linear-gradient(168deg, #ffffff, #F7FBFD);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--float-lg); animation: botPop .28s var(--ease) both;
}
/* На телефоне окно занимает экран целиком: разговор в полоске 300 px
   на пол-экрана — это неудобно и выглядит дёшево. */
@media (max-width: 560px) {
  .bot { width: calc(100vw - 24px); height: min(78dvh, calc(100dvh - 90px)); }
}

.bot__head {
  display: flex; align-items: center; gap: 11px; padding: 13px 12px 13px 16px;
  color: #fff; flex: none;
  background: linear-gradient(150deg, var(--navy) 0%, var(--blue) 70%, var(--teal-dark) 150%);
}
.bot__face { font-size: 26px; line-height: 1; }
.bot__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bot__who b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.bot__who span { font-size: 12px; color: rgba(255,255,255,.72); }
.bot__x {
  width: 34px; height: 34px; flex: none; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 21px; line-height: 1; transition: background .15s;
}
.bot__x:hover { background: rgba(255,255,255,.26); }

.bot__log {
  flex: 1; overflow-y: auto; padding: 16px 16px 6px;
  display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(233,243,251,.55));
  overscroll-behavior: contain;
}

.bot-msg {
  max-width: 88%; padding: 10px 14px; border-radius: 16px;
  font-size: 14.5px; line-height: 1.5; animation: botPop .22s var(--ease) both;
}
.bot-msg--bot {
  align-self: flex-start; background: var(--white); color: var(--ink-2);
  border-bottom-left-radius: 6px; box-shadow: var(--sh-1);
}
.bot-msg--ya {
  align-self: flex-end; background: var(--navy); color: #fff;
  border-bottom-right-radius: 6px;
}
.bot-msg a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bot-msg--bot b { color: var(--ink); font-weight: 700; }
.bot-dim { color: var(--muted); font-size: 13px; }
.bot-msg--ya .bot-dim { color: rgba(255,255,255,.7); }

/* три точки «печатает» */
.bot-msg--wait { display: flex; gap: 5px; padding: 15px 15px; }
.bot-msg--wait span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: botDot 1.1s infinite ease-in-out;
}
.bot-msg--wait span:nth-child(2) { animation-delay: .16s; }
.bot-msg--wait span:nth-child(3) { animation-delay: .32s; }
@keyframes botDot {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

/* ── подсказки-кнопки ─────────────────────────────────────────────── */

/* «Написать человеку» — третья ступень, когда бот не понял (bot-mozg.js). */
.bot-kuda-ryad { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bot-msg a.bot-kuda {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
  border-radius: var(--r-btn); background: var(--sky); color: var(--navy);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.bot-msg a.bot-kuda:hover { background: var(--teal-dark); color: #fff; }
@media (max-width: 760px) { .bot-msg a.bot-kuda { min-height: 44px; } }

.bot__chips {
  display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 16px 4px; flex: none;
}
.bot__chips:empty { display: none; }
.bot-chip {
  border: 1px solid color-mix(in srgb, var(--teal) 40%, white);
  background: var(--aqua-light); color: var(--teal-dark);
  padding: 7px 13px; border-radius: var(--r-btn); cursor: pointer;
  font: 600 13px/1.2 'Nunito', ui-sans-serif, system-ui, sans-serif;
  transition: background .15s, color .15s, transform .15s var(--ease);
}
.bot-chip:hover { background: var(--teal-dark); color: #fff; transform: translateY(-1px); }
/* Согласие на отправку непонятого вопроса (с 11.11): две кнопки внутри ответа бота. */
.bot-soglasie { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.bot-chip--net { background: transparent; color: var(--muted, #5b6b7a); border-color: color-mix(in srgb, currentColor 30%, transparent); }

/* ── поле ввода ───────────────────────────────────────────────────── */

.bot__form { display: flex; gap: 8px; padding: 12px 16px 6px; flex: none; }
.bot__form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink);
  font: 400 15px 'Nunito', ui-sans-serif, system-ui, sans-serif;
}
.bot__form input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(26,92,158,.1);
}
.bot__form button {
  width: 44px; height: 44px; flex: none; border: 0; cursor: pointer;
  border-radius: var(--r-btn); background: var(--navy); color: #fff;
  font-size: 18px; transition: background .15s;
}
.bot__form button:hover { background: var(--blue); }

.bot__foot {
  margin: 0; padding: 4px 16px 13px; flex: none;
  font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.bot__foot a { font-weight: 700; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .bot, .bot-teaser, .bot-msg { animation: none; }
  .bot-msg--wait span { animation-duration: 0s; opacity: .5; }
}

/* Плитка подраздела без обложки и без эмодзи: третий уровень каталога.
   Тот же знак, что в карточке без фото, — чтобы пустое место читалось
   как «здесь пока нет картинки», а не как ошибка вёрстки. */
.tile__mark { display: block; margin-bottom: 8px; }
.tile__mark img { width: 46px; height: auto; opacity: .26; filter: saturate(.5); }

/* ═══ Полка «Не только рыбки» ═════════════════════════════════════════
   Подразделы с количеством вместо карточек товара.

   🔴 Так сделано не от хорошей жизни: фотографии сейчас есть только
   у живого товара, и восемь одинаковых заглушек подряд не продавали
   бы ничего. Список отвечает на вопрос «а корм для кота у вас есть»
   быстрее любой картинки. Когда снимки появятся — вернуть сюда товары.
   ═══════════════════════════════════════════════════════════════════ */
.shelf { display: grid; gap: 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1240px) { .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 380px)  { .shelf { grid-template-columns: minmax(0, 1fr); } }

.shelf__col {
  background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.44));
  border: 1px solid var(--glass-line); border-radius: var(--r);
  box-shadow: var(--float-s); padding: 16px 14px 12px;
}
.shelf__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 14px; font-weight: 750; color: var(--ink); letter-spacing: -.01em;
}
.shelf__head span { font-size: 19px; line-height: 1; }
.shelf__col ul { list-style: none; margin: 0; padding: 0; }
.shelf__col a {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 7px 9px; border-radius: var(--r-s); color: var(--ink-2);
  font-size: 13.5px; line-height: 1.35; transition: background .14s, color .14s;
}
.shelf__col a:hover { background: var(--accent-soft); color: var(--navy); }
.shelf__col em {
  font-style: normal; color: var(--muted); font-size: 12px; flex: none;
  font-variant-numeric: tabular-nums;
}

/* ═══ Фильтры раздела ═════════════════════════════════════════════════
   Обычная форма в боковой колонке. До этого там был только заголовок
   «Раздел» и одна ссылка назад — 131 рыбка и нечем сузить.
   ═══════════════════════════════════════════════════════════════════ */

.filters h3 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; margin: 0 0 9px;
}
.filters h3 + * { margin-bottom: 20px; }

.filters__links { list-style: none; margin: 0 0 20px; padding: 0; }
.filters__links a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 7px 10px; border-radius: var(--r-s); color: var(--ink-2);
  font-size: 14px; line-height: 1.35; transition: background .14s, color .14s;
}
.filters__links a:hover { background: var(--accent-soft); color: var(--navy); }
.filters__links a.is-active { background: var(--navy); color: #fff; font-weight: 600; }
.filters__links em, .filters__radio em, .filters__check em {
  font-style: normal; color: var(--muted); font-size: 12px; flex: none;
  font-variant-numeric: tabular-nums;
}
.filters__links a.is-active em { color: rgba(255,255,255,.7); }

.filters__radio { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.filters__radio label, .filters__check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 10px; border-radius: var(--r-s); font-size: 14px; color: var(--ink-2);
  transition: background .14s;
}
.filters__radio label:hover, .filters__check:hover { background: var(--accent-soft); }
.filters__radio input, .filters__check input { accent-color: var(--navy); width: 15px; height: 15px; }
.filters__radio span, .filters__check span {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex: 1;
}
.filters__check { margin-bottom: 20px; }

.filters__price { display: flex; align-items: center; gap: 7px; margin-bottom: 20px; }
.filters__price input {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px; text-align: center;
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink); font: 400 14px 'Nunito', sans-serif;
  font-variant-numeric: tabular-nums;
}
.filters__price input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(26,92,158,.1);
}
.filters__price span { color: var(--muted); flex: none; }

.filters select {
  width: 100%; height: 40px; padding: 0 12px; margin-bottom: 20px;
  border: 1.5px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: var(--ink); font-size: 14px; cursor: pointer;
}
.filters select:focus { outline: none; border-color: var(--blue); }

.filters__reset {
  display: block; text-align: center; margin-top: 11px;
  font-size: 13.5px; color: var(--muted);
}
.filters__reset:hover { color: var(--danger); }

.found__reset { font-size: 13.5px; margin-left: 6px; }

/* На узком экране боковая колонка уезжает наверх и перестаёт липнуть —
   иначе фильтры занимают весь первый экран раньше товаров. */
@media (max-width: 940px) {
  .aside { position: static; }
  .filters h3 + *, .filters__check, .filters__price, .filters select { margin-bottom: 14px; }
}

/* ═══ «Отложить» ══════════════════════════════════════════════════════
   Список живёт в браузере покупателя и никуда не уходит (roadmap 3.1,
   условие 2). Поэтому кнопку рисует скрипт: без него она бы только
   обманывала, а разметки для неё в странице нет.
   ═══════════════════════════════════════════════════════════════════ */

.fav {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; cursor: pointer; border-radius: var(--r-btn);
  font: 650 14px 'Nunito', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-2); background: var(--sky);
  transition: background .16s, color .16s, transform .16s var(--ease);
}
.fav:hover { background: var(--accent-soft); color: var(--navy); }
.fav.is-on { background: color-mix(in srgb, var(--accent) 18%, white); color: var(--accent); }
.fav__mark { font-size: 16px; line-height: 1; }

/* В карточке товара — широкая кнопка под «Позвонить». */
.product__side .fav-slot .fav { width: 100%; height: 46px; margin-top: 10px; }

/* В сетке — кружок поверх фотографии.
   🔴 Не внутри ссылки на товар: вложенная кнопка внутри <a> ломает
   и разметку, и клавиатуру. Лежит рядом и всплывает поверх. */
.card { position: relative; }
.fav-slot--card { position: absolute; top: 9px; right: 9px; z-index: 2; }
.fav-slot--card .fav {
  width: 34px; height: 34px; padding: 0;
  background: rgba(255,255,255,.88);
  box-shadow: var(--sh-1); color: var(--muted);
}
.fav-slot--card .fav:hover { color: var(--accent); transform: scale(1.08); }
.fav-slot--card .fav.is-on { color: var(--accent); background: rgba(255,255,255,.96); }

/* Счётчик в шапке. Показывается, только когда в списке что-то есть. */
.head-fav {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 14px; border-radius: var(--r-btn);
  background: var(--sky); color: var(--ink-2);
  font-size: 14px; font-weight: 640; white-space: nowrap;
  transition: background .15s, color .15s;
}
.head-fav:hover { background: var(--accent-soft); color: var(--navy); }
.head-fav__mark { font-size: 17px; line-height: 1; color: var(--accent); }
.head-fav b { margin-left: 6px; font-variant-numeric: tabular-nums; }
/* 🔴 Прячем только слово. Раньше пряталось всё вместе с цифрой,
   и на телефоне оставалась голая звёздочка, которая ни о чём не говорит. */
@media (max-width: 900px) {
  .head-fav__word { display: none; }
  .head-fav { padding: 9px 12px; gap: 5px; }
  .head-fav b { margin-left: 0; }
}

/* ── страница списка ────────────────────────────────────────────────── */

.favlist { list-style: none; margin: 0 0 18px; padding: 0;
           background: var(--white); border-radius: var(--r);
           box-shadow: var(--sh-1); border: 1px solid var(--line-2); overflow: hidden; }
.favlist__item {
  display: grid; grid-template-columns: minmax(0,1fr) auto auto 34px;
  gap: 14px; align-items: center; padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
}
.favlist__item:last-child { border-bottom: 0; }
.favlist__name { color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.favlist__name:hover { color: var(--navy); }
.favlist__price { font-size: 17px; font-weight: 750; white-space: nowrap;
                  font-variant-numeric: tabular-nums; }
.favlist__x { width: 30px; height: 30px; padding: 0; font-size: 18px;
              background: transparent; color: var(--muted); }
.favlist__x:hover { background: rgba(207,63,63,.1); color: var(--danger); }
@media (max-width: 560px) {
  .favlist__item { grid-template-columns: minmax(0,1fr) auto; row-gap: 6px; }
  .favlist__x { grid-row: 1; grid-column: 2; }
  .favlist__price { grid-row: 2; grid-column: 1; }
  .favlist__item .stock { grid-row: 2; grid-column: 2; text-align: right; }
}
.favlist__itog { margin: 0 2px 22px; color: var(--ink-2); font-size: 15px; }

.fav-acts { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 460px) { .fav-acts .btn { width: 100%; } }

/* ── оговорка про оферту ─────────────────────────────────────────────
   🔴 Не украшение и не перестраховка: без неё цена на витрине формально
   обязывает продать именно по ней, а цены тянутся из 1С (roadmap 3.3). */
.footer__oferta {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px; line-height: 1.5; color: #8798a8; max-width: 760px;
}
.footer__oferta a { color: #cfe0ee; font-weight: 600; white-space: nowrap; }
.buybox__zakaz { margin: 8px 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.buybox__adres { display: block; margin-top: 4px; color: var(--muted); }
.buybox__oferta { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--muted); }

/* Ссылки на разделы в пустой выдаче поиска: человеку, который ничего
   не нашёл, нужен выход, а не сочувствие. */
.empty__links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
                margin: 16px 0 18px; }
.empty__links a {
  padding: 8px 14px; border-radius: var(--r-btn); background: var(--sky);
  color: var(--navy); font-size: 14px; font-weight: 600;
}
.empty__links a:hover { background: var(--accent-soft); }

/* ══ Телефон: безопасные поля и палец ═══════════════════════════════
   🔴 У iPhone 12 Pro есть чёлка сверху и полоса «домой» снизу. Всё,
   что прибито к краю экрана, надо отодвигать от них — иначе кнопка
   наполовину под полосой, и по ней не попасть. Отступы берём у самого
   устройства через `env(safe-area-inset-*)`; для этого в мета-теге
   стоит `viewport-fit=cover`.
   🔑 `max()` — чтобы на устройствах без чёлки осталось прежнее поле. */
.adminbar { bottom: max(16px, env(safe-area-inset-bottom)); }
.bot-fab  { bottom: max(22px, env(safe-area-inset-bottom));
            right:  max(22px, env(safe-area-inset-right)); }
.bot      { bottom: max(22px, calc(env(safe-area-inset-bottom) + 6px)); }
.bot-teaser { bottom: max(94px, calc(env(safe-area-inset-bottom) + 78px)); }
body      { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* 🔴 Палец — не курсор. Apple мерит удобную цель в 44 точки, и это
   не придирка: по ссылке в 20 точек с телефона промахиваешься.
   Правило только для узких экранов: на компьютере мышь точнее. */
@media (max-width: 900px) {
  .btn, .chip, .sec__more, .fav, .head-fav, .bot-chip, .crumbs a,
  .nav__btn, .empty__links a, .pager a, .pager span {
    min-height: 44px;
  }
  .btn, .sec__more, .head-fav, .crumbs a, .empty__links a {
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fav { min-width: 44px; }
  /* 🔴 Последний рубеж от горизонтальной прокрутки: длинное название
     или штрихкод не должны распирать страницу вбок. */
  html, body { overflow-x: hidden; }
}

/* «за 1 кг» у весового товара (корм на развес из мешка) — 11.10.2026 */
.buybox__za { font-size: 18px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.card__price small { font-size: .75em; font-weight: 600; color: var(--muted); }

/* ── Политика обработки данных ── */
.politika { max-width: 820px; }
.politika h2 { margin: 28px 0 10px; font-size: 22px; }
.politika p, .politika li { color: var(--ink-2, #33475C); }
.politika ul { padding-left: 20px; }
.politika__tab { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
.politika__tab th, .politika__tab td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line, #DFE8F1); }
.politika__tab th { color: var(--navy, #162D56); font-weight: 800; }
@media (max-width: 700px) {
  .politika__tab thead { display: none; }
  .politika__tab tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line, #DFE8F1); }
  .politika__tab td { display: block; border: 0; padding: 2px 0; }
  .politika__tab td:first-child { font-weight: 800; color: var(--navy, #162D56); }
}

/* ═══════════════════════════════════════════════════════
   Новости (03.11.2026) — services/novosti.ts
   ═══════════════════════════════════════════════════════ */

/* 🔑 Кнопка «Новости» на полке разделов. Тёплая, чтобы не читаться ещё
   одним разделом товаров. С ней кнопок стало семь, и на 1280 последняя
   уезжала за край — поэтому поля у всех кнопок полки чуть меньше. */
@media (min-width: 761px) {
  .nav__list { gap: 7px; }
  .nav__list .nav__btn { padding: 10px 12px; gap: 6px; }
}
.nav__list .nav__btn--novosti {
  position: relative; color: #9A5408;
  background: linear-gradient(180deg, #FFF6EA, #FFE9CC);
  border-color: #F7C27E;
}
.nav__list .nav__btn--novosti:hover { color: #7A4106; }
.nav__list .nav__btn--novosti.is-active {
  color: #fff; border-color: #E8892A;
  background: linear-gradient(168deg, #F5A043, #D9761A);
}
/* 🔴 Точка внутри кнопки, а не на её краю: полка прокручивается вбок
   (overflow-x), и всё, что торчит за кнопку, она срезает. */
.nav__dot {
  position: absolute; top: 5px; right: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: #F26B1D;
}

/* Полоска «Свежее» на первом экране */
.svezhee {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; max-width: 640px;
  padding: 10px 14px; border-radius: var(--r-btn); color: #fff; text-decoration: none;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  font-size: 15px; line-height: 1.3;
}
.svezhee:hover { background: rgba(255,255,255,.24); color: #fff; }
.svezhee__tag {
  flex: none; font-weight: 800; font-size: 12px; padding: 4px 10px;
  border-radius: var(--r-pill); background: #FFE9CC; color: #9A5408;
}
.svezhee__t { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svezhee__go { flex: none; margin-left: auto; font-weight: 800; }

/* Карточка новости */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card {
  display: flex; flex-direction: column; overflow: hidden; color: var(--ink);
  text-decoration: none; background: var(--white); border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(16,32,58,.06), 0 6px 18px rgba(16,32,58,.06);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.news-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,32,58,.07), 0 10px 22px rgba(16,32,58,.08); }
.news-card__cover { aspect-ratio: 16 / 9; background: var(--sky); overflow: hidden; display: block; }
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__none { display: flex; align-items: center; justify-content: center; height: 100%; }
.news-card__none img { width: 30%; height: auto; opacity: .55; }
.news-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.news-card__title { font-weight: 800; font-size: 18px; line-height: 1.25; }
.news-card__lead {
  font-size: 14px; line-height: 1.45; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.news-kind {
  font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--aqua-light); color: var(--teal-dark);
}
.news-kind--arrival { background: #FFF1DE; color: #B4660B; }
.news-kind--article { background: var(--ok-bg); color: var(--ok); }

/* Лента */
.news-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.news-chips a {
  padding: 9px 16px; border-radius: var(--r-btn); background: var(--white); color: var(--ink-2);
  text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 1px 2px rgba(16,32,58,.06);
}
.news-chips a.on { background: var(--navy); color: #fff; }

/* Страница новости */
.news-page { max-width: 820px; }
.news-page h1 { font-size: 34px; line-height: 1.15; margin: 10px 0 12px; }
.news-cover { display: block; position: relative; border-radius: var(--r); overflow: hidden;
  aspect-ratio: 16 / 9; margin: 18px 0; background: var(--sky); }
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-cover__play {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 11px 18px; border-radius: var(--r-btn); background: rgba(16,32,58,.82);
  color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap;
}
.news-cover--video:hover .news-cover__play { background: var(--navy); }
/* Видео — плеер по нажатию (04.11): круглая кнопка посередине обложки,
   после нажатия на её месте рамка плеера (video-po-nazhatiyu.js). */
.news-video .news-cover { margin-bottom: 10px; }
.news-cover__knopka {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(16,32,58,.78); box-shadow: 0 2px 6px rgba(16,32,58,.25);
  transition: background .15s, transform .15s;
}
.news-cover__knopka::after {
  content: ""; position: absolute; left: 31px; top: 24px;
  border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff;
}
.news-cover--video:hover .news-cover__knopka,
.news-cover--video:focus-visible .news-cover__knopka { background: var(--navy); transform: translate(-50%, -50%) scale(1.06); }
.news-cover--pusto { background: linear-gradient(135deg, var(--navy), #1f4a7a); }
.news-cover--igraet { background: #0b1626; }
.news-cover--igraet iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Вертикальный клип: кадр 9:16 по центру, по бокам — размытая обложка. */
.news-cover--vertikal { aspect-ratio: auto; height: min(70dvh, 640px); display: flex; justify-content: center; }
.news-cover--vertikal::before {
  content: ""; position: absolute; inset: -30px; background: var(--fon, none) center / cover no-repeat;
  filter: blur(22px) brightness(.55);
}
.news-cover--vertikal iframe { position: relative; width: auto; aspect-ratio: 9 / 16; max-width: 100%; }
.news-video__vk { margin: 0 0 18px; }
.news-video__vk a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px;
  border-radius: var(--r-btn); background: var(--sky); color: var(--navy);
  font-weight: 700; font-size: 14px; text-decoration: none;
}
.news-video__vk a:hover { background: #dbeef7; }
.news-text { background: var(--white); border-radius: var(--r); padding: 22px 26px;
  font-size: 17px; line-height: 1.6; color: var(--ink); }
.news-text p { margin: 0 0 12px; }
.news-text p:last-child { margin: 0; }
.news-text__lead { font-weight: 700; }
.news-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; }
.news-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-s); display: block; }
.news-goods { margin: 26px 0 8px; }
.news-goods h2 { font-size: 24px; margin: 0 0 4px; }
.news-goods > p { color: var(--muted); margin: 0 0 16px; }
.news-goods .grid { grid-template-columns: repeat(4, 1fr); }
.news-adres { margin: 22px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.news-subs {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 18px 0;
  padding: 18px 22px; background: var(--white); border-radius: var(--r);
}
.news-subs b { margin-right: 6px; }
.news-subs a {
  padding: 9px 14px; border-radius: var(--r-btn); background: var(--sky); color: var(--navy);
  font-weight: 700; text-decoration: none; font-size: 14px;
}
.news-staff { border: 2px dashed var(--teal); border-radius: var(--r); padding: 16px 20px;
  margin: 22px 0; background: #F4FCFC; }
.news-staff__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.news-staff__head small { color: var(--muted); }
.news-staff pre { white-space: pre-wrap; font-family: inherit; font-size: 15px; line-height: 1.5; margin: 0;
  background: var(--white); border-radius: var(--r-s); padding: 12px 14px; color: var(--ink); }

/* 🔴 Телефон — после основных правил, иначе они проигрывают. */
@media (max-width: 900px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
  .news-goods .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .news-grid { grid-template-columns: 1fr; gap: 14px; }
  /* на главной — две последние, остальное в ленте */
  .news-grid .news-card:nth-child(n+3) { display: none; }
  .news-grid--vse .news-card:nth-child(n+3) { display: flex; }
  .news-goods .grid { grid-template-columns: repeat(2, 1fr); }
  .news-foto { grid-template-columns: repeat(2, 1fr); }
  .news-page h1 { font-size: 26px; }
  .news-text { padding: 16px 18px; font-size: 16px; }
  .svezhee { font-size: 14px; flex-wrap: wrap; gap: 6px 8px; }
  .svezhee__t { white-space: normal; flex-basis: 100%; }
  .svezhee__go { display: none; }
  .news-cover__play { font-size: 14px; padding: 9px 14px; }
  .news-cover__knopka { width: 60px; height: 60px; }
  .news-cover__knopka::after { left: 24px; top: 18px; border-width: 12px 0 12px 19px; }
  .news-video__vk a { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Плашка cookie (11.11.2026) — partials/cookie.njk, js/cookie-soglasie.js
   Видна, только пока человек не выбрал. Ниже бота по слою: открытый бот
   важнее. 🔴 [hidden] прячет её правилом выше — своего display тут нет
   у состояния «скрыто», только у видимой.
   ═══════════════════════════════════════════════════════════════════ */
.cookie-plashka {
  position: fixed; left: 16px; bottom: 16px; z-index: 70; max-width: 440px;
  background-color: var(--white); background-image: var(--steklo);
  box-shadow: var(--kromka), var(--sh-mega); border-radius: var(--r);
  padding: 18px 18px 16px; color: var(--ink); font-size: 15px; line-height: 1.45;
}
.cookie-plashka__z { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.cookie-plashka__t { margin: 0 0 14px; color: var(--ink-2); }
.cookie-plashka__t a { color: var(--blue-600); }
.cookie-plashka__ryad { display: flex; gap: 10px; }
.cookie-plashka__ryad button {
  flex: 1; min-height: 44px; border-radius: var(--r-btn); font: inherit; font-weight: 700;
  cursor: pointer; border: 0; box-shadow: var(--sh-btn);
}
.cookie-plashka__da { background: var(--aqua); color: #fff; }
.cookie-plashka__net { background: var(--white); color: var(--ink); border: 1px solid var(--line) !important; }
.cookie-plashka__ryad button:hover { box-shadow: var(--sh-btn-h); }
@media (max-width: 560px) {
  .cookie-plashka {
    left: 10px; right: 10px; max-width: none; padding: 16px;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  /* кнопка бота — над плашкой, а не поверх неё */
  body.cookie-on .bot-dock { bottom: calc(var(--cookie-h, 230px) + 22px); }
}