/* ============================================================================
   Bulka — страницы base.php («о нас») и menu.php (витрина).
   Общая обвязка: шапка, подвал, hero, информационный блок.
   Палитра и шрифты объявлены в bulka-brand.css.
   ========================================================================== */

body.bulka-body {
    margin: 0;
    background: var(--bulka-cream);
    color: var(--bulka-choco);
    font-family: 'PT Mono', 'Courier New', monospace;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.bulka-body *,
body.bulka-body *::before,
body.bulka-body *::after { box-sizing: border-box; }
body.bulka-body h1, body.bulka-body h2, body.bulka-body h3, body.bulka-body h4 {
    font-family: 'Poiret One', 'PT Mono', monospace;
    font-weight: 400;
    margin: 0;
}
body.bulka-body p { margin: 0 0 10px; }
body.bulka-body a { color: var(--bulka-choco); text-decoration: none; transition: color .18s ease; }
body.bulka-body a:hover { color: var(--bulka-red); }

/* ── Шапка ── */
.bulka-header {
    position: relative; /* при прокрутке уезжает, липнет только меню категорий */
    z-index: 500;
    background: rgba(240, 238, 233, .72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--nbc-border);
}
.bulka-header-in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 5px 28px;
    min-height: 113px;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
}
/* Логотип — по центру шапки, крупный */
.bulka-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.bulka-logo img {
    height: 103px !important;
    width: auto !important;
    max-width: none !important;
    display: block;
}
.bulka-nav {
    display: flex;
    gap: 28px;
    margin-left: 24px;
}
.bulka-nav a {
    font-size: 15px;
    text-transform: lowercase;
    letter-spacing: .04em;
    padding: 4px 0;
}
.bulka-nav a:hover { color: var(--bulka-red); }
.bulka-nav a.is-active { text-decoration: underline; text-underline-offset: 5px; }

.bulka-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
}
.bulka-phone { font-size: 14px; letter-spacing: .02em; }
.bulka-lk {
    font-family: 'PT Mono', monospace;
    font-size: 15px;
    color: var(--bulka-choco);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    text-transform: lowercase;
    letter-spacing: .04em;
}
.bulka-lk:hover { color: var(--bulka-red); }
.bulka-cart { display: inline-flex; align-items: center; position: relative; gap: 8px; }
.bulka-cart svg { display: block; }
.bulka-cart-badge {
    position: absolute;
    top: -8px;
    left: 16px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    background: var(--bulka-red);
    color: var(--bulka-cream);
    font-family: 'PT Mono', monospace;
    font-size: 11px;
    line-height: 19px;
    text-align: center;
    border-radius: 999px;
}
/* Итог корзины рядом с иконкой в шапке */
.bulka-cart-sum {
    font-family: 'PT Mono', monospace;
    font-size: 13px;
    color: var(--bulka-choco);
    white-space: nowrap;
}
@media (max-width: 900px) {
    .bulka-cart-sum { display: none; }
}

/* ── Hero («о нас») ── */
.bulka-main { min-height: 60vh; }
.bulka-hero-in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 72px 28px 88px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
}
.bulka-hero-title {
    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.95;
    text-transform: lowercase;
    padding-bottom: 46px;
}
.bulka-hero-title::after {
    content: 'май';
    display: block;
    color: var(--bulka-red);
}
.bulka-hero-tag {
    max-width: 460px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--bulka-choco);
    margin-bottom: 40px;
}
.bulka-cta {
    display: inline-block;
    background: var(--bulka-red);
    color: var(--bulka-cream) !important;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 18px 40px;
    border: 1px solid var(--bulka-red);
    transition: filter .18s ease;
}
.bulka-cta:hover { filter: brightness(.88); color: var(--bulka-cream) !important; }

.bulka-hero-img img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--bulka-sky);
}

/* ── Информация: адрес, время, связь ── */
.bulka-info {
    background: var(--bulka-sky);
}
.bulka-info-in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 56px 28px 64px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}
.bulka-info-title {
    font-size: 22px;
    text-transform: lowercase;
    margin-bottom: 16px;
}
.bulka-info-col p { font-size: 14px; line-height: 1.7; }
.bulka-info-col a { text-decoration: underline; text-underline-offset: 4px; }

