/* =========================================================
   app.overrides.css — CLEANED & CONSOLIDATED
   ========================================================= */

/* 1) Full-width page */
.master-wrapper-page {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
}

/* =========================================================
   2) PRODUCTS dropdown: align under tab on desktop, leave mobile alone
   ========================================================= */

/* Mobile: default flow */
@media (max-width: 991.98px) {
    .top-menu.notmobile .sublist {
        position: static !important;
    }
}

/* Desktop: anchor + align */
@media (min-width: 992px) {
    .top-menu.notmobile > li {
        position: relative !important;
    }

    :root {
        --menu-pad-x: 20px;
    }
    /* adjust if your tab padding differs */
    .top-menu.notmobile > li > a {
        display: inline-block;
        padding: 10px var(--menu-pad-x) !important;
    }

    .top-menu.notmobile .sublist {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        transform: none !important;
        margin-left: var(--menu-pad-x) !important; /* start under the link text */
        z-index: 1000;
    }

    /* prevent clipping */
    .header-menu,
    .header-menu .top-menu.notmobile,
    .efl-header,
    .efl-header .header-lower,
    .efl-header .header-lower .row {
        overflow: visible !important;
    }

    /* keep flyouts intact */
    .top-menu.notmobile .sublist.first-level > li {
        position: relative;
    }

        .top-menu.notmobile .sublist.first-level > li > .sublist {
            left: 100% !important;
            top: 0 !important;
        }
}

/* =========================================================
   3) Modern search bar (pill, shadow, focus glow)
   ========================================================= */

.efl-header .search-container {
    max-width: 600px; /* cap width (desktop) */
    margin-left: 0; /* no forced centering */
}

/* Desktop: closer to logo, slimmer */
@media (min-width: 992px) {
    .efl-header .search-container {
        max-width: 500px !important;
        margin-left: 50px !important; /* nudge towards logo */
    }
}

/* Mobile/tablet: full width, no left margin */
@media (max-width: 991.98px) {
    .efl-header .search-container {
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

/* Outer pill = the form with class .no-submit */
.efl-header .search-container form.no-submit {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
    position: relative;
}

    /* Focus glow on pill */
    .efl-header .search-container form.no-submit:focus-within {
        border-color: #3f69a8;
        box-shadow: 0 0 0 4px rgba(63,105,168,.12);
    }

    /* Magnifier (no markup change) */
    .efl-header .search-container form.no-submit::before {
        content: "";
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        opacity: .65;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px 18px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23677385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
    }

/* Kill the inner box coming from the view's inline <style> */
.efl-header .search-container input.no-submit[type="search"],
.efl-header .search-container #small-searchterms.no-submit[type="search"],
.efl-header .search-container input[type="search"] {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    appearance: none;
    -webkit-appearance: none;
    height: 34px !important; /* slim */
    line-height: 34px !important;
    padding: 0 10px !important; /* left icon handled by ::before */
    font-size: 14px;
    color: #111827;
}

    .efl-header .search-container input[type="search"]::placeholder {
        color: #6b7280;
    }

    /* WebKit clear button — nicer look */
    .efl-header .search-container input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        cursor: pointer;
        opacity: .75;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2399a1b3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>') no-repeat center;
    }

/* jQuery UI Autocomplete — card */
.ui-autocomplete {
    max-width: 760px;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 6px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
    background: #fff !important;
    overflow: hidden;
    z-index: 10000;
}

    .ui-autocomplete .ui-menu-item a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px !important;
        border-radius: 8px;
        color: #111827 !important;
        text-decoration: none !important;
        font-size: 15px;
    }

    .ui-autocomplete .ui-state-active {
        background: #eff4ff !important;
        border: none !important;
        color: #0f172a !important;
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .efl-header .search-container form.no-submit {
        transition: none;
    }
}

/* =========================================================
   4) Menu (desktop + mobile) — theme pieces you kept inline
   (kept here; no <style> tag inside CSS)
   ========================================================= */

.top-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .top-menu li {
        position: relative;
    }

    .top-menu a {
        text-decoration: none;
    }

/* Theme vars */
:root {
    --efl-blue: #00528e;
    --efl-blue-dark: #003c66;
    --efl-dd-bg: #00528e;
    --efl-dd-item: #005b95;
    --efl-dd-hover: #1f2a86;
    --efl-white: #ffffff;
    --efl-text: #111827;
}

