/* =========================================
   1. ПУЛЬТ УПРАВЛІННЯ (ЗМІННІ, КОЛЬОРИ, ШРИФТИ)
========================================= */
:root {
    /* --- КОЛЬОРИ (COLORS) --- */
    --bg-color: #0B0B0D;       /* Tactical Black */
    --primary: #FF5A1F;        /* Signal Orange */
    --text-main: #F2F2F2;      /* Engineering White */
    --text-muted: #9AA0A6;     /* Concrete Grey */
    --border-color: #3A3F44;   /* Steel Grey */
    --line-color: rgba(242, 242, 242, 0.1); 
    --mega-menu-bg: #000000;   /* ЧИСТО ЧОРНИЙ фон відкритого меню */

    /* --- РОЗМІРИ ТА СІТКА (LAYOUT) --- */
    --grid-offset: 60px; 
    --header-height: 100px;
    --header-height-scrolled: 65px;
    --max-width: 1600px; 

    /* ==========================================
       ГЛОБАЛЬНІ ШРИФТИ ТА ІКОНКИ 
       ========================================== */
    --font-main: 'e-UkraineHead', Arial, sans-serif;
    --font-base-size: 18px;    /* Глобальний текст для всього сайту */
    --font-small-size: 14px;   /* Дрібний текст (кнопки, лейбли) */

    /* --- ШАПКА (Закрите меню) --- */
    --nav-font: clamp(11px, 0.95vw, 14px);   /* Гумовий текст шапки */
    --nav-icon: clamp(14px, 1.2vw, 18px); /* Гумові іконки шапки */
    
    /* --- ВІДКРИТЕ МЕГА-МЕНЮ (Тільки десктоп!) --- */
    --mega-cat: 32px;      /* ЗБІЛЬШЕНО: Головні категорії */
    --mega-sub: 26px;      /* ЗБІЛЬШЕНО: Підкатегорії */
    --mega-desc: 22px;     /* ЗБІЛЬШЕНО: Опис знизу */
    --mega-icon: 28px;     /* ЗБІЛЬШЕНО: Розмір іконок */
}

/* =========================================
   2. БАЗОВІ НАЛАШТУВАННЯ ТА ШРИФТИ (e-Ukraine Head)
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

@font-face {
    font-family: 'e-UkraineHead';
    src: url('../fonts/e-UkraineHead-Regular.woff2') format('woff2'),
         url('../fonts/e-UkraineHead-Regular.woff') format('woff'),
         url('../fonts/e-UkraineHead-Regular.otf') format('opentype'),
         url('../fonts/e-UkraineHead-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-UkraineHead';
    src: url('../fonts/e-UkraineHead-Medium.woff2') format('woff2'),
         url('../fonts/e-UkraineHead-Medium.woff') format('woff'),
         url('../fonts/e-UkraineHead-Medium.otf') format('opentype'),
         url('../fonts/e-UkraineHead-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-UkraineHead';
    src: url('../fonts/e-UkraineHead-Medium.woff2') format('woff2'),
         url('../fonts/e-UkraineHead-Medium.woff') format('woff'),
         url('../fonts/e-UkraineHead-Medium.otf') format('opentype'),
         url('../fonts/e-UkraineHead-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-UkraineHead';
    src: url('../fonts/e-UkraineHead-Bold.woff2') format('woff2'),
         url('../fonts/e-UkraineHead-Bold.woff') format('woff'),
         url('../fonts/e-UkraineHead-Bold.otf') format('opentype'),
         url('../fonts/e-UkraineHead-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'e-UkraineHead';
    src: url('../fonts/e-UkraineHead-Bold.woff2') format('woff2'),
         url('../fonts/e-UkraineHead-Bold.woff') format('woff'),
         url('../fonts/e-UkraineHead-Bold.otf') format('opentype'),
         url('../fonts/e-UkraineHead-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-main);
    font-size: var(--font-base-size); 
    overflow-x: hidden;
}
a { text-decoration: none; }


/* =========================================
   3. ГЛОБАЛЬНА СІТКА ТА ФОН (ГРІД)
========================================= */
.global-lines { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: var(--max-width); height: 100vh; pointer-events: none; }
.global-lines .line { position: absolute; top: 0; bottom: 0; width: 1px; background-color: var(--line-color); }
.global-lines .line.left { left: var(--grid-offset); }
.global-lines .line.right { right: var(--grid-offset); }

.global-dots { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: var(--max-width); height: 100vh; pointer-events: none; }
.global-dots .dot-group { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; }
.global-dots .dot-group.left { left: calc(var(--grid-offset) - 2.5px); }
.global-dots .dot-group.right { right: calc(var(--grid-offset) - 2.5px); }
.global-dots .dot-group span { width: 6px; height: 6px; background-color: var(--primary); border-radius: 50%; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 calc(var(--grid-offset) + 30px); }
.page-content { position: relative; z-index: 1; }

.page-content::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto;
    width: calc(100% - (var(--grid-offset) * 2)); max-width: calc(var(--max-width) - (var(--grid-offset) * 2));
    background-image: linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 80px 80px; background-position: center top; z-index: -1; pointer-events: none;
}


