/* =====================================================================
   header-responsive.css  —  SimplexDiam header  (v7)
   ---------------------------------------------------------------------
   Pure OVERRIDE file. Nothing in style.css / header.php markup is edited.
   Loaded LAST in header.php (after sp-order.css).

   LAYOUT PER WIDTH
   >= 1500px      full desktop: menu links + all buttons WITH text
   1200 – 1499px  menu links + action pills ICON-ONLY
   992  – 1199px  smaller menu links + action pills ICON-ONLY
   768  – 991px   hamburger mode, one row: logo | icons
   <= 767px       hamburger mode; when the header is crowded
                  (salesperson / create-order logins) it becomes
                  2 rows: logo on top, full-width icon bar below
   <= 380px       small phones: tighter spacing

   "Action pills" = Order for customer, My orders, Create order.
   Icon-only mode keeps the text in the page (screen readers still
   read it) and only clips it visually, so it works without knowing
   the markup inside salesperson/header_button.
   ===================================================================== */


/* =====================================================================
   0. ALL WIDTHS — base fixes
   ===================================================================== */

/* Icon row never wraps internally and never gets squeezed */
header #main .updated_bar_icon {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 4px;
}

header #main .updated_bar_icon > li.nav-item {
    margin: 0 !important;
    flex: 0 0 auto;
}

/* Logo never shrinks below its box, never sits under the icons */
header #main a.navbar-brand {
    flex: 0 0 auto;
    margin-right: 16px;
}

header #main a.navbar-brand img.img-fluid {
    max-width: 100% !important;
    height: auto;
}

/* Salesperson <li> (Order for customer + My orders): keep the two
   buttons side by side — this is what was stacking them vertically.
   Selector = the icon-row <li> that is not search / wishlist / cart /
   create-order / login / user / hamburger. */
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)),
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) > div,
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) > span {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 6px;
}

header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a,
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
header #main .updated_bar_icon .oe-header-link {
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Username: "…" instead of a hard cut */
header .updated_bar_icon #my_login-toggler {
    width: auto;
    max-width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Mobile side menu never shows on desktop */
@media (min-width: 992px) {
    #mySidenav.humberger_menu {
        display: none !important;
    }
    /* empty hamburger <li> takes no space on desktop */
    header #main .updated_bar_icon > li.nav-item:has(> .humberger_button) {
        display: none !important;
    }
}


/* =====================================================================
   1. ICON-ONLY ACTION PILLS  (everything below 1500px)
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1499.98px), (min-width: 768px) and (max-width: 879.98px) {

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
    header #main .updated_bar_icon .oe-header-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        padding: 0 0 0 8px !important;
        overflow: hidden !important;
        gap: 60px !important;          /* pushes text after an icon element out of view */
        word-spacing: 60px !important; /* pushes text after a glyph icon (☰ ✎) out of view */
        font-size: 13px !important;
        line-height: 1 !important;
    }

    /* the icon inside a pill keeps its size */
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item) > *,
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button > *,
    header #main .updated_bar_icon .oe-header-link > * {
        flex-shrink: 0 !important;
    }
}


/* =====================================================================
   2. 992 – 1199px : laptop
   ===================================================================== */
@media (min-width: 992px) and (max-width: 1199.98px) {

    header #main a.navbar-brand {
        max-width: 150px;
        margin-right: 10px;
    }

    header #navbarToggle > li.nav-item {
        margin: 0 1px;
    }

    header #navbarToggle .nav-link {
        padding-left: .45rem !important;
        padding-right: .45rem !important;
    }

    header ul.navbar-nav.main-menu li a,
    header #navbarToggle .dropbtn {
        font-size: 15px;
    }

    header .updated_bar_icon #my_login-toggler {
        max-width: 85px;
    }
}


/* =====================================================================
   3. <= 991px : tablet + phone (hamburger mode)
   ===================================================================== */
