/* ============================================================================
   DROPDOWN & MEGA MENU FIX - CLEAN VERSION
   Fixes the white box issue on dropdowns by ensuring header color consistency
   Language dropdown: always #333 dark bg (never theme color)
   Mega menu: high z-index & isolation against product slick sliders (z-index 999)
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HEADER DROPDOWNS (NON-LANGUAGE) - MATCH HEADER BACKGROUND
   Language dropdown is handled separately in Section 2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic header dropdowns (currency, etc.) - use theme color */
.header .ps-dropdown-menu,
.navigation .ps-dropdown-menu,
.navigation__extra .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    background: var(--color-1st) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* White text for generic dropdowns */
.header .ps-dropdown-menu a,
.navigation .ps-dropdown-menu a,
.navigation__extra .ps-dropdown-menu a {
    color: #ffffff !important;
    display: block !important;
}

/* Hover state for generic dropdowns */
.header .ps-dropdown-menu a:hover,
.navigation .ps-dropdown-menu a:hover,
.navigation__extra .ps-dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. LANGUAGE DROPDOWN - ALWAYS #333 DARK BACKGROUND
   Higher specificity to override Section 1 generic rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark background for language dropdown - NEVER theme color */
.navigation__extra .ps-dropdown.language .ps-dropdown-menu,
.header .ps-dropdown.language .ps-dropdown-menu,
.ps-dropdown.language .ps-dropdown-menu {
    background-color: #333 !important;
    background: #333 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    padding: 4px 0 !important;
}

