/* === Stats + Features editorial section === */
/* FIX 2026-07-15 (палитра): белого #ffffff в палитре AZBI нет — кремовый
   #fffbed и есть «белый» этого сайта. Секция сейчас перекрыта классом
   .s-warm и рендерится кремовой, так что правка тут визуально ничего не
   меняет — но снимает мину: сними .s-warm, и посреди кремовой страницы
   вылезет холодная белая плита. Базовое правило должно быть брендовым. */
.hero-stats-features {
    background-color: var(--color-brand-cream) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.tech-container {
    max-width: 1240px !important;
    width: 100% !important;
    padding: 0 var(--spacing-lg) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 85vh !important;
    max-height: 720px !important;
    min-height: 520px !important;
}

.stats-features-layout {
    display: grid !important;
    grid-template-columns: 1.05fr 0.95fr !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    gap: 5rem !important;
    align-items: stretch !important;
}

/* FIX 2026-07-15 (палитра): та же мина, что у .hero-stats-features выше —
   левую колонку уже гасит `.s-warm .editorial-left {background:transparent}`
   в конце файла, но базовое значение оставалось белым. */
.editorial-left {
    background-color: var(--color-brand-cream) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

.editorial-left-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.editorial-badge {
    align-self: flex-start !important;
    padding: 0.45rem 1.1rem !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--color-brand-green) !important;
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    background-color: rgba(17, 112, 59, 0.05) !important;
}

.editorial-title {
    font-family: 'Galdern', 'HelveticaNeueCyr', 'Arial Black', sans-serif !important;
    font-size: clamp(2.3rem, 3.8vw, 3.4rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    color: var(--color-brand-black) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

.editorial-title span.highlight-underline {
    color: var(--color-brand-green) !important;
    position: relative !important;
    display: inline-block !important;
}

.editorial-title span.highlight-underline::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 0 !important;
    width: 100% !important;
    height: 8px !important;
    background-color: rgba(252, 185, 92, 0.4) !important;
    z-index: -1 !important;
    border-radius: 4px !important;
}

/* Asymmetrical Metrics Grid */
.editorial-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem 2rem !important;
    border-top: 2px solid rgba(1, 8, 17, 0.1) !important;
    padding-top: 2rem !important;
}

.metric-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    border-left: 3px solid var(--color-brand-orange) !important;
    padding-left: 1.2rem !important;
}

.metric-label {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--color-brand-black) !important;
    opacity: 0.65 !important;
    line-height: 1.3 !important;
}

/* Right Panel: Symmetrical stack of green tactile cards */
/* FIX 2026-07-15 (палитра): а вот эта белая плита была ВИДНА. Левую колонку
   в своё время погасили (`.s-warm .editorial-left` в конце файла), про
   правую забыли — и на кремовой секции она вставала холодным белым
   прямоугольником 579×588 со швом ровно по x=786, где кончается левая
   колонка. Шов читался как ошибка вёрстки, а не как приём. */
.editorial-right {
    background-color: var(--color-brand-cream) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-sizing: border-box !important;
    gap: 1.5rem !important;
}

.editorial-card {
    background-color: var(--color-brand-green) !important;
    color: #ffffff !important;
    border: 2px solid var(--color-brand-black) !important;
    border-radius: 24px !important;
    padding: 1.5rem 2rem !important;
    display: flex !important;
    gap: 1.5rem !important;
    align-items: center !important;
    flex: 1 !important;
    box-shadow: 4px 4px 0px var(--color-brand-black) !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.35s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.editorial-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    transition: left 0.6s ease !important;
}

.editorial-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 7px 7px 0px var(--color-brand-black) !important;
}

.editorial-card:hover::before {
    left: 150% !important;
}

.card-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    /* Скриншот-эталон: белый круг с тёмной иконкой (не оранжевый) */
    background: #ffffff !important;
    color: var(--color-brand-black) !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: 2px 2px 0px var(--color-brand-black) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.editorial-card:hover .card-icon-wrap {
    transform: scale(1.1) rotate(10deg) !important;
}

.card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

/* FIX 2026-07-15 (контраст): тот же оранжевый-по-зелёному, что и в
   дубликате блока ниже (см. .card-title ~строка 612, он и побеждает по
   source order). Правится и здесь, чтобы запрещённая пара не всплыла
   обратно, если дубликаты когда-нибудь схлопнут. */
.card-title {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    color: var(--color-brand-cream) !important;
}

.card-text {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    color: var(--color-brand-cream) !important;
    opacity: 0.9 !important;
    margin: 0 !important;
}
/* ==========================================================================
   Responsive Height scaling override for Short Screens / Laptops
   ========================================================================== */
@media (min-width: 992px) and (max-height: 850px) {
    /* Slide 1: Hero Section Layout Shrinkage */
    .hero-premium__text {
        padding: 5rem 4rem 3rem 5rem !important;
    }
    .hero-premium__badge {
        margin-bottom: 1.5rem !important;
    }
    .hero-premium__title {
        font-size: clamp(2.4rem, 4.2vw, 3.8rem) !important;
        margin-bottom: 1rem !important;
    }
    .hero-premium__sub {
        font-size: 1rem !important;
        margin-bottom: 1.8rem !important;
    }
    .ds-poster-card {
        width: 330px !important;
        height: 440px !important;
        border-radius: 20px !important;
        box-shadow: 8px 8px 0px var(--color-brand-black) !important;
    }
    .poster-wrapper {
        padding: 16px 16px 56px 16px !important;
    }
    .poster-details {
        padding: 16px !important;
        font-size: 10px !important;
    }
    .hero-premium__3d::after {
        background: linear-gradient(90deg, #0d5530 0%, rgba(13, 85, 48, 0.3) 24%, transparent 56%) !important;
    }

    /* Slide 2: Stats & Features Layout Shrinkage */
    .tech-container {
        height: 88vh !important;
        max-height: 650px !important;
        min-height: 460px !important;
    }
    .stats-features-layout {
        gap: 3rem !important;
    }
    .editorial-badge {
        margin-bottom: 16px !important;
    }
    .editorial-title {
        font-size: 34px !important;
        margin-bottom: 12px !important;
    }
    .editorial-desc {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    .editorial-metrics {
        gap: 16px 24px !important;
        padding-top: 16px !important;
    }
    .metric-number {
        font-size: 28px !important;
    }
    .metric-label {
        font-size: 10px !important;
    }
    .editorial-right {
        gap: 14px !important;
    }
    .editorial-card {
        min-height: 110px !important;
        height: auto !important;
        padding: 16px 20px !important;
        border-radius: 18px !important;
        gap: 14px !important;
    }
    .card-icon-wrap {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.1rem !important;
    }
    .card-title {
        font-size: 16px !important;
    }
    .card-text {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================================================
   Tablet & Mobile Responsive Styling (Scroll Flow Layout)
   ========================================================================== */
@media (max-width: 991px) {
    .hero-stats-features {
        height: auto !important;
        min-height: 100vh !important;
        display: block !important;
        overflow: auto !important;
        padding-top: 100px !important;
        padding-bottom: 50px !important;
        background-color: #ffffff !important;
    }
    .tech-container {
        height: auto !important;
        display: block !important;
        padding: 0 var(--spacing-lg) !important;
    }
    .stats-features-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 3rem !important;
    }
    .editorial-left {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        gap: 2rem !important;
        justify-content: flex-start !important;
    }
    .editorial-right {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        gap: 1.5rem !important;
        justify-content: flex-start !important;
    }
    .editorial-card {
        flex: none !important;
        height: auto !important;
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .editorial-metrics {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .editorial-card {
        padding: 1.5rem 1.2rem !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
}/* === Stats + Features editorial section === */
.hero-stats-features {
    background-color: var(--color-brand-cream) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important;
    overflow: hidden !important;
}

.tech-container {
    max-width: 1350px !important;
    width: 100% !important;
    /* FIX 2026-07-02: раньше был только горизонтальный паддинг — контент
       (в т.ч. .editorial-badge) центрировался по высоте секции ровно
       от y:0 и оказывался позади фиксированной шапки (~89px). Верхний
       паддинг + border-box дают гарантированный отступ независимо от
       того, побеждает ли это правило или более раннее height:85vh. */
    padding: 100px var(--spacing-lg) 2rem var(--spacing-lg) !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    /* FIX 2026-07-15 (композиция): внизу секции копилось 212px мёртвого крема,
       а контент прижимался к самой шапке — верх/низ шли 1:2, оптический центр
       уезжал вверх. Причина не в height:100vh, а в margin-bottom:auto из
       общего `.snap-section > .container` (margin: 0 auto auto auto): во
       флекс-колонке авто-отступ съедает всю свободную высоту и прибивает бокс
       к верху, перебивая justify-content:center. Контейнер при этом ограничен
       max-height:720px, поэтому 180px свободной высоты целиком падали вниз.
       Обнуляем именно нижний авто-отступ — центрирование секции оживает,
       остаток делится пополам. Правило общее для всех слайдов не трогаем. */
    margin-bottom: 0 !important;
}

.tech-card-container {
    width: 100% !important;
    max-width: 1240px !important;
    height: 82vh !important;
    max-height: 760px !important;
    min-height: 520px !important;
    background: #ffffff !important;
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: 8px 8px 0px rgba(1, 8, 17, 0.08) !important;
    border-radius: 30px !important;
    padding: 3.5rem 3.5rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.stats-features-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
}

@media (min-width: 992px) {
    .stats-features-layout {
        grid-template-columns: 1.05fr 0.95fr !important;
        gap: 4.5rem !important;
    }
}

.editorial-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    gap: 1.5rem !important;
}

.editorial-badge {
    align-self: flex-start !important;
    padding: 0.45rem 1.1rem !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--color-brand-green) !important;
    /* FIX 2026-07-02: не было font-family — падало на body-шрифт
       (Helvetica) вместо Galdern. Вес/letter-spacing выровнены с
       DESIGN.md Label spec (700/12px/0.1em) и с .hero-premium__badge. */
    font-family: var(--font-heading) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    background-color: rgba(17, 112, 59, 0.05) !important;
}

.editorial-title {
    font-family: 'Galdern', 'HelveticaNeueCyr', 'Arial Black', sans-serif !important;
    font-size: clamp(2.1rem, 3.5vw, 3rem) !important;
    /* FIX 2026-07-02: вес/letter-spacing выровнены с остальными
       3 крупными заголовками секций (hero/map/menu) — единая шкала. */
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-brand-black) !important;
    margin: 0 !important;
    text-transform: uppercase !important;
}

.editorial-title span.highlight-underline {
    color: var(--color-brand-green) !important;
    position: relative !important;
    display: inline-block !important;
}

.editorial-title span.highlight-underline::after {
    content: '' !important;
    position: absolute !important;
    bottom: 4px !important;
    left: 0 !important;
    width: 100% !important;
    height: 8px !important;
    background-color: rgba(252, 185, 92, 0.4) !important;
    z-index: -1 !important;
    border-radius: 4px !important;
}

.editorial-desc {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
    color: var(--color-brand-black) !important;
    opacity: 0.85 !important;
    margin: 0 !important;
}

/* Refined Asymmetrical Metrics Grid */
.editorial-metrics {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem 2rem !important;
    border-top: 2px solid rgba(1, 8, 17, 0.1) !important;
    padding-top: 1.8rem !important;
    margin-top: 0.5rem !important;
}

.metric-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    border-left: 3px solid var(--color-brand-orange) !important;
    padding-left: 1.2rem !important;
}

.metric-number {
    font-family: 'Galdern', 'HelveticaNeueCyr', 'Arial Black', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 900 !important;
    color: var(--color-brand-green) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
}

.metric-label {
    /* FIX 2026-07-02: выровнено с DESIGN.md Label spec (700/0.1em)
       и с .editorial-badge/.hero-premium__badge. */
    font-family: var(--font-heading) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--color-brand-black) !important;
    opacity: 0.65 !important;
    line-height: 1.3 !important;
}

/* Right column: Interactive Cards Stack (Green cards with white text) */
.editorial-right {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    gap: 1.2rem !important;
}

.editorial-card {
    background-color: var(--color-brand-green) !important;
    color: #ffffff !important;
    border: 2px solid var(--color-brand-black) !important;
    /* FIX 2026-07-02: было хардкод 24px — теперь ссылается на токен
       --radius-cards (40px десктоп / 24px в стеснённом по высоте
       контексте, см. :root override), как остальные карточки сайта. */
    border-radius: var(--radius-cards) !important;
    padding: 1.5rem 1.8rem !important;
    display: flex !important;
    gap: 1.5rem !important;
    align-items: center !important;
    flex: 1 !important;
    /* FIX 2026-07-02: Flat-By-Default — тень только на :hover (см.
       ниже), в покое карточка должна лежать плоско. */
    box-shadow: none !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.editorial-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    transition: left 0.6s ease !important;
}

.editorial-card:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 7px 7px 0px var(--color-brand-black) !important;
}

.editorial-card:hover::before {
    left: 150% !important;
}

.card-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    /* Скриншот-эталон: белый круг с тёмной иконкой (не оранжевый) */
    background: #ffffff !important;
    color: var(--color-brand-black) !important;
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: 2px 2px 0px var(--color-brand-black) !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.editorial-card:hover .card-icon-wrap {
    transform: scale(1.1) rotate(10deg) !important;
}

.card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

/* FIX 2026-07-15 (контраст): заголовок карточки был оранжевым по зелёному —
   3.59:1. По закону палитры эта пара разрешена только крупному дисплейному
   кеглю, а здесь 1.15rem (18.4px) — это мелкий текст, где порог 4.5:1.
   Возвращён крем (5.95:1). Заголовок отличается от .card-text ниже кеглем
   (18.4 против 14.4) и весом (900 против 400), а не цветом — иерархия
   строится кеглем и весом, а не оттенком на грани читаемости. */
.card-title {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    color: var(--color-brand-cream) !important;
}

.card-text {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    color: var(--color-brand-cream) !important;
    opacity: 0.95 !important;
    margin: 0 !important;
}/* AZBI Website & CMS Modernization — Design System V2 (Brandbook & Mr. Pops Principles) */

/* Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@font-face {
    font-family: 'Galdern';
    src: url('fonts/Galdern-Bold.woff2') format('woff2'), url('fonts/Galdern-Bold.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Galdern';
    src: url('fonts/Galdern-Medium.woff2') format('woff2'), url('fonts/Galdern-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

/* HelveticaNeueCyr — носитель КИРИЛЛИЦЫ. В Galdern кириллических глифов
   физически нет (проверено: cmap отдаёт 0 глифов в диапазоне А-я против 26
   латинских), поэтому русский текст всегда уходит в следующий шрифт стека.
   Раньше следующим стоял 'Arial Black' — весь русский дисплейный слой
   набирался системным Arial, а не фирменным шрифтом.

   Здесь же был второй баг: под именем 'HelveticaNeueCyr' был объявлен
   ОДИН вес 700 и файл HelveticaNeueBoldCondensed (узкое начертание).
   На это семейство ссылается --font-body, поэтому весь корпусный текст
   рисовался жирным узким на любом запрошенном весе. Объявляем реальные
   начертания — браузер подберёт нужный вес сам. */
@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('fonts/HelveticaNeueCyr-Light.woff2') format('woff2'), url('fonts/HelveticaNeueCyr-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('fonts/HelveticaNeueCyr-Roman.woff2') format('woff2'), url('fonts/HelveticaNeueCyr-Roman.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('fonts/HelveticaNeueCyr-Medium.woff2') format('woff2'), url('fonts/HelveticaNeueCyr-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold закрывает 600-900: тяжелее начертаний в семье нет, браузер
   доусилит синтетически, а не свалится в другой шрифт. */
@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('fonts/HelveticaNeueCyr-Bold.woff2') format('woff2'), url('fonts/HelveticaNeueCyr-Bold.ttf') format('truetype');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueCyr';
    src: url('fonts/HelveticaNeueCyr-Italic.woff2') format('woff2'), url('fonts/HelveticaNeueCyr-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Узкое начертание осталось под своим именем — на случай, если понадобится
   осознанно, а не как подмена обычного Helvetica. */
@font-face {
    font-family: 'HelveticaNeueCondensed';
    src: url('fonts/HelveticaNeueBoldCondensed.woff2') format('woff2'), url('fonts/HelveticaNeueBoldCondensed.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CSS Variables — Azbi Brandbook & Refero Principles */
:root {
    /* Colors */
    --color-brand-green: #11703b; /* Azbi green — брендбук, стр. 15 (hex #11703b) */
    --color-brand-orange: #fcb95c;
    --color-brand-black: #010811;
    --color-brand-cream: #fffbed;
    --color-brand-brown: #603314;
    --color-brand-blue: #1534e8;
    --color-brand-candy-apple: var(--color-brand-green);
    --color-brand-white: #fffbed;   /* FIX 17.08: белого в палитре AZBI нет — крем */
    /* FIX 2026-07-15 (палитра): был #727272 — нейтральный серый, которого в
       палитре AZBI нет. Он не «немного мимо», он ДОМИНИРОВАЛ: на shop им
       набрано 1504 символа против 629 брендового чёрного, т.е. основной
       корпусный текст страницы был чужого цвета, а бренд уходил в подписи.
       Берём коричневый #603314 — он в палитре, тёплый (крем/оранжевый рядом
       не спорят с ним, как спорил холодный серый) и даёт 10.23:1 на креме
       против 4.64:1 у серого.
       Почему не чёрный #010811: он 19.42:1 и совпал бы с цветом заголовков —
       корпус перестал бы отличаться от них, и иерархия схлопнулась бы.
       Коричневый оставляет вторичность за счёт ТОНА, а не прозрачности.
       Проверено рендером: серый текст на всех 8 страницах (shop 27, locations
       72, rent 8, about 8, partner 7, calculator 6) лежит только на креме или
       белом — на зелёном/тёмном его нет нигде. Это важно: коричневый по
       зелёному дал бы 1.72:1, и такая замена была бы катастрофой. */
    --color-brand-gray: #603314;
    --color-brand-slate: #aaaaaa;

    /* Legacy variables mapping for backwards compatibility with legacy layout markup */
    --primary-green: var(--color-brand-green);
    --primary-orange: var(--color-brand-orange);
    --coffee-brown: var(--color-brand-brown);
    --rich-black: var(--color-brand-black); /* Azbi Brandbook Rich Black */
    --light-cream: var(--color-brand-cream);
    --pure-white: var(--color-brand-white);
    --card-bg: var(--color-brand-cream);
    --border-color: rgba(17, 112, 59, 0.2); /* Subtle brand green border line */
    --text-light: var(--color-brand-black);
    --text-dark: var(--color-brand-black);
    --text-muted: var(--color-brand-gray);
    --border-radius: var(--radius-cards);
    --box-shadow: none; /* Enforcing "no shadows" standard */

    /* Typographic Families */
    /* Пара шрифтов: латиницу рисует Galdern, кириллицу — HelveticaNeueCyr.
       Браузер подставляет шрифт ПОГЛИФНО, поэтому достаточно порядка в стеке:
       у Galdern нет русских глифов -> они падают в следующий шрифт. 'Arial
       Black' оставлен последним рубежом, но до него доходить уже не должно. */
    --font-heading: 'Galdern', 'HelveticaNeueCyr', 'Arial Black', sans-serif;
    /* Свой веб-шрифт идёт первым: 'Helvetica Neue' есть только на macOS, из-за
       чего текст выглядел по-разному на разных ОС. */
    --font-body: 'HelveticaNeueCyr', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

    /* Typographic Scale */
    --text-display: clamp(64px, 8vw, 144px);
    --leading-display: 0.85;
    
    --text-heading-lg: clamp(36px, 5vw, 64px);
    --leading-heading-lg: 0.95;
    
    --text-heading: clamp(28px, 4vw, 42px);
    --leading-heading: 1.0;
    
    --text-heading-sm: 22px;
    --leading-heading-sm: 1.2;
    
    --text-subheading: 18px;
    --leading-subheading: 1.3;
    
    --text-body: 16px;
    --text-body-sm: 15px;
    --leading-body: 1.4;
    
    --text-caption: 12px;
    --leading-caption: 1.4;

    /* Spacing & Layout */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
    
    /* Shapes & Radii */
    --radius-sm: 5px;
    --radius-cards: 40px;
    --radius-buttons: 300px;
    --radius-featured: 60px;
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-brand-white);
    color: var(--color-brand-black);
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-brand-black);
    letter-spacing: 0.03em;
    font-weight: 700;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-smooth);
}

img, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* Utility Layouts */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: var(--spacing-xxl) 0;
}

.text-center {
    text-align: center;
}

.text-gradient {
    /* Brandbook uses green as primary tone, we pair it with black */
    background: linear-gradient(135deg, var(--color-brand-green) 0%, var(--color-brand-black) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Buttons (Mr. Pops outlined & cream standards) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.875rem 2.5rem;
    border-radius: var(--radius-buttons);
    font-family: var(--font-heading);
    font-size: var(--text-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    box-shadow: 0 8px 24px rgba(252, 185, 92, 0.25) !important; /* Soft glow */
}

/* Primary Outline Button (Green outline, transparent fill, green text) */
.btn-primary, .btn-green-outline {
    background-color: transparent;
    color: var(--color-brand-green);
    border: 2px solid var(--color-brand-green);
}

.btn-primary:hover, .btn-green-outline:hover {
    background-color: var(--color-brand-green);
    color: var(--color-brand-white);
    transform: translateY(-2px);
}

/* Secondary Cream Button (Cream Bisque background, dark text, no shadow) */
.btn-secondary, .btn-cream-filled {
    background-color: var(--color-brand-cream);
    color: var(--color-brand-black);
    border: 1px solid var(--color-brand-black);
}

.btn-secondary:hover, .btn-cream-filled:hover {
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
    transform: translateY(-2px);
}

/* Special promo action button (Accent AZBI Green) */
.btn-accent, .btn-blue-promo {
    background-color: var(--color-brand-green);
    color: var(--color-brand-white);
    border: none;
}

.btn-accent:hover, .btn-blue-promo:hover {
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
    transform: translateY(-2px);
}

/* Cream Cards */
.card-cream-bisque {
    background-color: var(--color-brand-cream);
    border-radius: var(--radius-cards);
    padding: var(--spacing-lg);
    border: none;
    box-shadow: none !important;
}

/* Header & Site Navigation */
header.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-brand-cream);
    transition: var(--transition-smooth);
}

header.site-header.scrolled {
    padding: 0.25rem 0;
    border-bottom: 2px solid var(--color-brand-green);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    gap: 1.5rem;
}

.logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    white-space: nowrap;
    font-size: var(--text-body-sm);
    font-weight: 500;
    color: var(--color-brand-black);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-buttons);
    border: 1px solid transparent;
}

.nav-links a:hover {
    border-color: var(--color-brand-green);
    color: var(--color-brand-green);
}

.nav-links a.active {
    background-color: var(--color-brand-cream);
    border-color: var(--color-brand-green);
    color: var(--color-brand-green);
    font-weight: 700;
}

.nav-contact {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.phone-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-brand-green);
    white-space: nowrap;
    font-size: var(--text-body-sm);
}

.lang-selector {
    display: flex;
    gap: 0.25rem;
    background-color: var(--color-brand-cream);
    padding: 4px;
    border-radius: var(--radius-buttons);
    border: 1px solid var(--color-brand-gray);
}

.lang-btn {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-buttons);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.lang-btn.active {
    background-color: var(--color-brand-green);
    color: var(--color-brand-white);
}

/* Scroll Progress Bar */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: var(--color-brand-green);
    z-index: 1001;
    width: 0%;
    transition: width 0.1s ease-out;
}

/* Hero Section */
.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.hero-content h1 {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    margin-bottom: var(--spacing-md);
    letter-spacing: 0.01em;
}

.hero-content p {
    font-size: 18px;
    color: var(--color-brand-gray);
    margin-bottom: var(--spacing-xl);
    max-width: 540px;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.coffee-cup-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(17, 112, 59, 0.1) 0%, transparent 70%);
    z-index: 1;
}