@media (max-width: 991.98px) {

    header #main.navbar {
        flex-wrap: nowrap;
    }

    header #main a.navbar-brand {
        max-width: 160px;
        margin-right: 10px;
    }

    header #main .updated_bar_icon {
        margin-left: auto;
    }

    /* Icon-row dropdowns (search, login, user menu) open full width
       under the header instead of running off the screen edge */
    header .updated_bar_icon .dropdown {
        position: static !important;
    }

    /* username ▾ arrow was positioned against .dropdown; hide it here */
    header .updated_bar_icon #my_login-toggler::after {
        display: none !important;
    }

    header .updated_bar_icon #my_login-toggler {
        max-width: 90px;
        padding-left: 4px;
        padding-right: 4px;
    }

    header .updated_bar_icon .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-top: 0 !important;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    header .updated_bar_icon .update_login_header .menu-dropdown-container {
        max-width: 420px;
        margin: 0 auto;
        padding: 25px 20px 20px 20px;
    }

    header .updated_bar_icon .update_login_user_design {
        padding: 20px !important;
    }

    header .updated_bar_icon .update_login_user_design a {
        max-width: 420px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Hamburger side menu */
    #mySidenav.humberger_menu {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #mySidenav ul.navbar-nav.main-menu {
        width: auto !important;
        max-width: calc(100% - 40px);
        top: 70px;
        padding-bottom: 90px;
    }

    body:has(#mySidenav.-humberger-open) {
        overflow: hidden;
    }

    header .humberger_button .svg_div {
        padding: 8px;
        line-height: 1;
    }
}


/* =====================================================================
   4. <= 767px : phones / small tablets
   ===================================================================== */
@media (max-width: 767.98px) {

    /* no iOS auto-zoom on the search box */
    header #search_all_data {
        font-size: 16px !important;
    }

    /* style.css forces logo width:125px !important — box decides now */
    header #main a.navbar-brand {
        max-width: 125px;
    }

    header #main a.navbar-brand img.img-fluid {
        width: auto !important;
    }
}


/* =====================================================================
   5. <= 603px : badges become floating dots (style.css) — give room
   ===================================================================== */
@media (max-width: 603px) {
    header #main .updated_bar_icon {
        gap: 8px;
    }
}


/* =====================================================================
   6. <= 575px : phones
   ===================================================================== */
@media (max-width: 575.98px) {

    header .updated_bar_icon #my_login-toggler {
        max-width: 70px;
        font-size: 15px;
    }

}


/* =====================================================================
   7. <= 380px : small phones
   ===================================================================== */
@media (max-width: 380px) {

    header #main a.navbar-brand {
        max-width: 100px;
    }

    header #main .updated_bar_icon {
        gap: 4px;
    }

    header .updated_bar_icon .searchInput > .btn {
        padding-left: 2px;
        padding-right: 2px;
    }

    header .updated_bar_icon #my_login-toggler {
        max-width: 44px;
        font-size: 14px;
    }

}


/* =====================================================================
   8. Short landscape screens (phone sideways)
   ===================================================================== */
@media (max-height: 450px) and (max-width: 991.98px) {
    #mySidenav ul.navbar-nav.main-menu {
        top: 55px;
    }
}

/* =====================================================================
   HEADER ICON SIZE (search, wishlist, cart, login, hamburger)
   ===================================================================== */
header #main .updated_bar_icon .searchInput > .btn img,
header #main .updated_bar_icon .request_list img,
header #main .updated_bar_icon .request_list svg,
header #main .updated_bar_icon .update_login_header .menu-item img {
    width: 17px !important;
    height: 17px !important;
    object-fit: contain;
}

header #main .updated_bar_icon .humberger_button svg {
    width: 16px !important;
    height: 16px !important;
}

/* icon inside the action pills */
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) svg,
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) img,
header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) i {
    width: 12px !important;
    height: 12px !important;
    font-size: 12px !important;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    header #main .updated_bar_icon .searchInput > .btn img,
    header #main .updated_bar_icon .request_list img,
    header #main .updated_bar_icon .request_list svg,
    header #main .updated_bar_icon .update_login_header .menu-item img {
        width: 16px !important;
        height: 16px !important;
    }
}


/* =====================================================================
   TWO-ROW PHONE LAYOUT (<= 767px)
   Row 1 : logo (left) ........ search  wish  cart  user  menu (right)
   Row 2 :      [Order for customer] [My orders] [Create order]  (centered)
   The icon <ul> becomes "display: contents" so its <li>s can be placed
   into two rows of the navbar without touching the markup.
   ===================================================================== */
