/* =========================================================
   HERO-ISO — БАР (вкусы + кнопки)
   ДЕСКТОП: обычная плавающая панель внизу sticky-экрана.
   МОБИЛЬНЫЕ (≤1024): фиксированная нижняя панель со «ручкой»-
   аккордеоном (сворачивается/разворачивается), чтобы не
   закрывать контент стадий 3-5.
   ========================================================= */

.hero-iso__bar {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 20;
    width: min(92vw, 900px);
    transform: translateX(-50%) translateY(30px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                transform .5s cubic-bezier(.22,.61,.36,1);
}
.hero-iso.is-stage-2 .hero-iso__bar,
.hero-iso.is-stage-3 .hero-iso__bar,
.hero-iso.is-stage-4 .hero-iso__bar,
.hero-iso.is-stage-5 .hero-iso__bar {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ===== Ряд вкусов (десктоп) ===== */
.hero-iso__flavors { margin-bottom: var(--space-4); }

.hero-iso__flavors-label {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}
.hero-iso__flavors-list {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero-iso__flavor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.hero-iso__flavor:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
.hero-iso__flavor-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--flavor-color);
    transition: transform .25s ease, box-shadow .25s ease;
}
.hero-iso__flavor-name {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
}
.hero-iso__flavor.is-active {
    border-color: var(--flavor-color);
    color: var(--flavor-color);
}
.hero-iso__flavor.is-active .hero-iso__flavor-dot {
    transform: scale(1.3);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--flavor-color) 25%, transparent);
}

/* ===== Кнопки (десктоп) ===== */
.hero-iso__buttons-row {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hero-iso .btn-primary {
    background: var(--flavor-accent, var(--accent));
    color: var(--accent-on, #fff);
}

/* ============ Плавная смена контента вкусов (общая логика) ============ */
[data-flavor-fade] {
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
}
.hero-iso.is-flavor-changing [data-flavor-fade] {
    opacity: 0;
    transform: translateY(6px);
}

[data-flavor-swap-img] { position: relative; }
[data-flavor-swap-img] .hero-iso__bottle-img {
    transition: opacity .5s ease;
}
[data-flavor-swap-img] .hero-iso__bottle-img:not(.is-active) {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.hero-iso__composition-item,
.hero-iso__benefit {
    opacity: 0;
    transform: translateY(10px);
    animation: flavorItemIn .5s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes flavorItemIn {
    to { opacity: 1; transform: translateY(0); }
}

.hero-iso__bottle-img { transition: opacity .25s ease; }
.hero-iso__bottle-img.is-swapping { opacity: 0; }

.hero-iso__comp-col { transition: opacity .3s ease; }
.hero-iso__comp-col.is-comp-changing { opacity: 0; }

.hero-iso__benefits-grid { transition: opacity .3s ease; }
.hero-iso__benefits-grid.is-benefits-changing { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    [data-flavor-fade],
    .hero-iso__composition-item,
    .hero-iso__benefit {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-iso__bottle-img { transition: none !important; }
    .hero-iso__bottle-img.is-swapping { opacity: 1 !important; }
    .hero-iso__comp-col { transition: none !important; }
    .hero-iso__comp-col.is-comp-changing { opacity: 1 !important; }
    .hero-iso__benefits-grid { transition: none !important; }
    .hero-iso__benefits-grid.is-benefits-changing { opacity: 1 !important; }
}

.hero-iso__bar-handle {
    display: none;
}


/* =========================================================
   МОБИЛЬНЫЙ БАР (≤1024) — ОДИН ИСТОЧНИК ПРАВДЫ
   Фиксированная стеклянная панель внизу экрана с «ручкой».
   Свёрнута по умолчанию (видна только ручка с активным
   вкусом), разворачивается по тапу — класс .is-open ставит JS.
   Всё, что раньше было раскидано по трём дублирующимся
   @media-блокам, сведено сюда одним непротиворечивым набором.
   ========================================================= */
@media (max-width: 1024px) {

    .hero-iso__bar {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        top: auto;
        z-index: 1001;
        width: min(94vw, 460px);
        max-height: min(70dvh, 520px);
        display: flex;
        flex-direction: column;
        padding: 0;
        border-radius: var(--radius-xl);
        overflow: hidden;
        background: rgba(255, 255, 255, .78);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, .5);
        box-shadow: var(--shadow-xl);
        transform: translateX(-50%);
        transition: opacity .5s cubic-bezier(.22,.61,.36,1);
    }
    [data-theme="dark"] .hero-iso__bar {
        background: rgba(24, 24, 24, .82);
        border-color: rgba(255, 255, 255, .12);
    }

    /* стадии появления — сохраняем центрирование, без translateY */
    .hero-iso.is-stage-2 .hero-iso__bar,
    .hero-iso.is-stage-3 .hero-iso__bar,
    .hero-iso.is-stage-4 .hero-iso__bar,
    .hero-iso.is-stage-5 .hero-iso__bar {
        transform: translateX(-50%);
    }

    /* ---- Ручка (всегда видима, тап открывает/закрывает панель) ---- */
    .hero-iso__bar-handle {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        flex-shrink: 0;
        padding: var(--space-4) var(--space-4) var(--space-3);
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--text);
        font-family: var(--font-body);
        position: relative;
    }
    .hero-iso__bar-handle-grip {
        position: absolute;
        top: 7px; left: 50%;
        transform: translateX(-50%);
        width: 36px; height: 4px;
        border-radius: var(--radius-full);
        background: color-mix(in srgb, var(--text) 20%, transparent);
    }
    .hero-iso__bar-handle-label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-size: 15px;
        font-weight: 600;
    }
    .hero-iso__bar-handle-dot {
        width: 12px; height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
        background: var(--flavor-color, currentColor);
    }
    .hero-iso__bar-chevron {
        width: 22px; height: 22px;
        margin-left: auto;
        color: var(--text-secondary);
        transition: transform .4s cubic-bezier(.22,.61,.36,1);
        flex-shrink: 0;
    }
    .hero-iso__bar.is-open .hero-iso__bar-chevron {
        transform: rotate(180deg);
    }

    /* ---- Раскрываемая панель ---- */
    .hero-iso__bar-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1);
        overflow-y: auto;
    }
    .hero-iso__bar.is-open .hero-iso__bar-panel {
        grid-template-rows: 1fr;
    }
    .hero-iso__bar-panel-inner {
        overflow: hidden;
        min-height: 0;
        padding: 0 var(--space-4);
    }
    .hero-iso__bar.is-open .hero-iso__bar-panel-inner {
        padding-top: var(--space-2);
        padding-bottom: var(--space-4);
        overflow: visible;
    }

    /* ---- Вкусы: подпись скрыта, кружки по центру ---- */
    .hero-iso__flavors-label { display: none; }
    .hero-iso__flavors { margin-bottom: var(--space-4); }

    .hero-iso__flavors-list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
    }

    .hero-iso__flavor {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .2s ease;
    }
    .hero-iso__flavor:hover { background: transparent; }
    .hero-iso__flavor-name { display: none; }

    .hero-iso__flavor-dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        transition: box-shadow .2s ease;
    }

    /* Активный — кольцо через box-shadow (без обрезки, без scale-дрожания) */
    .hero-iso__flavor.is-active { transform: none; }
    .hero-iso__flavor.is-active .hero-iso__flavor-dot {
        box-shadow:
            0 0 0 3px var(--surface),
            0 0 0 5px var(--flavor-color, currentColor);
    }

    /* ---- Кнопки — в столбик, во всю ширину ---- */
    .hero-iso__buttons-row {
        flex-direction: column;
        gap: var(--space-3);
    }
    .hero-iso__buttons-row .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Телефоны — бар чуть уже, отступы компактнее */