.hero-image {
    width: 100%;
    max-width: 380px;
    height: auto;
    object-fit: contain;
    z-index: 2;
    filter: none !important; /* No drop shadows */
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

/* Stats Bar Section */
.hero-stats {
    background-color: var(--color-brand-cream) !important;
    border-top: 2px solid var(--color-brand-green);
    border-bottom: 2px solid var(--color-brand-green);
}

.metric-circle-container {
    background: var(--color-brand-white);
    border: 1px solid var(--color-brand-green);
    border-radius: var(--radius-cards);
    padding: var(--spacing-md) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    text-align: center;
    word-wrap: break-word;
}

.metric-val {
    font-family: var(--font-heading);
    font-size: var(--text-heading-lg) !important;
    line-height: 1 !important;
    color: var(--color-brand-green) !important;
    margin-bottom: 4px;
}

.metric-lbl {
    font-size: var(--text-body-sm) !important;
    color: var(--color-brand-black) !important;
    font-weight: 500;
}

/* Features Grid */
.about-story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.about-feature-item {
    background-color: var(--color-brand-cream) !important;
    border: 1px solid var(--color-brand-green) !important;
    padding: var(--spacing-lg) !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: none !important;
    transition: var(--transition-smooth);
}

.about-feature-item:hover {
    background-color: var(--color-brand-white) !important;
    transform: translateY(-4px);
}

.about-feature-icon {
    font-size: 3rem !important;
    color: var(--color-brand-orange) !important;
    margin-bottom: var(--spacing-md);
}

.about-feature-item h3 {
    font-size: var(--text-heading-sm) !important;
    margin-bottom: var(--spacing-sm);
    color: var(--color-brand-black);
}

.about-feature-item p {
    color: var(--color-brand-gray) !important;
    font-size: var(--text-body-sm) !important;
    line-height: 1.5;
}

/* Consultation & Contact */
.contact-section {
    background-color: var(--color-brand-cream) !important;
    border-top: 2px solid var(--color-brand-green);
    border-bottom: 2px solid var(--color-brand-green);
}

/* Мёртвый контактный блок (.contact-grid / .contact-method-card /
   .contact-method-icon / .contact-form-card) удалён 2026-07-15: разметку
   вырезали, а стили остались и продолжали тянуть за собой запрещённый
   палитрой --color-brand-white. Проверено по всем .html — совпадений ноль.
   .form-group ниже НЕ трогаем: форма партнёра им пользуется. */

.form-group label {
    font-family: var(--font-heading);
    color: var(--color-brand-black);
    font-size: var(--text-body-sm);
    margin-bottom: 6px;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--color-brand-gray) !important;
    border-radius: var(--radius-buttons) !important;
    background-color: var(--color-brand-white);
    transition: var(--transition-smooth);
}

.form-group textarea {
    border-radius: 20px !important;
}

.form-group input:focus, .form-group textarea:focus {
    border-color: var(--color-brand-green) !important;
    background-color: var(--color-brand-cream);
}

/* Drawers & Modals (Cart drawer) */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(1, 8, 17, 0.4);
    z-index: 2500 !important;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100vh;
    background-color: var(--color-brand-white);
    border-left: 2px solid var(--color-brand-green);
    z-index: 2600 !important;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.cart-drawer.active,
.cart-drawer.open {
    right: 0;
}

.cart-drawer-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-brand-cream);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-drawer-header h2 {
    font-size: var(--text-heading-sm);
    color: var(--color-brand-green);
}

.cart-drawer-close {
    font-size: 2rem;
    cursor: pointer;
    color: var(--color-brand-black);
    transition: var(--transition-smooth);
}

.cart-drawer-close:hover {
    color: var(--color-brand-green);
}

.cart-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.cart-drawer-footer {
    padding: var(--spacing-lg);
    border-top: 2px solid var(--color-brand-green);
    background-color: var(--color-brand-cream);
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: var(--text-subheading);
    margin-bottom: var(--spacing-md);
}

/* Modal overlays and inner cards */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(1, 8, 17, 0.5);
    z-index: 2700 !important;
    opacity: 0;
    pointer-events: none;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.admin-modal {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-cards) !important;
    padding: var(--spacing-xl) !important;
    box-shadow: none !important;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* Footer Section */
footer.site-footer {
    background-color: var(--color-brand-green) !important;
    color: var(--color-brand-white) !important;
    border-top: 2px solid var(--color-brand-orange);
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-brand h4, .footer-nav h4 {
    font-size: var(--text-heading-sm);
    color: var(--color-brand-orange);
    margin-bottom: var(--spacing-md);
}

/* FIX 2026-07-15 (контраст): слоган подвала. Подвал всегда зелёный
   (footer.site-footer выше), а --color-brand-gray (#727272) по зелёному —
   1.28:1, текста просто нет. Серого в палитре AZBI нет; кремовый и есть
   «белый» этого сайта. */
.footer-brand p {
    color: var(--color-brand-cream);
    font-size: var(--text-body-sm);
    margin-top: 1rem;
}

.footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-nav ul a {
    color: var(--color-brand-white);
    font-size: var(--text-body-sm);
    transition: var(--transition-smooth);
}

.footer-nav ul a:hover {
    color: var(--color-brand-orange);
}

/* FIX 2026-07-15 (контраст): копирайт внутренних страниц. Серый #727272
   по зелёному подвалу = 1.28:1 — строка была практически невидима на 8
   страницах. Кремовый даёт несущие 5.95:1. */
.footer-bottom {
    border-top: 1px solid var(--color-brand-cream) !important;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    color: var(--color-brand-cream) !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .nav-container {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 0.75rem 1rem !important;
        gap: 0.75rem !important;
    }
    
    .logo-link {
        order: 1 !important;
    }
    
    .nav-contact {
        order: 2 !important;
        gap: 0.75rem !important;
    }
    
    .nav-links {
        order: 3 !important;
        width: 100% !important;
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 1.25rem !important;
        padding: 0.75rem 0 0.25rem 0 !important;
        border-top: 1px solid var(--border-color) !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .nav-links::-webkit-scrollbar {
        display: none !important;
    }
    
    .nav-links li {
        flex: 0 0 auto !important;
    }
}

@media (max-width: 768px) {
    .nav-contact .btn span {
        display: none !important;
    }
    
    .nav-contact .btn {
        padding: 0.5rem !important;
        min-width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero-content p {
        margin: 0 auto var(--spacing-xl) auto;
    }
    .hero-actions {
        justify-content: center;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-lg) !important;
        text-align: center !important;
    }
    .footer-nav ul {
        align-items: center;
    }
}

/* =========================================
   SHOP & CATALOG & PRODUCTS (V2 Style)
   ========================================= */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.product-card {
    background-color: var(--color-brand-cream);
    border: 2px solid var(--color-brand-green);
    border-radius: var(--radius-cards);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition-smooth);
    box-shadow: none !important; /* No shadows */
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-brand-orange);
}

/* FIX 2026-07-15 (палитра): бокс товара стоит внутри кремовой карточки
   shop — чистый белый читался как холодная вставка чужого происхождения.
   Форму бокса держат зелёная рамка и радиус, заливке достаточно быть
   кремовой. */
.product-image {
    height: 150px;
    background-color: var(--color-brand-cream);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color-brand-green);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-brand-green);
}

.product-info h3 {
    font-family: var(--font-heading);
    font-size: var(--text-heading-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--color-brand-black);
}

.product-info p {
    font-size: var(--text-body-sm);
    color: var(--color-brand-gray);
    margin-bottom: var(--spacing-md);
    min-height: 2.7rem;
    line-height: 1.5;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(17, 112, 59, 0.2);
    padding-top: var(--spacing-md);
    margin-top: auto;
}

.product-price-box {
    display: flex;
    flex-direction: column;
}

.product-price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-brand-green);
    font-family: var(--font-heading);
}

.product-unit {
    font-size: var(--text-caption);
    color: var(--color-brand-gray);
}

/* =========================================
   MENU & DRINK CARDS (V2 Style)
   ========================================= */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.menu-card {
    background-color: var(--color-brand-cream);
    border: 2px solid var(--color-brand-green);
    border-radius: var(--radius-cards);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 400px;
    position: relative;
    transition: var(--transition-smooth);
}

.menu-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--color-brand-orange) !important;
}

.menu-card-image {
    height: 180px;
    background-color: var(--color-brand-white);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(17, 112, 59, 0.1);
    margin-bottom: var(--spacing-md);
}

.menu-card-image svg {
    width: 75%;
    height: 75%;
    transition: var(--transition-smooth);
}

.menu-card:hover .menu-card-image svg {
    transform: scale(1.1);
}

.menu-card-badge {
    position: absolute;
    top: calc(var(--spacing-lg) + 10px);
    right: calc(var(--spacing-lg) + 10px);
    background-color: var(--color-brand-green);
    color: var(--color-brand-white);
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
}

.menu-card-badge.cold {
    background-color: var(--color-brand-blue);
}

.menu-card-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: var(--spacing-md);
}

.menu-card-info h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-brand-black);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.menu-card-info p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-brand-gray);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(17, 112, 59, 0.15);
    padding-top: var(--spacing-sm);
}

.menu-card-price {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-brand-green);
}

/* Category Tabs Styling (Mr. Pops Style Pill Buttons) */
.menu-tabs {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
}

/* Circular button with smooth bottom-up fill */
.menu-view-all-circle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 130px !important;
    height: 130px !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important;
    background: transparent !important;
    color: #ffffff !important;
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: color 0.4s ease, border-color 0.4s ease !important;
}

/* The fill layer rising from bottom to top */
.menu-view-all-circle-btn::before {
    content: '' !important;
    position: absolute !important;
    bottom: -100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--color-brand-orange) !important;
    border-radius: 50% !important;
    transition: bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: -1 !important;
}

.menu-view-all-circle-btn:hover {
    color: var(--color-brand-black) !important;
    border-color: var(--color-brand-orange) !important;
}

.menu-view-all-circle-btn:hover::before {
    bottom: 0 !important;
}

/* FIX 2026-07-15 (контраст): чипы лежат на зелёном постере, а текст был
   белым с альфой 0.75 — 4.08:1, ниже и AA (4.5:1), и несущей пары
   крем↔зелёный (5.95:1). Белого в палитре нет вовсе, а прозрачность
   гасила ровно тот элемент, который должен читаться первым после
   заголовка. Неактивный чип отличается от активного заливкой, а не
   выцветанием. */
.menu-tab-btn {
    background-color: transparent !important;
    color: var(--color-brand-cream, #fffbed) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    padding: 0.6rem 1.6rem !important;
    border-radius: var(--radius-pill) !important; /* Sleek capsule pill */
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: none !important;
    transform: none !important;
}

.menu-tab-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: var(--color-brand-cream, #fffbed) !important;
}

.menu-tab-btn.active {
    background-color: var(--color-brand-orange, #fcb95c) !important;
    border-color: var(--color-brand-orange, #fcb95c) !important;
    color: var(--color-brand-black, #010811) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* =========================================
   CART DRAWER & BADGE (V2 Style)
   ========================================= */
.cart-floating-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background-color: var(--color-brand-green);
    color: var(--color-brand-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: none !important; /* No shadows */
    border: 2px solid var(--color-brand-black);
    z-index: 999;
    transition: var(--transition-smooth);
}

.cart-floating-btn:hover {
    transform: scale(1.05);
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
}

.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.75rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-brand-black);
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(17, 112, 59, 0.2);
}

.cart-item-details {
    flex-grow: 1;
}

.cart-item-details h4 {
    font-size: var(--text-body-sm);
    margin-bottom: 0.25rem;
    color: var(--color-brand-black);
}

.cart-item-details span {
    font-size: var(--text-body-sm);
    color: var(--color-brand-green);
    font-weight: 700;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--color-brand-green);
    border-radius: var(--radius-sm);
    padding: 0.25rem;
    background-color: var(--color-brand-white);
}

.cart-item-quantity button {
    width: 24px;
    height: 24px;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-green);
    transition: var(--transition-smooth);
}

.cart-item-quantity button:hover {
    background-color: var(--color-brand-cream);
}

.cart-item-quantity span {
    font-size: 0.9rem;
    font-weight: 600;
    width: 20px;
    text-align: center;
    color: var(--color-brand-black);
}

.cart-item-remove {
    color: #ef4444;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    border: none;
    outline: none;
    transition: var(--transition-smooth);
}

.cart-item-remove:hover {
    transform: scale(1.1);
}

/* =========================================
   LOCATIONS & MAP (V2 Style)
   ========================================= */
.map-grid {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.locations-sidebar-container {
    position: absolute;
    top: 120px;
    right: 24px;
    bottom: 24px;
    width: 380px;
    z-index: 1000;
    background-color: rgba(250, 246, 240, 0.96) !important;
    backdrop-filter: blur(8px);
    border: 2px solid var(--color-brand-black) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Allow toggle button to float outside */
    height: calc(100vh - 144px) !important;
}

.locations-sidebar-container.collapsed {
    transform: translateX(404px) !important; /* width 380px + margin 24px */
}

/* Float Toggle Sidebar Button */
.sidebar-toggle-btn {
    position: absolute;
    left: -42px;
    top: 24px;
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-brand-black) !important;
    border-radius: 50% !important;
    background-color: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem !important;
    z-index: 1001 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.sidebar-toggle-btn:hover {
    background-color: var(--color-brand-orange) !important;
    color: var(--color-brand-black) !important;
    transform: scale(1.05);
}

.locations-sidebar {
    overflow-y: auto !important;
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    flex-grow: 1 !important;
    min-height: 0 !important;
}

.location-item {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-black) !important;
    border-radius: var(--radius-sm) !important;
    padding: 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.1) !important;
}

.location-item:hover, .location-item.active {
    border-color: var(--color-brand-orange) !important;
    background-color: var(--color-brand-cream) !important;
    transform: translateY(-2px);
}

.location-status {
    display: inline-block !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 4px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    margin-bottom: 0.5rem !important;
    border: 2px solid var(--color-brand-black) !important;
}

.location-status.active {
    background-color: var(--color-brand-green) !important;
    color: var(--color-brand-white) !important;
}

.location-status.coming_soon {
    background-color: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
}

.location-item h4 {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.25rem !important;
    color: var(--color-brand-black) !important;
}

.location-item p.address {
    font-size: 0.85rem !important;
    color: var(--color-brand-gray) !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
}

.location-distance {
    font-size: 0.8rem !important;
    color: var(--color-brand-gray) !important;
    margin: 0.4rem 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.location-distance.close {
    color: var(--color-brand-green) !important;
    font-weight: 700 !important;
}

.location-meta {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.8rem !important;
    color: var(--color-brand-gray) !important;
    border-top: 1px solid rgba(17, 112, 59, 0.1) !important;
    padding-top: 0.5rem !important;
}

.location-meta span i {
    color: var(--color-brand-orange) !important;
    margin-right: 0.25rem !important;
}

.map-container-box {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 1 !important;
}

.yandex-map-div {
    width: 100% !important;
    height: 100% !important;
    background-color: var(--color-brand-cream) !important;
}

.map-placeholder-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brand-cream);
    z-index: 100;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

/* Leaflet Custom Popups & Pin Scale Effects */
.custom-pin-container {
    overflow: visible !important;
}
.custom-pin-container:hover .custom-map-pin {
    transform: scale(1.15) !important;
    background-color: var(--color-brand-orange) !important;
}

/* No Shadow Premium Leaflet Popups */
.custom-leaflet-popup .leaflet-popup-content-wrapper {
    background-color: var(--color-brand-cream) !important;
    border: 2px solid var(--color-brand-black) !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: none !important;
    color: var(--color-brand-black) !important;
    padding: 0.75rem !important;
}
.custom-leaflet-popup .leaflet-popup-tip {
    background-color: var(--color-brand-cream) !important;
    border-left: 2px solid var(--color-brand-black) !important;
    border-bottom: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
}

/* Leaflet Controls Styling */
.leaflet-bar {
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}
.leaflet-bar a {
    background-color: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
    border-bottom: 1px solid var(--color-brand-black) !important;
    transition: all 0.2s ease;
}
.leaflet-bar a:hover {
    background-color: var(--color-brand-orange) !important;
    color: var(--color-brand-black) !important;
}

/* Mobile Responsive Adjustments for Fullscreen Map */
@media (max-width: 768px) {
    .locations-sidebar-container {
        top: auto !important;
        bottom: 16px !important;
        left: 16px !important;
        right: 16px !important;
        width: calc(100% - 32px) !important;
        height: 280px !important;
        transform: translateY(0%) !important;
    }
    
    .locations-sidebar-container.collapsed {
        transform: translateY(300px) !important; /* Slide down out of view */
    }
    
    .sidebar-toggle-btn {
        right: 24px !important;
        top: -46px !important;
        transform: rotate(90deg) !important;
    }
    
    .locations-sidebar-container.collapsed .sidebar-toggle-btn {
        transform: rotate(270deg) !important;
    }
}

/* =========================================
   CALCULATOR SLIDER (V2 Style)
   ========================================= */
.calc-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 8px !important;
    border-radius: 300px !important;
    background: var(--color-brand-cream) !important;
    border: 2px solid var(--color-brand-green) !important;
    outline: none !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Thumb */
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--color-brand-orange) !important;
    border: 2px solid var(--color-brand-black) !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
}

.calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1) !important;
}

.calc-slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: var(--color-brand-orange) !important;
    border: 2px solid var(--color-brand-black) !important;
    cursor: pointer !important;
    transition: transform 0.1s ease !important;
}

.calc-slider::-moz-range-thumb:hover {
    transform: scale(1.1) !important;
}

/* =========================================
   ADMIN PANEL STYLES (V2 Modernized - Mr. Pops Aesthetic)
   ========================================= */

.admin-body {
    background-color: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    font-family: var(--font-body) !important;
}

.admin-layout {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
}

.admin-sidebar {
    width: 280px !important;
    background-color: var(--color-brand-white) !important;
    border-right: 2px solid var(--color-brand-green) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 2rem 1.5rem !important;
}

.admin-brand {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding-bottom: 2rem !important;
    border-bottom: 2px solid var(--color-brand-green) !important;
}

.admin-brand-logo {
    display: flex !important;
    align-items: center !important;
}

.admin-brand-logo img {
    max-height: 40px !important;
}

.admin-brand-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: var(--color-brand-black) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.admin-brand-title span {
    display: block !important;
    font-size: 0.7rem !important;
    color: var(--color-brand-orange) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.admin-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
    flex-grow: 1 !important;
}

.admin-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: var(--radius-buttons) !important;
    cursor: pointer !important;
    font-family: var(--font-heading) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--color-brand-gray) !important;
    transition: var(--transition-smooth) !important;
    letter-spacing: 0.03em !important;
}

.admin-nav-item:hover {
    color: var(--color-brand-green) !important;
    background-color: var(--color-brand-cream) !important;
}

.admin-nav-item.active {
    background-color: var(--color-brand-green) !important;
    color: var(--color-brand-white) !important;
    box-shadow: none !important;
}

.admin-nav-item i {
    font-size: 1.15rem !important;
    width: 20px !important;
}

.admin-sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    border-top: 2px solid var(--color-brand-green) !important;
    padding-top: 1.5rem !important;
}

.admin-main {
    flex-grow: 1 !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.admin-header {
    height: 80px !important;
    border-bottom: 2px solid var(--color-brand-green) !important;
    background-color: var(--color-brand-white) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 3rem !important;
}

.admin-header-title h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--color-brand-black) !important;
}

.admin-header-actions {
    display: flex !important;
    gap: 1rem !important;
}

.admin-content-scroller {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    padding: 3rem !important;
}

.admin-tab-content {
    display: none !important;
}

.admin-tab-content.active {
    display: block !important;
    animation: fadeIn 0.4s ease !important;
}

.admin-card {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-cards) !important;
    padding: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    box-shadow: none !important;
}

.admin-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 2px solid var(--color-brand-green) !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 2rem !important;
}

.admin-card-header h3 {
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    color: var(--color-brand-black) !important;
    letter-spacing: 0.03em !important;
}

.admin-card-header h3 i {
    color: var(--color-brand-orange) !important;
}

.admin-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
}

.admin-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
}

.admin-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
}

.admin-input-group label {
    font-family: var(--font-heading) !important;
    font-size: 0.85rem !important;
    color: var(--color-brand-black) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

.admin-input-group input, 
.admin-input-group textarea, 
.admin-input-group select {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-buttons) !important;
    padding: 0.75rem 1.2rem !important;
    font-size: 0.95rem !important;
    color: var(--color-brand-black) !important;
    transition: var(--transition-smooth) !important;
    box-shadow: none !important;
}

.admin-input-group textarea {
    border-radius: 20px !important;
    min-height: 100px !important;
    resize: vertical !important;
}

.admin-input-group input:focus, 
.admin-input-group textarea:focus, 
.admin-input-group select:focus {
    border-color: var(--color-brand-orange) !important;
    background-color: var(--color-brand-cream) !important;
}

.admin-input-row-inline {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.admin-table-container {
    overflow-x: auto !important;
    border-radius: 20px !important;
    border: 2px solid var(--color-brand-green) !important;
    box-shadow: none !important;
}

.admin-table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left !important;
}

.admin-table th, .admin-table td {
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(17, 112, 59, 0.1) !important;
    font-size: 0.9rem !important;
    color: var(--color-brand-black) !important;
}

.admin-table th {
    background-color: var(--color-brand-green) !important;
    font-weight: 700 !important;
    color: var(--color-brand-white) !important;
    font-family: var(--font-heading) !important;
    letter-spacing: 0.03em !important;
}

.admin-table tr:last-child td {
    border-bottom: none !important;
}

.admin-table tr:hover td {
    background-color: var(--color-brand-cream) !important;
}

.admin-table input {
    background: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: var(--radius-buttons) !important;
    color: var(--color-brand-black) !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    box-shadow: none !important;
}

.admin-table input:focus {
    border-color: var(--color-brand-orange) !important;
    background-color: var(--color-brand-cream) !important;
}

.admin-list-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.admin-list-item {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: 20px !important;
    padding: 1.25rem 1.5rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: var(--transition-smooth) !important;
    box-shadow: none !important;
}

.admin-list-item:hover {
    border-color: var(--color-brand-orange) !important;
    background-color: var(--color-brand-cream) !important;
}

.admin-list-item-info h4 {
    font-family: var(--font-heading) !important;
    font-size: 1.05rem !important;
    margin-bottom: 0.25rem !important;
    color: var(--color-brand-black) !important;
}

.admin-list-item-info p {
    font-size: 0.8rem !important;
    color: var(--color-brand-gray) !important;
}

.admin-list-item-actions {
    display: flex !important;
    gap: 0.75rem !important;
}

.admin-btn-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    transition: var(--transition-smooth) !important;
    color: var(--color-brand-black) !important;
    box-shadow: none !important;
}

.admin-btn-icon:hover {
    background-color: var(--color-brand-cream) !important;
}

.admin-btn-icon.edit:hover {
    border-color: var(--color-brand-orange) !important;
    color: var(--color-brand-orange) !important;
}

.admin-btn-icon.delete:hover {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
}

.recipe-edit-box {
    border: 2px solid var(--color-brand-green) !important;
    border-radius: 20px !important;
    padding: 1.5rem !important;
    background-color: var(--color-brand-white) !important;
}

.recipe-selector {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
}

.recipe-editor-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
    max-height: 350px !important;
    overflow-y: auto !important;
    padding-right: 0.5rem !important;
}

.recipe-editor-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--radius-buttons) !important;
    border: 2px solid var(--color-brand-green) !important;
    background-color: var(--color-brand-white) !important;
}

.recipe-editor-row-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.recipe-editor-row-left span {
    color: var(--color-brand-black) !important;
}

.recipe-editor-row-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.recipe-editor-row-right input {
    width: 75px !important;
    text-align: right !important;
    padding: 0.25rem 0.5rem !important;
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-buttons) !important;
    color: var(--color-brand-black) !important;
}

