/*
Theme Name:   WPSite Child
Theme URI:    https://example.com
Description:  Дочерняя тема Hello Elementor. Вёрстку страниц держит Elementor, здесь — только глобальные стили, шрифты и хуки.
Author:       —
Template:     hello-elementor
Version:      1.0.0
Text Domain:  wpsite-child
*/

/* Глобальные переменные дизайна.
   Значения подставляются из макета; Elementor Site Settings их переопределять не должен. */
:root {
  --wps-color-primary: #1a1a1a;
  --wps-color-accent: #1a1a1a;
  --wps-color-text: #1a1a1a;
  --wps-color-muted: #6b7280;
  --wps-color-bg: #ffffff;
  --wps-radius: 8px;
  --wps-container: 1200px;
}

/* ============================================================ Токены AminoVit
   Значения сняты с макета Figma «AminoVit». Здесь — единственный источник
   правды по цветам; Elementor использует те же значения в Site Settings. */
/*
 * Значения сняты через Figma REST API из самого документа макета,
 * а не подобраны с рендера: #638B2C встречается 111 раз заливкой
 * и 156 раз обводкой — это основной цвет бренда.
 */
:root {
  --av-green:      #638B2C;
  --av-green-deep: #283812;
  --av-green-dark: #3B531A;
  --av-green-mid:  #95B476;
  --av-green-soft: #D0DEBA;
  --av-green-pale: #F0F4EA;
  --av-surface:    #F8FAFC;
  --av-field:      #F3F4F6;
  --av-border:     #E5E7EB;
  --av-ink:        #0F161E;
  --av-ink-2:      #111B15;
  --av-muted:      #555F4D;
  --av-radius-btn: 40px;
  --av-radius-md:  24px;
  --av-radius-sm:  12px;

  /* Прежние имена сохранены и переведены на точные цвета,
     чтобы не переписывать весь файл разом. */
  --av-green-900: #283812;
  --av-green-800: #3B531A;
  --av-green-700: #638B2C;
  --av-olive:     #638B2C;
  --av-green-500: #638B2C;
  --av-lime:      #638B2C;
  --av-green-300: #95B476;
  --av-green-200: #D0DEBA;
  --av-green-100: #F0F4EA;
  --av-green-50:  #F8FAFC;
  --av-cream:     #F8FAFC;
  --av-text:      #21272A;
  --av-radius-pill: 999px;  /* пилюли в макете полностью скруглены */
  --av-radius-card: 32px;   /* карточки секций */
  --av-container:   1200px;
}

body { font-family: Rubik, Inter, "Segoe UI", system-ui, sans-serif; color: var(--av-text); }

/* =====================================================================
   ШАПКА И ПОДВАЛ — размеры из макета (Frame 79 и Footer/08 кадра «Главная»)
   ===================================================================== */

/* ------------------------------------------------------------- Логотип */
.av-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1;
}
/* В макете логотип — картинка 164×39; высоту фиксируем, ширину ведёт пропорция.
   Селектор из двух классов и тега: у Elementor есть своё `.elementor img
   { height: auto }`, и оно перебивало одиночный класс. */
/* Исходники логотипа шире своей рамки в макете (1694×328 против 164×39),
   поэтому задаём рамку макета и вписываем картинку в неё по левому краю. */
.av-logo img.av-logo__img {
  display: block;
  width: 164px;
  height: 39px;
  object-fit: contain;
  object-position: left center;
}
.av-logo--footer img.av-logo__img { width: 200px; height: 82px; }

.av-logo__mark { width: 34px; height: 27px; color: var(--av-lime); flex: none; }
.av-logo__text { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.av-logo__amino { color: var(--av-green-900); }
.av-logo__vit   { color: var(--av-lime); }

/* В подвале логотип целиком белый. */
.av-logo--light .av-logo__mark,
.av-logo--light .av-logo__amino,
.av-logo--light .av-logo__vit { color: #fff; }

/* ------------------------------------------- Переключатель языка Рус/Англ
   Component 47: подложка 113×43 #F3F4F6 r999 с полем 2, внутри два сегмента
   54×39 и разделитель 1×24 #E5E7EB. Активный — зелёный с текстом #F0F4EA. */
.av-lang {
  display: inline-flex;
  align-items: center;
  height: 43px;
  padding: 2px;
  border-radius: var(--av-radius-pill);
  background: #F3F4F6;
}
.av-lang__sep { width: 1px; height: 24px; background: #E5E7EB; flex: none; }
.av-lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 39px;
  border-radius: var(--av-radius-pill);
  background: #FFFFFF;
  font: 500 15px/19px Rubik, Inter, sans-serif;
  color: #111827;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.av-lang__item:hover { background: var(--av-green-100); }
.av-lang__item.is-active { background: var(--av-lime); color: #F0F4EA; }

/* ----------------------------------------------------- Полоса шапки
   Component 68: 1376×68, белая, r20, поля 12/80. Кадр Frame 79 добавляет
   вокруг 32 px, поэтому внешний контейнер получает padding 32. */
#av-header-bar > .e-con-inner,
#av-header-bar {
  min-height: 68px;
}
#av-header .e-con-inner { align-items: center; }

/* --------------------------------------- Пункты главного меню
   Rubik 500 15/18, gap 24, поля 10/12. Активный — пилюля #F0F4EA
   с текстом #638B2C и начертанием 600. */
#av-main-nav .elementor-nav-menu {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
#av-main-nav .elementor-nav-menu > li > a { white-space: nowrap; }
/* В макете поля есть только у активного пункта — он один нарисован пилюлей.
   У остальных ширина равна ширине надписи, а расстояние держит промежуток 24. */
#av-main-nav .elementor-item {
  padding-left: 0;
  padding-right: 0;
  border-radius: var(--av-radius-pill);
  transition: background-color .18s ease, color .18s ease;
}
#av-main-nav .elementor-item:hover { color: #638B2C; }
#av-main-nav .elementor-item.elementor-item-active,
#av-main-nav .current-menu-item > .elementor-item,
#av-main-nav .current-menu-ancestor > .elementor-item {
  padding-left: 12px;
  padding-right: 12px;
  background: #F0F4EA;
  color: #638B2C;
  font-weight: 600;
}

/* Подвал: подчёркивания у пунктов не нужны, они мешают ритму строки. */
#av-footer-nav .elementor-item::after,
#av-footer-nav .elementor-item::before { display: none; }
#av-footer-nav .elementor-nav-menu { flex-wrap: wrap; justify-content: flex-end; }
#av-footer-nav .elementor-item { border-radius: 40px; }

/* --------------------------------------------------- Раскладка шапки
   Elementor по умолчанию тянет виджеты во flex-контейнере на всю ширину,
   из-за чего меню наезжало на логотип. Задаём роли явно. */
#av-header .elementor-widget-html   { width: auto; flex: 0 0 auto; }
#av-header .elementor-widget-button { width: auto; flex: 0 0 auto; }
#av-header .elementor-widget-nav-menu { width: auto; flex: 1 1 auto; min-width: 0; }
#av-header #av-header-actions { width: auto; flex: 0 0 auto; }
#av-header-cta .elementor-button { white-space: nowrap; }
/* Виджет бургера на десктопе скрыт целиком: если прятать только его
   содержимое, пустая обёртка всё равно съедала промежуток 16 px. */
.av-mnav-widget { display: none; }

/* Между 1024 и 1440 полоса уже макетных 1376: поля 80 и промежуток 24
   вместе шире, чем остаётся под меню, и пункты уезжали во вторую строку.
   Поля и промежуток сжимаются пропорционально ширине окна. */
/* Между 1025 и 1440 полоса уже макетных 1376: логотип 164, меню 505
   и кнопки 243 с промежутками 24 требуют 960 px, а поля по 80 их не
   оставляют. Поля и промежутки между пунктами сжимаются. */
@media (min-width: 1025px) and (max-width: 1439px) {
  #av-header-bar {
    padding-left: clamp(16px, 3vw, 80px) !important;
    padding-right: clamp(16px, 3vw, 80px) !important;
    column-gap: 16px;
  }
  #av-header #av-main-nav .elementor-nav-menu > li {
    margin-left: clamp(4px, .9vw, 12px) !important;
    margin-right: clamp(4px, .9vw, 12px) !important;
  }
}

/* Таджикские пункты длиннее русских («Дар бораи мо» против «О нас»,
   кнопка «Тамос гирифтан» против «Связаться»): уже 1280 px меню наезжало
   на переключатель языка. Для /tg/ промежутки и кегль чуть меньше. */
@media (min-width: 1025px) and (max-width: 1279px) {
  html[lang="tg"] #av-header #av-main-nav .elementor-nav-menu > li {
    margin-left: clamp(2px, .35vw, 12px) !important;
    margin-right: clamp(2px, .35vw, 12px) !important;
  }
  html[lang="tg"] #av-header #av-main-nav .elementor-item { font-size: 14px !important; }
}

/* Подвал — та же проблема с растяжением. */
#av-footer .elementor-widget-html { width: auto; flex: 0 0 auto; }
#av-footer .elementor-widget-nav-menu { width: auto; flex: 0 1 auto; min-width: 0; }
#av-footer .elementor-widget-text-editor { width: auto; flex: 1 1 auto; }
#av-footer .elementor-widget-social-icons { width: auto; flex: 0 0 auto; }
#av-footer .elementor-widget-divider { width: 100%; }
#av-footer-rule .elementor-divider { padding: 0; }
#av-footer-bottom .elementor-widget-text-editor p { margin: 0; }
/* Ряды подвала в макете ровно 82 и 24 px: логотип 200×82 и строка копирайта
   с иконками 24×24. Без этого обёртки виджетов добавляли по 7–12 px. */
#av-footer-top { min-height: 82px; }
#av-footer .av-logo--footer { display: block; line-height: 0; }
#av-footer-social .elementor-social-icon {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 18px;
}
#av-footer-social .elementor-grid { align-items: center; }

/* ------------------------------------------------------- Секции главной */
.av-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--av-radius-pill);
  background: var(--av-green-100);
  color: var(--av-green-700);
  font: 600 11px/1 Rubik, Inter, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.av-tag--light { background: rgba(255,255,255,.22); color: #fff; }

.av-hero__title { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.av-hero__title span {
  font: 800 40px/1.05 Rubik, Inter, sans-serif;
  letter-spacing: -0.01em;
}
.av-hero__l1, .av-hero__l3 { color: var(--av-green-900); }
.av-hero__l2 { color: var(--av-green-300); }

/* Круг героя держит форму независимо от длины текста. */
#av-hero-circle { aspect-ratio: 1 / 1; }

/* Шаги «Как мы работаем» соединены линией, как в макете. */
#av-how .elementor-icon-box-wrapper { position: relative; }
#av-how .e-con-inner > .e-con::after {
  content: "";
  position: absolute;
  top: 34px;
  left: 50%;
  width: 100%;
  height: 1px;
  background: var(--av-green-200);
  z-index: 0;
}
#av-how .e-con-inner > .e-con:last-child::after { display: none; }
#av-how .elementor-icon { position: relative; z-index: 1; background: var(--av-cream); }

/* ------------------------------------------------- Заголовок внутренних страниц */
.av-page-title { margin: 0; display: flex; flex-direction: column; }
.av-page-title span {
  font: 700 44px/1.1 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
}
.av-page-title .is-accent { color: var(--av-green-500); }

/* Выделения в карточке «О компании» — зелёным, как в макете. */
#av-about-card strong { color: var(--av-green-700); font-weight: 700; }

/* --------------------------------------------------- Каталог: категории */
.av-cats__title { margin: 0 0 14px; font: 700 20px/1.2 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-cats__list, .av-cats__sub { list-style: none; margin: 0; padding: 0; }
.av-cats__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--av-green-100);
  border-radius: 10px;
  font: 500 14px/1.3 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
.av-cats__item:hover { background: var(--av-green-50); border-color: var(--av-green-200); }
.av-cats__item.is-active { background: var(--av-green-100); border-color: var(--av-green-200); font-weight: 600; }
.av-cats__chevron { color: var(--av-green-500); font-size: 18px; line-height: 1; }
.av-cats__sub { margin: -4px 0 8px 14px; }
.av-cats__item--sub { padding: 9px 14px; font-size: 13px; border-style: dashed; }

/* ---------------------------------------------------- Хлебные крошки */
.av-crumbs { font: 500 13px/1.4 Rubik, Inter, sans-serif; color: var(--av-text); }
.av-crumbs a { color: var(--av-green-700); text-decoration: none; }
.av-crumbs a:hover { text-decoration: underline; }
.av-crumbs__sep { margin: 0 8px; color: var(--av-green-300); }

/* Раскладка каталога: боковая колонка не сжимается. */
#av-catalog > .e-con-inner > .e-con:first-child { flex: 0 0 auto; }

/* ------------------------------------------------- Сетка карточек каталога
   Типографику карточек Elementor 4 на уровне виджета не отдаёт,
   поэтому задаём её здесь. */
#av-catalog-grid .elementor-post__card { border-radius: 18px; overflow: hidden; border: 1px solid var(--av-green-100); box-shadow: none; }
#av-catalog-grid .elementor-post__thumbnail { padding-bottom: 70%; }
#av-catalog-grid .elementor-post__title,
#av-catalog-grid .elementor-post__title a {
  font: 700 17px/1.35 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
}
#av-catalog-grid .elementor-post__excerpt p { font-size: 13px; line-height: 1.6; color: #6B7280; }
#av-catalog-grid .elementor-post__read-more {
  font: 600 13px/1 Rubik, Inter, sans-serif;
  color: var(--av-green-700);
  text-decoration: none;
}
#av-catalog-grid .elementor-post__avatar,
#av-catalog-grid .elementor-post__meta-data { display: none; }
#av-catalog-grid .elementor-post__badge { background: var(--av-lime); }

/* ------------------------------------------------------------- Новости */
#av-post-meta .elementor-post-info__terms-list-item {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--av-radius-pill);
  background: var(--av-lime);
  color: #fff;
  font: 600 11px/1 Rubik, Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
#av-post-meta .elementor-icon-list-item { color: var(--av-text); font-size: 13px; }

/* Цитата в статье — зелёная линия слева, как в макете. */
#av-post-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--av-lime);
  font: italic 600 17px/1.5 Rubik, Inter, sans-serif;
  color: var(--av-green-700);
}
#av-post-body blockquote cite {
  display: block;
  margin-top: 10px;
  font: 600 13px/1 Rubik, Inter, sans-serif;
  font-style: normal;
  color: var(--av-text);
}
#av-post-body ul { padding-left: 20px; }
#av-post-body li { margin-bottom: 6px; }

#av-news-grid .elementor-post__card { border-radius: 18px; border: 1px solid var(--av-green-100); box-shadow: none; }
#av-news-grid .elementor-post__title,
#av-news-grid .elementor-post__title a { font: 700 17px/1.35 Rubik, Inter, sans-serif; color: var(--av-green-900); }
#av-news-grid .elementor-post__excerpt p { font-size: 13px; color: #6B7280; }
#av-news-grid .elementor-post__read-more { font: 600 13px/1 Rubik, Inter, sans-serif; color: var(--av-green-700); text-decoration: none; }
#av-news-grid .elementor-post__avatar { display: none; }

/* Метка рубрики на карточке новости — лаймовая, как в макете. */
#av-news-grid .elementor-post__badge {
  background: var(--av-lime);
  color: #fff;
  border-radius: var(--av-radius-pill);
  font: 600 11px/1 Rubik, Inter, sans-serif;
  letter-spacing: .06em;
  padding: 7px 14px;
}

/* --------------------------------------------------------- Партнёры */
/*
 * «Наши партнёры» (275:495): белые круги 220 через 38 на полосе #EDF2F6,
 * без тени и обводки. Логотипы в макете почти во весь круг, VILOFOSS даже
 * чуть шире его. Ширину логотипа считает [partners_logos] — одинаковая
 * своя у каждого партнёра — и отдаёт её долей круга (--av-logo-w), поэтому
 * логотип сжимается вместе с кругом.
 *
 * Пять кругов с промежутками — 1252 px. На ноутбуке 1280 столько нет, и
 * ряд разваливался на 4 + 1; поэтому круг не шире (100vw − поля − 4·38) / 5.
 */
.av-partners {
  --av-plogo-d: min(220px, calc((100vw - 212px) / 5));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px;
}
#av-partners-list .av-partners { margin-top: 52px; }   /* 12 от подписи + 52 = 64 */
#av-partners-list .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.av-partners__item {
  flex: 0 0 var(--av-plogo-d);
  width: var(--av-plogo-d);
  height: var(--av-plogo-d);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
}
.av-partners__item img {
  width: var(--av-logo-w, 82%);
  max-width: none;
  height: auto;
}
.av-partners__name { font: 700 15px/1.3 Rubik, Inter, sans-serif; color: var(--av-green-700); text-align: center; }
.av-empty { color: var(--av-text); font-size: 14px; text-align: center; }

/* --------------------------------------------------------- Контакты */
.av-social-label { margin: 6px 0 0; font: 600 13px/1 Rubik, Inter, sans-serif; color: var(--av-green-900); }
#av-contacts .elementor-icon-box-title { margin-bottom: 4px; }
#av-contacts .elementor-icon-box-description a { color: var(--av-green-700); text-decoration: none; }
#av-contact-form .elementor-field-group > label {
  font: 600 12px/1 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
  margin-bottom: 6px;
}
#av-contact-form .elementor-field {
  border: 1px solid var(--av-green-100);
  border-radius: 10px;
  padding: 11px 14px;
  font: 400 13px/1.4 Rubik, Inter, sans-serif;
  background: #FBFCFA;
}
#av-contact-form .elementor-field:focus { outline: none; border-color: var(--av-green-500); }
#av-contact-form .elementor-button {
  background: var(--av-green-300);
  color: #fff;
  border-radius: var(--av-radius-pill);
  padding: 11px 28px;
  font: 600 13px/1 Rubik, Inter, sans-serif;
}
#av-contact-form .elementor-button:hover { background: var(--av-green-700); }

/* --------------------------------------------------------- Карьера */
.av-rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 11px/1 Rubik, Inter, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--av-green-500);
}
.av-rule::before { content: ""; width: 28px; height: 2px; background: var(--av-lime); }

#av-career-text strong, #av-career-text-2 strong { color: var(--av-green-700); }
#av-career-text-2 .av-accent { color: var(--av-green-500); font-weight: 600; }

