/** Нужен для быстрых фиксов типа "подровнять" или "подвинуть" **/

:root {
    --primary-yellow: #E6F1E0;
}


#start .section__item.yellow {
    background: #F8E3D0;
}


.big-button {
    background: linear-gradient(90deg, #F2D8B0 0%, #FF934B 100%);
}

.big-button.black {
    background: linear-gradient(90deg, #FFF 0%, #DCECFF 100%);
}

#start h1 {
    color: var(--accent-green-dark);
}

#start .selected {
    -webkit-text-fill-color: var(--accent-green-dark);
}

.selected {
    background: var(--accent-green-dark);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SEOX-2709 Radiance brand patch */
:root {
    --accent-green-dark: #C97785;
    --accent-green: #E87189;
    --accent-green-border: #E9C4C9;
    --accent-green-soft: #F7ECEA;
    --primary-yellow: #F6E7E6;
    --start-accent: #C97785;
}

/* CTA: голубой градиент макета + тёмный текст; пилюли-линки — розовые */
.big-button {
    background: linear-gradient(90deg, #B6E5FF 0%, #7DC7FF 100%);
    color: #28261B;
}
.big-button.green-btn {
    background: #E87189;
    color: #fff;
}
.big-button:hover {
    filter: brightness(0.95);
}
.big-button.green-btn:hover {
    background: #E87189;
}

#start h1 {
    color: #C97785;
}
#start .selected {
    -webkit-text-fill-color: #C97785;
}
.selected {
    background: #C97785;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Стат-карточки hero: белая / светло-серая / тёмная (по макету) */
#start .section__item.yellow {
    background: #F5F5F4;
}

/* Селектор количества (новый тип скидки) */
.qty-select {
    display: flex;
    gap: 12px;
    width: 100%;
}
.qty-card {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px 12px;
    border: 2px solid #EDEDEC;
    border-radius: 14px;
    background: #F5F5F4;
    cursor: pointer;
    text-align: center;
}
.qty-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.qty-radio {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border: 2px solid #C7C7C7;
    border-radius: 50%;
    background: #fff;
}
.qty-card:has(input:checked) {
    border-color: #155DFC;
    background: #ECF2FC;
}
.qty-card:has(input:checked) .qty-radio {
    border-color: #155DFC;
    background: radial-gradient(circle, #fff 0 4px, #155DFC 5px);
}
.qty-card--best:has(input:checked) {
    border-color: #00BC7D;
    background: #EFFCF5;
}
.qty-card--best:has(input:checked) .qty-radio {
    border-color: #00BC7D;
    background: radial-gradient(circle, #fff 0 4px, #01BB49 5px);
}
.qty-card__title {
    font-weight: 700;
    font-size: 15px;
    color: #28261B;
}
.qty-card__img {
    height: 96px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.qty-card__img img {
    height: 96px;
    width: auto;
    object-fit: contain;
}
.qty-card__unit {
    display: block;
    background: #155DFC;
    color: #fff;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.3;
    border-radius: 6px;
    padding: 5px 8px;
    width: 100%;
}
.qty-card__total {
    display: block;
    background: #fff;
    color: #00A63E;
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1.3;
    border-radius: 6px;
    padding: 5px 8px;
    width: 100%;
}
.qty-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #01BB49;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 2;
}
@media (max-width: 560px) {
    .qty-select {
        flex-direction: column;
    }
}

/* Hero: карта заказа по центру, без бокового пэкшота (макет) */
#start .section__main-container .section__inner-container:not(.top) {
    justify-content: center;
}
#start .section__form--tracklink {
    max-width: 820px;
    width: 100%;
}
#reg .section__form--tracklink {
    max-width: 820px;
    width: 100%;
    margin-inline: auto;
}


/* offer step-1: мини-карта (флаконы + кнопка), высота в ряд со steps 2-3 */
#how-page .form-card { height: 354px; }
#how-page .form-card .section__form--tracklink { height: 100%; justify-content: center; gap: 14px; }
#how-page .offer-step-img { max-height: 220px; width: auto; object-fit: contain; margin-inline: auto; }

/* ── Ревью Anastasiya M 21.07.2026 ─────────────────────────────────────── */

/* 1. Флаконы в карточках акции крупнее: десктоп 200px, мобайл 150px */
.qty-card__img,
.qty-card__img img {
    height: 200px;
}
@media (max-width: 768px) {
    .qty-card__img,
    .qty-card__img img {
        height: 150px;
    }
}

/* 2. Блок заказа: фон дизайнера вместо однотонной заливки */
#buy .buy-card {
    background-color: var(--accent-green-soft);
    background-image: url("../images/order-banner-bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    #buy .buy-card {
        background-image: url("../images/order-banner-bg_mob.webp");
    }
}

/* 3. Цена за штуку 18px, «Totale…» 16px — на ВСЕХ девайсах */
.qty-card__unit {
    font-size: 18px;
}
.qty-card__total {
    font-size: 16px;
}

/* 4. Мобайл/таблет: кадрирование фото по центру (сток режет по верху,
      циферблат часов уезжал вбок) */
@media (max-width: 1024px) {
    #how .section__image,
    #prec .section__image,
    #path .section__image,
    #effects .section__image {
        object-position: center center;
    }
}

/* 5. CTA формы во всю ширину карточки (сток режет max-width: --size-medium) */
.section__form--tracklink .big-button {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-align: center;
}

/* 6. Таблет: пэкшот состава 300px высотой */
@media (max-width: 1024px) {
    #composition .section__image.big-width {
        max-height: 300px;
    }
}

/* 7. Карта заказа ОДИНАКОВАЯ в hero и в последнем блоке: обе заполняют
      контейнер своей секции (ревью: «зроби форму однаковою на першому і
      останньому слайді») */
/* белая карточка-обёртка #reg убрана: форма акции должна выглядеть точно так
   же, как в hero (одинаковая ширина и отступы) */
#reg .section__inner-container.rounded.shadowed {
    padding: 0;
    background: transparent;
    box-shadow: none;
}
/* на ≤1024 сток режет контейнер до --size-full (588px) — снимаем, иначе форма
   в последнем блоке уже, чем в hero */
@media (max-width: 1024px) {
    #reg .section__inner-container,
    #reg .section__inner-container.rounded.shadowed {
        max-width: none;
        width: 100%;
    }
}
#start .section__inner-container.large-width,
#start .section__form--tracklink,
#reg .section__inner-container.large-width,
#reg .section__form--tracklink {
    max-width: none;
    width: 100%;
}

/* Флаконы не вылезают за пределы карточки на узких вьюпортах */
.qty-card__img img {
    max-width: 100%;
}

/* ── Ревью-3: форма акции в последнем блоке белая (сливалась с фоном) ───── */
#reg .section__form--tracklink {
    background-color: #fff;
    box-shadow: 0 9px 7.8px #aeaeae26;
}