/* overrides.css — сюда добавляй стили для перезаписи */

.sections__container-bg .section-bg-picture {
    position: absolute;
    inset: 0;
    min-width: 0;
    min-height: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.sections__container-bg .section-bg-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#start .section__row-container .flex-row-picture,
#start .section__column-container.mob .flex-row-picture {
    display: contents;
}

#reg .section__image-container .reg-split-picture {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}

#reg .section__image-container .reg-split-picture .section__image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

@media screen and (max-width: 768px) {
    #start .section__image-container>picture .section__image {
        max-width: 300px;
        max-height: 300px;
        margin-inline: auto;
    }
}

/* === Cholistin brand palette (по макету Figma): хайлайт ЗЕЛЁНЫЙ, CTA ЗОЛОТО === */
.selected {
    color: #658224;
}

.big-button {
    background: linear-gradient(to left, #fac465 0%, #ffe3a9 100%);
    color: #28261b;
}
.big-button:hover {
    filter: brightness(0.95);
}

h1 .selected {
    text-transform: uppercase;
}

.section__delivery {
    background: #D5D4D4;
}

/* ============================================================
   GENERIC single-2 layout fixes — запекаются в СТОК (не per-site).
   Источник: проверенные ревью-фиксы из single-2-vigormax (SEOX-2298),
   возвращены в сток на SEOX-2401, чтобы НЕ всплывать на каждом новом
   single-2-сайте. Бренд-зависимое (#reg background-image при дубль-
   флаконе bl15_bg2; точечный recolor) — НЕ здесь, делать per-site.
   ============================================================ */

/* === HERO #start: 2-колоночный layout ПО МАКЕТУ (block_1):
   слева H1 + интро + композитный визуал (пэкшот+пара+бейдж),
   справа панель заказа (выровнена по верху с H1), снизу полоса из 3 стат. === */
/* FLEXBOX + flex-wrap: колонки переносятся целиком (wrap), а не сплющиваются.
   min-width:min(Xpx,100%) форсит чистый перенос при 2×basis+gap > container, и
   full-width (без overflow) на узком. Панель кэпнута max-width — flex-grow не растягивает. */
#start .hero {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 48px;
    align-items: stretch;
    justify-content: center;
}
/* H1 в макете ~48px (cap-height 34), а не стоковые 64px */
#start h1 {
    font-size: 48px;
    line-height: 1.08;
}
#start .hero__col--left {
    flex: 1 1 480px;
    min-width: min(480px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
#start .hero__intro {
    margin: 0;
    max-width: 454px;
}
#start .hero__visual {
    display: block;
    width: 100%;
}
/* десктоп: ОДНА композит-картинка (.desk внутри picture).
   Обрезаем сверху (object-position:bottom) до 370px — иначе высокая картинка
   растягивала форму по высоте с пустотой снизу (ревью Anastasiya M). */
#start .hero__visual > picture .section__image {
    width: 100%;
    height: 370px;
    max-width: 560px;
    object-fit: cover;
    object-position: center bottom;
    border-radius: 20px;
    display: block;
}
/* мобайл-блок (.mob) рендерится стоковыми правилами single-2 (пэкшот + сцена) —
   тут только не даём ему ужиматься и центрируем */
#start .hero__visual .section__column-container.mob {
    width: 100%;
}
#start .hero__col--right {
    flex: 1 1 480px;
    min-width: min(480px, 100%);
    max-width: 556px;
    display: flex;
}
/* панель заказа = светло-голубая карточка по макету (#ecf0fc), не стоковый серый */
/* форма растягивается на всю высоту колонки (под высоту левой колонки) */
#start .hero__col--right .section__form {
    margin: 0;
    width: 100%;
    height: 100%;
    background: #eef3fc;
    border: 1px solid #d7e2f5;
    border-radius: 20px;
}
#start .hero__stats {
    margin-top: 48px;
}
/* тёмная полоса статов (сток) → текст БЕЛЫЙ как в макете (был тёмный-на-тёмном) */
#start .hero__stats .section__item .heading-style-h2 {
    color: #fff;
}
#start .hero__stats .section__item p {
    color: #e6e8eb;
}
/* при переносе колонок (≤1024) центрируем контент левой колонки */
@media screen and (max-width: 1024px) {
    #start .hero {
        gap: 28px;
    }
    #start .hero__col--left {
        align-items: center;
        text-align: center;
    }
    #start .hero__visual > picture .section__image {
        max-width: 440px;
        margin-inline: auto;
    }
    #start .hero__stats {
        margin-top: 32px;
    }
}

