/* ════════════════════════════════════════════════════════════════════
   KABEX — header.css
   Style dla headera zgodnego z wybranym designem ze Stitcha (2026-05-19)

   Struktura:
   1. Top utility bar (dark navy)
   2. Main header (logo + search + cart with price)
   3. Nav bar (yellow PRODUKTY button + links)
   4. Sticky behavior
   5. Mobile responsive
   ════════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ HEADER WRAPPER                                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: #fff;
    transition: box-shadow var(--t-base);
}
.header.is-sticky {
    box-shadow: 0 4px 16px rgba(20, 30, 50, .08);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 1. TOP UTILITY BAR (dark navy)                                   ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.header__topbar {
    background: var(--color-primary);           /* Kabex blue #1E5BA8 */
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--fs-xs);                    /* 12px */
    min-height: 40px;
    /* Smooth collapse podczas scrollowania (header.is-sticky chowa topbar) */
    overflow: hidden;
    max-height: 60px;
    transition: max-height 0.3s ease, min-height 0.3s ease, padding 0.3s ease;
}
/* Gdy strona przeskrolowana — chowamy topbar (zostaje tylko logo/menu/CTA) */
.header.is-sticky .header__topbar {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.header__topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-4);
    min-height: 40px;
}

.header__topbar-left,
.header__topbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-shrink: 0;
}

/* Lista oddziałów w środku top-baru */
.header__topbar-branches {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
    flex: 1 1 auto;
    justify-content: center;
}
.header__topbar-branches::-webkit-scrollbar { display: none; }

.header__topbar-branch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}
.header__topbar-branch:last-child { border-right: 0; }
.header__topbar-branch:hover { color: var(--color-accent); }

.header__topbar-branch-name {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}
.header__topbar-branch-name em {
    background: var(--color-accent);
    color: var(--color-dark);
    padding: 1px 4px;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 800;
    margin-left: 3px;
}
/* Centrala (HQ) — domek ikona po nazwie oddziału */
.header__topbar-branch-hq {
    font-size: 14px !important;
    margin-left: 4px;
    color: var(--color-accent);
    vertical-align: -2px;
}

/* Social media w topbar */
.header__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.header__socials__item { display: inline-flex; }
.header__socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.header__socials__link svg { width: 14px; height: 14px; }
.header__socials__link:hover {
    background: var(--color-accent);
    color: var(--color-dark);
}
@media (max-width: 1100px) {
    .header__socials { display: none; }
}
.header__topbar-branch-phone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
}
.header__topbar-branch:hover .header__topbar-branch-phone { color: var(--color-accent); }

@media (max-width: 1100px) {
    .header__topbar-branches { display: none; }
}

.header__topbar-item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: default;
}
.header__topbar-item svg {
    opacity: .65;
    flex-shrink: 0;
}

.header__topbar-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
}
.header__topbar-link:hover {
    color: var(--color-accent);
}

/* Branch picker (Mój sklep: Nadarzyn ▾) */
.header__topbar-item--branch {
    cursor: pointer;
    transition: color var(--t-fast);
}
.header__topbar-item--branch:hover {
    color: var(--color-accent);
}
.header__branch-label {
    opacity: 0.7;
}
.header__branch-value {
    color: #fff;
    font-weight: 600;
}
.header__branch-caret {
    opacity: 0.6;
    transition: transform var(--t-fast);
}
.header__topbar-item--branch[aria-expanded="true"] .header__branch-caret {
    transform: rotate(180deg);
}

/* Top-bar icons (heart + cart) */
.header__topbar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.header__topbar-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-accent);
}

