/* ============================================================
 * may.css — единый файл наших стилей для проекта konsulagro.by
 *
 * Содержит:
 *   1. Дизайн-токены (CSS-переменные --may-*)
 *   2. Универсальные блоки (.may-hero, .may-content, .may-services,
 *      .may-solutions, .may-additives, .may-cta)
 *   3. Адаптив для всех блоков
 *
 * На любой новой странице подключаем ТОЛЬКО этот файл (после легаси).
 * Все классы — с префиксом .may- чтобы не задеть легаси.
 * Подробности — design.md и docs/summary_session/*.md.
 * ============================================================ */

/* ============================================================
 * 1. ТОКЕНЫ
 * ============================================================ */
:root {
    /* --- цвета: бренд (как в исходнике 2024-style.css) --- */
    --green:        #295B18;
    --dark-green:   #295B18;
    --light-green:  #A5CD39;

    /* --- цвета: серая шкала (как в исходнике) --- */
    --gray-50:   #F1F1F1;
    --gray-100:  #BCBABA;
    --gray-150:  #CACACA;
    --gray-200:  #5B5B5B;
    --gray-300:  #555;
    --black-0:   #000;

    /* --- may-токены: цвета --- */
    --may-color-bg:           #FFFFFF;
    --may-color-bg-alt:       var(--gray-50);
    --may-color-bg-dark:      var(--green);
    --may-color-bg-accent:    var(--light-green);
    --may-color-text:         var(--gray-200);
    --may-color-text-strong:  #000;
    --may-color-text-on-dark: #FFFFFF;
    --may-color-text-muted:   var(--gray-100);
    --may-color-accent:       var(--light-green);
    --may-color-accent-hover: #aec90d;
    --may-color-border:       #C0BFBF;
    --may-color-overlay:      rgba(0, 0, 0, 0.6);
    --may-color-overlay-soft: rgba(0, 0, 0, 0.1);

    /* --- may-токены: типографика --- */
    --may-font-display: "GetVoIP Grotesque", "Verdana", sans-serif;
    --may-font-body:    "Verdana", sans-serif;

    --may-fs-hero:   64px;
    --may-fs-h2:     48px;
    --may-fs-h3:     35px;
    --may-fs-lead:   28px;
    --may-fs-body:   24px;
    --may-fs-text:   18px;
    --may-fs-small:  16px;
    --may-fs-micro:  14px;

    --may-lh-tight:  1.0;
    --may-lh-snug:   1.2;
    --may-lh-base:   1.25;
    --may-lh-text:   1.4;

    --may-fw-regular: 400;
    --may-fw-bold:    700;

    /* --- may-токены: раскладка --- */
    --may-container:        1230px;
    --may-container-pad-x:  15px;

    /* --- may-токены: отступы (вертикальный ритм) --- */
    --may-space-1:  10px;
    --may-space-2:  20px;
    --may-space-3:  30px;
    --may-space-4:  40px;
    --may-space-6:  60px;
    --may-space-8:  85px;
    --may-space-10: 100px;
    --may-space-12: 120px;
    --may-space-15: 150px;

    /* --- may-токены: радиусы --- */
    --may-radius-sm:     4px;
    --may-radius-md:     6px;
    --may-radius-lg:     23px;   /* кнопки */
    --may-radius-xl:     25px;   /* карточки/панели */
    --may-radius-pill:   999px;
    --may-radius-circle: 50%;

    /* --- may-токены: тени --- */
    --may-shadow-card: 0 4px 15px rgba(0, 0, 0, 0.1);

    /* --- may-токены: переходы --- */
    --may-transition-fast: 0.2s ease;
    --may-transition-base: 0.3s ease;
    --may-transition-slow: 0.5s ease;

    /* --- may-токены: дополнительные цвета (для product-hero) --- */
    --may-color-cream: #E8D5A8;

    /* --- may-токены: шкала зелёных оттенков для .may-schedule --- */
    --may-schedule-v1: #E5EFD0;
    --may-schedule-v2: #C8E08C;
    --may-schedule-v3: #A5CD39;
    --may-schedule-v4: #7AA22A;
    --may-schedule-v5: #4F761B;
}

/* Брейкпоинты-справочник (CSS-переменные в media-queries не работают):
 *   max-width: 1500px  — ужимаем hero
 *   max-width: 1200px  — табличный лейаут
 *   max-width:  992px  — планшет
 *   max-width:  768px  — мобила-большая
 *   max-width:  510px  — мобила-мелкая
 */

/* ============================================================
 * 2. БЛОКИ
 * ============================================================ */

/* Шапка — поверх .may-hero. Легаси даёт .header { position: absolute;
   z-index: auto }, но наш .may-hero (тоже позиционирован, идёт после
   .header в DOM) рисуется поверх неё и логотип/меню становятся не видны.
   Поднимаем .header в положительный слой, чтобы она оставалась сверху. */
