/* Vse-mebeli.kz: mobile city list contrast and viewport fit.
   The theme's premium palette makes the modal white while the older mobile
   rule still paints all city names white. No desktop styles are changed. */
@media (max-width: 1023px) {
    .header__city-picker .city-picker__window {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
        border-radius: 0;
        background: #fff;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
        color: #3a2f27;
    }

    .header__city-picker .city-picker__form {
        flex: 0 0 auto;
    }

    .header__city-picker .city-picker__list {
        flex: 1 1 auto;
        height: auto;
        max-height: none;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .header__city-picker .city-picker__item,
    .header__city-picker .city-picker__item a,
    .header__city-picker .city-picker__item span {
        color: #3a2f27;
    }

    .header__city-picker .city-picker__item.active,
    .header__city-picker .city-picker__item.active a,
    .header__city-picker .city-picker__item.active span {
        color: #b18157;
    }

    .header__city-picker .city-picker__close-line {
        background: #3a2f27;
    }

    .header__city-picker .city-picker__item a:focus-visible {
        outline: 2px solid #b18157;
        outline-offset: -2px;
    }
}

@media (max-width: 575px) {
    .header__city-picker .city-picker__window {
        padding-top: 90px;
    }
}

/* Theme uses a white header but the original hamburger strokes are white.
   Keep the existing menu button and JS behavior: only correct its icon. */
@media (max-width: 1300px) {
    .header .header__menu-trigger .hamburger__lines {
        position: relative;
        display: block;
        width: 26px;
        height: 16px;
        margin-right: 0;
    }

    .header .header__menu-trigger .hamburger__line,
    .header .header__menu-trigger .hamburger__lines::after,
    .header .header__close-city .hamburger__line {
        background-color: #3a2f27;
        height: 2px;
        border-radius: 2px;
    }

    /* The template outputs two lines. Add the third visually with CSS. */
    .header .header__menu-trigger .hamburger__lines::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
        transition: opacity .2s ease;
        pointer-events: none;
    }

    /* Maintain the existing open-to-X animation, adjusted for taller lines. */
    .header .header__menu-trigger.open .hamburger__line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .header .header__menu-trigger.open .hamburger__line:nth-child(2) {
        transform: translateY(-7px) rotate(-45deg);
    }
    .header .header__menu-trigger.open .hamburger__lines::after {
        opacity: 0;
    }

    .header .header__menu-trigger:focus-visible {
        outline: 2px solid #b18157;
        outline-offset: 5px;
    }
}