/* ============================================================
   awa-04-components.css
   AWA B2B Design System — Nav, Menu, Search & Minicart Components

   Consolidated from:
     awa-vertical-mega-menu.css
     megamenu-flyout.css
     awa-menu-mueller-global.css
     awa-phase7-header-nav.css
     awa-custom-header-minicart.css
     awa-custom-plp-search-cart-refine.css  (searchsuite only)
     awa-custom-post-themeoption-overrides.css  (component rules only)

   Scope: Desktop component rules only.
   Excluded: :root tokens, @media queries, page-scoped body.cms-* layout.
   !important retained where ThemeOption JS / Rokanthemes / Mirasvit inline styles compete.
   ============================================================ */


/* ████████████████████████████████████████████████████████████████
   SECTION 1 — VERTICAL MEGA MENU
   ████████████████████████████████████████████████████████████████ */

/* ── 1.1  Anti-clip overflow chain ─────────────────────────────
   Prevent overflow:hidden ancestors from clipping VMM flyouts.
   Source: megamenu-flyout.css                                   */

body .page-wrapper .header-control.header-nav,
body .page-wrapper .header-control.header-nav-global,
body .page-wrapper .header-control.header-nav-global > .container,
body .page-wrapper .header-control.header-nav-global > .container > .row,
body .page-wrapper .menu_left_home1,
body .page-wrapper .menu_left_home1 > .sections.nav-sections.category-dropdown,
body .page-wrapper .menu_left_home1 .section-items.nav-sections.category-dropdown-items,
body .page-wrapper .menu_left_home1 .section-item-content.nav-sections.category-dropdown-item-content,
body .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu:not(.navigation--mueller),
body .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu:not(.navigation--mueller) > ul.togge-menu.list-category-dropdown,
body .page-wrapper .menu_left_home1 .navigation.verticalmenu.side-verticalmenu:not(.navigation--mueller) > ul.togge-menu.list-category-dropdown > li.ui-menu-item.level0 {
    overflow: visible !important;
}

.sidebar-main,
.sidebar.sidebar-main,
.column.left,
.page-layout-2columns-left .column.main + .sidebar {
    overflow: visible !important;
}


/* ── 1.2  Trigger button (Todas as Categorias) ────────────────
   Source: awa-vertical-mega-menu.css §1                         */