/* Cart badge (yellow circle z liczbą — Stitch screen) */
.header__topbar-icon--cart .header__cart-count {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-accent);            /* #F5D32E yellow z designu */
    color: var(--color-dark);
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-dark);        /* contrast border */
    box-sizing: content-box;
}
.header__topbar-icon--cart .header__cart-count[data-count="0"] {
    display: none;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 2. MAIN HEADER (białe — logo + search + cart with price)         ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.header__main {
    background: #fff;
    border-bottom: 1px solid var(--color-border-light);
}
.header__main-inner {
    display: grid;
    grid-template-columns: auto 1fr auto auto;   /* logo | search | phone | cart */
    align-items: center;
    gap: var(--sp-5);
    min-height: 96px;
    padding-block: var(--sp-4);
}
@media (max-width: 1100px) {
    .header__main-inner { grid-template-columns: auto 1fr auto; }
    .header__phone { display: none; }
}

/* Logo + tagline (vertical stack) */
.header__logo-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    flex-shrink: 0;
}
.header__logo {
    display: block;
    line-height: 1;
    overflow: visible;
}
.header__logo img,
.header__logo svg {
    max-height: 72px;
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}
.site-logo--text {
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
}
.header__tagline {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Search bar (duży, wycentrowany) */
.header__search {
    width: 100%;
    max-width: 640px;
    justify-self: center;
    margin: 0 auto;
    position: relative;
}

/* AJAX autocomplete dropdown */
.kbx-search-dd {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    max-height: 70vh;
    overflow-y: auto;
}
/* Parent też musi mieć wysoki z-index — żeby dropdown nie był ukryty przez sticky nav */
.header__search { z-index: 60; }
.kbx-search-dd[hidden] { display: none; }

.kbx-search-dd__empty {
    padding: var(--sp-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.92rem;
}
.kbx-search-dd__section { padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-border-light); }
.kbx-search-dd__section:last-of-type { border-bottom: 0; }

.kbx-search-dd__title {
    padding: 8px var(--sp-4) 6px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.kbx-search-dd__cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px var(--sp-4);
    color: var(--color-dark);
    text-decoration: none;
    font-weight: 600;
    transition: background 0.12s ease, color 0.12s ease;
}
.kbx-search-dd__cat:hover { background: var(--color-primary-tint); color: var(--color-primary); }
.kbx-search-dd__cat em {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: normal;
    font-weight: 500;
}

.kbx-search-dd__list { list-style: none; padding: 0; margin: 0; }
.kbx-search-dd__item a {
    display: grid;
    grid-template-columns: 56px 1fr auto auto;
    gap: var(--sp-3);
    align-items: center;
    padding: 10px var(--sp-4);
    color: var(--color-dark);
    text-decoration: none;
    transition: background 0.12s ease;
    position: relative;
}
.kbx-search-dd__item a:hover,
.kbx-search-dd__item.is-active a { background: var(--color-bg-alt); }

.kbx-search-dd__thumb {
    width: 56px; height: 56px;
    background: var(--color-bg-alt);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kbx-search-dd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kbx-search-dd__thumb .material-symbols-outlined { color: var(--color-text-light); }

.kbx-search-dd__body { min-width: 0; }
.kbx-search-dd__body strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.kbx-search-dd__sku {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.kbx-search-dd__price {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-primary);
    text-align: right;
    white-space: nowrap;
}
.kbx-search-dd__price em {
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    font-style: normal;
}
.kbx-search-dd__price .woocommerce-Price-amount,
.kbx-search-dd__price bdi { color: inherit; }
.kbx-search-dd__price del { color: var(--color-text-light); font-size: 0.75rem; }
.kbx-search-dd__price ins { text-decoration: none; }

.kbx-search-dd__sale {
    background: var(--color-action, #E63946);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}

.kbx-search-dd__all {
    display: block;
    text-align: center;
    padding: var(--sp-3);
    background: var(--color-primary);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.15s ease;
}
.kbx-search-dd__all:hover { background: var(--color-primary-dark); color: #fff; }

/* PHONE — duży niebieski numer obok koszyka */
.header__phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--color-primary);
    text-decoration: none;
    padding: 8px 14px;
    transition: color 0.15s ease, background 0.15s ease;
    border: 2px solid transparent;
}
.header__phone:hover {
    color: var(--color-primary-dark);
    background: transparent;
}
.header__phone:hover .header__phone-icon {
    background: var(--color-primary);
    color: #fff;
}
.header__phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: var(--color-primary-tint);
    width: 44px;
    height: 44px;
}
.header__phone-icon svg {
    width: 28px;
    height: 28px;
}
.header__phone-num {
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.header__search-form {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--color-bg-alt);            /* #F4F6F9 */
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    overflow: hidden;
    min-height: 52px;
}
.header__search-form:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
    background: #fff;
}
.header__search-input {
    flex: 1;
    padding: 0 var(--sp-5);
    background: transparent;
    border: 0;
    outline: none;
    font-size: var(--fs-base);
    color: var(--color-text);
}
.header__search-input::placeholder {
    color: var(--color-text-muted);
    font-style: italic;
}
.header__search-btn {
    width: 60px;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--t-fast);
    flex-shrink: 0;
}
.header__search-btn:hover {
    background: var(--color-primary-dark);
}

/* Popularne tagi pod search bar (opcjonalne, ACF repeater) */
.header__search-tags {
    list-style: none;
    margin: var(--sp-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    align-items: center;
}
.header__search-tag-link {
    display: inline-block;
    padding: 2px 10px;
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    border-radius: var(--r-full);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast);
}
.header__search-tag-link:hover {
    background: var(--color-primary-tint);
    color: var(--color-primary);
}

/* "Twój koszyk" z ceną + ikoną (po prawej) */
.header__cart {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    text-decoration: none;
    color: var(--color-text);
    border-radius: var(--r-md);
    transition: background var(--t-fast);
    flex-shrink: 0;
}
.header__cart:hover {
    background: transparent;
}
.header__cart-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    line-height: 1.2;
}
.header__cart-label {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    font-weight: 500;
}
.header__cart-total {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.header__cart-total .woocommerce-Price-amount {
    font-weight: 700;
}
.header__cart-bag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-md);
    color: var(--color-primary);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.header__cart:hover .header__cart-bag {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 3. NAV BAR (białe — żółty PRODUKTY button + linki)               ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.header__nav {
    background: #fff;
    border-bottom: 1px solid var(--color-border-light);
}
.header__nav-inner {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    min-height: 56px;
}

/* Żółty button PRODUKTY ▾ — mega menu trigger */
.header__products-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-5);
    background: var(--color-primary);           /* niebieski z designu (Stitch screen) */
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 56px;
    transition: background var(--t-fast);
    flex-shrink: 0;
}
.header__products-btn:hover,
.header__products-btn[aria-expanded="true"] {
    background: var(--color-primary-dark);
}

