.site-header {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
}
[data-bs-theme=dark] .site-header { background: var(--basic-surface-bg); }
.site-header > .container { position: relative; }
.site-header .site-logo { block-size: 2.15rem; max-inline-size: 11rem; }
.topbar { background: #3357a1; color: #fff; font-size: .82rem; }
[data-bs-theme=dark] .topbar { background: #1e3a6e; }
.topbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.25rem;
}
.topbar-left, .topbar-right, .topbar-social { display: flex; align-items: center; gap: .9rem; }
.topbar a, .topbar .topbar-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #fff;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    white-space: nowrap;
}
.topbar a:hover, .topbar .topbar-link:hover { color: #fff; opacity: .85; }
.header-search-btn, .header-cart-btn {
    display: inline-grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: #fff;
    text-decoration: none;
    border: 0;
}
.header-search-btn { border-radius: 50%; background: #4c85dc; }
.header-cart-btn { border-radius: .45rem; background: #4fc53d; }
.header-search-btn:hover, .header-cart-btn:hover { color: #fff; filter: brightness(.95); }
.header-cart-btn .cart-count { inset-block-start: -.25rem; inset-inline-end: -.25rem; }
@media (min-width: 992px) {
    .site-nav .nav-link {
        color: #243044;
        font-weight: 600;
        background: transparent;
    }
    .site-nav .nav-link:hover,
    .site-nav .dropdown:hover > .nav-link,
    .site-nav .dropdown:focus-within > .nav-link { color: #e8892d; background: transparent; }
    [data-bs-theme=dark] .site-nav .nav-link { color: var(--basic-heading-color); }
}
@media (min-width: 992px) {
    .site-header > nav.container.d-flex {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .site-header > nav.container > .site-nav { justify-content: center; }
    .site-header > nav.container > .ms-auto { justify-self: end; }
}
.site-nav .dropdown:has(> .nav-mega) { position: static; }
.site-nav .dropdown:has(> .nav-mega):hover::after,
.site-nav .dropdown:has(> .nav-mega):focus-within::after {
    content: "";
    position: absolute;
    z-index: 21;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: .75rem;
}
.nav-mega {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    inset-block-start: 100%;
    inline-size: auto;
    max-block-size: min(72vh, 36rem);
    margin: 0;
    padding: 1rem 1rem .75rem;
    overflow: auto;
    list-style: none;
    border: 0;
    border-radius: 0 0 calc(var(--basic-radius) * 1.6) calc(var(--basic-radius) * 1.6);
    background-color: var(--basic-surface-bg);
    box-shadow: var(--basic-shadow-lg);
    transform: none;
}
.nav-mega a { text-decoration: none; }
.nav-mega .row { --bs-gutter-y: .75rem; }
.nav-mega .menu-item { position: relative; }
.nav-mega .menu-item + .menu-item { margin-top: .5rem; }
.nav-mega .menu-item:not(.menu-list):not(.featured-column) > a:not(.btn) {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 4.5rem;
    padding: .7rem .8rem;
    border: 1px solid var(--basic-border-color);
    border-radius: calc(var(--basic-radius) * 1.2);
    background: var(--basic-surface-bg);
    color: var(--basic-body-color);
}
.nav-mega .menu-item:not(.menu-list):not(.featured-column) > a:not(.btn):hover {
    border-color: var(--basic-primary);
    box-shadow: var(--basic-shadow);
}
.nav-mega .menu-item > a > i,
.nav-mega .menu-featured .menu-box > i {
    display: grid;
    place-items: center;
    flex: 0 0 2.75rem;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: .6rem;
    background: var(--basic-primary-subtle);
    color: var(--basic-primary);
    font-size: 1.15rem;
}
.nav-mega .menu-item > a:hover > i {
    background: var(--basic-primary);
    color: var(--basic-on-primary);
}
.nav-mega i.success-bg { background: color-mix(in srgb, var(--basic-success) 16%, var(--basic-surface-bg)); color: var(--basic-success); }
.nav-mega i.danger-bg { background: color-mix(in srgb, var(--bs-danger) 14%, var(--basic-surface-bg)); color: var(--bs-danger); }
.nav-mega i.warning-bg { background: color-mix(in srgb, var(--bs-warning) 28%, var(--basic-surface-bg)); color: #9a6700; }
.nav-mega i.pink-bg { background: #fce7f3; color: #be185d; }
.nav-mega i.purple-bg { background: #ede9fe; color: #6d28d9; }
.nav-mega i.default-bg { background: var(--basic-primary-subtle); color: var(--basic-heading-color); }
.nav-mega .menu-title { display: block; font-size: .78rem; line-height: 1.35; color: var(--basic-muted-color); }
.nav-mega .menu-title h5,
.nav-mega .menu-list h4 {
    margin: 0 0 .15rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--basic-heading-color);
}
.nav-mega .menu-item > a:hover h5 { color: var(--basic-primary); }
.nav-mega .menu-list {
    height: 100%;
    padding: .9rem 1rem;
    border: 1px solid var(--basic-border-color);
    border-radius: calc(var(--basic-radius) * 1.2);
    background: var(--basic-surface-bg);
}
.nav-mega .menu-list h4 {
    position: relative;
    margin-bottom: .7rem;
    padding-bottom: .55rem;
}
.nav-mega .menu-list h4::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    inline-size: 2.5rem;
    block-size: 3px;
    background: var(--basic-primary);
}
.nav-mega .menu-list a {
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: .25rem .25rem .25rem .15rem;
    color: var(--basic-body-color);
    font-size: .92rem;
}
.nav-mega .menu-list a + a { border-top: 1px solid var(--basic-border-color); }
.nav-mega .menu-list a:hover { color: var(--basic-primary); }
.nav-mega .menu-featured.featured-row,
.nav-mega .menu-featured.featured-column {
    height: 100%;
    border-radius: calc(var(--basic-radius) * 1.2);
    color: var(--basic-on-primary);
}
.nav-mega .menu-featured.primary-bg,
.nav-mega .menu-featured.featured-column { background-color: var(--basic-primary); }
.nav-mega .menu-featured.purple-bg { background-color: #5b4b8a; }
.nav-mega .menu-featured.featured-row {
    display: flex;
    align-items: center;
    padding: 1.1rem 1.25rem;
}
.nav-mega .menu-featured.featured-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .85rem;
    padding: 1.25rem 1.4rem;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 110px;
}
.nav-mega .menu-featured-title { display: block; font-size: 1.15rem; font-weight: 700; }
.nav-mega .menu-featured-desc { margin: .7rem 0 1rem; font-size: .82rem; line-height: 1.55; }
.nav-mega .menu-featured .menu-box { display: flex; align-items: center; gap: .75rem; }
.nav-mega .menu-featured .menu-box > i { background: rgba(255, 255, 255, .16); color: #fff; }
.nav-mega .menu-featured .menu-title,
.nav-mega .menu-featured h5,
.nav-mega .menu-featured h5 a { color: #fff; }
.nav-mega > li.menu-featured {
    margin: .85rem 0 0;
    padding: .85rem 1rem;
    border-radius: calc(var(--basic-radius) * 1.1);
    background: var(--basic-heading-color);
    color: #fff;
    text-align: center;
    font-size: .82rem;
}
.nav-mega > li.menu-featured strong { color: var(--basic-secondary); }
.nav-mega .fon-ribbon {
    position: absolute;
    inset-block-start: .45rem;
    inset-inline-end: .45rem;
    z-index: 1;
    padding: .12rem .45rem;
    border-radius: 999px;
    background: var(--basic-primary);
    color: var(--basic-on-primary);
    font-size: .65rem;
    font-weight: 700;
}
.nav-mega .menu-showcase { color: #fff; }
.drawer-mega.nav-mega {
    position: static;
    max-block-size: none;
    margin-top: .35rem;
    padding: .35rem 0 .5rem;
    overflow: visible;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}
.drawer-mega .row > [class*="col"],
.drawer-mega .row-cols-2 > *,
.drawer-mega .row-cols-4 > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
.drawer-mega .menu-featured.featured-column { min-block-size: 12rem; }
@media (prefers-reduced-motion: reduce) {
    .nav-mega .send-anim .mail,
    .nav-mega .send-anim .trail,
    .nav-mega .menu-showcase { animation: none; }
}