/* Compact links in language dropdown */
.ps-dropdown.language .ps-dropdown-menu li a {
    padding: 3px 8px !important;
    font-size: 12px !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* Language dropdown hover */
.ps-dropdown.language .ps-dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* Two-column layout for 8+ locales */
.ps-dropdown.language .ps-dropdown-menu.ps-dropdown-menu--two-col {
    min-width: 280px !important;
    max-width: 360px !important;
    columns: 2 !important;
    column-gap: 4px !important;
    padding: 4px 2px !important;
}

/* Three-column layout for 15+ locales */
.ps-dropdown.language .ps-dropdown-menu.ps-dropdown-menu--three-col {
    min-width: 400px !important;
    max-width: 480px !important;
    columns: 3 !important;
    column-gap: 4px !important;
    padding: 4px 2px !important;
}

/* Language list items - no break across columns */
.ps-dropdown.language .ps-dropdown-menu li {
    break-inside: avoid !important;
    background: transparent !important;
}

/* Flag images in language dropdown */
.ps-dropdown.language .ps-dropdown-menu img,
.ps-dropdown.language .ps-dropdown-menu svg.flag {
    opacity: 1 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* Language name text - always visible */
.ps-dropdown.language .ps-dropdown-menu .language-name {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. MEGA MENU & HEADER STACKING CONTEXT ISOLATION
   Ensures mega menus & dropdowns NEVER drop behind product galleries,
   slick sliders (z-index 999), or sticky page components across all themes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Elevate headers into highest root stacking context */
.tg-studio-header,
.vg-arena-header,
.header.header--standard,
.header.header--1,
.header.header--2,
.header.header--3,
.header.header--4,
header.header,
.header {
    position: relative !important;
    z-index: 10000 !important;
}

.tg-studio-header.header--sticky,
.vg-arena-header.header--sticky,
.header--sticky,
.header.header--sticky {
    z-index: 10010 !important;
}

/* Mega menu absolute positioning & top-tier z-index - Compact, tailored & zero-overflow */
body .tg-catalogue-mega,
.tg-catalogue-mega,
.menu--product-categories .menu--dropdown > li.has-mega-menu .mega-menu,
.menu-item-has-children.mega-menu > .sub-menu {
    position: absolute !important;
    z-index: 10005 !important;
    top: 100% !important;
    right: clamp(16px, 3vw, 48px) !important;
    left: clamp(16px, 3vw, 48px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    max-height: calc(100vh - 120px) !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-radius: 0 0 14px 14px !important;
    background: #ffffff !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    color: #1a202c !important;
}

/* Hover/active state visibility & pointer events */
body .tg-catalogue-menu:hover > .tg-catalogue-mega,
body .tg-catalogue-menu:focus-within > .tg-catalogue-mega,
body .tg-catalogue-menu.is-open > .tg-catalogue-mega {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 10010 !important;
}

/* Left panel: compact, crisp & balanced */
.tg-catalogue-mega__intro {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 18px 16px !important;
    background: linear-gradient(165deg, #0d1117 0%, #161c26 60%, #1f2735 100%) !important;
    border-right: 1px solid #2a3138 !important;
    color: #ffffff !important;
}

.tg-catalogue-mega__kicker {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--tg2-lime, #c7f464) !important;
    margin-bottom: 6px !important;
}

.tg-catalogue-mega__intro-brand strong {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    color: #ffffff !important;
    display: block !important;
}

.tg-catalogue-mega__intro-brand p {
    margin: 6px 0 0 !important;
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}

.tg-catalogue-mega__features {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 10px 0 !important;
    padding: 8px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.tg-feature-item {
    font-size: 11px !important;
    gap: 8px !important;
    color: #cbd5e1 !important;
}

.tg-catalogue-mega__all-link {
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
}

/* Right categories grid: 4 columns, perfectly proportional */
.tg-catalogue-mega__families {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 14px 16px !important;
    background: #ffffff !important;
}

.tg-catalogue-mega__column {
    padding-inline: 10px !important;
    border-left: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.tg-catalogue-mega__column:first-child {
    padding-left: 0 !important;
    border-left: none !important;
}

.tg-catalogue-mega__family + .tg-catalogue-mega__family {
    padding-top: 6px !important;
    border-top: 1px solid #f1f5f9 !important;
}

.tg-catalogue-mega__family-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 1px 0 3px 0 !important;
    text-decoration: none !important;
}

.category-icon-wrapper {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 4px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.category-icon {
    font-size: 11px !important;
}

.category-name-text {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    text-transform: uppercase !important;
}

.tg-family-sublist {
    margin: 2px 0 0 !important;
    display: grid !important;
    gap: 1px !important;
}

.tg-family-sublist--multicolumn {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 1px !important;
}

.tg-family-sublist li a {
    min-height: 20px !important;
    padding: 1.5px 3px !important;
    font-size: 11px !important;
    color: #475569 !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    border-radius: 3px !important;
}

.tg-family-sublist li a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    padding-left: 5px !important;
}

/* Nested sub-menus within mega menu */
.mega-menu .sub-menu,
.menu-item-has-children.mega-menu .sub-menu {
    background-color: #ffffff !important;
}

/* Text color for standard mega menu items */
.mega-menu a,
.mega-menu .sub-menu a,
.menu-item-has-children.mega-menu .sub-menu a {
    color: #1a202c !important;
}

/* Hover state for standard mega menu items */
.mega-menu a:hover,
.mega-menu .sub-menu a:hover,
.menu-item-has-children.mega-menu .sub-menu a:hover {
    color: var(--color-1st, #ff4f18) !important;
    background-color: #f8fafc !important;
}

/* Isolate product detail gallery & slick slider so z-index 999 cannot escape */
.ps-page--product,
.ps-product--detail,
.bb-product-gallery-wrapper,
.ps-product__thumbnail,
.ps-product__gallery {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure mobile header stays properly layered on mobile screens */
.header--mobile,
.vg-arena-mobile-header {
    position: relative;
    z-index: 9990 !important;
}

.header--mobile.header--sticky {
    position: fixed;
    z-index: 9995 !important;
}

/* Hide desktop mega menu on mobile viewports (< 1200px) */
@media (max-width: 1199px) {
    body .tg-catalogue-mega,
    .tg-catalogue-mega {
        display: none !important;
    }
}

/* Mobile drawer touch targets (>= 44px) */
.tg-mobile-catalogue li a {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.tg-mobile-catalogue .sub-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. RTL SUPPORT
   ═══════════════════════════════════════════════════════════════════════════ */

body[dir="rtl"] .header .ps-dropdown-menu,
body[dir="rtl"] .navigation .ps-dropdown-menu,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    text-align: right !important;
}

/* RTL language dropdown stays #333 */
body[dir="rtl"] .ps-dropdown.language .ps-dropdown-menu {
    background-color: #333 !important;
    background: #333 !important;
}

body[dir="rtl"] .ps-dropdown.language .ps-dropdown-menu img,
body[dir="rtl"] .ps-dropdown.language .ps-dropdown-menu svg.flag {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. REMOVE WHITE BOX ARTIFACTS
   Exclude language dropdown - it uses #333 from Section 2
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic dropdowns: remove white box artifacts */
.header .ps-dropdown:not(.language) ul,
.navigation .ps-dropdown:not(.language) ul,
.navigation__extra .ps-dropdown:not(.language) ul {
    background: transparent !important;
}

/* Remove any default white backgrounds from list items (non-language) */
.header .ps-dropdown:not(.language) .ps-dropdown-menu li,
.navigation .ps-dropdown:not(.language) .ps-dropdown-menu li,
.navigation__extra .ps-dropdown:not(.language) .ps-dropdown-menu li {
    background: transparent !important;
}