@import url("fonts/urbanist.css");

/*
 * Bulky storefront header
 * A self-contained header layer: quiet surfaces, useful hierarchy and
 * restrained colour. It intentionally does not inherit the older header look.
 */

.bulky-header-v3 {
    --bh-ink: #26374a;
    --bh-ink-strong: #142335;
    --bh-muted: #7c8494;
    --bh-orange: #e8801f;
    --bh-orange-deep: #c76912;
    --bh-orange-soft: #fbeee0;
    /* The light orange used on the "See All" category tile card. */
    --bh-surface: #fff7ec;
    --bh-surface-soft: #f3efe8;
    --bh-neutral-soft: #f1ece3;
    --bh-line: #e6e0d4;
    --bh-line-strong: #ddd2bf;
    --bh-shadow: 0 10px 28px rgba(30, 26, 20, .06);
    background: var(--bh-surface) !important;
    border: 0;
    color: var(--bh-ink);
    font-family: Urbanist, "Cairo", "Segoe UI", sans-serif;
    position: relative;
    z-index: 1030;
}

.bulky-header-v3 .content-wrapper,
.bulky-header-v3 .bulky-site-header {
    background: var(--bh-surface) !important;
    border: 0;
}

/* Same surface as the row below it, so the two header rows read as one. */
.bulky-storefront .bulky-header-v3 .bulky-topbar {
    background: var(--bh-surface) !important;
    border: 0 !important;
    color: var(--bh-muted) !important;
    min-height: 36px !important;
    padding-top: 3px !important;
}

.bulky-header-v3 .bulky-topbar-inner {
    min-height: 33px !important;
    padding-block: .12rem !important;
}

.bulky-header-v3 .bulky-topbar-controls,
.bulky-header-v3 .bulky-header-auth-desktop {
    gap: .5rem !important;
}

.bulky-header-v3 .language-select {
    margin-inline: 0 .25rem !important;
}

.bulky-header-v3 .language-select > .dropdown-toggle,
.bulky-header-v3 .language-select > .dropdown-toggle:visited,
.bulky-header-v3 .language-select > .dropdown-toggle:hover,
.bulky-header-v3 .language-select > .dropdown-toggle:focus,
.bulky-header-v3 .language-select > .dropdown-toggle:active {
    align-items: center;
    background: transparent !important;
    border: 0;
    border-radius: 999px;
    color: var(--bh-ink-strong) !important;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    gap: .35rem;
    min-height: 27px;
    padding: .2rem .65rem !important;
}

.bulky-header-v3 .language-select > .dropdown-toggle span,
.bulky-header-v3 .language-select > .dropdown-toggle::after {
    color: var(--bh-ink-strong) !important;
}

.bulky-header-v3 .language-select > .dropdown-toggle::after {
    border-top-color: var(--bh-ink-strong) !important;
}

/* The theme replaces the caret with an icon glyph but keeps the caret's 0x0 box, which dropped the glyph below the text. */
.bulky-header-v3 .language-select > .dropdown-toggle::after {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 0.9em;
    line-height: 1;
    vertical-align: middle !important;
}

