/* ==========================================================================
   MASTER HEADER STYLESHEET (css-header.css)
   Organized: Logo, Desktop Menu, Search (Guest vs Login), Switchers, & Off-Canvas
   ========================================================================== */

/* ==========================================================================
   MODULE 1: LOGO & CORE WRAPPERS
   ========================================================================== */
.site-main-logo img {
    width: 200px !important;
    height: 24px !important; 
}


/* ==========================================================================
   MODULE 2: MAIN DESKTOP NAVIGATION
   ========================================================================== */
html body .custom-header-menu > .wp-block-navigation__container,
html body .custom-header-menu > ul,
html body .custom-header-menu div > ul {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 30px !important; 
}

html body .custom-header-menu li,
html body .custom-header-menu .wp-block-navigation-item {
    position: relative !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .custom-header-menu a,
html body .custom-header-menu .wp-block-navigation-item__content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important; 
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #000000 !important; 
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}


/* ==========================================================================
   MODULE 3: DESKTOP SUBMENUS & DROPDOWNS
   ========================================================================== */
html body .custom-header-menu .wp-block-navigation__submenu-icon {
    display: flex !important;
    align-items: center !important;
    margin-left: 6px !important; 
    line-height: 0 !important;
}

html body .custom-header-menu .wp-block-navigation__submenu-icon svg {
    width: 10px !important;
    height: 10px !important;
    fill: currentColor !important; 
    opacity: 0.6 !important;
    pointer-events: none !important;
    transition: fill 0.3s ease !important;
}

html body .custom-header-menu .wp-block-navigation-submenu__toggle {
    position: static !important; 
    background: transparent !important;
    border: none !important;
}

html body .custom-header-menu .wp-block-navigation-submenu__toggle::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
    cursor: pointer !important;
}

/* Hover & Active States */
html body .custom-header-menu a:hover,
html body .custom-header-menu .wp-block-navigation-item__content:hover,
html body .custom-header-menu .current-menu-item > a,
html body .custom-header-menu .current-menu-item > .wp-block-navigation-item__content,
html body .custom-header-menu button[aria-expanded="true"],
html body .custom-header-menu li:focus-within > .wp-block-navigation-item__content {
    color: #88B437 !important; 
    background: transparent !important;
}

