/* Ryjik catalog card redesign — v0.6.0 «B · Compact Price-Forward» (stage WIP, ветка redesign/catalog-tile)
 *
 * Направление B выбрано после research (14-агентный workflow): Ozon/WB-плотность,
 * сделанная правильно. Главные выводы research (правят 3 жалобы Юры):
 *  1) Цена НЕ большая — ей не хватало воздуха. Лечим ПРОБЕЛОМ, не размером: 12px над
 *     ценой (отрыв от чипов) + ~10px под (до кнопки); валюта/старая/кг — тихо-серые,
 *     navy-число = единственная тяжёлая метка. Размер 22→20 (лёгкий второй рычаг).
 *  2) Чипы были перекормлены: inherited line-height:1.3 добавлял ~6px; min-width
 *     уравнивал ширины («300 г»→52px); мобильный бамп раздул до 41px. Лечим:
 *     line-height:1 (паддинг сам задаёт высоту ~28-32px), min-width:0 (по контенту),
 *     зазор 6px (не 10).
 *  3) «Перегружено» = почти-равномерные внесеточные 9/11px зазоры. Лечим
 *     ГРУППОВЫМ ритмом на сетке 4/8: ТЕСНО внутри групп (эйбров→тайтл 4px,
 *     цена→кг 3px), СВОБОДНО между зонами (чипы→цена 12px). 3 зоны: media / identity / commit.
 *
 * СОВМЕСТИМОСТЬ (Android Chrome <84): без :has(), без flex `gap` (margin), без
 * aspect-ratio, без inset-shorthand. Grid `gap` сетки не трогаем. Hover-тень прогрессивна.
 * Грузится ПОСЛЕ variation-radios.css. Парный JS: catalog-card.js (цена/кг + бейдж).
 * Scope = loop-грид (.grid / .ryjik-home-section / .ryjik-cart-cross-sells) +
 * related-карусель .ryjik-carousel ([ryjik_products] свайпер «Похожие» на карточке
 * товара). 2026-06-21: добавлен .ryjik-carousel — раньше блок «Похожие» выпадал из
 * ВСЕХ скоупов (карта/дом/корзина) и рендерился темовым дефолтом (сырой «Супер
 * премиум», разновысокие карточки). Контейнер-грид НЕ трогаем (свайпер сам раскладывает
 * слайды); сюда идут только card-internal правила — см. catalog-masonry.css.
 */

/* ── 0. Плотность сетки каталога (десктоп ≥1280): 5 в ряд ──────────────────
 * Корень «карточки шире прототипа»: тема в layout `.large` рисует 4 колонки →
 * на широком контейнере (~1104px) карточка раздувается до ~267px и выглядит
 * шире/площе. Прототип B = ~220px. Возвращаем маркетплейс-плотность: 5 колонок
 * → ~211px карточка, картинка заполняет больше ширины, пропорции = прототип,
 * ряд заполнен (без пустого правого поля). Только архив (.loop-products) и
 * только ≥1280 — на 1024–1279 тема уже даёт ~231px (ок). minmax(0,1fr) чтобы
 * длинный чип/тайтл не распирал колонку. !important — бьёт `.large ul.products`.
 * Откат: убрать этот блок (RYJIK catalog 5-col). */