.header {
    z-index: 10;
}

/* ---------- HERO ----------
 * Высокий хиро с фоновой фотографией (аналог .main/.about на проде).
 * Заголовок прижат к нижней части. Без затемнения по умолчанию.
 *
 * Картинку задаёт сама страница через inline-style:
 *   <section class="may-hero" style="background-image:url('...')">
 * Так блок остаётся универсальным.
 */
.may-hero {
    position: relative;
    min-height: 900px;
    padding-top: 350px;
    padding-bottom: 120px;
    display: flex;
    align-items: flex-end;
    color: #fff;

    background-color: #2d4f1a;  /* fallback */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Затемнение верха — чтобы белая шапка-оверлей (.header) читалась
   на любой hero-фотке. Градиент уходит в прозрачность к середине,
   сама фотография в нижней половине остаётся без затемнения. */
.may-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.45) 280px,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0) 60%
    );
    pointer-events: none;
}

.may-hero__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
    width: 100%;
    position: relative;
    z-index: 1;
}

.may-hero__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-hero);
    line-height: var(--may-lh-tight);
    text-transform: uppercase;
    margin: 0;
}

/* ---------- CONTENT (текстовое введение) ---------- */
.may-content {
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-15);
    background: var(--may-color-bg);
    color: var(--may-color-text);
}

.may-content__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-content__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-6) 0;
}

.may-content__lead {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-body);
    line-height: var(--may-lh-snug);
    color: var(--may-color-text);
    margin: 0 0 var(--may-space-4) 0;
}

.may-content__text {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-text);
    line-height: 1.55;
    color: var(--may-color-text);
    margin: 0 0 var(--may-space-3) 0;
}

/* ---------- SERVICES (сетка иконочных карточек) ----------
 * Белый фон, 3 колонки, без рамок и ховер-эффектов.
 * Иконка в салатовом круге, под ней название и описание.
 */
.may-services {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-15);
}

.may-services__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-services__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-8) 0;
}

.may-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 56px;
}

.may-services__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.may-services__icon {
    width: 64px;
    height: 64px;
    border-radius: var(--may-radius-circle);
    background: var(--may-color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.may-services__icon svg {
    width: 30px;
    height: 30px;
    display: block;
}

.may-services__name {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 22px;
    line-height: 1.25;
    color: var(--may-color-text-strong);
    margin: 0 0 12px 0;
}

.may-services__name i {
    font-style: italic;
}

.may-services__desc {
    font-family: var(--may-font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--may-color-text);
    margin: 0;
}

/* ---------- SOLUTIONS (проблема → решение, frosted на салатовом) ----------
 * Салатовый фон секции (как .mission/.advantages на проде).
 * Карточки полупрозрачные белые («frosted»). Заголовок и интро — белым.
 * Внутри карточки: иконка в тёмно-зелёном круге, название, два абзаца
 * (проблема приглушённым белым с тонкой полоской, решение — ярким белым
 * жирным с плотной белой полоской).
 */
.may-solutions {
    background: var(--may-color-bg-accent);
    color: #fff;
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-15);
}

.may-solutions__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-solutions__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: #fff;
    margin: 0 0 16px 0;
}

.may-solutions__intro {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-body);
    line-height: var(--may-lh-snug);
    color: #fff;
    margin: 0 0 var(--may-space-6) 0;
    max-width: 720px;
}

.may-solutions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.may-solutions__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 36px 30px 32px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--may-radius-xl);
}

.may-solutions__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--may-radius-circle);
    background: #fff;
    color: var(--may-color-bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.may-solutions__icon svg {
    width: 36px;
    height: 36px;
    display: block;
}

.may-solutions__name {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 24px;
    line-height: 1.25;
    color: #fff;
    margin: 0 0 18px 0;
}

.may-solutions__problem {
    font-family: var(--may-font-body);
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 14px 0;
    padding-left: 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.4);
}

.may-solutions__answer {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    padding-left: 14px;
    border-left: 2px solid #fff;
}

/* ---------- ADDITIVES (split-layout: фото + нумерованный список) ----------
 * Слева одна крупная иллюстрация (обрезается в скруглённый прямоугольник).
 * Справа заголовок + нумерованный список 01/02/03 с описаниями.
 * На ≤992px колонки складываются: картинка над списком.
 */
.may-additives {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-15);
}

.may-additives__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-additives__layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 80px;
    align-items: start;
}

.may-additives__media {
    aspect-ratio: 4 / 5;
    border-radius: var(--may-radius-xl);
    overflow: hidden;
    background: #E0DFDB;
}

.may-additives__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.may-additives__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 40px;
    line-height: var(--may-lh-snug);
    color: var(--may-color-bg-dark);
    margin: 0 0 var(--may-space-6) 0;
}

