/* ========================================================= 
   ELECTRICAL BRO - HEADER PRODUCT SEARCH 
   ========================================================= */ 
 
.eb-header-search { 
    flex: 1; 
    max-width: 620px; 
    margin: 0 35px; 
} 
 
.eb-product-search { 
    position: relative; 
    display: flex; 
    width: 100%; 
    height: 46px; 
    background: #f5f6f7; 
    border: 1px solid #e2e4e7; 
    border-radius: 6px; 
    overflow: hidden; 
} 
 
.eb-product-search-input { 
    flex: 1; 
    min-width: 0; 
    height: 100%; 
    padding: 0 58px 0 18px; 
    border: 0 !important; 
    outline: 0 !important; 
    background: transparent !important; 
    box-shadow: none !important; 
    font-size: 14px; 
    color: #171717; 
} 
 
.eb-product-search-input::placeholder { 
    color: #8a8a8a; 
} 
 
.eb-product-search-button { 
    position: absolute; 
    top: 0; 
    right: 0; 
 
    width: 52px; 
    height: 100%; 
 
    display: flex; 
    align-items: center; 
    justify-content: center; 
 
    border: 0; 
    border-radius: 0; 
    background: #171717; 
    color: #ffffff; 
 
    font-size: 25px; 
    cursor: pointer; 
} 
 
.eb-product-search-button:hover { 
    background: #000000; 
} 
 
@media (max-width: 991px) { 
 
    .eb-header-search { 
        display: none; 
    } 
 
} 
 
/* ========================================================= 
   ELECTRICAL BRO - PREMIUM DESKTOP HEADER 
   ========================================================= */ 
 
@media (min-width: 993px) { 
 
    /* Hide original menu from first row */ 
    #masthead .site-navigation { 
        display: none !important; 
    } 
 
    /* Main white header row */ 
    #masthead .site-header-inner .container { 
        display: flex; 
        align-items: center; 
        gap: 24px; 
    } 
 
    /* Electrical Bro logo / branding */ 
    #masthead .site-branding { 
        flex: 0 0 190px; 
        margin: 0; 
    } 
 
    /* Our new large search */ 
    #masthead .eb-header-search { 
        flex: 1 1 auto; 
        max-width: 650px; 
        margin-left: auto; 
    } 
 
    #masthead .eb-product-search { 
        display: flex; 
        align-items: stretch; 
        width: 100%; 
        height: 44px; 
        margin: 0; 
    } 
 
    #masthead .eb-product-search-input { 
        flex: 1 1 auto; 
        min-width: 0; 
        width: 100%; 
        height: 44px; 
        padding: 0 18px; 
 
        background: #f6f7f9; 
 
        border: 1px solid #e1e4e8; 
        border-right: 0; 
        border-radius: 7px 0 0 7px; 
 
        font-size: 14px; 
        color: #222; 
 
        outline: none; 
        box-shadow: none; 
    } 
 
    #masthead .eb-product-search-input:focus { 
        background: #fff; 
        border-color: #0d8fe8; 
    } 
 
    #masthead .eb-product-search-input::placeholder { 
        color: #777; 
    } 
 
    /* Blue search button */ 
    #masthead .eb-product-search-button { 
        flex: 0 0 52px; 
 
        width: 52px; 
        height: 44px; 
 
        margin: 0; 
        padding: 0; 
 
        display: flex; 
        align-items: center; 
        justify-content: center; 
 
        border: 0; 
        border-radius: 0 7px 7px 0; 
 
        background: #0d8fe8; 
        color: #fff; 
 
        font-size: 22px; 
        line-height: 1; 
 
        cursor: pointer; 
        box-shadow: none; 
    } 
 
    #masthead .eb-product-search-button:hover { 
        background: #087dcc; 
    } 
 
    /* Existing Woostify search/account/cart icons */ 
    #masthead .header-action { 
        flex: 0 0 auto; 
        margin-left: 0; 
    } 
} 
 
/* ========================================================= 
   ELECTRICAL BRO - PREMIUM SECOND NAVIGATION 
   ========================================================= */ 
 
