/* 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;
    }
}

.selected {
    color: #20539F;
}

.big-button {
    background: linear-gradient(270deg, #6FBEFF 0%, #AFDCFF 100%);
}

h1 .selected {
    text-transform: uppercase;
}

.section__delivery {
    background: #D5D4D4;
}

/* === Фикс первой секции (hero) === */
/* Картинка-сцена была на всю ширину (#start .section__image{max-width:100%}) и форма уезжала
   под неё. Возвращаем ряд "картинка | форма" на десктопе и ограничиваем картинку на планшете. */
@media screen and (min-width: 481px) {
    #start .section__image.desk {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
        max-height: 100%;
    }
}

/* SEOX-2298 fix4: side-by-side "картинка | форма" только когда .section__container
   достаточно широк (≥1280). В диапазоне 769–1279 max-width:694 у section__container
   сжимал картинку до полоски (~42px) — на iPad 1024 «стиснулась картинка». */
@media screen and (min-width: 1280px) {
    #start .section__container > .section__column-container > .section__row-container:nth-child(2) {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    #start .section__container > .section__column-container > .section__row-container:nth-child(2) > picture {
        flex: 1 1 0;
        min-width: 0;
        align-self: stretch;
        display: flex;
        overflow: hidden;
        border-radius: 16px;
    }
}

/* SEOX-2298 fix4: до 1279 картинка hero идёт ОТДЕЛЬНОЙ строкой над формой,
   центрированная и ограниченная — не сжимается под узкий section__container. */
@media screen and (min-width: 481px) and (max-width: 1279px) {
    #start .section__container > .section__column-container > .section__row-container:nth-child(2) > picture {
        width: 100%;
        max-width: 460px;
        margin-inline: auto;
        display: flex;
        overflow: hidden;
        border-radius: 16px;
    }
}

/* === Фикс последней секции (reg) === */
/* В карточке справа было ДВА флакона: фоновый (bl15_bg2 как background-image контейнера)
   + передний bl15_img1. По макету — один флакон на светлой карточке. Убираем фоновый. */
#reg .section__image-container {
    background-image: none;
    background-color: #e9eef5;
}

/* Базовый .section__image имеет flex-shrink:0 — флакон в reg не сжимался под колонку.
   Снимаем, чтобы картинка ужималась по контейнеру. */
#reg .section__image {
    flex-shrink: 1;
}

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

/* === SEOX-2298 правки по комментам ревью (Anastasiya M) === */

/* fix1: аватары в отзывах были вдвое крупнее (96px). Уменьшаем до 48px на всех девайсах. */
#review .section__card .section__row-container.center img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: cover;
}

/* Блок автора (аватар + имя) прижать влево — класс .center давал justify-content:center. */
#review .section__card .section__row-container.center {
    justify-content: flex-start;
}

/* fix4 (десктоп): картинка в #solutions рендерилась по атрибуту width=1128 в колонке 564px
   с базовым object-fit:fill → растягивалась (AR 1.88 при натуральном 1.02). Вписываем в колонку. */
#solutions .section__column-container--relative .section__image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

/* fix2 (мобайл): отступ продукт→форма (gap колонки 48px) был больше, чем текст→продукт (40px).
   Выравниваем — делаем как «выше». */
@media screen and (max-width: 768px) {
    #start .section__container > .section__column-container:first-child {
        gap: 40px;
        row-gap: 40px;
    }
}

/* ===== PSI: backdrop-filter шапки только при скролле =============================
   backdrop-filter:blur на фиксированной .header задерживает первую отрисовку — браузер
   рендерит фон под шапкой и размывает его до показа (PSI mobile render-delay, SEOX-2298).
   Над сгибом (scrollY=0) шапка лежит на светлом hero, где blur не виден → отключаем его
   до скролла; при скролле (шапка наезжает на контент) blur возвращается. Тоггл .psi-blur
   навешивает inline-скрипт #psi-header-blur. Матовое стекло сохраняется при прокрутке. */
.header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.header.psi-blur {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}