.recipe-editor-row-right span {
    font-size: 0.85rem !important;
    color: var(--color-brand-gray) !important;
    width: 30px !important;
}

.admin-map-picker-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

.admin-map-coordinates {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

.admin-small-map {
    width: 100% !important;
    height: 250px !important;
    background-color: #f1f5f9 !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.admin-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(1, 8, 17, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 2700 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
}

.admin-modal-overlay.active {
    display: flex !important;
}

.admin-modal {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-cards) !important;
    width: 100% !important;
    max-width: 600px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    animation: modalSlide 0.3s ease !important;
    overflow: hidden !important;
}

.admin-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1.5rem 2rem !important;
    border-bottom: 2px solid var(--color-brand-green) !important;
}

.admin-modal-header h3 {
    font-family: var(--font-heading) !important;
    color: var(--color-brand-black) !important;
    letter-spacing: 0.03em !important;
}

.admin-modal-close {
    background: transparent !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    line-height: 1 !important;
    color: var(--color-brand-gray) !important;
}

.admin-modal-body {
    padding: 2rem !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
}

.admin-modal-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 1rem !important;
    padding: 1.5rem 2rem !important;
    border-top: 2px solid var(--color-brand-green) !important;
}

.toast-container {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    z-index: 9999 !important;
}

.toast {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-left: 6px solid var(--color-brand-green) !important;
    padding: 1rem 1.5rem !important;
    border-radius: var(--radius-buttons) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    transform: translateX(120%) !important;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
    min-width: 280px !important;
    color: var(--color-brand-black) !important;
}

.toast.show {
    transform: translateX(0) !important;
}

.toast.success {
    border-left-color: #10b981 !important;
}

.toast.success i {
    color: #10b981 !important;
}

.toast.error {
    border-left-color: #ef4444 !important;
}

.toast.error i {
    color: #ef4444 !important;
}

.toast.info {
    border-left-color: var(--color-brand-orange) !important;
}

.toast.info i {
    color: var(--color-brand-orange) !important;
}

.toast-content {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   AZBI V2 Premium Interactions & Scroll Animations (Mr. Pops Adaptive Guidelines)
   ========================================================================== */

/* 1. Button Hover Glare & Scaling Animations */
.btn {
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

.btn:active {
    transform: translateY(-1px) scale(0.98) !important;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.btn:hover::before {
    left: 200%;
}

/* 2. Navigation Link Hover Sliding Underline */
.nav-links a {
    position: relative;
    transition: color 0.3s ease !important;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--color-brand-green);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 2px;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 60%;
    left: 20%;
}

/* 3. Interactive Cards Dynamic Lifting */
.menu-card, 
.product-card, 
.location-card, 
.metric-circle-container,
.about-feature-item {
    transition: var(--transition-smooth), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu-card:hover, 
.product-card:hover, 
.location-card:hover, 
.metric-circle-container:hover,
.about-feature-item:hover {
    transform: translateY(-6px) !important;
    border-color: var(--color-brand-green) !important;
    background-color: var(--color-brand-white) !important;
}

/* 4. IntersectionObserver Scroll Entrance Animations */
.reveal-on-scroll {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.reveal-on-scroll.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-left {
    opacity: 0 !important;
    transform: translateX(-40px) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.reveal-left.revealed {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.reveal-right {
    opacity: 0 !important;
    transform: translateX(40px) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.reveal-right.revealed {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.reveal-down {
    opacity: 0 !important;
    transform: translateY(-30px) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.reveal-down.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.reveal-scale {
    opacity: 0 !important;
    transform: scale(0.95) !important;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity;
}

.reveal-scale.revealed {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* 5. Hero Coffee Cup Floating, Steam & Glow Animations */
.coffee-cup-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(17, 112, 59, 0.18) 0%, rgba(17, 112, 59, 0) 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: glowPulse 4s infinite ease-in-out;
    z-index: 1;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.cup-steam-path {
    stroke: var(--color-brand-green) !important;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 60;
    fill: none;
    animation: riseSteam 4s infinite linear;
    filter: blur(1px);
    opacity: 0.3;
}

.cup-steam-path:nth-child(1) { animation-delay: 0s; }
.cup-steam-path:nth-child(2) { animation-delay: 1.5s; animation-duration: 5s; }
.cup-steam-path:nth-child(3) { animation-delay: 3s; animation-duration: 3.5s; }

@keyframes riseSteam {
    0% {
        stroke-dashoffset: 60;
        opacity: 0;
        transform: translateY(10px) scaleX(0.8);
    }
    15% {
        opacity: 0.6;
    }
    80% {
        opacity: 0.3;
    }
    100% {
        stroke-dashoffset: -60;
        opacity: 0;
        transform: translateY(-80px) scaleX(1.3);
    }
}

/* 6. Loyalty & Micro-interaction pulses */
@keyframes cupPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.loyalty-cup-slot.filled {
    animation: cupPulse 2s infinite ease-in-out;
}

/* 7. Skeleton Loading Premium Shimmer */
@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.skeleton-animation {
    background: linear-gradient(90deg, rgba(17, 112, 59, 0.03) 25%, rgba(17, 112, 59, 0.08) 50%, rgba(17, 112, 59, 0.03) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
    border-radius: 4px;
}

/* 8. Calculator Specific Theme & Stacking Layouts (V2 Style Guidelines) */
.calc-section {
    background-color: var(--color-brand-white) !important;
    padding-top: 140px !important;
}

.calc-wrapper {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 3rem !important;
    align-items: start !important;
}

.calc-left-col {
    background-color: var(--color-brand-cream) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-cards) !important;
    padding: 2.5rem !important;
    box-shadow: none !important;
}

.calc-result-card {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    padding: 1.5rem !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    transition: var(--transition-smooth);
}

.calc-result-card.highlighted {
    border-color: var(--color-brand-orange) !important;
    background-color: var(--color-brand-cream) !important;
}

.calc-result-card:hover {
    transform: translateY(-3px);
}

.calc-charts-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 3rem !important;
    margin-top: 4rem !important;
}

.calc-chart-card {
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    padding: 2rem !important;
    border-radius: var(--radius-cards) !important;
    box-shadow: none !important;
}

.calc-margin-section {
    margin-top: 4rem !important;
    background-color: var(--color-brand-white) !important;
    border: 2px solid var(--color-brand-green) !important;
    border-radius: var(--radius-cards) !important;
    padding: 2.5rem !important;
    box-shadow: none !important;
}

@media (max-width: 992px) {
    .calc-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .calc-charts-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .calc-left-col {
        padding: 1.5rem !important;
    }
    .calc-margin-section {
        padding: 1.5rem !important;
    }
}

/* About Page Custom V2 Styles */
.about-metric-card {
    /* FIX 2026-07-08: градиент уходил в почти-чёрный #0a331c (тёмный грунт
       отвергнут) — плоский постер-зелёный + тактильная чёрная кромка. */
    background: var(--color-brand-green);
    border-radius: var(--radius-cards);
    padding: 3rem;
    color: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: none !important;
}

.about-advantages-container {
    /* FIX 2026-07-08: был почти-чёрный #070f0a с Tailwind-изумрудным глоу —
       тёмный грунт отвергнут; постер-зелёная плита, кремовые .adv-card
       внутри дают инверсию как на главной. */
    background: var(--color-brand-green);
    border-radius: var(--radius-cards);
    border: 2px solid var(--color-brand-black);
    padding: 3.5rem 2.5rem;
    margin-top: 4rem;
    box-shadow: none !important;
}

/* FIX 2026-07-02: карточки задумывались для тёмного фона (полупрозрачный
   белый оверлей rgba(255,255,255,.02) + белый текст в HTML), но секция
   .about-section — светлая (background:#ffffff инлайн) — карточки были
   практически невидимы (белое на белом). Приведено к Flat-By-Default
   (DESIGN.md): кремовый фон, чёрная обводка 2px, тень только на hover. */
.adv-card {
    background: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    padding: 2rem;
    border-radius: 16px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    box-shadow: none !important;
}

.adv-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px var(--color-brand-black) !important;
}

.calc-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .calc-results-grid {
        grid-template-columns: 1fr !important;
    }
}

/* MR. POPS MODERNIZATION LAYOUT & PHYSICS */

/* Page Transition Overlay — SVG Path Morphing (Liquid Wipe / Single Bezier Arch) */
/* GSAP controls all animation; CSS only provides the fixed positioning shell. */
#page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    pointer-events: none;
    display: none;         /* JS sets display:block when animating */
}
#transition-morph-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;     /* Allow arch to bleed past SVG bounds */
}

/* Initial Load Premium Preloader (AZBI Logo Filling Wave Animation) */
#initial-preloader {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 150000;
    pointer-events: all;
}

.preloader-bg-svg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

.loader-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 260px; height: 260px;
    display: flex; justify-content: center; align-items: center;
    z-index: 10000;
}

/* Анимация наполнения маски знака */
.wave-mask-a, .wave-mask-flame {
    transform: translateY(360px);
    animation: fillUp 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.1s;
}
.wave-mask-a path, .wave-mask-flame path {
    animation: waveMotion 0.8s ease-in-out infinite alternate;
}

@keyframes fillUp { 0% { transform: translateY(360px); } 100% { transform: translateY(0px); } }
@keyframes waveMotion { 0% { transform: translateX(-8px) skewY(-1deg); } 100% { transform: translateX(8px) skewY(1deg); } }

/* Scroll Snapping Layout (Desktop only) */
@media (min-width: 768px) {
    body.snap-home-body {
        overflow: hidden;
    }
    .snap-container {
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
        scroll-behavior: smooth;
    }
    .snap-section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        padding: 125px var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .snap-section > .container {
        margin: 0 auto auto auto;
        max-height: calc(100vh - 165px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}

/* Responsive height-based styles for laptops & small screens to prevent overflow and excessive gaps */
@media (min-width: 768px) and (max-height: 850px) {
    :root {
        --spacing-md: 12px;
        --spacing-lg: 20px;
        --spacing-xl: 30px;
        --spacing-xxl: 40px;
        --radius-cards: 24px;
    }
    .snap-section {
        padding-top: 105px !important;
    }
    #hero-title {
        font-size: 2.3rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    #hero-subtitle {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }
    .hero-image {
        height: 280px !important;
        width: auto !important;
    }
    .hero-section h1 {
        margin-bottom: 0.5rem !important;
    }
    .hero-section p {
        margin-bottom: 1.25rem !important;
    }
    .hero-stats-features .stat-box {
        padding: 1.25rem !important;
    }
    .hero-stats-features h3 {
        margin-bottom: 1rem !important;
    }
    .pops-card {
        height: 380px !important;
        padding: 1.25rem !important;
        flex-basis: 250px !important;
    }
    .pops-card-image-wrap {
        height: 130px !important;
    }
    .pops-card-title {
        font-size: 1.2rem !important;
    }
    .pops-card-desc {
        font-size: 0.85rem !important;
    }
    .map-teaser-section h3 {
        margin-bottom: 0.5rem !important;
    }
    /* Правило .contact-footer-section h2 удалено: заголовка в секции нет —
       она состоит из бегущей строки и подвала (в подвале только h4). */
}


/* Floating Parallax Elements */
.floating-element {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    user-select: none;
    opacity: 0.6; /* Reduced to be more subtle */
    transition: transform 0.2s ease-out;
}
.floating-bean-1 {
    width: 60px; /* Reduced from 70px */
    top: 15%;
    left: 10%;
    animation: drift-bean-1 12s ease-in-out infinite alternate;
}
.floating-bean-2 {
    width: 45px; /* Reduced from 55px */
    bottom: 25%;
    right: 15%;
    animation: drift-bean-2 10s ease-in-out infinite alternate-reverse;
}
.floating-cup-1 {
    width: 110px; /* Reduced from 150px to prevent text overlap */
    bottom: 12%;
    right: 6%; /* Positioned on right to avoid overlapping left CTA buttons */
    animation: float-rotate-cup 18s ease-in-out infinite;
}
.floating-bean-3 {
    width: 50px; /* Reduced from 60px */
    top: 25%;
    right: 20%;
    animation: drift-bean-3 15s ease-in-out infinite alternate;
}

@keyframes drift-bean-1 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(25px, 35px) rotate(45deg); }
}
@keyframes drift-bean-2 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(-20px, -25px) rotate(-35deg); }
}
@keyframes drift-bean-3 {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(15px, -30px) rotate(60deg); }
}
@keyframes float-rotate-cup {
    0%, 100% { transform: translateY(0px) rotate(-15deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

/* Hide floating decorative elements on tablet & mobile to prevent overlapping content */
@media (max-width: 1024px) {
    .floating-element {
        display: none !important;
    }
}

/* Mr. Pops Styled Flavor Cards & Carousel */
.pops-menu-carousel {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1.5rem 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.pops-menu-carousel::-webkit-scrollbar {
    display: none;
}
.pops-card {
    flex: 0 0 310px;
    background-color: var(--color-brand-cream);
    border-radius: var(--radius-cards);
    border: 2px solid var(--color-brand-green);
    padding: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 480px;
    box-sizing: border-box;
    transition: var(--transition-smooth);
    box-shadow: none !important;
}
.pops-card-image-wrap {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: var(--spacing-sm);
}
.pops-card-image {
    max-height: 180px;
    width: auto;
    object-fit: contain;
    transition: var(--transition-smooth);
}
.pops-card:hover .pops-card-image {
    transform: scale(1.12) rotate(6deg);
}
.pops-card-title {
    font-size: 1.5rem;
    font-family: var(--font-heading);
    font-weight: 800;
    margin-bottom: var(--spacing-xs);
    color: var(--color-brand-black);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pops-card-desc {
    font-size: 0.9rem;
    color: var(--color-brand-gray);
    line-height: 1.5;
    flex-grow: 1;
}
.pops-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
}
.pops-card-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-brand-green);
    font-family: var(--font-heading);
}
.pops-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
    animation: spin-badge 12s linear infinite;
    letter-spacing: 0.5px;
    z-index: 3;
}
@keyframes spin-badge {
    100% { transform: rotate(360deg); }
}
.pops-buy-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--color-brand-green);
    color: var(--color-brand-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
    transition: var(--transition-smooth);
}
.pops-buy-btn:hover {
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
    transform: scale(1.1);
}

/* Scroll indicators & control dots */
.snap-scroll-dots {
    display: none !important;
}
.snap-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-brand-green);
    background: transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
}
.snap-dot.active {
    background: var(--color-brand-orange);
    border-color: var(--color-brand-orange);
    transform: scale(1.3);
}

@media (max-width: 768px) {
    .snap-scroll-dots {
        display: none;
    }
}

/* User position pulse animation on the map */
@keyframes userPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(154, 27, 40, 0.7);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(154, 27, 40, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(154, 27, 40, 0);
    }
}

/* Map page custom overlay header (Mr. Pops Style) */
.map-overlay-header {
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .map-overlay-header {
        height: auto !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
        background: rgba(250, 246, 240, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        border-bottom: 2px solid var(--color-brand-black) !important;
        pointer-events: auto !important;
    }
    .map-overlay-header .search-container {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .map-overlay-header .logo-link {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    .map-overlay-header .nav-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
    .map-overlay-header .nav-actions a.btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* Interactive SVG Map on Homepage */
.map-teaser-interactive {
    transition: border-color 0.3s ease;
}
.map-teaser-interactive:hover {
    border-color: var(--color-brand-green) !important;
}

#homepage-svg-map {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1);
}

#homepage-svg-map.zoomed {
    transform: scale(3.5) translate(15%, 15%);
}

.map-teaser-region-path {
    fill: none;
    stroke: var(--color-brand-green);
    stroke-dasharray: none;
    stroke-width: 1.5px;
    transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}

.map-teaser-region-path:hover {
    fill: rgba(17, 112, 59, 0.12); /* Subtle green highlight fill (brand green, was a typo'd shade) */
    stroke: var(--color-brand-orange);
    stroke-width: 2.2px;
}

.map-teaser-water-path {
    fill: none;
    stroke: var(--color-brand-green);
    stroke-dasharray: 4 4;
    stroke-width: 1px;
}

/* Map Pins */
.map-teaser-pin {
    cursor: pointer;
}

.map-teaser-pin-pulse {
    animation: mapPinPulse 2s infinite;
    transform-origin: center;
    transform-box: fill-box;
    pointer-events: none; /* Prevent mouse events on pulsing ring from disrupting hovers */
}

@keyframes mapPinPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.8;
    }
}

.map-teaser-pin-core {
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.map-teaser-pin:hover .map-teaser-pin-core {
    transform: scale(1.35);
}



/* V2 Custom Form Spacing and Animations */
.form-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
}

@keyframes steamRise {
    0% {
        stroke-dashoffset: 0;
        opacity: 0;
        transform: translateY(4px);
    }
    30% {
        opacity: 0.6;
    }
    100% {
        stroke-dashoffset: -80;
        opacity: 0;
        transform: translateY(-12px);
    }
}

.cup-steam-path {
    stroke-dasharray: 40, 80;
    animation: steamRise 3s infinite linear;
    transform-origin: center bottom;
}

.cup-steam-path:nth-child(2) {
    animation-delay: 1s;
}

.cup-steam-path:nth-child(3) {
    animation-delay: 2s;
}

.coffee-cup-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(252, 185, 92, 0.2) 0%, rgba(252, 185, 92, 0) 70%);
    border-radius: 50%;
    filter: blur(20px);
    z-index: 0;
    animation: glowPulse 4s infinite ease-in-out;
    pointer-events: none;
}

@keyframes glowPulse {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.hero-image {
    cursor: pointer;
    overflow: visible !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image:hover {
    transform: translateY(-8px) rotate(1deg);
}

.hero-image:hover text {
    fill: var(--color-brand-orange) !important;
    transition: fill 0.3s ease;
}

.hero-image:hover path {
    fill: var(--color-brand-green) !important;
    transition: fill 0.3s ease;
}

.hero-image text {
    transition: fill 0.3s ease;
}

.hero-image path {
    transition: fill 0.3s ease;
}

/* --- MR. POPS VISUAL REFINEMENTS & RE-STYLED ELEMENTS --- */

/* Font Normalization & Display Styles */
h1, h2, h3, .pops-card-title, .menu-heading {
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* 1. Flat Bold Card & Outline Styles */
.pops-card,
.card-cream-bisque,
.locations-sidebar-container,
.locations-sidebar .location-card,
.admin-modal,
.cart-drawer,
.recipe-modal,
#pops-menu-carousel .pops-card {
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
    background-color: var(--color-brand-cream) !important;
}

/* Location card hover/active override */
.locations-sidebar .location-card:hover,
.locations-sidebar .location-card.active {
    border-color: var(--color-brand-black) !important;
    background-color: var(--color-brand-orange) !important;
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0px var(--color-brand-black) !important;
}

/* Pops card hover effect (Flat Offset Shadow) */
.pops-card:hover {
    transform: translate(-4px, -4px);
    border-color: var(--color-brand-black) !important;
    box-shadow: 6px 6px 0px var(--color-brand-black) !important;
}

/* 2. Tactile Pill Buttons & Sweep Fill Effect */
.btn {
    border-radius: 9999px !important;
    border: 2px solid var(--color-brand-black) !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    box-shadow: none !important;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn > * {
    position: relative;
    z-index: 2;
}

/* Sweep element container */
.btn::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-brand-green);
    z-index: -1;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.btn:hover::before {
    transform: translateY(-100%);
}

/* Primary Button color styling */
.btn-primary {
    background-color: var(--color-brand-orange) !important;
    color: var(--color-brand-black) !important;
}

.btn-primary:hover {
    color: var(--color-brand-white) !important;
}

/* Secondary Button color styling */
.btn-secondary {
    background-color: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
}

.btn-secondary::before {
    background-color: var(--color-brand-orange) !important;
}

.btn-secondary:hover {
    color: var(--color-brand-black) !important;
}

/* 3. Hamburger Menu Overlay Drawer */
.hamburger-toggle:not(.header-hamburger-btn) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100;
    pointer-events: auto;
}

.hamburger-toggle:not(.header-hamburger-btn) span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-brand-black);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-toggle:not(.header-hamburger-btn).active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.hamburger-toggle:not(.header-hamburger-btn).active span:nth-child(2) {
    opacity: 0;
}

.hamburger-toggle:not(.header-hamburger-btn).active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Side Menu Overlay Drawer Drawer */
.side-menu-drawer:not(.side-menu-drawer-premium) {
    position: fixed;
    top: 0;
    right: -450px;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--color-brand-cream);
    border-left: 3px solid var(--color-brand-black);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    padding: 3rem 2rem;
    box-sizing: border-box;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    visibility: hidden;
}

.side-menu-drawer:not(.side-menu-drawer-premium).open {
    transform: translateX(-450px);
    visibility: visible;
}

.side-menu-close {
    font-size: 2.5rem;
    cursor: pointer;
    color: var(--color-brand-black);
    background: none;
    border: none;
    transition: transform 0.2s ease;
}

.side-menu-close:hover {
    transform: scale(1.1) rotate(90deg);
}

/* Backdrop Blur Overlay */
.side-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(1, 8, 17, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.side-menu-backdrop.open {
    opacity: 1;
    visibility: visible;
}

/* Links inside Side Menu */
.side-menu-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2rem;
}

.side-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.side-menu-links li {
    overflow: hidden;
}

.side-menu-lnk {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-brand-black);
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.side-menu-lnk:hover {
    color: var(--color-brand-green);
    transform: translateX(10px);
}

.side-menu-footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 2px solid rgba(1, 8, 17, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.side-menu-phone {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-brand-black);
}

.side-menu-phone:hover {
    color: var(--color-brand-green);
}

/* Hide desktop menu on smaller screens, and show hamburger */
@media (max-width: 991px) {
    .nav-links {
        display: none !important;
    }
}

/* 4. Mr. Pops Inspired Hero Styling with Background Image, 3D Glassmorphism Left Card and Circular Buttons */
.hero-section {
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 650px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--color-brand-green);
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-image: hero-bg.png удалён 2026-07-08 — файл был 0-байтовой
       пустышкой, ссылка давала холостой сетевой запрос */
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-bg-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(12, 38, 21, 0.9) 0%, 
        rgba(12, 38, 21, 0.55) 40%, 
        rgba(12, 38, 21, 0.1) 75%,
        rgba(12, 38, 21, 0.3) 100%);
    z-index: 2;
}

.hero-container-glass {
    position: relative;
    z-index: 4;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    height: 100%;
    min-height: calc(100vh - 100px);
    padding-top: 60px;
}

/* 3D Glassmorphism Left Content Card */
.hero-glass-card-new {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    padding: 0;
    max-width: 750px;
    width: 100%;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: center !important;
    margin-left: 0 !important;
    animation: heroGlassFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(35px) scale(0.98);
}

