.site-header { position: sticky; top: var(--admin-offset, 0px); z-index: 30; padding-block: 16px; background: var(--color-background); color: var(--color-text); transition: background-color 280ms ease, color 280ms ease; }
html:has(.admin-bar) { --admin-offset: 32px; }
.skins-home .site-header { position: fixed; inset-inline: 0; }
.header-inner { display: grid; grid-template-columns: minmax(136px, 1fr) auto minmax(136px, 1fr); align-items: center; gap: 20px; }
.site-header .brand { display: grid; width: 136px; }
.header-logo { grid-area: 1 / 1; width: 136px; height: auto; max-height: 34px; object-fit: contain; transition: opacity 280ms ease; }
.logo-white { opacity: 0; }
.skins-home .site-header:not(.is-scrolled):not(.is-menu-open):not(:has(.is-open, .language-picker[open])) { background: transparent; color: #fff; }
.skins-home .site-header:not(.is-scrolled):not(.is-menu-open):not(:has(.is-open, .language-picker[open])) .logo-black { opacity: 0; }
.skins-home .site-header:not(.is-scrolled):not(.is-menu-open):not(:has(.is-open, .language-picker[open])) .logo-white { opacity: 1; }
.site-header :focus-visible { outline-color: currentColor; }
.site-header a:hover, .header-menu a:hover { text-decoration: none; }
.desktop-navigation { justify-self: center; }
.primary-menu { display: flex; align-items: center; gap: 20px; font: 500 14px/1 var(--font-body); }
.primary-menu > li { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; }
.primary-menu > li > a { display: flex; align-items: center; height: 34px; text-transform: capitalize; white-space: nowrap; }
.primary-menu > li::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--color-text); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
.primary-menu > li:hover::after, .primary-menu > li:focus-within::after, .primary-menu > li.is-open::after { transform: scaleX(1); }
.submenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 34px; flex-shrink: 0; padding: 0; border: 0; background: none; color: inherit; }
.submenu-toggle svg { width: 18px; height: 18px; transition: transform 280ms ease; }
.is-open > .submenu-toggle svg { transform: rotate(180deg); }
.primary-menu .sub-menu { display: none; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: 290px; padding: 32px; background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.primary-menu .sub-menu::before { content: ''; position: absolute; inset: -17px 0 auto; height: 17px; }
.primary-menu .sub-menu li { position: relative; display: flex; align-items: center; gap: 6px; }
.primary-menu .sub-menu a { display: flex; align-items: center; flex: 1; min-height: 42px; font-size: 18px; font-weight: 400; line-height: 18px; transition: font-weight 220ms ease; }
.primary-menu .sub-menu a:hover, .primary-menu .sub-menu a:focus-visible { font-weight: 500; }
.primary-menu .sub-menu .sub-menu { left: 100%; top: -33px; transform: none; }
.primary-menu li.is-open > .sub-menu, html:not(.js) .primary-menu li:hover > .sub-menu, html:not(.js) .primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sale-link > a, .mobile-menu .sale-link > a { color: #ff2121; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.site-header .icon-button { width: 24px; height: 34px; }
.languages { font: 500 14px/1 var(--font-ui); }
.language-picker { position: relative; }
.language-picker summary { display: flex; align-items: center; gap: 8px; height: 34px; list-style: none; }
.language-picker summary::-webkit-details-marker { display: none; }
.languages img { width: 18px; height: 12px; object-fit: cover; }
.language-options { position: absolute; top: calc(100% + 16px); right: 0; min-width: 110px; padding: 16px; margin: 0; list-style: none; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); }
.language-options a { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.language-options a:hover, .language-options a[aria-current] { font-weight: 700; }
.cart-toggle { position: relative; }
.site-header .cart-count { position: absolute; top: -3px; right: -7px; bottom: auto; display: grid; place-items: center; min-width: 16px; height: 16px; padding-inline: 3px; border-radius: 50%; background: #ff2121; color: #fff; font: 500 10px/1 var(--font-ui); }
.mobile-toggle, .close-icon { display: none; }
.mobile-toggle[aria-expanded='true'] .menu-icon { display: none; }
.mobile-toggle[aria-expanded='true'] .close-icon { display: inline-flex; }
.header-menu { position: fixed; inset: var(--mobile-menu-top, var(--header-height)) 0 0; width: 100%; max-width: none; height: calc(100dvh - var(--mobile-menu-top, var(--header-height))); max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--color-text); overflow-y: auto; overscroll-behavior: contain; z-index: 29; }
@media (max-width: 1024px) {
    .header-inner { grid-template-columns: 1fr auto; }
    .site-header .brand { width: max-content; }
    .header-logo { height: 24px; width: auto; max-width: 136px; }
    .desktop-navigation { display: none; }
    .skins-home .no-script-nav { padding-top: calc(var(--header-height) + 20px); }
    .mobile-navigation { width: min(100%, var(--container-width)); margin-inline: auto; padding: 16px var(--page-gutter); }
    .mobile-menu { display: flex; flex-direction: column; gap: 4px; }
    .mobile-menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .mobile-menu a { display: flex; align-items: center; min-height: 42px; font: 400 18px/18px var(--font-body); }
    .mobile-menu .submenu-toggle { height: 42px; width: 34px; justify-content: flex-end; }
    .mobile-menu .sub-menu { display: none; grid-column: 1 / -1; padding: 0 14px 12px; }
    .mobile-menu .sub-menu a { min-height: 33px; font-size: 14px; line-height: 1; }
    .mobile-menu .sub-menu .submenu-toggle { height: 33px; }
    .mobile-menu li.is-open > .sub-menu, html:not(.js) .mobile-menu .sub-menu { display: block; }
}
@media (max-width: 782px) { html:has(.admin-bar) { --admin-offset: 46px; } }
@media (prefers-reduced-motion: reduce) {
    .site-header, .header-logo, .submenu-toggle svg, .primary-menu > li::after, .primary-menu .sub-menu a { transition: none; }
}