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

   Палитра снята пипеткой с логотипа: тёмно-синий и бирюза.
   Шрифт 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);

  /* ── стекло ── */
  --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; }
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;
  gap: 28px; align-items: center; padding: 12px 0 10px;
}
/* Логотип в шапке — векторный файл, не текст. Высота задана, ширина
   считается сама: так он не дёргается при загрузке страницы.

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

.search { position: relative; width: 100%; }
.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; }
.nav__list a {
  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-pill);
  background: linear-gradient(160deg, rgba(255,255,255,.52), rgba(255,255,255,.24));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--float-s);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s, color .2s;
}
.nav__list a:hover { transform: translateY(-2px); box-shadow: var(--float); color: var(--navy); }
.nav__list a.is-active {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 92%, white),
    color-mix(in srgb, var(--accent) 74%, var(--navy)));
  color: #fff; border-color: color-mix(in srgb, var(--accent) 60%, white);
  box-shadow: var(--float), 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.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; max-width: 760px; }
.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;
  margin-bottom: 20px; backdrop-filter: blur(6px);
}
.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); backdrop-filter: blur(6px);
}
.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%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  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); }
.card__noimg { font-size: 42px; opacity: .32; }
.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;
  backdrop-filter: blur(4px);
}
.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__noimg { font-size: 92px; opacity: .28; }

/* ═══ Галерея товара ═══════════════════════════════════
   Лента миниатюр под снимком + полноэкранный просмотр.
   Без 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); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 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); }
.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));
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  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);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  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)); }

.header {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 8px 24px -14px rgba(22,45,86,.22);
}

/* Скругления единые: всё, что плашка, получает var(--r) */
.btn, input, select, textarea { border-radius: var(--r-btn); }
.chip, .stock, .badge, .crumbs a { 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);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  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));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  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%; } }