/* Shared header chrome is global because NavLink and nested components do not inherit
   the calling component's Blazor CSS-isolation attribute. */
[data-chrome-slot="topBar"] .menubar-link,
[data-chrome-slot="topBar"] .social-link {
    color: var(--cmp-topbar-link-fg) !important;
}
[data-chrome-slot="topBar"] .menubar-icon { color: inherit !important; }
[data-chrome-slot="topBar"] :is(.menubar-link, .social-link):is(:hover, :focus-visible, :active) {
    color: var(--cmp-topbar-link-hover-fg) !important;
    background: var(--cmp-topbar-link-hover-bg) !important;
}
[data-chrome-slot="topBar"] :is(.social-link, .social-links) {
    border-color: var(--cmp-topbar-menubar-border) !important;
}
[data-chrome-slot="topBar"] .social-link {
    background: var(--cmp-topbar-menubar-bg) !important;
}
[data-chrome-slot="topBar"] :is(#menubar-my-account, .menubar-group--special)::before {
    background: var(--cmp-topbar-menubar-border);
}
[data-chrome-slot="topBar"] .dropdown-menu {
    background: var(--cmp-topbar-dropdown-bg);
    color: var(--cmp-topbar-dropdown-fg);
    border-color: var(--cmp-topbar-dropdown-border);
}
[data-chrome-slot="topBar"] .dropdown-menu :is(.dropdown-item, .dropdown-header) {
    color: var(--cmp-topbar-dropdown-fg);
}
[data-chrome-slot="topBar"] .dropdown-menu :is(.abbreviation, .customer-email) {
    color: var(--cmp-topbar-dropdown-muted);
}
[data-chrome-slot="topBar"] .dropdown-menu .dropdown-item:is(:hover, :focus-visible, .active) {
    background: var(--cmp-topbar-link-hover-bg);
    color: var(--cmp-topbar-link-hover-fg);
}
[data-chrome-slot="topBar"] .cte-chrome-toggle-btn {
    background: var(--cmp-topbar-menubar-bg);
    color: var(--cmp-topbar-link-fg);
    border-color: var(--cmp-topbar-menubar-border);
}
[data-chrome-slot="topBar"] :is(a, button):focus-visible {
    outline: 2px solid var(--cmp-topbar-link-hover-fg);
    outline-offset: 2px;
}

