/* ============================================================
   Hero Тип-1 «Витрина» — оверлеи поверх видео-фона.
   Значения 1:1 с боевого (post-5036.css). Контент — 1280px.
   Бренд-цвета через CSS-переменные (§10).
   ============================================================ */
@font-face {
    font-family: 'Steppe-Regular';
    src: url('../fonts/Steppe-Regular.woff2') format('woff2'),
         url('../fonts/Steppe-Regular.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Steppe-Bold';
    src: url('../fonts/Steppe-Bold.woff2') format('woff2'),
         url('../fonts/Steppe-Bold.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Steppe-Light';
    src: url('../fonts/Steppe-Light.woff2') format('woff2'),
         url('../fonts/Steppe-Light.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

:root {
    --nbc-accent:   #B97062;   /* терракота (кнопка «найти», текст, ховеры) */
    --nbc-cert-bg:  #795D63;   /* кнопка «Купить сертификат» */
    --nbc-offwhite: #DDD8D2;   /* светлый текст/бордер */
}

/* ── Шапка hero ─────────────────────────────────────────── */
.nbc-hero-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    padding: 10px 0;
    background: rgba(19, 9, 4, .65)
        url('https://kissaten-coffee.ru/wp-content/uploads/2026/03/bgr_bases-sm.webp') bottom center / cover;
    font-family: 'Montserrat', sans-serif;
}
.nbc-hh-inner {
    max-width: none;
    margin: 0 auto;
    padding: 0 232px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.nbc-hh-left,
.nbc-hh-right { display: flex; align-items: center; gap: 18px; flex: 1 1 0; }
.nbc-hh-right { justify-content: flex-end; }

/* Кнопка «Как нас найти?» */
.nbc-hh-find {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--nbc-accent);
    color: var(--nbc-offwhite);
    border: 1px solid var(--nbc-offwhite);
    border-radius: 20px;
    font-size: 11px; font-weight: 400; line-height: 1;
    padding: 11px 25px;
    text-decoration: none; white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.nbc-hh-find:hover { background: var(--nbc-offwhite); color: var(--nbc-accent); border-color: var(--nbc-accent); }
.nbc-hh-find:hover .nbc-hh-tg { fill: var(--nbc-accent); }
.nbc-hh-tg { width: 15px; height: 15px; fill: var(--nbc-offwhite); flex: 0 0 auto; }

/* Часы — каждый диапазон колонкой: дни сверху, время ниже */
.nbc-hh-hours { display: flex; gap: 16px; font-size: 11px; line-height: 1.25; color: var(--nbc-accent); margin: 0 auto; }
.nbc-hh-hrow { display: flex; flex-direction: column; }
.nbc-hh-hours strong { font-weight: 700; }
.nbc-hh-htime { font-weight: 400; white-space: nowrap; }

/* Лого */
.nbc-hh-logo { flex: 0 0 auto; }
.nbc-hh-logo img { height: 38px; width: auto; display: block; transform: translateY(-4px); }

/* Кнопка «Купить сертификат» */
.nbc-hh-cert {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nbc-cert-bg);
    color: #fff;
    font-family: 'Steppe-Regular', 'Montserrat', sans-serif;
    font-size: 13px; font-weight: 300; letter-spacing: .2px; line-height: 1;
    border-radius: 90px;
    padding: 12px 29px 10px;
    margin-right: 10px;
    text-decoration: none; white-space: nowrap;
    transition: background .2s;
}
.nbc-hh-cert:hover { background: var(--nbc-accent); color: #fff; }

/* Телефон + колл-центр */
.nbc-hh-phone { text-align: center; color: var(--nbc-accent); font-size: 11px; line-height: 1.3; margin: 0 auto; }
.nbc-hh-phone a { display: block; color: var(--nbc-accent); font-size: 16px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.nbc-hh-phone strong { font-weight: 700; }
.nbc-hh-phone span { white-space: nowrap; }
/* Иконка трубки — только на мобильной шапке */
.nbc-hh-phone-ic { display: none; }
/* Строка «колл-центр…» отдельным рядом — только на мобильной */
.nbc-hh-cc { display: none; }

/* Иконка юзера / вход */
.nbc-hh-user {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    padding: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--nbc-accent); text-decoration: none;
    transition: opacity .2s;
}
.nbc-hh-user:hover { opacity: .7; }
.nbc-hh-user svg { width: 24px; height: 24px; }

/* ── Тело hero: сцена + боковые блоки + меню ─────────────── */
.nbc-hero-stage {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100vh; height: 100dvh;
    z-index: 70;
    pointer-events: none;
}
.nbc-hero-stage a,
.nbc-hero-stage aside { pointer-events: auto; }

/* ── Награды: 6 бейджей, 2 ряда по 3, правый верхний угол (1:1 с прода) ── */
.nbc-awards {
    position: absolute; top: 100px; right: 22px;
    display: grid; grid-template-columns: repeat(3, auto);
    gap: 16px 8px;
}
.nbc-awards img { width: 55px; height: auto; display: block; }
.nbc-awards img.nbc-aw-xl { width: 60px; }
@media (max-width: 900px) {
    .nbc-awards { top: 76px; gap: 10px 6px; }
    .nbc-awards img { width: 40px; }
    .nbc-awards img.nbc-aw-xl { width: 44px; }
}

/* Левый блок «О нас» */
.nbc-hero-about {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    max-width: 300px;
    background: #B970629E;
    border-radius: 0 20px 20px 0;
    color: #DDD8D2;
    overflow: hidden;
}
/* Внутренний скроллер: паддинг тут, фон — на родителе.
   Маска прячет текст в зоне 20px у верх./ниж. края (жёсткий обрез, не фон). */
.nbc-hero-about-scroll {
    max-height: 200px;
    overflow-y: auto;
    padding: 28px 34px 40px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.55) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 20px, #000 20px, #000 calc(100% - 20px), transparent calc(100% - 20px));
    mask-image: linear-gradient(to bottom, transparent 0, transparent 20px, #000 20px, #000 calc(100% - 20px), transparent calc(100% - 20px));
}
.nbc-hero-about-scroll::-webkit-scrollbar { width: 4px; }
.nbc-hero-about-scroll::-webkit-scrollbar-track { background: transparent; }
.nbc-hero-about-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.5); border-radius: 4px; }
.nbc-hero-about-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.75); }
.nbc-hero-about p {
    margin: 0;
    font-family: 'Steppe-Regular', 'Montserrat', sans-serif !important;
    font-size: 10px; line-height: 1.8em;
    text-transform: uppercase;
    color: #DDD8D2;
    text-align: left;
}