@media (max-width: 600px) {
    .hero-iso__bar {
        width: min(94vw, 400px);
        max-height: min(72dvh, 480px);
    }
    .hero-iso__bar-handle {
        padding: var(--space-3) var(--space-3) var(--space-2);
    }
    .hero-iso__bar-panel-inner {
        padding: 0 var(--space-3);
    }
    .hero-iso__bar.is-open .hero-iso__bar-panel-inner {
        padding-top: var(--space-2);
        padding-bottom: var(--space-3);
    }
}

@media (max-width: 400px) {
    .hero-iso__bar { width: min(95vw, 340px); }
    .hero-iso__flavor { width: 32px; height: 32px; min-width: 32px; }
    .hero-iso__flavor-dot { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-iso__bar-panel,
    .hero-iso__bar-chevron { transition: none !important; }
}

@media (max-width: 1024px) {

    /*
        Мобильный бар:
        - всегда виден;
        - fixed внизу;
        - получает смещение вверх, когда виден footer.
    */
    .hero-iso .hero-iso__bar {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%);

        /* fallback */
        bottom: calc(12px + var(--bar-footer-offset, 0px));

        /* основной вариант с safe-area */
        bottom: calc(
            max(12px, env(safe-area-inset-bottom)) +
            var(--bar-footer-offset, 0px)
        );
    }

    /*
        Дублируем для stage-состояний, чтобы точно не было translateY(30px)
        и скрытия на мобильных.
    */
    .hero-iso.is-stage-2 .hero-iso__bar,
    .hero-iso.is-stage-3 .hero-iso__bar,
    .hero-iso.is-stage-4 .hero-iso__bar,
    .hero-iso.is-stage-5 .hero-iso__bar {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%);
    }

    /*
        Опционально: чтобы раскрытая панель не вылезала выше viewport,
        когда футер уже занял часть экрана.
    */
    .hero-iso__bar {
        max-height: min(70vh, 520px);
        max-height: min(
            70dvh,
            520px,
            max(
                220px,
                calc(100dvh - var(--bar-footer-offset, 0px) - 24px)
            )
        );
    }

    /*
        Fallback без JS: если JS не сработает, footer может просто
        перекрывать бар. Важно, чтобы у footer был фон.
    */
    .site-footer {
        position: relative;
        z-index: 600;
    }
}