/* === #reg ПО МАКЕТУ (block_15): слева H2 + интро + пэкшот, справа панель заказа === */
/* FLEXBOX + flex-wrap (как hero): колонки переносятся, не сплющиваются */
#reg .reg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 48px;
    align-items: flex-start;
    justify-content: center;
}
#reg h2 {
    font-size: 36px;
    line-height: 1.12;
}
#reg .reg-col--left {
    flex: 1 1 480px;
    min-width: min(480px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* интро: #reg .container задаёт color:#fff (сток) → на белом фоне НЕВИДНО. Делаем тёмным. */
#reg .reg-intro {
    margin: 0;
    max-width: 512px;
    color: #28261b;
}
/* пэкшот ПРОЗРАЧНЫЙ → нужен фон (светло-зелёный register-product-background, как сток/макет) */
#reg .reg-visual {
    width: 100%;
    background: url('../images/register-product-background.webp') center/cover no-repeat;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
#reg .reg-visual .section__image {
    width: auto;
    height: 440px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0;
}
#reg .reg-col--right {
    flex: 1 1 480px;
    min-width: min(480px, 100%);
    max-width: 558px;
    display: flex;
}
/* панель = светло-голубая карточка по макету (как в hero) */
#reg .reg-col--right .section__form {
    margin: 0;
    width: 100%;
    background: #eef3fc;
    border: 1px solid #d7e2f5;
    border-radius: 20px;
}
@media screen and (max-width: 1024px) {
    #reg .reg-row {
        gap: 28px;
    }
    #reg .reg-col--left {
        align-items: center;
        text-align: center;
    }
}
/* мобайл: пэкшот в последней секции — высота 200px */
@media screen and (max-width: 768px) {
    #reg .reg-visual {
        padding: 16px;
    }
    #reg .reg-visual .section__image {
        height: 200px;
    }
}

/* === #start / #reg по макету (block_1/block_15) + ревью «сзади блока нужен белый фон, как на др. лендах»:
   контент сидит на БЕЛОЙ карточке поверх светло-серой секции (как hero на референс-лендах).
   Тёмная полоса статов остаётся СНАРУЖИ белой карточки (на сером фоне секции). === */
.sections__container.start,
.sections__container.reg {
    background-color: #ebedf2;
}
#start .hero,
#reg .reg-row {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
}
@media screen and (max-width: 768px) {
    #start .hero,
    #reg .reg-row {
        padding: 20px;
        border-radius: 18px;
    }
}

/* лого в шапке: ширина по соотношению сторон (без растяжения от атрибута width). */
.header__logo {
    width: auto;
}

/* отзывы: аватары были 96px → 48px на всех девайсах; блок автора влево. */
#review .section__card .section__row-container.center img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: cover;
}
#review .section__card .section__row-container.center {
    justify-content: flex-start;
}

/* #solutions: картинка растягивалась (база object-fit:fill, width=атрибут в узкой колонке) → cover. */
#solutions .section__column-container--relative .section__image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* SEOX-2401 ревью: бренд-хайлайт .selected (#20539F) в #solutions на тёмном фоне
   (#3d3f42) плохо читается. Только #solutions тёмная среди стандартных секций →
   светло-синий тон. Остальные .selected на светлом фоне — #20539F остаётся. */
#solutions .selected {
    color: #9ec64f;
}