.av-vacancies { display: grid; gap: 14px; }
.av-vacancies--empty {
  padding: 56px 24px;
  border-radius: 18px;
  background: var(--av-green-50);
  text-align: center;
}
.av-vacancies__empty-title { margin: 0 0 8px; font: 700 19px/1.3 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-vacancies__empty-text { margin: 0; font-size: 13px; color: var(--av-text); }

.av-vacancy {
  display: grid;
  gap: 6px;
  padding: 20px 24px;
  border: 1px solid var(--av-green-100);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease;
}
.av-vacancy:hover { border-color: var(--av-green-300); background: var(--av-green-50); }
.av-vacancy__title { font: 700 17px/1.3 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-vacancy__excerpt { font-size: 13px; color: var(--av-text); }
.av-vacancy__more { font: 600 13px/1 Rubik, Inter, sans-serif; color: var(--av-green-700); }

.av-page-title--center { align-items: center; text-align: center; }

/* Мета-строка и лид статьи */
.av-post-meta { display: flex; align-items: center; gap: 14px; }
.av-post-meta__cat {
  padding: 6px 14px;
  border-radius: var(--av-radius-pill);
  background: var(--av-lime);
  color: #fff;
  font: 600 11px/1 Rubik, Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.av-post-meta__date { font: 500 13px/1 Rubik, Inter, sans-serif; color: var(--av-text); }
.av-post-lead { margin: 0; font: 400 16px/1.6 Rubik, Inter, sans-serif; color: var(--av-text); }

/* ============================================ Каталог: карточка товара
   Разметку этих блоков даёт плагин site-core, оформление — здесь. */

.av-h2 {
  margin: 0 0 18px;
  font: 700 30px/1.2 Rubik, Inter, sans-serif;
  color: var(--av-green-700);
}
.av-sec { padding: 48px 0; }
.av-sec--tint { background: #F7F9F6; }
.av-sec--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.av-sec--split .av-col--wide { grid-column: span 1; }
.av-prose p { margin: 0 0 14px; font-size: 14px; line-height: 1.75; color: var(--av-text); }
.av-subhead { margin: 18px 0 10px; font: 700 14px/1.4 Rubik, Inter, sans-serif; color: var(--av-green-900); }

/* Шапка товара */
.av-product-head { display: grid; gap: 14px; justify-items: start; }
.av-product-title {
  margin: 0;
  font: 700 34px/1.15 Rubik, Inter, sans-serif;
  color: #1B1B1B;
}
.av-specs { margin: 6px 0 0; width: 100%; }
.av-specs__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--av-green-100);
}

/* Кнопки */
.av-btn {
  display: inline-block;
  border-radius: var(--av-radius-pill);
  font: 600 14px/1 Rubik, Inter, sans-serif;
  text-decoration: none;
  padding: 14px 30px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.av-btn--primary { background: var(--av-olive); color: #fff; }
.av-btn--primary:hover { background: var(--av-green-700); color: #fff; }
.av-btn--ghost {
  border: 1px solid var(--av-green-200);
  color: var(--av-green-700);
  padding: 11px 24px;
  font-size: 13px;
}
.av-btn--ghost:hover { background: var(--av-green-50); border-color: var(--av-green-300); }

/* Таблица состава */
.av-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; }
.av-table th {
  background: var(--av-olive);
  color: #fff;
  font: 600 12px/1 Rubik, Inter, sans-serif;
  text-align: left;
  padding: 13px 16px;
}
.av-table th:last-child, .av-table td:last-child { text-align: right; }
.av-table td {
  padding: 13px 16px;
  font: 500 13px/1.4 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
  background: var(--av-green-50);
  border-bottom: 1px solid #fff;
}
.av-table td:last-child { font-weight: 700; }

/* Плитка преимуществ */
.av-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.av-benefit {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--av-green-100);
  border-radius: 14px;
}
.av-benefit__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--av-green-500);
  position: relative;
}
.av-benefit__title { font: 700 14px/1.4 Rubik, Inter, sans-serif; color: var(--av-green-900); }

/* Списки с маркерами и галочками */
.av-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.av-list li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--av-text);
}
.av-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--av-lime);
}
.av-list--check li::before {
  left: 0; top: 3px;
  width: 5px; height: 10px;
  border: solid var(--av-green-500);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}

/* Для каких животных */
.av-animals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.av-animals__card { padding: 24px; background: var(--av-cream); border-radius: 16px; }
.av-animals__title { margin: 0 0 14px; font: 700 17px/1.2 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-animals__other {
  margin: 20px 0 0;
  padding: 16px 24px;
  background: var(--av-cream);
  border-radius: 12px;
  font-size: 13px;
  color: var(--av-text);
}
.av-animals__other strong { color: var(--av-green-900); }

/* Условия хранения */
.av-storage { display: grid; gap: 10px; }
.av-storage__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--av-green-50);
  border-radius: 10px;
  font: 500 13px/1.4 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
}
.av-storage__icon {
  width: 20px; height: 20px;
  flex: none;
  border-radius: 5px;
  background: var(--av-green-300);
}

/* ------------------------------------ Каталог: баннер и сетка */
.av-banner {
  padding: 64px 20px;
  text-align: center;
  background: linear-gradient(100deg, var(--av-green-700), var(--av-lime));
}
.av-banner__title {
  margin: 0;
  font: 700 42px/1.15 Rubik, Inter, sans-serif;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.av-banner__text { margin-top: 10px; color: rgba(255,255,255,.9); font-size: 14px; }

.av-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Колонка, а не сетка: так кнопка прижимается к низу карточки,
   и в ряду они выравниваются по высоте даже без обложки. */
.av-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--av-green-100);
  border-radius: 18px;
}
.av-card > * { width: 100%; }
/* Высота обложки фиксирована: у товаров из прайса фото пока нет, и пустая
   ссылка схлопывалась — карточки в ряду получались разной высоты. */
.av-card__media {
  display: block;
  width: 100%;
  height: 230px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--av-green-50);
}
.av-card__media:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #F0F4EA 0%, #D0DEBA 100%);
}
.av-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Карточки в ряду одной высоты, кнопка прижата к низу. */
.av-grid { align-items: stretch; }
.av-card { height: 100%; }
.av-card .av-btn, .av-card__more { margin-top: auto; }
.av-card__title { margin: 0; font: 700 15px/1.35 Rubik, Inter, sans-serif; }
.av-card__title a { color: var(--av-green-900); text-decoration: none; }
.av-card__text { margin: 0; font-size: 12px; line-height: 1.6; color: var(--av-text); }

.av-pagination ul { display: flex; gap: 8px; justify-content: center; list-style: none; margin: 32px 0 0; padding: 0; }
.av-pagination a, .av-pagination span {
  display: grid;
  place-items: center;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  border: 1px solid var(--av-green-100);
  border-radius: 10px;
  font: 600 13px/1 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
  text-decoration: none;
}
.av-pagination .current { background: var(--av-lime); border-color: var(--av-lime); color: #fff; }

@media (max-width: 1024px) {
  .av-sec--split { grid-template-columns: 1fr; gap: 32px; }
  .av-benefits { grid-template-columns: repeat(2, 1fr); }
  .av-animals, .av-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .av-benefits, .av-animals, .av-grid { grid-template-columns: 1fr; }
  .av-banner__title { font-size: 30px; }
  .av-product-title { font-size: 26px; }
}

/* ------------------------------------ Каталог: лендинг и плитки категорий */
.av-page-title .is-light { font-weight: 400; }

.av-cat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.av-cat-card {
  display: grid;
  gap: 10px;
  padding: 12px 12px 20px;
  background: var(--av-cream);
  border-radius: 18px;
  text-decoration: none;
  text-align: center;
  transition: background-color .18s ease;
}
.av-cat-card:hover { background: var(--av-green-100); }
.av-cat-card__media { display: block; border-radius: 12px; overflow: hidden; background: var(--av-green-50); }
.av-cat-card__media img { display: block; width: 100%; height: 190px; object-fit: cover; }
.av-cat-card__title { font: 700 15px/1.35 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-cat-card__text { font-size: 12px; color: var(--av-text); }

/* Две фотографии в блоке «Продукты» перекрываются, как в макете. */
#av-products-media { position: relative; }
#av-products-media .elementor-widget-image:last-child {
  position: absolute;
  right: -12px;
  bottom: -28px;
  width: 45%;
  border: 6px solid #fff;
  border-radius: 18px;
  overflow: hidden;
}

@media (max-width: 1024px) { .av-cat-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .av-cat-cards { grid-template-columns: 1fr; }
  #av-products-media .elementor-widget-image:last-child { position: static; width: 100%; border: 0; margin-top: 12px; }
}

/* ------------------------------------------- Линейка рецептур (премиксы) */
.av-line { display: grid; gap: 12px; }
.av-line__row {
  display: grid;
  grid-template-columns: 52px 44px 1fr 32px;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid var(--av-green-100);
  border-radius: 14px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
a.av-line__row:hover { background: linear-gradient(100deg, var(--av-green-500), var(--av-lime)); border-color: transparent; }
a.av-line__row:hover .av-line__num { color: rgba(255,255,255,.75); }
a.av-line__row:hover .av-line__title,
a.av-line__row:hover .av-line__text { color: #fff; }
a.av-line__row:hover .av-line__icon { background: rgba(255,255,255,.3); }

.av-line__num { font: 700 26px/1 Rubik, Inter, sans-serif; color: var(--av-green-300); }
.av-line__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--av-green-50); }
.av-line__body { display: grid; gap: 3px; }
.av-line__title { font: 700 15px/1.35 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-line__text { font-size: 12px; color: var(--av-text); }
.av-line__arrow {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--av-green-500);
  color: #fff;
  font-size: 14px;
}

/* --------------------------------------------------- Страница вакансии */
.av-back {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--av-radius-pill);
  background: var(--av-green-50);
  font: 600 12px/1 Rubik, Inter, sans-serif;
  color: var(--av-green-700);
  text-decoration: none;
}
.av-back:hover { background: var(--av-green-100); }

.av-vac-head { display: grid; gap: 22px; }
.av-vac-head__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.av-vac-head__main { max-width: 620px; }
.av-vac-title { margin: 0 0 12px; font: 700 42px/1.12 Rubik, Inter, sans-serif; color: #1B1B1B; }
.av-vac-lead { margin: 0; font-size: 14px; line-height: 1.7; color: var(--av-text); }

.av-vac-exp {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 16px 22px;
  border: 1px solid var(--av-green-100);
  border-radius: 12px;
}
.av-vac-exp__icon { width: 28px; height: 28px; border-radius: 8px; background: var(--av-green-100); }
.av-vac-exp__body { display: grid; gap: 2px; }
.av-vac-exp__label { font: 500 10px/1 Rubik, Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--av-text); }
.av-vac-exp__value { font: 700 15px/1 Rubik, Inter, sans-serif; color: var(--av-green-900); }

.av-vac { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; padding: 32px 0 8px; }
.av-vac__main { display: grid; gap: 8px; }
.av-vac__side { display: grid; gap: 18px; position: sticky; top: 24px; }

/* Заголовки разделов вакансии подчёркнуты коротким лаймовым штрихом. */
.av-h2--rule { margin-top: 32px; padding-bottom: 10px; position: relative; font-size: 26px; color: #1B1B1B; }
.av-h2--rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 46px; height: 3px;
  border-radius: 2px;
  background: var(--av-lime);
}

.av-list--arrow li::before,
.av-list--star li::before {
  left: 0; top: 4px;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--av-green-500);
  font-size: 12px;
  line-height: 1.4;
}
.av-list--arrow li::before { content: "→"; }
.av-list--star li::before { content: "★"; }

.av-vac-card { padding: 22px; background: var(--av-green-50); border-radius: 16px; }
.av-vac-card__title { margin: 0 0 8px; font: 700 17px/1.3 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-vac-card__text { margin: 0 0 16px; font-size: 12px; line-height: 1.6; color: var(--av-text); }
.av-vac-contact { display: flex; gap: 12px; align-items: flex-start; padding-top: 14px; border-top: 1px solid var(--av-green-200); }
.av-vac-contact__icon { width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--av-green-300); margin-top: 2px; }
.av-vac-contact__label { display: block; font-size: 11px; color: var(--av-text); }
.av-vac-contact__value { font: 700 13px/1.4 Rubik, Inter, sans-serif; color: var(--av-green-700); text-decoration: none; }

.av-vac-note { padding: 20px 22px; border: 1px solid var(--av-green-200); border-radius: 16px; }
.av-vac-note__title { margin: 0 0 8px; font: 700 15px/1.3 Rubik, Inter, sans-serif; color: var(--av-green-700); }
.av-vac-note__text p { margin: 0; font-size: 12px; line-height: 1.7; color: var(--av-text); }

.av-vac-cta {
  margin: 32px 0 48px;
  padding: 42px 32px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(100deg, var(--av-green-700), var(--av-green-500));
}
.av-vac-cta__title { margin: 0 0 10px; font: 700 28px/1.25 Rubik, Inter, sans-serif; color: #fff; }
.av-vac-cta__text { margin: 0; font-size: 13px; color: rgba(255,255,255,.9); }
.av-vac-cta__text a { color: var(--av-lime); font-weight: 600; text-decoration: none; }

@media (max-width: 1024px) {
  .av-vac { grid-template-columns: 1fr; gap: 32px; }
  .av-vac__side { position: static; }
  .av-vac-head__row { flex-direction: column; }
  .av-vac-title { font-size: 32px; }
  .av-line__row { grid-template-columns: 40px 1fr 28px; }
  .av-line__icon { display: none; }
}

/* ============================================================ Фоновый декор
   Кресты, молекулярный узор и перья из макета. Слой лежит под контентом,
   не ловит клики и обрезается границами секции. */
.av-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Виджет с декором раскладывается на всю секцию, остальные поднимаются над ним. */
.av-decor-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.e-con:has(> .e-con-inner > .av-decor-layer) { position: relative; }
.e-con:has(> .e-con-inner > .av-decor-layer) > .e-con-inner > *:not(.av-decor-layer) { position: relative; z-index: 1; }

.av-decor__cross { position: absolute; color: var(--av-lime); }
.av-decor__cross.is-lg { width: 96px; height: 96px; }
.av-decor__cross.is-md { width: 62px; height: 62px; }
.av-decor__cross.is-sm { width: 34px; height: 34px; opacity: .75; }

.av-decor__mol { position: absolute; color: var(--av-green-100); }
.av-decor__feather { position: absolute; color: var(--av-green-200); }
.av-decor__dot { position: absolute; border-radius: 50%; background: var(--av-green-500); }

/* --- Герой главной --- */
.av-decor--hero .av-decor__mol.is-left  { left: -40px; bottom: 20px; width: 260px; }
.av-decor--hero .av-decor__mol.is-right { right: 40px; top: 40px; width: 200px; transform: scaleX(-1); }
.av-decor--hero .av-decor__cross.is-lg  { right: 6%; bottom: 16%; }
.av-decor--hero .av-decor__cross.is-md  { left: 30%; bottom: 12%; }
.av-decor--hero .av-decor__cross.is-sm  { left: 46%; top: 22%; }
.av-decor--hero .av-decor__dot.is-a     { left: 24%; top: 30%; width: 26px; height: 26px; }

/* --- Внутренние страницы --- */
.av-decor--page .av-decor__cross.is-lg { left: 42%; top: 12%; }
.av-decor--page .av-decor__cross.is-sm { left: 34%; bottom: 24%; }
.av-decor--page .av-decor__dot.is-a    { left: 12%; bottom: 22%; width: 22px; height: 22px; }
.av-decor--page .av-decor__mol.is-left { left: -30px; bottom: -10px; width: 220px; }

/* --- Каталог --- */
.av-decor--catalog .av-decor__feather.is-left  { left: 2%; bottom: 18%; width: 130px; transform: rotate(-8deg); }
.av-decor--catalog .av-decor__feather.is-right { right: 34%; top: 12%; width: 96px; transform: rotate(160deg); }
.av-decor--catalog .av-decor__cross.is-md      { left: 44%; top: 34%; }
.av-decor--catalog .av-decor__dot.is-a         { left: 30%; bottom: 26%; width: 22px; height: 22px; }

/* --- Мягкий набор внутри страницы --- */
.av-decor--soft .av-decor__mol.is-right { right: -30px; top: 10%; width: 200px; }
.av-decor--soft .av-decor__cross.is-sm  { left: 4%; bottom: 18%; }

/* На узких экранах декор только мешает. */
@media (max-width: 900px) { .av-decor { display: none; } }

/* ==================================================== Карточка новости */
/* Сетка новостей из макета (1454:5639): три карточки 416×428, промежуток 24,
   обложка 416×204, содержимое с полем 24 и промежутком 16. */
.av-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.av-news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--av-green-100);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.av-news-card:hover { border-color: var(--av-green-200); box-shadow: 0 10px 30px rgba(46,61,20,.08); }
.av-news-card__media { display: block; background: var(--av-green-50); }
.av-news-card__media img { display: block; width: 100%; height: 204px; object-fit: cover; }
.av-news-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }

.av-news-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.av-news-card__date {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 12px/1 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
}
.av-news-card__cal { width: 14px; height: 14px; color: var(--av-green-700); }
.av-news-card__cat {
  padding: 5px 12px;
  border-radius: var(--av-radius-pill);
  background: var(--av-green-100);
  font: 600 11px/1 Rubik, Inter, sans-serif;
  /* Фирменный --av-green-700 на этой подложке даёт 3,6:1 — для 11 px мало.
     Тот же зелёный темнее, как у .av-eyebrow. */
  color: #4E6F22;
  text-decoration: none;
  white-space: nowrap;
}
.av-news-card__title { margin: 0; font: 700 16px/1.35 Rubik, Inter, sans-serif; }
.av-news-card__title a { color: var(--av-green-900); text-decoration: none; }
.av-news-card__text { margin: 0; font-size: 12px; line-height: 1.65; color: var(--av-text); flex: 1; }
.av-news-card__more {
  font: 600 12px/1 Rubik, Inter, sans-serif;
  /* 12 px на белом: --av-green-700 даёт 3,99:1 при норме 4,5. */
  color: #4E6F22;
  text-decoration: none;
  align-self: flex-start;
}
.av-news-card__more:hover { color: var(--av-lime); }

/* Пустое состояние ленты — отдельный вариант компонента в макете. */
.av-news-empty { display: grid; justify-items: center; gap: 10px; padding: 64px 24px; text-align: center; }
.av-news-empty__icon {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--av-green-50);
  color: var(--av-green-500);
}
.av-news-empty__icon svg { width: 38px; height: 38px; }
.av-news-empty__title { margin: 0; font: 700 24px/1.3 Rubik, Inter, sans-serif; color: var(--av-green-900); }
.av-news-empty__text { margin: 0; max-width: 420px; font-size: 13px; line-height: 1.7; color: var(--av-text); }

/* Карта контактов описана ниже, в блоке по кадру 303:678. Прежние правила
   отсюда убраны: они ставили карточку по центру высоты через
   transform: translateY(-50%), и она уезжала выше карты. */

@media (max-width: 1024px) { .av-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .av-news-grid { grid-template-columns: 1fr; }
}

/* Связанные новости под статьёй (блок сверх макета). */
#av-related-news .elementor-post__card { border-radius: 16px; border: 1px solid var(--av-green-100); box-shadow: none; }
#av-related-news .elementor-post__title,
#av-related-news .elementor-post__title a { font: 700 16px/1.35 Rubik, Inter, sans-serif; color: var(--av-green-900); }
#av-related-news .elementor-post__avatar { display: none; }
#av-related-news .elementor-post__badge { background: var(--av-lime); color: #fff; border-radius: var(--av-radius-pill); font: 600 11px/1 Rubik, Inter, sans-serif; padding: 7px 14px; }

/* ------------------------------------------------- Композиция героя главной
   В макете зелёный круг и фото петуха соприкасаются и образуют один блок
   в правой половине. Круг держит форму через aspect-ratio, фото заходит
   на него отрицательным отступом. */
#av-hero-visual { position: relative; }
#av-hero-circle { aspect-ratio: 1 / 1; flex: 0 0 auto; }
#av-hero-bird   { aspect-ratio: 1 / 1; flex: 0 0 auto; margin-left: -8%; z-index: 2; }
#av-hero-bird img { width: 100%; height: 100%; object-fit: cover; }

/* На планшете композиция складывается в столбец. */
@media (max-width: 1024px) {
  #av-hero-visual { flex-direction: column; }
  #av-hero-bird { margin-left: 0; margin-top: -6%; }
}

/* ==========================================================================
   МОБИЛЬНОЕ МЕНЮ
   Бургер и выезжающая панель. На десктопе скрыты полностью — там работает
   виджет nav-menu Elementor.
   ========================================================================== */

.av-mnav { display: none; }

.av-burger {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--av-green-50);
  cursor: pointer;
  transition: background-color .2s ease;
}
.av-burger:hover { background: var(--av-green-100); }
.av-burger__box { position: relative; width: 20px; height: 14px; }
.av-burger__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--av-green-900);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, width .32s ease;
}
.av-burger__line:nth-child(1) { top: 0; }
.av-burger__line:nth-child(2) { top: 6px; width: 70%; }
.av-burger__line:nth-child(3) { top: 12px; }

/* Три линии складываются в крест. */
.av-burger.is-active .av-burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.av-burger.is-active .av-burger__line:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.av-burger.is-active .av-burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.av-drawer { position: fixed; inset: 0; z-index: 9999; }
.av-drawer[hidden] { display: none; }

.av-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(30, 41, 20, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.av-drawer.is-open .av-drawer__scrim { opacity: 1; }

.av-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(380px, 88vw);
  height: 100%;
  padding: 22px 24px 28px;
  background: #fff;
  border-radius: 26px 0 0 26px;
  box-shadow: -18px 0 50px rgba(46, 61, 20, .18);
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
}
.av-drawer.is-open .av-drawer__panel { transform: translateX(0); }

.av-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--av-green-100);
}
.av-drawer__logo { font: 700 21px/1 Rubik, Inter, sans-serif; }
.av-drawer__close {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--av-green-50);
  color: var(--av-green-900);
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.av-drawer__close:hover { background: var(--av-green-100); transform: rotate(90deg); }
.av-drawer__close svg { width: 18px; height: 18px; }