.header-root {
    --header-action-ink: var(--header-icon-color, var(--header-text-color, #15211d));
}

.header-root .container {
    padding-inline: clamp(16px, 3vw, 48px) !important;
}
.header-root .header-el-category-strip {
    gap: 20px;
}
.header-root .header-el-category-strip-item {
    width: 108px;
}
.header-root .header-el-category-strip-label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
    min-height: 2.7em;
}

.header-root .header-icon-btn {
    width: 64px;
    min-height: 56px;
    position: relative;
    cursor: pointer;
    color: var(--header-action-ink);
    background: var(--cmp-header-icon-bg, color-mix(in srgb, var(--header-accent) 6%, var(--header-background)));
    border: 1px solid var(--cmp-header-icon-border, color-mix(in srgb, var(--header-accent) 30%, var(--header-border)));
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 2px 5px color-mix(in srgb, var(--header-text-color) 4%, transparent);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.header-root .header-icon-btn:hover,
.header-root .header-icon-btn:focus-visible {
    color: var(--header-action-ink);
    background: var(--cmp-header-icon-hover-bg, color-mix(in srgb, var(--header-accent) 15%, var(--header-background)));
    border-color: var(--header-accent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--header-text-color) 10%, transparent);
}

.header-root .icon-wrapper i { color: inherit; }
.header-root .icon-label {
    color: var(--header-text-color);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .025em;
    white-space: nowrap;
}
.header-root .icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--header-background);
    border-radius: 999px;
    background: var(--cmp-header-badge-bg, var(--header-text-color));
    color: var(--cmp-header-badge-text, var(--header-background));
    font-size: 10px;
    font-weight: 700;
    z-index: 2;
}
.header-root .icon-badge:empty { display: none; }
.header-root .cart-btn {
    background: var(--cmp-header-icon-bg, color-mix(in srgb, var(--header-accent) 22%, var(--header-background)));
    border-color: color-mix(in srgb, var(--header-accent) 65%, var(--header-border));
}
.header-root .cart-btn:hover {
    background: var(--cmp-header-icon-hover-bg, color-mix(in srgb, var(--header-accent) 32%, var(--header-background)));
}
.header-root .search-box {
    background: var(--cmp-header-search-bg, var(--header-background));
    border-color: var(--cmp-header-search-border, var(--header-border));
    box-shadow: inset 0 1px 3px color-mix(in srgb, var(--header-text-color) 4%, transparent);
}
.header-root .search-input { color: var(--header-search-text); }
.header-root .instasearch-form-wrapper {
    --cmp-searchbox-item-fg: var(--header-dropdown-text);
    --cmp-searchbox-muted: var(--header-search-muted);
    --cmp-searchbox-primary: var(--header-link-hover);
    --cmp-searchbox-item-hover-bg: var(--header-nav-hover-background);
    --cmp-searchbox-item-thumb-bg: var(--header-search-background);
    --cmp-searchbox-footer-bg: var(--header-search-background);
    --cmp-searchbox-viewall-fg: var(--header-link-hover);
    --cmp-searchbox-viewall-hover-bg: var(--header-nav-hover-background);
    --cmp-searchbox-viewall-hover-fg: var(--header-link-hover);
}
.header-root .search-input::placeholder { color: var(--header-search-muted); }
.header-root .search-icon { color: var(--header-search-muted); }
.header-root .search-box:focus-within .search-icon { color: var(--header-search-focus-border); }
.header-root .instasearch-drop {
    background: var(--header-dropdown-background);
    color: var(--header-dropdown-text);
    border-color: var(--header-border);
}
.header-root .header-el-nav-toggle { color: var(--header-nav-text); }
.header-root .header-nav { background: var(--header-nav-background); }
.header-root .header-el-category-strip-label { color: var(--header-nav-text); }
.header-root .header-nav .nav-link:is(:hover, :focus-visible, .active),
.header-root .header-el-nav-item[data-menu-open] > .nav-link {
    color: var(--header-link-hover) !important;
    background: var(--header-nav-hover-background);
}
.header-root .header-nav .nav-link.active::after,
.header-root .header-el-nav-item[data-menu-open] > .nav-link::after { transform: scaleX(1); }
.header-root :is(a, button, input):focus-visible {
    outline: 2px solid var(--header-text-color);
    outline-offset: 3px;
}
.sr-only-inline {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The navigation panel belongs to the header, not to a narrow scrolling nav item. */
@media (min-width: 992px) {
    .header-root .container { padding-inline: 16px !important; }
    .header-root .header-el-category-strip { justify-content: center; }
    .header-root .header-el-nav-item { position: static; }
    .header-root .header-el-mega-menu {
        left: 0 !important;
        right: 0;
        top: 100%;
        width: 100%;
        max-width: none;
        transform: translateY(8px) !important;
    }
    .header-root .header-el-nav-item[data-menu-open] .header-el-mega-menu {
        transform: translateY(0) !important;
    }
    .header-root :is(.hd02-nav, .hd08-nav) {
        overflow: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }
    .header-root :is(.hd02-main, .hd08-main) {
        grid-template-columns: 1fr auto 1fr;
    }
    .header-root :is(.hd02-nav, .hd08-nav) {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
        width: auto;
    }
    .header-root :is(.hd02-logo, .hd08-logo) { grid-column: 2; grid-row: 1; }
    .header-root :is(.hd02-right, .hd08-right) { grid-column: 3; grid-row: 1; }
}
@media (min-width: 577px) and (max-width: 991px) {
    .header-root .container { padding-inline: 16px !important; }
    .header-root .header-icon-btn { width: 54px; min-height: 48px; }
}
@media (max-width: 576px) {
    .header-root .container { padding-inline: 12px !important; }
    .header-root .header-el-category-strip { gap: 12px; }
    .header-root .header-el-category-strip-item { width: 84px; }
    .header-root .header-icon-btn {
        width: 44px;
        min-width: 44px;
        max-width: 44px;
        min-height: 44px;
        border-radius: 12px;
        background: var(--cmp-header-icon-bg, transparent);
        border-color: var(--cmp-header-icon-border, transparent);
        box-shadow: none;
    }
    .header-root .cart-btn {
        background: var(--cmp-header-icon-bg, color-mix(in srgb, var(--header-accent) 20%, var(--header-background)));
        border-color: color-mix(in srgb, var(--header-accent) 40%, transparent);
    }
    .header-root .header-icon-btn:hover { transform: none !important; box-shadow: none; }
    .header-root .header-el-account.stacked .header-icon-btn { width: auto; max-width: 72px; }

    /* Compact two-row header: small artwork inside full-size touch targets. */
    .header-root .hm01 :is(.header-icon-btn, .header-el-hamburger, .header-el-search-toggle-btn) {
        height: 44px;
        min-height: 44px;
        border: 0;
        background: transparent;
        border-radius: 8px;
        box-shadow: none;
    }
    .header-root .hm01 :is(.header-icon-btn, .header-el-hamburger, .header-el-search-toggle-btn):is(:hover, :focus-visible) {
        background: var(--cmp-header-icon-hover-bg, var(--header-nav-hover-background));
    }
    .header-root .hm01 .header-icon-btn .header-el-badge-icon-wrap {
        width: 28px;
        height: 28px;
    }
    .header-root .hm01 :is(.icon-wrapper, .header-el-hamburger, .header-el-search-toggle-btn) i {
        font-size: 18px !important;
    }
    .header-root .hm01 .header-el-account.stacked .header-icon-btn {
        gap: 0 !important;
    }
    .header-root .hm01 .header-el-account.stacked .header-el-badge-icon-wrap {
        height: 22px;
    }
    .header-root .hm01 .header-el-account.stacked .header-el-badge-label {
        margin-top: 0;
        font-size: 10px;
        line-height: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .header-root .header-icon-btn,
    .header-root .header-icon-btn:hover { transition: none; transform: none !important; }
}