/* Правый блок «Сейчас сезон» */
.nbc-hero-season {
    position: absolute;
    right: 0; top: 44%;
    max-width: 310px;
    background: #B9706299;
    padding: 34px 44px 34px 64px;
    border-radius: 20px 0 0 20px;
    color: #DDD8D2;
}
.nbc-hs-title { font-family: 'Steppe-Bold', 'Montserrat', sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; text-align: center; }
.nbc-hs-items { font-family: 'Steppe-Regular', 'Montserrat', sans-serif; font-size: 12px; text-transform: uppercase; line-height: 2em; padding: 11px 0 4px 14px; }
/* Месяц — вертикально, по центру левой колонки, на фоне панели */
.nbc-hs-month {
    position: absolute; left: 16px; top: 0; bottom: 0; width: 24px;
    display: flex; align-items: center; justify-content: center;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: 'Steppe-Light', 'Montserrat', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px;
    white-space: nowrap;
}
/* Скруглённая рамка-«скоба»; стенка затухает к краям загиба (маской) */
.nbc-hero-season::before {
    content: ''; position: absolute;
    left: 40px; top: 22px; bottom: 22px; width: 16px;
    border: 1.6px solid rgba(255,255,255,.6);
    border-right: none;
    border-radius: 16px 0 0 16px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 74%, transparent 100%);
}

/* Ряды меню-иконок */
.nbc-hero-menu {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 100%;
    display: flex; justify-content: center; align-items: flex-start;
    pointer-events: none;
}
.nbc-hero-menu-primary   { top: 110px;   max-width: 739px; gap: 4px; }
.nbc-hero-menu-secondary { bottom: 250px; top: auto; max-width: 520px; gap: 4px; }