/* Hamburger ikona w przycisku PRODUKTY */
.header__products-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}
.header__products-icon-bar {
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.header__products-label {
    line-height: 1;
}
.header__products-caret {
    opacity: 0.8;
    margin-left: 2px;
    transition: transform var(--t-fast);
}
.header__products-btn[aria-expanded="true"] .header__products-caret {
    transform: rotate(180deg);
}

/* Lista linków (MARKI ▾ | INSPIRACJE | 🔥 PROMOCJE | PORADNIK) */
.header__nav-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}
.header__nav-item {
    position: relative;
    display: flex;
    align-items: stretch;
}
.header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-5);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-height: 56px;
    transition: color var(--t-fast), background var(--t-fast);
}
.header__nav-link:hover,
.header__nav-item.current-menu-item > .header__nav-link {
    color: var(--color-primary);
    background: var(--color-bg-alt);
}

.header__nav-caret {
    opacity: 0.6;
    margin-left: 2px;
}

/* PROMOCJE — czerwone z ikoną płomienia */
.header__nav-link--promo {
    color: var(--color-action);                 /* #E63946 red */
}
.header__nav-link--promo:hover {
    color: var(--color-action-dark);
    background: rgba(230, 57, 70, 0.06);
}
.header__nav-icon {
    color: var(--color-action);
    flex-shrink: 0;
}

/* Fallback admin link (gdy menu nie skonfigurowane) */
.header__nav-item--admin {
    margin-left: auto;
}
.header__nav-item--admin .header__nav-link {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    font-style: italic;
    text-transform: none;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 4. MOBILE TOGGLE (hamburger)                                     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.header__toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-2);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.header__toggle-bar {
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    transition: transform var(--t-base), opacity var(--t-base);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.header__toggle[aria-expanded="true"] .header__toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ 5. RESPONSIVE                                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */
@media (max-width: 1199px) {
    /* Ukryj godziny w top bar (mniej miejsca) */
    .header__topbar-item--hours { display: none; }
}

@media (max-width: 991px) {
    /* Mobile breakpoint */

    /* Top bar — ukryj wszystko poza telefonem po lewej i koszykiem po prawej */
    .header__topbar-item--branch,
    .header__topbar-link--help,
    .header__topbar-link--account,
    .header__topbar-icon:not(.header__topbar-icon--cart) {
        display: none;
    }

    /* Main header — 3-col → toggle + logo + cart icon (compact) */
    .header__main-inner {
        grid-template-columns: auto 1fr auto;
        gap: var(--sp-3);
        min-height: 64px;
    }

    .header__toggle { display: flex; order: 0; }
    .header__logo-wrap { order: 1; }
    .header__logo img { max-height: 32px; }
    .header__tagline { display: none; }

    .header__search {
        order: 4;
        grid-column: 1 / -1;
        max-width: none;
        padding-block: var(--sp-3) 0;
    }

    .header__cart {
        order: 3;
    }
    .header__cart-info {
        display: none;
    }
    .header__cart-bag {
        position: relative;
        width: 40px;
        height: 40px;
    }

    /* Nav bar — pełnoekranowy drawer */
    .header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--t-slow);
        border-top: 1px solid var(--color-border);
        background: #fff;
    }
    .header__nav.is-open {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .header__nav-inner {
        flex-direction: column;
        align-items: stretch;
        padding-block: var(--sp-3);
    }
    .header__products-btn {
        justify-content: flex-start;
        width: 100%;
    }
    .header__nav-list {
        flex-direction: column;
    }
    .header__nav-link {
        padding-block: var(--sp-4);
        border-bottom: 1px solid var(--color-border-light);
        min-height: 0;
        width: 100%;
    }
}

@media (max-width: 575px) {
    /* Bardzo wąski viewport */
    .header__topbar-item--phone .header__topbar-link {
        font-size: 11px;
    }
    .header__cart-bag {
        width: 36px;
        height: 36px;
    }
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║ SMART NAV HIDE — collapse pod main bar przy scrollu w dół       ║
   ║ JS w main.js zarządza .is-nav-hidden z cooldown 350ms + lock    ║
   ║ na zmianę kierunku (anti-pulse). CSS animuje TYLKO max-height — ║
   ║ jedna właściwość = brak konfliktów z innymi transition.            ║
   ╚══════════════════════════════════════════════════════════════════╝ */
.header__nav {
    max-height: 120px;                              /* >= rzeczywista wysokość nav (48-80px) */
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height;
}

.header.is-nav-hidden .header__nav {
    max-height: 0;
    pointer-events: none;
}

/* Respektuj prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .header__nav {
        transition: none;
    }
}