.may-additives__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.may-additives__item {
    display: grid;
    grid-template-columns: 100px 1fr;
    column-gap: 28px;
    padding-block: 28px;
}

.may-additives__item:first-child { padding-top: 0; }
.may-additives__item:last-child  { padding-bottom: 0; }

.may-additives__num {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 64px;
    line-height: 1;
    color: var(--may-color-accent);
    align-self: start;
}

.may-additives__body {
    display: flex;
    flex-direction: column;
}

.may-additives__name {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 24px;
    line-height: 1.2;
    color: var(--may-color-text-strong);
    margin: 0 0 12px 0;
}

.may-additives__desc {
    font-family: var(--may-font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--may-color-text);
    margin: 0;
}

/* ---------- PRODUCTS (сетка карточек-пачек с фото) ----------
 * Белый фон секции. 4 колонки на десктопе. Каждая карточка —
 * белая «коробочка» с тонкой рамкой: сверху квадратное фото-окошко,
 * снизу крупная жирная подпись по центру. Без ховера.
 */
.may-products {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-15);
}

.may-products__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-products__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-8) 0;
}

.may-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
    row-gap: 30px;
}

.may-products__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    background: #fff;
    border: 1px solid var(--gray-150, #CACACA);
    border-radius: var(--may-radius-md, 6px);
    padding: 36px 24px 32px;
    /* карточка-ссылка: убираем дефолтные стили <a>  */
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.may-products__card:hover {
    border-color: var(--may-color-accent);
}

.may-products__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 28px;
}

.may-products__media img {
    max-width: 75%;
    max-height: 95%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.may-products__name {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 22px;
    line-height: 1.3;
    color: var(--may-color-text-strong);
    margin: 0;
}

/* ---------- CTA (текстовый призыв перед подвалом) ----------
 * Один абзац выровнен по ширине с акцентной ссылкой.
 * Намеренно без рамок/фонов — мостик между контентом и подвалом.
 */
.may-cta {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-10);
    padding-bottom: var(--may-space-10);
}

.may-cta__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-cta__text {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-body);
    line-height: 1.5;
    color: var(--may-color-text);
    text-align: justify;
    margin: 0;
}

.may-cta__link {
    color: var(--may-color-bg-dark);
    font-weight: var(--may-fw-bold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.may-cta__link:hover {
    color: var(--may-color-accent);
}

/* ---------- PRODUCT HERO (split: cream panel + photo) ----------
 * Двухколоночный хиро под продуктовые страницы.
 * Слева — текстовая «полка» с заголовком-брендом и слоганом на сено-кремовом
 * фоне; справа — фото продукта/применения.
 * Шапка (.header) рисуется поверх как абсолютная (как у .may-hero).
 */
.may-product-hero {
    position: relative;
    background: var(--may-color-cream);
    color: var(--may-color-bg-dark);
    padding-top: 220px;     /* зазор под абсолютную шапку */
    padding-bottom: 0;
    overflow: hidden;
}

.may-product-hero__layout {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 60px;
    align-items: stretch;
    min-height: 540px;
}

.may-product-hero__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 80px;
}

.may-product-hero__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 88px;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--may-color-bg-dark);
    text-transform: none;
    margin: 0 0 28px 0;
}

.may-product-hero__tagline {
    font-family: var(--may-font-body);
    font-size: 26px;
    line-height: 1.2;
    color: var(--may-color-bg-dark);
    text-transform: uppercase;
    margin: 0;
    max-width: 480px;
}

.may-product-hero__media {
    align-self: stretch;
    background: #D9C598;    /* fallback если фото отсутствует */
    overflow: hidden;
}

.may-product-hero__media img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    display: block;
}

/* ---------- CHECKLIST (списки с зелёными галочками) ----------
 * Универсальный блок «заголовок секции + bullet-список с галочкой».
 * Default — одна колонка, общий H2.
 * Модификатор _two-cols — две колонки с под-заголовками над каждой.
 * Модификатор _bg-gray — серый фон секции.
 */
.may-checklist {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-12);
}

.may-checklist_bg-gray {
    background: var(--may-color-bg-alt);
}

.may-checklist__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-checklist__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-6) 0;
    text-align: center;
}

.may-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.may-checklist__item {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 18px;
    align-items: start;
    font-family: var(--may-font-body);
    font-size: 19px;
    line-height: 1.5;
    color: var(--may-color-text);
}

.may-checklist__item::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin-top: 2px;
    border-radius: var(--may-radius-circle);
    background-color: var(--may-color-accent);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17.5 19 7.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    flex-shrink: 0;
}

/* двухколоночный режим */
.may-checklist_two-cols .may-checklist__title {
    display: none;          /* в two-cols общий H2 не используем */
}

.may-checklist_two-cols .may-checklist__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    row-gap: 50px;
}

.may-checklist_two-cols .may-checklist__list {
    max-width: none;
}