html body .custom-header-menu li:hover svg,
html body .custom-header-menu li:hover .wp-block-navigation__submenu-icon svg,
html body .custom-header-menu .wp-block-navigation-item__content:hover svg {
    fill: #88B437 !important;
    color: #88B437 !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Submenu Containers & Animations */
html body .custom-header-menu ul ul,
html body .custom-header-menu .wp-block-navigation__submenu-container {
    display: none; 
    flex-direction: column !important;
    gap: 0 !important;
    position: absolute !important;
    top: 100% !important;
    left: -20px !important; 
    background-color: #ffffff !important;
    min-width: 220px !important;
    padding: 10px 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border-top: 3px solid #88B437 !important;
    z-index: 99999 !important;
    margin-top: 15px !important; 
}

html body .custom-header-menu li:hover > ul,
html body .custom-header-menu li:hover > .wp-block-navigation__submenu-container,
html body .custom-header-menu li:focus-within > ul,
html body .custom-header-menu li:focus-within > .wp-block-navigation__submenu-container,
html body .custom-header-menu button[aria-expanded="true"] ~ ul,
html body .custom-header-menu button[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
    display: flex !important;
    animation: fadeUp 0.3s ease forwards;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

html body .custom-header-menu ul ul a,
html body .custom-header-menu .wp-block-navigation__submenu-container a {
    width: 100% !important;
    padding: 12px 25px !important;
    font-size: 13px !important;
    text-transform: capitalize !important;
    font-weight: 600 !important;
    color: #444 !important;
    background: transparent !important; 
    border-bottom: 1px solid #f5f5f5 !important;
    justify-content: flex-start !important;
    display: block !important; 
}

html body .custom-header-menu ul ul li:last-child a { border-bottom: none !important; }

html body .custom-header-menu ul ul a:hover,
html body .custom-header-menu .wp-block-navigation__submenu-container a:hover {
    background-color: #f9f9f9 !important; 
    color: #88B437 !important;
    padding-left: 30px !important;
}


/* ==========================================================================
   MODULE 4: NATIVE SEARCH & FIBOSEARCH (GUEST VS LOGGED-IN)
   ========================================================================== */

/* Native Search Cleanup */
.wp-block-search__inside-wrapper { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.wp-block-search__input { background-color: transparent !important; border: none !important; color: #000 !important; }
.wp-block-search__button { background: transparent !important; color: #333 !important; margin-left: 0 !important; padding: 0 15px !important; }
.wp-block-search__input::placeholder { color: #888 !important; opacity: 1; }

/* FiboSearch DYNAMIC WIDTH LOGIC */
html body:not(.logged-in) .gb-element-6d4fa11a {
    width: 330px !important; /* COMPACT FOR GUESTS to fit Login button */
    max-width: 100% !important;
    flex-shrink: 1 !important; 
}

html body.logged-in .gb-element-6d4fa11a {
    width: 417px !important; /* ORIGINAL FOR LOGGED-IN */
    max-width: 100% !important;
}

/* FiboSearch PIRX Styles */
html body .dgwt-wcas-search-wrapp.dgwt-wcas-style-pirx,
html body .dgwt-wcas-search-wrapp {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    width: 100% !important; 
    margin: 0 !important; 
}

html body .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp,
html body .dgwt-wcas-sf-wrapp {
    background-color: #f4f4f4 !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

html body .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
    background-color: transparent !important;
    border: none !important;
    color: #000000 !important;
    font-size: 14px !important;
    padding: 12px 45px 12px 20px !important; 
    font-weight: 500 !important;
    z-index: 1 !important;
    width: 100% !important;
}

/* FiboSearch Icon Positioning */
html body .dgwt-wcas-search-submit {
    background: transparent !important;
    box-shadow: none !important;
    position: absolute !important;
    right: 15px !important; 
    left: auto !important; 
    top: 50% !important;
    transform: translateY(-50%) !important;
    border: none !important;
    width: auto !important;
    padding: 0 !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

html body .dgwt-wcas-search-submit svg {
    fill: #88B437 !important; 
    width: 18px !important;
    height: 18px !important;
}


/* ==========================================================================
   MODULE 5: LANGUAGE & CURRENCY SWITCHERS (WPML / WCML)
   ========================================================================== */
html body .custom-currency-switcher,
html body .custom-lang-switcher {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
}

html body .custom-currency-switcher ul,
html body .custom-lang-switcher ul {
    background-color: #ffffff !important; 
    border: 2px solid #88B437 !important; 
    border-radius: 30px !important;
    padding: 1px !important;               
    margin: 0 !important;
    display: inline-flex !important;
    flex-direction: row !important;
    list-style: none !important;
    width: auto !important;
    position: static !important;
    box-shadow: none !important; 
}

html body .wcml_currency_switcher,
html body .wpml-ls-statics-shortcode_actions {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html body .custom-currency-switcher li,
html body .custom-lang-switcher li {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    position: static !important;
    visibility: visible !important;
    border: none !important; 
}

html body .custom-currency-switcher a,
html body .custom-lang-switcher a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 9px !important;             
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #000000 !important;             
    padding: 0 !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    text-indent: 0 !important;
    box-shadow: none !important;
    width: 32px !important;                 
    height: 20px !important;                 
}

html body .custom-currency-switcher img,
html body .custom-lang-switcher img,
html body .custom-currency-switcher a:before,
html body .custom-currency-switcher a:after,
html body .wpml-ls-flag {
    display: none !important; 
}

html body .custom-lang-switcher a span, 
html body .custom-lang-switcher .wpml-ls-native { display: inline-block !important; }

/* Active & Hover Logic */
html body .custom-currency-switcher .wcml-cs-active-currency a,
html body .custom-lang-switcher .wpml-ls-current-language a,
html body .custom-currency-switcher a:hover,
html body .custom-lang-switcher a:hover {
    background-color: #88B437 !important; 
    color: #000000 !important;             
    box-shadow: none !important;             
}

@media (min-width: 1201px) {
    html body .custom-currency-switcher { margin-right: 30px !important; }
    html body .custom-lang-switcher { margin-right: 14px !important; }
}


/* ==========================================================================
   MODULE 6: ACTION ICONS & WISHLIST BADGES
   ========================================================================== */
html body .gb-button-wrapper a.gb-button,
html body a.wp-block-button__link,
html body .wp-block-button > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    line-height: 0 !important;
    background-color: transparent !important;
    color: #000000 !important;
    padding: 0 !important;
    border: none !important;
    transition: color 0.3s ease, transform 0.2s ease !important;
    margin-left: 35px !important; 
}

html body a.header-icon-cart { margin-left: 55px !important; }

html body .gb-button-wrapper a.gb-button:hover,
html body a.wp-block-button__link:hover,
html body .wp-block-button > a:hover {
    color: #88B437 !important; 
    background-color: transparent !important; 
    transform: translateY(-2px) !important;
}

html body .gb-button-wrapper a svg,
html body .wp-block-button a svg {
    fill: currentColor !important;
    width: 20px !important;
    height: 20px !important;
}

/* Wishlist Counter Badge Positioning */
a.header-icon-wishlist {
    position: relative !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
}

.header-icon-wishlist .wishlist-counter-badge {
    position: absolute !important;
    top: -8px !important;    
    right: -10px !important; 
    left: auto !important;   
    background-color: #e74c3c !important; 
    color: #ffffff !important;            
    border-radius: 50% !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 4px !important;
    z-index: 999 !important;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2) !important;
}


/* ==========================================================================
   MODULE 7: MOBILE HEADER CORE
   ========================================================================== */
@media (max-width: 1200px) {
    .site-header .main-navigation:not(.slideout-navigation),
    .site-header .custom-currency-switcher, 
    .site-header .custom-lang-switcher,
    .site-header .header-icon-cart {
        display: none !important;
    }
    #mobile-header {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #mobile-header .site-logo.mobile-header-logo img {
        height: 35px !important; 
        width: auto !important;
        margin-top: 2px !important;
        padding-left: 20px !important; 
    }
    #mobile-header .menu-toggle { font-size: 26px !important; }
    #mobile-header .menu-toggle svg { width: 28px !important; height: 28px !important; }
}


/* ==========================================================================
   MODULE 8: OFF-CANVAS / SLIDEOUT MENU (DETAILED)
   ========================================================================== */
@media (max-width: 1200px) {
    .slideout-navigation {
        background-color: #ffffff !important;
        width: 300px !important;
    }

    .slideout-navigation button.slideout-exit,
    .slideout-navigation .gp-icon svg {
        color: #88B437 !important;
        fill: #88B437 !important;
    }

    /* Off-Canvas Inner Structure */
    .slideout-navigation .oc-extras-container {
        padding: 0 20px; 
        display: flex; flex-direction: column; gap: 15px;
        position: relative; 
        padding-bottom: 5px !important; 
        border-bottom: none !important;
        margin-bottom: 0 !important; 
    }
    
    .slideout-navigation .top-section { margin-top: 25px; }
    .slideout-navigation .oc-search { width: 100%; margin-bottom: 10px; }

    /* Mobile FiboSearch Logic */
    html body .slideout-navigation .dgwt-wcas-search-wrapp {
        width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;   
        right: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body .slideout-navigation .dgwt-wcas-search-wrapp.dgwt-wcas-layout-mobile-overlay,
    html body .slideout-navigation .dgwt-wcas-mobile-overlay-trigger-active,
    html body .dgwt-wcas-overlay-mobile-on .slideout-navigation .dgwt-wcas-search-wrapp {
        position: static !important; 
        top: auto !important;
        left: 0 !important; 
        width: 100% !important; 
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        z-index: 1 !important;
        box-shadow: none !important;
        border: none !important;
    }

    html body .slideout-navigation .dgwt-wcas-om-return { display: none !important; }
    html body .slideout-navigation .dgwt-wcas-search-form { background: transparent !important; margin: 0 !important; padding: 0 !important; }
    
    /* Off-Canvas User Row */
    .slideout-navigation .oc-user-icons {
        display: flex !important; justify-content: center !important; 
        gap: 40px !important; padding-bottom: 15px !important; 
        border-bottom: 1px solid #f0f0f0; width: 100% !important;
        margin-bottom: 0 !important; 
    }

    .slideout-navigation .oc-icon-link {
        background: transparent !important; border: none; padding: 0; 
        color: #88B437 !important; transition: transform 0.2s ease;
    }
    .slideout-navigation .oc-icon-link svg { width: 28px !important; height: 28px !important; fill: currentColor; }

    /* Off-Canvas Bottom Section */
    .slideout-navigation .oc-bottom-section {
        margin-top: 0 !important; 
        padding-top: 15px !important; 
        border-top: none !important; 
        text-align: center; padding-bottom: 25px; 
        background-color: #f9f9f9;
        width: calc(100% + 40px); position: relative; left: -20px; 
        padding-left: 20px; padding-right: 20px; box-sizing: border-box;
    }

    .slideout-navigation .oc-label {
        font-size: 10px; text-transform: uppercase; color: #999; 
        font-weight: 800; letter-spacing: 1.5px; margin-bottom: 15px; display: block;
    }

    .slideout-navigation .oc-switchers-row {
        display: flex !important; justify-content: center !important; 
        align-items: center !important; gap: 20px !important; width: 100% !important;
        margin-bottom: 15px; 
    }

    html body .slideout-navigation .custom-currency-switcher,
    html body .slideout-navigation .custom-lang-switcher { margin-left: 0 !important; }

    /* Mobile Contact/Support Icons */
    .slideout-navigation .oc-support-icons { display: flex; justify-content: center; gap: 30px; width: 100% !important; }
    .slideout-navigation .oc-support-link {
        width: 42px; height: 42px; background-color: #fff !important;
        border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.06);
        display: flex; align-items: center; justify-content: center;
        transition: transform 0.2s;
    }
    .slideout-navigation .oc-support-link:active { transform: scale(0.95); }
    .slideout-navigation .oc-support-link svg { width: 20px; height: 20px; fill: currentColor; }
    .slideout-navigation .oc-support-link.fb { color: #1877F2 !important; }
    .slideout-navigation .oc-support-link.wa { color: #25D366 !important; }
    .slideout-navigation .oc-support-link.email { color: #333 !important; }
}


/* ==========================================================================
   MODULE 9: OFF-CANVAS NAVIGATION LINKS
   ========================================================================== */
@media (max-width: 1200px) {
    .slideout-navigation .slideout-widget { margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .slideout-navigation .widget_nav_menu { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    
    .slideout-navigation .widget_nav_menu ul {
        margin: 0 !important; padding: 0 !important; list-style: none !important;
        text-align: center !important; width: 100% !important;
        display: flex !direction: column !important; align-items: center;
    }

    .slideout-navigation .widget_nav_menu ul li {
        text-align: center !important; border-bottom: 1px solid #f9f9f9;
        margin: 0 !important; display: block !important; width: 100% !important;
    }

    .slideout-navigation .widget_nav_menu ul li a {
        display: flex !important; justify-content: center !important; align-items: center !important;
        padding: 12px 0 !important; font-weight: 700; font-size: 16px; color: #333; text-decoration: none; width: 100% !important;
    }

    /* Submenu Behavior for Mobile */
    .slideout-navigation .widget_nav_menu .menu-item-has-children > a::after {
        content: "\25BE"; font-size: 20px !important; margin-left: 10px !important;
        color: #000000 !important; display: inline-block; line-height: 1;
    }

    .slideout-navigation .widget_nav_menu .menu-item-has-children > a { pointer-events: auto !important; cursor: pointer !important; padding-left: 10px !important; }
    .slideout-navigation .widget_nav_menu ul ul { display: none; width: 100% !important; background-color: #fafafa !important; box-shadow: inset 0 2px 5px rgba(0,0,0,0.03); }
    .slideout-navigation .widget_nav_menu li.menu-item-has-children:focus-within > ul { display: block !important; }
    .slideout-navigation .widget_nav_menu ul ul li { border-bottom: 1px solid #eee; }
    .slideout-navigation .widget_nav_menu ul ul li a { font-weight: 600 !important; font-size: 14px !important; color: #555 !important; padding: 10px 0 !important; justify-content: center !important; }
    
    .oc-divider { margin-bottom: 20px !important; margin-top: 20px !important; }
    .gp-icon svg { fill: #88B437 !important; }
    .oc-working-hours { font-size: 12px; color: #888; margin-top: 15px; font-weight: 500; line-height: 1.4; text-transform: none !important; }
    #mobile-header .menu-bar-items { display: none !important; }
}

.slideout-navigation .main-nav, .slideout-navigation .slideout-widget:not(:last-child) { margin-bottom: 10px !important; }


/* ==========================================================================
   MODULE 10: LOGIN BUTTON & WISHLIST SHELL
   ========================================================================== */
a.gb-text-8edc31e2.kh-force-login-btn {
    margin-left: 26px !important; 
    margin-right: 10px !important;
    padding: 6px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important; 
    width: auto !important;
    background-color: #88B437 !important; 
    color: #ffffff !important;
    border-radius: 50px !important; 
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: all 0.3s ease !important;
}

a.gb-text-8edc31e2.kh-force-login-btn:hover {
    background-color: #769d2f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(136, 180, 55, 0.2) !important;
}

body:not(.logged-in) .gb-text-8edc31e2 .gb-shape {
    display: none !important;
    width: 0 !important;
    visibility: hidden !important;
}

@media (max-width: 991px) {
    a.gb-text-8edc31e2.kh-force-login-btn {
        padding: 4px 12px !important;
        font-size: 10px !important;
        height: 30px !important;
        margin-left: 15px !important;
    }
}

.wishlist-shell {
    display: inline-block !important;
    min-width: 24px;
    min-height: 24px;
}