.av-drawer__list { list-style: none; margin: 18px 0 0; padding: 0; }

/* Пункты появляются по очереди — порядковый номер приходит из разметки. */
.av-drawer__item {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 45ms + 120ms);
}
.av-drawer.is-open .av-drawer__item { opacity: 1; transform: none; }

.av-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-radius: 14px;
  font: 600 17px/1.2 Rubik, Inter, sans-serif;
  color: var(--av-green-900);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.av-drawer__link:hover { background: var(--av-green-50); }
.av-drawer__link.is-active { background: var(--av-lime); color: #fff; }
.av-drawer__chev { opacity: .45; transition: transform .2s ease; }
.av-drawer__link:hover .av-drawer__chev { transform: translateX(4px); opacity: .9; }

.av-drawer__foot {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  gap: 14px;
  justify-items: start;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease, transform .32s ease;
  transition-delay: calc(var(--i) * 45ms + 160ms);
}
.av-drawer.is-open .av-drawer__foot { opacity: 1; transform: none; }
.av-drawer__cta { width: 100%; text-align: center; padding: 14px 22px; }
.av-drawer__contact { margin: 0; font-size: 13px; line-height: 1.8; }
.av-drawer__contact a { color: var(--av-green-700); text-decoration: none; }

/* Пока панель открыта, страница под ней не прокручивается.
   position:fixed вместо overflow:hidden — в мобильных браузерах только он
   действительно останавливает прокрутку фона; смещение top задаёт скрипт. */
body.av-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Уважаем системную настройку «меньше движения». */
@media (prefers-reduced-motion: reduce) {
  .av-drawer__panel,
  .av-drawer__scrim,
  .av-drawer__item,
  .av-drawer__foot,
  .av-burger__line { transition-duration: .01ms; transition-delay: 0ms; }
}

/* ==========================================================================
   АДАПТИВ
   Порядок порогов: 1200 — сужение полей, 1024 — планшет и бургер,
   768 — узкий планшет, 560 — телефон.
   ========================================================================== */

/* ------------------------------------------------------------ ≤ 1200 px */
@media (max-width: 1200px) {
  .av-hero__title span { font-size: 34px; }
  .av-page-title span  { font-size: 36px; }
}

/* ------------------------------------------------------------ ≤ 1024 px */
@media (max-width: 1024px) {

  /* --- Шапка: горизонтальное меню уступает бургеру --- */
  /* Прячем только десктопные элементы шапки. Переключатель языка на телефоне
     живёт в выехавшей панели, в шапке остаются логотип и бургер: прячем весь
     виджет, а не сам переключатель, иначе от пустого виджета остаётся
     промежуток. Панель лежит внутри своего виджета (.av-mnav-widget) —
     он из-под правила исключён, и переключатель в панели остаётся. */
  #av-main-nav,
  #av-header-actions > .elementor-widget-shortcode:not(.av-mnav-widget),
  #av-header-actions .elementor-widget-button { display: none; }
  .av-mnav-widget { display: block; }
  .av-mnav { display: block; }
  #av-header { padding-left: 12px; padding-right: 12px; }
  #av-header .e-con-inner > .e-con { padding: 10px 14px 10px 18px; }

  /*
   * Общее правило: строки контента становятся столбцами.
   * Flex-строкой у Elementor выступает .e-con-inner (для boxed-контейнеров)
   * либо сам .e-con-full — поэтому правил два. Исключения идут следом.
   */
  .e-con > .e-con-inner { flex-direction: column; align-items: stretch; }
  .e-con-full.e-flex     { flex-direction: column; align-items: stretch; }
  .e-con > .e-con-inner > .e-con,
  .e-con-full.e-flex > .e-con { width: 100% !important; }

  /* Шапка обязана остаться строкой — и сама полоса, и блок действий в ней. */
  #av-header > .e-con-inner { flex-direction: row; align-items: center; }
  #av-header > .e-con-inner > .e-con { width: 100% !important; }
  #av-header .e-con-full.e-flex { flex-direction: row; align-items: center; }
  #av-header .e-con-full.e-flex > .e-con { width: auto !important; }
  #av-header-actions { flex-direction: row !important; width: auto !important; justify-content: flex-end; }

  /* --- Герой главной: заголовок сверху, круг и фото рядом под ним --- */
  #av-hero > .e-con-inner { align-items: center; text-align: center; }
  #av-hero { min-height: 0; }
  .av-hero__title { align-items: center; }
  .av-hero__title span { font-size: 38px; }
  #av-hero-visual {
    flex-direction: row !important;
    justify-content: center;
    width: 100% !important;
    max-width: 560px;
    margin-inline: auto;
  }
  #av-hero-visual > .e-con { width: 52% !important; }
  #av-hero-circle { padding: 18px 14px !important; }
  #av-hero-circle .elementor-heading-title { font-size: 16px !important; }

  /* --- «Как мы работаем»: четыре шага в две пары --- */
  #av-how .e-con-full.e-flex { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  #av-how .e-con-full.e-flex > .e-con { width: 48% !important; }

  /* --- Контакты: реквизиты остаются в два столбца --- */
  #av-contacts .e-con-full.e-flex { flex-direction: row; flex-wrap: wrap; }
  #av-contacts .e-con-full.e-flex > .e-con { width: 48% !important; }

  /* --- Сетки --- */
  .av-news-grid { grid-template-columns: repeat(2, 1fr); }
  .av-partners { --av-plogo-d: 140px; gap: 24px; }

  /* --- Каталог: категории над сеткой, строкой пилюль --- */
  .av-cats__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .av-cats__item { margin-bottom: 0; }
  .av-cats__sub { width: 100%; margin-left: 0; }

  /* --- Подвал --- */
  #av-footer .elementor-widget-text-editor,
  #av-footer .elementor-widget-social-icons .elementor-widget-container { text-align: center; }
  #av-footer-nav .elementor-nav-menu { justify-content: center; }
}


/* ------------------------------------------------------------- ≤ 768 px */
@media (max-width: 768px) {

  .av-hero__title span { font-size: 32px; }
  .av-page-title span  { font-size: 30px; }

  /* Заголовки секций: уменьшаем, иначе переносятся по одному слову. */
  .elementor-widget-heading .elementor-heading-title { font-size: 26px !important; }
  #av-hero-circle .elementor-heading-title { font-size: 17px !important; }
  #av-news-banner .elementor-heading-title { font-size: 32px !important; }

  /* Любая строка из вложенных контейнеров становится столбцом. */
  .e-con.e-flex > .e-con-inner > .e-con { width: 100% !important; }
  .e-con[class*="elementor-element"] > .e-con-inner { flex-direction: column; }

  .av-news-grid { grid-template-columns: 1fr; }
  .av-partners { --av-plogo-d: 124px; gap: 16px; }

  /* Плитка каталога и карточки — в одну колонку. */
  #av-catalog-grid .elementor-grid { grid-template-columns: 1fr !important; }

  /* Секции с внутренними отступами ужимаются. */
  #av-how, #av-hero, #av-page-hero { padding-left: 16px; padding-right: 16px; }

  .av-map__canvas img { height: 320px; }
}

/* ------------------------------------------------------------- ≤ 560 px */
@media (max-width: 560px) {

  .av-hero__title span { font-size: 27px; }
  .av-page-title span  { font-size: 25px; }
  .elementor-widget-heading .elementor-heading-title { font-size: 22px !important; }

  /* Круг героя не должен занимать весь экран. */
  #av-hero-visual { max-width: 340px; }
  #av-hero-circle { padding: 22px 18px; }
  #av-hero-circle .elementor-heading-title { font-size: 14px !important; }

  .av-drawer__panel { width: 100%; border-radius: 0; }
  .av-drawer__link { font-size: 16px; padding: 13px 14px; }

  .av-partners { --av-plogo-d: 104px; }
  .av-vacancy { padding: 16px 18px; }

  /* Пилюли категорий каталога в две колонки — иначе слишком дробно. */
  .av-cats__list { display: grid; grid-template-columns: 1fr 1fr; }
  .av-cats__item { font-size: 12px; padding: 10px 12px; }

  .av-news-empty { padding: 40px 16px; }
  .av-news-empty__title { font-size: 20px; }

  .av-map__canvas img { height: 260px; }
  .av-map__card { padding: 18px; }

  /* Формы на телефоне — в одну колонку на всю ширину. */
  #av-contact-form .elementor-field-group { width: 100% !important; }
}

/* Горизонтальной прокрутки быть не должно ни на одной ширине. */
body { overflow-x: hidden; }

/* Кнопка закрытия перебивалась базовыми стилями кнопок Elementor. */
.av-drawer .av-drawer__close,
.av-drawer .av-drawer__close:hover,
.av-drawer .av-drawer__close:focus {
  background-color: var(--av-green-50);
  color: var(--av-green-900);
  border: 0;
  box-shadow: none;
}
.av-drawer .av-drawer__close:hover { background-color: var(--av-green-100); }

/* Бургер — та же история. */
.av-mnav .av-burger,
.av-mnav .av-burger:hover,
.av-mnav .av-burger:focus { background-color: var(--av-green-50); border: 0; box-shadow: none; }
.av-mnav .av-burger:hover { background-color: var(--av-green-100); }

/* Переключатель языка в панели виден всегда. */
.av-drawer .av-lang--drawer { display: inline-flex !important; }

/* Полоса шапки не должна переноситься на вторую строку. */
@media (max-width: 1024px) {
  #av-header .e-con-full.e-flex { flex-wrap: nowrap; justify-content: space-between; }
  #av-header .elementor-widget-html:first-child { flex: 0 1 auto; min-width: 0; }
}

/* На телефоне круг и фото складываются вертикально и слегка находят друг на друга —
   так композиция читается лучше, чем два крошечных круга в ряд. */
@media (max-width: 560px) {
  #av-hero-visual { flex-direction: column !important; max-width: 300px; }
  #av-hero-visual > .e-con { width: 100% !important; }
  #av-hero-bird { margin-left: 0; margin-top: -14%; }
}

/* ==========================================================================
   АДАПТИВ ПОД ВЁРСТКУ ГЛАВНОЙ ИЗ КОНСТРУКТОРА
   Главная правится в Elementor, поэтому здесь ничего не завязано на
   конкретные ID её колонок: блоки различаются по содержимому (:has).
   ========================================================================== */

@media (max-width: 1024px) {
  /* Заголовок занимает всю ширину, круг и фото встают парой под ним. */
  #av-hero {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    row-gap: 8px;
  }
  #av-hero > .e-con:has(.av-hero__title) {
    width: 100% !important;
    align-items: center;
  }
  #av-hero > .e-con:has(.av-hero__title) .av-hero__title { align-items: center; }
  #av-hero > #av-hero-circle,
  #av-hero > .e-con:has(img) {
    width: 46% !important;
    max-width: 320px;
  }
  #av-hero > #av-hero-circle { aspect-ratio: 1 / 1; }

  /* --- Подвал: меню переносится строками, без бургера --- */
  #av-footer-nav .elementor-nav-menu {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
  }
  #av-footer-nav .elementor-nav-menu--dropdown,
  #av-main-nav .elementor-nav-menu--dropdown { display: none !important; }
}

@media (max-width: 560px) {
  /* На телефоне круг и фото идут друг под другом и крупнее. */
  #av-hero > #av-hero-circle,
  #av-hero > .e-con:has(img) { width: 80% !important; max-width: 290px; }
  #av-hero > #av-hero-circle .elementor-heading-title { font-size: 15px !important; }

  /* Пункты подвала компактнее, чтобы влезали по три в строку. */
  #av-footer-nav .elementor-item { padding: 8px 10px !important; font-size: 13px; }
  #av-footer .av-logo__text { font-size: 19px; }
}

/* Скрытая копия меню для выпадашки Elementor больше не нужна нигде. */
.elementor-nav-menu--dropdown { display: none !important; }

/* ==========================================================================
   СЦЕНА — композиция героя слоями
   Координаты слоёв берутся из макета и задаются в процентах от кадра,
   поэтому на ширине 1440 совпадение точное, а ниже композиция масштабируется
   целиком, а не разъезжается.
   ========================================================================== */
.av-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.av-stage__layer { position: absolute; display: block; }
/* В макете у этих заливок scaleMode=STRETCH: картинка растянута точно по
   рамке слоя, а не вписана. object-fit:fill повторяет это поведение. */
.av-stage__img { object-fit: fill; z-index: 2; }
.av-stage__circle { z-index: 1; }
.av-stage__cross-wrap, .av-stage__cross { z-index: 1; }

/* Крест-плюс: та же форма, что и в декоре, но заливка градиентом. */
.av-stage__cross {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%,
    64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%
  );
  border-radius: 8%;
}

/* Секция со сценой держит пропорции кадра.
   Класс на контейнер Elementor не вешает, поэтому цель — ID секции. */
.av-stage-host { position: relative; }
.av-stage-host::before {
  content: "";
  display: block;
  width: 0;
  padding-top: var(--av-stage-ratio, 0);
}

@media (max-width: 1024px) {
  /* На планшете и телефоне сцена не должна задавать высоту секции. */
  .av-stage { position: relative; height: auto; aspect-ratio: 1440 / 842; }
}

/* ------------------------------------------- Герой «О нас»: точные координаты
   Кадр макета 1440×842. Текстовая колонка — 580×324 при отступе 120/259,
   поэтому позиционируется процентами от кадра, а не потоком. */
/* Высоту секции задаёт пропорция кадра 1440×842: псевдоэлемент во flex-контейнере
   Elementor высоты не даёт, а aspect-ratio работает. */
#av-page-hero { position: relative; aspect-ratio: 1440 / 842; }

#av-about-text {
  position: absolute;
  left: 8.3333%;   /* 120 / 1440 */
  top: 30.7601%;   /* 259 / 842  */
  width: 40.2778%; /* 580 / 1440 */
  z-index: 3;
}

.av-hero-title { margin: 0; display: flex; flex-direction: column; }
.av-hero-title span {
  font: 700 72px/85px Rubik, Inter, sans-serif;
  color: var(--av-ink);
}
.av-hero-title .is-accent { color: var(--av-green); }

#av-about-cta .elementor-button { min-width: 204px; justify-content: center; }

@media (max-width: 1024px) {
  /* Ниже планшета абсолютная раскладка мешает: возвращаем поток. */
  #av-page-hero { aspect-ratio: auto; padding: 40px 0 48px; }
  #av-about-text { position: static; width: 100%; padding: 0 20px; }
  .av-hero-title span { font-size: 46px; line-height: 1.15; }
}
@media (max-width: 560px) {
  .av-hero-title span { font-size: 34px; }
}

/* Обёртка виджета Elementor позиционирована и имеет нулевую высоту,
   поэтому сцена считала бы проценты от неё. Растягиваем обёртку на секцию. */
.av-stage-widget { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.av-stage-widget > .elementor-widget-container,
.av-stage-widget .elementor-shortcode { height: 100%; }

/* ------------------------------------- Герой «Партнёры»: координаты из макета
   Кадр 1440×842, текстовая колонка 580 при отступе 119/250. */
#av-partners-hero { position: relative; aspect-ratio: 1440 / 842; }
#av-partners-text {
  position: absolute;
  left: 8.2639%;   /* 119 / 1440 */
  top: 29.6912%;   /* 250 / 842  */
  width: 40.2778%; /* 580 / 1440 */
  z-index: 3;
}
.av-hero-title--single span { font: 800 64px/70px Rubik, Inter, sans-serif; }

/* Бейдж над заголовком: Rubik 700 12/14, прописные. */
.av-badge {
  display: inline-block;
  font: 700 12px/14px Rubik, Inter, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--av-green);
}

@media (max-width: 1024px) {
  #av-partners-hero { aspect-ratio: auto; padding: 40px 0 48px; }
  #av-partners-text { position: static; width: 100%; padding: 0 20px; }
  .av-hero-title--single span { font-size: 44px; line-height: 1.15; }
}
@media (max-width: 560px) {
  .av-hero-title--single span { font-size: 32px; }
}

/* Фото команды на «Карьере» — 1200×600 из макета. */
#av-career-photo img { width: 100%; max-width: 1200px; aspect-ratio: 1200 / 600; object-fit: cover; }
#av-career-banner { text-align: center; }

/* ==========================================================================
   КАРТОЧКА ТОВАРА — размеры из макета (product-detail-apafeed-mcp, 1440×3325)
   Кадр 1440, контент 1200 при полях 120. Все числа ниже — из документа Figma.
   ========================================================================== */

.av-sec { padding: 0 0 0; }
.av-sec > * { max-width: 1200px; margin-inline: auto; }