.may-checklist__col-title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 30px;
    line-height: var(--may-lh-tight);
    color: var(--may-color-bg-dark);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 var(--may-space-3) 0;
}

/* ---------- SCHEDULE (таблица «День × Параметр» с цветовой шкалой) ----------
 * Тёмно-зелёный фон секции — цветные ячейки шкалы зелёных тонов
 * лучше «звучат» на контрастном фоне.
 * Числовые ячейки имеют фон зелёной шкалы — чем больше значение в ряду,
 * тем темнее. 5 уровней: _v1 (светлый) … _v5 (тёмный).
 * На узких экранах таблица скроллится горизонтально, ярлык ряда
 * остаётся sticky-слева.
 */
.may-schedule {
    background: var(--may-color-bg-dark);
    color: #fff;
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-12);
}

.may-schedule__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-schedule__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-6) 0;
}

.may-schedule__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;    /* место под нативный скроллбар на macOS */
}

.may-schedule__table {
    border-collapse: separate;
    border-spacing: 4px;
    margin: 0 auto;
    font-family: var(--may-font-body);
}

.may-schedule__row-label {
    text-align: left;
    padding: 8px 16px 8px 4px;
    font-size: 15px;
    line-height: 1.2;
    color: #fff;
    font-weight: var(--may-fw-bold);
    white-space: nowrap;
    background: var(--may-color-bg-dark);
    position: sticky;
    left: 0;
    z-index: 1;
}

.may-schedule__table thead th {
    padding: 6px 0;
    width: 38px;
    min-width: 38px;
    text-align: center;
    font-family: var(--may-font-body);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: var(--may-fw-bold);
}

.may-schedule__cell {
    width: 38px;
    height: 32px;
    text-align: center;
    vertical-align: middle;
    font-size: 13px;
    font-weight: var(--may-fw-bold);
    border-radius: var(--may-radius-sm);
}

.may-schedule__cell_v1 { background: var(--may-schedule-v1); color: var(--may-color-text-strong); }
.may-schedule__cell_v2 { background: var(--may-schedule-v2); color: var(--may-color-text-strong); }
.may-schedule__cell_v3 { background: var(--may-schedule-v3); color: #fff; }
.may-schedule__cell_v4 { background: var(--may-schedule-v4); color: #fff; }
.may-schedule__cell_v5 { background: var(--may-schedule-v5); color: #fff; }

/* ---------- STEPS (горизонтальная лента шагов) ----------
 * 4 шага в ряд: иконка в кружке + крупная подпись (температура / действие)
 * + тонкая подпись.
 * Белый фон, иконка в тёмно-зелёном круге с белым SVG.
 */
.may-steps {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-12);
}

.may-steps__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-steps__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-8) 0;
}

.may-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.may-steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.may-steps__icon {
    width: 96px;
    height: 96px;
    border-radius: var(--may-radius-circle);
    background: var(--may-color-bg-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    flex-shrink: 0;
}

.may-steps__icon svg {
    width: 44px;
    height: 44px;
    display: block;
}

.may-steps__label {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 26px;
    line-height: 1.1;
    color: var(--may-color-text-strong);
    margin: 0 0 8px 0;
}

.may-steps__caption {
    font-family: var(--may-font-body);
    font-size: 16px;
    line-height: 1.35;
    color: var(--may-color-text);
    margin: 0 auto;
    max-width: 220px;
}

/* ---------- NUMBERED (нумерованный список на всю ширину) ----------
 * Аналог легаси .service: огромные номера 01/02/03 слева, описания справа.
 * По умолчанию — салатовый фон с белым текстом и белыми номерами.
 * Модификатор _light — серый фон, тёмный текст, салатовые номера.
 */
.may-numbered {
    background: var(--may-color-bg-accent);
    color: #fff;
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-12);
}

.may-numbered_light {
    background: var(--may-color-bg-alt);
    color: var(--may-color-text);
}

.may-numbered__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-numbered__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 56px;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 var(--may-space-8) 0;
    max-width: 1000px;
}

.may-numbered_light .may-numbered__title {
    color: var(--may-color-bg-dark);
}

.may-numbered__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.may-numbered__item {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    column-gap: 40px;
    align-items: start;
}

.may-numbered__num {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 88px;
    line-height: 1;
    color: #fff;
}

.may-numbered_light .may-numbered__num {
    color: var(--may-color-accent);
}

.may-numbered__text {
    font-family: var(--may-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    padding-top: 14px;
    max-width: 820px;
}

.may-numbered_light .may-numbered__text {
    color: var(--may-color-text);
}

/* ---------- PRODUCT INTRO (split: фото пачки + заголовок + лид) ----------
 * Белая внутренняя страница продукта.
 * Сверху — хлебные крошки. Ниже — split-сетка: слева вертикальное фото
 * упаковки, справа большой акцентный заголовок и короткий лид.
 * Подразумевает статическую шапку (.header_green / .header_page).
 */
.may-product-intro {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-4);
    padding-bottom: var(--may-space-12);
}