/* Desktop menu */
.top-menu.notmobile {
    display: none;
    background: var(--efl-blue);
}

    .top-menu.notmobile > li {
        display: inline-block;
        margin: 0;
    }

        .top-menu.notmobile > li > a {
            display: inline-block;
            color: var(--efl-white);
            font-weight: 700;
            text-transform: uppercase;
            font-size: .9rem;
            white-space: nowrap;
        }

            .top-menu.notmobile > li > a:hover,
            .top-menu.notmobile > li > a:focus {
                background: var(--efl-blue-dark);
                color: var(--efl-white);
                outline: none;
            }

    /* Dropdown (desktop) default look (positioning is handled earlier) */
    .top-menu.notmobile .sublist {
        top: 100%;
        left: 0;
        min-width: 260px;
        background: var(--efl-dd-bg) !important;
        border: 0 !important;
        box-shadow: 0 10px 28px rgba(0,0,0,.18);
        padding: 0 !important;
        display: none;
        z-index: 1000;
    }

    .top-menu.notmobile li:hover > .sublist,
    .top-menu.notmobile li:focus-within > .sublist {
        display: block;
    }

    .top-menu.notmobile .sublist li {
        display: block;
    }

        .top-menu.notmobile .sublist li > a {
            display: block;
            color: var(--efl-white) !important;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .5px;
            background: var(--efl-dd-item);
            border-bottom: 1px solid rgba(255,255,255,.08);
            position: relative;
        }

            .top-menu.notmobile .sublist li > a::before {
                content: "";
                position: absolute;
                top: 50%;
                width: .45rem;
                height: .45rem;
                background: var(--efl-white);
                transform: translateY(-50%);
                border-radius: 1px;
                opacity: .95;
            }

            .top-menu.notmobile .sublist li > a:hover,
            .top-menu.notmobile .sublist li > a:focus {
                background: var(--efl-dd-hover) !important;
                color: var(--efl-white) !important;
            }

        .top-menu.notmobile .sublist li:first-child > a {
            background: var(--efl-dd-hover);
        }

/* Mobile menu */
.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--efl-blue);
    color: var(--efl-white);
    padding: .75rem 1rem;
    cursor: pointer;
    user-select: none;
    border-radius: .25rem;
    outline: none;
}

    .menu-toggle:focus {
        box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    }

.top-menu.mobile {
    display: none;
    background: #fff;
    border: 1px solid rgba(0,0,0,.075);
    border-radius: .25rem;
    margin-top: .5rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

    .top-menu.mobile > li > a {
        display: block;
        padding: .75rem 1rem;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--efl-menu-bar);
        background: #f7f9fb;
        border-bottom: 1px solid rgba(0,0,0,.05);
    }

    .top-menu.mobile .sublist-toggle {
        position: absolute;
        right: .75rem;
        top: .9rem;
        width: 1rem;
        height: 1rem;
        cursor: pointer;
    }

    .top-menu.mobile .sublist {
        display: none;
        background: var(--efl-dd-bg);
        margin-left: 0;
        border-left: 0;
    }

        .top-menu.mobile .sublist li > a {
            color: var(--efl-white);
            background: var(--efl-dd-item);
            border-bottom: 1px solid rgba(255,255,255,.08);
            padding: .75rem 1rem .75rem 1.75rem;
            position: relative;
        }

            .top-menu.mobile .sublist li > a::before {
                content: "";
                position: absolute;
                left: .9rem;
                top: 50%;
                width: .45rem;
                height: .45rem;
                background: var(--efl-white);
                transform: translateY(-50%);
                border-radius: 1px;
            }

            .top-menu.mobile .sublist li > a:hover,
            .top-menu.mobile .sublist li > a:focus {
                background: var(--efl-dd-hover);
            }

/* Breakpoint: show desktop menu */
@media (min-width: 992px) {
    .menu-toggle {
        display: none;
    }

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

    .top-menu.notmobile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* =========================================================
   5) Identity cluster (username, cart, logout) — colours
   ========================================================= */

.efl-header .identity-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    padding-right: 10px;
}

    /* Username in brand blue */
    .efl-header .identity-bar .user-name {
        color: #0a65a8;
        font-weight: 600;
        white-space: nowrap;
        margin: 0 6px 0 4px;
    }

    /* Base icon buttons */
    .efl-header .identity-bar .esh-identity-item,
    .efl-header .identity-bar .logout-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        text-decoration: none;
        position: relative;
        transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
    }

        .efl-header .identity-bar .esh-identity-item i,
        .efl-header .identity-bar .logout-btn i {
            font-size: 20px;
            line-height: 1;
        }

        /* Cart/trolley — solid blue tile with white icon */
        .efl-header .identity-bar .esh-identity-item.cart-btn {
            background: #0a65a8;
            color: #ffffff;
        }

            .efl-header .identity-bar .esh-identity-item.cart-btn:hover {
                background: #004e84;
                transform: translateY(-1px);
                box-shadow: 0 6px 16px rgba(0,0,0,.18);
            }