.nbc-hm-item {
    pointer-events: auto;
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center;
    text-align: center; text-decoration: none;
    color: #DDD8D2;
    transition: transform .2s;
}
.nbc-hm-item:hover { transform: translateY(-10px); }
.nbc-hm-label {
    margin-top: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; line-height: 1.2; color: #DDD8D2; font-weight: 600;
}
.nbc-hm-sub { font-family: 'Montserrat', sans-serif; font-size: 10px; line-height: 1.2; color: #DDD8D2; opacity: .85; margin-top: 2px; font-weight: 500; }

/* Верхний ряд — круглые картинки-иконки (70% ширины колонки, как на бое) */
.nbc-hero-menu-primary .nbc-hm-icon { width: 100%; display: flex; justify-content: center; }
.nbc-hero-menu-primary .nbc-hm-icon img { width: 63%; max-width: 64px; height: auto; display: block; }
.nbc-hero-menu-primary .nbc-hm-label { font-size: 12px; font-weight: 600; }

/* Нижний ряд — контурные svg-иконки */
.nbc-hero-menu-secondary .nbc-hm-icon { display: flex; align-items: center; justify-content: center; height: 48px; }
.nbc-hero-menu-secondary .nbc-hm-icon svg { width: 42px; height: 42px; color: #DDD8D2; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.nbc-hero-menu-secondary .nbc-hm-item-img .nbc-hm-icon img { width: 48px; height: 48px; object-fit: contain; }

/* На невысоких экранах (ноутбуки) нижний ряд выравниваем по нижней кромке
   левого блока «О нас»: блок центрирован (top:50%), его высота 268px
   (скролл 200 + паддинги 28/40) → нижняя кромка = 50% + 134px. */
@media (max-height: 800px) {
    .nbc-hero-menu-secondary {
        bottom: auto;
        top: calc(50% + 134px);
        transform: translate(-50%, -100%);
    }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ (≤767px) — 1:1 по макету прода:
   бежевая шапка с бургером · короткое фото hero · награды строкой
   с наплывом · второй ряд иконок — фикс. терракотовая плашка внизу.
   ============================================================ */
.nbc-hh-burger { display: none; }
@media (min-width: 768px) {
    .nbc-mnav, .nbc-mnav-overlay { display: none !important; }
}
@media (max-width: 767px) {
    /* ── Шапка: беж подложка; ряд 1 — бургер/лого/трубка, ряд 2 — «колл-центр» ── */
    .nbc-hero-header {
        background: #EDE7DF;
        padding: 0;
        display: flex; flex-direction: column; align-items: stretch;
    }
    .nbc-hh-inner { padding: 0 12px; gap: 8px; width: 100%; height: 44px; box-sizing: border-box; }
    .nbc-hh-find, .nbc-hh-cert, .nbc-hh-user { display: none !important; }
    .nbc-hh-burger {
        position: absolute; left: 6px; top: 5px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        width: 48px; padding: 0; border: 0; background: transparent;
        color: var(--nbc-accent); cursor: pointer; z-index: 2;
    }
    .nbc-hh-burger svg { width: 34px; height: 34px; }
    .nbc-hero-header .nbc-hh-logo img { height: 27px; transform: none; }
    .nbc-hh-phone { margin: 0 0 0 auto; }
    .nbc-hh-phone a { display: inline-flex; align-items: center; }
    .nbc-hh-phone-num { display: none; }
    .nbc-hh-phone-ic { display: block; width: 22px; height: 22px; color: var(--nbc-accent); transform: translateY(4px); }
    .nbc-hh-phone > span { display: none; }
    .nbc-hh-cc {
        display: block; text-align: right;
        color: #232323; font-size: 11px; line-height: 1.3;
        margin-top: -5px;
        padding: 0 12px 7px;
    }

    /* ── Фото hero — короткий блок под шапкой (у прода min-height 184px) ── */
    html body.nbc-hero-canvas .nbc-fb {
        height: clamp(184px, 70vw, 300px);
        margin-top: 60px;
    }
    /* Доп. кнопки/навигация/текст баннера на главной мобилки не нужны (на проде их нет) */
    html body.nbc-hero-canvas .nbc-fb-find-us,
    html body.nbc-hero-canvas .nbc-fb-dots,
    html body.nbc-hero-canvas .nbc-fb-arrow,
    html body.nbc-hero-canvas .nbc-fb-overlay { display: none !important; }

    /* ── Сцена = высоте фото; боковые блоки и первый ряд иконок скрыты ── */
    .nbc-hero-stage { top: 60px; height: clamp(184px, 70vw, 300px); }
    .nbc-hero-about, .nbc-hero-season, .nbc-hero-menu-primary { display: none; }

    /* ── Награды: одна строка, наплыв на нижний край фото ── */
    .nbc-awards {
        top: auto; bottom: -20px; left: 0; right: 0;
        width: 100%; margin: 0; padding: 0;
        transform: none;
        display: flex; justify-content: center; align-items: center; gap: 9px;
    }
    .nbc-awards img { width: 44px; flex: 0 0 auto; }
    .nbc-awards img.nbc-aw-xl { width: 48px; }

    /* ── Второй ряд иконок — фиксированная терракотовая плашка внизу ── */
    .nbc-hero-menu-secondary {
        position: fixed; bottom: 0; left: 0; right: 0; top: auto;
        transform: none; max-width: none; width: 100%;
        box-sizing: border-box;
        background: var(--nbc-accent);
        padding: 7px 4px calc(7px + env(safe-area-inset-bottom, 0px));
        gap: 0; z-index: 75;
    }
    .nbc-hero-menu-secondary .nbc-hm-icon { height: 32px; }
    .nbc-hero-menu-secondary .nbc-hm-icon svg { width: 26px; height: 26px; }
    .nbc-hero-menu-secondary .nbc-hm-item-img .nbc-hm-icon img { width: 30px; height: 30px; }
    .nbc-hero-menu-secondary .nbc-hm-label { font-size: 8.5px; margin-top: 4px; }
    .nbc-hero-menu-secondary .nbc-hm-sub { display: none; }
    .nbc-hero-menu-secondary .nbc-hm-item:hover { transform: none; }

    /* Кот и фикс-плашки под мобильную плашку не подлезают */
    .nbc-cafe-cat { display: none; }
    /* Заголовки «О кофейне» — влево, как на проде */
    html body .nbc-cafe-heading, html body .nbc-cafe-tagline { text-align: left; align-self: flex-start; }
    /* Лого-растянутое «kissaten» в «О кофейне» — на проде скрыто на мобильном */
    html body .nbc-cafe-logo { display: none; }
    /* Отступ снизу, чтобы плашка не перекрывала конец подвала */
    html body .nbc-footer { padding-bottom: 96px; }
}

/* ── Бургер-панель (выезд слева) ── */
.nbc-mnav-overlay {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.nbc-mnav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 96;
    width: min(78vw, 300px); box-sizing: border-box;
    background: #EDE7DF;
    transform: translateX(-105%);
    transition: transform .28s ease;
    padding: 54px 26px 26px;
    display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto;
}
body.nbc-mnav-open .nbc-mnav { transform: none; }
body.nbc-mnav-open .nbc-mnav-overlay { opacity: 1; visibility: visible; }
body.nbc-mnav-open { overflow: hidden; }
.nbc-mnav-close {
    position: absolute; top: 10px; right: 14px;
    background: none; border: 0; padding: 0;
    font-size: 32px; line-height: 1; color: var(--nbc-accent); cursor: pointer;
}
.nbc-mnav a, .nbc-mnav-acc {
    display: block;
    font-family: 'Steppe-Regular', 'Montserrat', sans-serif;
    font-size: 14px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--nbc-accent); text-decoration: none; text-align: left;
    padding: 10px 0; border: 0; border-bottom: 1px solid rgba(185,112,98,.2);
    background: none; cursor: pointer;
}
.nbc-mnav a:hover { color: #795D63; }
.nbc-mnav-phone { margin-top: auto; border-bottom: 0 !important; font-size: 17px !important; }

/* Перебиваем глобальные стили (Elementor-кит красит ссылки тёмным;
   тема форсит font-family Montserrat !important на все <a>). */
.nbc-hero-stage a, .nbc-hero-stage .nbc-hm-label, .nbc-hero-about p { color: #DDD8D2; }
.nbc-hero-header .nbc-hh-find { color: var(--nbc-offwhite); }
.nbc-hero-header .nbc-hh-find:hover { color: var(--nbc-accent); }
.nbc-hero-header .nbc-hh-cert { color: #fff; font-family: 'Steppe-Regular', 'Montserrat', sans-serif !important; }
.nbc-hero-header .nbc-hh-cert:hover { color: #fff; }
.nbc-hero-header .nbc-hh-phone a { color: var(--nbc-accent); }

/* ── Как только большой десктопный отступ (132px) перестаёт помещать содержимое
      и текст начинает складываться — шапка становится на всю ширину с малыми
      отступами (без ограничения ширины). Порог 1400px перекрывает зону переносов. ── */
@media (max-width: 1400px) {
    .nbc-hh-inner { padding: 0 128px; gap: 14px; }
    .nbc-hh-left,
    .nbc-hh-right { gap: 12px; }
    .nbc-hh-logo img { height: 32px; }
    .nbc-hh-find { font-size: 10px; padding: 9px 16px; gap: 7px; }
    .nbc-hh-cert { font-size: 12px; padding: 11px 20px 9px; margin-right: 0; }
    .nbc-hh-hours { white-space: nowrap; }
    .nbc-hh-phone a { font-size: 15px; white-space: nowrap; }
    .nbc-hh-phone span { white-space: nowrap; }
}

@media (max-width: 900px) {
    .nbc-hh-inner { padding: 0 14px; gap: 10px; }
    .nbc-hh-hours,
    .nbc-hh-phone span { display: none; }
    .nbc-hh-logo img { height: 32px; }
    .nbc-hh-find { font-size: 10px; padding: 9px 14px; }
    .nbc-hh-cert { font-size: 12px; padding: 10px 18px; }
    .nbc-hh-phone a { font-size: 14px; }
}

/* ============================================================
   Секция «О кофейне» — скролл под hero. Фон страницы (bgr_bases)
   задаётся инлайном на .nbc-hero-canvas (фиксированный). 1:1 с боевого.
   ============================================================ */
@font-face {
    font-family: 'Steppe-ExtraBold';
    src: url('../fonts/Steppe-ExtraBold.woff2') format('woff2'),
         url('../fonts/Steppe-ExtraBold.woff') format('woff');
    font-weight: normal; font-style: normal; font-display: swap;
}

.nbc-cafe {
    position: relative;
    z-index: 65;
    background: transparent; /* видно фиксированный фон страницы */
}
.nbc-cafe-inner {
    max-width: 650px;
    margin: 0 auto;
    padding: 40px 30px 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.nbc-cafe-logo { display: block; z-index: 10; }
.nbc-cafe-logo-img {
    width: 11.5em; max-width: 11.5em; height: auto;
    display: block; margin: 35px auto 30px;
}
.nbc-cafe-heading {
    font-family: 'Steppe-ExtraBold', 'Montserrat', sans-serif;
    font-size: 18px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; text-align: center;
    color: #232323; max-width: 517px; margin-top: 25px; margin-bottom: 10px;
}
.nbc-cafe-text {
    font-family: 'Steppe-Regular', 'Montserrat', sans-serif;
    font-size: 14px; font-weight: 400; letter-spacing: .1px;
    line-height: 1.6; text-align: justify;
    color: #232323; max-width: 517px; margin-top: 30px;
}
.nbc-cafe-tagline {
    font-family: 'Steppe-Regular', 'Montserrat', sans-serif;
    font-size: 16px; font-weight: 600; letter-spacing: 1px;
    text-align: center; color: #232323; max-width: 517px; margin-top: 22px;
}

/* Кот — фиксирован в правом нижнем углу, ПОД баннером (z<60): на загрузке
   скрыт баннером (100vh), выезжает снизу при скролле. Как на боевом. */
.nbc-cafe-cat {
    position: fixed;
    bottom: -186px; right: -10.3px; left: auto;
    width: 300px; height: auto;
    z-index: 55; pointer-events: none;
    transform-origin: 50% 100%;
    transition: bottom .32s ease;
}
/* Наведение на лого «О кофейне»: кот прячется под низ → выныривает слева и качается */
.nbc-cafe-cat.is-left   { left: -51.7px; right: auto; }
.nbc-cafe-cat.is-hidden { bottom: -340px; }
.nbc-cafe-cat.is-noanim { transition: none; }
.nbc-cafe-cat.is-sway   { animation: nbc-cat-sway 1.3s ease-in-out infinite; }
@keyframes nbc-cat-sway {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}

@media (max-width: 900px) {
    .nbc-cafe-inner { padding: 30px 20px 70px; }
    .nbc-cafe-logo-img { width: 13.8em; max-width: 13.8em; }
    .nbc-cafe-heading { font-size: 18px; }
    .nbc-cafe-text { font-size: 13px; text-align: left; }
    .nbc-cafe-tagline { font-size: 14px; }
    .nbc-cafe-cat { width: 200px; bottom: -93px; right: -51.7px; left: auto; }
}