@keyframes heroGlassFadeIn {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Shiny Gloss/Glass Text Title */
.hero-huge-title-glass {
    font-family: var(--font-heading) !important;
    font-size: clamp(3rem, 5.5vw, 5.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 1.5rem 0 !important;
    color: #ffffff !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.45);
}

.hero-editorial-subtitle-glass {
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.65 !important;
    margin-bottom: 2.5rem !important;
    font-weight: 400 !important;
    max-width: 600px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.hero-pops-actions-glass {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: flex-start;
    width: 100%;
    position: relative;
}

/* Soft green backdrop glow behind actions */
.hero-pops-actions-glass::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(0, 255, 127, 0.15) 0%, rgba(0, 255, 127, 0) 70%);
    z-index: -1;
    pointer-events: none;
    filter: blur(10px);
}

/* Mr. Pops Pill Button Style */
.pops-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.5rem;
    padding-right: 2rem;
    height: 60px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(184, 255, 213, 0.25);
    background: rgba(1, 8, 17, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 0 15px rgba(0, 255, 127, 0.05);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    width: fit-content;
}

.pops-pill-btn .pill-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-size: 0.9rem;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.pops-pill-btn .pill-btn-text {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover effects matching the screenshot glow */
.pops-pill-btn:hover {
    border-color: rgba(0, 255, 127, 0.8);
    box-shadow: 
        0 0 25px rgba(0, 255, 127, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.pops-pill-btn:hover .pill-btn-icon {
    border-color: rgba(0, 255, 127, 1);
    background-color: rgba(0, 255, 127, 0.15);
    color: #00ff7f;
    transform: rotate(45deg);
}

.pops-pill-btn:hover .pill-btn-text {
    color: #b8ffd5;
    text-shadow: 0 0 8px rgba(0, 255, 127, 0.6);
}

/* Responsiveness adjustments for smaller devices */
@media (max-width: 991px) {
    .hero-container-glass {
        justify-content: center;
        align-items: center;
        padding: 95px 1.2rem 40px 1.2rem;
    }
    
    .hero-glass-card-new {
        padding: 2.5rem 1.8rem;
        border-radius: 24px;
        max-width: 100%;
        align-items: center;
        text-align: center;
    }
    
    .hero-huge-title-glass {
        font-size: 2.1rem !important;
        text-align: center;
        margin-bottom: 1.2rem !important;
        background: linear-gradient(135deg, #ffffff 0%, #b8ffd5 50%, var(--color-brand-green) 100%);
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }
    
    .hero-editorial-subtitle-glass {
        text-align: center;
        font-size: 0.92rem !important;
        margin-bottom: 2rem !important;
        line-height: 1.65 !important;
    }
    
    .hero-pops-actions-glass {
        align-items: center;
        gap: 1.2rem;
    }
}

/* --- Mr. Pops Header, Hamburger and Radial Menu Drawer Styles --- */
header.site-header {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
    padding: 0.75rem 0;
    z-index: 2005 !important;
    box-shadow: none !important;
    pointer-events: none;
}

header.site-header .logo-link,
header.site-header .header-actions {
    pointer-events: auto;
}

header.site-header.scrolled {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 0.5rem 0;
}

/* Transparent Header Button Styles (Dark Hero Section on Home Page)
   FIX 2026-07-02: было завязано на :not(.scrolled) — при скролле класс
   .scrolled добавляется, правило переставало действовать, и кнопки
   откатывались на чёрный БАЗОВЫЙ цвет (.header-hamburger-btn/.header-cart-btn
   ниже), хотя тема хедера (.header-theme-dark) остаётся тёмной.
   Привязано к теме, а не к состоянию скролла — так же, как уже
   сделано для .header-nav-lnk (header-theme-light .header-nav-lnk). */
header.site-header.header-theme-dark .header-cart-btn {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

header.site-header.header-theme-dark .header-cart-btn .divider {
    background-color: #ffffff !important;
}

header.site-header.header-theme-dark .header-cart-btn:hover {
    background-color: #ffffff !important;
    color: var(--color-brand-green) !important;
}

header.site-header.header-theme-dark .header-cart-btn:hover .divider {
    background-color: var(--color-brand-green) !important;
}

header.site-header.header-theme-dark .header-menu-link {
    color: #ffffff !important;
}

header.site-header.header-theme-dark .header-menu-link:hover {
    color: var(--color-brand-orange) !important;
}

header.site-header.header-theme-dark .header-hamburger-btn:not(.active) {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

header.site-header.header-theme-dark .header-hamburger-btn:not(.active):hover {
    background-color: #ffffff !important;
    color: var(--color-brand-green) !important;
}

header.site-header.header-theme-dark .header-hamburger-btn:not(.active) .hamburger-icon span {
    background-color: #ffffff !important;
}

header.site-header.header-theme-dark .header-hamburger-btn:not(.active):hover .hamburger-icon span {
    background-color: var(--color-brand-green) !important;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-cart-btn {
    display: inline-flex;
    align-items: center;
    /* FIX 2026-07-02: было var(--color-brand-black) — по просьбе
       пользователя чёрный (светлая тема шапки) заменён на фирменный
       зелёный. */
    border: 2px solid var(--color-brand-green);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-brand-green);
    padding: 0.5rem 1rem;
    font-size: var(--text-body-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 44px;
    text-decoration: none;
}

.header-cart-btn:hover {
    background-color: var(--color-brand-orange);
    color: #ffffff;
}

.header-cart-btn .divider {
    display: inline-block;
    width: 2px;
    height: 18px;
    background-color: var(--color-brand-green);
    margin: 0 0.75rem;
    transition: background-color 0.3s ease;
}

.header-cart-btn:hover .divider {
    background-color: var(--color-brand-cream);
}

.header-cart-btn .cart-count {
    min-width: 14px;
    text-align: center;
}

.header-menu-link {
    font-weight: 700;
    font-size: var(--text-body-sm);
    color: var(--color-brand-green);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    margin-right: 0.5rem;
    transition: color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.header-menu-link:hover {
    color: var(--color-brand-orange);
}

.header-hamburger-btn {
    display: inline-flex;
    align-items: center;
    /* FIX 2026-07-02: было var(--color-brand-black) — по просьбе
       пользователя чёрный (светлая тема шапки) заменён на фирменный
       зелёный. */
    border: 2px solid var(--color-brand-green);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-brand-green);
    padding: 0.5rem 1.25rem;
    font-size: var(--text-body-sm);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 44px;
    position: relative;
    z-index: 2005; /* higher than drawer overlay */
    gap: 0.75rem;
}

.header-hamburger-btn:hover {
    background-color: var(--color-brand-green);
    color: var(--color-brand-cream);
}

.header-hamburger-btn:hover .hamburger-icon span {
    background-color: var(--color-brand-cream);
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 12px;
    position: relative;
}

.hamburger-icon span {
    display: block;
    width: 100%;
    height: 2px;
    /* FIX 2026-07-02: было var(--color-brand-black) — заменено на
       фирменный зелёный (светлая тема шапки), по просьбе пользователя. */
    background-color: var(--color-brand-green);
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease, background-color 0.4s ease;
}

/* Active State (Open Drawer) */
.header-hamburger-btn.active {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--color-brand-green) !important;
    width: 44px;
    padding: 0 !important;
    justify-content: center;
}

.header-hamburger-btn.active .hamburger-label {
    display: none;
}

.header-hamburger-btn.active .hamburger-icon span {
    background-color: var(--color-brand-green) !important;
}

/* Morph lines into ✕ */
.header-hamburger-btn.active .hamburger-icon span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.header-hamburger-btn.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.header-hamburger-btn.active .hamburger-icon span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* Backdrop */
.side-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    z-index: 2000;
    pointer-events: none;
    transition: opacity 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
}

.side-menu-backdrop.open {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: auto;
}

/* Side Menu Drawer (Container) */
.side-menu-drawer-premium {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 380px;
    height: auto;
    max-height: calc(100vh - 3rem);
    background-color: transparent; /* Made transparent to allow canvas reveal */
    border-radius: 24px;
    z-index: 2004;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    color: #ffffff;
    
    /* Hidden state with delayed transitions */
    visibility: hidden;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0);
    transition: visibility 0s linear 0.4s, border-color 0.3s ease, box-shadow 0.3s ease;
}

.side-menu-drawer-premium.open {
    visibility: visible;
    pointer-events: auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* GPU-Accelerated Reveal Background wrapper and canvas */
.menu-reveal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    display: block;
}

.menu-reveal-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Drawer Content Container */
.side-menu-content {
    position: relative;
    z-index: 1; /* Place content above the canvas */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem 2.2rem;
    opacity: 0;
    transform: translateY(15px);
    transition: none !important; /* Disabled CSS transitions to avoid GSAP rendering conflicts */
    will-change: opacity, transform;
}

.side-menu-drawer-premium.open .side-menu-content {
    opacity: 1;
    transform: translateY(0);
    transition: none !important; /* Disabled CSS transitions to avoid GSAP rendering conflicts */
}

.side-menu-header {
    height: 60px;
    display: flex;
    align-items: center;
}

.side-menu-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 2rem;
}

.side-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.side-menu-links li {
    overflow: hidden;
}

.side-menu-lnk {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: 2.75rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;
}

.side-menu-lnk:hover {
    color: var(--color-brand-orange);
    transform: translateX(10px);
}

.side-menu-footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.side-menu-phone {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.side-menu-phone:hover {
    color: var(--color-brand-orange);
}

.side-menu-secondary-links {
    display: flex;
    gap: 1rem;
}

.drawer-secondary-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-pill);
    background: transparent;
    color: #ffffff;
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.drawer-secondary-link:hover {
    background-color: #ffffff;
    color: var(--color-brand-green);
    border-color: #ffffff;
}

.side-menu-close-btn {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.side-menu-close-btn:hover {
    transform: scale(1.1);
    opacity: 0.85;
}

.side-menu-close-btn svg {
    display: block;
}

/* Language Toggle Inside Drawer */
.side-menu-lang-wrapper {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-pill);
    padding: 2px;
    margin-top: 0.25rem;
}

.side-menu-lang-wrapper .lang-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.side-menu-lang-wrapper .lang-btn.active {
    background: #ffffff;
    color: var(--color-brand-green);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .side-menu-drawer-premium {
        top: 1rem;
        right: 1rem;
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
        max-height: none;
        border-radius: 20px;
    }
}

@media (max-width: 576px) {
    .side-menu-content {
        padding: 2rem 2rem;
    }
    .side-menu-lnk {
        font-size: 2.2rem;
    }
    .side-menu-secondary-links {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Hide logo link, cart button and flavours text link when side menu is open to prevent overlapping and click interception */
body.menu-open .logo-link,
body.menu-open .header-cart-btn,
body.menu-open .header-menu-link,
body.menu-open .header-hamburger-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Add smooth transitions for header elements */
.logo-link {
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.menu-open .header-actions {
    pointer-events: none !important;
}

/* --- Creative WebGL & Scroll-telling Styling Additions --- */
.custom-cursor {
    display: none !important;
}

/* Responsive Split-screen Map Teaser for Mobile & Tablet */
@media (max-width: 768px) {
    .custom-cursor {
        display: none !important;
    }
    
    #map-teaser {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh;
    }
    
    .map-teaser-left, 
    .map-teaser-right {
        width: 100% !important;
        height: 50vh !important;
        padding: 2.5rem 1.5rem !important;
    }
    
    .map-teaser-left {
        border-bottom: 2px solid var(--color-brand-black);
        padding-top: 100px !important; /* Top space for site header navigation overlap */
        /* FIX 2026-07-02: базовый .map-teaser-left — flex-колонка с
           justify-content:center; при фиксированной height:50vh (406px)
           и заголовке в 6 строк контент не помещался и центрировался
           с «вылезанием» верхней строки заголовка под фиксированную
           шапку, несмотря на padding-top:100px. Высота отдаётся под
           контент, выравнивание — от начала, а не по центру. */
        height: auto !important;
        min-height: 50vh;
        justify-content: flex-start !important;
    }
    
    .map-teaser-right {
        border-left: none !important;
    }
    
    #homepage-map-teaser-container {
        padding: 0 !important;
    }
}

/* Desktop layout overrides for snap-section layout to enable edge-to-edge split panels */
@media (min-width: 768px) {
    .snap-section.map-teaser-section {
        flex-direction: row !important;
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        border-bottom-left-radius: 40px !important;
        border-bottom-right-radius: 40px !important;
        border-bottom: 2px solid var(--color-brand-black) !important;
        overflow: hidden !important;
    }
}

/* Responsive styling overrides to ensure text readability on dynamic background gradients */
.fallback-gradients-active .snap-section {
    transition: background 0.8s ease-in-out;
}

/* --- Mr. Pops Map Teaser Custom Styles --- */
.map-teaser-heading {
    /* FIX 2026-07-02: было фиксированное 3.2rem (не масштабируется
       под вьюпорт, в отличие от hero/tech) + вес 900 и letter-spacing
       в px — выровнено с остальными 3 крупными заголовками секций. */
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    font-family: var(--font-heading);
    color: var(--color-brand-green);
    margin-bottom: 2rem;
    max-width: 550px;
    letter-spacing: -0.02em;
}

.azbi-map-cta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 1.5rem;
}

.azbi-map-cta__circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--color-brand-black);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    animation: blob-morph 6s ease-in-out infinite alternate;
}

.azbi-map-cta__circle i {
    font-size: 1.4rem;
    color: var(--color-brand-black);
    transition: transform 0.3s ease, color 0.3s ease;
}

.azbi-map-cta__label {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-brand-black);
    transition: color 0.3s ease;
}

/* Hover Effects matching Mr. Pops style */
.azbi-map-cta:hover .azbi-map-cta__circle {
    background-color: var(--color-brand-green);
    border-color: var(--color-brand-black);
    /* FIX 2026-07-02: было soft blur-shadow (запрещено манифестом,
       Flat-By-Default + blur>8px). Заменено на ту же "магнитную"
       физику жёсткой offset-тени, что у .btn/.editorial-card/.pops-card. */
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0px var(--color-brand-black);
}

.azbi-map-cta:hover .azbi-map-cta__circle i {
    color: var(--color-brand-white);
    transform: translateX(6px);
}

.azbi-map-cta:hover .azbi-map-cta__label {
    color: var(--color-brand-green);
}

@keyframes blob-morph {
    0% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
    33% { border-radius: 56% 44% 53% 47% / 46% 53% 47% 54%; }
    66% { border-radius: 47% 53% 44% 56% / 53% 47% 56% 44%; }
    100% { border-radius: 53% 47% 55% 45% / 47% 55% 45% 53%; }
}

@media (max-width: 768px) {
    .map-teaser-heading {
        font-size: 1.8rem !important;
        margin-bottom: 1.2rem !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .map-teaser-left {
        text-align: center !important;
        align-items: center !important;
        padding: 3rem 1.5rem !important;
        padding-top: 100px !important;
    }
    .azbi-map-cta {
        margin-top: 1rem !important;
        justify-content: center !important;
    }
    .map-teaser-right {
        padding: 1rem !important;
    }
    .menu-heading-centered {
        font-size: 2.2rem !important;
    }
}

/* --- Mr. Pops Menu Section & Container Stretch --- */
#popular-menu .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 5% !important;
    box-sizing: border-box !important;
    max-height: none !important; /* Prevent vertical clipping */
}

@media (max-width: 768px) {
    #popular-menu .container {
        padding: 0 1.5rem !important;
    }
}

/* ===== MENU SECTION — DARK THEME + MR. POPS SLIDE ANIMATION ===== */

/* Section container */
/* FIX 2026-07-02: было 3 определения .pops-menu-section с разными
   background-color (white / green / cream) — консолидировано в одно,
   сохранив фактически побеждавшие значения (тёмно-зелёный фон,
   чёрный ambient-color, перекрываемый явными цветами дочерних
   элементов). */
.pops-menu-section {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--color-brand-green) !important;
    color: var(--color-brand-black) !important;
}

.menu-header-centered {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 2rem !important;
    width: 100% !important;
}

/* 4-column grid */
/* FIX 2026-07-02: было display:grid с переносом строк — при 9+ карточках
   и `overflow: hidden` на секции (для snap-scroll) 2-я и 3-я строки
   оказывались недоступны пользователю (обрезаны по высоте слайда),
   а кнопки-стрелки (scrollMenu()) не работали, т.к. scrollWidth грида
   равнялся clientWidth (скроллить было нечего). Теперь это настоящая
   горизонтальная карусель в один ряд — все карточки доступны через
   стрелки/свайп, ничего не обрезается. */
.pops-menu-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
    padding: 2rem 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
    position: relative !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.pops-menu-grid::-webkit-scrollbar {
    display: none !important;
}

.pops-menu-grid .pops-card {
    flex: 0 0 calc((100% - 3rem) / 4) !important;
    min-width: 260px !important;
    scroll-snap-align: start !important;
}