.may-product-intro__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-product-intro__breadcrumbs {
    list-style: none;
    margin: 0 0 var(--may-space-6) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-family: var(--may-font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--may-color-text-muted);
}

.may-product-intro__breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.may-product-intro__breadcrumbs a:hover {
    color: var(--may-color-accent);
}

.may-product-intro__layout {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 80px;
    align-items: start;
}

.may-product-intro__media {
    /* Контейнер под прозрачный PNG продукта — без фона и рамки. */
    aspect-ratio: 4 / 5;
    max-width: 480px;
    width: 100%;
}

.may-product-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* пачка не должна обрезаться */
    display: block;
}

.may-product-intro__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: 48px;            /* как легаси .page-title */
    line-height: 1;
    color: var(--may-color-accent);
    text-transform: uppercase;
    margin: 0 0 var(--may-space-4) 0;
}

.may-product-intro__lead {
    font-family: var(--may-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--may-color-text);
    margin: 0 0 var(--may-space-4) 0;
    max-width: 720px;
}

.may-product-intro__sub {
    font-family: var(--may-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--may-color-text);
    margin: 0 0 var(--may-space-2) 0;
}

.may-product-intro__cases {
    list-style: none;
    margin: 0 0 var(--may-space-4) 0;
    padding: 0;
}

.may-product-intro__cases li {
    font-family: var(--may-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--may-color-text);
    padding: 4px 0;
}

.may-product-intro__note {
    font-family: var(--may-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--may-color-text);
    margin: 0;
}

/* ---------- PRODUCT RECIPE (применение + таблица дозировки) ----------
 * Идёт сразу после .may-product-intro, на белом фоне, без верхнего паддинга
 * (визуально продолжает intro). Внутри — текстовый блок «применение»
 * + таблица «возраст × количество».
 */
.may-product-recipe {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-12);
}

.may-product-recipe__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-product-recipe__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-6) 0;
    text-align: center;
}

.may-product-recipe__title em {
    font-style: italic;
    font-size: 0.6em;
    font-weight: 500;
    white-space: nowrap;
}

.may-product-recipe__intro {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-body);
    line-height: 1.5;
    color: var(--may-color-text);
    margin: 0 0 var(--may-space-3) 0;
}

.may-product-recipe__cases {
    list-style: none;
    margin: 0 0 var(--may-space-6) 0;
    padding: 0;
}

.may-product-recipe__cases li {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-body);
    line-height: 1.5;
    color: var(--may-color-text);
    padding: 6px 0;
}

.may-product-recipe__note {
    font-family: var(--may-font-body);
    font-size: var(--may-fs-body);
    line-height: 1.5;
    color: var(--may-color-text);
    margin: 0 0 var(--may-space-8) 0;
    max-width: 900px;
}

.may-product-recipe__table-title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-style: italic;
    font-size: 28px;
    line-height: 1.2;
    color: var(--may-color-accent);
    margin: 0 0 var(--may-space-3) 0;
}

.may-product-recipe__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 900px;
    margin: 0 auto;          /* центрировать таблицу под центрованным заголовком */
}

.may-product-recipe__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--may-font-body);
}

.may-product-recipe__table th {
    background: var(--may-color-accent);
    color: var(--may-color-text-strong);
    padding: 14px 24px;
    text-align: left;
    font-size: 17px;
    font-weight: var(--may-fw-bold);
    font-style: italic;
}

.may-product-recipe__table td {
    padding: 12px 24px;
    border-bottom: 1px solid var(--may-color-border);
    font-size: 17px;
    line-height: 1.4;
    vertical-align: middle;
}

.may-product-recipe__table tbody tr:nth-child(even) td {
    background: var(--may-schedule-v1);
}

.may-product-recipe__table td:first-child {
    font-weight: var(--may-fw-bold);
    white-space: nowrap;
}

/* ============================================================
 * 3. АДАПТИВ
 * ============================================================ */
@media screen and (max-width: 1500px) {
    .may-hero {
        min-height: 720px;
        padding-top: 270px;
    }

    .may-product-hero          { padding-top: 180px; }
    .may-product-hero__layout  { min-height: 460px; }
    .may-product-hero__media img { min-height: 460px; }
    .may-product-hero__title   { font-size: 72px; }
    .may-product-hero__tagline { font-size: 22px; }
}