/* ── Подвал — единственный, на голубом фоне ── */
.bulka-footer {
    background: var(--bulka-sky);
}
.bulka-footer-in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 28px 24px;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
}
.bulka-footer-brand img { height: 62px; width: auto; }
.bulka-footer-title {
    font-size: 17px;
    text-transform: lowercase;
    margin-bottom: 12px;
    color: var(--bulka-red);
}
.bulka-footer-col p { font-size: 13px; line-height: 1.7; margin: 0 0 6px; }
.bulka-footer-col a { text-decoration: underline; text-underline-offset: 4px; }
/* Иконки соцсетей: тонкие, в стиле сайта */
.bulka-socials { display: flex; gap: 12px; margin-top: 14px; }
.bulka-social {
    width: 36px;
    height: 36px;
    border: 1px solid var(--bulka-choco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bulka-choco);
    transition: all .18s ease;
}
.bulka-social svg { width: 17px; height: 17px; }
.bulka-social:hover { color: var(--bulka-red); border-color: var(--bulka-red); }
.bulka-footer-req { font-size: 11px; line-height: 1.6; color: var(--nbc-text-light); }
.bulka-footer-copy {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 28px 28px;
    font-size: 11px;
    color: var(--nbc-text-light);
}

/* ── Корзина в липкой полосе категорий (появляется, когда шапка уехала) ── */
.bulka-nav-cart {
    display: none;
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--bulka-choco);
    background: none;
    border: none;
    padding: 4px;
    font-family: 'PT Mono', monospace;
}
.bulka-nav-cart svg { display: block; }
.bulka-nav-cart .bulka-cart-badge,
.bulka-nav-cart .bulka-cart-sum { display: inline; }
body.bulka-scrolled .bulka-nav-cart { display: inline-flex; }
body.bulka-scrolled.bulka-cart-open .bulka-nav-cart { visibility: hidden; }

/* ── Полоса категорий: карусель со стрелками (десктоп) ──
   Названия не наезжают на мини-корзину: у ленты справа резерв под неё,
   стрелки рисует bulka.js, когда лента реально скроллится. */
@media (min-width: 769px) {
    body .nbc-catalog-nav-inner { padding-right: 120px; }

    /* Пункты «прерываются» до стрелок: маска-затухание с той стороны,
       куда есть куда листать (классы can-prev/can-next вешает bulka.js). */
    body.bulka-nav-can-prev .nbc-catalog-nav-inner {
        -webkit-mask-image: linear-gradient(to right, transparent 48px, #000 60px);
        mask-image: linear-gradient(to right, transparent 48px, #000 60px);
    }
    body.bulka-nav-can-next .nbc-catalog-nav-inner {
        -webkit-mask-image: linear-gradient(to left, transparent 88px, #000 104px);
        mask-image: linear-gradient(to left, transparent 88px, #000 104px);
    }
    body.bulka-nav-can-prev.bulka-nav-can-next .nbc-catalog-nav-inner {
        -webkit-mask-image: linear-gradient(to right, transparent 48px, #000 60px),
                            linear-gradient(to left, transparent 140px, #000 160px);
        mask-image: linear-gradient(to right, transparent 48px, #000 60px),
                    linear-gradient(to left, transparent 140px, #000 160px);
    }

    .bulka-nav-arrows {
        display: none;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    body.bulka-nav-overflow .bulka-nav-arrows { display: block; }
    .bulka-nav-arrow {
        pointer-events: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(240, 238, 233, .92);
        border: 1px solid rgba(62, 52, 47, .35);
        color: #3E342F;
        cursor: pointer;
        z-index: 5;
    }
    .bulka-nav-arrow:hover { color: var(--bulka-red); border-color: var(--bulka-red); }
    .bulka-nav-arrow[disabled] { opacity: .25; pointer-events: none; }
    .bulka-nav-arrow svg { display: block; }
    .bulka-nav-prev { left: 8px; }
    .bulka-nav-next { right: 8px; } /* симметрично левой; мини-корзина ушла левее */
}

/* Визуально скрытый, но доступный для поисковиков и скринридеров */
.bulka-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Страница меню: витрина во всю ширину ── */
.bulka-main-menu { min-height: 70vh; }

/* ── Мобильная версия ── */
@media (max-width: 900px) {
    .bulka-header-in { padding: 5px 14px; gap: 12px; min-height: 92px; }
    .bulka-logo img { height: 82px; }
    .bulka-nav { gap: 14px; margin-left: 0; }
    .bulka-nav a { font-size: 13px; }
    .bulka-phone { display: none; }
    .bulka-header-right { gap: 14px; }

    .bulka-hero-in {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 16px 56px;
    }
    .bulka-hero-tag { margin-bottom: 30px; }
    .bulka-cta { width: 100%; text-align: center; }

    .bulka-info-in { grid-template-columns: 1fr; gap: 28px; padding: 40px 16px 48px; }

    .bulka-footer-in { grid-template-columns: 1fr; gap: 24px; padding: 36px 16px 16px; }
    .bulka-footer-brand img { height: 48px; }
}

@media (max-width: 480px) {
    .bulka-nav { gap: 12px; }
    .bulka-lk { font-size: 12px; }
}