/* ============================================================
   Kappu Cha — бренд поверх ядра NBC
   Значения сняты с боевого kappucha.ru через computed styles.
   Подключается mu-плагином kappucha-brand.php последним.
   ============================================================ */

:root,
html body {
    /* индиго — основной цвет бренда */
    --nbc-accent:        #2A3289;
    --nbc-primary:       #2A3289;
    --nbc-primary-dark:  #1F2668;

    /* барвинковый — кнопки шапки на боевом: rgb(157,179,236) */
    --nbc-cert-bg:       #9DB3EC;
    --nbc-accent-light:  #92AEFF;
    --nbc-accent-soft:   #9DB3EC;

    --nbc-offwhite:      #DDD8D2;
    --nbc-bg:            #EDE7DF;
    --nbc-bg-warm:       #DDD8D2;
    --nbc-border:        #D8D2CA;

    --nbc-text:          #333333;
    --nbc-text-light:    #69727D;
    --nbc-text-invert:   #DDD8D2;

    --nbc-sand:          #A7997B;
    --nbc-pink:          #CC3366;
}

/* Шрифт бренда — Steppe (файлы лежат в теме, iiko/fonts) */
@font-face {
    font-family: 'Steppe-Regular';
    src: url('iiko/fonts/Steppe-Regular.woff2') format('woff2'),
         url('iiko/fonts/Steppe-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Steppe-Bold';
    src: url('iiko/fonts/Steppe-Bold.woff2') format('woff2'),
         url('iiko/fonts/Steppe-Bold.woff') format('woff');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================================================
   1. Затемнение hero
   На боевом поверх фона лежит .elementor-background-overlay
   rgb(2,2,2) при opacity .5 — повторяем на слое .nbc-fb-tint.
   ============================================================ */
html body .nbc-fb-tint {
    background: rgba(2, 2, 2, .5) !important;
}

/* ============================================================
   2. Шапка — как на боевом
   Кнопки «Как нас найти» и «Купить сертификат»: барвинковый фон,
   чёрный текст (на боевом bg rgb(157,179,236), color #000).
   ============================================================ */
html body .nbc-hero-header,
html body .nbc-header {
    background: var(--nbc-accent);
}

/* Панели «О нас» и «Сейчас сезон»: в ядре они терракотовые — цвет Киссатена
   rgba(185,112,98,.62). На боевом Каппуча — синие полупрозрачные. */
html body .nbc-hero-about,
html body .nbc-hero-season {
    background: rgba(36, 62, 134, 0.62) !important;
}

/* !important — в ядре у этих правил своя специфичность через «html body …»
   (см. предупреждение о каскаде nbc-hero.css в CLAUDE.md ядра). */
html body .nbc-hh-find {
    background: var(--nbc-cert-bg) !important;
    color: #000 !important;
    border-color: transparent !important;
    border-radius: 20px;
    font-size: 11px;
    padding: 11px 25px;
}
html body .nbc-hh-find .nbc-hh-tg { fill: #000 !important; }
html body .nbc-hh-find:hover {
    background: #B6C6F2 !important;
    color: #000 !important;
}
html body .nbc-hh-find:hover .nbc-hh-tg { fill: #000 !important; }

html body .nbc-hh-cert {
    background: var(--nbc-cert-bg) !important;
    color: #000 !important;
    border-radius: 90px;
    font-size: 13px;
    padding: 12px 29px 10px;
}
html body .nbc-hh-cert:hover { background: #B6C6F2 !important; color: #000 !important; }

/* Часы и телефон в шапке — белые.
   В ядре .nbc-hh-phone a красится в var(--nbc-accent), то есть в наш индиго,
   и телефон становился невидимым на синей шапке. */
html body .nbc-hh-hours,
html body .nbc-hh-hours strong,
html body .nbc-hh-htime,
html body .nbc-hh-phone,
html body .nbc-hh-phone a,
html body .nbc-hh-phone-num,
html body .nbc-hh-phone strong,
html body .nbc-hh-phone span { color: #fff !important; }
html body .nbc-hh-user { color: #fff !important; }

/* Телефон крупнее, график колл-центра мельче — как на боевом (16px / 11px) */
html body .nbc-hh-phone a         { font-size: 16px; line-height: 1.2; }
html body .nbc-hh-phone-num       { font-size: 16px; }
html body .nbc-hh-phone > span    { font-size: 11px; display: block; }

/* Порядок в правой части шапки: сначала «Купить сертификат», затем телефон
   с колл-центром, затем иконка входа. В разметке ядра телефон идёт первым,
   поэтому переставляем флексом, не трогая шаблон. */
html body .nbc-hh-cert  { order: 1; }
html body .nbc-hh-phone { order: 2; }
html body .nbc-hh-user  { order: 3; }

/* ============================================================
   3. Награды — на боевом РОВНО ТРИ в один ряд, 60px, без зазора
   (servic / top100 / horosh, x = 1050 / 1110 / 1170).
   В шаблоне ядра их шесть в два ряда — лишние убираем.
   ============================================================ */
html body .nbc-awards {
    grid-template-columns: repeat(3, auto);
    gap: 0;
    top: 100px;
}
html body .nbc-awards img:nth-child(n+4) { display: none !important; }
html body .nbc-awards img,
html body .nbc-awards img.nbc-aw-xl { width: 60px; }

@media (max-width: 900px) {
    html body .nbc-awards img,
    html body .nbc-awards img.nbc-aw-xl { width: 42px; }
}

/* ============================================================
   4. Отступы иконок меню на hero
   На боевом 4 иконки по 65px с шагом 113px → ряд ~460px.
   В ядре было max-width 739px, из-за чего пункты разъезжались.
   ============================================================ */
html body .nbc-hero-menu-primary   { max-width: 460px; gap: 0; }
html body .nbc-hero-menu-secondary { max-width: 560px; gap: 0; }

html body .nbc-hero-menu-primary .nbc-hm-icon img { max-width: 65px; }

@media (max-width: 900px) {
    html body .nbc-hero-menu-primary   { max-width: 92vw; }
    html body .nbc-hero-menu-secondary { max-width: 96vw; }
}

/* ============================================================
   5. Синий фон — как на боевом (body: капу-ча_texture_1.jpg)
   Подстраницы и витрина, где инлайн-стиль hero не действует.
   ============================================================ */
html body.nbc-subpage,
html body.nbc-food-body,
html body.nbc-hero-canvas.nbc-subpage {
    background: #2A3289
        url('../../uploads/2025/03/%D0%BA%D0%B0%D0%BF%D1%83-%D1%87%D0%B0_texture_1.jpg')
        center top / cover fixed !important;
}

/* витрина поверх синего фона — прозрачная подложка */
html body .nbc-catalog-wrapper,
html body .nbc-catalog-body,
html body .nbc-catalog-products { background: transparent; }

/* Текст на синем фоне — светлый. В ядре он тёмный (рассчитан на бежевый фон
   Киссатена): .nbc-cat-title был indigo на indigo, то есть невидим. */
html body.nbc-food-body .nbc-cat-title,
html body.nbc-subpage   .nbc-cat-title { color: #FFFFFF; }

html body.nbc-food-body .nbc-product-card,
html body.nbc-food-body .nbc-product-info,
html body.nbc-food-body .nbc-product-name,
html body.nbc-food-body .nbc-product-price,
html body.nbc-food-body .nbc-product-desc,
html body.nbc-food-body .nbc-product-meta,
html body.nbc-food-body .nbc-product-price .amount,
html body.nbc-food-body .nbc-product-price bdi { color: #DDD8D2; }

/* подписи иконок шапки на подстраницах: в ядре они тёмные (#232323),
   на синем фоне нечитаемы. Статический ряд перебиваем явно. */
html body.nbc-subpage .nbc-hm-label,
html body.nbc-subpage .nbc-hm-sub,
html body.nbc-subpage .nbc-hero-menu-static .nbc-hm-label,
html body.nbc-subpage .nbc-hero-menu-static .nbc-hm-sub {
    color: #DDD8D2 !important;
}

/* ============================================================
   6. Витрина без корзины
   Ядро уже прячет их классом .nbc-no-table (нет QR-стола),
   здесь — жёстко, чтобы не зависело от режима заказа.
   ============================================================ */
html body .nbc-sidebar-cart,
html body .nbc-mobile-cart-btn,
html body .nbc-add-btn,
html body .nbc-qty,
html body .nbc-qty-control,
html body .nbc-info-actions,
html body .nbc-card-actions {
    display: none !important;
}

html body .nbc-catalog-body > .nbc-catalog-products {
    flex: 1 1 100% !important;
    max-width: 100% !important;
}

/* Кот Киссатена в пустой корзине — в ядре URL захардкожен на kissaten-coffee.ru
   (class-nbc-catalog.php:527 и nbc-catalog.js:976). Корзина у нас скрыта,
   но картинку прячем, чтобы она не всплыла и не тянулась с чужого домена. */
html body .nbc-empty-cat { display: none !important; }

/* ============================================================
   7. Секция «О чайной» и подвал — текст на синем
   В ядре он #232323 (рассчитан на светлый фон Киссатена).
   ============================================================ */
html body .nbc-cafe-heading,
html body .nbc-cafe-tagline { color: #FFFFFF !important; }
html body .nbc-cafe-text    { color: #DDD8D2 !important; }

html body .nbc-footer,
html body .nbc-footer-address,
html body .nbc-footer-requisites,
html body .nbc-footer-box,
html body .nbc-footer p,
html body .nbc-footer span,
html body .nbc-footer a:not(.nbc-footer-policy):not(.nbc-footer-cert) {
    color: #DDD8D2 !important;
}

/* ============================================================
   8. Кнопки: вместо терракоты Киссатена — белые с тёмным текстом
   .nbc-footer-policy был rgb(185,112,98), .nbc-footer-cert — #795D63.
   ============================================================ */
html body .nbc-footer-policy,
html body .nbc-footer-cert,
html body .nbc-btn,
html body .nbc-button {
    background: #FFFFFF !important;
    color: #2A3289 !important;
    border: none !important;
}
html body .nbc-footer-policy:hover,
html body .nbc-footer-cert:hover,
html body .nbc-btn:hover,
html body .nbc-button:hover {
    background: #EDE7DF !important;
    color: #2A3289 !important;
}

/* ============================================================
   9. Витрина: активная вкладка синяя, описания категорий светлые,
      круглые иконки шапки на подстранице не нужны
   ============================================================ */
html body .nbc-nav-tab.active,
html body .nbc-food-page .nbc-nav-tab.active {
    background: #2A3289 !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
}

html body .nbc-cat-desc { color: #DDD8D2 !important; }

html body.nbc-subpage .nbc-hero-menu-static { display: none !important; }