@media screen and (max-width: 992px) {
    .may-hero {
        min-height: 540px;
        padding-top: 200px;
        padding-bottom: 80px;
    }
    .may-hero__title { font-size: 48px; }

    .may-content {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .may-content__title { font-size: 35px; }
    .may-content__lead  { font-size: 20px; }

    .may-services {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .may-services__title { font-size: 35px; margin-bottom: 50px; }
    .may-services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .may-solutions {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .may-solutions__title { font-size: 35px; }
    .may-solutions__intro { font-size: 18px; margin-bottom: 40px; }
    .may-solutions__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .may-additives {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .may-additives__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .may-additives__media {
        aspect-ratio: 16 / 10;
        max-width: 500px;
    }
    .may-additives__title { font-size: 32px; margin-bottom: 30px; }
    .may-additives__num   { font-size: 48px; }
    .may-additives__item {
        grid-template-columns: 70px 1fr;
        column-gap: 20px;
        padding-block: 24px;
    }

    .may-products {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .may-products__title { font-size: 35px; margin-bottom: 50px; }
    .may-products__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .may-products__card { padding: 28px 20px 24px; }
    .may-products__media { margin-bottom: 20px; }
    .may-products__name { font-size: 20px; }

    .may-cta {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .may-cta__text {
        font-size: 18px;
        text-align: left;
    }

    .may-product-hero {
        padding-top: 140px;
        padding-bottom: 0;
    }
    .may-product-hero__layout {
        grid-template-columns: 1fr;
        gap: 0;
        min-height: 0;
    }
    .may-product-hero__panel {
        padding: 30px 0 50px;
    }
    .may-product-hero__title   { font-size: 56px; }
    .may-product-hero__tagline { font-size: 20px; }
    .may-product-hero__media {
        aspect-ratio: 16 / 10;
    }
    .may-product-hero__media img {
        min-height: 0;
    }

    .may-checklist {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .may-checklist__title { font-size: 35px; }
    .may-checklist__col-title { font-size: 24px; }
    .may-checklist_two-cols .may-checklist__cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .may-checklist__item { font-size: 17px; }

    .may-schedule {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .may-schedule__title { font-size: 32px; }

    .may-steps {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .may-steps__title { font-size: 32px; margin-bottom: 50px; }
    .may-steps__list {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 20px;
    }
    .may-steps__icon { width: 80px; height: 80px; }
    .may-steps__icon svg { width: 36px; height: 36px; }
    .may-steps__label { font-size: 22px; }

    .may-numbered {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .may-numbered__title { font-size: 36px; margin-bottom: 50px; }
    .may-numbered__list { gap: 28px; }
    .may-numbered__item {
        grid-template-columns: minmax(90px, auto) 1fr;
        column-gap: 24px;
    }
    .may-numbered__num { font-size: 64px; }
    .may-numbered__text { font-size: 18px; padding-top: 8px; }

    .may-product-intro {
        padding-top: 30px;
        padding-bottom: 60px;
    }
    .may-product-intro__breadcrumbs { font-size: 13px; margin-bottom: 24px; }
    .may-product-intro__layout {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 30px;
    }
    .may-product-intro__media {
        aspect-ratio: 1;
        max-width: 320px;
    }
    .may-product-intro__title { font-size: 40px; }
    .may-product-intro__lead,
    .may-product-intro__sub,
    .may-product-intro__cases li,
    .may-product-intro__note { font-size: 18px; }

    .may-product-recipe {
        padding-bottom: 60px;
    }
    .may-product-recipe__intro,
    .may-product-recipe__cases li,
    .may-product-recipe__note { font-size: 18px; }
    .may-product-recipe__table-title { font-size: 22px; }
    .may-product-recipe__table th,
    .may-product-recipe__table td { padding: 10px 14px; font-size: 15px; }
}

@media screen and (max-width: 510px) {
    .may-hero {
        min-height: 420px;
        padding-top: 170px;
    }
    .may-hero__title { font-size: 32px; }

    .may-content__title  { font-size: 28px; }

    /* Сжимаем вертикальные паддинги секций на мобильном — слишком много пустоты */
    .may-services    { padding-top: 40px; padding-bottom: 50px; }
    .may-solutions   { padding-top: 40px; padding-bottom: 50px; }
    .may-products    { padding-top: 40px; padding-bottom: 50px; }
    .may-additives   { padding-top: 40px; padding-bottom: 50px; }
    .may-numbered    { padding-top: 40px; padding-bottom: 50px; }
    .may-steps       { padding-top: 40px; padding-bottom: 50px; }
    .may-cta         { padding-top: 40px; padding-bottom: 50px; }
    .may-product-intro { padding-bottom: 30px; }

    /* На мобильном — одна колонка, но БЕЗ лишнего внутреннего padding,
       чтобы контент шёл на полную ширину карточки (по запросу 30.04.2026) */
    .may-services__title { font-size: 28px; margin-bottom: 32px; }
    .may-services__grid  { grid-template-columns: 1fr; gap: 24px; }
    .may-services__card  { padding: 0; }

    .may-solutions__title { font-size: 28px; }
    .may-solutions__grid  { grid-template-columns: 1fr; gap: 16px; }
    .may-solutions__card  { padding: 20px 18px; }

    .may-additives__title { font-size: 26px; }
    .may-additives__num   { font-size: 40px; }
    .may-additives__item {
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
    }
    .may-additives__name { font-size: 20px; }

    .may-products__title { font-size: 28px; margin-bottom: 32px; }
    .may-products__grid  { grid-template-columns: 1fr; gap: 20px; }
    .may-products__card  { padding: 20px 16px 18px; }
    .may-products__media { margin-bottom: 14px; }
    .may-products__name  { font-size: 18px; }

    /* Инфографика «Когда применять» — компактнее: меньше иконка/текст,
       плотнее column-gap, меньший gap между булетами */
    .may-cases { gap: 14px; }
    .may-cases__item { grid-template-columns: 36px 1fr; column-gap: 12px; }
    .may-cases__icon { width: 36px; height: 36px; }
    .may-cases__icon svg { width: 20px; height: 20px; }
    .may-cases__title { font-size: 15px; margin-bottom: 4px; }
    .may-cases__ratio { font-size: 13px; }
    .may-cases__note  { padding: 12px 14px; }
    .may-cases__note-label { font-size: 12px; }
    .may-cases__note-text  { font-size: 14px; }

    .may-product-hero__title   { font-size: 44px; }
    .may-product-hero__tagline { font-size: 17px; }

    .may-checklist__title    { font-size: 28px; }
    .may-checklist__col-title { font-size: 20px; }
    .may-checklist__item     { font-size: 16px; column-gap: 14px; }

    .may-schedule__title { font-size: 26px; }

    .may-steps__title { font-size: 26px; margin-bottom: 36px; }
    .may-steps__list { grid-template-columns: 1fr; gap: 30px; }
    .may-steps__label { font-size: 20px; }

    .may-numbered__title { font-size: 28px; margin-bottom: 36px; }
    .may-numbered__item {
        grid-template-columns: minmax(64px, auto) 1fr;
        column-gap: 16px;
    }
    .may-numbered__num { font-size: 48px; }
    .may-numbered__text { font-size: 16px; padding-top: 4px; }

    .may-product-intro__title { font-size: 32px; }
    .may-product-intro__lead,
    .may-product-intro__sub,
    .may-product-intro__cases li,
    .may-product-intro__note { font-size: 16px; }
    .may-product-recipe__intro,
    .may-product-recipe__cases li,
    .may-product-recipe__note { font-size: 16px; }
    .may-product-recipe__table-title { font-size: 19px; }
    .may-product-recipe__table th,
    .may-product-recipe__table td { padding: 8px 10px; font-size: 13px; }
}

/* ============================================================
 * ПРАВКИ ПО ОБРАТНОЙ СВЯЗИ ОТ 30.04.2026 (Жанна, Саша)
 * ============================================================ */

/* --- Карточки .may-solutions как ссылки (правка A2 — svinovodstvo) ---
 * <a class="may-solutions__card"> — убираем дефолтные стили <a>,
 * подсвечиваем рамку при hover. */
a.may-solutions__card {
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
a.may-solutions__card:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.55);
}

/* --- Активный заголовок в .may-additives (правка A3 — svinovodstvo) ---
 * Ссылкой делаем только текст-название (Свиноматки/Поросята/Откорм). */
.may-additives__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.may-additives__link:hover {
    color: var(--may-color-accent);
    border-bottom-color: var(--may-color-accent);
}

/* --- Сжатие пустоты между секциями (правки A1, C2) ---
 * Локально на отдельных страницах через body-класс. */
.page-svinovodstvo .may-content   { padding-bottom: 90px; }
.page-svinovodstvo .may-services  { padding-top: 75px; }

.page-mikotoksikozy .may-content  { padding-bottom: 60px; }
.page-mikotoksikozy .may-products { padding-top: 60px; }

/* ---------- CASES (инфографика «Когда применять» — правка B4) ----------
 * Заменяет текстовый список случаев применения в .may-product-intro.
 * 3 карточки в ряд с иконкой, кратким названием и формулой разведения. */
.may-cases {
    list-style: none;
    margin: 0 0 var(--may-space-4) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.may-cases__item {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 16px;
    align-items: start;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.may-cases__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--may-radius-circle);
    background: var(--may-color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / span 2;
    margin: 0;
}

.may-cases__icon svg {
    width: 22px;
    height: 22px;
}

.may-cases__title {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 16px;
    line-height: 1.25;
    color: var(--may-color-text-strong);
    margin: 0 0 8px 0;
}

.may-cases__ratio {
    font-family: var(--may-font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--may-color-text);
    margin: 0;
}

.may-cases__note {
    background: var(--may-color-bg-alt);
    color: var(--may-color-text-strong);
    border-radius: var(--may-radius-md, 6px);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.may-cases__note-label {
    font-family: var(--may-font-body);
    font-weight: var(--may-fw-bold);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--may-color-accent);
}

.may-cases__note-text {
    font-family: var(--may-font-body);
    font-size: 16px;
    line-height: 1.4;
    color: var(--may-color-text-strong);
}


/* ============================================================
 * PATHOGENS TABLE — Здоровье кишечника
 * «Воздушная» таблица: без тяжёлых заливок, тонкие линии между
 * строками, шапка с салатовой подложкой 2px, чипы-outline ссылками.
 * Левый столбец возбудителя — иконка-кружок + курсивное латинское имя.
 * Мобильная адаптация: горизонтальный скролл всей таблицы.
 * ============================================================ */
.may-pathogens {
    background: var(--may-color-bg);
    color: var(--may-color-text);
    padding-top: var(--may-space-12);
    padding-bottom: var(--may-space-15);
}

.may-pathogens__container {
    max-width: var(--may-container);
    margin: 0 auto;
    padding: 0 var(--may-container-pad-x);
}

.may-pathogens__title {
    font-family: var(--may-font-display);
    font-weight: var(--may-fw-bold);
    font-size: var(--may-fs-h2);
    line-height: var(--may-lh-tight);
    color: var(--may-color-accent);
    text-align: left;
    margin: 0 0 var(--may-space-4) 0;
}

.may-pathogens__hint {
    font-family: var(--may-font-body);
    font-size: 14px;
    color: var(--may-color-text);
    opacity: 0.6;
    margin: 0 0 var(--may-space-3) 0;
    display: none;          /* по умолчанию скрыта; показываем на мобильном */
}

.may-pathogens__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.may-pathogens__table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--may-font-body);
    background: transparent;
}

/* ШАПКА: белая, тёмный текст, тонкая салатовая подложка снизу */
.may-pathogens__table thead th {
    background: transparent;
    color: var(--may-color-text-strong);
    font-weight: var(--may-fw-bold);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    padding: 0 14px 14px;
    vertical-align: bottom;
    border-bottom: 2px solid var(--may-color-accent);
}

.may-pathogens__col-pathogen {
    width: 1%;          /* грид-фокус: колонка по содержимому */
    min-width: 120px;
    white-space: normal;
}

/* ЛЕВЫЙ СТОЛБЕЦ (возбудитель): без фона, иконка-кружок + курсив */
.may-pathogens__row-label {
    text-align: left;
    padding: 18px 14px 18px 0;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    vertical-align: middle;
    font-weight: normal;
}

.may-pathogens__row-name {
    font-style: italic;
    font-weight: var(--may-fw-bold);
    font-size: 16px;
    line-height: 1.25;
    color: var(--may-color-text-strong);
}

/* ЯЧЕЙКИ С ПРЕПАРАТАМИ: без фона, только нижняя линия */
.may-pathogens__table tbody td {
    padding: 14px 14px;
    vertical-align: top;
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.may-pathogens__table tbody tr:last-child .may-pathogens__row-label,
.may-pathogens__table tbody tr:last-child td {
    border-bottom: 0;
}

/* ЧИПЫ — outline-стиль */
.may-pathogens__chip {
    display: inline-block;
    background: transparent;
    color: var(--may-color-text-strong);
    font-family: var(--may-font-body);
    font-size: 13px;
    font-weight: var(--may-fw-bold);
    line-height: 1.2;
    padding: 5px 11px;
    border: 1.5px solid var(--may-color-accent);
    border-radius: 999px;
    margin: 3px 4px 3px 0;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.may-pathogens__chip:hover {
    background: var(--may-color-accent);
    color: #fff;
}

/* SCOPED для страницы Здоровье кишечника:
   уменьшаем зазор между .may-content и .may-pathogens в ~2.5 раза */
.page-zdorove-kishechnika .may-content    { padding-bottom: 60px; }
.page-zdorove-kishechnika .may-pathogens  { padding-top: 50px; }

/* адаптация */
@media screen and (max-width: 992px) {
    .may-pathogens {
        padding-top: 60px;
        padding-bottom: 80px;
    }
    .may-pathogens__title { font-size: 32px; }
    .may-pathogens__hint  { display: block; }
    .may-pathogens__table thead th { font-size: 13px; padding: 0 10px 12px; }
    .may-pathogens__table tbody td { padding: 12px 10px; }
    .may-pathogens__row-label { padding: 14px 10px 14px 0; }
    .may-pathogens__row-name { font-size: 15px; }
    .may-pathogens__chip { font-size: 12px; padding: 4px 9px; }
}

@media screen and (max-width: 510px) {
    .may-pathogens { padding-top: 40px; padding-bottom: 50px; }
    .may-pathogens__title { font-size: 26px; margin-bottom: 12px; }
    .may-pathogens__table { min-width: 760px; }
}