@media (min-width: 1280px) {
    .grid ul.products.loop-products {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

/* ── 1. Контейнер-карточка (self-defines на БЕЛОМ: бордер + resting-тень) ── */
.grid ul.products:not(.enova-carousel) > li.product,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product {
    background: #fff;
    border: 1px solid #e6eaef;
    border-radius: 12px;
    padding: 11px;
    box-shadow: 0 1px 2px rgba(16, 40, 70, .05), 0 8px 20px -14px rgba(16, 40, 70, .16);
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
.grid ul.products:not(.enova-carousel) > li.product:hover,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product:hover,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product:hover,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product:hover {
    border-color: #dfe5ec;
    box-shadow: 0 2px 4px rgba(16, 40, 70, .06), 0 16px 30px -16px rgba(16, 40, 70, .26);
    transform: translateY(-2px);
}

/* Тема рисует ВТОРОЙ бордер: .post-inner/.et-item-inner = box-shadow:0 0 0 1px inset #ebebeb
   с радиусом 3px → near-square тема-бордер торчит за скруглёнными углами = «уголки/двойная
   рамка». Снимаем тему-бордер целиком. */
.grid ul.products:not(.enova-carousel) > li.product .post-inner,
.grid ul.products:not(.enova-carousel) > li.product .et-item-inner,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-inner,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .et-item-inner,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-inner,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .post-inner,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .et-item-inner,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .et-item-inner {
    box-shadow: none;
    border: 0;
    border-radius: 0;
}

/* ── 2. ZONE 1 · MEDIA — товар плавает на белом (фикс. бокс, no aspect-ratio) ── */
/* Тема вешает .post-body{padding:16px} → контент вжат в 168px внутри карточки. Снимаем
   боковые/нижний паддинги — контент во всю ширину карточки. */
.grid ul.products:not(.enova-carousel) > li.product .post-body,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-body,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-body,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .post-body {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.grid ul.products:not(.enova-carousel) > li.product .post-image.post-media,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-image.post-media,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-image.post-media,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .post-image.post-media {
    background: #fff;
    border-radius: 9px;
    height: 168px;          /* >прототип(146): на узкой 5-кол карточке фото мельчало → карточка
                               «сжатая/низкая» (жалоба Юры). Выше бокс = крупнее товар + рост карточки. */
    margin-bottom: 10px;    /* media→эйбров 10px */
    padding: 0 0 8px;       /* НЕЙТРАЛИЗУЕМ тему `@media(min-width:768px){ul.products .product
                               .post-image{padding:16px}}` (Юра нашёл в DevTools). Юра: 0 сверху/по
                               бокам + 8px снизу → фото во всю ширину/верх бокса, маленький зазор снизу
                               до эйброва. box-sizing:border-box → высота 168 не меняется, растёт фото.
                               Якорь сердечка (right:0/top:0 от padding-box) от паддинга НЕ зависит. */
}
/* Кап товара: сидит по центру с ровным белым полем (read «товар на белом» Ozon/Chewy) */
.grid ul.products .product .post-image.post-media img,
.ryjik-home-section ul.products .product .post-image.post-media img,
.ryjik-cart-cross-sells ul.products .product .post-image.post-media img,
.ryjik-carousel ul.products .product .post-image.post-media img {
    max-height: 140px;      /* 122→140: товар крупнее в более высоком боксе, ровное белое поле (~14px) */
    object-fit: contain;
}
/* Сердечко «Избранное» — в правый-верхний угол. Виновник «почти по центру» (Юра нашёл
 * в DevTools): тема в `@media(min-width:768px){.wishlist-toggle,.compare-toggle,.en-quick-view
 * {top:16px;right:16px}}` (style.css) перебивает свою же базу `{top:0;right:8px}` → на десктопе
 * иконку отжимало внутрь. Минифиц.вендор-CSS не правим → НЕЙТРАЛИЗУЕМ это @media-правило,
 * возвращая базовые top:0/right:8 (=мобайл, =как просил Юра). Спец-ть (0,4,1) бьёт @media (0,1,1).
 * Лейблы-бейджи в левом-верхнем углу → не пересекаются. Без @media = все брейкпоинты. */
.grid ul.products .product .post-image.post-media .wishlist-toggle,
.ryjik-home-section ul.products .product .post-image.post-media .wishlist-toggle,
.ryjik-cart-cross-sells ul.products .product .post-image.post-media .wishlist-toggle,
.ryjik-carousel ul.products .product .post-image.post-media .wishlist-toggle {
    top: 0;
    right: 0px;
}
/* ── Лейблы-бейджи (СТЕК, top-left) — расширяемо: акция «−NN%» / класс «Супер премиум» /
   «Выгодная цена» / «Хит»… Несколько лейблов стекаются вертикально (margin-top, Android-safe).
   Инжектит catalog-card.js (renderLabels): акция считается из цены; классы — из ryjik-label-*
   на <li> (mu-plugin ryjik-catalog-labels.php); произвольные — из data-ryjik-labels (JSON). */
.grid ul.products .product .ryjik-card-labels,
.ryjik-home-section ul.products .product .ryjik-card-labels,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-labels,
.ryjik-carousel ul.products .product .ryjik-card-labels {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(100% - 12px);
}
.grid ul.products .product .ryjik-card-label,
.ryjik-home-section ul.products .product .ryjik-card-label,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label,
.ryjik-carousel ul.products .product .ryjik-card-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #fff;
    background: #6b7280;       /* дефолт (неизвестный kind) */
    padding: 4px 7px;
    border-radius: 7px;
    box-shadow: 0 1px 3px rgba(16, 40, 70, .18);
}
.grid ul.products .product .ryjik-card-label + .ryjik-card-label,
.ryjik-home-section ul.products .product .ryjik-card-label + .ryjik-card-label,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label + .ryjik-card-label,
.ryjik-carousel ul.products .product .ryjik-card-label + .ryjik-card-label {
    margin-top: 4px;          /* стек, Android<84-safe (не flex-gap) */
}
/* Варианты лейблов (свой бэкграунд у каждого). Оранжевый НЕ используем — он = CTA/актив.чип. */
.grid ul.products .product .ryjik-card-label--sale,
.ryjik-home-section ul.products .product .ryjik-card-label--sale,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--sale { background: #e23b4e; }
.ryjik-carousel ul.products .product .ryjik-card-label--sale { background: #e23b4e; }
/* «Супер премиум» — люкс-комбинация «ЛЁД» (выбор Юры 2026-06-20): глубокий тёмно-синий
   градиент (фирменный навигационный, насыщеннее для контраста) + тонкая ПЛАТИНОВО-ЛЕДЯНАЯ
   рамка (inset box-shadow → без сдвига размера) + холодный белый текст. Строго в сине-бело-
   голубой палитре бренда (без нового цвета); ледяной гем (ниже в ::before) читается чётче
   всего как БРИЛЛИАНТ. Рассматривался вариант «золото» — отклонён в пользу льда. */
.grid ul.products .product .ryjik-card-label--premium,
.ryjik-home-section ul.products .product .ryjik-card-label--premium,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--premium,
.ryjik-carousel ul.products .product .ryjik-card-label--premium {
    background: linear-gradient(140deg, #16314f 0%, #091c32 100%);
    color: #eaf4ff;
    box-shadow: inset 0 0 0 1px rgba(176,212,240,.62), 0 2px 7px rgba(7,18,36,.32);
    letter-spacing: .4px;
}
.grid ul.products .product .ryjik-card-label--value,
.ryjik-home-section ul.products .product .ryjik-card-label--value,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--value { background: #1b9c5d; }
.ryjik-carousel ul.products .product .ryjik-card-label--value { background: #1b9c5d; }
.grid ul.products .product .ryjik-card-label--hit,
.ryjik-home-section ul.products .product .ryjik-card-label--hit,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--hit { background: #7c5cff; }
.ryjik-carousel ul.products .product .ryjik-card-label--hit { background: #7c5cff; }

/* «Супер премиум»/«Холистик» (kind=premium) — иконка-бриллиант перед текстом.
   Ледяной брильянт: почти белая площадка (table) + светло-голубые грани короны + голубой
   павильон, сходящийся в острый низ. Узнаваемость даёт ЦВЕТ + остроконечная огранка.
   Это СВОЙ SVG, а не эмодзи 💎 → рендерится одинаково на всех платформах и на старом
   Android Chrome <84 (эмодзи рисовался бы по-своему). */
.grid ul.products .product .ryjik-card-label--premium::before,
.ryjik-home-section ul.products .product .ryjik-card-label--premium::before,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--premium::before,
.ryjik-carousel ul.products .product .ryjik-card-label--premium::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='1%205%2034%2028'%3E%3Cpath%20d='M3%2015H18L18%2031Z'%20fill='%2386C8EE'/%3E%3Cpath%20d='M18%2015H33L18%2031Z'%20fill='%2362B0E2'/%3E%3Cpath%20d='M12%207L10.5%2015L3%2015Z'%20fill='%23C5E8F9'/%3E%3Cpath%20d='M24%207L25.5%2015L33%2015Z'%20fill='%23C5E8F9'/%3E%3Cpath%20d='M12%207H24L25.5%2015H10.5Z'%20fill='%23F2FBFF'/%3E%3Cg%20stroke='%23FFFFFF'%20stroke-width='1.1'%20fill='none'%20opacity='0.9'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2015H33'/%3E%3Cpath%20d='M18%2015V31'/%3E%3Cpath%20d='M10.5%2015L12%207'/%3E%3Cpath%20d='M25.5%2015L24%207'/%3E%3C/g%3E%3Cpath%20d='M12%207H24L33%2015L18%2031L3%2015Z'%20fill='none'%20stroke='%235FA0CB'%20stroke-width='1.1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* «Лечебный» (kind=rx) — аптечный знак: БЕЛАЯ плашка + КРАСНЫЙ крест + тёмно-синий
   текст. Решение «аптечка/первая помощь»: красный крест (как просил Юра) сохранён, но
   ПЛАШКА белая → (1) единственная светлая в стеке тёмных бейджей = максимально заметна,
   (2) НЕ конфликтует с красной акцией «−NN%» (две красные плашки сливались бы). Белое на
   белом фото товара отделяем красноватой inset-рамкой + тенью. Оранжевый не трогаем (CTA). */
.grid ul.products .product .ryjik-card-label--rx,
.ryjik-home-section ul.products .product .ryjik-card-label--rx,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--rx,
.ryjik-carousel ul.products .product .ryjik-card-label--rx {
    background: #ffffff;
    color: #16314f;
    box-shadow: inset 0 0 0 1px rgba(214,48,62,.45), 0 1px 3px rgba(16,40,70,.22);
}
/* Крест-«плюс» — собственный SVG (две скруглённые перекладины) в data-URI, как ледяной
   бриллиант: рендерится одинаково везде, Android Chrome <84-safe (не эмодзи, не модерн-CSS). */
.grid ul.products .product .ryjik-card-label--rx::before,
.ryjik-home-section ul.products .product .ryjik-card-label--rx::before,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-label--rx::before,
.ryjik-carousel ul.products .product .ryjik-card-label--rx::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -2px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Crect%20x='9.4'%20y='2.5'%20width='5.2'%20height='19'%20rx='2.3'%20fill='%23e0263a'/%3E%3Crect%20x='2.5'%20y='9.4'%20width='19'%20height='5.2'%20rx='2.3'%20fill='%23e0263a'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Пустой рейтинг убираем (числовой «★4.8·N» — отдельной итерацией через хук) */
.grid ul.products:not(.enova-carousel) > li.product .star-rating-wrap,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .star-rating-wrap,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .star-rating-wrap,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .star-rating-wrap {
    display: none;
}

/* ── 3. ZONE 2 · IDENTITY — эйбров-категория + тайтл + чипы (связаны теснее) ── */
/* Эйбров-категория НАД тайтлом: тихий приглушённый капс (один громкий цвет = цена/CTA).
   Кликабельна → архив категории. 1 строка + ellipsis (на случай 2 категорий). */
.grid ul.products:not(.enova-carousel) > li.product .post-category,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-category,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-category,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .post-category {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.2;
    margin: 0 0 4px;        /* эйбров→тайтл 4px (ТЕСНО — это пара-лейбл) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid ul.products .product .post-category a,
.ryjik-home-section ul.products .product .post-category a,
.ryjik-cart-cross-sells ul.products .product .post-category a,
.ryjik-carousel ul.products .product .post-category a {
    color: #95a1ae;
    text-decoration: none;
    transition: color .14s ease;
}
.grid ul.products .product .post-category a:hover,
.ryjik-home-section ul.products .product .post-category a:hover,
.ryjik-cart-cross-sells ul.products .product .post-category a:hover,
.ryjik-carousel ul.products .product .post-category a:hover {
    color: var(--ryjik-main, #f97316);
}

/* Пустые phantom-спаны .ryjik-iconlabel (icon-labels.php) дают inline-flex line-box
   ~25px перед тайтлом → дыра. В карточке они пустые — прячем. */
.grid ul.products .product .post-content-wrap .ryjik-iconlabel,
.ryjik-home-section ul.products .product .post-content-wrap .ryjik-iconlabel,
.ryjik-cart-cross-sells ul.products .product .post-content-wrap .ryjik-iconlabel,
.ryjik-carousel ul.products .product .post-content-wrap .ryjik-iconlabel {
    display: none;
}

/* Тайтл — тёмно-синий, подчинён цене. min-height 35px = резерв под 2 строки
   (13×1.34×2 ≈ 34.8 → 35) чтобы 1-строчные не схлопывали карточку. */
.grid ul.products:not(.enova-carousel) > li.product .post-title,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-title,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-title,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .post-title {
    font-size: 13px;
    line-height: 1.34;
    font-weight: 500;
    min-height: 35px;
    margin: 0 0 10px;       /* тайтл→чипы 10px (было 8 — чуть больше воздуха над лентой вариаций) */
}
.grid ul.products:not(.enova-carousel) > li.product .post-title a,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .post-title a,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .post-title a,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .post-title a {
    color: #0b2c4d;
}

/* Brand-split эйбров — ОТКЛЮЧЁН 2026-06-20 в catalog-card.js (renderBrand не вызывается).
   Правила ниже спят (нет .ryjik-card-brand в DOM), оставлены на случай возврата фичи.
   Причина выкл: ломал единый шрифт тайтла (бренд 700 navy / дескриптор 500 серый) +
   делал бренд некликабельным. Юра: «название не трогай». */
.grid ul.products .product .ryjik-card-brand,
.ryjik-home-section ul.products .product .ryjik-card-brand,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-brand,
.ryjik-carousel ul.products .product .ryjik-card-brand {
    font-size: 11.5px;
    font-weight: 700;
    color: #0b2c4d;
    letter-spacing: .2px;
    line-height: 1.2;
    margin: 8px 0 3px;
}
.grid ul.products .product .ryjik-card-brand + .post-title,
.ryjik-home-section ul.products .product .ryjik-card-brand + .post-title,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-brand + .post-title,
.ryjik-carousel ul.products .product .ryjik-card-brand + .post-title {
    margin-top: 0;
}
.grid ul.products .product .ryjik-card-brand + .post-title a,
.ryjik-home-section ul.products .product .ryjik-card-brand + .post-title a,
.ryjik-cart-cross-sells ul.products .product .ryjik-card-brand + .post-title a,
.ryjik-carousel ul.products .product .ryjik-card-brand + .post-title a {
    color: #5b6775;
    font-weight: 500;
}

/* Чипы фасовок — секундарный селектор, НЕ второй CTA. ~28-32px, по контенту.
   line-height:1 (убираем inherited 1.3 = −6px) + min-width:0 (по контенту, не равная
   ширина) + зазор 6px. Активный залит оранжем. */
.grid ul.products:not(.enova-carousel) > li.product .ryjik-variations__option,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .ryjik-variations__option,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .ryjik-variations__option,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .ryjik-variations__option {
    min-width: 0;
    border-width: 1.5px;
    border-color: #e3e8ee;
    border-radius: 9px;
    padding: 6px 11px;
    font-size: 12.5px;
    line-height: 1;
    color: #4f5b67;
}
.grid ul.products .product .ryjik-variations > * + *,
.ryjik-home-section ul.products .product .ryjik-variations > * + *,
.ryjik-cart-cross-sells ul.products .product .ryjik-variations > * + *,
.ryjik-carousel ul.products .product .ryjik-variations > * + * {
    margin-left: 6px !important;   /* база = 8px !important; «один цельный стрип» = 6px */
}
.grid ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active {
    border-color: var(--ryjik-main, #f97316);
    background: var(--ryjik-main, #f97316);
    box-shadow: none;
    color: #fff;
}
.grid ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active .ryjik-variations__label,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active .ryjik-variations__label,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active .ryjik-variations__label,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .ryjik-variations__option.is-active .ryjik-variations__label {
    color: #fff;
}

/* лента чипов → цена: 12px (САМЫЙ большой зазор карточки — «вдох» перед ценой,
   главное лекарство от «перегруза» и «тяжёлой цены»). */
.grid ul.products .product .ryjik-variations-scroll,
.ryjik-home-section ul.products .product .ryjik-variations-scroll,
.ryjik-cart-cross-sells ul.products .product .ryjik-variations-scroll,
.ryjik-carousel ul.products .product .ryjik-variations-scroll {
    margin: 0 0 12px;
}

/* ── 4. ZONE 3 · COMMIT — цена + кг + кнопка ──
   ВАЖНО (Юра): НЕ прижимаем к низу (убрали margin-top:auto). Всё прижато К ВЕРХУ; слот
   «цена за кг» зарезервирован (JS держит пустой .ryjik-unit-price + CSS min-height ниже) →
   при переключении вариаций (где-то кг есть, где-то нет) карточка НЕ прыгает. */
/* Цена — navy-якорь 20px/800 (один громкий навигатор; оранж = только CTA+актив.чип). */
.grid ul.products:not(.enova-carousel) > li.product .price-button-wrapp > .price,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .price-button-wrapp > .price,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .price-button-wrapp > .price,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .price-button-wrapp > .price {
    font-size: 21px;       /* = прототип B (было 20) */
    font-weight: 800;
    color: #0b2c4d;
    line-height: 1.05;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}
.grid ul.products:not(.enova-carousel) > li.product .price .woocommerce-Price-currencySymbol,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .price .woocommerce-Price-currencySymbol,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .price .woocommerce-Price-currencySymbol,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .price .woocommerce-Price-currencySymbol {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
/* Акция: новая цена (ins) — навигатор navy 800, идёт ПЕРВОЙ (order:1); старая (del) —
   серая зачёркнутая ПОСЛЕ неё (order:2). Тема красит ins оранжевым → перебиваем navy. */
.grid ul.products:not(.enova-carousel) > li.product .price del,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .price del,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .price del,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .price del {
    order: 2;
    font-size: 13px;
    color: #9aa6b2;
    font-weight: 600;
    margin: 0 0 0 8px;
    font-variant-numeric: tabular-nums;
}
.grid ul.products:not(.enova-carousel) > li.product .price ins,
.grid ul.products:not(.enova-carousel) > li.product .price ins .woocommerce-Price-amount,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .price ins,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .price ins .woocommerce-Price-amount,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .price ins,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .price ins,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .price ins .woocommerce-Price-amount,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .price ins .woocommerce-Price-amount {
    order: 1;
    text-decoration: none;
    color: #0b2c4d;
    font-weight: 800;
}

/* Цена за кг (инжектит catalog-card.js, только для фасовок ≥1кг). min-height = резерв
   слота → карточки без кг не сбивают выравнивание цена↔кнопка. price→кг 3px (ТЕСНО). */
.grid ul.products .product .ryjik-unit-price,
.ryjik-home-section ul.products .product .ryjik-unit-price,
.ryjik-cart-cross-sells ul.products .product .ryjik-unit-price,
.ryjik-carousel ul.products .product .ryjik-unit-price {
    font-size: 11.5px;
    color: #6b7280;
    font-weight: 500;
    line-height: 1.2;
    margin: 3px 0 0;
    min-height: 14px;
    font-variant-numeric: tabular-nums;
}

/* Кнопка — мягкие углы + иконка корзины (высоту 38px не трогаем: без прыжка qty). */
.grid ul.products:not(.enova-carousel) > li.product a.ryjik-add-to-cart,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product a.ryjik-add-to-cart,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product a.ryjik-add-to-cart,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product a.ryjik-add-to-cart {
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
}
/* Иконка корзины. Перебиваем ДВА правила: (1) variation-radios `::before{display:none}`;
   (2) тему meow (style.css ~6780-6811) — на мобильном брейкпоинте красит иконку через
   `-webkit-mask:url(cart.svg)` + белый фон; маска на стейдже не разрешается → белый КВАДРАТ.
   !important + mask:none → остаётся только наш data-URI (никаких внешних svg, не 404). */
.grid ul.products .product a.ryjik-add-to-cart::before,
.ryjik-home-section ul.products .product a.ryjik-add-to-cart::before,
.ryjik-cart-cross-sells ul.products .product a.ryjik-add-to-cart::before,
.ryjik-carousel ul.products .product a.ryjik-add-to-cart::before {
    content: '' !important;
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 7px 0 0 !important;
    text-indent: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.4 12.4a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.6L22 7H6'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
.grid ul.products:not(.enova-carousel) > li.product .ryjik-qty-box,
.ryjik-home-section ul.products:not(.enova-carousel) > li.product .ryjik-qty-box,
.ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .ryjik-qty-box,
.ryjik-carousel ul.products:not(.enova-carousel) > li.product .ryjik-qty-box {
    border-radius: 10px;
}
/* контрол корзины: цена-блок → кнопка 10px (граница «зоны действия»). */
.grid ul.products .product .ryjik-cart-control,
.ryjik-home-section ul.products .product .ryjik-cart-control,
.ryjik-cart-cross-sells ul.products .product .ryjik-cart-control,
.ryjik-carousel ul.products .product .ryjik-cart-control {
    margin-top: 10px;
}

/* ── 5. Тач: чипы на мобильных — комфортный тап БЕЗ «чанковости» ──
   Было 41px/зазор10 (перекорм). Делаем ~32px (паддинг 8/11, line-height:1) + зазор 6px.
   margin-left = Android<84-safe (не flex-gap). */
@media (max-width: 767px) {
    .grid ul.products:not(.enova-carousel) > li.product .ryjik-variations__option,
    .ryjik-home-section ul.products:not(.enova-carousel) > li.product .ryjik-variations__option,
    .ryjik-cart-cross-sells ul.products:not(.enova-carousel) > li.product .ryjik-variations__option,
    .ryjik-carousel ul.products:not(.enova-carousel) > li.product .ryjik-variations__option {
        padding: 8px 11px;
        font-size: 12.5px;
        line-height: 1;
        border-radius: 9px;
    }
    .grid ul.products .product .ryjik-variations > * + *,
    .ryjik-home-section ul.products .product .ryjik-variations > * + *,
    .ryjik-cart-cross-sells ul.products .product .ryjik-variations > * + *,
    .ryjik-carousel ul.products .product .ryjik-variations > * + * {
        margin-left: 6px !important;
    }
}