/** Dermexil — палитра по макету (Figma): сине-стальной бренд #527098 + золотой CTA.
    Перекрашивает стоковый зелёный multi-1 в синий. Цвета сэмплены пиксельно из дизайна. **/

/* ===== Ревью Anastasiya M (rework) — мобайл/таблет ===== */
/* #buy: квадратный пэкшот обрезался object-fit:cover на моб/таблете → показывать целиком */
#buy .buy-card__img {
    object-fit: contain !important;
}

/* composition: пэкшот слишком большой на планшете (height:800px не ограничивался >1024) →
   ограничить высоту как у других блоков */
@media (max-width: 1024px) {
    #composition .section__image,
    #composition .section__image.big-width {
        height: auto;
        max-height: 320px;
    }
}

/* #where-page (стр. «Причини»): карточки были уже картинки и прижаты влево (пустота справа)
   → на всю ширину контейнера, как картинка */
#where-page .section__card {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* #prec: картинки оставались 300px на узком мобайле, тогда как соседние блоки
   (#why/#how/#effects) ужимаются до 200px → выровнять как у них */
@media (max-width: 420px) {
    #prec .img-card .section__image {
        height: 200px;
        max-height: 200px;
    }
}

:root {
    /* стоковые "зелёные" токены → бренд-синий #527098 */
    --accent-green: #527098;
    --accent-green-dark: #527098;
    --accent-green-soft: #EDF1F8;
    --accent-green-border: #527098;
    --start-accent: #527098;
    /* акцентная stat-карточка ("yellow") → светло-серая, как в макете */
    --primary-yellow: #F5F5F5;
    /* CTA-кнопка — золотой градиент из макета */
    --big-button-gradient: linear-gradient(90deg, #F7D6AA 0%, #FEC06E 100%);
}

/* акцентная карточка статистики — серая (#F5F5F5), не персиковая */
#start .section__item.yellow {
    background: #F5F5F5;
}

/* CTA: золотой градиент, тёмный текст (#28261B по макету) */
.big-button {
    background: linear-gradient(90deg, #F7D6AA 0%, #FEC06E 100%);
    color: #28261B;
}

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

/* hero H1 + бренд-хайлайт — бренд-синий #527098 */
#start h1 {
    color: #527098;
}

#start .selected {
    -webkit-text-fill-color: #527098;
}

.selected {
    background: #527098;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ревью Anastasiia H: текст-карточки в card-col (#prec и т.п.) тянулись по высоте
   картинки → большой пустой зазор снизу. Центрируем контент по вертикали (натурально). */
.card-col .text-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== OFFER PAGE по макету ===== */
/* таймер-карточка: «Limited offer» (⏳) — заголовок; «50% discount» — серая строка ПОД ним.
   Каждая строка на всю ширину, иначе скидка прилипает к «Limited offer» (flex-wrap-контейнер). */
#timer-page .timer-top,
#timer-page .timer-offer-label,
#timer-page .timer-discount {
    width: 100%;
    flex-basis: 100%;
}

/* Ревью Anastasiia H (rework): текст таймер-карточки (Do not wait / Limited offer /
   50% discount / Remaining + сам таймер) — по центру. */
#timer-page .section__inner-container.large-width {
    text-align: center;
}

#timer-page .timer-items-container {
    justify-content: center;
}

.timer-offer-label {
    margin: 4px 0 0;
}

.timer-discount {
    margin: 4px 0 12px;
    color: #787878;
}
/* #reg: центрированная карточка-форма на лавандовом фоне (а не картинка+форма) */
#reg .reg-centered {
    max-width: 640px;
    margin: 0 auto;
    background: #EDF1F8;
    border-radius: 16px;
}

#reg .reg-centered .section__form {
    background: transparent;
    box-shadow: none;
}

/* #how-page шаг 1: форма заказа вместо картинки — компактная, в высоту 354px
   (как картинки в соседних шагах), без заголовка. */
#how-page .form-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    height: 354px;
}

#how-page .form-card .section__form {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;
    gap: 10px;
    justify-content: center;
}

#how-page .form-card .price__values-container {
    margin: 0;
}

#how-page .form-card .price__previous-value,
#how-page .form-card .price__current-value {
    padding: 8px 12px;
    font-size: 16px;
}

#how-page .form-card .section__form-input {
    padding: 10px 14px;
    font-size: 14px;
}

#how-page .form-card .section__delivery {
    padding: 6px 10px;
    font-size: 13px;
}

#how-page .form-card .section__form-button {
    padding: 11px;
    font-size: 15px;
}

/* Ревью Anastasiya M (таблет): карточки отзывов в #reviews-page ужимаются до --size-full(588px)
   и прижимались влево (align-items:stretch) → центрировать по горизонтали. На деске/мобайле no-op. */
#reviews-page .section__inner-container.column {
    align-items: center;
}