/*
   Оформление блоков конструктора под магазин eshop (файл сайта, модуль esmodule его не трогает; подключается после CSS блоков).
   Тема «Демо 2026» (как шаблон магазина — media/css/minishop/style.css): шрифт сайта (Inter), один акцент #c8152f,
   без теней, линии #ececef, подложки #f6f6f8, радиусы 12 / 8, заголовки 500 без разрядки, умеренные отступы секций.
*/
:root {
    --es-primary: #c8152f;
    --es-primary-dark: #a50f27;
    --es-primary-soft: #fbecee;
    --es-on-primary: #fff;
    --es-accent-text: #c8152f;
    --es-heading: #1f2128;
    --es-text: #4a4d55;
    --es-muted: #6e717a;
    --es-surface: #fff;
    --es-surface-alt: #f6f6f8;
    --es-dark: #1f2128;
    --es-border: #ececef;
    --es-shadow: none;
    --es-shadow-hover: 0 8px 24px rgba(31, 33, 40, .08);
    --es-radius: 12px;
    --es-radius-sm: 8px;
    --es-btn-radius: 8px;
    --es-section-py: clamp(40px, 4.5vw, 64px);
    --es-section-py-compact: clamp(32px, 3.5vw, 48px);
    --es-h2-size: clamp(24px, 2.2vw, 30px);
    --es-subtitle-size: 16px;
    --es-content-gap: clamp(24px, 2.6vw, 36px);
}

/* заголовки и карточки — как в шаблоне магазина: вес 500, без разрядки */
.cb .cb-title__h, .cb .cb-banner__title, .cb-card__name, .cb-rich h2, .cb-rich h3, .cb-rich h4 {font-weight: 500; letter-spacing: 0}
.cb .cb-banner__title {font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12}
.cb-banner--hero .cb-banner__title {font-size: clamp(30px, 3.6vw, 48px)}
.cb .cb-btn {font-weight: 500}

/* посадочная категории «вокруг товаров»: первый баннер — компактная светлая карточка в контейнере (~300px, как промо Aspro Lite):
   крошки, H1, подзаголовок, пункты в строку, кнопки; фото справа. Товары — на первом экране. На телефоне фото скрыто. */
.cb-page--around.cb-page--top {padding-top: 20px}
.cb-page--around.cb-page--top > section.cb--banner:first-of-type {max-width: 1300px; margin: 0 auto; padding: 0 !important; border-radius: 12px; overflow: hidden; background: var(--es-surface-alt)}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__wrap {max-width: none; padding: 32px 40px !important; min-height: 0}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--overlay .cb-banner__wrap {min-height: 300px; padding: 40px 48px !important}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--split .cb-banner__wrap {grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px}
/* 06.11 (ntc-vibro: «фото обрезается, а в админке целиком»): фото по умолчанию целиком, не выше 260 px (или своей высоты);
   «Заполнить рамку» — рамка 260 px (или своей высоты) с обрезкой краёв */
.cb-page--top > section.cb--banner:first-of-type .cb-banner--split .cb-banner__side {aspect-ratio: auto; border-radius: 10px; box-shadow: none}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--fit-cover .cb-banner__side {height: var(--cb-img-h, 260px)}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--fit-auto .cb-banner__side {overflow: visible; background: none}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--fit-auto .cb-banner__side picture {height: auto}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--fit-auto .cb-banner__side-img {width: auto; max-width: 100%; height: auto; max-height: var(--cb-img-h, 260px); margin-inline: auto; object-fit: contain; border-radius: 10px}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--fit-contain .cb-banner__side-img {max-height: var(--cb-img-h, 260px); border-radius: 10px}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__crumbs {margin-bottom: 12px !important; font-size: 13px}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__eyebrow {margin-bottom: 8px; font-size: 14px; font-weight: 500}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__title {font-size: clamp(26px, 2.4vw, 34px); line-height: 1.18}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__text {margin-top: 10px; font-size: 15px; line-height: 1.55; max-width: 560px}
/* пункты — столбиком (06.11: «в админке красиво с новой строки, а на сайте один за другим»); в строку — «Пункты: в строку» */
.cb-page--top > section.cb--banner:first-of-type .cb-banner__points {gap: 8px; margin-top: 16px}
.cb-page--top > section.cb--banner:first-of-type .cb-banner--points-row .cb-banner__points {gap: 8px 20px}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__points li {padding-left: 24px; font-size: 14px; font-weight: 500}
.cb-page--top > section.cb--banner:first-of-type .cb-banner__points li::before {width: 16px; height: 16px; top: .15em; background-size: 10px 10px}
.cb-page--top > section.cb--banner:first-of-type .cb-actions {margin-top: 20px}
.cb-page--top > section.cb--banner:first-of-type .cb-btn {padding: 11px 20px; font-size: 14px}
@media (max-width: 1340px) {
    .cb-page--around.cb-page--top > section.cb--banner:first-of-type {margin: 0 20px}
}
@media (max-width: 991px) {
    .cb-page--top > section.cb--banner:first-of-type .cb-banner--split .cb-banner__wrap {grid-template-columns: 1fr}
    .cb-page--top > section.cb--banner:first-of-type .cb-banner--split .cb-banner__side {display: none}
    .cb-page--top > section.cb--banner:first-of-type .cb-banner__wrap {padding: 24px 20px !important}
    .cb-page--top > section.cb--banner:first-of-type .cb-banner--overlay .cb-banner__wrap {min-height: 260px; padding: 28px 20px !important}
}
@media (max-width: 575px) {
    .cb-page--around.cb-page--top {padding-top: 12px}
    .cb-page--around.cb-page--top > section.cb--banner:first-of-type {margin: 0 16px}
    .cb-page--top > section.cb--banner:first-of-type .cb-banner__title {font-size: 24px}
    .cb-page--top > section.cb--banner:first-of-type .cb-banner__text {font-size: 14px}
    .cb-page--top > section.cb--banner:first-of-type .cb-banner__points li {font-size: 13px}
}