.bulky-header-v3 .language-select .dropdown-menu,
.bulky-header-v3 .bulky-account-dropdown {
    background: #fff !important;
    border: 1px solid var(--bh-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 38px rgba(27, 54, 79, .13) !important;
    margin-top: .45rem;
    overflow: hidden;
}

/* Same edge-of-row fix as the language dropdown: the account menu also
 * sits at the far end of row one, so pin it to the correct physical side
 * per mode instead of trusting .dropdown-menu-end. */
.bulky-header-v3 .bulky-header-auth-desktop .bulky-account-dropdown {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

.bulky-storefront[data-is-rtl="1"] .bulky-header-v3 .bulky-header-auth-desktop .bulky-account-dropdown {
    left: 0 !important;
    right: auto !important;
}

.bulky-header-v3 .language-select .dropdown-item,
.bulky-header-v3 .bulky-account-dropdown .dropdown-item {
    color: var(--bh-ink) !important;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
}

.bulky-header-v3 .language-select .dropdown-item:hover,
.bulky-header-v3 .language-select .dropdown-item:focus,
.bulky-header-v3 .bulky-account-dropdown .dropdown-item:hover,
.bulky-header-v3 .bulky-account-dropdown .dropdown-item:focus {
    background: var(--bh-orange-soft) !important;
    color: var(--bh-orange-deep) !important;
}

.bulky-header-v3 .bulky-auth-link,
.bulky-header-v3 .bulky-account-trigger {
    align-items: center;
    background: #ffffff !important;
    border: 1px solid var(--bh-line-strong);
    border-radius: 999px;
    color: var(--bh-ink-strong) !important;
    display: inline-flex;
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    min-height: 27px;
    padding: .2rem .78rem;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.bulky-header-v3 .bulky-auth-login:hover,
.bulky-header-v3 .bulky-auth-login:focus,
.bulky-header-v3 .bulky-auth-register:hover,
.bulky-header-v3 .bulky-auth-register:focus,
.bulky-header-v3 .bulky-auth-register:active,
.bulky-header-v3 .bulky-account-trigger:hover,
.bulky-header-v3 .bulky-account-trigger:focus {
    background: var(--bh-orange) !important;
    border-color: var(--bh-orange) !important;
    color: #fff !important;
}

.bulky-header-v3 .bulky-auth-divider {
    display: none !important;
}

.bulky-header-v3 .bulky-navbar {
    background: var(--bh-surface) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bh-line) !important;
    box-shadow: var(--bh-shadow) !important;
    min-height: 0 !important;
    overflow: visible;
    padding: 0 !important;
}

.bulky-header-v3 .bulky-navbar::after {
    content: none !important;
}

.bulky-header-v3 .bulky-navbar-shell {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    min-height: 0 !important;
}

.bulky-header-v3 .bulky-brand {
    align-items: center;
    align-self: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex;
    flex: 0 0 176px !important;
    height: 76px !important;
    margin: 0 1.6rem 0 0 !important;
    order: 1;
    padding: .65rem 0 !important;
    transform: none !important;
}

[dir="rtl"] .bulky-header-v3 .bulky-brand,
.bulky-storefront[data-is-rtl="1"] .bulky-header-v3 .bulky-brand {
    margin: 0 0 0 1.6rem !important;
}

.bulky-header-v3 .bulky-brand .brand-logo-link {
    height: auto !important;
    max-height: 47px !important;
    max-width: 164px !important;
    object-fit: contain;
    width: auto !important;
}

.bulky-header-v3 .bulky-header-search {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--bh-line);
    border-radius: 13px;
    color: var(--bh-muted);
    cursor: pointer;
    display: flex;
    /* No flex-grow: a growing search bar competes with
     * .bulky-navbar-actions' margin-inline-start:auto for the row's free
     * space, so on wide/ultra-wide viewports (the container caps out at
     * 1320px past 1400px, same as any wider screen) the search bar ate most
     * of the free space and the account/login block landed short of the
     * true edge instead of sitting flush against it. */
    flex: 0 1 440px;
    gap: .75rem;
    height: 50px;
    margin: 0;
    max-width: 540px;
    min-width: 260px;
    order: 2;
    padding: .3rem .35rem .3rem 1rem;
    text-align: start;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

[dir="rtl"] .bulky-header-v3 .bulky-header-search,
.bulky-storefront[data-is-rtl="1"] .bulky-header-v3 .bulky-header-search {
    padding: .3rem 1rem .3rem .35rem;
}

.bulky-header-v3 .bulky-header-search:hover,
.bulky-header-v3 .bulky-header-search:focus {
    background: #fff;
    border-color: var(--bh-line-strong);
    box-shadow: 0 0 0 4px rgba(232, 128, 31, .08);
    outline: 0;
}

.bulky-header-v3 .bulky-header-search > i {
    color: var(--bh-ink);
    flex: 0 0 auto;
    font-size: 20px;
}

.bulky-header-v3 .bulky-header-search-placeholder {
    color: #657789;
    flex: 1 1 auto;
    font-family: inherit;
    font-size: .88rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulky-header-v3 .bulky-header-search-button {
    align-items: center;
    background: var(--bh-ink-strong);
    border-radius: 10px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    height: 40px;
    justify-content: center;
    min-width: 82px;
    padding-inline: 1rem;
}

.bulky-header-v3 .bulky-navbar-actions {
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    /* The theme's .ms-auto utility (also on this element in the markup) is
     * a legacy build that hardcodes margin-left instead of a logical
     * property, so in RTL it fights the margin-inline-start above and the
     * two auto margins on opposite physical sides centre the block instead
     * of flushing it to the true edge. Force the other side back to 0. */
    margin-inline-end: 0 !important;
    order: 4;
    padding-inline-start: 1rem;
}

.bulky-header-v3 .bulky-action-tray {
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: .25rem;
    padding: 0 !important;
}

.bulky-header-v3 .bulky-action-tray .desktop-search {
    display: none !important;
}

.bulky-header-v3 .bulky-action-tray .bulky-icon-button,
.bulky-header-v3 .bulky-action-tray .offcanvas-nav-btn,
.bulky-header-v3 .bulky-header-quick-actions .bulky-icon-button {
    align-items: center;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    color: var(--bh-ink) !important;
    display: inline-flex;
    height: 42px !important;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    width: 42px !important;
}

.bulky-header-v3 .bulky-action-tray .bulky-icon-button:hover,
.bulky-header-v3 .bulky-action-tray .bulky-icon-button:focus,
.bulky-header-v3 .bulky-action-tray .offcanvas-nav-btn:hover,
.bulky-header-v3 .bulky-action-tray .offcanvas-nav-btn:focus,
.bulky-header-v3 .bulky-header-quick-actions .bulky-icon-button:hover,
.bulky-header-v3 .bulky-header-quick-actions .bulky-icon-button:focus {
    background: var(--bh-neutral-soft) !important;
    border-color: var(--bh-line-strong) !important;
    color: var(--bh-ink-strong) !important;
}

.bulky-header-v3 .bulky-action-tray .bulky-cart-action,
.bulky-header-v3 .bulky-action-tray .bulky-cart-action:hover,
.bulky-header-v3 .bulky-action-tray .bulky-cart-action:focus,
.bulky-header-v3 .bulky-header-quick-actions .bulky-cart-action,
.bulky-header-v3 .bulky-header-quick-actions .bulky-cart-action:hover,
.bulky-header-v3 .bulky-header-quick-actions .bulky-cart-action:focus {
    background: var(--bh-orange-soft) !important;
    border-color: #f5d0b1 !important;
    color: var(--bh-ink-strong) !important;
}

.bulky-header-v3 .bulky-action-icon {
    color: currentColor !important;
    font-size: 20px !important;
    margin: 0 !important;
}

.bulky-header-v3 .bulky-action-tray .badge-cart,
.bulky-header-v3 .bulky-header-quick-actions .badge-cart {
    align-items: center;
    background: var(--bh-orange-deep) !important;
    border: 2px solid #fff !important;
    border-radius: 999px;
    color: #fff !important;
    display: flex;
    font-size: 8px;
    font-weight: 700;
    height: 17px;
    inset-inline-end: -4px;
    justify-content: center;
    margin: 0 !important;
    min-width: 17px;
    padding: 0 3px;
    /* Must win over a competing `position: relative` (some badge/theme
     * default) -- otherwise the badge stays a real flex sibling of the icon
     * and .bulky-cart-action's justify-content:center centers the icon+badge
     * pair together, pushing the icon off-centre by half the badge's width. */
    position: absolute !important;
    top: -4px;
}

.bulky-header-v3 .bulky-action-tray .badge-cart:empty,
.bulky-header-v3 .bulky-header-quick-actions .badge-cart:empty {
    display: none !important;
}

.bulky-header-v3 .bulky-header-quick-actions {
    gap: .35rem;
    order: 3;
    margin-inline-start: .6rem;
    margin-inline-end: 0;
}

.bulky-header-v3 .bulky-menu {
    background: transparent !important;
    border-top: 1px solid rgba(20, 35, 53, .22) !important;
    flex: 0 0 100% !important;
    justify-content: flex-start !important;
    order: 5;
    width: 100% !important;
}

.bulky-header-v3 .bulky-menu .offcanvas-body {
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

.bulky-header-v3 .bulky-nav {
    align-items: center;
    gap: 2rem !important;
    min-height: 47px;
}

.bulky-header-v3 .bulky-nav .bulky-header-lang-row {
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    position: relative;
}

/* This dropdown sits at the very end of the row, so it must always open
 * hanging back toward the page, never toward the viewport edge -- the
 * theme's own .dropdown-menu-end resolves to physical left/right and gets
 * this backwards once the RTL stylesheet bundle is in play. It also inherits
 * a generic `.language-select .dropdown-menu { left:50%; transform:
 * translateX(-50%) }` centering rule from the theme, which stacks on top of
 * left/right and throws the menu off to one side -- cancel the transform too. */
.bulky-header-v3 .bulky-header-lang-row .dropdown-menu {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

.bulky-storefront[data-is-rtl="1"] .bulky-header-v3 .bulky-header-lang-row .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

.bulky-header-v3 .bulky-nav .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--bh-ink) !important;
    font-family: inherit;
    font-size: .84rem !important;
    font-weight: 650;
    letter-spacing: .005em;
    line-height: 1.2;
    padding: .86rem 0 .72rem !important;
}

.bulky-header-v3 .bulky-nav .nav-link:hover,
.bulky-header-v3 .bulky-nav .nav-link:focus {
    background: transparent !important;
    border-bottom-color: var(--bh-line-strong) !important;
    color: var(--bh-ink-strong) !important;
}

.bulky-header-v3 .bulky-nav .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--bh-orange) !important;
    box-shadow: none !important;
    color: var(--bh-orange-deep) !important;
}

.bulky-header-v3 .bulky-nav .nav-link::after {
    content: none !important;
}

.bulky-header-v3 .mobile-searchbar {
    background: #fff !important;
    border: 0;
    border-bottom: 1px solid var(--bh-line);
}

@media (max-width: 1199.98px) {
    .bulky-header-v3 .bulky-brand {
        flex-basis: 158px !important;
        margin-inline-end: 1.1rem !important;
    }

    .bulky-header-v3 .bulky-brand .brand-logo-link {
        max-width: 148px !important;
    }

    .bulky-header-v3 .bulky-header-search {
        max-width: 440px;
    }

    .bulky-header-v3 .bulky-nav {
        gap: 1.55rem !important;
    }
}

@media (max-width: 991.98px) {
    .bulky-header-v3 .bulky-navbar {
        box-shadow: 0 5px 18px rgba(27, 54, 79, .055) !important;
        padding: .2rem .7rem 0 !important;
    }

    .bulky-header-v3 .bulky-navbar-shell {
        flex-wrap: nowrap !important;
        min-height: 60px !important;
    }

    .bulky-header-v3 .bulky-brand {
        flex: 0 1 142px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: .45rem 0 !important;
    }

    [dir="rtl"] .bulky-header-v3 .bulky-brand,
    .bulky-storefront[data-is-rtl="1"] .bulky-header-v3 .bulky-brand {
        margin: 0 !important;
    }

    .bulky-header-v3 .bulky-brand .brand-logo-link {
        max-height: 37px !important;
        max-width: 124px !important;
    }

    .bulky-header-v3 .bulky-header-search {
        display: none !important;
    }

    .bulky-storefront .bulky-header-v3 .bulky-navbar-actions {
        margin-inline-start: 0 !important;
        padding-inline-start: 0 !important;
    }

    .bulky-header-v3 .bulky-action-tray {
        padding-inline: 0 !important;
    }

    .bulky-header-v3 .bulky-action-tray > .nav-item {
        margin-inline: 0 !important;
    }

    /* Cart sits with the menu button on the right; the logo keeps the left. */
    .bulky-header-v3 .bulky-header-quick-actions {
        order: 3;
        margin-inline-start: auto;
        margin-inline-end: .5rem;
    }

    /* Language switcher on the left of the top row, sign-in on the right. */
    .bulky-header-v3 .bulky-topbar-auth,
    .bulky-header-v3 .bulky-topbar-controls {
        width: 100%;
    }

    .bulky-storefront .bulky-header-v3 .bulky-topbar .bulky-topbar-controls .language-select {
        margin-inline-start: 0 !important;
        margin-inline-end: auto !important;
    }

    /* The drawer and its backdrop live inside .bulky-navbar (z 1020), while
     * .bulky-topbar sits beside it at z 1035 -- so the topbar paints over the
     * open drawer. Lift the navbar above it only while the drawer is open. */
    .bulky-header-v3 .bulky-navbar.is-drawer-open,
    .bulky-header-v3 .bulky-navbar:has(.offcanvas.show),
    .bulky-header-v3 .bulky-navbar:has(.offcanvas.showing),
    .bulky-header-v3 .bulky-navbar:has(.offcanvas.hiding) {
        z-index: 1050 !important;
    }

    .bulky-storefront .bulky-header-v3 .bulky-menu {
        background: #142335 !important;
        border-top: 0;
        flex: initial !important;
        order: initial;
        width: min(320px, 84vw) !important;
    }

    .bulky-storefront .bulky-header-v3 .bulky-menu .offcanvas-header {
        background: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
    }

    .bulky-header-v3 .bulky-menu .offcanvas-header .btn-close {
        filter: invert(1) grayscale(1) brightness(1.6);
        opacity: .85;
    }

    /* Real white-with-orange-accent wordmark asset -- no light card needed
     * on the navy drawer any more. */
    .bulky-header-v3 .bulky-menu .offcanvas-header .bulky-drawer-logo {
        display: inline-flex;
        align-items: center;
    }

    .bulky-header-v3 .bulky-menu .offcanvas-header img {
        background: transparent !important;
        border-radius: 0 !important;
        height: auto !important;
        max-height: 34px !important;
        max-width: 150px !important;
        padding: 0 !important;
        width: auto !important;
    }

    .bulky-header-v3 .bulky-menu .offcanvas-body {
        padding: 1rem !important;
    }

    .bulky-header-v3 .bulky-nav {
        align-items: stretch;
        gap: .2rem !important;
    }

    .bulky-header-v3 .bulky-nav .nav-link {
        border-bottom: 0 !important;
        border-inline-start: 3px solid transparent !important;
        border-radius: 8px !important;
        font-size: .92rem !important;
        padding: .8rem .9rem !important;
    }

    .bulky-storefront .bulky-header-v3 .bulky-nav .nav-link {
        color: #e9edf3 !important;
    }

    .bulky-storefront .bulky-header-v3 .bulky-nav .nav-link:hover,
    .bulky-storefront .bulky-header-v3 .bulky-nav .nav-link:focus {
        background: rgba(255, 255, 255, .06) !important;
        border-inline-start-color: rgba(255, 255, 255, .35) !important;
        color: #fff !important;
    }

    .bulky-storefront .bulky-header-v3 .bulky-nav .nav-link.active {
        background: rgba(255, 255, 255, .07) !important;
        border-inline-start-color: var(--bh-orange) !important;
        color: #ffb45c !important;
    }

    /* Drawer sections: account / sign-in, then language. */
    .bulky-header-v3 .bulky-nav .bulky-drawer-divider {
        border-top: 1px solid rgba(255, 255, 255, .12);
        margin: .6rem 0 .35rem;
    }

    .bulky-header-v3 .bulky-nav .bulky-drawer-label {
        align-items: center;
        color: rgba(255, 255, 255, .55);
        display: flex;
        font-size: .74rem;
        font-weight: 700;
        gap: .4rem;
        letter-spacing: .06em;
        padding: .3rem .9rem .2rem;
        text-transform: uppercase;
    }

    .bulky-header-v3 .bulky-nav .bulky-drawer-label .uil {
        color: var(--bh-orange);
        font-size: 1rem;
    }

    .bulky-header-v3 .mobile-searchbar {
        padding: .38rem .7rem .6rem !important;
    }

    .bulky-header-v3 .mobile-search .select2-container--default .select2-selection--single {
        background: #ffffff !important;
        border: 1px solid var(--bh-line) !important;
        border-radius: 11px !important;
        box-shadow: none !important;
        min-height: 40px;
    }

    .bulky-header-v3 .mobile-search .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--bh-muted) !important;
        font-family: inherit;
        font-size: .82rem;
        line-height: 38px !important;
        padding-inline: .9rem 2.25rem !important;
    }
}