/* ─── CARD BASE ─── */
.pops-menu-grid .pops-card {
    border: 2px solid var(--color-brand-black, #010811) !important;
    background: var(--color-brand-cream, #fffbed) !important;
    /* FIX 2026-07-02: было хардкод 24px — теперь ссылается на токен
       --radius-cards, как остальные карточки сайта. */
    border-radius: var(--radius-cards, 40px) !important;
    height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                border-color 0.25s ease,
                background-color 0.25s ease !important;
}

.pops-menu-grid .pops-card:hover {
    transform: translate(-6px, -6px) !important;
    box-shadow: 6px 6px 0px var(--color-brand-black, #010811) !important;
    border-color: var(--color-brand-black, #010811) !important;
    background-color: var(--color-brand-cream, #fffbed) !important;
}

/* ─── IMAGE AREA ─── */
/* FIX 2026-07-15 (композиция): было height:58% (=276px) при инфо-панели в
   157-204px — два абсолютно спозиционированных блока просто не стыковались,
   и между ними висело 42.7px ничьего крема. Высота панели теперь
   зафиксирована (min-height:204px ниже), поэтому картиночную зону считаем
   от неё же: обе половины карточки сходятся ровно встык, без ничьей полосы. */
.pops-menu-grid .pops-card-image-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 204px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: transparent !important;
    border: none !important;
    z-index: 2 !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Slide image UP on hover - disabled */
.pops-menu-grid .pops-card:hover .pops-card-image-wrap {
    transform: none !important;
}

/* ─── SVG drink illustration ─── */
/* FIX 2026-07-15 (композиция): 130px — абсолютный размер, назначенный без
   оглядки на панель: чашка занимала ~13% площади карточки 268x480 и тонула
   в кремовом поле, под ней оставалось ~170px пустоты. Размер привязан к
   картиночной зоне (272px на десктопе): 72% от неё — чашка набирает вес,
   но не упирается в края и не задевает инфо-панель.
   ВАЖНО (правка 2026-07-15, вторая итерация): размер обязан ехать за высотой
   картиночной зоны, а зона переопределяется в трёх медиа-запросах
   (200px / 170px / 120px — см. ниже). Проценты здесь НЕ работают: ближайший
   родитель svg — .split-part-inner с height:auto, его высоту задаёт сам svg,
   т.е. процент упирается в круг и откатывается к атрибуту width="70".
   Поэтому размер задан в px и продублирован в каждом брейкпоинте рядом с
   высотой зоны. Правило одно: svg ≈ 72% высоты своей зоны.
   Заметка на будущее: у самих SVG ink занимает лишь ~60-70% вьюбокса и сидит
   в нём высоко (низ 100x100 почти пустой), поэтому даже увеличенная чашка
   стоит выше оптического центра зоны. Чинится это подрезкой viewBox под ink
   в каждой из 8 иллюстраций — это правка арт-дирекшена (у части чашек в ink
   входит трубочка, у части нет), сюда не лезу. */
.pops-card-image-wrap svg,
.pops-menu-grid .split-image-container svg,
.pops-menu-grid .pops-card-image-wrap svg {
    width: 196px !important;
    height: 196px !important;
    transition: none !important;
    filter: none !important;
}

.pops-menu-grid .pops-card:hover .pops-card-image-wrap svg {
    transform: none !important;
}

/* Disabled radial product glow */
.card-product-glow {
    display: none !important;
}

/* ─── BOTTOM INFO PANEL ─── */
/* FIX 2026-07-15 (палитра): сама карточка кремовая (.pops-card выше), а
   инфо-панель была белой — на стыке двух заливок шёл жёсткий
   горизонтальный шов крем→белый через все карточки меню, и на главной,
   и на menu.html. Панель не отдельная плашка, а низ той же карточки —
   заливка должна совпадать. */
/* FIX 2026-07-15 (композиция): панель растёт вверх от bottom:0, поэтому её
   высота диктовала позицию заголовка — и заголовки ехали по ряду. Разброс
   был не в один дефект: описание бывает 2 или 3 строки (+18.4px), а длинные
   названия («Айс Чай Малина Каркадэ») переносятся на 2 строки (+28px) —
   вместе до 46.4px расхождения, ступенька видна невооружённым глазом.
   Фиксируем высоту панели по самой высокой в наборе (203.6px -> 204px): у
   всех карточек верх панели, а значит и заголовок, встают на один уровень.
   min-height, а не height: на узких экранах описание может уйти в 4 строки —
   пусть панель вырастет и текст останется целым, чем ровный ряд ценой
   обрезанной строки (у карточки overflow:hidden).
   Цена как стояла по низу (455.6px у всех), так и стоит: слабину забирает
   описание через давно живущий `.pops-card-desc { flex-grow: 1 }` — ему для
   работы нужна панель с заданной высотой, поэтому info-wrap стал флекс-
   колонкой, а details ниже получил flex:1. */
.pops-menu-grid .pops-card-info-wrap {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 204px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 1.2rem 1.4rem 1.4rem 1.4rem !important;
    box-sizing: border-box !important;
    background: var(--color-brand-cream) !important;
    z-index: 3 !important;
    transform: none !important;
    transition: none !important;
}

.pops-menu-grid .pops-card:hover .pops-card-info-wrap {
    transform: none !important;
}

.pops-menu-grid .pops-card-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    /* Тянемся на всю панель, иначе margin-top:auto у цены не от чего отталкивать. */
    flex: 1 !important;
}

/* ─── TYPOGRAPHY — DARK HIGH CONTRAST ─── */
.pops-menu-grid .pops-card-title {
    /* FIX 2026-07-02: не было font-family — падало на body-шрифт
       вместо Galdern, в отличие от всех остальных card-title на сайте. */
    font-family: var(--font-heading) !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--color-brand-black) !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 0.3rem !important;
    transition: color 0.3s !important;
}

.pops-menu-grid .pops-card-desc {
    font-size: 0.82rem !important;
    color: rgba(1, 8, 17, 0.7) !important;
    line-height: 1.4 !important;
    margin-bottom: 0.6rem !important;
}

.pops-menu-grid .pops-card-price {
    font-family: var(--font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    color: var(--color-brand-green) !important;
    letter-spacing: 0.02em !important;
}

/* ─── BADGE (ICE / NEW) ─── */
.pops-menu-grid .pops-badge {
    position: absolute !important;
    top: 1.2rem !important;
    left: 1.2rem !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 2px solid var(--color-brand-black) !important;
    background: var(--color-brand-orange) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: var(--color-brand-black) !important;
    transform: rotate(-10deg) !important;
    z-index: 5 !important;
    box-shadow: 2px 2px 0px var(--color-brand-black) !important;
    transition: background 0.3s, color 0.3s !important;
}

.pops-menu-grid .pops-card:hover .pops-badge {
    background: var(--color-brand-orange, #fcb95c) !important;
    color: #fff !important;
}

/* ─── SPLIT IMAGE (keep container but simplify) ─── */
.split-image-container {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ─── ALL SPLIT PARTS: show as centered image ─── */
/* Hide split-core bean (no emoji/icon on hover) */
.split-core {
    display: none !important;
}

/* All split parts act as single image — show first visible one */
.split-part {
    position: relative !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    clip-path: none !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Hide duplicates — show only first split-part */
.split-part ~ .split-part {
    display: none !important;
}

.split-part-inner svg {
    width: 140px !important;
    height: 140px !important;
    display: block !important;
    transition: transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    filter: none !important;
}

.pops-menu-grid .pops-card:hover .split-part {
    transform: translateY(-10px) scale(1.08) !important;
}

.pops-menu-grid .pops-card:hover .split-part-inner svg {
    filter: none !important;
}

/* ─── SLIDING HIGHLIGHT placeholder (JS-driven) ─── */
.grid-highlight {
    position: absolute !important;
    pointer-events: none !important;
    /* FIX 2026-07-02: пастельный #b7e4c7 не входит в палитру бренда
       (брендбук знает только плоский Azbi green #11703b) — заменено
       на альфа-тон фирменного зелёного. Блюр теней сокращён до ≤8px
       (манифест запрещает мягкие тени с радиусом размытия > 8px). */
    border: 2.5px solid rgba(17, 112, 59, 0.5) !important;
    background-color: rgba(17, 112, 59, 0.05) !important;
    border-radius: 28px !important;
    opacity: 0 !important;
    z-index: 20 !important;
    transition:
        left   0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        top    0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        width  0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        height 0.38s cubic-bezier(0.34, 1.2, 0.64, 1),
        opacity 0.25s ease !important;
    box-shadow: 0 0 8px rgba(17, 112, 59, 0.4),
                inset 0 0 8px rgba(17, 112, 59, 0.15) !important;
}

.grid-highlight.visible {
    opacity: 1 !important;
}

/* ─── HEADING + SUBHEADING WHITE ─── */
.menu-heading-centered, #menu-heading {
    /* FIX 2026-07-02: было фиксированное 3.6rem (не масштабируется
       под вьюпорт) + вес 900 и letter-spacing в px — выровнено с
       остальными 3 крупными заголовками секций. */
    font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Prevent text-gradient clip */
    background: none !important; /* Override text-gradient background */
    margin-bottom: 1.2rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
}

.azbi-menu-btn {
    margin-top: 0.5rem;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    padding: 0.8rem 2.2rem !important;
}

/* Responsive card styling for tablet and mobile devices */
@media (max-width: 1200px) {
    .pops-menu-grid .pops-card {
        flex: 0 0 calc((100% - 2rem) / 3) !important;
    }
}

@media (max-width: 992px) {
    .pops-menu-grid .pops-card {
        flex: 0 0 calc((100% - 1rem) / 2) !important;
    }
}

@media (max-width: 768px) {
    .pops-menu-grid {
        gap: 0.5rem !important;
    }
    .pops-menu-grid .pops-card {
        flex: 0 0 calc((100% - 0.5rem) / 2) !important;
        height: 500px !important;
        padding: 2.5rem 1.4rem 2rem 1.4rem !important;
    }
    .pops-menu-grid .pops-card-image-wrap {
        height: 200px !important;
    }
    /* FIX 2026-07-15: зона тут 200px, а базовое правило пиннит svg на 196px —
       чашка занимала зону целиком и упиралась в края. 72% от 200. Селектор
       обязан повторять `.pops-menu-grid .pops-card-image-wrap svg`: у
       `.split-part-inner svg` ниже специфичность меньше, базовые 196px её
       перебивают, поэтому одного его тут недостаточно. */
    .pops-menu-grid .pops-card-image-wrap svg {
        width: 144px !important;
        height: 144px !important;
    }
    .split-part-inner svg {
        width: 95px !important;
        height: 95px !important;
    }
    .pops-menu-grid .pops-card-title {
        font-size: 1.35rem !important;
    }
    .pops-menu-grid .pops-card-desc {
        font-size: 0.85rem !important;
    }
    .pops-menu-grid .pops-card-price {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 576px) {
    .pops-menu-grid {
        gap: 8px !important;
        padding: 6px !important;
    }
    .pops-menu-grid .pops-card {
        flex: 0 0 88% !important;
        min-width: 0 !important;
        height: 460px !important;
        padding: 2.2rem 1.2rem 1.8rem 1.2rem !important;
        /* FIX 2026-07-02: асимметричный радиус 30/12/12/12 не входит
           в шкалу DESIGN.md (4/8/16/24/40) — единый угол по токену. */
        border-radius: var(--radius-cards, 40px) !important;
    }
    .pops-menu-grid .pops-card-image-wrap {
        height: 170px !important;
    }
    /* FIX 2026-07-15: зона 170px против базовых 196px — чашку резало
       по 13px сверху и снизу (у карточки overflow:hidden). 72% от 170. */
    .pops-menu-grid .pops-card-image-wrap svg {
        width: 122px !important;
        height: 122px !important;
    }
    .split-part-inner svg {
        width: 85px !important;
        height: 85px !important;
    }
    .pops-menu-grid .pops-card-title {
        font-size: 1.2rem !important;
    }
    .pops-menu-grid .pops-badge {
        top: 1.5rem !important;
        left: 1.2rem !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 0.68rem !important;
    }
}

/* Hide global custom cursor on card spotlight hover */
.custom-cursor.pops-hover {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0) !important;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s !important;
}

/* Page Transition Overlay (Mr. Pops Style) */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 150vh;
    z-index: 99999;
    pointer-events: none;
    display: none;
    transform: translateY(100%);
    background: transparent;
}
.page-transition-overlay svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Azbi Premium Light Theme Adaptations (Clean, High Contrast, Brand Palette)
   ========================================================================== */

/* Global Home Page Rules */
body.snap-home-body {
    background-color: var(--color-brand-green) !important;
    color: var(--color-brand-black) !important;
}

.snap-container {
    background-color: var(--color-brand-cream) !important;
}

/* Секции без явного грунта — светлые по умолчанию. Секции слоя чередования
   (.s-green / .s-warm, см. ALTERNATION LAYER v7 в конце файла) исключены —
   их грунт задаёт сам слой. (.hero-section — легаси-исключение старого
   WebGL-героя, класса больше нет в разметке.) */
.snap-section:not(.hero-section):not(.pops-menu-section):not(.s-green):not(.s-warm) {
    background-color: var(--color-brand-white) !important;
    color: var(--color-brand-black) !important;
}


/* Slide 2: Stats & Key Tech
   FIX 2026-07-15 (контраст): блок писался под метрики второго слайда
   главной (.metric-val/.metric-lbl), но таких элементов в разметке нет
   ни на одной странице — единственный живой .metric-circle-container
   лежит на about.html ВНУТРИ зелёной постер-карточки .about-metric-card
   и инлайном просит `background: transparent`. Кремовая заливка с
   !important перебивала инлайн и печатала внутри зелёной карточки
   незапланированную кремовую плашку. На ней «100%» (inline #ffffff) давал
   1.00:1 — ключевое число было физически невидимо, а оранжевое кольцо
   вокруг него — 1.67:1, ровно запрещённая палитрой пара крем×оранжевый.
   Заливка снята: карточка снова зелёная, крем по зелёному = 5.95:1,
   кольцо по зелёному = 3.59:1 (графика, не текст — порог 3:1 пройден). */
.metric-circle-container {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--color-brand-cream) !important;
    transition: var(--transition-smooth) !important;
}
.metric-circle-container .metric-val {
    color: var(--color-brand-green) !important;
}
.metric-circle-container .metric-lbl {
    color: var(--color-brand-black) !important;
}
/* Тот же мёртвый блок: hover рисовал оранжевый кант вокруг плашки, которой
   больше нет, — на зелёной карточке это была бы просто рамка ниоткуда.
   Осталось только приподнимание. */
.metric-circle-container:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    transform: translateY(-6px) !important;
}
.metric-circle-container:hover .metric-val {
    color: var(--color-brand-orange) !important;
}
.metric-circle-container:hover .metric-lbl {
    color: var(--color-brand-white) !important;
}

.about-feature-icon {
    background-color: var(--color-brand-cream) !important;
    border-color: var(--color-brand-green) !important;
    color: var(--color-brand-green) !important;
    transition: var(--transition-smooth) !important;
}
.about-feature-item h3 {
    color: var(--color-brand-black) !important;
}
.about-feature-item p {
    color: var(--color-brand-gray) !important;
}
.about-feature-item:hover {
    background-color: transparent !important;
}
.about-feature-item:hover .about-feature-icon {
    background-color: var(--color-brand-green) !important;
    border-color: var(--color-brand-orange) !important;
    color: var(--color-brand-white) !important;
}
.about-feature-item:hover h3 {
    color: var(--color-brand-green) !important;
}

/* Slide 3: Popular Drinks Carousel Section */
.pops-menu-section .menu-heading-centered {
    color: var(--color-brand-white) !important;
}
/* .azbi-menu-btn styles removed to inherit standard button style */

/* Slide 4: Map Teaser Section */
.map-teaser-heading {
    color: var(--color-brand-black) !important;
}
.azbi-map-cta__circle {
    /* FIX 2026-07-02: было border зелёный + мягкая тень 15px blur в
       состоянии покоя — нарушало Contrast Border Rule (плашка на
       светлом фоне обязана иметь ЧЁРНУЮ обводку) и Flat-By-Default
       (тень допустима только на hover, без блюра > 8px). */
    border: 2px solid var(--color-brand-black) !important;
    background: var(--color-brand-cream) !important;
    box-shadow: none !important;
}
.azbi-map-cta__circle i {
    color: var(--color-brand-black) !important;
}
.azbi-map-cta__label {
    color: var(--color-brand-black) !important;
}

.azbi-map-cta:hover .azbi-map-cta__circle {
    background-color: var(--color-brand-green) !important;
    border-color: var(--color-brand-black) !important;
}
.azbi-map-cta:hover .azbi-map-cta__circle i {
    color: var(--color-brand-white) !important;
}
.azbi-map-cta:hover .azbi-map-cta__label {
    color: var(--color-brand-green) !important;
}

.map-loading-indicator {
    background: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
    border: 2px solid var(--color-brand-green) !important;
}

/* Slide 5: Footer */
/* Блок .contact-form-card (форма лида) удалён 2026-07-15 — вместе с самой
   формой его вырезали из разметки ещё раньше, остались только стили. */

#btn-submit-form {
    background-color: var(--color-brand-orange) !important;
    border: 2px solid var(--color-brand-black) !important;
    color: var(--color-brand-black) !important;
    font-weight: 800 !important;
    transition: var(--transition-smooth) !important;
}
#btn-submit-form:hover {
    background-color: var(--color-brand-green) !important;
    border-color: var(--color-brand-green) !important;
    color: var(--color-brand-white) !important;
}

#contact-phone-val,
#contact-email-val {
    color: var(--color-brand-black) !important;
    transition: color 0.3s ease !important;
}
#contact-phone-val:hover,
#contact-email-val:hover {
    color: var(--color-brand-green) !important;
}
/* Здесь жил ворох оверрайдов .contact-grid (иконки телефона/почты, заплатки
   на инлайновые background-color). Удалён вместе с остальным мёртвым
   контактным CSS: элементов .contact-grid нет ни в одной разметке. */

/* Contact & Footer Section Responsiveness & Adaptability */
.contact-footer-section {
    background-color: transparent !important;
    border-top: 1px solid var(--color-brand-green);
}

/* FIX 2026-07-15 (композиция): в секции осталось двое детей — бегущая строка
   и подвал (контактный блок вырезали из разметки раньше), суммарно 497px.
   space-between разгонял их по краям 100vh-слайда: 403px голого крема между
   ними, 45% кадра.
   Первая попытка чинила это снятием 100vh (height:auto) — так делать НЕЛЬЗЯ,
   и вот почему. Это последняя секция scroll-snap-контейнера с
   `y mandatory`. Её snap-точка (align:start) = 3600px, а maxScroll
   контейнера = scrollHeight - clientHeight = 3197px. Точка оказывается за
   пределом прокрутки: докрутить слайд до верха физически нечем. Chrome
   молча упирается в 3197 и показывает рваный кадр — 403px хвоста
   предыдущего слайда «Карта» плюс подвал. Каждый слайд сайта — целый кадр,
   а последний становился склейкой из двух.
   Поэтому 100vh возвращаем (снап-контракт восстановлен, слайд снова кадр),
   а дыру убираем иначе: слабину отдаём подвалу — он тянется на весь остаток
   и становится зелёным постером-финалом. Это не выдуманный контент, а уже
   существующий блок, которому разрешили занять свою высоту; заодно попадает
   в фирменное чередование «зелёный постер × тёплый крафт». */
@media (min-width: 768px) {
    .contact-footer-section {
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 100px !important;
        box-sizing: border-box !important;
        /* При y mandatory снапе "none" делает слайд недостижимым — контейнер
           не может остановиться на секции без snap-точки. */
        scroll-snap-align: start !important;
        overflow: visible !important;
    }
    /* Подвал забирает весь остаток кадра. Сетку ссылок центрируем в этом
       остатке, нижнюю строку (копирайт) оставляем последней — она обязана
       стоять по нижней кромке, иначе повисает в середине зелёного поля.
       Скоупим по .contact-footer-section: секция есть только на главной,
       на остальных страницах подвал прежней высоты. */
    .contact-footer-section .azbi-footer-premium {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .contact-footer-section .footer-premium-grid {
        flex: 1 1 auto !important;
        align-content: center !important;
    }
}

/* For mobile devices */
/* Ту же 100vh распорку снимаем и здесь: контента в секции ровно столько же,
   значит на мобиле дыра была той же природы, просто целиком уезжала вниз. */
@media (max-width: 767px) {
    .contact-footer-section {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding-top: 100px !important;
        padding-bottom: 0 !important;
        scroll-snap-align: start !important;
        overflow: visible !important;
    }
}

/* --- UNIFIED BUTTON STYLING (Variant 9: Springy Shimmer with Black Text) --- */
.btn:not(.hero-premium__cta),
.calc-next-cta {
    border-radius: var(--radius-pill) !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.35s ease, 
                background-color 0.35s ease !important;
    cursor: pointer;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
}

.btn:not(.hero-premium__cta)::before,
.calc-next-cta::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    ) !important;
    transition: left 0.6s ease !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.btn:not(.hero-premium__cta):hover::before,
.calc-next-cta:hover::before {
    left: 150% !important;
}

/* Primary Button / Calculator CTA (Orange background, Black text) */
.btn-primary:not(.hero-premium__cta),
.calc-next-cta {
    background-color: var(--color-brand-orange) !important;
    color: var(--color-brand-black) !important;
    box-shadow: 0 4px 15px rgba(252, 185, 92, 0.2) !important;
}

.btn-primary:not(.hero-premium__cta):hover,
.calc-next-cta:hover {
    box-shadow: 0 10px 25px rgba(252, 185, 92, 0.45) !important;
    background-color: var(--color-brand-orange) !important;
    color: var(--color-brand-black) !important;
}

/* Secondary Button (White background, Black text) */
.btn-secondary:not(.hero-premium__cta),
.btn-cream-filled:not(.hero-premium__cta) {
    background-color: #ffffff !important;
    color: var(--color-brand-black) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(1, 8, 17, 0.1) !important;
}

.btn-secondary:not(.hero-premium__cta):hover,
.btn-cream-filled:not(.hero-premium__cta):hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18) !important;
    background-color: #ffffff !important;
    color: var(--color-brand-black) !important;
}

/* Arrow inside buttons styling */
.btn:not(.hero-premium__cta) i,
.calc-next-cta__arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: var(--color-brand-black) !important;
    color: var(--color-brand-orange) !important;
    font-size: 0.85rem !important;
    transition: transform 0.3s ease !important;
    margin-left: 0.5rem !important;
}

/* In secondary button, the arrow icon has a white arrow color for elegance */
.btn-secondary:not(.hero-premium__cta) i,
.btn-cream-filled:not(.hero-premium__cta) i {
    color: #ffffff !important;
}

.btn:not(.hero-premium__cta):hover i,
.calc-next-cta:hover .calc-next-cta__arrow {
    transform: translateX(4px) scale(1.1) !important;
}

/* Premium circular navigation arrows for horizontal carousel
   FIX 2026-07-15 (контраст): стрелки были рассчитаны на тёмный фон —
   прозрачный кружок с белым шевроном. Но .side-arrow физически лежат
   ПОВЕРХ кремовых карточек: белое по крему = ~1.03:1, кнопки не видно
   вообще. Переведены на физику .stat-cell (кремовая заливка + жёсткий
   чёрный кант + зелёный глиф, 5.95:1) — так они читаются и на карточке,
   и на зелёном грунте секции, а :hover ниже уже даёт оранжевую заливку
   с чёрным глифом. */