/* --- Крошки: Rubik 500 15, разделитель #BFBFBF, текущая страница #70747A --- */
.av-crumbs { font: 500 15px/18px Rubik, Inter, sans-serif; }
.av-crumbs a { color: var(--av-green); }
.av-crumbs__sep { color: #BFBFBF; margin: 0 8px; }
.av-crumbs [aria-current] { color: #70747A; font-weight: 400; }

/* --- Шапка товара: фото 348×380, блок сведений 788, зазор 64 --- */
.av-product-head {
  display: grid;
  grid-template-columns: 348px 788px;
  gap: 64px;
  align-items: start;
  max-width: 1200px;
  margin-inline: auto;
}
.av-product-head img { width: 348px; height: 380px; object-fit: contain; }

.av-tag {
  display: inline-flex;
  align-items: center;
  height: 27px;
  padding: 0 14px;
  border-radius: 100px;
  background: #F0F4EA;
  color: var(--av-green);
  font: 600 12px/1 Rubik, Inter, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.av-product-title {
  margin: 24px 0 0;
  font: 700 44px/52px Rubik, Inter, sans-serif;
  color: #111827;
}

/* Характеристики: строки 788×31 с шагом 12. */
.av-specs { display: grid; gap: 12px; margin-top: 32px; }
.av-specs__row { display: flex; align-items: center; gap: 12px; min-height: 31px; font: 400 16px/24px Rubik, Inter, sans-serif; }
.av-specs__key { color: #70747A; min-width: 190px; }
.av-specs__val { color: #111827; font-weight: 500; }

/* Кнопка «Запросить цену» — 193×51, r100. */
.av-product-head .av-btn--primary {
  margin-top: 28px;
  min-width: 193px;
  height: 51px;
  border-radius: 100px;
  background: var(--av-green);
  font: 600 16px/1 Rubik, Inter, sans-serif;
}

/* --- Заголовки разделов: Rubik 700 32, зелёные --- */
.av-h2 { font: 700 32px/38px Rubik, Inter, sans-serif; color: var(--av-green); margin: 0 0 24px; }
.av-prose, .av-list { font: 400 16px/26px Rubik, Inter, sans-serif; color: #4D4D4D; }

/* --- Описание 672 + Состав 480, зазор 48 --- */
.av-sec--split > .av-cols,
.av-sec--split .av-cols { display: grid; grid-template-columns: 672px 480px; gap: 48px; }

/* Таблица состава: шапка зелёная, строки в зебру, скругление 16. */
.av-table { width: 480px; border-radius: 16px; overflow: hidden; border-collapse: collapse; }
.av-table thead th { background: var(--av-green); color: #fff; height: 49px; font: 600 15px/1 Rubik, Inter, sans-serif; }
.av-table td { height: 50px; padding: 0 20px; font: 400 15px/1.4 Rubik, Inter, sans-serif; color: #4D4D4D; }
.av-table tbody tr:nth-child(odd) { background: #FFFFFF; }
.av-table tbody tr:nth-child(even) { background: #F0F4EA; }

/* --- Преимущества: 8 карточек 280×148, сетка 4×2 с шагом 20 --- */
.av-benefits { display: grid; grid-template-columns: repeat(4, 280px); gap: 20px; justify-content: center; }
.av-benefit {
  width: 280px;
  min-height: 148px;
  padding: 24px;
  border-radius: 20px;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.av-benefit__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: #F0F4EA;
  color: var(--av-green);
  flex: none;
}
.av-benefit__icon .av-ico { width: 20px; height: 20px; }
.av-benefit__title { font: 600 16px/22px Rubik, Inter, sans-serif; color: #111827; }

/* --- Для каких животных: 3 карточки 384×296, шаг 24 --- */
/* Колонок бывает две или три — у жидких добавок «Птица» и «Другие животные»
   занимают по 588 (кадр Desktop - 37), у аминокислот три по 384. */
.av-animals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.av-animals__card { width: auto; min-height: 296px; padding: 28px; border-radius: 24px; background: #F0F4EA; }
.av-animals__title { margin: 0 0 14px; font: 600 20px/24px Rubik, Inter, sans-serif; color: var(--av-ink); }

.av-animals__other {
  max-width: 1200px;
  margin: 32px auto 0;
  min-height: 67px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-radius: 16px;
  background: #F4F6F0;
  font: 400 16px/1.4 Rubik, Inter, sans-serif;
  color: #4D4D4D;
}
.av-animals__other b, .av-animals__other strong { color: #3B531A; font-weight: 600; }

/* --- Показания 576 + Действие 576, зазор 48 --- */
.av-sec--tint .av-cols { grid-template-columns: 576px 576px; gap: 48px; }

/* --- Способ применения 672 + Хранение 480 --- */
.av-storage { display: grid; gap: 16px; width: 480px; }

@media (max-width: 1280px) {
  /* Ниже ширины макета жёсткие размеры мешают — переходим на резину. */
  .av-product-head,
  .av-sec--split > .av-cols,
  .av-sec--split .av-cols,
  .av-sec--tint .av-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .av-product-head { grid-template-columns: 300px 1fr; }
  .av-benefits { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .av-benefit { width: auto; }
  .av-animals { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .av-animals__card { width: auto; }
  .av-table, .av-storage { width: 100%; }
}
@media (max-width: 860px) {
  .av-product-head,
  .av-sec--split > .av-cols,
  .av-sec--split .av-cols,
  .av-sec--tint .av-cols { grid-template-columns: 1fr; }
  .av-product-head img { width: 100%; max-width: 348px; height: auto; }
  .av-product-title { font-size: 30px; line-height: 1.2; }
  .av-h2 { font-size: 24px; line-height: 1.25; }
}

/* Шапка товара собирается шорткодом целиком, поэтому фото и сведения —
   её собственные ячейки, а не колонки Elementor. */
.av-product-head__media img { width: 348px; height: 380px; object-fit: contain; display: block; }
.av-product-head__info { display: flex; flex-direction: column; align-items: flex-start; }
#av-product-hero > .e-con-inner { max-width: 1200px; }
@media (max-width: 1280px) {
  .av-product-head__media img { width: 100%; height: auto; max-width: 348px; }
}

/* ==========================================================================
   ГЛАВНАЯ СТРАНИЦА — размеры из кадра «Главная» (909:5935)
   Все числа взяты из документа Figma через REST API: ширины, высоты,
   отступы, кегли и межстрочные интервалы. Ничего не подобрано на глаз.
   ========================================================================== */

/* --------------------------------------------- Слои сцены: кольцо и линия */
.av-stage__ring  { z-index: 1; box-sizing: border-box; }
.av-stage__line  { z-index: 0; }
.av-stage__dot   { z-index: 1; }
.av-stage__text  { z-index: 4; pointer-events: auto; }

/* Кегли внутри сцены — в долях её ширины: текст масштабируется вместе
   с рисунком, иначе на промежуточных ширинах надпись вылезала из круга. */
.av-stage { container-type: inline-size; }

.av-stage__h1 { margin: 0; display: flex; flex-direction: column; }
.av-stage__h1 span { display: block; font-family: Rubik, Inter, sans-serif; }
.av-stage__h1a { font-size: 2.5cqw;    line-height: 3.4722cqw; font-weight: 700; color: #638B2C; }
.av-stage__h1b { font-size: 2.2222cqw; line-height: 2.6389cqw; font-weight: 400; color: rgba(99, 139, 44, .6); }
.av-stage__h1c { font-size: 2.3611cqw; line-height: 3.3333cqw; font-weight: 700; color: #40611A; }

.av-stage__promise {
  margin: 0;
  font: 500 3.0556cqw/3.6111cqw Rubik, Inter, sans-serif;
  color: #FFFFFF;
}

/* Герой главной: высоту секции задаёт пропорция кадра 1440×842. */
#av-home-hero { position: relative; aspect-ratio: 1440 / 842; overflow: hidden; }
#av-home-hero > .e-con-inner { height: 100%; }

/* Холст секции «Сбалансированное кормление»: кадр 1393×604. */
#av-home-feed-canvas,
#av-about-team-canvas { position: relative; aspect-ratio: 1393 / 604; }

/* ----------------------------------- Преимущества продуктов (909:6157)
   Плашка 1361×393, r32, поля 48/40, промежуток 32.
   Карточка 411×219, r32, поле 28. Иконка в макете крупнее карточки и
   обрезается её краем — поэтому абсолютная, с координатами из макета. */
.av-adv {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 40px;
  border-radius: 32px;
  background: linear-gradient(90deg, #6B8F3C 0%, #94C130 100%);
}
.av-adv__paw {
  position: absolute;
  left: 839px;
  top: -180px;
  width: 432px;
  height: 423px;
  opacity: .16;
  pointer-events: none;
}
.av-adv__title {
  margin: 0;
  position: relative;
  font: 800 44px/46px Inter, Rubik, sans-serif;
  color: #FFFFFF;
}
.av-adv__track { position: relative; display: flex; gap: 24px; }
.av-adv__card {
  position: relative;
  /*
   * Карточка не обрезает иконку: в кадре 909:6332 лист, график и медаль
   * заметно свешиваются за её нижний край на зелёную плашку. Координаты
   * иконок макетные, поэтому достаточно не мешать им выходить наружу.
   */
  overflow: visible;
  flex: 0 0 411px;
  width: 411px;
  height: 219px;
  padding: 28px;
  border-radius: 32px;
  background: #FFFFFF;
}
.av-adv__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; width: 355px; }
.av-adv__name { margin: 0; font: 700 22px/26px Inter, Rubik, sans-serif; color: #1A1D24; }
.av-adv__text { margin: 0; font: 400 14px/20px Inter, Rubik, sans-serif; color: #1A1D24; }
/* Картинка уходит под текст: в макете она перекрывает его нижний угол,
   но там это фотография на прозрачном фоне, а здесь текст должен читаться. */
.av-adv__icon { position: absolute; z-index: 0; object-fit: cover; pointer-events: none; }

/* ------------------------------------------ Бенто каталога (969:4190)
   Плитка 1344×621, белая, r28, поле 24, промежуток 24.
   Ряд 1296×275: 730 + 542 и 425 + 847. */
.av-bento {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 28px;
  background: #FFFFFF;
}
.av-bento__row { display: flex; gap: 24px; height: 275px; }
.av-bento__cell {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  text-decoration: none;
}
.av-bento__cell--brand        { flex: 0 0 730px; }
.av-bento__cell--photo-wide   { flex: 0 0 542px; }
.av-bento__cell--photo-narrow { flex: 0 0 425px; }
.av-bento__cell--quality      { flex: 0 0 847px; }
/* Заливка градиентом, но с явным цветом под ним.
   Проверки доступности не умеют читать градиент и берут цвет ближайшего
   родителя с непрозрачным фоном — то есть белый фон страницы. Светлый текст
   на белом они честно считают нечитаемым, хотя на плитке он лежит на зелёном.
   Цвет указан первым в той же записи: он и служит тем, что читает проверка,
   и остаётся запасным на случай, если градиент не отрисуется. */
.av-bento__cell--brand,
.av-bento__cell--quality { background: #577A25 linear-gradient(135deg, #638B2C 0%, #94C130 100%); }
.av-bento__cell img { display: block; width: 100%; height: 100%; object-fit: cover; }

.av-bento__deco { position: absolute; border-radius: 50%; background: #FFFFFF; pointer-events: none; }
.av-bento__deco--a { width: 300px; height: 300px; left: -80px;  top: -80px; opacity: .15; }
.av-bento__deco--b { width: 260px; height: 260px; left: 530px;  top:  75px; opacity: .12; }
.av-bento__deco--c { width: 280px; height: 280px; left: 637px;  top: -70px; opacity: .15; }
.av-bento__deco--d { width: 220px; height: 220px; left: -50px;  top: 105px; opacity: .12; }

.av-bento__badge,
.av-bento__head,
.av-bento__foot,
.av-bento__big,
.av-bento__sub,
.av-bento__go { position: absolute; display: block; }

.av-bento__badge {
  left: 40px; top: 40px;
  padding: 7px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .10);
  font: 700 11px/15px Manrope, Inter, sans-serif;
  color: #FFFFFF;
}
.av-bento__head {
  left: 40px; top: 85px; width: 650px;
  font: 800 44px/46px "Bricolage Grotesque", Rubik, sans-serif;
  color: #FFFFFF;
}
.av-bento__big {
  left: 40px; top: 40px; width: 235px;
  font: 800 96px/96px "Bricolage Grotesque", Rubik, sans-serif;
  color: #FFFFFF;
}
.av-bento__sub {
  left: 40px; top: 140px; width: 300px;
  font: 800 28px/38px Manrope, Inter, sans-serif;
  /* Было #F7F3E9 — кремовый оттенок на зелёном неотличим от белого, а контраст
     терял почти половину пункта. Белый, как у соседних надписей в плитке. */
  color: #FFFFFF;
}
.av-bento__foot {
  left: 40px; top: 211px;
  font: 400 15px/24px Manrope, Inter, sans-serif;
  color: #FFFFFF;
}
.av-bento__cell--brand   .av-bento__foot { width: 650px; }
.av-bento__cell--quality .av-bento__foot { width: 767px; color: #F7F3E9; }

.av-bento__go {
  top: 211px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #638B2C;
  display: grid;
  place-items: center;
  transition: transform .2s ease;
}
.av-bento__go svg { width: 24px; height: 24px; }
.av-bento__cell--brand   .av-bento__go { left: 666px; }
.av-bento__cell--quality .av-bento__go { left: 783px; }
.av-bento__cell:hover .av-bento__go { transform: translateX(4px); }

/* ------------------------------------- Как мы работаем (1279:4462)
   Карточка 1280×628 #F0F4EA r32, поля 80/100/90/100.
   Ряд шагов 1080×228: круг 120, промежуток 20, подписи 88. Линия — на
   уровне центра кругов, то есть в 60 px от верха ряда. */
.av-hww {
  padding: 80px 100px 90px;
  border-radius: 32px;
  background: #F0F4EA;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.av-hww__head { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.av-hww__title { margin: 0; font: 700 44px/52px Inter, Rubik, sans-serif; color: #283812; }
.av-hww__desc  { margin: 0; width: 820px; max-width: 100%; font: 400 16px/24px Inter, Rubik, sans-serif; color: #555F4D; }

.av-steps { position: relative; display: flex; justify-content: space-between; }
.av-steps__line {
  position: absolute;
  left: 0; right: 0; top: 60px;
  height: 1px;
  background: rgba(40, 56, 18, .18);
}
.av-step { position: relative; width: 220px; text-align: center; }
.av-step__circle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #638B2C;
}
.av-step__circle svg { width: 48px; height: 48px; stroke-width: 1.6; }
.av-step__text { display: flex; flex-direction: column; gap: 8px; }
.av-step__title { margin: 0; font: 700 16px/22px Inter, Rubik, sans-serif; color: #283812; }
.av-step__desc  { margin: 0; font: 400 13px/18px Inter, Rubik, sans-serif; color: #555F4D; }

/* ------------------------------------------- Отзывы (1304:12338)
   Карточка 376×557: тело 470 с полями 80/32/40 и промежутком 20,
   аватар 130 наполовину выходит за верхний край тела.
   Пять карточек дают 2008 px при видимых 1280 — в макете это лента. */
/*
 * Карусель отзывов (1300:4462). В кадре ряд начинается от текстовой колонки
 * (80 от края) и уходит за правый край кадра — четвёртая карточка видна
 * наполовину. Поэтому лента тянется вправо до края окна: сама секция
 * остаётся в кадре, а правый отрицательный отступ выпускает ленту наружу.
 * Полосы прокрутки в макете нет — листается колесом, свайпом и перетаскиванием.
 */
.av-reviews {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding-bottom: 8px;
  /*
   * Прилипания у ленты нет. Оно считает «начало» ряда по краю самой ленты,
   * а лента выпущена до краёв окна — при загрузке браузер сам подтягивал
   * первую карточку к рамке окна, и ряд начинался не под текстом.
   * scroll-padding не спасает: проценты в нём считаются от самой ленты.
   */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.av-reviews::-webkit-scrollbar { display: none; }

/*
 * Лента шире секции: отрицательные поля с обеих сторон растягивают её
 * на всю ширину окна, а левое внутреннее поле того же размера возвращает
 * первую карточку под текст. До прокрутки ряд начинается там же, где и
 * прежде, а при листании карточки уходят в поле страницы и доходят до
 * самой рамки окна — и слева, и справа. Секция при этом остаётся в кадре,
 * а горизонтальную полосу у страницы не появляется: документ обрезан
 * по ширине (см. overflow-x: clip ниже).
 */
#av-home-reviews .av-reviews {
  --av-bleed: calc(50vw - 50%);
  margin-inline: calc(-1 * var(--av-bleed));
  padding-left: var(--av-bleed);
}
.av-review {
  position: relative;
  flex: 0 0 376px;
  width: 376px;
  padding-top: 75px;
}
.av-review__avatar {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  /* В кадре у аватара тонкое зелёное кольцо и белый зазор до фотографии. */
  border: 2px solid var(--av-green);
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(15, 23, 31, .10);
}
.av-review__avatar img { width: 114px; height: 114px; border-radius: 50%; object-fit: cover; }
.av-review__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 470px;
  padding: 80px 32px 40px;
  border-radius: 24px;
  background: #FFFFFF;
  text-align: center;
}
/* Звёзды в кадре зелёные, фирменные, а не жёлтые. */
.av-review__stars { display: inline-flex; gap: 6px; color: var(--av-green); }
.av-review__stars svg { width: 18px; height: 18px; }
.av-review__who { display: flex; flex-direction: column; gap: 4px; }
.av-review__name { margin: 0; font: 700 24px/30px Inter, Rubik, sans-serif; color: #0F171F; }
/* Было #9CA3AF — 2,5:1 на белом, нижняя граница нормы 4,5:1. Тот же серый,
   на две ступени темнее: 5:1, а в макете разница почти не видна. */
.av-review__role { margin: 0; font: 500 14px/20px Inter, Rubik, sans-serif; color: #667085; }
/* Знак цитаты в кадре — не кавычка, а значок из линий светло-зелёного тона. */
.av-review__quote { display: block; color: #B2C992; }
.av-review__quote svg { display: block; width: 36px; height: 26px; }
.av-review__text { margin: 0; font: 400 15px/26px Inter, Rubik, sans-serif; color: #262E38; }

/* ---------------------------------- Партнёрские программы (1287:4462)
   Ряд 1280: фото 463×440 r24, текст 753, промежуток 64. */
#av-home-partners > .e-con-inner { align-items: center; }
.av-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(99, 139, 44, .10);
  font: 600 12px/15px Inter, Rubik, sans-serif;
  letter-spacing: .04em;
  /* Фирменный #638B2C на этой подложке даёт 3,6:1 — для 12 px мало.
     Тот же зелёный темнее: 5,2:1. Фирменный цвет остаётся у плашек и кнопок,
     где он лежит под белым текстом, а не наоборот. */
  color: #4E6F22;
}

/* ==========================================================================
   АДАПТИВ ГЛАВНОЙ
   Композиции выше свёрстаны в пикселях макета. Ниже 1440 они ужимаются:
   ряды с жёсткой шириной переходят в прокрутку или перенос, плитка бенто
   складывается в столбец.
   ========================================================================== */

@media (max-width: 1439px) {
  /* Лента преимуществ прокручивается, а не рвётся. Прокрутка обрезает всё,
     что выходит за её рамку, поэтому снизу оставлен запас под свисающие
     иконки; отрицательное поле того же размера возвращает высоту секции
     к макетной. */
  .av-adv__track {
    overflow-x: auto;
    padding-bottom: 56px;
    margin-bottom: -50px;
    scroll-snap-type: x proximity;
    /* Полоса прокрутки теперь пришлась бы на свисающие иконки — прячем её,
       как у ленты отзывов; ряд листается колесом, свайпом и стрелками. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .av-adv__track::-webkit-scrollbar { display: none; }
  .av-adv__card { scroll-snap-align: start; }
}

@media (max-width: 1360px) {
  .av-bento__row { height: auto; flex-wrap: wrap; }
  .av-bento__cell { flex: 1 1 320px; min-height: 275px; }
  .av-bento__cell--brand, .av-bento__cell--quality { min-height: 275px; }
}

@media (max-width: 1200px) {
  .av-hww { padding: 56px 40px 64px; gap: 48px; }
  .av-steps { flex-wrap: wrap; justify-content: center; gap: 40px 32px; }
  .av-steps__line { display: none; }
}

@media (max-width: 1024px) {
  /* Сцены на планшете перестают задавать высоту секции. */
  #av-home-hero { aspect-ratio: auto; }
  .av-adv { padding: 32px 20px; gap: 24px; }
  .av-adv__title { font-size: 32px; line-height: 38px; }
  .av-adv__paw { display: none; }

  .av-bento__head { font-size: 34px; line-height: 38px; }
  .av-bento__big { font-size: 72px; line-height: 76px; }
}

@media (max-width: 768px) {
  .av-bento { padding: 16px; gap: 16px; }
  .av-bento__row { flex-direction: column; gap: 16px; }
  .av-bento__cell { flex: 1 1 auto; width: 100%; }
  /* Высота у фото-ячеек задаётся, а не ограничивается снизу: и снимок
     (height: 100%), и рамка кадрирования считают проценты только от
     определённой высоты — при min-height они схлопывались в ноль. */
  .av-bento__cell--photo-wide, .av-bento__cell--photo-narrow { height: 220px; min-height: 0; }
  /* Абсолютные подписи в плитке на узком экране возвращаются в поток. */
  .av-bento__badge, .av-bento__head, .av-bento__foot,
  .av-bento__big, .av-bento__sub, .av-bento__go { position: static; }
  .av-bento__cell--brand, .av-bento__cell--quality {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 28px 24px;
  }
  .av-bento__cell--brand .av-bento__foot,
  .av-bento__cell--quality .av-bento__foot { width: auto; }
  .av-bento__head { width: auto; font-size: 28px; line-height: 32px; }
  .av-bento__big { width: auto; font-size: 56px; line-height: 60px; }
  .av-bento__sub { width: auto; }

  .av-hww { padding: 40px 20px 48px; gap: 32px; border-radius: 24px; }
  .av-hww__title { font-size: 30px; line-height: 36px; }
  .av-step { width: 100%; max-width: 260px; }

  .av-adv__card { flex-basis: 300px; width: 300px; height: auto; min-height: 219px; }
  .av-adv__body { width: 100%; }
  .av-adv__icon { display: none; }

  .av-review { flex-basis: 300px; width: 300px; }
  .av-review__body { min-height: 0; padding: 76px 20px 28px; }
}

@media (max-width: 560px) {
  .av-adv__title { font-size: 26px; line-height: 32px; }
  .av-bento__head { font-size: 24px; line-height: 28px; }
  .av-bento__big { font-size: 44px; line-height: 48px; }
  .av-hww__title { font-size: 26px; line-height: 32px; }
}

/* ------------------------------------------- Шапка поверх героя
   В макете кадр шапки (Frame 79) и кадр героя (Frame 24) оба начинаются
   с y=0: белая полоса лежит поверх картинки, а не отодвигает её вниз.
   Поэтому секции-герои поднимаются на высоту шапки 132 = 32 + 68 + 32. */
#av-header-bar { height: 68px; }
.elementor-location-header { position: relative; z-index: 50; }
#av-home-hero,
#av-page-hero,
#av-partners-hero,
#av-contacts-hero,
#av-career-banner,
#av-news-banner,
#av-catalog-hero { margin-top: -132px; }

/* Шапка накрывает верх этих секций, поэтому содержимое опускается ниже
   её полосы: 132 = 32 + 68 + 32. */
#av-contacts-hero { padding-top: 132px; }

/* Холст «Сбалансированного кормления» — ровно кадр макета 1393 px. */
#av-home-feed-canvas,
#av-about-team-canvas { width: min(1393px, 100%); margin-inline: auto; }

@media (max-width: 1024px) {
  /* На планшете шапка снова в потоке: наложение прячет заголовок героя. */
  #av-home-hero,
  #av-page-hero,
  #av-partners-hero,
  #av-contacts-hero,
  #av-career-banner,
  #av-news-banner,
  #av-catalog-hero { margin-top: 0; }
  #av-contacts-hero { padding-top: 48px; }
}

/* ---------------------------------- Текст героя главной: места из макета
   Заголовок 212×136 @88,230 и обещание 377×208 @443,318 в кадре 1440×842.
   Кегли в cqw — от ширины секции, поэтому текст сжимается вместе со сценой
   и на промежуточных ширинах не вылезает из круга. */
#av-home-hero { container-type: inline-size; }

#av-home-hero-title,
#av-home-hero-promise { position: absolute; z-index: 4; }

#av-home-hero-title   { left: 6.1111%;  top: 27.3159%; width: 14.7222%; }
#av-home-hero-promise { left: 30.7639%; top: 37.7672%; width: 26.1806%; }

.av-hero-h1 { margin: 0; display: flex; flex-direction: column; }
.av-hero-h1 span { display: block; font-family: Rubik, Inter, sans-serif; white-space: nowrap; }
.av-hero-h1__a { font-size: 2.5cqw;    line-height: 3.4722cqw; font-weight: 700; color: #638B2C; }
.av-hero-h1__b { font-size: 2.2222cqw; line-height: 2.6389cqw; font-weight: 400; color: rgba(99, 139, 44, .6); }
.av-hero-h1__c { font-size: 2.3611cqw; line-height: 3.3333cqw; font-weight: 700; color: #40611A; }

.av-hero-promise {
  margin: 0;
  font: 500 3.0556cqw/3.6111cqw Rubik, Inter, sans-serif;
  color: #FFFFFF;
}

@media (max-width: 1024px) {
  /*
   * Ниже планшета композиция героя сжалась бы до полосы в 228 px, а надписи —
   * до 10 px. Поэтому заголовок и обещание возвращаются в поток обычными
   * размерами, а сцена остаётся декоративной лентой над ними.
   */
  #av-home-hero { display: flex; flex-direction: column; gap: 20px; padding: 24px 20px 32px; }
  /*
   * В потоке обёртка виджета схлопывалась в ноль: высота сцены внутри неё
   * берётся из aspect-ratio, а такая высота не участвует в расчёте высоты
   * предка. Поэтому пропорцию задаём самой обёртке, а сцена внутри тянется
   * на всю её высоту.
   */
  .av-stage-widget {
    position: relative;
    inset: auto;
    height: auto;
    padding-top: 58.4722%; /* 842 / 1440 — пропорция кадра героя */
  }
  #av-home-feed-canvas .av-stage-widget,
  #av-about-team-canvas .av-stage-widget { padding-top: 43.3597%; } /* 604 / 1393 */
  .av-stage-widget > .elementor-widget-container,
  .av-stage-widget .elementor-shortcode { position: absolute; inset: 0; height: auto; }
  .av-stage { position: absolute; inset: 0; height: auto; aspect-ratio: auto; }

  #av-home-hero-title,
  #av-home-hero-promise { position: static; width: auto; order: -1; }
  #av-home-hero-promise { order: 1; }

  .av-hero-h1 span { white-space: normal; }
  .av-hero-h1__a { font-size: 34px; line-height: 42px; }
  .av-hero-h1__b { font-size: 30px; line-height: 38px; }
  .av-hero-h1__c { font-size: 32px; line-height: 40px; }

  .av-hero-promise {
    padding: 24px 26px;
    border-radius: 24px;
    background: linear-gradient(180deg, #94C130 0%, #638B2C 100%);
    font-size: 22px;
    line-height: 30px;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .av-hero-h1__a { font-size: 28px; line-height: 34px; }
  .av-hero-h1__b { font-size: 25px; line-height: 32px; }
  .av-hero-h1__c { font-size: 27px; line-height: 34px; }
  .av-hero-promise { font-size: 18px; line-height: 26px; }
}

/* ==========================================================================
   СТРАНИЦА «О НАС» — размеры из кадра 1397:4389
   ========================================================================== */

/* Широкое фото высотой 420, r24, с карточкой описания 620×192 @52,48.
   Ширина — вся ширина содержимого секции, как у карточек под ним. */
.av-intro { position: relative; width: 100%; }

/*
 * Фото ведёт себя как фон: заполняет блок любой ширины без искажений.
 * Кадрирование из макета (.av-crop) растягивало картинку по рамке и
 * годилось только для размера 1252×420; теперь блок шире, и рамка
 * у него своя на каждом экране.
 */
.av-intro .av-crop.av-intro__photo > img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Двойной класс: у Elementor есть своё `.elementor img { height: auto }`,
   и одиночного класса не хватает, чтобы задать высоту из макета. */
.av-intro img.av-intro__photo {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 24px;
}
.av-intro__card {
  position: absolute;
  left: 52px;
  top: 48px;
  width: 620px;
  padding: 36px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .93);
}
.av-intro__card p { margin: 0; font: 400 18px/30px Rubik, Inter, sans-serif; color: #333333; }

/* Четыре группы продукции: карточка 294×404, фото 294×280, подпись 294×124. */
.av-cats { display: flex; gap: 24px; }
.av-cat {
  flex: 1 1 294px;
  min-width: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #FFFFFF;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.av-cat img.av-cat__img { display: block; width: 100%; height: 280px; object-fit: cover; }
.av-cat__label {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 124px;
  padding: 20px 24px 24px;
  background: #F0F4EA;
  font: 600 20px/24px Rubik, Inter, sans-serif;
  color: #111827;
}

/* Значок-плашка «AminoVit» перед заголовком раздела. */
.av-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 100px;
  border: 1px solid #E5E7EB;
  font: 700 12px/14px Rubik, Inter, sans-serif;
  color: #0F161E;
}

/* Ценности: карточка 282×268 r24, поле 32, кружок иконки 64×64 #F0FDF4 r16. */
.av-values { display: flex; gap: 24px; }
.av-value {
  flex: 1 1 282px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 2px 16px rgba(15, 22, 30, .06);
}
.av-value__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: #F0FDF4;
  color: #638B2C;
}
.av-value__icon svg { width: 32px; height: 32px; }
.av-value__text { display: flex; flex-direction: column; gap: 8px; }
.av-value__title { margin: 0; font: 700 20px/24px Rubik, Inter, sans-serif; color: #0F161E; }
.av-value__desc  { margin: 0; font: 400 14px/22px Rubik, Inter, sans-serif; color: #5F6C75; }

/* Призыв к связи: линия сверху, текст 900×44 по центру, кнопка 266×51. */
.av-cta { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.av-cta__rule { display: block; width: 100%; height: 1px; background: #E5E7EB; }
.av-cta__text {
  margin: 0;
  max-width: 900px;
  padding: 12px 0 4px;
  text-align: center;
  font: 700 20px/28px Rubik, Inter, sans-serif;
  color: #0F161E;
}
.av-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 51px;
  padding: 16px 32px;
  border-radius: 100px;
  background: linear-gradient(90deg, #638B2C 0%, #94C130 100%);
  font: 600 16px/19px Rubik, Inter, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  transition: filter .2s ease;
}
.av-cta__btn:hover { filter: brightness(1.06); }
.av-cta__plus { font-size: 18px; line-height: 1; }
.av-cta__arrow svg { width: 16px; height: 16px; display: block; }

@media (max-width: 1024px) {
  .av-intro__card { position: static; width: auto; margin-top: -60px; margin-inline: 20px; }
  .av-intro__photo { height: 300px; }
  .av-cats { flex-wrap: wrap; }
  .av-cat { flex: 1 1 240px; }
  .av-values { flex-wrap: wrap; }
  .av-value { flex: 1 1 240px; }
}

@media (max-width: 768px) {
  .av-cat__img { height: 200px; }
  .av-cat__label { font-size: 17px; line-height: 22px; padding: 16px 18px 20px; }
  .av-intro__card p { font-size: 16px; line-height: 26px; }
  .av-cta__text { font-size: 17px; line-height: 24px; }
}

/* ==========================================================================
   СТРАНИЦА «КОНТАКТЫ» — размеры из кадра 303:678
   Зелёная шапка 1440×447, плашка сведений 1251×606 (колонки 503 и 588,
   промежуток 80), карточки 244×112, карта 1440×483 с карточкой 315×261.
   ========================================================================== */

#av-contacts-hero { min-height: 447px; }
#av-contacts > .e-con-inner { align-items: flex-start; }
#av-contacts-left { width: 503px; flex: 0 0 auto; }
#av-contacts-form-box { flex: 0 0 auto; }

.av-contacts__info { display: flex; flex-direction: column; gap: 40px; }
.av-contacts__head { display: flex; flex-direction: column; gap: 12px; }
.av-contacts__title { margin: 0; font: 700 36px/43px Rubik, Inter, sans-serif; color: #0F161E; }
.av-contacts__sub   { margin: 0; font: 400 14px/22px Rubik, Inter, sans-serif; color: #5F6C80; }

.av-contacts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.av-ccard {
  display: flex;
  gap: 16px;
  min-height: 112px;
  padding: 16px;
  border-radius: 12px;
  background: #FFFFFF;
}
.av-ccard__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  color: #638B2C;
}
.av-ccard__icon svg { width: 16px; height: 16px; }
.av-ccard__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.av-ccard__label { font: 700 14px/17px Rubik, Inter, sans-serif; color: #0F161E; }
.av-ccard__value { font: 400 12px/17px Rubik, Inter, sans-serif; color: #68747E; text-decoration: none; }
a.av-ccard__value:hover { color: #638B2C; }

.av-contacts__social { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.av-contacts__social-label { font: 700 15px/18px Rubik, Inter, sans-serif; color: #0F161E; }
.av-contacts__social-row { display: inline-flex; gap: 12px; }
.av-soc { width: 28px; height: 28px; border-radius: 14px; display: block; }

/* ------------------------------------------------------------- Карта */
.av-map { position: relative; }
.av-map img.av-map__base { display: block; width: 100%; height: 483px; object-fit: cover; }
.av-map__card {
  position: absolute;
  left: 43px;
  top: 52px;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 315px;
  padding: 24px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 8px 28px rgba(15, 22, 30, .12);
}
/* Строка названия: кружок 32×32 #EBF7E0 с меткой 16×16, промежуток 10. */
.av-map__head { display: flex; align-items: center; gap: 10px; }
.av-map__pin {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: #EBF7E0;
  color: #638B2C;
}
.av-map__pin svg { width: 16px; height: 16px; }
.av-map__name { font: 700 17px/20px Rubik, Inter, sans-serif; color: #0F161E; }
.av-map__rule { display: block; height: 1px; background: #E2E8F0; }

/* Строка адреса: зелёный кружок 20×20 с белой меткой 10×10, промежуток 8. */
.av-map__address {
  display: flex;
  gap: 8px;
  margin: 0;
  font: 400 13px/20px Rubik, Inter, sans-serif;
  color: #4A5568;
}
.av-map__dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #638B2C;
  color: #FFFFFF;
}
.av-map__dot svg { width: 10px; height: 10px; stroke-width: 2.2; }
.av-map__btn {
  display: block;
  padding: 10px 16px;
  border-radius: 8px;
  background: #638B2C;
  font: 600 13px/15px Rubik, Inter, sans-serif;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}
.av-map__btn:hover { background: #3B531A; }

/* Узкая полоса подвала из макета контактов — на случай отдельного шаблона. */
.av-footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 28px 80px;
  background: #638B2C;
}
.av-footbar__copy { font: 400 15px/18px Rubik, Inter, sans-serif; color: #FFFFFF; }
.av-footbar__socials { display: inline-flex; gap: 24px; }
.av-footbar__socials a {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #FFFFFF;
  transition: opacity .18s ease;
}
.av-footbar__socials a:hover { opacity: .75; }
.av-footbar__socials svg { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  #av-contacts > .e-con-inner { flex-direction: column; }
  #av-contacts-left, #av-contacts-form-box { width: 100%; }
  #av-contacts-hero { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
  .av-map img.av-map__base { height: 380px; }
  .av-map__card { position: static; width: auto; margin: -60px 20px 0; }
}

@media (max-width: 560px) {
  .av-contacts__grid { grid-template-columns: minmax(0, 1fr); }
  .av-contacts__social { flex-direction: column; align-items: flex-start; gap: 12px; }
  .av-map img.av-map__base { height: 280px; }
}

/* ---------------------------------- «Карьера»: фото команды 1200×600 r24 */
img.av-career-photo {
  display: block;
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 24px;
}
#av-career-cols > .e-con { flex: 0 1 568px; }

@media (max-width: 1024px) {
  img.av-career-photo { height: 360px; }
  #av-career-cols > .e-con-inner { flex-direction: column; }
  #av-career-cols > .e-con { flex: 1 1 auto; width: 100% !important; }
}
@media (max-width: 560px) {
  img.av-career-photo { height: 240px; }
}

/* -------------------------------- Баннер ленты новостей (1529:4605)
   1440×420 с двумя зелёными кругами по краям: 260 @-120,-80 и 220 @1340,320. */
#av-news-banner { position: relative; overflow: hidden; }
#av-news-banner::before,
#av-news-banner::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(180deg, #6BA626 0%, #40661A 100%);
  opacity: .45;
  pointer-events: none;
}
#av-news-banner::before { width: 260px; height: 260px; left: -120px; top: -80px; }
#av-news-banner::after  { width: 220px; height: 220px; right: -120px; top: 320px; }
#av-news-banner > .e-con-inner { position: relative; z-index: 1; align-items: flex-start; }

@media (max-width: 1024px) {
  #av-news-banner { min-height: 0 !important; padding: 56px 20px !important; }
  #av-news-banner .elementor-heading-title { font-size: 40px !important; line-height: 48px !important; }
}

/* ------------------------------------ Статья новости (кадр 1450:5255)
   Обложка 1200×520 r16, колонки 800 и 320 с промежутком 80,
   выносная цитата с зелёной полосой слева. */
#av-post-cover img { width: 100%; height: 520px; object-fit: cover; border-radius: 16px; }
#av-post-columns > .e-con:first-child { flex: 0 1 800px; }
#av-post-columns > .e-con:last-child  { flex: 0 0 320px; }

#av-post-body p { margin: 0 0 28px; }
#av-post-body blockquote {
  margin: 0 0 28px;
  padding: 8px 0 8px 24px;
  border-left: 3px solid #4A7C2E;
  font: 600 22px/33px Lora, Georgia, serif;
  color: #4A7C2E;
}
#av-post-body blockquote cite {
  display: block;
  margin-top: 8px;
  font: 700 14px/17px Inter, Rubik, sans-serif;
  color: #4A5568;
  font-style: normal;
}

.av-aside { display: flex; flex-direction: column; gap: 20px; }
.av-aside__row { display: flex; flex-direction: column; gap: 4px; }
.av-aside__label { font: 500 13px/16px Inter, Rubik, sans-serif; color: #9CA3AF; }
.av-aside__value { font: 600 15px/22px Inter, Rubik, sans-serif; color: #0F161E; }
.av-aside__value a { color: #638B2C; text-decoration: none; }
.av-aside__back { font: 600 14px/20px Inter, Rubik, sans-serif; color: #638B2C; text-decoration: none; }

@media (max-width: 1024px) {
  #av-post-cover img { height: 320px; }
  #av-post-columns > .e-con-inner { flex-direction: column; }
  #av-post-columns > .e-con { flex: 1 1 auto !important; width: 100% !important; }
}
@media (max-width: 560px) {
  #av-post-cover img { height: 220px; }
}

/* ------------------------------- Карточки виджета «Записи» на планшете
   Ниже 1024 сетка схлопывалась в одну колонку, и обложка каждой карточки
   растягивалась во всю ширину: страница товара вырастала до 13 000 px.
   Держим две колонки и ограничиваем высоту обложки. */
.elementor-posts--skin-cards .elementor-post__thumbnail__link { width: 100%; }
.elementor-posts--skin-cards .elementor-post__thumbnail {
  padding-bottom: 0 !important;
  height: 220px;
}
.elementor-posts--skin-cards .elementor-post__thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .elementor-posts-container.elementor-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .elementor-posts--skin-cards .elementor-post__thumbnail { height: 180px; }
}
@media (max-width: 560px) {
  .elementor-posts-container.elementor-grid { grid-template-columns: 1fr !important; }
  .elementor-posts--skin-cards .elementor-post__thumbnail { height: 200px; }
}

/* -------------------------------------- Цены из прайса в шапке товара
   Блока нет в макете — там только кнопка «Запросить цену», поэтому он
   оформлен в том же ритме: плашка #F0F4EA, r16, поля 16/20. */
.av-product-note {
  margin: 0;
  font: 400 16px/26px Inter, Rubik, sans-serif;
  color: #4A5568;
}
.av-price { display: flex; flex-wrap: wrap; gap: 12px; }
.av-price__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 176px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #F0F4EA;
}
.av-price__value { font: 700 24px/30px Rubik, Inter, sans-serif; color: #3B531A; }
.av-price__label { font: 400 13px/18px Inter, Rubik, sans-serif; color: #555F4D; }

@media (max-width: 560px) {
  .av-price__item { min-width: 0; flex: 1 1 140px; padding: 12px 16px; }
  .av-price__value { font-size: 20px; line-height: 26px; }
}

/* ==========================================================================
   ЛЕНДИНГ КАТАЛОГА — размеры из кадра 545:3359 / 1010:4193
   ========================================================================== */

/* Герой: текстовая колонка 580×324 @120,259 в кадре 1440×842. */
#av-catalog-hero { position: relative; aspect-ratio: 1440 / 842; overflow: hidden; }
#av-catalog-hero-text {
  position: absolute;
  left: 8.3333%;   /* 120 / 1440 */
  top: 30.7601%;   /* 259 / 842  */
  width: 40.2778%; /* 580 / 1440 */
  z-index: 3;
}

/* Секция «Продукты»: картинка 500×380 r24. */
img.av-catalog-intro__img {
  display: block;
  width: 500px;
  max-width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 24px;
}

/* Три карточки 400×366 #F0F4EA r20, поле 32, промежуток 40, линия сверху. */
.av-feats { display: flex; flex-direction: column; gap: 36px; }
.av-feats__rule { display: block; height: 1px; background: #E5E7EB; }
.av-feats__row { display: flex; gap: 40px; }
.av-feat {
  flex: 1 1 400px;
  min-width: 0;
  min-height: 366px; /* высота карточки из макета */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: 20px;
  background: #F0F4EA;
}
.av-feat__title { margin: 0; font: 600 20px/26px Rubik, Inter, sans-serif; color: #638B2C; }
.av-feat__text  { margin: 0; font: 400 14px/22px Rubik, Inter, sans-serif; color: #70747A; }

/* Три показателя 411×186 #F0F4EA r20, поле 40, промежуток 24. */
.av-stats { display: flex; gap: 24px; }
.av-stat {
  flex: 1 1 411px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  border-radius: 20px;
  background: #F0F4EA;
}
.av-stat__value { font: 700 44px/48px Rubik, Inter, sans-serif; color: #638B2C; }
.av-stat__label { font: 400 15px/21px Rubik, Inter, sans-serif; color: #70747A; }

/* Плашка призыва 1280×380, градиент #638B2C → #94C130, r32, поля 40/80. */
.av-ctacard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 380px;
  padding: 40px 80px;
  border-radius: 32px;
  background: linear-gradient(135deg, #638B2C 0%, #94C130 100%);
  text-align: center;
  justify-content: center;
}
.av-ctacard__text { display: flex; flex-direction: column; gap: 16px; max-width: 800px; }
.av-ctacard__title { margin: 0; font: 700 36px/45px Rubik, Inter, sans-serif; color: #FFFFFF; }
.av-ctacard__desc  { margin: 0; font: 400 16px/26px Rubik, Inter, sans-serif; color: #F0F4EA; }
.av-ctacard__btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  border-radius: 100px;
  background: #FFFFFF;
  font: 600 16px/19px Rubik, Inter, sans-serif;
  color: #3B531A;
  text-decoration: none;
  transition: transform .2s ease;
}
.av-ctacard__btn:hover { transform: translateY(-2px); }

@media (max-width: 1024px) {
  #av-catalog-hero { aspect-ratio: auto; display: flex; flex-direction: column; gap: 20px; padding: 24px 20px 32px; }
  #av-catalog-hero-text { position: static; width: auto; order: -1; }
  .av-feats__row { flex-wrap: wrap; }
  .av-feat { flex: 1 1 280px; }
  .av-stats { flex-wrap: wrap; }
  .av-stat { flex: 1 1 260px; }
  .av-ctacard { padding: 32px 24px; min-height: 0; }
  .av-ctacard__title { font-size: 28px; line-height: 36px; }
}

@media (max-width: 560px) {
  img.av-catalog-intro__img { height: 260px; }
  .av-ctacard__title { font-size: 23px; line-height: 30px; }
  .av-stat { padding: 28px 24px; }
  .av-stat__value { font-size: 34px; line-height: 40px; }
}

/* Разделов на лендинге каталога пять, а на «О нас» четыре. Базис 0 делит
   ряд поровну при любом их числе, поэтому пятая карточка сужается,
   а не уезжает на вторую строку. */
.av-cats { flex-wrap: wrap; }
.av-cat { flex: 1 1 0%; min-width: 180px; }
/* У раздела без обложки — зелёная плашка вместо фото: карточка держит форму. */
.av-cat__img--blank {
  display: block;
  width: 100%;
  height: 280px;
  background: linear-gradient(160deg, #94C130 0%, #638B2C 100%);
}

/* ==========================================================================
   КАДРИРОВАНИЕ КАРТИНОК ИЗ МАКЕТА
   В Figma у 31 заливки включён режим Crop: рамка слоя показывает часть
   исходника. Выгружается файл целиком, поэтому рамка обрезает его здесь —
   иначе фотографии выглядят растянутыми, а лист логотипа показывает
   сразу четыре варианта.
   ========================================================================== */
.av-crop {
  position: relative;
  display: block;
  overflow: hidden;
}
.av-crop > img.av-crop__img {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: fill;
}

/* Слой сцены с фотографией: рамка обрезает, картинка внутри тянется. */
.av-stage__shot {
  position: absolute;
  overflow: hidden;
  z-index: 2;
}
.av-stage__shot > img { display: block; max-width: none; }

/* -------------------------- Размеры обрезанных картинок по макету
   Обёртка .av-crop задаёт рамку слоя, картинка внутри её заполняет. */
.av-intro .av-crop.av-intro__photo { width: 100%; height: 420px; border-radius: 24px; }
.av-cat .av-crop.av-cat__img       { width: 100%; height: 280px; flex: none; }
.av-crop.av-career-photo           { width: 100%; height: 600px; border-radius: 24px; }
.av-bento__cell .av-crop.av-bento__shot { width: 100%; height: 100%; }
.av-crop.av-partner-photo          { width: 463px; max-width: 100%; height: 440px; border-radius: 24px; }
#av-home-partner-photo             { width: auto; flex: 0 0 auto; }
.av-logo--footer .av-crop.av-logo__img { width: 200px; height: 82px; }

@media (max-width: 1024px) {
  .av-crop.av-career-photo { height: 360px; }
  .av-intro .av-crop.av-intro__photo { height: 300px; }
  .av-crop.av-partner-photo { width: 100%; height: 320px; }
  /* Ширина auto досталась виджету от строки, где фото стояло рядом с текстом.
     В столбик он от неё сжимался в ноль — на месте фотографии оставалась
     пустая полоса в треть экрана. */
  #av-home-partner-photo { width: 100%; }
}
@media (max-width: 768px) {
  .av-cat .av-crop.av-cat__img { height: 200px; }
}
@media (max-width: 560px) {
  .av-crop.av-career-photo { height: 240px; }
}

/* ==========================================================================
   ОГРАНИЧЕНИЕ ПО КАДРУ МАКЕТА
   Кадр Figma — 1440 px. Секции во всю ширину на мониторе 1920 растягивались
   вместе с содержимым: герой становился 1905×1114 вместо 1440×842, а фото
   в нём — соответственно больше. Ниже 1440 всё по-прежнему масштабируется,
   выше — композиция стоит по центру в своём кадре.

   Цветные секции при этом не должны терять фон во всю ширину, поэтому он
   растягивается тенью: box-shadow без размытия с огромным разбросом
   закрашивает поля, а clip-path обрезает её по высоте секции.
   ========================================================================== */
:root { --av-frame: 1440px; }

/*
 * Баннеры-герои тянутся во всю ширину окна — так они выглядят в макете
 * и на присланных скриншотах. Композиция внутри масштабируется целиком,
 * пропорции кадра сохраняются.
 */
#av-home-hero,
#av-page-hero,
#av-partners-hero,
#av-catalog-hero,
#av-contacts-hero,
#av-career-banner,
#av-news-banner,
#av-contacts-map {
  max-width: none;
  width: 100%;
}

/*
 * ...но при этом целиком помещаются в окно. На ноутбуке 15" под содержимое
 * остаётся около 770 px по высоте, а кадр 1440×842 при ширине окна 1520
 * занимает 889: низ композиции уходил под сгиб, и баннер приходилось
 * пролистывать. Поэтому ширину кадра ограничивает не только окно, но и его
 * высота — 1440/842 от неё. Внутри кадра всё задано процентами и cqw,
 * поэтому он сжимается целиком: ничего не обрезается и не разъезжается.
 *
 * Нижняя граница 1100 px — чтобы в совсем низком окне надписи не ужимались
 * до нечитаемых; там баннер снова выше экрана, но это уже крайний случай.
 *
 * Зелёные полосы «Контактов», «Карьеры» и «Новостей» сюда не входят: они
 * и так в 420…535 px и помещаются на любом ноутбуке.
 */
@media (min-width: 1025px) {
  :root { --av-hero-fit: max(1100px, calc(100vh * 1440 / 842)); }

  @supports (height: 100svh) {
    /* svh — высота окна без выезжающих панелей; на десктопе равна vh. */
    :root { --av-hero-fit: max(1100px, calc(100svh * 1440 / 842)); }
  }

  #av-home-hero,
  #av-page-hero,
  #av-partners-hero,
  #av-catalog-hero {
    width: min(100%, var(--av-hero-fit));
    margin-inline: auto;
  }

  /*
   * Декор героя — круги, кресты, отпечатки лап — в макете заходит за края
   * кадра. Пока кадр был во всю ширину, это было незаметно, а у суженного
   * кадра их срезало вертикальной линией в паре сантиметров от края окна.
   * По горизонтали сцена больше не режется и тянется на всю ширину окна,
   * по вертикали по-прежнему заканчивается у границ секции.
   * clip, а не hidden: только так вторая ось может остаться visible.
   */
  #av-home-hero,
  #av-page-hero,
  #av-partners-hero,
  #av-catalog-hero,
  #av-home-hero .av-stage,
  #av-page-hero .av-stage,
  #av-partners-hero .av-stage,
  #av-catalog-hero .av-stage {
    overflow-x: visible;
    overflow-y: clip;
  }

  /*
   * Кадр сузился, а фон секции должен остаться во всю ширину: он
   * растягивается тенью без размытия, clip-path держит её в высоте секции.
   * Герои главной и «О нас» цвета страницы — им это не нужно.
   */
  #av-partners-hero,
  #av-catalog-hero {
    clip-path: inset(0 -100vmax);
    box-shadow: 0 0 0 100vmax #F8FAFC;
  }
}

/* Содержательные секции остаются в кадре: там нужны размеры из макета. */
#av-home-advantages {
  max-width: var(--av-frame);
  margin-inline: auto;
}

/*
 * «О компании» стоит по той же сетке, что и группы продукции под ней
 * (#av-about-cats: поля 96, содержимое до 1344). Раньше секция держалась
 * кадра 1440 с полями 80, а фото — своих 1252, и на широком экране блок
 * выходил заметно уже карточек под ним и сдвинутым вправо.
 */
@media (min-width: 1025px) {
  #av-about {
    padding-left: max(96px, calc((100% - 1344px) / 2)) !important;
    padding-right: max(96px, calc((100% - 1344px) / 2)) !important;
  }
}
/* На телефоне секции держали десктопные поля 48…96 — колонка сужалась
   до 200–300 px, а лента отзывов до 230. Поля как у остальных секций. */
@media (max-width: 1024px) {
  #av-about,
  #av-about-cats,
  #av-home-bento,
  #av-home-partners,
  #av-home-how,
  #av-home-reviews {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/*
 * Вылезший за кадр декор героев обрезается краем окна. Именно clip на обёртке
 * страницы: overflow-x: hidden у body прячет полосу прокрутки, но страницу
 * всё равно можно было сдвинуть вбок жестом тачпада.
 * Любой документ Elementor: страницы — wp-page, каталог — шаблон archive.
 */
.elementor[data-elementor-type]:has(> #av-home-hero, > #av-page-hero, > #av-partners-hero, > #av-catalog-hero) {
  overflow-x: clip;
}

/*
 * Фон героя главной. У остальных героев фон — заливка секции, её растягивает
 * тень; здесь градиент #FFFFFF → #F8FAFC, тенью такое не повторить. Поэтому
 * подложка — псевдоэлемент во всю ширину окна: кадр уже окна, а фон должен
 * доходить до краёв. Обрезает его обёртка страницы (правило выше).
 */
#av-home-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  pointer-events: none;
}

/* Плашка преимуществ в макете 1361 — шире не растёт. */
.av-adv { max-width: 1361px; margin-inline: auto; }

/* Карта контактов в макете 1440×483 — дальше только по центру. */
#av-contacts-map { clip-path: inset(0 -100vmax); box-shadow: 0 0 0 100vmax #FFFFFF; }

/* Зелёные шапки «Контактов» и «Карьеры» тянутся во всю ширину — это верно,
   но содержимое внутри них держится кадра: поля растут от 120 px так, чтобы
   строка не уезжала от центра на широком мониторе. */
/* 120 — десктопное поле из макета; на телефоне остаётся 20, как везде. */
#av-contacts-hero,
#av-career-banner {
  padding-inline: max(20px, calc((100% - 1200px) / 2)) !important;
}
#av-contacts-map { clip-path: none; box-shadow: none; }

/* -------------------------- Иконка группы животных (кадр 1164:4169)
   В макете заголовок карточки — строка из иконки 24×24 и названия
   Rubik 700 22/26 с промежутком 12. */
.av-animals__title { display: flex; align-items: center; gap: 12px; }
.av-animals__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #638B2C;
}
.av-animals__icon svg { width: 24px; height: 24px; stroke-width: 1.7; }

/* Кружок иконки преимущества — градиент из макета, а не плоская заливка. */
.av-benefit__icon {
  background: linear-gradient(135deg, #638B2C 0%, #94C130 100%);
  color: #FFFFFF;
}

/* ------------------------------- Правки карточки товара по кадру 1164:4076 */
/* Блок сведений занимает свою колонку целиком: без этого он сжимался
   по содержимому и строки характеристик расходились не на всю ширину. */
.av-product-head__info { width: 100%; min-width: 0; }

/* Карточка преимущества в макете 280×148; если текст длиннее — растёт,
   но не становится ниже. */
.av-benefit { min-height: 148px; height: auto; }

/* Плашка «Другие:» — 1200×67 #F4F6F0 r16, поле 24, промежуток 12. */
.av-animals__other {
  display: flex;
  gap: 12px;
  margin: 24px 0 0;
  padding: 24px;
  border-radius: 16px;
  background: #F4F6F0;
  font: 400 16px/19px Rubik, Inter, sans-serif;
  color: #4D4D4D;
}
.av-animals__other strong { font-weight: 600; color: #3B531A; }

/* ==========================================================================
   ТЕЛЕФОН: меньше фона, больше «резины»
   На узком экране мелкий декор сцены (точки, связи, кресты, отпечатки лап)
   превращается в рябь и мешает читать — он убирается. Крупные фигуры,
   фотографии и подписи остаются. Блоки с размерами из макета переходят
   на проценты, чтобы тянуться по ширине экрана.
   ========================================================================== */
@media (max-width: 768px) {
  .av-stage__layer--minor { display: none !important; }

  /* Карточка товара целиком на проценты. */
  .av-product-head { grid-template-columns: 1fr !important; gap: 20px; }
  .av-product-head img,
  .av-product-head__media { width: 100% !important; height: auto !important; max-width: 100%; }
  .av-product-head__media img { aspect-ratio: 348 / 380; object-fit: contain; }
  .av-benefits { grid-template-columns: 1fr !important; }
  .av-benefit { width: auto; min-height: 0; }
  .av-animals { grid-template-columns: 1fr !important; }
  .av-animals__card { width: auto; height: auto; }
  .av-table { width: 100% !important; }
  .av-sec--split { grid-template-columns: 1fr !important; }

  /* Ленты из макета прокручиваются, но карточки внутри тянутся по экрану. */
  .av-adv__card,
  .av-review { flex-basis: min(300px, 82vw); width: min(300px, 82vw); }

  /* Плитка каталога и разделы — в одну колонку на всю ширину. */
  .av-cat { flex: 1 1 100%; }
  .av-feat, .av-stat, .av-value { flex: 1 1 100%; }

  /* Подвал: логотип и меню в столбик, иконки по центру. */
  #av-footer-top > .e-con-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  #av-footer-bottom > .e-con-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 560px) {
  /*
   * Пропорция сцены на телефоне — как в кадре (842/1440). Раньше здесь
   * стояло 78%: сцена вытягивалась по высоте, и круги превращались в овалы,
   * а петух — в вытянутое пятно. Чтобы композиция не мельчала, лента идёт
   * во всю ширину экрана, без боковых полей секции.
   */
  #av-home-hero .av-stage-widget,
  #av-page-hero .av-stage-widget,
  #av-partners-hero .av-stage-widget,
  #av-catalog-hero .av-stage-widget {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding-top: 58.4722%;
  }

  .av-product-head { gap: 16px; }
  .av-price__item { flex: 1 1 100%; }
}

/* ==========================================================================
   СТРАНИЦА ВАКАНСИИ — кадр vacancy-detail-page (501:1406)
   Шапка 1160×294 поля 40/0/48/0 промежуток 32; заголовок Gabarito 800 48/55,
   плашки 440×60, колонки 760 и 320 с промежутком 80, призыв 1160×194 r20.
   ========================================================================== */

/* Плашки сведений: кружок 36×36 #F0F6EF r18 с иконкой 16×16. */
.av-vac-chips { display: grid; gap: 12px; width: 440px; max-width: 100%; }
.av-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #FFFFFF;
}
.av-chip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #F0F6EF;
  color: #4A7C2E;
}
.av-chip__icon svg { width: 16px; height: 16px; }
.av-chip__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.av-chip__label { font: 500 12px/15px Inter, Rubik, sans-serif; color: #879683; }
.av-chip__value { font: 600 15px/18px Inter, Rubik, sans-serif; color: #1E251C; }

/* Заголовок вакансии — Gabarito, как в макете. */
.av-vac-title { font-family: Gabarito, Rubik, Inter, sans-serif; font-weight: 800; }
.av-vac-card__title,
.av-vac-note__title,
.av-vac-cta__title { font-family: Gabarito, Rubik, Inter, sans-serif; }

/* Знаки в боковой карточке — настоящие иконки, а не пустые кружки. */
.av-vac-contact__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  background: none;
  color: #4A7C2E;
}
.av-vac-contact__icon svg { width: 20px; height: 20px; }

/* Маркер пункта списка: кружок 22×22 #F0F6EF со стрелкой 12×12. */
.av-list--arrow li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 11px;
  background: #F0F6EF
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7C2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}
.av-list--arrow li { display: flex; gap: 12px; align-items: flex-start; }

@media (max-width: 1024px) {
  .av-vac-chips { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .av-vac-chips { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------- Соцсети на «Контактах»: знаки внутри */
.av-soc {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15, 22, 30, .10);
}
.av-soc svg { width: 15px; height: 15px; }

/* Колонки вакансии ровно как в макете: 760 и 320 с промежутком 80,
   призыв 1160 с полем 60. */
.av-vac { display: grid; grid-template-columns: 760px 320px; gap: 80px; justify-content: center; }
.av-vac-cta {
  width: 1160px;
  max-width: 100%;
  margin-inline: auto;
  padding: 60px;
  border-radius: 20px;
}

@media (max-width: 1200px) {
  .av-vac { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
}
@media (max-width: 1024px) {
  .av-vac { grid-template-columns: minmax(0, 1fr); }
  .av-vac__side { width: 100%; }
  .av-vac-cta { padding: 40px 24px; }
}

/* В макете блок сведений стоит по центру высоты плашки, а форма прижата
   к её верху: info-container 503×467 на отметке 544 при поле с 524,
   форма 588×504 — ровно с 525. */
#av-contacts-left { align-self: center; }
#av-contacts-form-box { align-self: flex-start; }

/* ---------------------------------- Пункты меню строго по макету
   Elementor задаёт пунктам поля и промежутки через свои переменные в em,
   и они пересиливают правила по классу. В макете поля есть только
   у активного пункта, а между пунктами ровно 24 px — фиксируем. */
#av-header #av-main-nav .elementor-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Отступ Elementor вешает и на пункт, и на ссылку — промежуток выходил
     вдвое больше макетных 24 px. Оставляем его только на пункте. */
  margin-left: 0 !important;
  margin-right: 0 !important;
}
#av-header #av-main-nav .elementor-nav-menu {
  gap: 0 !important; /* иначе к полям пунктов добавляется ещё и промежуток списка */
}
#av-header #av-main-nav .elementor-nav-menu > li {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
#av-header #av-main-nav .elementor-nav-menu > li:first-child { margin-left: 0 !important; }
#av-header #av-main-nav .elementor-nav-menu > li:last-child { margin-right: 0 !important; }
#av-header #av-main-nav .elementor-item.elementor-item-active,
#av-header #av-main-nav .current-menu-item > .elementor-item,
#av-header #av-main-nav .current-menu-ancestor > .elementor-item {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Узкая полоса 1025–1085: логотип, меню и кнопки вместе требуют 960 px,
   а полоса даёт меньше — пункты налезали на переключатель языка.
   На этом промежутке тоже показываем бургер. */
@media (min-width: 1025px) and (max-width: 1085px) {
  #av-main-nav,
  #av-header-actions > .elementor-widget-shortcode:not(.av-mnav-widget),
  #av-header-actions .elementor-widget-button { display: none; }
  .av-mnav-widget, .av-mnav { display: block; }
  #av-header-bar { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --------------------------- Собственный подвал карточки вакансии (501:1591)
   Строка 1160×124 с полями 40 по вертикали: слева имя и копирайт,
   справа ссылки. Общего подвала у этой страницы в макете нет. */
.av-vac-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 40px 0;
  border-top: 1px solid #E2E8E0;
}
.av-vac-foot__left { display: flex; flex-direction: column; gap: 6px; }
.av-vac-foot__brand { font: 700 18px/22px Gabarito, Rubik, Inter, sans-serif; color: #4A7C2E; }
.av-vac-foot__copy  { font: 400 13px/16px Inter, Rubik, sans-serif; color: #879683; }
.av-vac-foot__right { display: inline-flex; gap: 24px; }
.av-vac-foot__right a {
  font: 500 13px/16px Inter, Rubik, sans-serif;
  color: #4A7C2E;
  text-decoration: none;
}
.av-vac-foot__right a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .av-vac-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==========================================================================
   РАЗДЕЛ КАТАЛОГА С ПОДРАЗДЕЛАМИ — кадр Desktop - 25 (1136:1704)
   Баннер 1440×520 и нумерованный список линеек вместо сетки товаров.
   ========================================================================== */

.av-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: 0 80px 0 120px;
  background: linear-gradient(90deg, #40661A 0%, #94C130 100%);
}
/* Два белых круга из макета: 800×800 @840,-100 под 15 % и 600×600 @890,220. */
.av-banner__curve {
  position: absolute;
  border-radius: 50%;
  background: #FFFFFF;
  pointer-events: none;
}
.av-banner__curve          { width: 55.5556%; aspect-ratio: 1; left: 58.3333%; top: -19.23%; opacity: .15; }
.av-banner__curve--accent  { width: 41.6667%; aspect-ratio: 1; left: 61.8056%; top: 42.31%;  opacity: 1; }

.av-banner__body { position: relative; z-index: 2; width: 680px; max-width: 100%; }
.av-banner__title {
  margin: 0;
  font: 900 88px/107px Inter, Rubik, sans-serif;
  color: #FFFFFF;
  text-transform: uppercase;
}
.av-banner__text { margin-top: 16px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 26px; }

/* Группа снимков справа: координаты кадра переведены в проценты. */
.av-banner__shots { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.av-banner__shots img { position: absolute; object-fit: contain; }

/* ------------------------------------------- Нумерованный список линеек */
.av-lines { display: flex; flex-direction: column; gap: 48px; }
.av-lines__title {
  margin: 0;
  font: 800 36px/44px Inter, Rubik, sans-serif;
  color: #0F161E;
}
.av-lines__list {
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 2px 18px rgba(15, 22, 30, .06);
  overflow: hidden;
}
.av-line {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 144px;
  padding: 32px;
  text-decoration: none;
  transition: background .2s ease;
}
.av-line + .av-line { border-top: 1px solid #E8EFE5; }
.av-line__num {
  flex: none;
  min-width: 52px;
  font: 800 40px/48px Inter, Rubik, sans-serif;
  color: #D6E4CE;
  transition: color .2s ease;
}
.av-line__circle {
  flex: none;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  border-radius: 40px;
  background: #F0F5EC;
  color: #638B2C;
  overflow: hidden;
}
.av-line__circle img { width: 56px; height: 56px; object-fit: contain; }
.av-line__circle svg  { width: 32px; height: 32px; }
.av-line__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.av-line__name { font: 800 18px/22px Inter, Rubik, sans-serif; color: #0F161E; }
.av-line__desc { font: 500 14px/20px Inter, Rubik, sans-serif; color: #5C6A54; }
.av-line__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #638B2C;
  color: #FFFFFF;
  transition: transform .2s ease;
}
.av-line__go svg { width: 20px; height: 20px; }

/* Наведение: строка заливается градиентом, как второе состояние в макете. */
.av-line:hover { background: linear-gradient(90deg, #638B2C 0%, #94C130 100%); }
.av-line:hover .av-line__num,
.av-line:hover .av-line__name,
.av-line:hover .av-line__desc { color: #FFFFFF; }
.av-line:hover .av-line__circle { background: rgba(255, 255, 255, .22); }
.av-line:hover .av-line__go { background: #FFFFFF; color: #638B2C; transform: translateX(4px); }

@media (max-width: 1024px) {
  .av-banner { min-height: 360px; padding: 48px 20px; }
  .av-banner__title { font-size: 56px; line-height: 64px; }
  .av-banner__shots { display: none; }
  .av-lines { gap: 28px; }
  .av-lines__title { font-size: 28px; line-height: 34px; }
}

@media (max-width: 768px) {
  .av-banner { min-height: 260px; }
  .av-banner__title { font-size: 38px; line-height: 44px; }
  .av-line { flex-wrap: wrap; gap: 16px; min-height: 0; padding: 24px 20px; }
  .av-line__num { min-width: 0; font-size: 28px; line-height: 34px; }
  .av-line__circle { width: 56px; height: 56px; border-radius: 28px; }
  .av-line__circle img { width: 36px; height: 36px; }
  .av-line__text { flex: 1 1 100%; order: 3; }
  .av-line__go { margin-left: auto; }
}

/* ==========================================================================
   СТРАНИЦА ЛИНЕЙКИ — кадр Desktop - 39 (1204:6273)
   Заголовок 1200×110, параметры 1200×455 #F9FAFB r24 поле 32,
   преимущества в две колонки по 584, строка животных в белой плашке r16,
   ниже нумерованный список рецептур 1200×128.
   ========================================================================== */
.av-linepage { display: flex; flex-direction: column; gap: 40px; }

.av-linepage__head { display: flex; flex-direction: column; gap: 12px; }
.av-linepage__title { margin: 0; font: 800 36px/44px Inter, Rubik, sans-serif; color: #0F161E; }
.av-linepage__sub   { margin: 0; font: 500 18px/27px Inter, Rubik, sans-serif; color: #5C6A54; }

.av-linepage__block { display: flex; flex-direction: column; gap: 16px; }
.av-linepage__h3 { margin: 0; font: 700 24px/29px Inter, Rubik, sans-serif; color: #0F161E; }
.av-linepage__text { margin: 0; font: 500 16px/26px Inter, Rubik, sans-serif; color: #5C6A54; }

/* Основные параметры: строки 43 px с полем 12 по вертикали, метка 180. */
.av-params {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: #F9FAFB;
}
.av-params__list { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.av-params__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
}
.av-params__row dt { margin: 0; font: 500 16px/19px Inter, Rubik, sans-serif; color: #5C6A54; }
.av-params__row dd { margin: 0; font: 600 16px/19px Inter, Rubik, sans-serif; color: #0F161E; }

/* Преимущества: две колонки по 584, кружок галочки 24×24 #94C130 r12. */
.av-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
}
.av-checks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: 500 16px/24px Inter, Rubik, sans-serif;
  color: #0F161E;
}
.av-checks__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #94C130;
  color: #FFFFFF;
}
.av-checks__mark svg { width: 14px; height: 14px; stroke-width: 2.6; }

/* Строка «Для каких животных»: белая плашка r16 с полем 24. */
.av-checks--row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 24px;
  border-radius: 16px;
  background: #FFFFFF;
}
.av-checks--row li { font-weight: 500; color: #5C6A54; line-height: 26px; }
.av-checks__mark--plain { background: none; color: #94C130; }
.av-checks__mark--plain svg { width: 20px; height: 20px; }

/* Строки рецептур на странице линейки — карточки, а не сплошной список. */
.av-linepage .av-lines__list { background: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 16px; }
.av-linepage .av-line {
  min-height: 128px;
  padding: 24px;
  border-radius: 24px;
  background: #FFFFFF;
}
.av-linepage .av-line + .av-line { border-top: 0; }
.av-linepage .av-line__num { color: #4A7D2E; }
.av-linepage .av-line__go {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, #638B2C 0%, #94C130 100%);
}

@media (max-width: 1024px) {
  .av-linepage__title { font-size: 28px; line-height: 34px; }
  .av-checks { grid-template-columns: minmax(0, 1fr); }
  .av-checks--row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 768px) {
  .av-params { padding: 20px; gap: 16px; }
  .av-params__row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; }
}

/* Заголовок баннера в две строки (кадр Desktop - 39): крупная 70/85
   и уточняющая 36/44. Одной строкой — прежние 88/107 из Desktop - 25. */
.av-banner__title { display: flex; flex-direction: column; gap: 16px; }
.av-banner__line { display: block; }
.av-banner__title:has(.av-banner__line--small) .av-banner__line { font-size: 70px; line-height: 85px; }
.av-banner__line--small { font-size: 36px; line-height: 44px; text-transform: none; }

@media (max-width: 1024px) {
  .av-banner__title:has(.av-banner__line--small) .av-banner__line { font-size: 46px; line-height: 54px; }
  .av-banner__line--small { font-size: 26px; line-height: 32px; }
}
@media (max-width: 768px) {
  .av-banner__title:has(.av-banner__line--small) .av-banner__line { font-size: 32px; line-height: 38px; }
  .av-banner__line--small { font-size: 20px; line-height: 26px; }
}

/* ==========================================================================
   РАЗДЕЛ БЕЗ ПОДРАЗДЕЛОВ — кадры Desktop - 58/59/60 (1531:4738 / 4966 / 5139)
   Баннер 1440×420 и сетка из трёх карточек 380×601. Числа — из документа.
   ========================================================================== */

.av-banner--plain {
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: 106px 120px 56px;
  text-align: center;
  background: linear-gradient(90deg, #38611C 0%, #598C26 50%, #4A7D2E 100%);
}
.av-banner--plain .av-banner__body { width: 1200px; }
.av-banner--plain .av-banner__title {
  gap: 0;
  font: 700 48px/57px Rubik, Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
}
.av-banner--plain .av-banner__title--big { font-size: 80px; line-height: 95px; }

/* Два круга-молекулы: 260 @-120,-80 под 18 % и 220 @1340,320 под 12 %.
   Размеры в процентах кадра 1440×420 — круги едут вместе с баннером. */
.av-banner__mol {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(135deg, #6BA626 0%, #40661A 100%);
  width: 18.0556%;
  aspect-ratio: 1;
  left: -8.3333%;
  top: -19.0476%;
  opacity: .18;
}
.av-banner__mol--small {
  width: 15.2778%;
  left: 93.0556%;
  top: 76.1905%;
  opacity: .12;
}

/* Крошки: «Каталог» Inter 500 18, промежуточные рубрики мельче и зелёные,
   текущая страница серая (Desktop - 60 и Desktop - 31/32/33). */
.av-crumbs a + .av-crumbs__sep + a { font: 600 13px/15px Rubik, Inter, sans-serif; }

/* ------------------------------------------------ Сетка карточек товара */

.av-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }

.av-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 16px 0;
  background: #FFFFFF;
  border: 1px solid #E8E7E3;
  border-radius: 28px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .04);
  text-align: center;
  overflow: hidden;
}
/* Фото 348×380 в поле 16 — держим пропорцию, а не жёсткую высоту. */
.av-card .av-card__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 348 / 380;
  border-radius: 12px;
  overflow: hidden;
  background: var(--av-green-pale);
}
.av-card .av-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.av-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 24px 8px 16px;
}
.av-card .av-card__title {
  margin: 0;
  font: 600 16px/19px Rubik, Inter, sans-serif;
  color: #111827;
}
.av-card .av-card__title a { color: inherit; text-decoration: none; }
.av-card .av-card__text {
  margin: 0;
  font: 400 13px/20px Rubik, Inter, sans-serif;
  color: #4D4D4D;
  /* В макете описание ограничено высотой блока — четыре строки по 20. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.av-card__more {
  display: grid;
  place-items: center;
  margin-top: auto;
  height: 50px;
  border: 2px solid var(--av-green);
  border-radius: 12px;
  font: 500 16px/19px Rubik, Inter, sans-serif;
  color: var(--av-green);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.av-card__more:hover { background: var(--av-green); color: #FFFFFF; }

@media (max-width: 1024px) {
  .av-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .av-banner--plain { padding: 72px 40px 48px; min-height: 320px; }
  .av-banner--plain .av-banner__title { font-size: 36px; line-height: 44px; }
  .av-banner--plain .av-banner__title--big { font-size: 54px; line-height: 62px; }
}
@media (max-width: 680px) {
  .av-grid { grid-template-columns: 1fr; }
  .av-banner--plain { padding: 56px 20px 40px; min-height: 240px; }
  .av-banner--plain .av-banner__title { font-size: 26px; line-height: 32px; }
  .av-banner--plain .av-banner__title--big { font-size: 34px; line-height: 40px; }
  .av-banner__mol { display: none; }
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА, ДОВОДКА ПО КАДРАМ Desktop - 31/32/33
   Фон страницы #F8FAFC, белые секции описания, животных и применения.
   ========================================================================== */

/* Характеристики: строка 788×31, подпись слева, значение справа, линия снизу. */
.av-specs { display: grid; gap: 12px; margin-top: 32px; width: 100%; }
.av-specs .av-specs__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 12px;
  border-bottom: 1px solid #E8E7E3;
}
.av-specs .av-specs__key { min-width: 0; font: 400 16px/19px Rubik, Inter, sans-serif; color: #4D4D4D; }
.av-specs .av-specs__val { margin: 0; font: 600 16px/19px Rubik, Inter, sans-serif; color: #111827; text-align: right; }

/* Преимущества: кружок 40 с градиентом #638B2C → #94C130 и белой иконкой. */
.av-benefit {
  border: 1px solid #E8E7E3;
  box-shadow: 0 4px 12px rgba(99, 139, 44, .03);
}
.av-benefit .av-benefit__icon {
  background: linear-gradient(135deg, #638B2C 0%, #94C130 100%);
  color: #FFFFFF;
}

/* Для каких животных: карточка 384×296, поле 32, заголовок с иконкой,
   список с точками 6 px. */
.av-animals__card { padding: 32px; }
.av-animals .av-animals__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font: 700 22px/26px Rubik, Inter, sans-serif;
  color: #111827;
}
.av-animals__icon { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--av-green); }
.av-animals__icon .av-ico { width: 20px; height: 20px; }
.av-animals .av-list { gap: 10px; }
.av-animals .av-list li { font: 400 15px/18px Rubik, Inter, sans-serif; }

/* Показания — точки 8 px, действие — галочки 18 px, строки 16/19. */
.av-sec .av-list li { padding-left: 20px; font: 400 16px/19px Rubik, Inter, sans-serif; color: #4D4D4D; }
.av-sec .av-list { gap: 16px; }
.av-sec .av-list li::before { top: 6px; width: 8px; height: 8px; border-radius: 4px; background: var(--av-green); }
.av-sec .av-list--check li::before {
  top: 2px; left: 2px;
  width: 6px; height: 11px;
  border-radius: 0;
  background: none;
  border: solid var(--av-green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.av-animals .av-list li::before { top: 6px; width: 6px; height: 6px; border-radius: 3px; }

/* Способ применения: подпись списка Rubik 600 16, пункты 15/18. */
.av-subhead { margin: 26px 0 12px; font: 600 16px/19px Rubik, Inter, sans-serif; color: #111827; }
.av-sec--split .av-col .av-subhead + .av-list li { font: 400 15px/18px Rubik, Inter, sans-serif; }
.av-sec--split .av-col .av-subhead + .av-list { gap: 12px; }
.av-sec--split .av-col .av-subhead + .av-list li::before { width: 6px; height: 6px; border-radius: 3px; top: 6px; }

/* Условия хранения: карточки 480×56 на #F0F4EA со скруглением 16. */
.av-storage { display: grid; gap: 16px; }
.av-storage .av-storage__item {
  min-height: 56px;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--av-green-pale);
  font: 500 16px/19px Rubik, Inter, sans-serif;
  color: #111827;
}
.av-storage .av-storage__icon {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 0;
  background: none;
  color: var(--av-green);
}
.av-storage .av-storage__icon .av-ico { width: 20px; height: 20px; }

/* --------------------------------- Полосы секций карточки товара */
/* Страница на #F8FAFC; описание, животные и применение — белые полосы
   во всю ширину окна. Контент остаётся в колонке 1200, поэтому фон
   растягивается тенью, а clip-path обрезает её сверху и снизу. */
body.single-catalog { background: #F8FAFC; }
body.av-cat-plain { background: #F8FAFC; }

.av-sec { padding: 80px 0; }
.av-sec--tight { padding: 60px 0; }
.av-sec--paper,
.av-sec--tint {
  position: relative;
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax var(--av-band);
}
.av-sec--paper { --av-band: #FFFFFF; background: var(--av-band); }
.av-sec--tint  { --av-band: #F8FAFC; background: var(--av-band); }
/* Линии над и под белой полосой описания — из кадра Desktop - 32. */
/*
 * Линии тянутся далеко за колонку 1200, поэтому обёртка карточки товара
 * подрезает их по ширине окна: overflow-x: clip не создаёт прокрутку
 * и, в отличие от hidden, не ломает липкие элементы внутри.
 */
#av-product-body { overflow-x: clip; }

.av-sec--paper.av-sec--tight::before,
.av-sec--paper.av-sec--tight::after {
  content: "";
  position: absolute;
  left: -100vmax; right: -100vmax;
  height: 1px;
  background: #E8E7E3;
}
.av-sec--paper.av-sec--tight::before { top: 0; }
.av-sec--paper.av-sec--tight::after  { bottom: 0; }

/* Колонки: описание 672 + состав 480 при зазоре 48;
   показания и действие — поровну 576 + 576. */
.av-sec--split { grid-template-columns: 672fr 480fr; gap: 48px; }
.av-sec--tint.av-sec--split { grid-template-columns: 1fr 1fr; }

@media (max-width: 1024px) {
  .av-sec { padding: 56px 0; }
  .av-sec--tight { padding: 40px 0; }
  .av-sec--split,
  .av-sec--tint.av-sec--split { grid-template-columns: 1fr; gap: 32px; }
}

/* Крошки страницы раздела крупнее, чем в карточке товара: Inter 18/22,
   текущая страница светло-серая (Desktop - 58/59/60 против Desktop - 31). */
body.av-cat-plain .av-crumbs { font: 500 18px/22px Inter, Rubik, sans-serif; }
body.av-cat-plain .av-crumbs a { color: #739940; }
body.av-cat-plain .av-crumbs [aria-current] { color: #BFBFBF; }

/* Пилюля раздела над заголовком товара: Rubik 600 13/15, поля 6/14,
   без капса — в кадрах Desktop - 31/32/33 она набрана обычными буквами. */
.av-product-head .av-tag {
  height: 27px;
  padding: 6px 14px;
  font: 600 13px/15px Rubik, Inter, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

/* Ссылка «Назад к новостям» над заголовком статьи — Back Button 148×17
   кадра 1450:5255: стрелка 16 и надпись Inter 600 14/17. */
.av-post-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 14px/17px Inter, Rubik, sans-serif;
  color: #4A7C2E;
  text-decoration: none;
}
.av-post-back:hover { text-decoration: underline; }
.av-post-back__icon { width: 16px; height: 16px; flex: none; }

/* ==========================================================================
   Телефон: плотные отступы (≤ 767)

   Макет нарисован для 1440: поля секций 80–120, промежутки между блоками
   24–96, внутренние поля карточек 28–36. На экране 390 это читалось как
   дыры — половину высоты страницы занимала пустота, а колонка текста
   сжималась. Поля и промежутки самих секций Elementor сведены к 12/24
   скриптом tools/mobile-padding.php; здесь — то же самое для блоков,
   свёрстанных в теме, и для промежутка по умолчанию.

   Правило одно на все страницы: боковые поля 12, внутренние поля карточек
   14–16, промежутки 12. Кнопки и пункты меню не трогаем — их поля держат
   размер пальца, а не ритм макета.
   ========================================================================== */

@media (max-width: 767px) {

  /* Промежуток между виджетами внутри контейнера. По умолчанию набор
     Elementor даёт 20 — это и есть «междустрочные» дыры в стопке блоков. */
  body .elementor-element {
    --widgets-spacing: 12px 12px;
    --widgets-spacing-row: 12px;
    --widgets-spacing-column: 12px;
  }

  /* --- Боковые поля секций: 12 вместо 20 --- */
  #av-about,
  #av-about-cats,
  #av-about-text,
  #av-partners-text,
  #av-home-bento,
  #av-home-partners,
  #av-home-how,
  #av-home-reviews,
  #av-contacts-hero,
  #av-career-banner,
  #av-news-banner {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* --- Баннеры: вертикальные поля --- */
  #av-home-hero,
  #av-catalog-hero { gap: 12px; padding: 12px 12px 16px; }
  #av-page-hero,
  #av-partners-hero { padding: 16px 0 20px; }
  #av-contacts-hero { padding-top: 24px; padding-bottom: 24px; }
  /* Верхнее поле у этой шапки задаёт правило под висящую шапку ниже. */
  #av-news-banner { padding-bottom: 24px !important; }
  #av-how, #av-hero { padding-left: 12px; padding-right: 12px; }

  /* --- Главная --- */
  .av-adv { padding: 16px 12px; gap: 12px; }
  .av-adv__card { padding: 14px; }
  .av-adv__track { gap: 12px; }
  .av-hero-promise { padding: 14px 16px; }
  .av-bento { padding: 12px; gap: 12px; }
  .av-bento__row { gap: 12px; }
  .av-bento__cell--brand,
  .av-bento__cell--quality { padding: 16px 14px; gap: 10px; }
  .av-hww { padding: 20px 12px 24px; gap: 16px; }
  .av-hww__head { gap: 10px; }
  .av-steps { gap: 14px 12px; }
  .av-step__circle { margin-bottom: 12px; }
  .av-reviews { gap: 12px; }
  /* Верхнее поле держит аватар, выходящий за карточку, — его не трогаем. */
  .av-review__body { padding: 76px 14px 18px; gap: 12px; }

  /* --- О нас, каталог, партнёры --- */
  .av-intro__card { padding: 16px; }
  .av-value,
  .av-feat,
  .av-stat,
  .av-ctacard,
  .av-benefit,
  .av-animals__card { padding: 16px 14px; gap: 10px; }
  .av-values,
  .av-cats,
  .av-cat-cards,
  .av-stats,
  .av-feats,
  .av-feats__row,
  .av-benefits,
  .av-animals,
  .av-cta,
  .av-partners { gap: 12px; }
  .av-cat-card { padding: 10px 10px 14px; }
  .av-cat__label { padding: 12px 14px 14px; }

  /* --- Новости, карьера, контакты --- */
  .av-news-grid { gap: 12px; }
  .av-news-card__body { gap: 8px; padding: 12px 14px 14px; }
  .av-news-empty { padding: 28px 14px; }
  .av-vac,
  .av-vac-head,
  .av-vac__side { gap: 16px; }
  .av-vac-card,
  .av-vac-note { padding: 14px 16px; }
  .av-line__item,
  .av-vac-exp__item { padding: 12px 14px; }
  .av-vacancy { padding: 14px 16px; }
  .av-contacts__info { gap: 12px; }
  .av-contacts__grid { gap: 12px; }
  .av-contacts__social { padding-top: 14px; }
  /* Высота карточки из макета (112) на телефоне оставляла пустую половину. */
  .av-ccard { min-height: 0; padding: 14px; gap: 12px; }
  .av-map__card { padding: 16px; }
  .av-footbar { padding: 16px 12px; }
  .av-footbar__socials { gap: 12px; }

  /* Высоты карточек из макета (219–366) на телефоне держали пустоту:
     текста в колонке 342 меньше, чем в колонке 411. Ряды всё равно
     выравниваются по самой высокой карточке. */
  .av-adv__card,
  .av-feat,
  .av-stat,
  .av-value,
  .av-benefit,
  .av-vacancy,
  .av-animals__card { min-height: 0; }

  /* --- Карточка товара, раздел каталога, вакансия --- */
  .av-sec { padding-top: 20px; padding-bottom: 20px; gap: 16px; }
  .av-specs .av-specs__row { gap: 12px; }
  .av-banner--plain { padding: 24px 12px; }
  .av-grid { gap: 12px; }
  .av-card__body { padding: 14px 10px 12px; }
  .av-vac { padding-top: 16px; }
  .av-vac-head__row { gap: 12px; }
  .av-vac-cta { padding: 20px 14px; }
  .av-vac-foot { padding: 20px 0; gap: 12px; }
  .av-vac-foot__right { gap: 12px; }
  .av-aside { gap: 12px; }

  /* --- Выехавшее меню --- */
  .av-drawer__panel { padding: 16px 16px 20px; }
  .av-drawer__list { margin-top: 12px; }
  .av-drawer__foot { padding-top: 14px; gap: 10px; }
}

/* ==========================================================================
   Баннер главной ниже десктопа: окно на медальоне

   Кадр героя — 1440×842, медальон с петухом занимает в нём треть ширины.
   Ниже 1024 заголовок и обещание бренда уходят из кадра в поток (правило
   выше), и от сцены остаётся декоративная лента: на планшете медальон
   выходил 255 px, на телефоне 116, а рядом висел пустой зелёный круг —
   тот, в котором на десктопе лежит обещание.

   Поэтому кадр не сжимается целиком, а показывается в окно, наведённое
   на медальон. Арифметика одна на обе ширины, меняются только числа
   (W — ширина колонки, Z — во сколько раз сцена шире неё):

     высота сцены       = Z × 842/1440 = Z × 0,5847 W
     центр медальона    = 71,04 % ширины кадра и 59,26 % его высоты
     сдвиг влево        = 0,5 W − 0,7104 × Z × W
     гребень петуха     = 15,64 % высоты сцены — выше него верх окна
   ========================================================================== */

@media (max-width: 1024px) {
  /* Z = 1,25: медальон 318 px на планшете 768. Окно 58 % ширины колонки. */
  #av-home-hero .av-stage-widget {
    width: 100%;
    margin-inline: 0;
    padding-top: 58%;
    overflow: hidden;
  }

  #av-home-hero .av-stage {
    inset: auto;
    left: -38.8%;
    top: -14.53%;
    width: 125%;
    height: auto;
    aspect-ratio: 1440 / 842;
  }

  /* Обещание бренда здесь уже плашка под баннером — круг под него пустой. */
  #av-home-hero .av-stage__layer--promise-disc { display: none; }
}

@media (max-width: 560px) {
  /* Z = 2,17: медальон 253 px на экране 375. Окно квадратное. */
  #av-home-hero .av-stage-widget { padding-top: 100%; }

  #av-home-hero .av-stage {
    left: -104.16%;
    top: -17%;
    width: 217%;
  }

  .av-hero-promise { font-size: 17px; line-height: 24px; }
  .av-hero-h1__a { font-size: 26px; line-height: 32px; }
  .av-hero-h1__b { font-size: 23px; line-height: 29px; }
  .av-hero-h1__c { font-size: 25px; line-height: 31px; }
}

/* ==========================================================================
   Телефон: кегли и межстрочный интервал (≤ 767)

   Макет нарисован для 1440, и высота строки записана в нём пикселями:
   заголовок 44/57, текст 16/26. На телефоне кегль уменьшался правилами
   выше, а высота строки оставалась десктопной — 22 px текста жили в строке
   высотой 57. Это и были «междустрочные дыры»: они съедали больше места,
   чем поля секций.

   Здесь высота строки задана отношением, а не пикселями, поэтому держится
   за кеглем. Сами кегли сведены к пяти ступеням: 23 — заголовок секции,
   18 — название карточки, 15 — заголовок внутри карточки, 14 — текст,
   12 — подписи. Кнопки, меню и поля формы не трогаем: их размер держит
   палец, а не ритм макета.
   ========================================================================== */

@media (max-width: 767px) {

  /*
   * Заголовки и текст Elementor. Перебиваем с !important: величина лежит
   * в самой странице, и Elementor печатает её селектором из трёх классов.
   */
  .elementor-widget-heading .elementor-heading-title { line-height: 1.24 !important; }
  .elementor-widget-text-editor,
  .elementor-widget-text-editor p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* --- Заголовки секций --- */
  .av-adv__title,
  .av-hww__title,
  .av-h2,
  .av-ctacard__title,
  .av-contacts__title,
  .av-linepage__title,
  .av-lines__title,
  .av-vac-title,
  .av-vac-cta__title,
  .av-news-empty__title,
  .av-bento__sub { font-size: 23px; line-height: 29px; }

  .av-bento__head { font-size: 21px; line-height: 27px; }
  .av-banner__title,
  .av-stat__value { font-size: 30px; line-height: 36px; }

  /* --- Названия карточек --- */
  .av-adv__name,
  .av-review__name,
  .av-value__title,
  .av-feat__title,
  .av-animals__title,
  .av-cats__title,
  .av-linepage__h3,
  .av-map__name,
  .av-vacancies__empty-title { font-size: 18px; line-height: 23px; }

  /* --- Заголовки внутри карточек --- */
  .av-card__title,
  .av-cat-card__title,
  .av-cat__label,
  .av-news-card__title,
  .av-line__title,
  .av-line__name,
  .av-vac-card__title,
  .av-vac-note__title,
  .av-vacancy__title,
  .av-step__title,
  .av-benefit__title,
  .av-subhead,
  .av-contacts__social-label,
  .av-vac-foot__brand { font-size: 15px; line-height: 20px; }

  /* --- Текст --- */
  .av-prose,
  .av-list,
  .av-intro__card p,
  .av-hww__desc,
  .av-review__text,
  .av-review__role,
  .av-adv__text,
  .av-value__desc,
  .av-feat__text,
  .av-linepage__text,
  .av-linepage__sub,
  .av-post-lead,
  .av-ctacard__desc,
  .av-banner__text,
  .av-contacts__sub,
  .av-line__desc,
  .av-step__desc,
  .av-stat__label,
  .av-table td,
  .av-specs__row,
  .av-specs .av-specs__key,
  .av-specs .av-specs__val,
  .av-params__row dt,
  .av-params__row dd,
  .av-cta__text,
  .av-bento__foot,
  .av-animals__other,
  .av-aside__value,
  .av-chip__value,
  .av-vac-exp__value,
  .av-ccard__label { font-size: 14px; line-height: 20px; }

  /* --- Подписи --- */
  .av-crumbs,
  .av-post-meta__date,
  .av-aside__label,
  .av-aside__back,
  .av-vac-contact__value,
  .av-ccard__value,
  .av-footbar__copy,
  .av-partners__name,
  .av-social-label,
  .av-vac-foot__copy,
  .av-price__label { font-size: 12px; line-height: 16px; }

  /* Строка списка держала высоту 31 из макета — при кегле 14 это дыра. */
  .av-specs .av-specs__row { min-height: 0; }

  /* Поля внутри карточек под уменьшенный кегль. */
  .av-adv__card,
  .av-value,
  .av-feat,
  .av-stat,
  .av-ctacard,
  .av-benefit,
  .av-animals__card,
  .av-intro__card,
  .av-map__card { padding: 14px 12px; }
  .av-card__body,
  .av-news-card__body,
  .av-cat__label { padding: 12px; }
  .av-review__body { padding: 72px 12px 16px; }
  .av-animals__other { padding: 14px 12px; }

  /* Высоты из макета, под которые на телефоне уже нет текста: зелёные
     плашки бенто держали 275, подпись плитки каталога — 124, шапка
     раздела — 240. Ряд всё равно выравнивается по самой высокой карточке. */
  .av-bento__cell--brand,
  .av-bento__cell--quality,
  .av-cat__label,
  .av-animals__other,
  .av-banner--plain { min-height: 0; }
}

/* ==========================================================================
   Баннеры страниц ниже десктопа: окно на снимке

   Та же арифметика, что у баннера главной. Ниже 1024 заголовок и текст
   уходят из кадра в поток, и от сцены остаётся лента: снимок в ней
   сжимался до трети экрана, прижимался к правому краю и обрезался, а слева
   пустовало. Теперь сцена шире колонки в Z раз и сдвинута так, чтобы
   зелёный круг со снимком занял ленту целиком.

     высота сцены = Z × 842/1440 = Z × 0,5847 W
     сдвиг влево  = 0,5 W − (центр снимка в долях кадра) × Z × W
     верх окна    = выше снимка на 0,02…0,04 W

   Ступени две, потому что окно растёт вместе с шириной колонки: на
   планшете сильное увеличение дало бы ленту почти в экран высотой.
   До 1024 — Z = 1,25, на телефоне (до 560) — своё Z, чтобы снимок занял
   всю ширину.

   | Баннер   | Круг в кадре | Снимок       | Z телефона |
   |----------|--------------|--------------|------------|
   | Партнёры | 920 @571,211 | 750 @687,49  | 1,82       |
   | О нас    | 811 @612,413 | 669 @653,187 | 1,95       |
   | Каталог  | 811 @612,419 | 597 @717,124 | 2,10       |

   У каталога сдвиг меньше расчётного: снимок там по просьбе стоит справа,
   а круг всё равно доходит до обоих краёв.
   ========================================================================== */

@media (max-width: 1024px) {
  #av-partners-hero .av-stage-widget,
  #av-page-hero .av-stage-widget,
  #av-catalog-hero .av-stage-widget {
    width: 100%;
    margin-inline: 0;
    overflow: hidden;
  }

  #av-partners-hero .av-stage,
  #av-page-hero .av-stage,
  #av-catalog-hero .av-stage {
    inset: auto;
    height: auto;
    width: 125%;
    aspect-ratio: 1440 / 842;
  }

  #av-partners-hero .av-stage-widget { padding-top: 70%; }
  #av-partners-hero .av-stage { left: -42.2%; top: -2.9%; }

  #av-page-hero .av-stage-widget { padding-top: 62%; }
  #av-page-hero .av-stage { left: -35.7%; top: -22.6%; }

  #av-catalog-hero .av-stage-widget { padding-top: 66%; }
  #av-catalog-hero .av-stage { left: -33%; top: -11.4%; }
}

@media (max-width: 560px) {
  #av-partners-hero .av-stage-widget { padding-top: 102%; }
  #av-partners-hero .av-stage { left: -84.2%; top: -4%; width: 182%; }

  #av-page-hero .av-stage-widget { padding-top: 92%; }
  #av-page-hero .av-stage { left: -83.7%; top: -24.26%; width: 195%; }

  /* Снимок доведён до правого края: Z = 2,10 — меньшее увеличение
     оставляло справа пустое поле либо уводило круг от левого края. */
  #av-catalog-hero .av-stage-widget { padding-top: 99%; }
  #av-catalog-hero .av-stage { left: -91.6%; top: -24.4%; width: 210%; }
}

/* ==========================================================================
   Телефон: карточки по центру, подвал в столбик, шапка на месте

   Разбор замечаний по мобильной версии. Всё ниже 767, если не сказано иначе.
   ========================================================================== */

@media (max-width: 767px) {

  /* --- Шапка висит над страницей и не уезжает при прокрутке ---
     Прилипает обёртка шаблона, а не #av-header: sticky держится в пределах
     родителя, а родителем у #av-header как раз обёртка высотой в саму шапку —
     так она уезжала сразу же.

     Высота обёртки нулевая, фон прозрачный: полоса ложится поверх первой
     секции, а не занимает своё место в потоке. Поэтому баннеры ниже
     получают верхнее поле 116 — под ним и стоит полоса. */
  body > .elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 90;
    height: 0;
    background: #FFFFFF00;
  }

  #av-header { padding: 12px 12px 0 12px; }
  /* Поле контейнера шапки складывалось с полем самой полосы. */
  #av-header > .e-con-inner { padding: 0; }

  /* --- Подписи плиток каталога: 60 в высоту, надпись по центру --- */
  .av-cat__label {
    min-height: 60px;
    justify-content: center;
    text-align: center;
    padding: 12px 14px;
  }

  /* --- Остальные карточки: надпись по центру, высоты не трогаем --- */
  .av-cat-card,
  .av-card__body,
  .av-news-card__body,
  .av-value,
  .av-feat,
  .av-stat,
  .av-benefit,
  .av-adv__card,
  .av-step,
  .av-vacancy { text-align: center; }

  /* Иконка и заголовок в колонке выравниваются отдельно от текста. */
  .av-value,
  .av-value__text,
  .av-benefit,
  .av-feat,
  .av-stat,
  .av-step { align-items: center; }

  /* --- «О нас»: текст под снимком, а не поверх него ---
     На десктопе плашка лежит на фотографии, и отрицательное поле −60
     поднимало её под снимок; на телефоне первая строка уходила за край. */
  .av-intro__card {
    margin-top: 12px;
    margin-inline: 0;
    padding: 16px 14px;
  }

  /* --- Подвал: верх в столбик слева, низ по центру в две строки --- */
  #av-footer-top,
  #av-footer-top > .e-con-inner { align-items: flex-start; text-align: left; }
  #av-footer-nav .elementor-nav-menu {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2px;
  }
  /* В горизонтальной раскладке Elementor разводит пункты боковыми полями
     у всех, кроме первого; в столбик это читалось как ступенька. */
  #av-footer-nav .elementor-item { padding-left: 0 !important; padding-right: 0 !important; }
  #av-footer-nav .elementor-nav-menu > li > a { margin-left: 0 !important; margin-right: 0 !important; }
  #av-footer-bottom,
  #av-footer-bottom > .e-con-inner { align-items: center; text-align: center; gap: 10px; }
  #av-footer-bottom .elementor-social-icons-wrapper { justify-content: center; }

  /* --- Кнопки чуть мельче: кегль 14, поля 12/22, палец держит 44 --- */
  .av-btn,
  .av-cta__btn,
  .av-ctacard__btn,
  .av-map__btn {
    height: auto;
    min-height: 44px;
    padding: 12px 22px;
    font-size: 14px;
  }
  /* У кнопок Elementor размеры лежат в самой странице — иначе не перебить. */
  .elementor-button {
    min-height: 44px !important;
    padding: 12px 22px !important;
    font-size: 14px !important;
  }

  /* --- Зелёные баннеры разделов: воздуха сверху и снизу --- */
  .av-banner--plain { padding: 70px 12px; }

  /* --- Хлебные крошки: 12 было мелко --- */
  body .av-crumbs,
  body.av-cat-plain .av-crumbs,
  body .av-crumbs a + .av-crumbs__sep + a { font-size: 14px; line-height: 20px; }

  /* --- Состав: рамка скругляется мягче --- */
  .av-table { border-radius: 8px; }
}

/* ==========================================================================
   Карта проезда: настоящая карта вместо картинки

   Подложкой была картинка из макета — считалось, что встраивания
   недоступны из-за WP_HTTP_BLOCK_EXTERNAL. Константа закрывает исходящие
   запросы PHP, а кадр карты грузит браузер посетителя, так что теперь
   здесь встраивание OpenStreetMap с меткой (includes/contacts-render.php).

   Окно кадра на 24 px ниже самого кадра: внизу OpenStreetMap держит
   полосу с авторами и призывом «Сделать пожертвование». Полоса уезжает
   за край окна, а подпись об авторах — обязательная по лицензии ODbL —
   стоит своей строкой под картой.
   ========================================================================== */

.av-map { position: relative; z-index: 0; }
.av-map__card { z-index: 2; }

.av-map__canvas {
  position: relative;
  overflow: hidden;
  height: 480px;
}
.av-map__frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* Полоса OpenStreetMap — 20 px; 24 берём с запасом на крупный шрифт. */
  height: calc(100% + 24px);
  border: 0;
}

.av-map__credit {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .82);
  font: 400 11px/14px Rubik, Inter, sans-serif;
  color: #4A5568;
  text-decoration: none;
}
.av-map__credit:hover { color: #3B531A; }

@media (max-width: 1024px) {
  .av-map__canvas { height: 420px; }
  /* Карточка уходит из-под кадра в поток — иначе она закрывала пол-карты. */
  .av-map__card { position: static; width: auto; margin: -60px 20px 0; }
  .av-map__credit { bottom: auto; top: 10px; }
}

@media (max-width: 767px) {
  .av-map__canvas { height: 360px; }
  .av-map__card { margin: -48px 12px 0; }
}

/* ==========================================================================
   Правки по замечаниям: вакансия, карьера, контакты

   Размеры и цвета — в теме, а не в данных страницы: страницу собирают
   скрипты build-*.php, и перезапуск любого из них стёр бы правку.
   ========================================================================== */

/*
 * Почта в призыве вакансии. Ссылка наследовала зелёный цвет темы и на
 * зелёной плашке пропадала совсем — её просто не было видно.
 */
.av-vac-cta__text a {
  color: #E4FFBE;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.av-vac-cta__text a:hover { color: #FFFFFF; }

/*
 * У страницы вакансии нет подвала Elementor, и вместо него снизу
 * вылезал подвал родительской темы — описание сайта и «All rights
 * reserved». Своя строка av-vac-foot уже говорит всё нужное.
 */
body.single-vacancy .site-footer { display: none; }

/*
 * Подпись в зелёной шапке «Контактов» была #9AA5B1 — серое по зелёному
 * почти не читалось.
 */
#av-contacts-hero .elementor-widget-text-editor,
#av-contacts-hero .elementor-widget-text-editor p {
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  /* Карточка каталога: низ прижимался к рамке — поля были 16/16/0. */
  .av-card { padding-bottom: 16px; }

  /*
   * Первая секция страницы уходит под висящую полосу шапки, поэтому
   * получает верхнее поле 116 — ровно под неё. Фон секции при этом
   * доходит до верха окна, и полоса лежит на нём, а не на белой дыре.
   */
  #av-home-hero,
  #av-page-hero,
  #av-catalog-hero,
  #av-partners-hero,
  #av-contacts-hero,
  #av-career-banner,
  #av-news-banner,
  #av-post,
  .av-banner--plain,
  .elementor-location-single > .e-con:first-child,
  .elementor-location-archive > .e-con:first-child {
    padding-top: 116px;
  }

  /* У шапки новостей поле стояло с !important — перебиваем тем же. */
  #av-news-banner { padding-top: 116px !important; }

  /* Шапка «Карьеры» занимала пол-экрана под двумя строками текста.
     Высота с полем под полосу: 116 сверху + 192 на сам баннер. */
  #av-career-banner {
    height: 308px;
    min-height: 308px !important;
    max-height: 308px;
    padding-bottom: 16px;
  }
}

/* ==========================================================================
   Форма обратной связи и строка соцсетей
   ========================================================================== */

/* Кнопка ждёт согласия с политикой (assets/js/form.js). */
.elementor-form .elementor-button[disabled],
.elementor-form .av-btn--locked {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.35);
}

@media (max-width: 560px) {
  /* «Соц. сети:» и значки стоят в строку, как на десктопе: в столбик
     подпись висела сама по себе и занимала лишнюю строку. */
  .av-contacts__social {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  .av-contacts__social-row { flex-wrap: wrap; }
}