/* =========================================
   4. ДЕСКТОПНА ШАПКА (HEADER)
========================================= */
.site-header {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
    background-color: transparent; border-bottom: 1px solid var(--line-color);
    transition: height 0.4s ease, background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.site-header.scrolled {
    height: var(--header-height-scrolled);
    background-color: rgba(12, 12, 14, 0.85); backdrop-filter: blur(15px);
}

.header-container {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; max-width: var(--max-width); margin: 0 auto; position: relative;
    height: 100%; padding: 0 calc(var(--grid-offset) + 30px);
}

.logo { flex-shrink: 0; }
.logo-img { max-height: 28px; display: block; transition: max-height 0.4s ease; }
.site-header.scrolled .logo-img { max-height: 22px; }

.cross { position: absolute; width: 11px; height: 11px; z-index: 140; }
.cross::before { content: ''; position: absolute; top: 5px; left: 0; width: 11px; height: 1px; background-color: var(--primary); }
.cross::after { content: ''; position: absolute; top: 0; left: 5px; width: 1px; height: 11px; background-color: var(--primary); }
.site-header .top-cross { bottom: -6px; }
.site-header .top-cross.left { left: calc(var(--grid-offset) - 5px); }
.site-header .top-cross.right { right: calc(var(--grid-offset) - 5px); }
.mega-menu .bottom-cross { bottom: -6px; }
.mega-menu .bottom-cross.left { left: calc(var(--grid-offset) - 5px); }
.mega-menu .bottom-cross.right { right: calc(var(--grid-offset) - 5px); }


/* =========================================
   5. НАВІГАЦІЯ ТА КНОПКИ (ДЕСКТОП)
========================================= */
.main-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(8px, 1.5vw, 30px) !important;
    padding: 0 clamp(5px, 1vw, 15px) !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.main-nav a { color: inherit; text-decoration: none; }

.nav-item-wrapper {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    height: 100% !important; flex-wrap: nowrap !important;
}

.nav-item, .static-link {
    position: relative !important; color: var(--text-main) !important; font-weight: 500 !important;
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 8px !important; flex-wrap: nowrap !important; white-space: nowrap !important;
}

.nav-item-content {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    gap: 8px !important; flex-wrap: nowrap !important; white-space: nowrap !important; flex-shrink: 0 !important; 
}

.nav-item i.arrow-lvl-1 {
    font-size: clamp(7px, 0.7vw, 9px) !important; color: var(--primary) !important;
    transition: transform 0.3s ease !important; flex-shrink: 0 !important; margin-left: 0 !important; 
}

.nav-item-wrapper.show-mega .mega-trigger i.arrow-lvl-1 { transform: rotate(180deg) !important; }

.main-nav .menu-icon {
    height: var(--nav-icon) !important; width: auto !important; object-fit: contain !important;
    flex-shrink: 0 !important; display: block !important;
}

.main-nav .cat-text {
    position: relative !important; font-size: var(--nav-font) !important;
    white-space: nowrap !important; flex-shrink: 0 !important; 
}

.main-nav .cat-text::after {
    content: '' !important; position: absolute !important; bottom: -4px !important; left: 0 !important; width: 100% !important; height: 1px !important;
    background-color: var(--primary) !important; transform: scaleX(0) !important; transition: transform 0.3s ease !important; transform-origin: left !important;
}
.nav-item:hover .cat-text::after, .static-link:hover .cat-text::after, .nav-item-wrapper.show-mega .mega-trigger .cat-text::after { transform: scaleX(1) !important; }

.header-actions {
    flex-shrink: 0 !important; display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 15px !important; flex-wrap: nowrap !important;
}

.lang-switch a { color: var(--text-main) !important; text-decoration: none !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 1px !important; white-space: nowrap !important; }

.btn-outline {
    border: 1px solid rgba(255,255,255,0.4) !important; color: #fff !important; background-color: transparent !important;
    padding: 10px 20px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px !important;
    transition: all 0.4s ease !important; white-space: nowrap !important; display: inline-flex !important;
    align-items: center !important; justify-content: center !important; text-decoration: none !important; flex-shrink: 0 !important;
}
.btn-outline:hover { background-color: #fff !important; color: var(--primary) !important; border-color: var(--primary) !important; }

.site-header.scrolled .btn-outline, .site-header.sticky .btn-outline {
    padding: 5px 12px !important; font-size: 11px !important; letter-spacing: 0.5px !important;
}


/* =========================================
   6. МЕГА МЕНЮ (ДЕСКТОП)
========================================= */
.mega-menu {
    position: absolute; top: 100%; left: 0; width: 100%; height: calc(100vh - var(--header-height));
    background-color: #000000; border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color);
    clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
    transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, visibility 0.4s ease;
    z-index: 120; display: flex; flex-direction: column; white-space: normal;
}

.site-header.scrolled .mega-menu { height: calc(100vh - var(--header-height-scrolled)); }
.nav-item-wrapper.show-mega .mega-menu { opacity: 1; visibility: visible; clip-path: inset(0 0 -15px 0); }

.mega-menu-container {
    width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 40px calc(var(--grid-offset) + 30px);
    display: grid; grid-template-columns: max-content 380px 1fr; gap: 40px; flex-grow: 1; position: relative;
}

.cats-col, .subs-col { position: relative; z-index: 10; }
.cats-col { border-right: 1px solid var(--line-color); padding-right: 30px; min-width: 200px; }

.mega-cat-item { color: #ffffff; cursor: pointer; transition: color 0.3s ease; padding: 14px 0; width: 100%; line-height: 1.3; }
.mega-cat-item .cat-text { font-size: var(--mega-cat) !important; font-weight: 700 !important; } /* ШРИФТ ЗІ ЗМІННОЇ */
.mega-cat-item-inner { display: flex; align-items: center; width: 100%; }
.cat-link { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.mega-cat-item .menu-icon, .mega-sub-item .menu-icon { height: var(--mega-icon); width: auto; }

.arrows-wrap { position: relative; display: inline-flex; align-items: center; margin-left: 8px; width: 18px; height: 12px; }
.arr-1, .arr-2, .arr-3 { position: absolute; left: 0; display: flex; align-items: center; height: 100%; font-size: 10px; }
.arr-1 { color: rgba(255,255,255,0.3); transition: color 0.3s ease; z-index: 3; }
.arr-2, .arr-3 { color: var(--primary); opacity: 0; transform: translateX(-5px); transition: all 0.3s ease; }
.arr-2 { z-index: 2; } .arr-3 { z-index: 1; }

.mega-cat-item:hover, .mega-cat-item.active { color: var(--primary); }
.mega-cat-item:hover .arr-2, .mega-cat-item.active .arr-2 { opacity: 1; transform: translateX(6px); }
.mega-cat-item:hover .arr-3, .mega-cat-item.active .arr-3 { opacity: 1; transform: translateX(12px); }

.subs-content-wrapper { height: 100%; display: flex; flex-direction: column; }
.mega-sub-list { display: none; flex-direction: column; gap: 15px; flex-grow: 1; }
.mega-sub-list.active { display: flex; }
.mega-sub-links { display: flex; flex-direction: column; gap: 15px; }

.mega-sub-item { display: inline-flex; align-items: center; gap: 10px; color: #ffffff; transition: color 0.3s ease; text-decoration: none; width: fit-content; }
.mega-sub-item .cat-text { font-size: var(--mega-sub) !important; font-weight: 500 !important; } /* ШРИФТ ЗІ ЗМІННОЇ */
.mega-sub-item i { font-size: 14px; color: rgba(255, 255, 255, 0.3); transition: transform 0.3s ease, color 0.3s ease; }
.mega-sub-item:hover { color: var(--primary); }
.mega-sub-item:hover i { color: var(--primary); transform: translateX(-4px); }

.mega-description {
    color: #aaaaaa; font-size: var(--mega-desc); line-height: 1.6; font-weight: 400; /* ШРИФТ ЗІ ЗМІННОЇ */
    margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.05);
}
.mega-description p { margin-bottom: 10px; }
.mega-description p:last-child { margin-bottom: 0; }
.mega-description strong { color: #fff; font-weight: 600; }

.img-col { position: static; }
.img-col img, .mega-preview-img {
    position: absolute; bottom: 0; right: calc(var(--grid-offset) + 30px);
    height: 95%; width: auto; max-width: 55vw;
    object-fit: contain; object-position: right bottom; z-index: 1; 
}


/* =========================================
   7. HERO SECTION (ГОЛОВНИЙ ЕКРАН)
========================================= */
.hero-section { position: relative; width: 100%; aspect-ratio: 16/9; min-height: 500px; display: flex; align-items: flex-end; background: #0a0a0a; }
.hero-video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.5) 0%, transparent 20%, transparent 80%, rgba(0,0,0,0.3) 100%),
                linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 15%, transparent 40%, transparent 50%, rgba(0,0,0,0.8) 100%);
    pointer-events: none; 
}

.hero-container {
    position: relative; z-index: 2; width: 100%; max-width: var(--max-width, 1400px);
    margin: 0 auto; padding: 0 var(--grid-offset, 40px); height: 100%;
    display: flex; align-items: flex-end; padding-bottom: clamp(50px, 8%, 120px); pointer-events: none !important;
}

.hero-content { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; gap: 40px; }
.hero-left, .hero-right { pointer-events: auto !important; }
.hero-left { margin-left: 8%; }

.hero-title { color: #ffffff; margin: 0; }
.hero-line-1, .hero-line-2 { font-size: clamp(40px, 6vw, 90px); font-weight: 700; line-height: 1.1; letter-spacing: 1px; }
.hero-line-2 { display: flex; align-items: center; gap: clamp(15px, 2.5vw, 35px); }
.text-primary { color: var(--primary, #ff4900); }

.hero-right { max-width: 300px; margin-bottom: 8px; margin-right: 6%; margin-left: auto; }
.hero-desc { 
    display: flex; 
    gap: 15px; 
}
.desc-bullet { width: 10px; height: 10px; border: 2px solid var(--primary, #ff4900); border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.hero-desc p { 
    color: #e0e0e0; 
    font-size: var(--font-base-size); 
    line-height: 1.5; 
    font-weight: 400; 
    margin: 0;
    /* Посилена тришарова чорна тінь */
    text-shadow: 
        0px 2px 4px rgba(0, 0, 0, 1),      /* Жорсткий контур біля самих літер */
        0px 4px 15px rgba(0, 0, 0, 1),     /* Щільна хмара навколо слів */
        0px 0px 35px rgba(0, 0, 0, 0.8);   /* Широке загальне затемнення фону */
}

.hero-bottom-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.15); z-index: 10; }
.hero-bottom-line .cross { position: absolute; top: 50%; width: 10px; height: 10px; }
.hero-bottom-line .cross::before, .hero-bottom-line .cross::after { content: ''; position: absolute; background: var(--primary, #ff4900); }
.hero-bottom-line .cross::before { top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); }
.hero-bottom-line .cross::after { left: 50%; top: 0; height: 100%; width: 1px; transform: translateX(-50%); }
.hero-bottom-line .cross.left { left: var(--grid-offset, 40px); margin-left: 1px; transform: translate(-50%, -50%); }
.hero-bottom-line .cross.right { right: var(--grid-offset, 40px); margin-right: 1px; transform: translate(50%, -50%); }


/* =========================================
   8. ФІРМОВА КНОПКА З МАСКОЮ (НЕОН)
========================================= */
.btn-wrapper { position: relative; width: clamp(160px, 16vw, 250px); aspect-ratio: 500 / 120; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-top: 5px; transition: transform 0.15s ease; }
.btn-inner-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% 70.83%, 93% 100%, 0 100%); overflow: hidden; z-index: 0; }
.btn-blur { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.btn-bg { fill: url(#btnGradient); stroke: rgba(255, 255, 255, 0.3); stroke-width: 2; transition: fill 0.3s ease, stroke 0.3s ease; }
.neon-corner { fill: none; stroke: var(--primary, #ff4900); stroke-width: 4px; filter: drop-shadow(0 0 10px rgba(255, 94, 0, 1)); transition: stroke-width 0.2s ease, filter 0.2s ease; }
.btn-content { position: relative; z-index: 10; display: flex; align-items: center; color: white; text-transform: uppercase; font-size: clamp(10px, 1.1vw, 16px); font-weight: 700; letter-spacing: 1px; transition: transform 0.15s ease; }
.btn-wrapper:hover .btn-bg { fill: url(#btnGradientHover); stroke: rgba(255, 255, 255, 0.5); }
.btn-wrapper:active { transform: scale(0.95); filter: brightness(1.2); }
.btn-wrapper:active .btn-bg { fill: url(#btnGradientActive); }
.btn-wrapper:active .neon-corner { stroke-width: 5px; filter: drop-shadow(0 0 15px rgba(255, 94, 0, 1)); }
.glint { position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: skewX(-25deg); transition: left 0.3s ease-in-out; pointer-events: none; }
.btn-wrapper:hover .glint { left: 150%; transition: left 0.4s ease-out; }


/* =========================================
   9. МОБІЛЬНЕ МЕНЮ ТА НАВІГАЦІЯ
========================================= */
.mobile-cat-info { display: none !important; }
.nav-title { display: flex !important; align-items: center; gap: 8px; }
.header-icons-wrap { display: flex; align-items: center; gap: 15px; }
.mobile-nav-group.open > .mobile-nav-header, .mobile-nav-group.open > .mobile-nav-header *, .mobile-nav-link:active, .mobile-nav-link:active *, .mobile-nav-link.active, .mobile-nav-link.active *, .mobile-nav-item:active, .mobile-nav-item.active { color: #ffffff !important; }
.mob-link-icon { display: inline-flex !important; align-items: center; justify-content: center; margin-left: 8px; color: var(--primary) !important; font-size: 14px; opacity: 0; transform: scale(0.5); transition: all 0.3s ease; text-decoration: none !important; pointer-events: none; }
.mob-link-icon::after { display: none !important; }
.mobile-nav-group.open > .mobile-nav-header .mob-link-icon { opacity: 1; transform: scale(1); pointer-events: auto; }
i.arrow-mob { transform: rotate(0deg) !important; transition: transform 0.3s ease !important; color: var(--text-muted) !important; }
.mobile-nav-group.open > .mobile-nav-header i.arrow-mob { transform: rotate(180deg) !important; color: var(--primary) !important; }
.mobile-nav-header .nav-title span:last-of-type, .mobile-nav-link span:last-child, .mobile-nav-item .cat-text { position: relative; display: inline-block; padding-bottom: 4px; text-decoration: none !important; }
.mobile-nav-header .nav-title span:last-of-type::after, .mobile-nav-link span:last-child::after, .mobile-nav-item .cat-text::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary) !important; transition: width 0.3s ease; }
.mobile-nav-group.open > .mobile-nav-header .nav-title span:last-of-type::after, .mobile-nav-link:hover span:last-child::after, .mobile-nav-link.active span:last-child::after, .mobile-nav-link:active span:last-child::after, .mobile-nav-item:hover .cat-text::after, .mobile-nav-item.active .cat-text::after { width: 100%; }


/* =========================================
   10. COOKIE БАНЕР ТА СПОВІЩЕННЯ
========================================= */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: clamp(150px, 20vh, 240px);
    background-color: #ffffff;
    color: #000000;
    padding: clamp(24px, 3vh, 42px) clamp(40px, 6vw, 96px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    z-index: 100000;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.14);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-content { flex: 1 1 auto; max-width: 980px; }
.cookie-content p { font-size: clamp(15px, 1.1vw, 18px); line-height: 1.55; max-width: 100%; margin: 0; }
.cookie-content a { color: var(--primary); text-decoration: underline; }
.btn-accept { flex: 0 0 auto; min-width: 150px; background-color: #000; color: #fff; border: none; padding: 16px 36px; font-weight: 600; cursor: pointer; margin-left: 0; transition: 0.3s; }
.btn-accept:hover { background-color: var(--primary); }
.cookie-banner .btn-close { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; font-size: 30px; line-height: 1; cursor: pointer; color: #666; margin-left: 0; }


/* =========================================
   11. ФОРМА ЗВОРОТНОГО ЗВ'ЯЗКУ
========================================= */
.side-panel-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 11, 13, 0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: 0.4s ease; }
.side-panel-overlay.is-visible { opacity: 1; visibility: visible; }
.side-panel { position: fixed; top: 0; right: -100%; width: 100%; max-width: 450px; height: 100vh; background-color: #ffffff; color: #000000; box-shadow: -5px 0 25px rgba(0,0,0,0.5); overflow-y: auto; transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.side-panel.is-open { right: 0; }
.side-panel-content { padding: 50px 40px; }
.side-panel-close { position: absolute; top: 20px; right: 30px; background: none; border: none; font-size: 36px; color: #666; cursor: pointer; transition: color 0.3s; line-height: 1; }
.side-panel-close:hover { color: var(--primary); }
.side-panel h2 { font-size: 26px; font-weight: 700; margin-bottom: 30px; color: #000; text-transform: uppercase; letter-spacing: 1px; }
.side-panel .form-group { margin-bottom: 20px; }
.side-panel .form-row { display: flex; gap: 15px; }
.side-panel .form-row .form-group { flex: 1; }
.side-panel label { display: block; font-size: 11px; font-weight: 600; color: #666; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.side-panel input, .side-panel select, .side-panel textarea { width: 100%; background: #f7f7f7; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px 15px; font-size: var(--font-small-size); color: #000; font-family: inherit; transition: border-color 0.3s; }
.side-panel input:focus, .side-panel select:focus, .side-panel textarea:focus { outline: none; border-color: var(--primary); background: #ffffff; }
.captcha-row { display: flex; gap: 15px; align-items: center; }
#captcha-image { height: 44px; border-radius: 4px; border: 1px solid #e0e0e0; cursor: pointer; object-fit: cover; }
.captcha-row input { flex: 1; }
.side-panel .form-submit-btn { width: 100%; background-color: #000000; color: #ffffff; border: none; border-radius: 4px; padding: 16px; font-size: var(--font-small-size); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; margin-top: 15px; }
.side-panel .form-submit-btn:hover { background-color: var(--primary); }
.side-panel .form-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.toast-notification { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; color: #000000; padding: 18px 40px; display: flex; justify-content: space-between; align-items: center; transform: translateY(150%); opacity: 0; pointer-events: none; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease; box-shadow: 0 -5px 20px rgba(0,0,0,0.08); border-top: 3px solid var(--primary); }
.toast-notification.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast-content p { font-size: 15px; font-weight: 600; margin: 0; }
.toast-notification .btn-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #000; transition: color 0.3s; }
.toast-notification .btn-close:hover { color: var(--primary); }

@media (max-width: 1024px) {
    .cookie-banner {
        padding: 24px 32px;
        gap: 24px;
    }
    .cookie-content { max-width: none; }
    .cookie-content p { font-size: 15px; }
    .btn-accept { min-width: 130px; padding: 14px 28px; }
}

@media (max-width: 768px) {
    .side-panel { max-width: 100%; }
    .side-panel-content { padding: 40px 25px; }
    .side-panel .form-row { flex-direction: column; gap: 0; }
    .cookie-banner {
        min-height: 22vh;
        min-height: 22dvh;
        max-height: 45vh;
        max-height: 45dvh;
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 18px;
        overflow-y: auto;
    }
    .cookie-content { max-width: none; }
    .cookie-content p { padding-right: 38px; font-size: 14px; line-height: 1.5; }
    .btn-accept { width: 100%; min-width: 0; padding: 14px 20px; }
    .cookie-banner .btn-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; font-size: 28px; }
    .toast-notification { padding: 15px 25px; flex-direction: column; gap: 15px; text-align: center; }
    .toast-notification .btn-close { position: absolute; top: 10px; right: 15px; margin: 0; font-size: 24px; }
}


/* =========================================
   12. ФІКС ІЄРАРХІЇ
========================================= */
.global-lines, .global-dots { z-index: 90 !important; opacity: 1 !important; visibility: visible !important; }
.mobile-menu-overlay { z-index: 95 !important; top: 0 !important; height: 100vh !important; }
.site-header { z-index: 100 !important; }
.header-container::before, .header-container::after { content: ''; position: absolute; top: 0; bottom: 0; width: 1px; background-color: var(--line-color); pointer-events: none; z-index: 0; }
.header-container::before { left: var(--grid-offset); }
.header-container::after { right: var(--grid-offset); }

@media (max-width: 1024px) {
    .mobile-menu-overlay { top: var(--header-height) !important; height: calc(100vh - var(--header-height)) !important; }
    .site-header.scrolled ~ .mobile-menu-overlay { top: var(--header-height-scrolled) !important; height: calc(100vh - var(--header-height-scrolled)) !important; }
    .mobile-menu-inner { padding-top: 100px !important; }
}

.site-footer { position: relative; z-index: 92 !important; }
.side-panel-overlay { z-index: 10005 !important; }
.side-panel { z-index: 10010 !important; }
.toast-notification { z-index: 10015 !important; }


/* ==========================================
   13. TEXT PAGES (Сторінки Політики тощо)
========================================== */
.text-page-section { padding-top: 150px; padding-bottom: 100px; min-height: 100vh; }
.text-page-title { font-size: 32px; font-weight: 700; margin-bottom: 40px; color: var(--text-main); text-transform: uppercase; letter-spacing: 1px; }
.text-page-content { color: var(--text-muted); font-size: var(--font-base-size); line-height: 1.8; font-weight: 300; max-width: 900px; margin: 0 auto 0 0; }
.text-page-content h2, .text-page-content h3 { color: var(--text-main); margin-top: 40px; margin-bottom: 20px; font-weight: 600; }
.text-page-content p { margin-bottom: 20px; font-size: var(--font-base-size); }
.text-page-content ul { margin-bottom: 20px; padding-left: 20px; }
.text-page-content li { margin-bottom: 10px; position: relative; }
.text-page-content a { color: var(--primary); text-decoration: none; transition: color 0.3s ease; }
.text-page-content a:hover { color: var(--text-main); }

@media (max-width: 768px) {
    .text-page-section { padding-top: 120px; padding-bottom: 80px; }
    .text-page-title { font-size: 24px; margin-bottom: 30px; }
}





/* =========================================
   ГЛОБАЛЬНІ СТИЛІ СВІТЛОЇ ТЕМИ (ОНОВЛЕНО)
========================================= */

/* === 1. ТІЛЬКИ ГОЛОВНА СТОРІНКА (ПОВНІСТЮ СВІТЛА) === */
/* Ми знаходимо головну сторінку за наявністю унікального класу .home-protection-section */
body[data-theme="milky"]:has(.home-protection-section) { background-color: #F2F2F2 !important; }
body[data-theme="milky"]:has(.home-protection-section) section:not(.hero-section):not(.site-header):not(.site-footer) { background-color: #F2F2F2 !important; }
body[data-theme="milky"]:has(.home-protection-section) .protection-card, 
body[data-theme="milky"]:has(.home-protection-section) .platform-card, 
body[data-theme="milky"]:has(.home-protection-section) .bento-card, 
body[data-theme="milky"]:has(.home-protection-section) .t3000-slide-inner,
body[data-theme="milky"]:has(.home-protection-section) .stat-box { background-color: #ffffff !important; border-color: #dddddd !important; }

body[data-theme="milky"]:has(.home-protection-section) h2:not(.hero-section h2), 
body[data-theme="milky"]:has(.home-protection-section) h3:not(.hero-section h3), 
body[data-theme="milky"]:has(.home-protection-section) h4:not(.hero-section h4),
body[data-theme="milky"]:has(.home-protection-section) .card-title, 
body[data-theme="milky"]:has(.home-protection-section) .platform-card-title,
body[data-theme="milky"]:has(.home-protection-section) .about-title, 
body[data-theme="milky"]:has(.home-protection-section) .about-main-text,
body[data-theme="milky"]:has(.home-protection-section) .slide-title, 
body[data-theme="milky"]:has(.home-protection-section) .catalog-title { color: #111111 !important; }

body[data-theme="milky"]:has(.home-protection-section) p:not(.hero-desc p), 
body[data-theme="milky"]:has(.home-protection-section) .card-desc, 
body[data-theme="milky"]:has(.home-protection-section) .slide-desc,
body[data-theme="milky"]:has(.home-protection-section) .platforms-desc, 
body[data-theme="milky"]:has(.home-protection-section) .feature-desc,
body[data-theme="milky"]:has(.home-protection-section) .card-subtitle, 
body[data-theme="milky"]:has(.home-protection-section) .spec-label,
body[data-theme="milky"]:has(.home-protection-section) .stat-text { color: #555555 !important; }

body[data-theme="milky"]:has(.home-protection-section) .spec-val:not(.orange) { color: #111 !important; }
body[data-theme="milky"]:has(.home-protection-section) .btn-outline-white { color: #111 !important; border-color: #111 !important; }


/* === 2. ВСІ ІНШІ СТОРІНКИ (БІЛІ ПОЛЯ, ТЕМНИЙ ЦЕНТР) === */

/* Даємо body світлий колір — це будуть наші білі поля по боках */
body[data-theme="milky"]:not(:has(.home-protection-section)) {
    background-color: #F2F2F2 !important;
}

/* Відключаємо темні фони у всіх секцій, щоб вони стали прозорими */
body[data-theme="milky"]:not(:has(.home-protection-section)) section:not(.site-header):not(.site-footer) {
    background-color: transparent !important;
}

/* МАГІЯ: Фарбуємо простір рівно між вертикальними лініями у фірмовий чорний! */
body[data-theme="milky"]:not(:has(.home-protection-section)) .page-content::before {
    background-color: #0B0B0D !important;
    z-index: -2;
}

/* === 3. СПІЛЬНІ ФІКСИ === */
/* Текст на відео жорстко захищений */
body[data-theme="milky"] .hero-desc p { color: #e0e0e0 !important; }

/* Лінії сітки робимо контрастними (темно-сірими), щоб вони гарно відділяли білі поля від чорного центру */
body[data-theme="milky"] .global-lines .line { background-color: rgba(0,0,0,0.15) !important; }
body[data-theme="milky"] .hero-bottom-line { border-color: rgba(0,0,0,0.15) !important; }

/* === 4. ТОЧКОВІ ФІКСИ ДЛЯ ШАПКИ ТА CTA-БЛОКУ === */

/* 1. Робимо шапку на всіх "внутрішніх" сторінках гарантовано темною на 100% ширини, 
   щоб по боках не просвічувались білі смуги фону */
body[data-theme="milky"]:not(:has(.home-protection-section)) .site-header {
    background-color: #0B0B0D !important; 
}

/* =========================================
   БРОНЕБІЙНИЙ ФІКС ДЛЯ БЛОКУ ЗВ'ЯЗКУ (CTA)
========================================= */
body[data-theme="milky"] .category-cta-section {
    background-color: #F2F2F2 !important;
    z-index: 30 !important; /* Залізобетонно піднімаємо над чорною колонкою */
}

/* Підкладаємо нескінченний світлий фон рівно під цей блок */
body[data-theme="milky"] .category-cta-section::before {
    content: '';
    position: absolute;
    top: 0; 
    left: -100%; /* Виходимо далеко за межі екрану вліво */
    width: 300%; /* Розтягуємо фон із запасом на весь монітор */
    height: 100%;
    background-color: #F2F2F2 !important;
    z-index: -1; /* Ховаємо цей фон під помаранчеву кнопку */
}



/* =========================================
   СТИЛЬНИЙ ПЕРЕМИКАЧ ТЕМИ З ІКОНКАМИ
========================================= */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 28px;
    margin: 0;
}

/* 1. БЕЗПЕЧНО ховаємо чекбокс (він прозорий, але технічно існує і клікається) */
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Трек (фон) перемикача */
.theme-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #1a1a1c;
    transition: background-color 0.4s ease, border-color 0.4s ease;
    border-radius: 34px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7px;
}

/* 2. Іконки всередині треку (МАГІЯ: забороняємо їм перехоплювати клік) */
.theme-switch .slider i {
    font-size: 12px;
    z-index: 1;
    pointer-events: none; /* Тепер клік проходить крізь них прямо на кнопку */
}
/* Кольори іконок у темній темі */
.theme-switch .icon-sun { color: #555; }
.theme-switch .icon-moon { color: #ffffff; }

/* Сам кружечок, який їздить */
.theme-switch .slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--primary, #ff4900);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}

/* === СТАН ДЛЯ СВІТЛОЇ ТЕМИ (MILKY) === */
body[data-theme="milky"] .theme-switch .slider {
    background-color: #e0e0e0;
    border-color: #cccccc;
}

/* Кольори іконок у світлій темі */
body[data-theme="milky"] .theme-switch .icon-sun { color: #ff5e00; }
body[data-theme="milky"] .theme-switch .icon-moon { color: #aaa; }

body[data-theme="milky"] .theme-switch .slider::before {
    transform: translateX(28px);
    background-color: #111111;
}

/* =========================================
   КОМПАКТНА ДЕСКТОПНА ШАПКА: ТЕМА + МОВА НАД CTA
========================================= */
.header-tools {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    flex-shrink: 0 !important;
}

.header-tools .theme-switch-wrapper {
    margin-right: 0 !important;
}

@media (min-width: 1025px) {
    .site-header .header-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 132px !important;
        transition: width 0.4s ease, gap 0.4s ease !important;
    }

    .site-header .header-tools {
        width: 100% !important;
        min-height: 24px !important;
        gap: 15px !important;
        transition: gap 0.4s ease, min-height 0.4s ease !important;
    }

    .site-header .theme-switch {
        width: 40px !important;
        height: 22px !important;
        transition: width 0.4s ease, height 0.4s ease !important;
    }

    .site-header .theme-switch .slider {
        padding: 0 5px !important;
        transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.4s ease !important;
    }

    .site-header .theme-switch .slider i {
        font-size: 9px !important;
        transition: font-size 0.4s ease, color 0.4s ease !important;
    }

    .site-header .theme-switch .slider::before {
        width: 16px !important;
        height: 16px !important;
        left: 2px !important;
        bottom: 2px !important;
        transition: width 0.4s ease, height 0.4s ease, left 0.4s ease, bottom 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease !important;
    }

    body[data-theme="milky"] .site-header .theme-switch .slider::before {
        transform: translateX(18px) !important;
    }

    .site-header .lang-switch a {
        font-size: 11px !important;
        line-height: 1 !important;
        letter-spacing: 0.8px !important;
        transition: font-size 0.4s ease, letter-spacing 0.4s ease, color 0.3s ease !important;
    }

    .site-header .desktop-btn {
        width: 100% !important;
        min-height: 28px !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.55px !important;
        text-align: center !important;
    }

    .site-header.scrolled .header-actions,
    .site-header.sticky .header-actions {
        gap: 4px !important;
        width: 122px !important;
    }

    .site-header.scrolled .header-tools,
    .site-header.sticky .header-tools {
        gap: 14px !important;
        min-height: 20px !important;
    }

    .site-header.scrolled .theme-switch,
    .site-header.sticky .theme-switch {
        width: 36px !important;
        height: 20px !important;
    }

    .site-header.scrolled .theme-switch .slider,
    .site-header.sticky .theme-switch .slider {
        padding: 0 4px !important;
    }

    .site-header.scrolled .theme-switch .slider i,
    .site-header.sticky .theme-switch .slider i {
        font-size: 8px !important;
    }

    .site-header.scrolled .theme-switch .slider::before,
    .site-header.sticky .theme-switch .slider::before {
        width: 14px !important;
        height: 14px !important;
    }

    body[data-theme="milky"] .site-header.scrolled .theme-switch .slider::before,
    body[data-theme="milky"] .site-header.sticky .theme-switch .slider::before {
        transform: translateX(16px) !important;
    }

    .site-header.scrolled .desktop-btn,
    .site-header.sticky .desktop-btn {
        min-height: 24px !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
    }
}


/* =========================================
   ДЕСКТОПНА ШАПКА: БЕЗПЕЧНЕ СТИСКАННЯ МЕНЮ
   Після додавання розділу "Міжнародна співпраця"
   Працює тільки на десктопі, мобільне меню не змінює.
========================================= */
@media (min-width: 1025px) {
    :root {
        --nav-font: clamp(13px, 1.05vw, 17px);
        --nav-icon: clamp(14px, 1.1vw, 19px);
    }

    .site-header .header-container {
        gap: clamp(12px, 1.2vw, 24px) !important;
        overflow: visible !important;
    }

    .site-header .logo {
        flex: 0 0 auto !important;
    }

    .site-header .header-actions {
        flex: 0 0 132px !important;
        width: 132px !important;
        max-width: 132px !important;
        margin-left: 0 !important;
    }

    .site-header .main-nav {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        gap: clamp(22px, 1.8vw, 44px) !important;
        padding-left: clamp(4px, 0.45vw, 12px) !important;
        padding-right: clamp(4px, 0.45vw, 12px) !important;
        overflow: visible !important;
    }

    .site-header .main-nav > .nav-item-wrapper,
    .site-header .main-nav > .static-link {
        min-width: 0 !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger,
    .site-header .main-nav > .static-link,
    .site-header .main-nav > .nav-item-wrapper > .nav-item > .nav-item-content,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger > .nav-item-content {
        min-width: 0 !important;
        gap: clamp(5px, 0.5vw, 9px) !important;
        transition: gap 0.35s ease !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item .cat-text,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger .cat-text,
    .site-header .main-nav > .static-link .cat-text {
        font-size: var(--nav-font) !important;
        letter-spacing: 0 !important;
        transition: font-size 0.35s ease, letter-spacing 0.35s ease, color 0.3s ease !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item .menu-icon,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger .menu-icon,
    .site-header .main-nav > .static-link .menu-icon {
        height: var(--nav-icon) !important;
        transition: height 0.35s ease !important;
    }

    .site-header .mega-menu .mega-cat-item .cat-text {
        font-size: var(--mega-cat) !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
    }

    .site-header .mega-menu .mega-sub-item .cat-text {
        font-size: var(--mega-sub) !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
    }

    .site-header .mega-menu .mega-description {
        font-size: var(--mega-desc) !important;
    }

    .site-header .mega-menu .mega-cat-item .menu-icon,
    .site-header .mega-menu .mega-sub-item .menu-icon {
        height: var(--mega-icon) !important;
    }

    .site-header .mega-menu .cats-col,
    .site-header .mega-menu .subs-col {
        position: relative !important;
        z-index: auto !important;
    }

    .site-header .mega-menu .cats-col {
        border-right: none !important;
    }

    .site-header .mega-menu .cats-col::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        background: var(--line-color);
        z-index: 0;
        pointer-events: none;
    }

    .site-header .mega-menu .cats-col > *,
    .site-header .mega-menu .subs-col > * {
        position: relative;
        z-index: 4;
    }

    .site-header .mega-menu .img-col img,
    .site-header .mega-menu .mega-preview-img {
        z-index: 2 !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    :root {
        --nav-font: clamp(11px, 0.9vw, 13px);
        --nav-icon: clamp(12px, 0.9vw, 14px);
    }

    .site-header .main-nav {
        gap: clamp(12px, 1vw, 20px) !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger,
    .site-header .main-nav > .static-link,
    .site-header .main-nav > .nav-item-wrapper > .nav-item > .nav-item-content,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger > .nav-item-content {
        gap: 4px !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item .cat-text,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger .cat-text,
    .site-header .main-nav > .static-link .cat-text {
        letter-spacing: -0.04px !important;
    }
}

@media (min-width: 1441px) and (max-width: 1600px) {
    :root {
        --nav-font: clamp(12px, 0.8vw, 13px);
        --nav-icon: clamp(13px, 0.85vw, 14px);
    }

    .site-header .header-container {
        gap: 12px !important;
    }

    .site-header .main-nav {
        gap: clamp(12px, 0.9vw, 16px) !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger,
    .site-header .main-nav > .static-link,
    .site-header .main-nav > .nav-item-wrapper > .nav-item > .nav-item-content,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger > .nav-item-content {
        gap: 4px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1180px) {
    :root {
        --nav-font: clamp(10px, 0.85vw, 12px);
        --nav-icon: clamp(11px, 0.85vw, 13px);
    }

    .site-header .header-container {
        gap: 6px !important;
    }

    .site-header .main-nav {
        gap: clamp(12px, 1.4vw, 20px) !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }

    .site-header .main-nav > .nav-item-wrapper > .nav-item,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger,
    .site-header .main-nav > .static-link,
    .site-header .main-nav > .nav-item-wrapper > .nav-item > .nav-item-content,
    .site-header .main-nav > .nav-item-wrapper > .mega-trigger > .nav-item-content {
        gap: 4px !important;
    }

    .site-header .header-actions {
        flex-basis: 126px !important;
        width: 126px !important;
        max-width: 126px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1600px) {
    .site-header .main-nav > .nav-item-wrapper + .nav-item-wrapper .nav-item-content > .menu-icon {
        margin-left: 4px !important;
    }
}




/* =========================================
   ФІКС КЛІКАБЕЛЬНОСТІ ЛОГО В ШАПЦІ
========================================= */
.site-header .logo {
    position: relative !important;
    z-index: 200 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.site-header .logo-img {
    pointer-events: none !important;
}

.site-footer .footer-logo {
    position: relative !important;
    z-index: 10 !important;
    display: inline-flex !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.site-footer .footer-logo img {
    pointer-events: none !important;
}