/* =====================================================================
 * 04 — HEADER
 * Преміальна шапка: deep Marian Blue + золоті акценти.
 * Sticky при скролі, smooth-transition.
 * ===================================================================== */

/* ---------- SITE HEADER WRAPPER ---------- */
.sm-premium .site-header,
.sm-premium header.site-header,
.sm-premium .header-wrapper,
.sm-premium .ekit-header {
    background: var(--sm-blue) !important;
    color: var(--sm-cream);
    border-bottom: 1px solid rgba(184, 148, 94, 0.25);
    box-shadow: var(--sm-shadow-sm);
    position: relative;
    z-index: var(--sm-z-sticky);
    transition: background var(--sm-transition-base), box-shadow var(--sm-transition-base);
}

/* ---------- TOP BAR (якщо є — над main nav) ---------- */
.sm-premium .topbar,
.sm-premium .top-bar {
    background: var(--sm-blue-deep) !important;
    color: var(--sm-cream);
    font-family: var(--sm-font-meta);
    font-size: var(--sm-text-sm);
    padding: var(--sm-space-2) 0;
    border-bottom: 1px solid rgba(184, 148, 94, 0.15);
}

.sm-premium .topbar a,
.sm-premium .top-bar a {
    color: var(--sm-cream);
    text-decoration: none;
    transition: color var(--sm-transition-base);
}

.sm-premium .topbar a:hover,
.sm-premium .top-bar a:hover {
    color: var(--sm-gold);
}

/* ---------- LOGO ---------- */
.sm-premium .site-logo,
.sm-premium .logo,
.sm-premium .custom-logo-link {
    display: inline-block;
    padding: var(--sm-space-3) 0;
    transition: opacity var(--sm-transition-base);
}

.sm-premium .site-logo:hover,
.sm-premium .logo:hover,
.sm-premium .custom-logo-link:hover {
    opacity: 0.85;
}

.sm-premium .site-logo img,
.sm-premium .logo img,
.sm-premium .custom-logo {
    max-height: 56px;
    width: auto;
}

/* ---------- HEADER LINKS / NAV ---------- */
.sm-premium .site-header a,
.sm-premium header.site-header a {
    color: var(--sm-cream);
    text-decoration: none;
    transition: color var(--sm-transition-base);
}

.sm-premium .site-header a:hover,
.sm-premium header.site-header a:hover {
    color: var(--sm-gold);
}

/* ---------- MAIN NAVIGATION (Mega Menu) ---------- */
#mega-menu-wrap-primary,
.sm-premium .main-navigation,
.sm-premium .navbar {
    background: var(--sm-blue) !important;
    border: none !important;
}

#mega-menu-wrap-primary #mega-menu-primary {
    background: transparent !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
    background: transparent !important;
    color: var(--sm-cream) !important;
    font-family: var(--sm-font-body) !important;
    font-weight: 500 !important;
    font-size: var(--sm-text-sm) !important;
    text-transform: uppercase;
    letter-spacing: var(--sm-tracking-wider);
    padding: 18px 18px !important;
    border: none !important;
    transition: color var(--sm-transition-base), background var(--sm-transition-base);
    position: relative;
}

/* Тонке золоте підкреслення на hover/active */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--sm-gold);
    transform: translateX(-50%);
    transition: width var(--sm-transition-base);
    pointer-events: none;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: rgba(184, 148, 94, 0.08) !important;
    color: var(--sm-gold) !important;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::after,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after {
    width: 60%;
}

/* ---------- DROPDOWN PANELS ---------- */
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu {
    background: var(--sm-cream) !important;
    border-top: 2px solid var(--sm-gold) !important;
    box-shadow: var(--sm-shadow-lg) !important;
    padding: var(--sm-space-3) 0 !important;
    border-radius: 0 0 var(--sm-radius-md) var(--sm-radius-md) !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
    color: var(--sm-charcoal) !important;
    font-family: var(--sm-font-body) !important;
    font-size: var(--sm-text-sm) !important;
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 20px !important;
    transition: all var(--sm-transition-base);
    background: transparent !important;
}

#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu li.mega-current-menu-item > a.mega-menu-link {
    background: var(--sm-gold-light) !important;
    color: var(--sm-blue) !important;
    padding-left: 26px !important;
}

/* ---------- HEADER SEARCH ---------- */
.sm-premium .header-search,
.sm-premium .site-header .search-form {
    position: relative;
}

.sm-premium .header-search input[type="search"],
.sm-premium .site-header .search-field {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(184, 148, 94, 0.3);
    color: var(--sm-cream);
    padding: 10px var(--sm-space-4) 10px 40px;
    border-radius: var(--sm-radius-full);
    font-family: var(--sm-font-body);
    font-size: var(--sm-text-sm);
    width: 220px;
    transition: all var(--sm-transition-base);
}

.sm-premium .header-search input[type="search"]:focus,
.sm-premium .site-header .search-field:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--sm-gold);
    width: 280px;
    outline: none;
}

.sm-premium .header-search input[type="search"]::placeholder {
    color: rgba(250, 246, 238, 0.6);
}

/* ---------- STICKY HEADER (на скролі) ---------- */
@media (min-width: 769px) {
    .sm-premium.sm-scrolled .site-header,
    .sm-premium.sm-scrolled header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(30, 58, 95, 0.96) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: var(--sm-shadow-md);
        animation: sm-slide-down 0.3s ease-out;
    }
}

@keyframes sm-slide-down {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* ---------- BREADCRUMBS ---------- */
.sm-premium .breadcrumbs,
.sm-premium .breadcrumb-nav {
    background: var(--sm-cream-soft);
    padding: var(--sm-space-3) 0;
    border-bottom: 1px solid var(--sm-gray-light);
    font-family: var(--sm-font-meta);
    font-size: var(--sm-text-sm);
    font-style: italic;
}

.sm-premium .breadcrumbs a,
.sm-premium .breadcrumb-nav a {
    color: var(--sm-blue);
    text-decoration: none;
}

.sm-premium .breadcrumbs a:hover {
    color: var(--sm-gold);
}

.sm-premium .breadcrumbs .separator {
    color: var(--sm-gold);
    margin: 0 var(--sm-space-2);
}

/* ---------- HEADER MOBILE — окремий файл 10-mobile.css ---------- */