.navigation.verticalmenu:not(.navigation--mueller) .title-category-dropdown,
nav.navigation.verticalmenu:not(.navigation--mueller) .our_categories.title-category-dropdown,
.navigation.verticalmenu:not(.navigation--mueller) h2.our_categories.title-category-dropdown {
    display: flex !important;
    align-items: center !important;
    gap: var(--awa-gap-md);
    padding: 0 20px;
    height: 48px;
    line-height: 1;
    background: linear-gradient(180deg, #c53a3e 0%, #b73337 50%, #a42e32 100%) !important;
    color: #fff !important;
    font-family: var(--awa-font-heading, 'Lexend', sans-serif);
    font-size: 13px;
    font-weight: var(--awa-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: var(--awa-radius-xs) var(--awa-radius-xs) 0 0;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    user-select: none;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    box-shadow: 0 2px 8px rgb(183 51 55 / 25%);
}

.navigation.verticalmenu:not(.navigation--mueller) .title-category-dropdown::before,
.navigation.verticalmenu:not(.navigation--mueller) h2.our_categories.title-category-dropdown::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 2px;
    background: #fff;
    box-shadow: 0 5px 0 #fff, 0 10px 0 #fff;
    border-radius: 1px;
}

.navigation.verticalmenu:not(.navigation--mueller) .title-category-dropdown:hover,
.navigation.verticalmenu:not(.navigation--mueller) .title-category-dropdown.active,
.navigation.verticalmenu:not(.navigation--mueller) h2.our_categories.title-category-dropdown:hover {
    background: linear-gradient(180deg, #a42e32 0%, #8e2629 50%, #7a2023 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgb(142 38 41 / 35%);
}


/* ── 1.3  Mega panel wrapper ──────────────────────────────────
   position:fixed escapes all overflow:hidden ancestors.
   JS injects --vmm-top / --vmm-left / --vmm-width.
   Source: awa-vertical-mega-menu.css §2                         */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown {
    position: fixed !important;
    top: var(--vmm-top, -9999px) !important;
    left: var(--vmm-left, 0) !important;
    z-index: 99999 !important;
    width: var(--vmm-width, 860px) !important;
    max-width: 95vw;
    display: none;
    background: #fff;
    border: 1px solid #e0e4ea;
    border-top: none;
    border-radius: 0 0 var(--awa-radius-sm) var(--awa-radius-sm);
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 6%),
        0 12px 28px -4px rgb(0 0 0 / 10%),
        0 24px 48px -8px rgb(0 0 0 / 5%);
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: visible;
    min-height: 360px;
    max-height: 78vh;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown.vmm-open {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    grid-auto-rows: auto;
    overflow: auto hidden;
    border-right: none;
    animation: vmm-panel-in 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes vmm-panel-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.995);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ── 1.4  Left column — L0 category items ─────────────────────
   Source: awa-vertical-mega-menu.css §3                         */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 {
    grid-column: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: #fafbfc !important;
    list-style: none !important;
    overflow: visible !important;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li:not(.ui-menu-item, .expand-category-link) {
    display: none !important;
}


/* ── 1.5  Left column links — Mueller style ───────────────────
   Source: awa-vertical-mega-menu.css §4                         */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > a.level-top {
    display: flex !important;
    align-items: center;
    gap: var(--awa-gap-md);
    padding: 12px 16px 12px 20px;
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: var(--awa-text-sm);
    font-weight: 500;
    color: #2d3748;
    text-decoration: none;
    border-bottom: 1px solid #edf0f4;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                padding-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
}

/* Chevron */
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > a.level-top::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #c0c4cc;
    border-bottom: 1.5px solid #c0c4cc;
    transform: rotate(-45deg);
    margin-left: auto;
    flex-shrink: 0;
    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover */
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > a.level-top:hover {
    color: #b73337;
    background: linear-gradient(90deg, #fdfafa 0%, #f8f4f4 100%);
    text-decoration: none;
    padding-left: 22px;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > a.level-top:hover::after {
    border-color: #b73337;
    transform: rotate(-45deg) translateX(2px);
}

/* Active — red inset bar */
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-active > a.level-top {
    color: #b73337;
    background: linear-gradient(90deg, #f5f0f0 0%, #f8f6f6 40%, #fafafa 100%);
    font-weight: var(--awa-weight-semibold);
    text-decoration: none;
    box-shadow: inset 3px 0 0 0 #b73337;
    padding-left: 22px;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-active > a.level-top::after {
    border-color: #b73337;
    transform: rotate(-45deg) translateX(2px);
}

/* Category icons */
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu > li.ui-menu-item.level0 > a.level-top .menu-thumb-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu > li.ui-menu-item.level0 > a.level-top .vmm-cat-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #718096;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu > li.ui-menu-item.level0:hover > a.level-top .vmm-cat-icon,
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu > li.ui-menu-item.level0.vmm-active > a.level-top .vmm-cat-icon {
    color: #b73337;
    transform: scale(1.08);
}

/* Hide mobile toggle in desktop panel */
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > .open-children-toggle {
    display: none !important;
}


/* ── 1.6  Right pane — .level0.submenu ────────────────────────
   position:fixed overlays right side of panel.
   Rokanthemes uses visibility:hidden/visible — we mirror that.
   Source: awa-vertical-mega-menu.css §5                         */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > .level0.submenu {
    position: fixed !important;
    inset: var(--vmm-top, -9999px) auto auto calc(var(--vmm-left, 0px) + 240px) !important;
    width: calc(var(--vmm-width, 860px) - 240px) !important;
    min-height: 320px;
    max-height: 75vh;
    display: flex !important;
    align-items: flex-start !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                visibility 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, visibility, transform;
    transform: translateX(-4px);
    background: #fff;
    border-left: 1px solid #e4e8ee;
    border-bottom: 1px solid #e0e4ea;
    border-right: 1px solid #e0e4ea;
    border-bottom-right-radius: 8px;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    z-index: 99998 !important;
    flex-direction: column !important;
}

/* Show on hover / vmm-active */
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0:hover > .level0.submenu,
.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-active > .level0.submenu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0);
}

/* Category header (injected by JS) */
.vmm-category-header {
    display: flex;
    align-items: center;
    padding: 18px 28px 16px;
    border-bottom: 1px solid #e8ecf0;
    background: linear-gradient(180deg, #fefefe 0%, #fafbfc 100%);
    flex-shrink: 0;
    position: relative;
}

.vmm-category-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 28px;
    width: 48px;
    height: 2.5px;
    background: linear-gradient(90deg, #b73337 0%, #d94449 100%);
    border-radius: 2px;
}

.vmm-category-header__title {
    font-family: var(--awa-font-heading, 'Lexend', sans-serif);
    font-size: var(--awa-text-base);
    font-weight: var(--awa-weight-bold);
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.vmm-category-header__link {
    display: none;
}

.vmm-category-header__link:hover {
    display: none;
}

/* .row inside submenu */
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu > .row {
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
}


/* ── 1.7  Subcategories grid — 3-column Mueller layout ────────
   Source: awa-vertical-mega-menu.css §6                         */

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu {
    flex: 1;
    min-width: 0;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    align-content: start;
    padding: 8px 0 16px;
    margin: 0;
    list-style: none;
    background: #fff;
    overflow-y: auto;
    max-height: calc(75vh - 52px);
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a {
    display: flex;
    align-items: center;
    gap: var(--awa-gap-sm);
    padding: 9px 20px;
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: 13.5px;
    font-weight: 400;
    color: #4a5568;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                padding-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.4;
    border-radius: 4px;
    min-height: 38px;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a:hover {
    color: #b73337;
    background: linear-gradient(90deg, #fdf2f2 0%, #faf5f5 100%);
    text-decoration: none;
    padding-left: 24px;
}

/* Group title — uppercase label */
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a.title-cat-mega-menu {
    font-family: var(--awa-font-heading, 'Lexend', sans-serif);
    font-weight: var(--awa-weight-bold);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #b73337;
    pointer-events: auto;
    cursor: pointer;
    padding: 16px 20px 8px;
    background: transparent;
    grid-column: 1 / -1;
    min-height: unset;
}

/* Span group titles with children — full width */
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li.parent-ul-cat-mega-menu.parent {
    grid-column: 1 / -1;
}

/* Leaf categories — flow in 3-column grid */
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li.parent-ul-cat-mega-menu:not(.parent) {
    grid-column: auto;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li.parent-ul-cat-mega-menu:not(.parent) > a.title-cat-mega-menu {
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-weight: 400;
    font-size: 13.5px;
    text-transform: none;
    letter-spacing: normal;
    color: #444;
    pointer-events: auto;
    cursor: pointer;
    padding: 9px 20px;
    min-height: 40px;
    background: transparent;
    grid-column: auto;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li.parent-ul-cat-mega-menu:not(.parent) > a.title-cat-mega-menu:hover {
    color: #b73337;
    background: #fdf2f2;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li.parent-ul-cat-mega-menu > a.title-cat-mega-menu::before {
    display: none;
}

/* "Ver tudo em [Categoria]" — bottom link */
.vmm-view-all-item {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e8ecf0;
}

.vmm-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: var(--awa-gap-xs);
    padding: 10px 20px;
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: 13px;
    font-weight: var(--awa-weight-semibold);
    color: #b73337;
    text-decoration: none;
    transition: color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
                gap 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.vmm-view-all-link::after {
    content: '\2192';
    display: inline-block;
    font-size: var(--awa-text-sm);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.vmm-view-all-link:hover {
    color: #8e2629;
    text-decoration: none;
}

.vmm-view-all-link:hover::after {
    transform: translateX(4px);
}


/* ── 1.8  Banner column ───────────────────────────────────────
   Source: awa-vertical-mega-menu.css §7                         */

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .menu-bottom-block,
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .menu-bottom-block-auto,
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .menu-right-block {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex !important;
    align-items: stretch;
    background: #f0f4f8;
    overflow: hidden;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .menu-category-banner {
    display: block;
    width: 100%;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .menu-category-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 200px;
}


/* ── 1.9  Subcategory thumbnails + product count badge ────────
   Source: awa-vertical-mega-menu.css §7b                        */

.vmm-subcat-thumb {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 10px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a:has(.vmm-subcat-thumb) {
    display: flex;
    align-items: center;
}

.vmm-product-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: 11px;
    font-weight: var(--awa-weight-semibold);
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 9px;
    line-height: 1;
    vertical-align: middle;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a:hover .vmm-product-count {
    background: #fde8e8;
    color: #b73337;
}


/* ── 1.10  Left column active state + custom scrollbar ────────
   Source: awa-vertical-mega-menu.css §8
   Note: base styles merged into §2/§3/§4 above (dedup)         */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-active {
    background: #f5f6f8 !important;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown::-webkit-scrollbar {
    width: 5px;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Thin scrollbar — right pane */
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu::-webkit-scrollbar {
    width: 5px;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu::-webkit-scrollbar-track {
    background: transparent;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}


/* ── 1.11  Expand / show-more link ────────────────────────────
   Source: awa-vertical-mega-menu.css §9                         */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.expand-category-link {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center;
    border-top: 1px solid #e0e7ef;
    list-style: none;
    background: #fff !important;
}

.navigation.verticalmenu:not(.navigation--mueller) .expand-category-link .viewall.vm-toggle-categories {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--awa-gap-sm);
    width: 100%;
    padding: 11px 20px;
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: 13px;
    font-weight: var(--awa-weight-semibold);
    color: #b73337;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    border-top: 1px solid #e8ecf0;
}

.navigation.verticalmenu:not(.navigation--mueller) .expand-category-link .viewall.vm-toggle-categories:hover {
    background: #fdf2f2;
    color: #8e2629;
}

.navigation.verticalmenu:not(.navigation--mueller) .expand-category-link .viewall.vm-toggle-categories::after {
    content: ' ↓';
    font-size: var(--awa-text-sm);
}


/* ── 1.12  Overlay backdrop ───────────────────────────────────
   Source: awa-vertical-mega-menu.css §10                        */

.vmm-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 28%);
    backdrop-filter: blur(2px);
    z-index: 99997;
    display: none;
    pointer-events: all;
    transition: opacity 0.3s ease;
}

.vmm-overlay.vmm-overlay-show {
    display: block;
    animation: vmm-overlay-in 0.3s ease both;
}

@keyframes vmm-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ── 1.13  Badge labels ───────────────────────────────────────
   Source: awa-vertical-mega-menu.css §11                        */

.navigation.verticalmenu:not(.navigation--mueller) .cat-label {
    display: inline-block;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: var(--awa-weight-bold);
    border-radius: 2px;
    line-height: 1.5;
    vertical-align: middle;
}

.navigation.verticalmenu:not(.navigation--mueller) .cat-label-new {
    background: #22c55e;
    color: #fff;
}

.navigation.verticalmenu:not(.navigation--mueller) .cat-label-hot {
    background: #b73337;
    color: #fff;
}

.navigation.verticalmenu:not(.navigation--mueller) .cat-label-sale {
    background: #f59e0b;
    color: #fff;
}


/* ── 1.14  Empty state — categories without subcategories ─────
   Source: awa-vertical-mega-menu.css §14                        */

.vmm-empty-submenu {
    position: fixed !important;
    inset: var(--vmm-top, -9999px) auto auto calc(var(--vmm-left, 0px) + 240px) !important;
    width: calc(var(--vmm-width, 860px) - 240px) !important;
    min-height: 320px;
    max-height: 75vh;
    display: none;
    flex-direction: column !important;
    background: #fff;
    border-left: 1px solid #e8ecf0;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    border-bottom-right-radius: 4px;
    z-index: 99998 !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-active .vmm-empty-submenu {
    display: flex;
    visibility: visible !important;
    opacity: 1 !important;
}

.vmm-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 48px 32px;
    text-align: center;
}

.vmm-empty-state__icon {
    width: 48px;
    height: 48px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.vmm-empty-state__text {
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: var(--awa-text-sm);
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.5;
}

.vmm-empty-state__link {
    display: inline-flex;
    align-items: center;
    gap: var(--awa-gap-sm);
    padding: 10px 24px;
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    font-size: 13px;
    font-weight: var(--awa-weight-semibold);
    color: #fff;
    background: #b73337;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.15s;
}

.vmm-empty-state__link:hover {
    background: #8e2629;
    color: #fff;
    text-decoration: none;
}


/* ── 1.15  Current page highlight ─────────────────────────────
   Source: awa-vertical-mega-menu.css §15                        */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-current-cat > a.level-top {
    position: relative;
}

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0.vmm-current-cat > a.level-top::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b73337;
}

.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a.vmm-current {
    color: #b73337;
    font-weight: var(--awa-weight-semibold);
    background: #fdf2f2;
}


/* ── 1.16  Focus-visible outlines ─────────────────────────────
   Source: awa-vertical-mega-menu.css §18                        */

.navigation.verticalmenu:not(.navigation--mueller) .togge-menu.list-category-dropdown > li.ui-menu-item.level0 > a.level-top:focus-visible,
.navigation.verticalmenu:not(.navigation--mueller) .level0.submenu .subchildmenu li a:focus-visible,
.navigation.verticalmenu:not(.navigation--mueller) .expand-category-link .viewall.vm-toggle-categories:focus-visible,
.vmm-empty-state__link:focus-visible,
.vmm-category-header__link:focus-visible {
    outline: 2px solid #b73337;
    outline-offset: -2px;
    border-radius: 3px;
}


/* ── 1.17  Legacy overlay neutralization ──────────────────────
   Base theme enforces global overlays; neutralize to prevent
   stale backdrops hijacking the viewport.
   Source: awa-menu-mueller-global.css                           */

.shadow_bkg,
.shadow_bkg_show,
.vmm-overlay,
#vmm-overlay {
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.background_shadow,
body.background_shadow_show {
    overflow: visible !important;
}

body.background_shadow::before,
body.background_shadow_show::before,
body.background_shadow .verticalmenu.navigation.side-verticalmenu > ul::after,
body.background_shadow_show .verticalmenu.navigation.side-verticalmenu > ul::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ████████████████████████████████████████████████████████████████
   SECTION 2 — HORIZONTAL MENU / FLYOUT
   ████████████████████████████████████████████████████████████████ */

/* ── 2.1  Menu-open: dismiss search autocomplete ──────────────
   When mobile menu panel is open, hide all search dropdowns
   to prevent z-index fights.
   Source: awa-menu-mueller-global.css                           */

body.awa-menu-open .mst-searchautocomplete__autocomplete,
body.awa-menu-open .mst-searchautocomplete__result,
body.awa-menu-open .mst-searchautocomplete,
body.awa-menu-open .search-autocomplete,
body.awa-menu-open .searchsuite-autocomplete {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ████████████████████████████████████████████████████████████████
   SECTION 3 — SEARCH BAR & AUTOCOMPLETE
   ████████████████████████████████████████████████████████████████ */

/* ── 3.1  Base search layout ──────────────────────────────────
   Source: awa-phase7-header-nav.css §1                          */

.top-search {
    display: flex !important;
    align-items: center;
    gap: var(--awa-gap-lg);
}

.block-search {
    flex: 1;
    max-width: none !important;
    width: 100% !important;
}

.block-search .block-content {
    width: 100%;
}

.block-search .form.minisearch {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 2px solid var(--primary-color, #b73337);
    border-radius: var(--awa-radius-xs);
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.block-search .form.minisearch:focus-within {
    border-color: #8b1a1e;
    box-shadow: 0 0 0 3px rgb(183 51 55 / 12%);
}

.block-search .field.search {
    flex: 1;
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: none;
}

.block-search .field.search .label {
    display: none;
}

.block-search .field.search .control {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0;
}


/* ── 3.2  SearchByCat dropdown (Amazon/Mueller style) ─────────
   Source: awa-phase7-header-nav.css §2                          */

.block-search .chosen-container {
    display: none !important;
}

#choose_category {
    display: block !important;
    appearance: none;
    min-width: 160px;
    max-width: 200px;
    padding: 0 32px 0 14px;
    border: none;
    border-right: 1px solid #e2e8f0;
    background: #f1f5f9
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        no-repeat right 12px center;
    font-size: 13px;
    font-weight: var(--awa-weight-semibold);
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    order: -1;
    height: auto;
    line-height: 1.2;
}

#choose_category:focus {
    outline: none;
    background-color: #e2e8f0;
}

#choose_category option {
    font-size: 13px;
    padding: 6px 12px;
}


/* ── 3.3  Input field ─────────────────────────────────────────
   Source: awa-phase7-header-nav.css                             */

.block-search .field.search .control input#search {
    flex: 1;
    padding: 12px 16px;
    border: none !important;
    background: transparent;
    font-size: var(--awa-text-sm);
    font-family: var(--awa-font-body, 'Source Sans 3', sans-serif);
    color: #0f172a;
    min-height: 44px;
    box-shadow: none !important;
    outline: none;
}

.block-search .field.search .control input#search::placeholder {
    color: #94a3b8;
    font-weight: 400;
}


/* ── 3.4  Submit button ───────────────────────────────────────
   Source: awa-phase7-header-nav.css                             */

.block-search .actions {
    display: flex;
}

.block-search .actions .action.search {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    background: var(--primary-color, #b73337);
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s;
}

.block-search .actions .action.search:hover {
    background: #8b1a1e;
}

.block-search .actions .action.search span {
    font-size: 18px;
}


/* ── 3.5  Native autocomplete dropdown ────────────────────────
   Source: awa-phase7-header-nav.css                             */

#search_autocomplete {
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 var(--awa-radius-xs) var(--awa-radius-xs);
    box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
    z-index: 1060;
}


/* ── 3.6  Category grid ───────────────────────────────────────
   Source: awa-phase7-header-nav.css §4                          */

.awa-category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--awa-gap-lg);
    padding: 32px 0;
    max-width: var(--awa-container-max);
    margin: 0 auto;
}

.awa-category-grid__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--awa-gap-md);
    padding: 24px 16px;
    background: #f9f9f9;
    border: 1px solid transparent;
    border-radius: var(--awa-radius-xs);
    text-decoration: none;
    color: #0f172a;
    transition: border-color 0.15s, background 0.15s;
    cursor: pointer;
    text-align: center;
}

.awa-category-grid__card:hover {
    border-color: #e2e8f0;
    background: #fff;
}

.awa-category-grid__card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(183 51 55 / 15%);
}

.awa-category-grid__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #b73337);
}

.awa-category-grid__icon svg {
    width: 32px;
    height: 32px;
}

.awa-category-grid__title {
    font-family: var(--awa-font-heading, 'Lexend', sans-serif);
    font-size: var(--awa-text-sm);
    font-weight: var(--awa-weight-bold);
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.block-search .block-title {
    display: none;
}


/* ── 3.7  Search overflow + flex chain ────────────────────────
   Extended specificity for header context.
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search {
    overflow: visible;
}

body .page-wrapper .header .top-search .mini-cart-wrapper,
body .page-wrapper .header .top-search .mini-carts {
    overflow: visible;
}

body .page-wrapper .header .top-search .block-search {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

body .page-wrapper .header .top-search .block-search .block-content,
body .page-wrapper .header .top-search .block-search #search_mini_form,
body .page-wrapper .header .top-search .block-search .field.search,
body .page-wrapper .header .top-search .block-search .field.search .control {
    width: 100%;
    min-width: 0;
}

body .page-wrapper .header .top-search .block-search #search_mini_form {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0;
}

body .page-wrapper .header .top-search .block-search #search_mini_form .field.search {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

body .page-wrapper .header .top-search .block-search #search_mini_form .actions {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: 48px;
    align-self: stretch;
}


/* ── 3.8  Action.search — premium visual styling ──────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .block-search .action.search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px !important;
    min-width: 52px !important;
    min-height: 48px;
    height: 48px !important;
    max-height: 48px !important;
    border-radius: 0 var(--awa-radius-lg, 12px) var(--awa-radius-lg, 12px) 0;
    border: 2px solid var(--primary-color);
    border-left: 0;
    background: var(--primary-color);
    color: var(--bg-white);
    transition: background-color var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1)),
                border-color var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1));
}

body .page-wrapper .header .top-search .block-search .action.search:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--bg-white);
}

body .page-wrapper .header .top-search .block-search .action.search:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--awa-focus-ring, rgb(183 51 55 / 25%));
}


/* ── 3.9  Input#search — enhanced styling ─────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .block-search input#search {
    min-height: 48px;
    height: 48px !important;
    border-radius: var(--awa-radius-lg, 12px) 0 0 var(--awa-radius-lg, 12px);
    border: 2px solid var(--border-color, #e2e8f0);
    border-right: 0;
    padding: 12px 16px;
    font-size: 0.9375rem;
    background: var(--bg-white, #fff);
    transition: border-color var(--awa-transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--awa-transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
}

body .page-wrapper .header .top-search .block-search input#search:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light, rgb(183 51 55 / 10%));
    outline: 0;
}


/* ── 3.10  Autocomplete is-open state ─────────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .block-search[data-awa-component='search-autocomplete'] #search_mini_form.is-open .control,
body .page-wrapper .header .top-search .block-search[data-awa-component='search-autocomplete'] #search_mini_form.is-open {
    z-index: 40;
}

body .page-wrapper .header .top-search .block-search[data-awa-component='search-autocomplete'] #search_mini_form.is-open input#search {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

body .page-wrapper .header .top-search .block-search[data-awa-component='search-autocomplete'] #search_mini_form.is-open #search_autocomplete {
    margin-top: 6px;
}


/* ── 3.11  ThemeOption search button !important override ───────
   Reasserts brand colors after ThemeOption custom_default.css.
   Source: awa-custom-post-themeoption-overrides.css             */

body .page-wrapper .block-search .block-content button.action.search {
    background: var(--primary-color, #b73337) !important;
    border-color: var(--primary-color, #b73337) !important;
    color: #fff !important;
    min-height: 44px !important;
}

body .page-wrapper .block-search .block-content button.action.search:hover,
body .page-wrapper .block-search .block-content button.action.search:focus-visible {
    background: var(--primary-hover, #8e2629) !important;
    border-color: var(--primary-hover, #8e2629) !important;
    color: #fff !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgb(183 51 55 / 18%) !important;
}


/* ── 3.12  Round11 search layout — final after ThemeOption ────
   SR-only span + CSS magnifier for search button.
   Source: awa-custom-post-themeoption-overrides.css             */

body .page-wrapper #search_mini_form.form.minisearch,
body .page-wrapper .block.block-search .form.minisearch.search-content {
    display: flex !important;
    align-items: stretch !important;
    gap: var(--awa-gap-sm) !important;
}

body .page-wrapper .block.block-search .field.search,
body .page-wrapper .block.block-search .field.search .control {
    min-width: 0 !important;
    width: auto !important;
}

body .page-wrapper .block.block-search .field.search {
    flex: 1 1 auto !important;
    padding-right: 0 !important;
}

body .page-wrapper .block.block-search .actions {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    max-height: 44px !important;
    align-self: stretch !important;
}

body .page-wrapper .block.block-search .actions .action.search {
    position: static !important;
    inset: auto !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    height: 44px !important;
    max-height: 44px !important;
}

/* SR-only span — hide text, keep accessible */
body .page-wrapper .block.block-search .actions .action.search > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* CSS magnifier icon — replaces font icon */
body .page-wrapper .block.block-search .actions .action.search[data-awa-search-submit='true'] {
    position: relative !important;
}

body .page-wrapper .block.block-search .actions .action.search[data-awa-search-submit='true']::before {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid currentcolor !important;
    border-radius: 50% !important;
    transform: translate(-58%, -58%) !important;
    pointer-events: none !important;
}

body .page-wrapper .block.block-search .actions .action.search[data-awa-search-submit='true']::after {
    content: '' !important;
    position: absolute !important;
    width: 7px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: currentcolor !important;
    inset: 50% auto auto 50% !important;
    transform: translate(35%, 185%) rotate(45deg) !important;
    pointer-events: none !important;
}


/* ── 3.13  Round20 search final — definitive sizing ───────────
   Source: awa-custom-post-themeoption-overrides.css             */

body .page-wrapper .header .top-search .block-search form#search_mini_form,
body .page-wrapper .header .top-search .block-search form.form.minisearch {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
}

body .page-wrapper .header .top-search .block-search form#search_mini_form .field.search,
body .page-wrapper .header .top-search .block-search form.form.minisearch .field.search {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body .page-wrapper .header .top-search .block-search form#search_mini_form .actions,
body .page-wrapper .header .top-search .block-search form.form.minisearch .actions {
    position: static !important;
    inset: auto !important;
    float: none !important;
    margin: 0 !important;
    width: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    height: 44px !important;
    max-height: 44px !important;
    display: flex !important;
    align-items: stretch !important;
}

body .page-wrapper .header .top-search .block-search form#search_mini_form .action.search,
body .page-wrapper .header .top-search .block-search form.form.minisearch .action.search {
    width: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    height: 44px !important;
    max-height: 44px !important;
}


/* ── 3.14  Searchsuite autocomplete — base rules ──────────────
   Source: awa-custom-plp-search-cart-refine.css                 */

.searchsuite-autocomplete,
#search_autocomplete .searchsuite-autocomplete {
    width: min(720px, calc(100vw - 32px)) !important;
    left: 0 !important;
    right: auto;
    margin-top: 8px;
    border-radius: var(--awa-radius-lg);
    border: 1px solid var(--awa-plp-border);
    box-shadow: var(--awa-plp-shadow-md);
    overflow: hidden;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.searchsuite-autocomplete .title {
    background: #f8fafc !important;
    border-bottom: 1px solid #edf1f5 !important;
    margin: 0;
    padding: 10px 14px;
    color: #334155 !important;
    font-weight: var(--awa-weight-bold);
}

.searchsuite-autocomplete .title .see-all {
    color: var(--primary-color, #b73337);
    font-weight: var(--awa-weight-semibold);
}

.searchsuite-autocomplete .title .see-all:hover,
.searchsuite-autocomplete .title .see-all:focus-visible {
    color: var(--primary-hover, #8e2629);
    outline: 0;
}

.searchsuite-autocomplete ul {
    padding: 0;
}

.searchsuite-autocomplete .suggest ul li,
.searchsuite-autocomplete .product ul li {
    padding: 0;
    margin: 0;
}

.searchsuite-autocomplete .suggest ul li a,
.searchsuite-autocomplete .product ul li > a,
.searchsuite-autocomplete .product ul li .qs-option-title a {
    color: #111827;
}

.searchsuite-autocomplete .suggest ul li a {
    display: block;
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.searchsuite-autocomplete .suggest ul li:last-child a {
    border-bottom: 0;
}

.searchsuite-autocomplete .suggest ul li a:hover,
.searchsuite-autocomplete .suggest ul li a:focus-visible,
.searchsuite-autocomplete .suggest ul li.selected a {
    background: rgb(183 51 55 / 4%);
    color: var(--primary-color, #b73337);
    text-decoration: none;
    outline: 0;
}

.searchsuite-autocomplete .product ul li {
    padding: 10px 14px;
    border-bottom: 1px solid #edf1f5;
    transition: background-color 0.2s ease;
}

.searchsuite-autocomplete .product ul li:hover,
.searchsuite-autocomplete .product ul li.selected {
    background: rgb(183 51 55 / 3%);
}

.searchsuite-autocomplete ul li .qs-option-image {
    width: 84px;
    max-width: 84px;
}

.searchsuite-autocomplete ul li .qs-option-image a {
    display: block;
    border-radius: var(--awa-radius-base);
    overflow: hidden;
    background: #f7f7f7;
    border: 1px solid #edf1f5;
}

.searchsuite-autocomplete ul li .qs-option-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.searchsuite-autocomplete ul li .qs-option-info {
    width: calc(100% - 96px);
    padding-left: 12px;
    margin-bottom: 0;
}

.searchsuite-autocomplete ul li .qs-option-info .qs-option-title a {
    display: inline-block;
    line-height: 1.35;
    font-weight: var(--awa-weight-semibold);
}

.searchsuite-autocomplete ul li .qs-option-info .qs-option-title a:hover,
.searchsuite-autocomplete ul li .qs-option-info .qs-option-title a:focus-visible {
    color: var(--primary-color, #b73337);
    outline: 0;
}

.searchsuite-autocomplete ul li .qs-option-info .qs-option-price {
    margin-top: 8px;
    font-weight: var(--awa-weight-bold);
}

.searchsuite-autocomplete .no-result {
    background: #fff;
    color: #475569;
    padding: 14px;
}

/* Keyboard active state */
.searchsuite-autocomplete [role='option'].awa-option-active,
.searchsuite-autocomplete [role='option'].awa-option-active a {
    background: rgb(183 51 55 / 5%);
    color: var(--primary-color, #b73337);
}


/* ── 3.15  Searchsuite !important reinforcements ──────────────
   Reasserts after ThemeOption custom_default.css overrides.
   Source: awa-custom-post-themeoption-overrides.css             */

.searchsuite-autocomplete {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 14px 30px rgb(15 23 42 / 10%) !important;
    border-radius: var(--awa-radius-lg) !important;
    left: 0 !important;
    width: min(720px, calc(100vw - 32px)) !important;
    margin-top: 8px !important;
}

.searchsuite-autocomplete .title .see-all,
.searchsuite-autocomplete .qs-option-title a {
    color: var(--primary-color, #b73337) !important;
}

.searchsuite-autocomplete .title .see-all:hover,
.searchsuite-autocomplete .title .see-all:focus-visible,
.searchsuite-autocomplete .qs-option-title a:hover,
.searchsuite-autocomplete .qs-option-title a:focus-visible {
    color: var(--primary-hover, #8e2629) !important;
    outline: 0;
}

.searchsuite-autocomplete .suggest ul li a,
.searchsuite-autocomplete .product ul li,
.searchsuite-autocomplete .no-result {
    background: #fff !important;
    color: #1f2937 !important;
}

.searchsuite-autocomplete .suggest ul li a:hover,
.searchsuite-autocomplete .suggest ul li a:focus-visible,
.searchsuite-autocomplete .product ul li:hover,
.searchsuite-autocomplete .product ul li.selected {
    background: rgb(183 51 55 / 4%) !important;
    color: var(--primary-color, #b73337) !important;
    outline: 0;
}


/* ── 3.16  B2B login-to-see-price in search results ───────────
   Source: awa-custom-post-themeoption-overrides.css             */

.searchsuite-autocomplete .b2b-login-to-see-price {
    color: var(--primary-color, #b73337) !important;
    background: rgb(183 51 55 / 7%) !important;
    border: 1px solid rgb(183 51 55 / 14%) !important;
}


/* ── 3.17  Mirasvit SearchAutocomplete — z-index layering ─────
   Keeps dropdown visible above header controls and VMM layers.
   Source: awa-custom-post-themeoption-overrides.css             */

body.searchautocomplete__active .page-wrapper .header .top-search .block-search form#search_mini_form,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search form.form.minisearch,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search .field.search,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search .field.search .control {
    overflow: visible !important;
}

body .page-wrapper .header .top-search .block-search .field.search .control {
    position: relative !important;
}

body .page-wrapper .header .top-search .block-search .mst-searchautocomplete__autocomplete {
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: auto !important;
    width: min(760px, calc(100vw - 24px)) !important;
    max-width: min(760px, calc(100vw - 24px)) !important;
    border-top: 2px solid var(--primary-color, #b73337) !important;
    border-radius: var(--awa-radius-base) !important;
    border-color: #e5e5e5 !important;
    z-index: 1300 !important;
}

body .page-wrapper .header .top-search .block-search .mst-searchautocomplete__wrapper {
    max-height: min(72vh, 520px) !important;
}

/* z-escalation while typing — above VMM layers */
body.searchautocomplete__active .page-wrapper .header .top-search .block-search,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search #search_mini_form,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search .field.search,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search .field.search .control {
    position: relative !important;
    z-index: 100120 !important;
}

body.searchautocomplete__active .page-wrapper .header .top-search .block-search .mst-searchautocomplete__autocomplete,
body.searchautocomplete__active .page-wrapper .header .top-search .block-search .mst-searchautocomplete__wrapper {
    z-index: 100130 !important;
}


/* ── 3.18  VMM state neutralization during search ─────────────
   Keeps VMM visible/interactive while Mirasvit autocomplete is open.
   Page+state scope required for correct homepage behavior.
   Source: awa-custom-post-themeoption-overrides.css             */

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5).searchautocomplete__active .page-wrapper .header-control.header-nav.header-nav-global.cms_home_1[data-awa-header-nav="true"] .menu_left_home1 .navigation.verticalmenu.side-verticalmenu:not(.navigation--mueller) > ul.togge-menu.list-category-dropdown {
    display: inherit !important;
}

:is(body.cms-index-index, body.cms-home, body.cms-homepage_ayo_home5).searchautocomplete__active .page-wrapper .header-control.header-nav.header-nav-global.cms_home_1[data-awa-header-nav="true"] .menu_left_home1 .navigation.verticalmenu.side-verticalmenu:not(.navigation--mueller) > .title-category-dropdown {
    visibility: visible !important;
}


/* ████████████████████████████████████████████████████████████████
   SECTION 4 — MINICART COMPONENT
   ████████████████████████████████████████████████████████████████ */

/* ── 4.1  Minicart wrapper ────────────────────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .minicart-wrapper {
    position: relative;
    z-index: 30;
}


/* ── 4.2  Showcart trigger ────────────────────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .minicart-wrapper .action.showcart {
    min-height: 48px;
    border-radius: var(--awa-radius-md, 10px);
    padding: 10px 12px;
    transition: color var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1)),
                background-color var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1));
}

body .page-wrapper .header .top-search .minicart-wrapper .action.showcart:hover {
    background: var(--primary-light, rgb(183 51 55 / 8%));
    color: var(--primary-hover);
}

body .page-wrapper .header .top-search .minicart-wrapper .action.showcart:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--awa-focus-ring, rgb(183 51 55 / 25%));
}


/* ── 4.3  Counter badge ───────────────────────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .minicart-wrapper .counter.qty {
    top: 0;
    right: 0;
    min-width: 22px;
    height: 22px;
    padding-inline: 6px;
    background: var(--primary-color);
    color: var(--bg-white);
    font-size: 11px;
    font-weight: var(--awa-font-weight-bold, 700);
    border-radius: var(--awa-radius-pill, 999px);
    box-shadow: 0 2px 6px rgb(183 51 55 / 30%);
    line-height: 22px;
    text-align: center;
}


/* ── 4.4  Block-minicart dropdown ─────────────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .minicart-wrapper .block-minicart {
    right: 0;
    left: auto;
    margin-top: 10px;
    max-width: min(400px, calc(100vw - 20px));
    width: min(400px, calc(100vw - 20px));
    z-index: 1200;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--awa-radius-xl, 16px);
    box-shadow: var(--awa-shadow-lg, 0 8px 30px rgb(0 0 0 / 10%));
    backdrop-filter: blur(8px);
    background: rgb(255 255 255 / 98%);
}


/* ── 4.5  View cart / checkout buttons ────────────────────────
   Source: awa-custom-header-minicart.css                        */

body .page-wrapper .header .top-search .minicart-wrapper .block-minicart .action.viewcart,
body .page-wrapper .header .top-search .minicart-wrapper .block-minicart .action.checkout {
    border-radius: var(--awa-radius-md, 10px);
    min-height: 44px;
    font-weight: var(--awa-font-weight-semibold, 600);
    transition: background-color var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1)),
                border-color var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1)),
                box-shadow var(--awa-transition, 250ms cubic-bezier(0.4, 0, 0.2, 1));
}

body .page-wrapper .header .top-search .minicart-wrapper .block-minicart .action.viewcart:focus-visible,
body .page-wrapper .header .top-search .minicart-wrapper .block-minicart .action.checkout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--awa-focus-ring, rgb(183 51 55 / 25%));
}


/* ── 4.6  Counter !important override (ThemeOption) ───────────
   Source: awa-custom-post-themeoption-overrides.css             */

body .page-wrapper .minicart-wrapper .action.showcart .counter.qty,
body .page-wrapper .minicart-wrapper .counter.qty {
    background: var(--primary-color, #b73337) !important;
    color: #fff !important;
}