.menu-nav-arrow {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    background-color: var(--color-brand-cream, #fffbed) !important;
    border: 2px solid var(--color-brand-black, #010811) !important;
    color: var(--color-brand-green, #11703b) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.menu-nav-arrow:hover {
    background-color: var(--color-brand-orange, #fcb95c) !important;
    border-color: var(--color-brand-black, #010811) !important;
    color: var(--color-brand-black, #010811) !important;
    box-shadow: 3px 3px 0px var(--color-brand-black, #010811) !important;
    transform: translate(-1.5px, -1.5px) !important;
}
.menu-nav-arrow:active {
    transform: translate(0px, 0px) !important;
    box-shadow: none !important;
}

/* Side absolute navigation arrows layout */
.menu-carousel-wrapper {
    position: relative !important;
    width: 100% !important;
}

.menu-carousel-wrapper .menu-nav-arrow.side-arrow {
    position: absolute !important;
    top: calc(50% - 22.5px) !important; /* Vertically centered relative to cards */
    z-index: 10 !important;
}

.menu-carousel-wrapper .menu-nav-arrow.prev-arrow {
    left: 2.5% !important;
}

.menu-carousel-wrapper .menu-nav-arrow.next-arrow {
    right: 2.5% !important;
}

/* Adjustments for various viewports */
@media (max-width: 1200px) {
    .menu-carousel-wrapper .menu-nav-arrow.prev-arrow {
        left: 1rem !important;
    }
    .menu-carousel-wrapper .menu-nav-arrow.next-arrow {
        right: 1rem !important;
    }
}

@media (max-width: 768px) {
    .menu-carousel-wrapper .menu-nav-arrow.side-arrow {
        /* Slightly more compact size and dark background for high contrast overlay on mobile */
        width: 38px !important;
        height: 38px !important;
        top: calc(50% - 19px) !important;
        background-color: rgba(1, 8, 17, 0.75) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
        color: #ffffff !important;
    }
    .menu-carousel-wrapper .menu-nav-arrow.prev-arrow {
        left: 0.5rem !important;
    }
    .menu-carousel-wrapper .menu-nav-arrow.next-arrow {
        right: 0.5rem !important;
    }
}

/* Hybrid Header Navigation Styling & Hamburger Layout Normalization */
header.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 2005 !important;
    transition: background-color 0.3s ease, padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.snap-home-body header.site-header {
    pointer-events: auto !important; /* Ensure click events go through header container */
}

/* 1. At the very top (expanded state with 60% opacity translucent black).
   Только для страниц с тёмным верхом (главная, меню, аренда): на светлых
   внутренних страницах тёмная плашка выглядела серой полосой
   (эталон — белая шапка с зелёным логотипом). */
body.snap-home-body header.site-header:not(.scrolled),
body.dark-header-page header.site-header:not(.scrolled) {
    background-color: rgba(1, 8, 17, 0.6) !important; /* Translucent Rich Black bar */
    border-bottom: 2px solid rgba(1, 8, 17, 0.6) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 0.38rem 0 !important;
}

/* Светлые внутренние страницы: белая полупрозрачная шапка */
body:not(.snap-home-body):not(.dark-header-page) header.site-header:not(.scrolled) {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(17, 112, 59, 0.12) !important;
    padding: 0.38rem 0 !important;
}

/* 2. When scrolled down (completely transparent state - reduced by an additional 40% in height) */
header.site-header.scrolled {
    background-color: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0.27rem 0 !important;
}

/* Push down main containers/heroes to allocate physical layout space for header bar (prevent overlap).
   FIX 2026-07-02: было 100px — визуально впритык к ~94px шапке (зазор
   всего ~25px), контент казался «прилипшим». Увеличено до 150px для
   заметного собственного пространства у шапки.
   FIX 2026-07-02 (2): этот блок относится только к десктопной 40/60
   раскладке hero — на мобильной (max-width:991px) секция стекается в
   колонку (текст + фото друг под другом), и `height:100vh !important`
   здесь перебивал mobile-медиа-запрос (`height:auto`), из-за чего
   текст (715px) + фото (320px) не помещались в жёсткие 100vh — фото
   «протекало» под следующую секцию. Аналогично, `padding-top:2%` (это
   2% от ШИРИНЫ, не высоты!) перебивал мобильный отступ 7.5rem сверху.
   Оба правила теперь скопированы только на десктоп. */
@media (min-width: 992px) {
    body.snap-home-body:not(.menu-open) .hero-premium {
        padding-top: 150px !important;
        height: 100vh !important;
    }
    body.snap-home-body:not(.menu-open) .hero-premium__text {
        padding-top: 2% !important;
    }
}

body:not(.snap-home-body) main,
body:not(.snap-home-body) .about-hero,
body:not(.snap-home-body) .partner-hero,
body:not(.snap-home-body) .shop-hero,
body:not(.snap-home-body) .locations-hero {
    padding-top: 100px !important;
}

/* Nav links styling */
.header-nav {
    display: flex !important;
    align-items: center !important;
    pointer-events: auto !important;
    margin: 0 auto !important; /* Center link items */
}

.header-nav-list {
    display: flex !important;
    list-style: none !important;
    gap: 1.8rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-nav-lnk {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: color 0.25s ease, transform 0.25s ease !important;
    display: inline-block !important;
}

.header-nav-lnk:hover {
    color: var(--color-brand-orange, #fcb95c) !important;
    transform: translateY(-1px) !important;
}

/* Light theme Chameleon swap */
header.site-header.header-theme-light .header-nav-lnk {
    /* FIX 2026-07-02: было чёрный — заменено на фирменный зелёный
       по просьбе пользователя. */
    color: var(--color-brand-green, #11703b) !important;
}
header.site-header.header-theme-light .header-nav-lnk:hover {
    color: var(--color-brand-green, #11703b) !important;
}

/* Responsive visibility constraint for mobile & tablets */
@media (max-width: 991px) {
    .header-nav {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .header-nav {
        display: flex !important;
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
        transition: opacity 0.3s ease, transform 0.3s ease, width 0.3s ease !important;
    }
    
    /* Top State: Show header nav, hide hamburger */
    .site-header:not(.scrolled) .header-nav {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
    }
    .site-header:not(.scrolled) .hamburger-toggle,
    .site-header:not(.scrolled) .header-hamburger-btn {
        opacity: 0 !important;
        transform: scale(0.7) !important;
        pointer-events: none !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }
    
    /* Scrolled State: Collapse header nav, reveal hamburger */
    .site-header.scrolled .header-nav {
        opacity: 0 !important;
        transform: scale(0.9) !important;
        pointer-events: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .site-header.scrolled .hamburger-toggle,
    .site-header.scrolled .header-hamburger-btn {
        opacity: 1 !important;
        transform: scale(1) !important;
        pointer-events: auto !important;
        width: auto !important;
    }
}

/* Hamburger Overlay links size adjustments */
.side-menu-lnk {
    font-size: 2.15rem !important;
}

@media (max-width: 576px) {
    .side-menu-lnk {
        font-size: 1.85rem !important;
    }
    .side-menu-drawer-premium {
        width: 320px !important;
        right: 1rem !important;
        top: 1rem !important;
    }
    .side-menu-content {
        padding: 1.5rem 1.8rem !important;
    }
}

/* Brand Molecule Badge (Rotating circular text badge from brandbook pages 20-22) */
.azbi-molecule-badge {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.azbi-molecule-badge svg {
    width: 100%;
    height: 100%;
    animation: rotate-molecule 20s linear infinite;
    overflow: visible;
}

.azbi-molecule-badge path {
    fill: none;
}

.azbi-molecule-badge text {
    font-family: var(--font-body);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    fill: var(--color-brand-orange);
}

.molecule-center-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--color-brand-orange);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--color-brand-orange);
}

@keyframes rotate-molecule {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hide molecule on mobile for clean editorial breathing room */
@media (max-width: 1024px) {
    .azbi-molecule-badge {
        display: none !important;
    }
}


/* ============================================================
   HOTFIX 2026-07-02 (Claude): восстановление после отката
   1) Секция карты: текстовая панель уходила под фиксированную
      шапку (на десктопе .map-teaser-section обнуляет padding).
      Даём левой панели верхний отступ под шапку (~89px).
   2) Подвал: скрываем дублирующие динамические колонки —
      статичный премиум-подвал уже содержит эту навигацию.
   ============================================================ */
@media (min-width: 768px) {
    #map-teaser .map-teaser-left {
        padding-top: 130px !important; /* clear fixed site header */
    }
}

/* FIX 17.08: правило пряталo колонки подвала на ВСЕХ страницах — оферта,
   политика, аренда, франшиза, каталог и калькулятор были недоступны с 9 из 10
   страниц (блок мерялся 0x0). Хотфикс от 02.07 был верен только для главной,
   где у подвала своя премиум-разметка. Ограничиваем главной. */
body.snap-home-body #dynamic-footer-columns {
    display: none !important;
}

/* 3) Секция меню: контент выше 100vh, и вертикальная центровка
      выталкивала заголовок под шапку. Прижимаем к верху. */
@media (min-width: 768px) {
    #popular-menu {
        justify-content: flex-start !important;
        padding-top: 115px !important;
    }
    #popular-menu > .container {
        margin-top: 0 !important;
    }
}

/* FIX 2026-07-02 (audit finding #28): единственный вертикальный
   отступ слайда 3 на мобильных — инлайновый style="padding:5rem 0"
   (80px) в index.html, меньше высоты фиксированной шапки (~89px) и
   без какого-либо media-query фикса. Добавляем недостающий отступ,
   как у остальных слайдов (100px). */
@media (max-width: 767px) {
    #popular-menu {
        padding-top: 100px !important;
        padding-bottom: 2rem !important;
    }
}

/* ============================================================
   RESTORE 2026-07-02 (Claude): базовый блок hero-premium.
   Разметка index.html (слайд 1) использует классы hero-premium__*,
   но их базовые стили были утеряны при чистке. Эталон:
   _archive/screenshots/post_fix/hero_premium.png (git HEAD) —
   DoorDash-style 40/60: слева тёмно-зелёная панель с текстом,
   справа фото киоска edge-to-edge.
   ============================================================ */
.hero-premium {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100vh;
    min-height: 650px;
    padding: 0;
    background-color: var(--color-brand-green);
    overflow: hidden;
}

/* Левая брендовая панель (40%) */
.hero-premium__text {
    flex: 0 0 40%;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 7rem 3.5rem 3rem 4rem;
    background: linear-gradient(160deg, #178549 0%, var(--color-brand-green) 45%, #0b4b27 100%);
    color: var(--color-brand-cream);
    z-index: 2;
}

.hero-premium__badge {
    display: inline-block;
    padding: 0.45rem 1.2rem;
    border: 1.5px solid var(--color-brand-orange);
    border-radius: 999px;
    color: var(--color-brand-orange);
    font-family: var(--font-heading);
    /* FIX 2026-07-02: выровнено с DESIGN.md Label spec (700/12px/
       0.1em uppercase) и с .editorial-badge — единый стиль меток. */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.hero-premium__title {
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 4.6vw, 4.6rem);
    /* FIX 2026-07-02: было 700 — DESIGN.md Display spec требует 800
       для главного заголовка hero (как и остальные 3 крупных
       заголовка секций, ниже приведённые к тому же весу). */
    font-weight: 800;
    line-height: 1.04;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0 0 1.6rem 0;
}

.hero-premium__sub {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.65;
    margin: 0 0 2.4rem 0;
    max-width: 560px;
}

/* CTA как в оригинале (видео): белый текст + оранжевый круг со стрелкой */
.hero-premium__cta {
    display: inline-flex;
    align-items: center;
    gap: 1.6rem;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 1.9vw, 1.9rem);
    font-weight: 700;
    text-decoration: none;
}

.hero-premium__cta i {
    display: flex;
    align-items: center;
    justify-content: center;
    /* FIX 2026-07-02: было 74px — подогнано под размер круглой CTA
       на слайде 4 (.azbi-map-cta__circle, 80px), единый размер для
       обеих концептуально одинаковых круглых кнопок сайта. */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-brand-orange);
    color: var(--color-brand-black);
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

.hero-premium__cta:hover {
    color: #ffffff;
}

.hero-premium__cta:hover i {
    transform: scale(1.12) rotate(-8deg);
    background-color: #ffca7a;
}

/* Правая колонка: фото киоска на всю площадь (60%) */
.hero-premium__3d {
    position: relative;
    flex: 1 1 60%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.hero-full-bleed-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* FIX 2026-07-02: было center (50% 50%) — фото портретное
       (3688x4608), а бокс широкий, cover обрезал поровну сверху/снизу
       и срезал верх вывески "azbi coffee". Сдвинуто к верху, чтобы
       вывеска и потолок были видны полностью, лишнее обрезается снизу. */
    object-position: 50% 15%;
}

/* Зелёная тонировка фото: слева плотнее (переход из панели), к краю легче */
.hero-premium__3d::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(13, 85, 48, 0.85) 0%,
        rgba(13, 85, 48, 0.45) 25%,
        rgba(17, 112, 59, 0.28) 60%,
        rgba(17, 112, 59, 0.18) 100%);
}

/* Планшет/мобила: панель сверху, фото снизу */
@media (max-width: 991px) {
    .hero-premium {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }
    .hero-premium__text {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
        padding: 7.5rem 1.5rem 2.5rem 1.5rem;
    }
    .hero-premium__3d {
        flex: 1 1 auto;
        width: 100%;
        min-height: 320px;
    }
}

/* ============================================================
   DS ENFORCEMENT 2026-07-02 (Claude): единая стилистика по
   DESIGN.md («Mr. Pops Design Manifesto») для всех страниц.
   ============================================================ */

/* 0. Отсутствовавший токен: var(--radius-pill) использовался в
   правилах, но нигде не был определён — скругление падало в 0. */
:root {
    --radius-pill: 9999px;
}

/* 1. Заголовки секций. Манифест (Don'ts): «не применять градиентный
   текст (background-clip: text) — только сплошные чистые цвета».
   Единый плакатный стиль для всех внутренних страниц. */
.text-gradient {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--color-brand-green) !important;
    font-family: var(--font-heading) !important;
    font-size: var(--text-heading-lg) !important;
    line-height: var(--leading-heading-lg) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* 2. Кнопки: Flat-By-Default. Убираем мягкие glow-тени (запрещены
   манифестом), primary получает жёсткую чёрную обводку; тень —
   только плоская со сдвигом и только на hover. */
.btn {
    box-shadow: none !important;
}

.btn-primary:not(.hero-premium__cta),
.calc-next-cta {
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
}

.btn-secondary:not(.hero-premium__cta),
.btn-cream-filled:not(.hero-premium__cta) {
    background-color: var(--color-brand-cream) !important;
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
}

.btn-accent {
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
}

.btn:not(.hero-premium__cta):hover,
.calc-next-cta:hover {
    transform: translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0px var(--color-brand-black) !important;
}

/* 3. Поля форм: крем-фон, толстая чёрная рамка 2px, скругление 8px,
   фокус — зелёная рамка (манифест, раздел Inputs / Fields). */
.form-group input,
.form-group textarea,
.calc-group input[type="text"],
.calc-group input[type="number"],
#partner-checkout-form input,
#partner-checkout-form textarea,
#contact-form input,
#contact-form textarea {
    background-color: var(--color-brand-cream) !important;
    border: 2px solid var(--color-brand-black) !important;
    border-radius: 8px !important;
    transition: border-color 0.25s ease, transform 0.25s ease !important;
}

.form-group input:focus,
.form-group textarea:focus,
.calc-group input[type="text"]:focus,
.calc-group input[type="number"]:focus,
#partner-checkout-form input:focus,
#partner-checkout-form textarea:focus,
#contact-form input:focus,
#contact-form textarea:focus {
    outline: none !important;
    border-color: var(--color-brand-green) !important;
    transform: translate(-1px, -1px);
}

/* 4. Reduced motion: полное отключение скролл-анимаций и наклонов. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Заголовок на тёмной секции меню остаётся белым (инлайн color теряет
   инлайн-приоритет из-за !important в базовом правиле выше). */
.menu-section .text-gradient {
    color: #ffffff !important;
}

/* ============================================================
   FIX 2026-07-02 (Claude): главная, слайд 5 (#contact-slide) —
   классы .azbi-marquee* и .footer-premium-* не имели НИ ОДНОГО
   CSS-правила ни в styles-v2.css, ни в brand-molecule.css.
   Из-за этого: (1) логотип-<img> рендерился в «сыром» виде без
   ограничения размера; (2) секция #contact-slide — это
   `display:flex; flex-direction:column; align-items:center`,
   поэтому её прямые дети (марки-лента и футер) схлопывались по
   ширине до контента и центрировались, вместо того чтобы
   растягиваться на всю ширину слайда, как футер на остальных
   страницах. Ниже — полноценные стили, согласованные с уже
   существующим футером внутренних страниц (.footer-nav, .footer-brand
   используют те же токены), чтобы оба футера были визуально едины.
   ============================================================ */

.azbi-marquee-section,
footer.site-footer.azbi-footer-premium {
    align-self: stretch;
    width: 100%;
}

.azbi-marquee-section {
    overflow: hidden;
    border-top: 2px solid var(--color-brand-black);
    border-bottom: 2px solid var(--color-brand-black);
    background-color: var(--color-brand-cream);
    padding: 0.9rem 0;
}

.azbi-marquee {
    overflow: hidden;
    white-space: nowrap;
}

.azbi-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    animation: azbiMarqueeScroll 22s linear infinite;
    will-change: transform;
}

@keyframes azbiMarqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.azbi-marquee__track span:not(.azbi-marquee__dot) {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-brand-green);
}

.azbi-marquee__dot {
    color: var(--color-brand-orange);
    font-size: 0.6rem;
    margin: 0 0.2rem;
}

/* Премиальный футер главной: тот же фон/токены, что и .site-footer
   на внутренних страницах, но своя 4-колоночная сетка под разметку. */
footer.site-footer.azbi-footer-premium .footer-premium-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.footer-premium-brand img {
    height: 40px;
    width: auto;
    display: block;
}

.footer-premium-tagline {
    color: var(--color-brand-gray);
    font-size: var(--text-body-sm);
    line-height: 1.6;
    margin-top: 1rem;
    max-width: 280px;
}

.footer-premium-col h4 {
    font-size: var(--text-heading-sm);
    color: var(--color-brand-orange);
    margin-bottom: var(--spacing-md);
}

.footer-premium-col {
    display: flex;
    flex-direction: column;
}

.footer-premium-col a {
    display: block;
    color: var(--color-brand-white);
    font-size: var(--text-body-sm);
    margin-bottom: var(--spacing-xs);
    transition: var(--transition-smooth);
}

.footer-premium-col a:hover {
    color: var(--color-brand-orange);
}

/* FIX 2026-07-15 (контраст): копирайт премиального подвала главной. Серый
   #727272 по зелёному = 1.28:1. Именно этот селектор пропустил блок
   «Контраст-закон» ниже: там починили .footer-premium-tagline и
   .footer-premium-col h4, а строку копирайта — нет. */
.footer-premium-bottom {
    border-top: 1px solid var(--color-brand-cream);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-md);
    color: var(--color-brand-cream);
    font-size: var(--text-body-sm);
}

@media (max-width: 900px) {
    footer.site-footer.azbi-footer-premium .footer-premium-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (max-width: 560px) {
    footer.site-footer.azbi-footer-premium .footer-premium-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-premium-tagline {
        max-width: none;
    }
}

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

/* ============================================================
   FIX 2026-07-02 (Claude): найдено параллельным аудитом (finding
   #27, critical) — мобильная раскладка слайда 2 (.hero-stats-features
   / .tech-container / .stats-features-layout / .editorial-left/right/
   card) существовала ТОЛЬКО внутри @media (max-width: 991px) в самом
   начале файла (строки ~328-379), но полностью перебивалась более
   поздним безусловным правилом той же специфичности и !important —
   при равной специфичности порядок в файле решает всё, независимо от
   того, обёрнуто ли более раннее правило в media query. В итоге на
   мобильных слайд 2 никогда не переключался в auto-height/block:
   контент (2-колоночная сетка) оставался сжат в фиксированные 100vh
   с overflow:hidden. Переносим тот же (уже правильный) мобильный
   блок сюда — в конец файла он гарантированно побеждает.
   ============================================================ */
@media (max-width: 991px) {
    .hero-stats-features {
        height: auto !important;
        min-height: 100vh !important;
        display: block !important;
        overflow: auto !important;
        padding-top: 100px !important;
        padding-bottom: 50px !important;
        background-color: var(--color-brand-cream) !important;
    }
    .tech-container {
        height: auto !important;
        /* FIX 2026-07-02: старое max-height:720px (из нетронутого
           «мёртвого» блока в начале файла) не сбрасывалось здесь и
           продолжало действовать на мобильных, создавая лишний
           пустой отступ. */
        max-height: none !important;
        display: block !important;
        /* FIX: верхний паддинг 100px здесь дублировал уже применённый
           padding-top:100px у родительской .hero-stats-features (см.
           ниже) — на мобильном отступ от шапки получался двойным
           (~200px). Верхний паддинг контейнера сведён к минимуму. */
        padding: 20px var(--spacing-lg) 2rem var(--spacing-lg) !important;
    }
    .stats-features-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 3rem !important;
    }
    .editorial-left {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        gap: 2rem !important;
        justify-content: flex-start !important;
    }
    .editorial-right {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        gap: 1.5rem !important;
        justify-content: flex-start !important;
    }
    .editorial-card {
        flex: none !important;
        height: auto !important;
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .editorial-metrics {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .editorial-card {
        padding: 1.5rem 1.2rem !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   FIX 2026-07-02 (Claude): по просьбе пользователя — ни один слайд
   не должен вылезать за пределы экрана. При height ≤850px (короткие
   окна ноутбуков) карточки меню (фикс. высота 480px) и контент
   слайда «Технологии» вылезали за границу 100vh-секции. Добавлено
   сжатие в конце файла (гарантированно побеждает по порядку).
   ============================================================ */
@media (min-width: 768px) and (max-height: 850px) {
    .pops-menu-grid .pops-card {
        height: 380px !important;
    }
    /* FIX 2026-07-15 (композиция): высоту зоны здесь НЕ переопределяем —
       пусть работает базовое calc(100% - 204px). Прежние 120px были подобраны
       под старую панель и с нынешней не сходились: 120 + 204 = 324 при
       карточке 380px, т.е. 56px оставались ничьими, а чашку (базовые 196px)
       срезало на 38px сверху — на 1440x800 и 1366x768, обычных ноутбуках,
       у эспрессо/американо пропадал пар и кромка обода. Теперь зона 176px,
       шов «зона + панель = карточка» держится и на этом брейкпоинте. */
    .pops-menu-grid .pops-card-image-wrap svg {
        width: 127px !important;
        height: 127px !important;
    }
    #popular-menu {
        padding-top: 90px !important;
    }
}

@media (min-width: 992px) and (max-height: 850px) {
    .tech-container {
        padding: 70px 20px 16px 20px !important;
    }
    .editorial-left-inner {
        gap: 1rem !important;
    }
    .editorial-metrics {
        padding-top: 1rem !important;
        gap: 1.5rem 1.5rem !important;
    }
    .editorial-left,
    .editorial-right {
        min-height: 0 !important;
    }
    .editorial-right {
        gap: 0.5rem !important;
    }
    .editorial-card {
        padding: 0.6rem 1.5rem !important;
        /* FIX: flex-элементы по умолчанию min-height:auto — не давали
           карточке сжаться меньше высоты содержимого даже с flex:1
           на укороченном родителе. */
        min-height: 0 !important;
    }
    .card-icon-wrap {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }
    .card-title {
        font-size: 1rem !important;
    }
    .card-text {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }
}

/* ============================================================
   NEW 2026-07-02 (Claude): секция "Эстафета вкуса" на about.html
   между блоком преимуществ (светлый) и таймлаймом вех (тёмный).
   Спека — синтез 3-агентного воркфлоу, факт-чек по реальной вёрстке
   (about-section белый, .adv-card только что приведён к Flat-By-
   Default кремовый/чёрная обводка) — карточки здесь используют
   тот же паттерн для визуальной рифмы.
   ============================================================ */
.recipe-heritage-section {
    /* FIX 2026-07-08: хвост градиента уходил в почти-чёрный (#113a22 →
       #030805) — тёмный грунт отвергнут клиентом; теперь крафт-крем
       перетекает в постер-зелёный (ритм green×warm v7). */
    background: linear-gradient(180deg,
        #fffbed 0%,
        #fffbed 18%,
        #0d5a2f 62%,
        #11703b 100%);
    padding: 6rem 0;
    position: relative;
}

.recipe-manifesto {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.recipe-lead-line {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-brown);
    margin-bottom: 1.2rem;
}

.recipe-manifesto-heading {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-brand-black);
    text-wrap: balance;
    margin: 0 0 1.2rem 0;
}

.recipe-manifesto-heading .accent-word {
    color: var(--color-brand-orange);
}

.recipe-manifesto-sub {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #3f3f3f;
    max-width: 56ch;
    margin: 0 auto;
}

/* Ярус 2: два бариста-чемпиона */
.recipe-champions-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
    max-width: 1100px;
    margin: 5rem auto 0 auto;
    padding: 0 var(--spacing-lg);
}

.recipe-champion-card {
    background: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    border-radius: 16px;
    padding: 2.25rem;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.recipe-champion-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0px var(--color-brand-black);
}

/* Плейсхолдер-монограмма — заменить на фото, когда будет готова съёмка */
.recipe-monogram {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--color-brand-brown);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.8rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.recipe-champion-label {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-orange);
    margin-bottom: 0.6rem;
}

.recipe-champion-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-brand-black);
    margin: 0 0 0.3rem 0;
}

.recipe-champion-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-brand-green);
    margin-bottom: 1rem;
}

.recipe-champion-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-brand-gray);
    margin: 0;
}

.recipe-connector-arrow {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-brand-orange);
    line-height: 1;
}

/* Ярус 3: факторы вкуса + строка-миссия (тёмная зона) */
/* FIX 2026-07-15 (палитра): было #94a3b8 — Tailwind slate-400 из чужой
   тёмной темы. Подпись стоит прямо на градиенте секции, в его зелёной
   части (#0d5a2f), где slate даёт 3.25:1 — это не только чужой цвет, но и
   провал контраста для 0.85rem. Крем даёт 8.04:1. */
.recipe-factors-label {
    text-align: center;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-cream);
    margin: 4.5rem 0 1.25rem 0;
}

.recipe-factors-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 var(--spacing-lg);
}

.recipe-factor-pill {
    border-radius: var(--radius-pill);
    background: rgba(252, 185, 92, 0.12);
    border: 2px solid var(--color-brand-orange);
    padding: 0.6rem 1.25rem;
    color: #fffbed;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recipe-mission-line {
    max-width: 700px;
    margin: 3rem auto 0 auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    text-wrap: balance;
}

@media (max-width: 900px) {
    .recipe-champions-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .recipe-connector-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }
}

/* ============================================================================
   SIGNATURE SYSTEM v6 — site-wide tactile elevation
   Appended 2026-07. Wins by source order + !important, overriding earlier
   duplicate rules AND inline styles (inline styles in this codebase carry no
   !important). Purely additive — do not edit rules above this banner.
   Design thesis: every card is a physical printed object — flat at rest,
   2px black edge, and a hard offset-shadow that only appears on hover.
   ============================================================================ */

:root {
    --azbi-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --radius-pill: 9999px; /* defensive redefine — used across file */
    --shadow-hard: 8px 8px 0 var(--color-brand-black);
    --shadow-hard-sm: 4px 4px 0 var(--color-brand-black);
    --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 1. Tactile card law: black edge, flat at rest --- */
.tech-card,
.product-card,
.calc-result-card,
.calc-chart-card,
.calc-left-col,
.calc-margin-section,
.location-item {
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
}

/* Cards that lift on hover (interactive tiles, not input/table panels) */
.tech-card,
.product-card,
.calc-result-card,
.calc-chart-card,
.location-item {
    transition: transform 0.18s var(--azbi-ease), box-shadow 0.18s var(--azbi-ease) !important;
}
.tech-card:hover,
.product-card:hover,
.calc-result-card:hover,
.calc-chart-card:hover,
.location-item:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: var(--shadow-hard) !important;
    border-color: var(--color-brand-black) !important;
}

/* --- 2. Kill resting shadows (Flat-By-Default) --- */
.pops-badge {
    box-shadow: none !important;
}

/* --- 3. Paper-grain texture utility (manifesto: printed-paper tactility) --- */
.has-grain {
    position: relative;
    isolation: isolate;
}
.has-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--grain-url);
    background-size: 140px 140px;
    opacity: 0.04;
    z-index: 0;
}
.has-grain > * {
    position: relative;
    z-index: 1;
}
.has-grain--dark::after {
    opacity: 0.06;
    mix-blend-mode: screen;
}

/* --- 4. Poster stat / trust-band component (big Galdern numerals) --- */
.stat-band {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.75rem);
}
.stat-band--2 { grid-template-columns: repeat(2, 1fr); }
.stat-band--3 { grid-template-columns: repeat(3, 1fr); }
.stat-band--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
    .stat-band--3,
    .stat-band--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .stat-band--3,
    .stat-band--4 { grid-template-columns: 1fr; }
}
.stat-cell {
    background: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    border-radius: 16px;
    padding: clamp(1.15rem, 3vw, 1.9rem);
    text-align: left;
    transition: transform 0.18s var(--azbi-ease), box-shadow 0.18s var(--azbi-ease);
}
.stat-cell:hover {
    transform: translate(-4px, -4px);
    box-shadow: var(--shadow-hard);
}
.stat-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4.75rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--color-brand-green);
    display: flex;
    align-items: baseline;
    gap: 0.04em;
}
.stat-num .stat-suffix {
    font-size: 0.42em;
    font-weight: 800;
    letter-spacing: 0;
}
/* FIX 2026-07-15 (контраст): .stat-cell--accent работал наоборот — красил
   цифру оранжевым по кремовой заливке ячейки (1.66:1), то есть акцентное
   число было САМЫМ нечитаемым в ряду. Пара крем×оранжевый запрещена
   палитрой в принципе. Разметка rent.html и partner.html переведена на
   .stat-cell--dark (инверсия заливкой: зелёная ячейка + кремовая цифра,
   5.95:1) — этот вариант уже лежал в системе и не использовался нигде.
   Правило --accent удалено целиком: класса не осталось ни в одной
   разметке, а оставленный оверрайд был бы миной для следующей ячейки. */
.stat-cell--dark {
    background: var(--color-brand-green);
    border-color: var(--color-brand-black);
}
.stat-cell--dark .stat-num { color: var(--color-brand-cream); }
.stat-cell--dark .stat-label { color: var(--color-brand-cream); }
.stat-label {
    margin-top: 0.55rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-brand-black);
    line-height: 1.25;
}

/* --- 5. Editorial section index (poster replacement for eyebrow badges) --- */
.section-index {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    color: var(--color-brand-orange);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

/* --- 6. Reduced-motion respect --- */
@media (prefers-reduced-motion: reduce) {
    .tech-card,
    .product-card,
    .calc-result-card,
    .calc-chart-card,
    .location-item,
    .stat-cell {
        transition: none !important;
    }
    .tech-card:hover,
    .product-card:hover,
    .calc-result-card:hover,
    .calc-chart-card:hover,
    .location-item:hover,
    .stat-cell:hover {
        transform: none !important;
    }
}
/* ==================== END SIGNATURE SYSTEM v6 ==================== */

/* ============================================================================
   PAGE MODULES v6 — reusable building blocks for internal pages
   ============================================================================ */

/* --- Reusable CTAs (gold primary + light ghost), tactile on hover --- */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-brand-orange);
    border: 2px solid var(--color-brand-black);
    color: var(--color-brand-black);
    border-radius: var(--radius-pill);
    padding: 0.95rem 1.8rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--azbi-ease), box-shadow 0.18s var(--azbi-ease);
}
.btn-gold:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--color-brand-black);
}
.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: 2px solid var(--color-brand-cream);
    color: var(--color-brand-cream);
    border-radius: var(--radius-pill);
    padding: 0.95rem 1.8rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--azbi-ease), box-shadow 0.18s var(--azbi-ease), background 0.18s, color 0.18s;
}
.btn-ghost-light:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--color-brand-black);
    background: var(--color-brand-cream);
    color: var(--color-brand-black);
}