@media (min-width: 993px) { 
 
    .eb-premium-nav { 
        display: block; 
        width: 100%; 
        background: #f4f8fc; 
        border-top: 1px solid #edf0f3; 
        border-bottom: 1px solid #dfe5eb; 
        position: relative; 
        z-index: 99; 
    } 
 
    .eb-premium-nav-inner { 
        max-width: 1170px; 
        margin: 0 auto; 
        padding: 0 15px; 
    } 
 
    .eb-premium-navigation { 
        width: 100%; 
    } 
 
    /* Main menu */ 
    .eb-premium-menu { 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        gap: 0; 
 
        margin: 0; 
        padding: 0; 
 
        list-style: none; 
    } 
 
    .eb-premium-menu > li { 
        position: relative; 
        margin: 0; 
        padding: 0; 
        list-style: none; 
    } 
 
    .eb-premium-menu > li > a { 
        display: flex; 
        align-items: center; 
 
        min-height: 48px; 
        padding: 0 20px; 
 
        color: #171717; 
        font-size: 14px; 
        font-weight: 500; 
        text-decoration: none; 
 
        white-space: nowrap; 
 
        transition: 
            background 0.2s ease, 
            color 0.2s ease; 
    } 
 
    .eb-premium-menu > li > a:hover { 
        background: #ffffff; 
        color: #0d8fe8; 
    } 
 
 
    /* ------------------------- 
       DROPDOWNS 
       ------------------------- */ 
 
    .eb-premium-menu .sub-menu { 
        display: none; 
 
        position: absolute; 
        top: 100%; 
        left: 0; 
 
        width: 230px; 
        min-width: 230px; 
 
        margin: 0; 
        padding: 8px 0; 
 
        list-style: none; 
 
        background: #ffffff; 
 
        border: 1px solid #e6e8eb; 
        border-radius: 0 0 8px 8px; 
 
        box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.10); 
 
        z-index: 9999; 
    } 
 
    /* Show dropdown on hover */ 
    .eb-premium-menu li:hover > .sub-menu { 
        display: block; 
    } 
 
    .eb-premium-menu .sub-menu li { 
        position: relative; 
        display: block; 
 
        margin: 0; 
        padding: 0; 
 
        list-style: none; 
    } 
 
    .eb-premium-menu .sub-menu li a { 
        display: block; 
 
        padding: 10px 18px; 
 
        color: #333333; 
        font-size: 13px; 
        line-height: 1.4; 
        text-decoration: none; 
 
        background: #ffffff; 
 
        transition: 
            background 0.2s ease, 
            color 0.2s ease; 
    } 
 
    .eb-premium-menu .sub-menu li a:hover { 
        background: #f5f8fb; 
        color: #0d8fe8; 
    } 
 
 
    /* Nested dropdown */ 
    .eb-premium-menu .sub-menu .sub-menu { 
        top: -8px; 
        left: 100%; 
 
        border-radius: 8px; 
    } 
} 
 
 
/* Hide our desktop navigation on mobile */ 
@media (max-width: 992px) { 
 
    .eb-premium-nav { 
        display: none !important; 
    } 
} 
 
/* ========================================================= 
   ELECTRICAL BRO - RESPONSIVE STICKY HEADER 
   ========================================================= */ 
 
/* Sticky complete main header on all devices */ 
#masthead { 
    position: sticky; 
    top: 0; 
    z-index: 9999; 
    background: #ffffff; 
    width: 100%; 
} 
 
/* Navigation stays naturally attached to header */ 
.eb-premium-nav { 
    position: relative; 
    top: auto; 
    z-index: 1; 
} 
 
/* Prevent header elements from breaking layout */ 
#masthead .site-header-inner { 
    width: 100%; 
} 
 
/* ========================= 
   DESKTOP 
   ========================= */ 
@media (min-width: 993px) { 
 
    #masthead { 
        position: sticky; 
        top: 0; 
    } 
 
} 
 
/* ========================= 
   TABLET 
   ========================= */ 
@media (min-width: 768px) and (max-width: 992px) { 
 
    #masthead { 
        position: sticky; 
        top: 0; 
    } 
 
    .eb-header-search { 
        min-width: 0; 
    } 
 
    .eb-product-search { 
        width: 100%; 
    } 
 
} 
 
/* ========================= 
   MOBILE 
   ========================= */ 
@media (max-width: 767px) { 
 
    #masthead { 
        position: sticky; 
        top: 0; 
        width: 100%; 
    } 
 
    .eb-header-search { 
        width: 100%; 
        min-width: 0; 
    } 
 
    .eb-product-search { 
        width: 100%; 
    } 
 
    .eb-product-search-input { 
        min-width: 0; 
        width: 100%; 
    } 
 
}