a.esh-identity-item.icon-btn {
    border: none !important; /* Use !important cautiously if needed to override existing styles */
    outline: none !important; /* Also remove outline if present */
}

    /* Cart badge */
    .efl-header .identity-bar .cart-btn .cart-count {
        position: absolute;
        top: -8px;
        right: -6px;
        min-width: 20px;
        padding: 2px 6px;
        border-radius: 999px;
        background: #ff3b3b;
        color: #fff;
        font-weight: 700;
        font-size: 12px;
        line-height: 1;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,.25);
        z-index: 1;
    }

    /* Logout — white pill with blue outline/icon (invert on hover) */
    .efl-header .identity-bar .logout-btn {
        background: #ffffff;
        color: #0a65a8;
        border: 2px solid #0a65a8;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
    }

        .efl-header .identity-bar .logout-btn:hover {
            background: #0a65a8;
            color: #ffffff;
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0,0,0,.18);
        }

/* Small screens: tidy */
@media (max-width: 575.98px) {
    .efl-header .identity-bar .user-name {
       /* display: none;*/
    }

    .efl-header .identity-bar .esh-identity-item,
    .efl-header .identity-bar .logout-btn {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

        .efl-header .identity-bar .esh-identity-item i,
        .efl-header .identity-bar .logout-btn i {
            font-size: 18px;
        }
}
/* === Search next to logo (desktop) === */
@media (min-width: 992px) {
    /* tighten horizontal gutter in the header row a bit */
    .efl-header .header-lower .row {
        --bs-gutter-x: 1rem; /* default is 1.5rem; smaller = closer */
    }

    /* pin the search box ~50px from the logo, left-aligned (not centered) */
    .efl-header .search-container {
        max-width: 520px !important;
        margin: 0 0 0 50px !important; /* top right bottom left */
    }
}

/* keep mobile/tablet full width */
@media (max-width: 991.98px) {
    .efl-header .search-container {
        max-width: 100% !important;
        margin: 0 !important;
    }
}
/* === Force search to sit ~50px right of the logo (desktop) === */
@media (min-width: 992px) {
    /* make the search column a flex row so children align from the left */
    .efl-header .header-lower .row > .col-md {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /* kill any inherited centering and nudge from the logo */
    .efl-header .search-container {
        max-width: 520px !important;
        margin: 0 0 0 50px !important; /* top right bottom left */
        margin-right: 0 !important; /* defeat margin:auto from older rules */
        display: inline-block; /* prevents flex stretching/centering */
    }
}

/* keep mobile/tablet full width */
@media (max-width: 991.98px) {
    .efl-header .search-container {
        max-width: 100% !important;
        margin: 0 !important;
    }
}
/* Make the row a bit tighter so search sits closer to logo */
.efl-header .header-lower .row {
    --bs-gutter-x: 1rem;
}

/* Logo sizing */
.efl-header .header-logo img {
    max-height: 56px;
    height: auto;
    width: auto;
}

/* Search sits ~50px from the logo on desktop, full width on mobile */
.efl-header .search-wrap {
    max-width: 560px;
}

@media (min-width:992px) {
    .efl-header .search-wrap {
        margin-left: 50px;
    }
}

@media (max-width:991.98px) {
    .efl-header .search-wrap {
        margin-left: 0;
        max-width: 100%;
    }
}
/* ======================
   Modern Search Bar
   ====================== */
.search-wrap form.no-submit {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px; /* pill */
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

/* focus glow */
.search-wrap form.no-submit:focus-within {
    border-color: #0a65a8;
    box-shadow: 0 0 0 4px rgba(10,101,168,.15);
}

/* magnifying glass icon */
.search-wrap form.no-submit::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    opacity: .65;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23677385" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
}

/* input field */
.search-wrap input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    height: 30px;
    border: none !important;
    outline: none;
    background: transparent !important;
    font-size: 16px;
    color: #111827;
    padding: 0 8px;
}

.search-wrap input[type="search"]::placeholder {
    color: #6b7280;
    font-size: 15px;
}