/* --- Flat editorial hero (rent + reused elsewhere) --- */
.flat-hero {
    background: var(--color-brand-green);
    color: var(--color-brand-cream);
    padding: clamp(118px, 16vh, 175px) 0 clamp(2.5rem, 6vw, 4.5rem);
    overflow: hidden;
}
.flat-hero__inner { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
.flat-hero__copy { max-width: 900px; }
.flat-hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.5rem, 6.2vw, 5.25rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--color-brand-cream);
    text-wrap: balance;
    margin: 0 0 1.25rem;
}
.flat-hero__title .accent { color: var(--color-brand-orange); }
.flat-hero__sub {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.55;
    max-width: 640px;
    color: rgba(255, 251, 237, 0.85);
    margin: 0 0 2rem;
}
.flat-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.flat-hero__stats { margin-top: 0.25rem; }
/* FIX 2026-07-15 (композиция): правая колонка героя вылезала за край экрана —
   у карточек «63/СНЕК-АППАРАТА» и «24/7» срезало рамку и глифы, а достать их
   было нечем: .flat-hero прячет переполнение, горизонтальной прокрутки нет.
   Причина — grid blowout: у fr-дорожки автоминимум равен min-content, а
   неразрывное «ПРИСОЕДИНЯЙТЕСЬ» упирало первую дорожку в 900px (потолок
   .flat-hero__copy). 900 + 52 + 372.66 = 1324.66 не влезали в 1136, и грид
   выдавливал остаток за вьюпорт. minmax(0, …) снимает этот автоминимум только
   с текстовой колонки — ей есть куда переноситься. Второй дорожке порог
   min-content оставлен намеренно: он защищает карточки с цифрами от сжатия.
   Побочно чинится и сетка 2x2 — она перестала быть кривой (155.2/191.3). */
@media (min-width: 992px) {
    .flat-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) 0.95fr;
        align-items: center;
    }
}
/* --- rent.html tariff cards: flat at rest, tactile on hover --- */
.packages-grid .pops-card {
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
    transition: transform 0.18s var(--azbi-ease), box-shadow 0.18s var(--azbi-ease) !important;
}
.packages-grid .pops-card:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: var(--shadow-hard) !important;
}
.packages-grid { max-width: 1120px !important; }

/* --- Legal pages (oferta / privacy): flat green band + overlapping cream sheet --- */
.legal-hero {
    background: var(--color-brand-green);
    color: var(--color-brand-cream);
    padding: clamp(118px, 15vh, 160px) 0 clamp(3rem, 6vw, 4.5rem);
}
.legal-hero .section-index { color: var(--color-brand-orange); }
.legal-hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--color-brand-cream);
    margin: 0 0 0.75rem;
    text-wrap: balance;
}
.legal-hero__meta {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.82rem;
    color: rgba(255, 251, 237, 0.72);
    margin: 0;
}
.legal-body-wrap {
    max-width: 880px;
    margin: clamp(-2.5rem, -4vw, -3.5rem) auto 0;
    padding-bottom: clamp(3rem, 8vw, 6rem);
    position: relative;
    z-index: 2;
}
.legal-sheet {
    background: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    border-radius: 20px;
    padding: clamp(1.75rem, 5vw, 3.25rem);
}
.legal-lead {
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0 0 2rem;
    color: var(--color-brand-black);
    font-weight: 500;
}
.legal-h {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--color-brand-black);
    margin: 2.5rem 0 1rem;
    padding-top: 1.75rem;
    border-top: 2px solid var(--color-brand-black);
    text-wrap: balance;
}
.legal-sheet > .legal-h:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.legal-sheet p {
    line-height: 1.75;
    margin-bottom: 1.25rem;
    max-width: 74ch;
    color: #26302a;
}
.legal-sheet ul { margin: 0 0 1.25rem 1.25rem; }
.legal-sheet li { line-height: 1.7; margin-bottom: 0.5rem; color: #26302a; }
/* --- menu.html: dedicated menu page shows a wrapping grid, not a hidden carousel --- */
#menu-grid.pops-menu-grid {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center;
    gap: 1.5rem !important;
}
/* menu.html: readable tab labels (Contrast + Label spec) */
.menu-section .menu-tab-btn {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* --- about.html: flatten soft-gradient / translucent panels to tactile flat --- */
.about-metric-card {
    background: var(--color-brand-green) !important;
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
}
.about-advantages-container {
    background: var(--color-brand-green) !important;
    border: 2px solid var(--color-brand-black) !important;
}
/* keep the section heading legible on the green panel (adv-cards use h4) */
.about-advantages-container h3 {
    color: var(--color-brand-cream) !important;
}
.timeline-content {
    background: var(--color-brand-green) !important;
    border: 2px solid var(--color-brand-black) !important;
    box-shadow: none !important;
    transition: transform 0.18s var(--azbi-ease), box-shadow 0.18s var(--azbi-ease) !important;
}
.timeline-content:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: var(--shadow-hard) !important;
}
/* ============================================================================
   AZBI HERO v7 — brandbook direction (cream ground + air, ring device, Galdern)
   Replaces the Mr. Pops 40/60 green-panel hero on index.html slide 1.
   ============================================================================ */
.azbi-hero {
    background: var(--color-brand-cream) !important;
    color: var(--color-brand-black);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(92px, 12vh, 128px) clamp(20px, 5vw, 72px) clamp(14px, 2.5vw, 26px);
    position: relative;
    overflow: hidden;
}
.azbi-hero__inner {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(26px, 5vw, 56px);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 900px) {
    .azbi-hero__inner { grid-template-columns: 1.02fr 0.98fr; }
}
.azbi-hero__kicker {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-brand-green);
    margin-bottom: 1.05rem;
}
.azbi-hero__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.6rem, 6.2vw, 5.4rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: var(--color-brand-black);
    margin: 0 0 1.2rem;
    text-wrap: balance;
}
.azbi-hero__sub {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    color: var(--color-brand-gray);
    max-width: 44ch;
    margin: 0 0 2rem;
}
.azbi-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.azbi-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    border-radius: var(--radius-pill);
    padding: 0.95rem 1.6rem;
    transition: transform 0.2s var(--azbi-ease), box-shadow 0.2s var(--azbi-ease), background 0.2s, color 0.2s;
}
.azbi-btn--gold { background: var(--color-brand-orange); color: #241207; }
.azbi-btn--gold .azbi-btn__dot {
    width: 28px; height: 28px; border-radius: 50%;
    background: #241207; color: var(--color-brand-orange);
    display: grid; place-items: center; font-size: 0.85rem;
}
/* FIX 2026-07-08: было translateY(-2px) + мягкая blur-тень — нарушение
   закона no-shadows; переведено на единую hard-offset физику кнопок. */
.azbi-btn--gold:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--color-brand-black); }
.azbi-btn--gold:active { transform: translate(0, 0); box-shadow: none; }
.azbi-btn--ghost { background: transparent; border: 2px solid var(--color-brand-green); color: var(--color-brand-green); font-weight: 700; }
.azbi-btn--ghost:hover { background: var(--color-brand-green); color: var(--color-brand-cream); }

/* Signature ring device (all-SVG so band + curved text + photo share coords) */
.azbi-hero__ring { display: flex; justify-content: center; }
.azbi-ring { position: relative; width: min(74vw, 470px); aspect-ratio: 1; }
.azbi-ring__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.azbi-ring__svg text {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 2px;
    fill: var(--color-brand-cream);
}

.azbi-hero__baseline {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    max-width: 1280px; margin: 0 auto; width: 100%;
    font-size: 0.78rem; letter-spacing: 0.04em; color: var(--color-brand-gray);
    border-top: 1px solid rgba(1, 8, 17, 0.12); padding-top: 0.9rem;
}
.azbi-hero__baseline b { font-family: var(--font-heading); font-weight: 800; color: var(--color-brand-green); }

@media (max-width: 640px) {
    .azbi-ring { width: min(80vw, 330px); }
    .azbi-hero__title { font-size: clamp(2.3rem, 10vw, 3.3rem); }
    .azbi-hero__sub { margin-bottom: 1.5rem; }
}
/* ==================== END PAGE MODULES v6 ==================== */

/* ============================================================================
   ALTERNATION LAYER v7 — «зелёный постер × тёплый крафт»
   Appended 2026-07-08. Ритм главной: полноширинные секции чередуются
   green(постер) ↔ cream(крафт) — «удар–вдох–удар». Слой побеждает ранние
   !important-правила поздним source order (конвенция файла, см. баннер
   SIGNATURE SYSTEM v6). Инвариант шапки: .s-green ⇒ data-header-theme="dark",
   .s-warm ⇒ data-header-theme="light" — атрибут читает motion.js.
   КОНТРАКТ: селекторы слоя (.s-green/.s-warm, .azbi-hero, .pops-menu-section,
   .azbi-footer-premium, .seam-medallion и т.д.) по договорённости живут только
   на главной — новая страница, переиспользующая эти классы, наследует
   постерную физику и cream-чернила сознательно, а не случайно.
   ============================================================================ */

/* --- 1. Грунты секций --- */
.s-green {
    position: relative;
    background: var(--color-brand-green) !important;
    color: var(--color-brand-cream);
}
.s-warm {
    position: relative;
    background: var(--color-brand-cream) !important;
    color: var(--color-brand-black);
}

/* --- 2. Контраст-закон (WCAG, посчитано): cream↔green 5.95:1 — несущая пара;
   orange на green только в дисплейных кеглях или заливкой (3.59:1);
   текст на orange — всегда rich black (11.72:1); cream×orange — запрещено. --- */
.pops-menu-section {
    color: var(--color-brand-cream) !important;
}
/* FIX 2026-07-15 (контраст): альфа 0.85 роняла несущие 5.95:1 до ~4.8:1 —
   формально проходит, но это тот же слоган, что на остальных 8 страницах,
   и там он теперь чистый крем. Один элемент — один цвет. */
.azbi-footer-premium .footer-premium-tagline {
    color: var(--color-brand-cream) !important;
}
.azbi-footer-premium .footer-premium-col h4 {
    color: var(--color-brand-cream) !important;
}

/* --- 3. Hero-постер (слайд 1 на зелёном) --- */
/* FIX 2026-07-15 (контраст): было rgba(255,251,237,0.72) — 3.77:1 на
   зелёном. Инверсия иерархии: кикер одновременно самый мелкий элемент
   героя (12.8px) и самый выцветший, хотя это первая строка первого экрана.
   Полоса 3.59:1 разрешена только крупному дисплейному кеглю. Чистый крем
   даёт 5.95:1; отличие от заголовка держат кегль 12.8 против 96 и трекинг. */
.azbi-hero.s-green .azbi-hero__kicker { color: var(--color-brand-cream); }
.azbi-hero.s-green .azbi-hero__title {
    color: var(--color-brand-cream);
    text-transform: uppercase;
    font-size: clamp(2.9rem, 6.8vw, 6rem);
    line-height: 0.88;
    letter-spacing: -0.04em;
}
.azbi-hero.s-green .azbi-hero__title em {
    font-style: normal;
    color: var(--color-brand-orange);
}
.azbi-hero.s-green .azbi-hero__sub { color: rgba(255, 251, 237, 0.88); }
.azbi-hero.s-green .azbi-btn--ghost {
    border-color: rgba(255, 251, 237, 0.45);
    color: var(--color-brand-cream);
}
.azbi-hero.s-green .azbi-btn--ghost:hover {
    background: var(--color-brand-cream);
    border-color: var(--color-brand-cream);
    color: var(--color-brand-green);
}
/* Только обод-полоса становится кремовым на зелёном постере; оранжевые
   канты (.azbi-ring__edge) сохраняют свой stroke из разметки. */
.azbi-hero.s-green .azbi-ring__band { stroke: var(--color-brand-cream); }

/* Передняя нижняя дуга кольца поверх стакана — низ стакана уходит ЗА
   кольцо, создавая эффект «вылетает из середины отверстия». */
.azbi-ring__svg--front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}

/* --- Hero: брендовый стакан парит в проёме кольца-«0» --- */
.azbi-ring__cup {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    /* Стакан сидит В дырке кольца: низ за нижней дугой, верх выступает.
       Сдвиг по X: проём брендового «0» органический, его центр — 213.8 из
       440 viewBox, а не 220. Без этого стакан прижат к правому краю проёма. */
    transform: translate(-1.4%, -7%);
}
.azbi-ring__cup svg {
    width: 52%;
    height: auto;
    overflow: visible;
    transform-origin: center;
    animation: azbi-cup-float 5.5s ease-in-out infinite;
}
@keyframes azbi-cup-float {
    0%, 100% { transform: translateY(4px) rotate(-1.1deg); }
    50%      { transform: translateY(-16px) rotate(1.1deg); }
}
.azbi-ring__cup .cup-steam-path {
    transform-box: fill-box;
    transform-origin: bottom center;
    opacity: 0;
    animation: azbi-cup-steam 3.4s ease-in-out infinite;
}
.azbi-ring__cup .cup-steam-path:nth-child(2) { animation-delay: 0.6s; }
.azbi-ring__cup .cup-steam-path:nth-child(3) { animation-delay: 1.2s; }
@keyframes azbi-cup-steam {
    0%   { opacity: 0; transform: translateY(10px) scaleY(0.65); }
    35%  { opacity: 0.65; }
    100% { opacity: 0; transform: translateY(-16px) scaleY(1.25); }
}
@media (prefers-reduced-motion: reduce) {
    .azbi-ring__cup svg { animation: none !important; transform: none !important; }
    .azbi-ring__cup .cup-steam-path { animation: none !important; opacity: 0.4; }
}
/* Текст-печать по кругу — зелёный на кремовом ободе (5.95:1), раньше был
   кремовый на кремовом = невидим (проблеск «пустой болванки»). */
.azbi-ring__seal { font-size: 17px; letter-spacing: 1.5px; }
.azbi-hero.s-green .azbi-ring__seal { fill: var(--color-brand-green); }
/* FIX 2026-07-15 (контраст): было rgba(255,251,237,0.78) — 4.24:1 при
   кегле 12.5px, ниже порога 4.5:1 для мелкого текста. Альфа снята с
   ТЕКСТА; на линейке border-top она остаётся сознательно — это
   декоративная волосяная линия, а не контент. */
.azbi-hero.s-green .azbi-hero__baseline {
    color: var(--color-brand-cream);
    border-top-color: rgba(255, 251, 237, 0.25);
}
.azbi-hero.s-green .azbi-hero__baseline b { color: var(--color-brand-cream); }

/* Физика голд-кнопки (hard-offset) исправлена у источника —
   см. .azbi-btn--gold:hover в блоке AZBI HERO v7 выше. */

/* --- 4. Крафт-секция статов (слайд 2) --- */
.s-warm .editorial-left { background: transparent !important; }
/* Плоскость по закону v6: тень только на hover */
.editorial-card, .card-icon-wrap { box-shadow: none !important; }
.editorial-card:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: var(--shadow-hard-sm) !important;
}
/* Фото-тайл в сетке метрик: реальное фото точки вместо филлер-метрики */
.metric-item--photo {
    border-left: none !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px;
    border: 2px solid var(--color-brand-black);
    min-height: 118px;
}
.metric-item--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 5. Молекула-медальон (брендбук стр. 20-22) — статичный знак-якорь.
   Перенесено из brand-molecule.css (single source, линк из index выпилен).
   Статика по умолчанию; вращение — только явный opt-in .azbi-molecule--spin. --- */
.azbi-molecule {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--molecule-size, 120px);
    aspect-ratio: 1 / 1;
    isolation: isolate;
}
.azbi-molecule__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.azbi-molecule--spin .azbi-molecule__ring {
    animation: azbi-molecule-spin 22s linear infinite;
}
.azbi-molecule__ring text {
    font-family: 'Galdern', 'HelveticaNeueCyr', 'Helvetica Neue', sans-serif;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    fill: var(--molecule-text, var(--color-brand-green));
}
.azbi-molecule__center {
    position: relative;
    z-index: 1;
    width: 46%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--molecule-center-bg, var(--color-brand-green));
    border: 2px solid var(--molecule-text, var(--color-brand-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-orange);
}
.azbi-molecule__center svg {
    width: 52%;
    height: auto;
    display: block;
}
.azbi-molecule--on-color .azbi-molecule__ring text { fill: var(--color-brand-cream); }
.azbi-molecule--on-color .azbi-molecule__center {
    background: var(--color-brand-cream);
    color: var(--color-brand-green);
    border-color: var(--color-brand-cream);
}
@keyframes azbi-molecule-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .azbi-molecule__ring { animation: none !important; }
}

/* Шов-медальон: штамп по центру верхней кромки входящей крафт-секции.
   Snap-слайды режут контент по overflow:hidden, поэтому знак живёт ВНУТРИ
   секции, а не страддлит границу. Сидит в пустой центральной полосе
   фикс-шапки (лого слева, гамбургер справа, центр свободен) — выше
   контентного паддинга секции (100-125px), ни с чем не пересекается. */
.seam-medallion {
    position: absolute !important;
    top: clamp(14px, 2.2vh, 26px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    pointer-events: none;
}
.seam-medallion .azbi-molecule { --molecule-size: 64px; }
@media (max-width: 767px) {
    .seam-medallion { display: none; }
}

/* --- 5а. Шаги-постер: колонки с cream-волосяной кромкой и крупным
   оранжевым нумералом (грамматика зелёных постеров; используется на
   partner.html). Нумерал ≥18.66px bold — проходит контраст-закон
   orange-on-green для дисплейных кеглей. --- */
.poster-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    margin-top: clamp(2rem, 5vh, 3.25rem);
}
@media (max-width: 760px) {
    .poster-steps { grid-template-columns: 1fr; gap: 1rem; }
}
.poster-step {
    border-top: 1.5px solid rgba(255, 251, 237, 0.35);
    padding-top: 1rem;
}
.poster-step__n {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: 0.1em;
    color: var(--color-brand-orange);
    line-height: 1;
}
.poster-step h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    margin: 0.6rem 0 0.4rem;
    font-size: 1.25rem;
    color: var(--color-brand-cream);
    letter-spacing: -0.01em;
}
.poster-step p {
    margin: 0;
    color: rgba(255, 251, 237, 0.78);
    font-size: 0.92rem;
    line-height: 1.55;
}

/* --- 5е. Крафт-мостик: cream-полоса с бизнес-CTA перед зелёным футером
   (menu.html) — снимает шов «зелёное-на-зелёном» и даёт странице
   конверсионный выход. --- */
.craft-cta__title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--color-brand-black);
    margin: 0 0 1rem;
    text-wrap: balance;
}
.craft-cta__sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4a4438;
    max-width: 56ch;
    margin: 0 auto;
}
.craft-cta__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

/* --- 5ж. Кремовый лист формы (partner #consultation): инлайн-грид 1fr/1.2fr
   не складывался на мобиле — форма распирала документ на +103px. --- */
@media (max-width: 860px) {
    #consultation { padding: 1.75rem !important; }
    #consultation > div { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    /* Карточки графиков калькулятора шире вьюпорта (+25px на 375px) */
    .calc-chart-card {
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }
    /* about.html: инлайн-грид истории (1.2fr/1fr) не складывался — метрика
       выпихивалась на +217px за вьюпорт */
    .about-story-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    .about-metric-card { padding: 2rem !important; }
    .timeline-content { max-width: 100%; min-width: 0; }
}

/* --- 5б. Марки-бегунок: ниже 768px snap-клип секций не действует
   (@media в базе), и бесконечный трек распирал документ по горизонтали
   (+257px на 375px-вьюпорте). Клипуем сам блок марки. --- */
.azbi-marquee-section,
.azbi-marquee {
    overflow: hidden;
    max-width: 100%;
}

/* --- 5в. Шапка меню на мобиле: заголовок + табы в nowrap занимали 608px
   на 375px-вьюпорте и распирали документ — переносим строки и ужимаем
   капсулы табов. --- */
@media (max-width: 767px) {
    .menu-header-centered {
        flex-wrap: wrap !important;
        row-gap: 0.75rem;
    }
    .menu-tabs {
        flex-wrap: wrap !important;
        row-gap: 0.5rem;
    }
    .menu-tab-btn {
        padding: 0.5rem 1.05rem !important;
        font-size: 0.85rem !important;
    }
}

/* --- 5г. Планшетная полоса 641-899px (ранее не покрыта ни одним
   media hero v7): одна колонка, кольцо и кегль ужаты, чтобы слайд
   влезал в 100vh snap-бюджет. --- */
@media (min-width: 641px) and (max-width: 899px) {
    .azbi-ring { width: min(46vw, 360px); }
    .azbi-hero.s-green .azbi-hero__title { font-size: clamp(2.7rem, 5.6vw, 3.6rem); }
}

/* --- 6. Masked-reveal заголовков: недостающие правила для
   motion.js initSplitTextReveal (спаны существовали, но inline-боксы
   игнорируют transform — реveal был визуально мёртв). --- */
.azbi-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}
.azbi-word__inner {
    display: inline-block;
    will-change: transform;
}
/* --- 7. TYPO PASS F — «лицо страницы»: Galdern выкручен на постерную
   шкалу по всем страницам (гигантский кегль, leading ~0.9, negative
   tracking, uppercase). --- */
