/* Полировка интерактивных состояний.
   Отдельный файл: сгенерированные Taptop стили не трогаем, чтобы правки
   пережили следующий экспорт. Подключается последним, поэтому при равной
   специфичности выигрывает он. */

:root {
    /* Сильная кривая: старт быстрый, поэтому отклик читается сразу.
       Встроенная ease слишком вялая на коротких дистанциях. */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── 1. Осмысленные переходы вместо «all 300ms ease» ──────────────────
   Экспорт транзишит all: браузер следит за каждым свойством, включая
   width/height/font-size, которые в этих же :hover-правилах и меняются —
   то есть на ховере пересчитывается лейаут. Перечисляем только то, что
   реально меняет вид, и укорачиваем до отзывчивых 180 мс. */
.button,
.button-text,
.link,
.link-block,
.menu__link-lvl1,
.menu__link-text,
.accordion__header,
.accordion__item {
    transition-property: color, background-color, background-image, border-color, opacity, transform;
    transition-duration: 180ms;
    transition-timing-function: var(--ease-out);
    transition-delay: 0s;
}

/* ── 2. Отклик на нажатие ─────────────────────────────────────────────
   Кроме cookie-баннера нажатие не подтверждалось ничем: между кликом и
   реакцией страницы не было ни одного кадра обратной связи. */
.button:active,
.link-block:active,
.accordion__header:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}

.menu__link-lvl1:active {
    transform: scale(0.98);
    transition-duration: 100ms;
}

/* ── 3. Видимый фокус с клавиатуры ────────────────────────────────────
   В экспорте дважды сброшен outline и нет ни одного :focus-visible —
   при переходе по Tab не видно, где находишься. Показываем только при
   клавиатурной навигации, мышь остаётся чистой. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.button:focus-visible,
.link-block:focus-visible,
.accordion__header:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── 4. Раскрытие ответа в FAQ ────────────────────────────────────────
   Аккордеон переключает display: none/block, поэтому плавно развернуть
   высоту нельзя — зато при смене display анимация стартует заново, и
   появление можно смягчить. Закрытие остаётся мгновенным: display
   выключает элемент сразу, это ограничение разметки. */
@keyframes faq-reveal {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.accordion__wrapper {
    animation: faq-reveal 220ms var(--ease-out) both;
}

/* ── 5. Химический состав: подписи ближе к бутылке ────────────────────
   Колонки разводит justify-content: space-between на всю ширину контейнера,
   поэтому на широком мониторе подписи улетали к самым краям и переставали
   читаться как ореол вокруг бутылки. Ограничиваем ширину самой раскладки —
   ручные отступы внутри колонок остаются нетронутыми, так что дуга, ради
   которой всё и верстали руками, сохраняется. */
@media (min-width: 992px) {
    .div--u-i4vjm9428 {
        width: 100%;
        max-width: min(1180px, 66vw);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── 6. Ховер только там, где есть настоящий курсор ───────────────────
   На тач-устройствах :hover залипает после тапа. */
@media (hover: hover) and (pointer: fine) {
    .link-block:hover,
    .button:hover {
        transform: translate3d(0, -1px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .accordion__wrapper {
        animation: none;
    }

    .button:active,
    .link-block:active,
    .accordion__header:active,
    .menu__link-lvl1:active,
    .link-block:hover,
    .button:hover {
        transform: none;
    }
}