/* цена в баннере после пунктов — с отступом */
.cb .cb-banner__points + .cb-banner__price {margin-top: 22px}

/* Тонкая типографика магазина: основной шрифт сайта лёгкий (400–500), поэтому в блоках посадочных — не жирнее 500.
   Названия, заголовки, цены, цифры, вопросы — 500; пункты, подписи полей и метки — 400. */
.cb :is(b, strong, th, .cb-title__h, .cb-banner__title, .cb-page-header__title, .cb-btn, .cb-card__name, .cb-tile__name, .cb-rich h3, .cb-rich h4,
    .cb-banner__price b, .cb-faq__q, .cb-stats__value, .cb-stats__affix--word, .cb-infoblock__name, .cb-form__title, .cb-form-featured__info-title,
    .cb-product__price b, .cb-product-modal__title, .cb-reviews__name, .cb-reviews__avatar--letter, .cb-shop-cat__name, .cb-shop-cat__letter,
    .cb-shop-catlist__name, .cb-shop-card__price b, .cb-shop-share__title, .cb-tablePrice__table thead th, .cb-tablePrice__table td.cb-tablePrice__price,
    .cb-tablePrice__group-name, .cb-tablePrice__line-price, .cb-tablePrice__tariff-name, .cb-calc__total, .cb-contacts__phone, .cb-contacts__stub-address) {font-weight: 500}
.cb :is(.cb-title__eyebrow, .cb-banner__eyebrow, .cb-banner__points li, .cb-stats__label, .cb-form__label, .cb-form__success, .cb-form__interest,
    .cb-contacts__label, .cb-contacts__email, .cb-contacts__route, .cb-contacts__open, .cb-product__feature-value, .cb-product__currency,
    .cb-reviews__more, .cb-shop-badge, .cb-shop-card__ask, .cb-shop-share__until, .cb-tablePrice__table tbody th, .cb-tablePrice__badge,
    .cb-calc__label, .cb-calc__qty, .cb-calc__prefix, .cb-calc__currency, .cb-ba__tag, .cb-ba__caption) {font-weight: 400}
.cb .cb-title__h, .cb .cb-banner__title, .cb .cb-stats__value {letter-spacing: 0}

/* 26.10 (PageSpeed): первый блок посадочной — первый экран — без анимации появления: виден сразу, иначе заголовок и текст
   баннера проявлялись после запуска скрипта конструктора (LCP на телефоне 4 с) */
.cb-js .cb-page > section:first-of-type .cb-reveal, .cb-js .cb-page > section:first-of-type.cb-reveal {opacity: 1; transform: none; transition: none}

/* 27.10 (правка п.37): блок «Товары» на посадочной — после «В корзину» было две плашки сразу (своя тёмная блока + общее
   уведомление сайта «Товар добавлен в корзину», es-cart-toast) и своя узкая, текст столбиком. Своя скрыта — остаётся общая,
   как на всём сайте. 27.10-2 п.5: «В корзине» — зелёная, как везде на сайте. */
.cb-shop-toast {display: none !important}
.cb .cb-shop-card__cart.is-added {background: #1a9a4b; border-color: #1a9a4b; color: #fff}
.cb .cb-shop-card__cart.is-added:hover {background: #138039; border-color: #138039; color: #fff}

/* 27.10-2 п.6: карточка блока «Магазин: товары» — по утверждённой карточке каталога (тема Lite, products/20): название 14/400
   в две строки, цена 18/600, одна кнопка «В корзину» во всю ширину 36 px (было две кнопки 42 px разной ширины — «ебутся»).
   «Подробнее» остаётся только у товара без кнопки корзины (цена по запросу / нет в наличии). Телефон — 13 / 16 / 34 px. */
.cb .cb-shop-card__name {font-size: 14px; font-weight: 400; line-height: 1.4}
.cb .cb-shop-card__name a {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.cb .cb-shop-card__price {font-size: 18px; font-weight: 600; line-height: 1.5}
.cb .cb-shop-card__actions {display: flex; flex-direction: column; gap: 8px; width: 100%}
.cb .cb-shop-card__actions .cb-btn {width: 100%; height: 36px; min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 36px; justify-content: center}
.cb .cb-shop-card__actions:has(.cb-shop-card__cart) .cb-shop-card__more {display: none}
.cb .cb-shop-card__more {background: var(--es-btn2, #e5e7ec); border-color: var(--es-btn2, #e5e7ec); color: #1f2128}
.cb .cb-shop-card__more:hover {background: var(--es-btn2-h, #d8dbe2); border-color: var(--es-btn2-h, #d8dbe2); color: #1f2128}
@media (max-width: 660px) {
    .cb .cb-shop-card__name {font-size: 13px}
    .cb .cb-shop-card__price {font-size: 16px}
    .cb .cb-shop-card__actions .cb-btn {height: 34px; min-height: 34px; padding: 0 8px; font-size: 13px; line-height: 34px}
}