@media (max-width: 767.98px) {

    header #main.navbar {
        flex-wrap: wrap !important;
        align-items: center;
        row-gap: 0;
    }

    header #main .updated_bar_icon {
        display: contents !important;
    }

    /* row 1 */
    header #main a.navbar-brand {
        order: 0;
        margin-right: auto !important;
    }

    header #main .updated_bar_icon > li.nav-item {
        order: 1;
        margin: 0 0 0 10px !important;
        list-style: none;
    }

    /* line break between row 1 and row 2 (thin divider) */
    /* (nested :has() isn't allowed in CSS, so: 6+ icons = has action pills) */
    header #main.navbar:has(.updated_bar_icon > li:nth-child(6))::after {
        content: "";
        order: 2;
        flex: 0 0 100%;
        height: 1px;
        background: #f0ece7;
        margin: 8px 0 8px;
    }

    /* row 2 : action pills, centered, with text */
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)),
    header #main .updated_bar_icon > li.new_addition:has(.oe-header-link) {
        order: 3 !important;
        margin: 0 4px 6px !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 8px;
    }


    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) > div,
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) > span {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 8px;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
    header #main .updated_bar_icon .oe-header-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        padding: 4px 10px !important;
        word-spacing: normal !important;
        height: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 575.98px) {
    header #main .updated_bar_icon > li.nav-item {
        margin-left: 8px !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
    header #main .updated_bar_icon .oe-header-link {
        font-size: 12px !important;
        padding: 4px 9px !important;
    }

}

@media (max-width: 380px) {
    header #main .updated_bar_icon > li.nav-item {
        margin-left: 6px !important;
    }
}


/* =====================================================================
   COMPACT ACTION PILLS on big desktop (>= 1500px, text visible)
   ===================================================================== */
@media (min-width: 1500px), (min-width: 880px) and (max-width: 991.98px) {
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
    header #main .updated_bar_icon .oe-header-link {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        padding: 4px 10px !important;
    }
}


/* =====================================================================
   ACTION PILLS ROW (<= 767px) — v6
   - whole group centered (also when it wraps to 2 lines)
   - every pill same height
   - text shown at every width (sp-order.css hides it below ~630px)
   ===================================================================== */
@media (max-width: 767.98px) {

    /* row 1 is held by the logo's auto margin; this only centers row 2 */
    header #main.navbar {
        justify-content: center !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)),
    header #main .updated_bar_icon > li.new_addition:has(.oe-header-link) {
        margin: 0 4px 6px !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
    header #main .updated_bar_icon .oe-header-link {
        height: 28px !important;
        box-sizing: border-box !important;
        justify-content: center !important;
    }

    /* bring the label text back */
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item) > span:not(.badge):not(.sr-only),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button > span:not(.badge):not(.sr-only) {
        display: inline !important;
        visibility: visible !important;
        font-size: inherit !important;
        width: auto !important;
        position: static !important;
    }
}


/* =====================================================================
   PHONES (<= 767px) — all 3 action buttons on ONE line   (v7)
   Font, padding and gaps scale with screen width (vw) so the row
   fits from 320px up without wrapping.
   ===================================================================== */
@media (max-width: 767.98px) {

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) {
        flex-wrap: nowrap !important;
        gap: min(8px, 1.2vw) !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) > div,
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) > span {
        flex-wrap: nowrap !important;
        gap: min(8px, 1.2vw) !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)),
    header #main .updated_bar_icon > li.new_addition:has(.oe-header-link) {
        margin: 0 min(4px, 0.6vw) 6px !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) a:not(.dropdown-item),
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) button,
    header #main .updated_bar_icon .oe-header-link {
        font-size: min(13px, 2.8vw) !important;
        padding: 0 min(10px, 1.6vw) !important;
        gap: min(5px, 0.8vw) !important;
        height: min(28px, 7.5vw) !important;
    }

    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) svg,
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) img,
    header #main .updated_bar_icon > li.new_addition:not(.my_custom_search_icon):not(.login):not(:has(.request_list)):not(:has(.oe-header-link)):not(:has(#my_login-toggler)) i {
        width: min(12px, 2.7vw) !important;
        height: min(12px, 2.7vw) !important;
        font-size: min(12px, 2.7vw) !important;
    }
}