.editorial-title {
    font-size: clamp(2.2rem, 4.2vw, 3.5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.035em !important;
}
.menu-heading-centered, #menu-heading {
    font-size: clamp(2.6rem, 4.8vw, 4.25rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.035em !important;
}
.map-teaser-heading {
    font-size: clamp(2.4rem, 4.4vw, 3.9rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.035em !important;
}
.flat-hero__title {
    font-size: clamp(2.7rem, 6.6vw, 5.9rem);
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
/* Внутренние h1 (about/shop) — из шаблонных 2.75rem в постерную шкалу.
   Селектор с h1: id about-heading существует и на главной (h2 слайда 2) —
   его масштаб задаёт .editorial-title выше. */
h1#about-heading, h1#shop-heading {
    font-size: clamp(2.6rem, 5.2vw, 4.5rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.035em !important;
    text-transform: uppercase !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
}

/* --- 8. Шов-страддл для скролл-страниц (не-snap): медальон-плашка сидит
   верхом на границе секций (negative-margin приём .legal-body-wrap). --- */
.seam-straddle {
    position: relative;
    height: 0;
    display: flex;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}
.seam-straddle .azbi-molecule {
    --molecule-size: 64px;
    transform: translateY(-50%);
    background: var(--color-brand-cream);
    border-radius: 50%;
    border: 2px solid var(--color-brand-black);
}
@media (max-width: 767px) {
    .seam-straddle { display: none; }
}
/* ==================== END ALTERNATION LAYER v7 ==================== */

/* ==================== HEADER SLIM v8 ====================
   Шапка была 94px: .nav-container height 80px + падинги шапки 2×0.38rem
   (12.16px) + бордер 2px. Лого 28px и меню 21px в такой полосе тонули —
   80px контейнера держали пустоту, а не контент.

   Полоса сведена к 45px. Размеры лого и текста НЕ трогаем: 28px лого в
   43px контейнере = по 7.5px сверху/снизу, меню 21px — тем более влезает.

   Всю высоту теперь держит один контейнер, падинги шапки обнулены —
   иначе высота складывалась из трёх источников и её нельзя было задать
   одним числом. Селекторы повторяют исходные (там !important на padding
   в 3 местах), поэтому перебиваем той же специфичностью, но позже. */
header.site-header,
header.site-header.scrolled,
body.snap-home-body header.site-header:not(.scrolled),
body.dark-header-page header.site-header:not(.scrolled),
body:not(.snap-home-body):not(.dark-header-page) header.site-header:not(.scrolled) {
    padding: 0 !important;
}
/* 43px + 2px бордер = видимая полоса 45px */
.nav-container { height: 43px; }
/* ==================== END HEADER SLIM v8 ==================== */

/* ==================== BRAND LOGO SIZING ==================== */
/* FIX 2026-07-15 (бренд): класс .brand-logo-img стоял на 6 тегах, но не был
   описан НИ В ОДНОМ CSS. logo.svg объявляет только viewBox без width/height,
   то есть у него есть пропорция, но нет собственного размера. Глобальное
   правило img,svg { height:auto } (строка ~856) вместе с flex-родителем
   .logo-link (shrink-to-fit, align-items:center — без stretch) схлопывало
   картинку в 0×0.
   На большинстве страниц это было незаметно: app.js/updateLogoUI() заменяет
   содержимое #header-logo-container своим <img> с инлайновой высотой. Но в
   шапке locations.html ссылки с этим id нет, JS до неё не доходит — и знак
   не появлялся вообще, а ссылка «на главную» оставалась целью 0×0, то есть
   некликабельной. Задаём высоту в CSS: логотип виден сразу, до JS, и не
   зависит от него. */
.brand-logo-img {
    height: 28px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Подвал крупнее шапки — совпадает с высотой, которую ставит app.js при
   подмене, чтобы до/после JS не было скачка вёрстки. */
#footer-logo-container .brand-logo-img {
    height: 40px;
}

/* ==================== HOW IT WORKS (главная, слайд «Процесс») ==================== */
/* Зелёный постер между «Картой» и подвалом: чередование green×warm сохранено
   (hero G - tech W - menu G - map W - how G - footer W). Контраст: крем на
   зелёном 5.95:1 (несущая пара); оранжевый на зелёном 3.59:1 — только
   дисплейные размеры (номера шагов, кикер >=24px bold). */
.how-section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.how-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vh, 3.5rem);
    max-width: 1180px;
}
.how-head {
    display: flex;
    align-items: baseline;
    gap: 2rem;
    flex-wrap: wrap;
}
.how-kicker {
    color: var(--color-brand-orange);
    font-family: var(--font-heading);
    font-size: 1.5rem; /* дисплейный размер: 3.59:1 допустим */
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0;
}
.how-title {
    color: var(--color-brand-cream);
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    text-transform: uppercase;
}
.how-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.how-step {
    /* Пунктир — фирменный мотив пара над чашкой */
    border-top: 2px dashed rgba(255, 251, 237, 0.35);
    padding-top: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.how-step__num {
    color: var(--color-brand-orange);
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 3.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
}
.how-step__title {
    color: var(--color-brand-cream);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}
.how-step__desc {
    color: var(--color-brand-cream);
    opacity: 0.92;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}
.how-fork {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    border-top: 2px dashed rgba(255, 251, 237, 0.35);
    padding-top: clamp(1.5rem, 3vh, 2.25rem);
}
.how-fork__lead {
    color: var(--color-brand-cream);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 800;
    margin: 0;
}
.how-fork__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
@media (max-width: 991px) {
    .how-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    /* На мобиле слайд отпускаем: контента больше кадра, снапа тут нет */
    .how-section {
        height: auto !important;
        min-height: 100vh;
        padding: 5rem 0 !important;
    }
    .how-steps { grid-template-columns: 1fr; }
    .how-fork { flex-direction: column; align-items: flex-start; }
}

/* Доводка HOW: общий `.snap-section > .container` даёт margin-bottom:auto —
   во флекс-колонке он съедает свободную высоту и прибивает контент к шапке
   (та же болезнь, что лечили в «Технологиях»). Здесь центрирует сам flex
   секции, поэтому контейнеру обнуляем оба авто-отступа. */
.how-section > .container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
/* Кикер — строка НАД заголовком, а не сбоку: рядка из двух разноростовых
   строк читалась как случайность. */
.how-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

/* ==================== TRUST STRIP («Нам доверяют») ==================== */
/* Бегущая строка реальных площадок из config.locations: Westminster, INHA,
   TUIT, БЦ Poytaxt — материал доверия, который был похоронен в выпадающем
   списке карты. Трек дублируется дважды в JS, цикл — translateX(-50%). */
.trust-strip {
    background: var(--color-brand-cream);
    padding: 3.25rem 0 3.5rem;
    overflow: hidden;
}
.trust-strip__head {
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-brand-green);
    margin: 0 0 1.75rem;
}
.trust-strip__viewport { width: 100%; overflow: hidden; }
.trust-strip__track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: trust-scroll 55s linear infinite;
}
.trust-chip {
    flex: none;
    white-space: nowrap;
    border: 2px solid var(--color-brand-green);
    border-radius: var(--radius-pill, 999px);
    color: var(--color-brand-green);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.55rem 1.4rem;
}
@keyframes trust-scroll {
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .trust-strip__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ==================== FAQ (rent, partner) ==================== */
/* Нативный details/summary: доступно с клавиатуры, работает без JS.
   Снимает типовые возражения ДО формы — раньше посетитель после тарифов
   и калькулятора падал в заявку с неотвеченными вопросами. */
.faq-section {
    background: var(--color-brand-cream);
    padding: 5rem 0;
}
.faq-section__title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-brand-black);
    margin: 0 0 3rem;
}
.faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.faq-item {
    border: 2px solid var(--color-brand-black);
    border-radius: 18px;
    background: var(--color-brand-cream);
    transition: border-color 0.25s ease;
}
.faq-item[open] { border-color: var(--color-brand-green); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 1.5rem;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-brand-black);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    flex: none;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 800;
    color: var(--color-brand-green);
    transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body {
    padding: 0 1.5rem 1.4rem;
    color: var(--color-brand-black);
    opacity: 0.85;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ==================== FRANCHISE OFFER (partner) ==================== */
/* «Что входит» + «Этапы запуска»: цифры инвестиций и роялти жили только
   в дефолтах калькулятора — оффером они не были показаны нигде. */
.offer-section {
    background: var(--color-brand-cream);
    padding: 5rem 0;
}
.offer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}
.offer-card {
    border: 2px solid var(--color-brand-black);
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.offer-card__title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-brand-black);
    margin: 0;
}
.offer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.offer-list li {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    line-height: 1.5;
    color: var(--color-brand-black);
}
.offer-list li::before {
    content: '✓';
    flex: none;
    font-weight: 800;
    color: var(--color-brand-green);
}
.offer-badge {
    margin-top: auto;
    align-self: flex-start;
    background: var(--color-brand-green);
    color: var(--color-brand-cream);
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
}
.stage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
.stage {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.stage__n {
    flex: none;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 2rem;
    line-height: 1;
    color: var(--color-brand-green);
    min-width: 2.6rem;
}
.stage__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-brand-black);
    margin: 0 0 0.3rem;
}
.stage__text {
    color: var(--color-brand-black);
    opacity: 0.8;
    line-height: 1.55;
    font-size: 0.95rem;
    margin: 0;
}
@media (max-width: 900px) {
    .offer-grid { grid-template-columns: 1fr; }
}

/* ==================== VIEW TRANSITIONS (переходы между страницами) ==================== */
/* Cross-document View Transitions API (Chrome 126+): браузер сам снимает
   старую и новую страницу и анимирует смену БЕЗ задержки навигации.
   Геометрия повторяет фирменный зелёный купол: новая страница поднимается
   куполом снизу (ellipse от нижней кромки), старая приглушается под ним.
   Старый JS-занавес (page-transition-overlay) при поддержке VT отключается
   в app.js: он задерживал переход на 0.8с ДО начала загрузки. Фолбэк для
   остальных браузеров — прежний занавес. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
    ::view-transition-old(root) {
        animation: azbi-vt-dim 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    ::view-transition-new(root) {
        animation: azbi-vt-dome 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    @keyframes azbi-vt-dim {
        to { opacity: 0.3; transform: scale(0.985); }
    }
    @keyframes azbi-vt-dome {
        from { clip-path: ellipse(135% 0% at 50% 103%); }
        to   { clip-path: ellipse(142% 142% at 50% 103%); }
    }
    /* Шапка живёт в собственной группе: при смене страниц она не ныряет
       под купол, а плавно перетекает — навигация ощущается непрерывной. */
    header.site-header {
        view-transition-name: site-header;
    }
}

/* ==================== FLAT-HERO MOBILE FIX ==================== */
/* Тот же grid blowout, что лечили на десктопе, но в мобильной одноколонке:
   у fr-дорожки автоминимум min-content, слово «ПРИСОЕДИНЯЙТЕСЬ» при 43px
   держало колонку в 495px — .flat-hero (overflow:hidden) резал ВСЁ содержимое
   героя по правому краю 375px-экрана: заголовок, кнопки, карточки цифр. */
@media (max-width: 991px) {
    .flat-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}
@media (max-width: 576px) {
    /* Потолок по самому длинному слову: 15 глифов «ПРИСОЕДИНЯЙТЕСЬ» должны
       влезать в колонку 311px (375 - 2x32 падинга); 7.2vw на 375px = 27px */
    .flat-hero__title {
        font-size: clamp(1.5rem, 7.2vw, 2.7rem) !important;
    }
}

/* ==================== AZBI PREMIUM VISUAL (брендбук, 2026-07-16) ==================== */
/* Фирменный элемент брендбука (стр. 20): органический блоб, который «меняет
   форму как молекула», объект прорывается за его край. Здесь — подложка
   пиктограмм напитков: зелёный блоб горячим, синий (#1534e8, брендовый
   синий со стр. 15/24) холодным. */
:root {
    --color-brand-blue: #1534e8;
}
.azbi-pict {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.azbi-pict::before {
    content: '';
    position: absolute;
    left: -6%;
    right: -6%;
    top: 16%;
    bottom: 4%;
    background: var(--color-brand-green);
    border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
    animation: azbi-blob-morph 9s ease-in-out infinite alternate;
    transition: scale 0.4s ease;
}
.azbi-pict--cold::before {
    background: var(--color-brand-blue);
}
.azbi-pict svg {
    position: relative;
    animation: azbi-pict-float 6s ease-in-out infinite alternate;
    transition: transform 0.4s ease;
}
@keyframes azbi-blob-morph {
    0%   { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
    50%  { border-radius: 58% 42% 44% 56% / 46% 58% 42% 54%; }
    100% { border-radius: 42% 58% 56% 44% / 56% 44% 58% 42%; }
}
@keyframes azbi-pict-float {
    to { transform: translateY(-6px); }
}
/* Пар живёт: штрихи медленно поднимаются */
.pict-steam path {
    animation: azbi-steam-drift 1.6s linear infinite;
}
@keyframes azbi-steam-drift {
    to { stroke-dashoffset: -16; }
}

/* Пилюли цен — кодировка температур со страницы Menyu брендбука (стр. 24):
   горячее — оранжевая пилюля, холодное — синяя. */
.pops-card-price.pops-price--hot,
.pops-card-price.pops-price--cold {
    display: inline-block;
    align-self: flex-start;
    padding: 0.45rem 1.15rem;
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.2;
}
.pops-card-price.pops-price--hot {
    background: var(--color-brand-orange);
    color: var(--color-brand-black) !important;
}
.pops-card-price.pops-price--cold {
    background: var(--color-brand-blue);
    color: var(--color-brand-cream) !important;
}

/* Ховер карточки: вместо спотлайта Mr Pops — подъём, блоб дышит, стакан
   тянется вверх. Всё на transform/scale — компонуется без рефлоу. */
.pops-menu-grid .pops-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pops-menu-grid .pops-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(1, 8, 17, 0.16);
}
.pops-menu-grid .pops-card:hover .azbi-pict::before { scale: 1.06; }
.pops-menu-grid .pops-card:hover .azbi-pict svg { transform: translateY(-8px) rotate(-2deg); }

/* ── Утилиты премиум-слоя ── */
/* Вертикальная типографика-декор (брендбук, постер «sovg'a», стр. 39) */
.azbi-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
/* Рифлёная текстура стакана (стр. 45): вертикальные рёбра */
.azbi-ribbed {
    background-image: repeating-linear-gradient(
        90deg,
        rgba(1, 8, 17, 0.06) 0 3px,
        transparent 3px 11px
    );
}
@media (prefers-reduced-motion: reduce) {
    .azbi-pict::before,
    .azbi-pict svg,
    .pict-steam path {
        animation: none;
    }
}

/* Доводка блоба: контейнер обязан обнимать svg, иначе флекс-родитель
   растягивает его на всю зону и блоб превращается в плоский эллипс.
   Пропорции блоба считаются от кадра пиктограммы — почти круг. */
.azbi-pict {
    width: max-content;
    margin: 0 auto;
}
.azbi-pict::before {
    left: -14%;
    right: -14%;
    top: 18%;
    bottom: 0;
}
/* Разные фазы морфа у соседних карточек — блобы живут вразнобой,
   а не синхронным строем */
.pops-card:nth-child(3n)   .azbi-pict::before { animation-delay: -3s; }
.pops-card:nth-child(3n+1) .azbi-pict::before { animation-delay: -6s; }

/* Доводка блоба v2: чернила стакана занимают лишь ~40% ширины кадра
   (viewBox 100x120, стакан x26..74), поэтому проценты от коробки давали
   блоб втрое шире стакана — плоский эллипс вместо молекулы. Считаем от
   центра: блоб ~1.7 ширины стакана, почти круг, стакан прорывается
   верхом (пар) и низом. */
.azbi-pict::before {
    left: 50%;
    top: 58%;
    right: auto;
    bottom: auto;
    width: 70%;
    height: 64%;
    transform: translate(-50%, -50%);
}

/* ==================== ABOUT: постер-герой (брендбук стр. 20/39) ==================== */
.about-hero-poster {
    position: relative;
    overflow: hidden;
}
/* Вертикальная строка по правому краю — приём постера «sovg'a» */
.about-hero-vert {
    position: absolute;
    top: 50%;
    right: clamp(0.5rem, 2vw, 2.5rem);
    transform: translateY(-50%);
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    color: var(--color-brand-green);
    opacity: 0.16;
    z-index: 0;
}
.about-kicker {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-brand-green);
    margin: 0 0 1.25rem;
}
.about-manifesto {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.6vw, 3.3rem);
    font-weight: 800;
    line-height: 1.08;
    color: var(--color-brand-black);
    text-transform: uppercase;
    margin: 0 0 1.75rem;
}
.about-accent {
    color: var(--color-brand-green);
    box-shadow: inset 0 -0.28em 0 rgba(252, 185, 92, 0.55);
}
/* Герой-объект: XL-стакан на молекуле, вокруг вращается кольцо строки */
.about-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    z-index: 1;
}
.azbi-pict--xl svg {
    width: min(300px, 55vw);
    height: auto;
}
.azbi-orbit {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(430px, 78vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    animation: azbi-orbit-spin 32s linear infinite;
    pointer-events: none;
}
.azbi-orbit text {
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    fill: var(--color-brand-orange);
}
@keyframes azbi-orbit-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Преимущества: генерик-карточки с FA-иконками -> фирменные полосы
   с пунктиром пара (мотив how-step на креме) */
.about-advantages-container .adv-card {
    background: transparent;
    border: none;
    border-top: 2px dashed rgba(1, 8, 17, 0.25);
    border-radius: 0;
    padding: 1.5rem 0.5rem 0;
    box-shadow: none;
    transition: transform 0.3s ease;
}
.about-advantages-container .adv-card:hover {
    transform: translateY(-4px);
}
@media (max-width: 900px) {
    .about-story-grid { grid-template-columns: 1fr !important; }
    .about-hero-vert { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .azbi-orbit { animation: none; }
}

/* Каталог: пиктограммы товаров на блобе. product-image раньше красил
   FA-иконку — теперь держит молекулу. */
.product-card .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    min-height: 170px;
}
.product-card .product-image i { display: none; }
.azbi-pict--shop svg {
    width: 118px;
    height: auto;
}
.azbi-pict--shop::before {
    width: 82%;
    height: 72%;
    top: 54%;
}
.product-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(1, 8, 17, 0.14);
}
.product-card:hover .azbi-pict::before { scale: 1.06; }

/* ==================== CALCULATOR: брендовая обвязка ==================== */
/* Страница выглядела как админка: белые панели, серые рамки 1px. Панели
   становятся постерными карточками (жёсткая тень как у формы аренды),
   инпуты — фирменные с оранжевым фокусом. */
.calc-left-col,
.calc-right-col {
    background: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 6px 6px 0 var(--color-brand-black);
}
.calc-section input[type="text"],
.calc-section input[type="number"],
.calc-section select {
    border: 2px solid var(--color-brand-black) !important;
    border-radius: 12px !important;
    background: var(--color-brand-cream) !important;
    color: var(--color-brand-black) !important;
}
.calc-section input:focus,
.calc-section select:focus {
    border-color: var(--color-brand-orange) !important;
    outline: none !important;
}

/* Вертикальные строки-декор на героях rent/partner (постер стр. 39) */
.flat-hero { position: relative; }
.flat-hero-vert {
    position: absolute;
    top: 50%;
    right: clamp(0.25rem, 1.5vw, 1.75rem);
    transform: translateY(-50%);
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    color: var(--color-brand-cream);
    opacity: 0.12;
    z-index: 0;
}
@media (max-width: 991px) {
    .flat-hero-vert { display: none; }
}

/* Преимущества about живут на зелёной плите (красит старый
   .about-advantages-container) — после снятия кремовых карточек текст
   обязан быть кремовым, пунктир и иконки — светлыми. Инлайновые цвета
   перебиваются только с !important. */
.about-advantages-container .adv-card { border-top-color: rgba(255, 251, 237, 0.35); }
.about-advantages-container .adv-card h4 { color: var(--color-brand-cream) !important; }
.about-advantages-container .adv-card p { color: var(--color-brand-cream) !important; opacity: 0.88; }
.about-advantages-container .adv-card i { color: var(--color-brand-orange) !important; }

/* ==================== ДРОВЕР: кириллица одной строкой ==================== */
/* Узбекские пункты набираются латиницей — Galdern, узкий и компактный.
   Русские падали в широкий HelveticaNeueCyr Roman: «АРЕНДА АППАРАТОВ» и
   «КАТАЛОГ ТОВАРОВ» ломались на две строки, список расползался. Пофайловый
   фолбэк решает это без смены размеров: латиница остаётся в Galdern,
   кириллица берёт узкий кириллический Condensed (глифы проверены fontTools).
   nowrap — страховка: пункт меню не имеет права переноситься. */
.side-menu-lnk {
    font-family: 'Galdern', 'HelveticaNeueCondensed', 'HelveticaNeueCyr', 'Arial Black', sans-serif !important;
    white-space: nowrap;
}

/* ==================== ПОДДЕРЖКА (support.html) ==================== */
/* Страница нужна как Support URL для App Store: контакты, помощь по
   приложению и удаление аккаунта. Живёт на общем «легальном» шаблоне
   (.legal-hero + .legal-sheet), добавлены только каналы связи и CTA. */
.support-channels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
    margin: 1.75rem 0 2rem;
}
.support-channel {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.5rem 1.4rem;
    border: 2px solid var(--color-brand-black);
    border-radius: 20px;
    background: var(--color-brand-cream);
    text-decoration: none;
    color: var(--color-brand-black);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.support-channel:hover {
    transform: translateY(-4px);
    box-shadow: 6px 6px 0 var(--color-brand-green);
}
.support-channel i {
    font-size: 1.5rem;
    color: var(--color-brand-green);
    margin-bottom: 0.4rem;
}
.support-channel__label {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand-green);
}
.support-channel__value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    word-break: break-word;
}
.support-channel__note {
    font-size: 0.85rem;
    opacity: 0.75;
    line-height: 1.4;
}
.support-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}
/* Призрачная кнопка для СВЕТЛОГО фона: на кремовом листе .btn-ghost-light
   невидим (он рассчитан на зелёный постер). */
.btn-ghost-dark {
    display: inline-block;
    padding: 0.9rem 2rem;
    border: 2px solid var(--color-brand-black);
    border-radius: var(--radius-pill, 999px);
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-brand-black);
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}
.btn-ghost-dark:hover {
    background: var(--color-brand-green);
    color: var(--color-brand-cream);
    border-color: var(--color-brand-green);
}

/* ==================== ТАРИФЫ АРЕНДЫ ==================== */
/* Карточки тарифов носили класс .pops-card — а это карточка МЕНЮ: у неё
   height:480px и overflow:hidden под пиктограмму напитка. Тарифный контент
   длиннее на 150-250px, поэтому кнопки «Выбрать тариф» уходили под обрез на
   всех трёх карточках. Плюс общее правило красило их кремом через !important,
   и задуманный чёрным третий тариф превращался в крем по крему: заголовок
   «AZBI Network» и все пункты становились невидимы.
   Собственный класс: высота по содержимому, тёмный вариант — модификатором. */
.tariff-card {
    background-color: var(--color-brand-cream);
    border: 2px solid var(--color-brand-black);
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
.tariff-card:hover { transform: translateY(-6px); }
.tariff-card--dark {
    background-color: var(--color-brand-black);
    color: var(--color-brand-cream);
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX 2026-08-24 — стрелки карусели меню больше не накрывают карточки.

   Было: .side-arrow стояли absolute на left/right 2.5% ВНУТРИ обёртки,
   то есть физически поверх первой и последней карточки. На главной кружок
   ложился ровно на заголовок «ЭСПРЕССО» и съедал первую букву.
   Полей по бокам всего ~50px — вынести стрелки наружу некуда.

   Стало: обёртка — флекс-колонка, сетка занимает всю ширину и идёт первой,
   обе стрелки встают под ней по центру. Заодно занимают пустоту, которая
   под карточками и так простаивала, и перестают перекрывать что-либо
   на любом экране — правки под мобильный ниже уже не нужны.
   ═══════════════════════════════════════════════════════════════════════ */
.menu-carousel-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.9rem !important;
}

.menu-carousel-wrapper > .pops-menu-grid {
    order: 1 !important;
    flex: 1 0 100% !important;
}

.menu-carousel-wrapper .menu-nav-arrow.side-arrow,
.menu-carousel-wrapper .menu-nav-arrow.prev-arrow,
.menu-carousel-wrapper .menu-nav-arrow.next-arrow {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-top: 1.4rem !important;
}

.menu-carousel-wrapper .menu-nav-arrow.prev-arrow { order: 2 !important; }
.menu-carousel-wrapper .menu-nav-arrow.next-arrow { order: 3 !important; }

@media (max-width: 768px) {
    /* Под карточками стрелки уже ни на чём не лежат, поэтому тёмная заливка
       для контраста поверх картинки больше не нужна — возвращаем кремовую,
       как у остальных кнопок бренда. */
    .menu-carousel-wrapper .menu-nav-arrow.side-arrow {
        background-color: var(--color-brand-cream, #fffbed) !important;
        border-color: var(--color-brand-black, #010811) !important;
        color: var(--color-brand-green, #11703b) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FIX 2026-08-24 — слайд «Премиальный кофе»: дыра в левой колонке.

   Было: .editorial-left стоял на justify-content:space-between при
   height:100%. Заголовок с описанием прижимался к верху, цифры к низу,
   а между ними зияла пустота высотой почти в пол-экрана — контента
   на всю колонку не хватало. Фото кофе-поинта при этом лежало ЯЧЕЙКОЙ
   внутри сетки метрик с min-height:118px и object-fit:cover, поэтому
   от кадра оставалась горизонтальная полоска, читавшаяся как обрезок.

   Стало: фото вынуто из сетки в отдельную полосу между текстом и цифрами
   и растягивается (flex:1) ровно на ту пустоту, которая там была. Колонка
   больше ничего не расталкивает — распределение делает само фото.
   Метрик осталось три, поэтому сетка переведена в три колонки.
   ═══════════════════════════════════════════════════════════════════════ */
.editorial-left {
    justify-content: flex-start !important;
}

.editorial-photo {
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 150px !important;
    margin: 0.4rem 0 0 !important;
    border-radius: 20px !important;
    border: 2px solid var(--color-brand-black, #010811) !important;
    overflow: hidden !important;
}

.editorial-photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 42% !important;
    display: block !important;
}

@media (min-width: 992px) {
    .editorial-metrics {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.4rem !important;
    }
    .editorial-metrics .metric-number {
        font-size: 2.1rem !important;
    }
    .editorial-metrics .metric-label {
        font-size: 0.72rem !important;
    }
}

@media (max-width: 991px) {
    /* На узком экране колонка и так по содержимому — фото не должно
       раздуваться, ему хватает фиксированной полосы. */
    .editorial-photo {
        flex: 0 0 auto !important;
        height: 180px !important;
    }
}