/* ============================================================
   Cholistin «новий тип знижки» — селектор Promocja M / Promocja L
   (макет: order-panel hero/reg/popup + блок Prezzo). Per-site.
   ============================================================ */
.promo-select { display: flex; gap: 12px; margin-bottom: 12px; }
.promo-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 12px; border: 2px solid #e3e6ea; border-radius: 14px; background: #fff; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.promo-card__radio { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; margin: 0; cursor: pointer; accent-color: #155dfc; }
.promo-card--l .promo-card__radio { accent-color: #00bc7d; }
.promo-card__title { font-weight: 700; font-size: 15px; color: #28261b; line-height: 1; }
.promo-card__img { height: 96px; width: auto; max-width: 100%; object-fit: contain; }
.promo-card__price { font-weight: 800; font-size: 17px; color: #fff; border-radius: 999px; padding: 7px 16px; line-height: 1; }
.promo-card__price--m { background: #155dfc; }
.promo-card__price--l { background: #f46629; }
.promo-card__cardnote { font-size: 12px; color: #3a3f45; font-weight: 600; line-height: 1.25; }
.promo-card__cardnote b { color: #28261b; }
.promo-card--m:has(.promo-card__radio:checked) { border-color: #155dfc; background: #f3f7ff; }
.promo-card--l:has(.promo-card__radio:checked) { border-color: #00bc7d; background: #ecfbf4; }
.promo-disclaimer { margin: 0 0 14px; padding: 9px 12px; border: 1px dashed #f46629; border-radius: 10px; background: #fff3ec; color: #e0521f; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.3; }
@media (max-width: 420px) { .promo-select { flex-direction: column; } .promo-card__img { height: 88px; } }

/* #app — карточки цен Promocja M / Promocja L (блок Prezzo макета):
   шапка сверху, карточки M|L В РЯД на всю ширину, дисклеймер + CTA по центру снизу. */
/* FLEXBOX + flex-wrap; карты M/L почти равны (grow 558:587 = макет), на узком — перенос в столбик */
#app .price-cards { display: flex; flex-wrap: wrap; gap: 24px 54px; width: 100%; max-width: 1200px; margin: 28px auto 0; align-items: stretch; justify-content: center; }
.price-card { flex: 558 1 340px; min-width: min(320px, 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 26px; border: 1px solid #e8eaed; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 10px 34px rgba(20, 30, 50, 0.05); }
.price-card--l { flex: 587 1 360px; border: 2px solid #00bc7d; background: #ecfbf4; box-shadow: none; }
.price-card__title { font-weight: 700; font-size: 17px; color: #28261b; }
.price-card__img { height: 210px; width: auto; max-width: 100%; object-fit: contain; }
.price-card__pill { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; border-radius: 999px; padding: 11px 22px; line-height: 1; white-space: nowrap; }
.price-card__pill--m { background: #155dfc; font-size: 20px; min-width: 150px; }
.price-card__pill--blue { background: #155dfc; font-size: 18px; }
.price-card__pill--l { background: #f46629; font-size: 18px; }
.price-card__plus { font-weight: 800; font-size: 20px; color: #28261b; }
.price-card__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.price-card__note { font-size: 15px; color: #3a3f45; font-weight: 600; }
.price-card__note b { color: #28261b; }
.promo-disclaimer--center { max-width: 520px; margin: 22px auto 0; }
#app .section__bottom-container { margin-top: 24px; }
@media (max-width: 760px) {
    #app .price-cards { gap: 20px; }
    .price-card__img { height: 178px; }
    .price-card__sum { gap: 6px; }
    .price-card__pill--blue, .price-card__pill--l { font-size: 16px; }
}
/* мобайл: шапка блока цен (H2 + интро) была в ряд и сплющивалась → в столбик (ревью Anastasiya M) */
@media (max-width: 768px) {
    #app .section__top-container--flex-start {
        flex-direction: column;
        gap: 12px;
    }
}