/**
 * Header Isolation CSS
 * and, is header inandofand andis isofin of inwithandand withandand
 * and withis foris inwithandand and styles and and of-inandwith onandis
 */

/* ================================================================
   DESKTOP HEADER - Highest Specificity
   ================================================================ */

/* Top gray bar - FORCE styles */
.page-header .panel.wrapper {
    background-color: #eee !important;
    border-bottom: 1px solid #d1d1d1 !important;
    height: 30px !important;
    line-height: 30px !important;
}

.page-header .panel.header {
    max-width: 1170px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Desktop phones container */
.page-header .phones-container {
    display: flex !important;
    gap: 15px !important;
    color: #919191 !important;
    font-size: 14px !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
    font-weight: 400 !important;
    margin-left: 290px !important;
}

.page-header .phones-container .phone {
    color: #919191 !important;
    font-size: 14px !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
}

/* Header right items - FORCE gray color */
.page-header .header-right-items {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.page-header .header-right-items a,
.page-header .header-right-items a:link,
.page-header .header-right-items a:visited {
    color: #919191 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
    font-weight: 400 !important;
}

.page-header .header-right-items a:hover {
    color: #333 !important;
}

/* Exception: Logged-in user name in GREEN */
.page-header .header-right-items a[href*="profile"]:not([href*="logout"]) {
    color: #68b81d !important;
    font-weight: 600 !important;
}

.page-header .header-right-items a[href*="profile"] i {
    color: #68b81d !important;
}

/* Exception: Logout in RED */
.page-header .header-right-items a[href*="logout"] {
    color: #e74c3c !important;
    font-weight: 600 !important;
}

.page-header .header-right-items a[href*="logout"] i {
    color: #e74c3c !important;
}

/* Force icon styling */
.page-header .header-right-items a i,
.page-header .header-right-items i {
    font-size: 14px !important;
}

/* Allow inherit for non-favorite icons */
.page-header .header-right-items a i:not(.favorites-heart-icon),
.page-header .header-right-items i:not(.favorites-heart-icon) {
    color: inherit !important;
}

/* CRITICAL: Favorites heart icon styling */
.page-header .favorites-heart-icon {
 /* NOT andinis !important for inis - JS must inin andofand */
    font-size: 14px !important;
}

/* Favorites count badge */
.page-header .favorites-count {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    background: #e74c3c !important;
    color: white !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    display: none; /* Allow JS toggle */
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: bold !important;
    pointer-events: none !important;
}

.page-header .favorites-count.has-items {
    display: flex !important;
}

/* Main header with logo */
.page-header .header.content {
    max-width: 1170px !important;
    margin: 0 auto !important;
    height: 60px !important;
    padding: 0 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    background: #fff !important;
}

/* Logo */
.page-header .logo {
    position: absolute !important;
    left: 10px !important;
    top: -31px !important;
    z-index: 10 !important;
    background: #fff !important;
    padding: 12.5px 25px !important;
    border-radius: 0 0 15px 15px !important;
    box-shadow: 1px 1px 18px 0 rgba(0,0,0,.16) !important;
}

.page-header .logo img {
    display: block !important;
    width: 227px !important;
    height: 54px !important;
}

/* Navigation */
.page-header .nav-sections {
    flex: 1 !important;
    margin-left: 290px !important;
    margin-right: 20px !important;
}

.page-header .navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 30px !important;
}

.page-header .navigation li {
    list-style: none !important;
}

.page-header .navigation a,
.page-header .navigation a:link,
.page-header .navigation a:visited {
    color: #919191 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

.page-header .navigation a:hover {
    color: #333 !important;
}

/* CRITICAL: Promotions link ALWAYS red */
.page-header .navigation a.color-red,
.page-header .navigation a.color-red:link,
.page-header .navigation a.color-red:visited,
.page-header .navigation a[href*="promotions"] {
    color: #ed1c24 !important;
    font-weight: 600 !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
}

.page-header .navigation a.color-red:hover,
.page-header .navigation a[href*="promotions"]:hover {
    color: #c91820 !important;
}

/* Cart */
.page-header .minicart-wrapper {
    flex-shrink: 0 !important;
}

.page-header .minicart-wrapper a,
.page-header .minicart-wrapper a:link,
.page-header .minicart-wrapper a:visited {
    color: #919191 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-header .minicart-wrapper a i {
    color: #919191 !important;
    font-size: 14px !important;
}

.page-header .minicart-wrapper .price {
    font-size: 14px !important;
    color: #919191 !important;
    font-weight: 600 !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
}

/* Language switcher */
.page-header .language-switcher {
    display: flex !important;
    gap: 5px !important;
    align-items: center !important;
    color: #919191 !important;
    font-size: 12px !important;
}

.page-header .lang-current {
    font-weight: 600 !important;
    color: #919191 !important;
    font-size: 12px !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
}

.page-header .lang-link {
    color: #68b81d !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    font-family: 'Montserrat-G', Arial, sans-serif !important;
}

.page-header .lang-link:hover {
    color: #5ca518 !important;
}

/* Search block */
.page-header .block-search {
    position: relative !important;
    display: inline-block !important;
}

.page-header .block-search .search-toggle,
.page-header .block-search .label {
    cursor: pointer !important;
    color: #919191 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.page-header .block-search .control {
    display: none; /* Allow JS toggle */
    position: absolute !important;
    top: 30px !important;
    right: 0 !important;
    background: white !important;
    padding: 10px !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    z-index: 100 !important;
}

/* ================================================================
   MOBILE HEADER - Highest Specificity
   ================================================================ */

@media (max-width: 768px) {
    /* Hide desktop header completely */
    .page-header .panel.wrapper,
    .page-header .header.content {
        display: none !important;
    }

    /* Show products wrapper on mobile */
    .products-wrapper {
        display: block !important;
    }

    /* Force mobile header display */
    .page-header .mobile-header {
        display: block !important;
        background: white !important;
    }

    /* Mobile sticky header - FIXED at top, never hides */
    .mobile-sticky-header {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: white !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important;
        padding: 8px 10px !important;
    }

    /* CRITICAL: Hide the top part of mobile header (has logo, search, cart)
       because sticky header already shows these elements */
    .mobile-header .mobile-header-top {
        display: none !important;
    }

    .page-header .mobile-header .mobile-header-top {
        display: none !important;
    }

    /* Extra specificity to ensure mobile header top is hidden */
    header.page-header .mobile-header .mobile-header-top,
    .page-wrapper .page-header .mobile-header .mobile-header-top {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Mobile favorites heart */
    .mobile-favorites-heart {
 /* NOT andinis !important for inis - JS must inin andofand */
        font-size: 18px !important;
    }

    /* Mobile favorites count */
    .page-header .mobile-sticky-header .favorites-count {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        background: #e74c3c !important;
        color: white !important;
        border-radius: 50% !important;
        width: 14px !important;
        height: 14px !important;
        display: none; /* Allow JS toggle */
        font-size: 9px !important;
        font-weight: bold !important;
    }

    .page-header .mobile-sticky-header .favorites-count.has-items {
        display: flex !important;
    }
}

/* ================================================================
   CRITICAL: Override ANY page-specific styles
   ================================================================ */

/* Force all header elements to use correct font (except icons) */
.page-header *:not(i):not(.fa):not(.fas):not(.far):not(.fab),
.page-header *:not(i):not(.fa):not(.fas):not(.far):not(.fab)::before,
.page-header *:not(i):not(.fa):not(.fas):not(.far):not(.fab)::after {
    font-family: 'Montserrat-G', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

/* Ensure no external styles can change header background */
.page-header,
header.page-header {
    background: #fff !important;
    position: relative !important;
}

/* ================================================================
   HEADER PRODUCT ICONS - Hover Zoom Effect
   ================================================================ */

/* Restore hover zoom animation for product icons (apple, pear, etc.) */
.page-header .products.featured li .img img {
    transition: transform 0.3s ease !important;
}

.page-header .products.featured li .img img:hover {
    transform: scale(1.08) !important;
}