@media (max-width: 575.98px) {
    .bulky-header-v3 .bulky-topbar {
        min-height: 38px !important;
    }

    .bulky-header-v3 .bulky-topbar-inner {
        justify-content: flex-end !important;
        min-height: 35px !important;
    }

    .bulky-header-v3 .bulky-topbar .language-select {
        margin-inline: 0 !important;
    }

    .bulky-header-v3 .bulky-auth-link {
        font-size: .7rem;
        padding-inline: .5rem;
    }

    .bulky-header-v3 .bulky-brand {
        flex-basis: 122px !important;
    }

    .bulky-header-v3 .bulky-brand .brand-logo-link {
        max-width: 110px !important;
    }

    .bulky-header-v3 .bulky-action-tray {
        gap: .12rem !important;
    }

    .bulky-header-v3 .bulky-action-tray .bulky-icon-button,
    .bulky-header-v3 .bulky-action-tray .offcanvas-nav-btn,
    .bulky-header-v3 .bulky-header-quick-actions .bulky-icon-button {
        height: 38px !important;
        width: 38px !important;
    }

    .bulky-header-v3 .bulky-header-quick-actions {
        margin-inline-end: .5rem;
    }
}

[dir="rtl"] .bulky-header-v3,
.bulky-storefront[data-is-rtl="1"] .bulky-header-v3 {
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}