nav.top-menu {
	background: var(--top-menu-bg-color);
	height: var(--top-menu-height);
	line-height: var(--top-menu-height);
	z-index: 1000;
}
nav.top-menu .wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
}
nav.top-menu .sub-left {
	margin-left:-10px;
}
nav.top-menu .sub-right {
	margin-right:-10px;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 100%;
}
nav.top-menu .item {
	display: inline-block;
	color: var(--dim-3-color);
	font-size: 13px;
	padding: 0 10px;
	border-radius: 3px;
	cursor: pointer;
}
nav.top-menu .item:hover {
	background: var(--top-menu-hover-bg-color);
}

nav.top-menu .phones { color: var(--dim-3-color); white-space: nowrap; font-size: 12px; }
nav.top-menu .phones i { margin-right: 5px; font-size: 11px; vertical-align: 0px; color:#666; }
nav.top-menu .phones span { color: #aaa; margin: 0 5px; }

nav.top-menu .lang {
	display: flex;
	align-items: center;
	height: 100%;
}
nav.top-menu .lang button {
	width: auto;
	height: var(--top-menu-height);
	color: var(--dim-6-color);
	background:transparent;
	border:none;
	border-radius: 3px;
	display: flex;
	align-items: center;
	font-size:11px;
	font-weight: bold;
}
nav.top-menu .lang img {
	width:16px;
	margin-right: 5px;
	border-radius: 2px;
}

nav.top-menu .theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	padding: 0;
	line-height: normal;
}
nav.top-menu .theme-toggle-option {
	display: flex;
	align-items: center;
	gap: 5px;
	width: auto;
	height: 28px;
	padding: 0 7px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--dim-6-color);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
nav.top-menu .theme-toggle-option.is-on {
	background: var(--dim-e-color);
	color: var(--text-color);
}
nav.top-menu .theme-toggle-option i { font-size: 13px; }
nav.top-menu .theme-toggle-option:not(.is-on):hover {
	background: var(--top-menu-hover-bg-color);
	color: var(--text-color);
}

header.main {
	/* position: fixed; */
	position:sticky;
	top: max(env(safe-area-inset-top, 0px), 0px);
	z-index: 1000;
}
.header-spacer { height: 0; }
@media (min-width: 769px) {
	body.no-scroll header.main {
		position: fixed;
		top: var(--header-main-top, 0px);
		left: 0;
		right: 0;
		width: 100%;
	}
	body.no-scroll .header-spacer {
		height: var(--header-main-height, 0px);
	}
}

header .main-header {
	/* background: #000; */
	/* border-bottom: 1px solid #e5e5e5; */
	z-index: 1000;

	background: rgba(0, 0, 0, 1);
    /* backdrop-filter: blur(45px); */
}
header .main-header .wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: relative;
	height: var(--header-height);
}

header .header-left {
	/* flex: 1; */
	display: flex;
	align-items: center;
	flex-shrink: 0;
	/* justify-content: space-between; */
	/* padding-right: 30px; */
}
header .search-pad { flex:1; padding: 0 20px; }
header .header-right { flex-shrink: 0; text-align: right; white-space: nowrap; font-size:0; margin-right: -10px; }

header .menu-button {
	color: #fff;
	font-size: 22px;
	position: relative;
	min-width: 36px;
	height: var(--header-height);
	padding:0 15px;
	margin-left:-15px;
	line-height: var(--header-height);
	background: transparent;
	border:none;
	cursor: pointer;
	display: none;
}

@media (hover: hover) {
	header .menu-button:hover { color:#6cb1ff; }
}


header .logo {
	margin-right: 40px;
	font-size:0;
	flex-shrink: 0;
	/* Make the entire header-height area clickable around the logo. */
	height: var(--header-height);
	display: flex;
	align-items: center;
}
header .logo img {
	max-height:22px;
	display: block;
	transition: opacity 0.15s ease;
}
/* Give pointer devices a subtle logo hover response. */
@media (hover: hover) and (pointer: fine) {
	header .logo:hover img { opacity: 0.8; }
}

/* header .categories-button {
	border:none;
	border-radius: 3px;
	height:36px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 34px;
	padding: 0 10px;
	white-space: nowrap;
	background-color: #248bff;
	margin-top: 1px;
	cursor: pointer;
	position: relative;
}
header .categories-button i {
	margin-right: 3px;
	font-size: 16px;
	vertical-align: -1px;
	color:#fff;
}
header .categories-button:hover { background-color: #3c97ff; }
header .categories-button:active { background-color: #1a80f4; }


header .categories-button-pad .black-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,.2);
	z-index: 999;
	display: none;
}

header .categories-button-pad.open .black-overlay { display: block; }
header .categories-button-pad.open .categories-button { border-radius: 3px 3px 0 0; z-index: 1010; background-color: #fff; color: #000; }
header .categories-button-pad.open .categories-button i { color: #000; }
header .categories-button-pad.open .categories-button::after {
	content: "";
	position: absolute;
	top: 100%; left: 0;
	width: 100%; height: 10px;
	background: #fff;
	z-index: 1001;
} */





header .menu-item { display: inline-block; position: relative; }

header .menu-item .icon {
	display: block;
	text-align: right;
	color:#999;
	font-size:20px;
	position: relative;
	min-width: 36px;
	background: transparent;
	border:none;
	height: var(--header-height);
	padding:0 15px;
	line-height: var(--header-height);
	cursor: pointer;
}
header .menu-item.open .icon { color:#fff; z-index: 1001; background: #333; }

header .user-menu .account-avatar,
header .user-menu.authenticated .icon > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	background: var(--f1-blue);
	border-radius: 50%;
	vertical-align: middle;
	position: relative;
	top: -2px;
}

@media (hover: hover) and (pointer: fine) {
	header .menu-item .icon:hover { color:#fff; }
}

header .menu-item.cart-menu .icon .badge {
	position: absolute;
	top: calc(var(--header-height) / 2 - 20px);
	left: calc(50% + 0px);
	background: #f61515;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	padding: 0 5px;
	border-radius: 9px;
	height:18px;
	min-width: 18px;
	line-height: 18px;
	text-align: center;
}


header .search-button-mobile {
	color: #fff;
	font-size: 20px;
	position: relative;
	min-width: 36px;
	height: var(--header-height);
	padding:0 15px;
	line-height: var(--header-height);
	background: transparent;
	border:none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
header .menu-item.search-button-mobile { display: none; }

.cart-top {
	position: absolute;
	top: calc(100% + 3px);
	right: 0;
	width: 400px;
	max-height: calc(90vh - var(--header-height) - var(--top-menu-height));
	background: var(--background-color);
	color: var(--text-color);
	box-shadow: 0 5px 60px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .05);
	border-radius: 12px;
	font-size: 14px;
	white-space: normal;
	text-align: right;
	padding-top: 15px;
	z-index: 1100;
	flex-direction: column;
	cursor: default;
	display: none;
}
.cart-menu.open .cart-top { display: flex; }
.cart-top:before {
    content: "";
    position: absolute;
    right:17px;
    top: -6px;
    width: 20px;
    height: 20px;
    background: var(--background-color);
	border-radius: 3px;
    transform: rotate(45deg);
}

.cart-top .cart-items {
	overflow-y: auto;
	max-height: calc(90vh - var(--header-height) - var(--top-menu-height));
}
.cart-top .cart-items .empty {
	text-align: center;
	padding: 20px;
	color: var(--dim-6-color);
}
.cart-top .cart-items .empty i {
	font-size: 40px;
	color: var(--dim-9-color);
}
.cart-top .cart-items .empty p {
	font-size: 16px;
	font-weight: bold;
	margin-top: 10px;
}

.cart-top .item {
	display: flex;
	flex-direction: row;
	text-align: left;
	padding: 10px;
	position: relative;
	line-height: 1.3;
	border-bottom: 1px solid var(--dim-e-color);
}
.cart-top .item:last-of-type { border-bottom: none; }
.cart-top .item:hover { background: var(--dim-fa-color); }

.cart-top .item .thumb {
	width: 55px;
	height: 55px;
	margin-right: 15px;
}
.cart-top .item .thumb img { width: 100%; height: 100%; border-radius: 5px; object-fit: cover; }

.cart-top .item .info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.cart-top .item .info a { margin: 0 30px 5px 0; display: block; }
.cart-top .item .brand { font-size: 12px; margin-bottom: 3px; color: var(--brand-name-color); }
.cart-top .item .name { font-size: 13px; font-weight: 500; margin-bottom: 3px; }
.cart-top .item .item-bottom { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; }
.cart-top .item .item-bottom .quantity { font-size: 12px; font-weight: 500; color: var(--text-color); margin-right: 10px; }
.cart-top .item .pack { display:inline-block; font-size: 12px; font-style: italic; color: var(--product-pack-color); }
.cart-top .item .options { display:inline-block; font-size: 12px; font-style: italic; color: var(--product-options-color); }
.cart-top .item .price { font-size: 12px; text-align: right; }
.cart-top .item .price .regular { color: var(--price-regular-color); position: relative; }
.cart-top .item .price .regular::after {
	content: '';
	position: absolute;
	top: 55%; left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--price-regular-color);
	opacity: 0.4;
}
.cart-top .item .price .sale { color: var(--price-sale-color); font-weight:bold; }

.cart-top .item .remove {
	position: absolute;
	top: 10px; right: 10px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: var(--dim-9-color);
	background: transparent;
	border:none;
	font-size: 16px;
	cursor: pointer;
}
.cart-top .item .remove:hover { color: var(--red-color); }


.cart-top .cart-bottom {
	padding: 10px;
	border-top: 1px solid var(--dim-e-color);
}
.cart-top .cart-bottom .total {
	font-size: 14px;
	color: var(--dim-3-color);
	padding: 10px 0 20px;
}
.cart-top .cart-bottom .total b { color: #129645; }
.cart-top .cart-bottom .open-cart {
	background: #248bff;
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 10px 15px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	display:block;
	text-align: center;
}
.cart-top .cart-bottom .open-cart:hover { background: #3c97ff; }
.cart-top .cart-bottom .open-cart:active { background: #1a80f4; }
.cart-top .cart-bottom .open-cart i { margin-left: 5px; opacity: 0.8; }



nav.submenu {
	background: var(--submenu-bg-color);
	border-bottom: 1px solid var(--top-menu-bg-color);
	box-shadow: 0 0 6px rgba(0,0,0,.1);
	z-index: 1000;
}
nav.submenu .wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	white-space: nowrap;
}
nav.submenu .sub-left {
	margin-left:-10px;
	font-size: 0;
}
nav.submenu .sub-right {
	margin-right:-10px;
	flex-shrink: 0;
}
nav.submenu .sub-right .item {
	color: var(--dim-6-color);
	font-size: 13px;
	font-weight: 600;
}
nav.submenu .sub-right .item:hover { color: var(--submenu-text-color); }
/* Keep service links reachable when the desktop bar runs out of room. */
nav.submenu .submenu-more { position: relative; display: none; }
nav.submenu .submenu-more summary.item { list-style: none; cursor: pointer; }
nav.submenu .submenu-more summary::-webkit-details-marker { display: none; }
nav.submenu .submenu-more summary i { margin-left: 6px; font-size: 10px; }
nav.submenu .submenu-more[open] summary { background: var(--menu-tab-bg-color); color: var(--submenu-open-text-color); }
nav.submenu .submenu-more[open] summary i { transform: rotate(180deg); }
nav.submenu .submenu-more-panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 2;
	min-width: 210px;
	max-width: min(320px, calc(100vw - 30px));
	padding: 6px;
	border: 1px solid var(--basic-box-border-color);
	border-radius: 8px;
	background: var(--menu-panel-bg-color);
	box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
nav.submenu .submenu-more-panel a { display: block; padding: 10px 12px; border-radius: 4px; color: var(--menu-panel-text-color); font-size: 13px; font-weight: 600; white-space: normal; }
nav.submenu .submenu-more-panel a:hover { background: var(--menu-panel-hover-bg-color); color: var(--menu-panel-h-color); }
nav.submenu .submenu-more summary:focus-visible,
nav.submenu .submenu-more-panel a:focus-visible { outline: 2px solid var(--hl-color); outline-offset: 2px; }
nav.submenu .submenu-more-panel .submenu-tracking { display: none; }
nav.submenu .item {
	display: inline-block;
	color: var(--submenu-text-color);
	font-size: 14px;
	font-weight: bold;
	padding: 8px 10px;
	cursor: default;
}
nav.submenu .dd-category-toggle {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}
nav.submenu .dd-category-toggle:after {
	position: absolute;
	right: -10px;
	bottom: -8px;
	left: -10px;
	height: 3px;
	background: var(--hl-color);
	content: '';
	opacity: 0;
	transform: scaleX(.45);
	transform-origin: center;
	transition: opacity .16s ease, transform .2s ease;
}
nav.submenu .item.dd-category:hover .dd-category-toggle:after,
nav.submenu .item.dd-category.open .dd-category-toggle:after {
	opacity: 1;
	transform: scaleX(1);
}
nav.submenu .dd-category-toggle:focus-visible {
	outline: 2px solid var(--hl-color);
	outline-offset: 2px;
}
nav.submenu .submenu-category-icon {
	display: inline-block;
	width: 16px;
	margin-right: 5px;
	color: currentColor;
	font-size: 12px;
	text-align: center;
	vertical-align: 0;
	opacity: .7;
}
nav.submenu a.item { cursor: pointer; }
/* Plain links in the bar (track, b2b, stores) never open a panel,
   so they just get a normal hover. */
nav.submenu .item:hover {
	background: var(--top-menu-hover-bg-color);
}
/* Hover previews a dropdown; the open tab becomes part of the panel surface. */
nav.submenu .item.dd-category:hover {
	background: var(--menu-tab-bg-color);
	color: var(--submenu-open-text-color);
	border: 0;
	border-radius: 5px 5px 0 0;
	padding: 8px 10px;
}
nav.submenu .item.dd-category.open {
	background: var(--menu-tab-bg-color);
	color: var(--submenu-open-text-color);
	border: 0;
	border-radius: 5px 5px 0 0;
	padding: 8px 10px;
}

@media (min-width: 1440px) and (min-height: 850px) {
	:root { --submenu-height: 46px; }
	nav.submenu .item,
	nav.submenu .item.dd-category:hover,
	nav.submenu .item.dd-category.open { padding: 12px 10px; }
	nav.submenu .dd-category-toggle:after { bottom: -12px; }
}



.brands-dd { padding: 10px; }
.brands-dd > h3 { color:var(--menu-panel-h-color); }
.top-brands {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 10px 0;
	overflow: hidden;
}
.top-brands a {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 0 10px;
	text-align: center;
}
.top-brands a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 5px;
	filter: var(--menu-brand-logo-filter);
}
.top-brands a .brand-logo-fallback:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 12px;
	line-height: 1.25;
}
.top-brands a:hover { background: transparent; }

.menu .top-brands { flex-wrap: wrap; }
.menu .top-brands a {
	width: 70px;
	height: 70px;
	margin: 0 5px;
	padding: 5px;
}

.all-brands {
	column-count: 7;
	column-gap: 20px;
	padding: 10px 0;
}
.all-brands i { color: #ff6c3c; font-size:0.8em; margin-left: 3px; vertical-align: 1px; }
.all-brands h5 { font-size: 14px; font-weight: bold; color: var(--menu-panel-h-color); padding-left: 5px; margin-top: 5px; }

@media (max-width: 1400px) {
	.all-brands { column-count: 5; }
}
@media (max-width: 1024px) {
	.all-brands { column-count: 1; }
}





.popular-brands {
	width: 300px;
	padding:10px 0;
}
.popular-brands a {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 0 10px;
	text-align: center;
}
.popular-brands a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 5px;
	filter: var(--menu-brand-logo-filter);
}
.popular-brands a:hover { background: transparent; }

.menu .popular-brands { flex-wrap: wrap; }
.menu .popular-brands a {
	width: 70px;
	height: 70px;
	margin: 0 5px;
	padding: 5px;
}





nav.submenu .lang {
	display: inline-block;
	vertical-align: -2px;
}
nav.submenu .lang button {
	width: auto;
	background:transparent;
	border:1px solid #fff;
	border-radius: 3px;
	display: flex;
	align-items: center;
	font-size:10px;
	font-weight: bold;
}
nav.submenu .lang img {
	width:16px;
	margin-right: 5px;
	border:1px solid #ddd;
}

@media (max-width: 1024px) {
	:root { --submenu-height: 0px; }
	nav.submenu { display: none; }
}


/* .categories-menu {
	display: inline-block;
	position: relative;
} */

/* .categories-button {
	color: #000;
	font-weight: bold;
	white-space: nowrap;
	font-size: 14px;
	border:none;
	background: #fff;
	position: relative;
	cursor: pointer;
} */

/* .categories-menu .black-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,.2);
	z-index: 999;
	display: none;
}

.categories-menu.open .black-overlay { display: block; }
.categories-menu.open .categories-button { border-radius: 3px 3px 0 0; z-index: 1010; } */


.categories-content {
	display: flex;
	flex-direction: row;
	position: absolute;
	top: 100%; left: 0;
	/* width:100%; */
	/* max-width: calc(min(100%, var(--max-width)) - var(--side-padding) * 2 + 20px); */
	background: #fff;
	border-radius: 0 5px 5px 5px;
	white-space: normal;
	box-shadow: 0 10px 20px rgba(0,0,0,.2);
	z-index: 1000;
	display: none;
}
.categories-content.open { display: flex; }


.categories-content .top { flex: 0 0 auto; padding:10px 0; overflow-y: scroll; }
.categories-content .subs { padding:10px 20px; border-left:1px solid #eee; width: 100%; display: none; }
.categories-content .subs.visible { display: block; }

.categories-content .top a {
	display: block;
	padding: 6px 15px;
	color: #000;
	border-bottom: 1px solid #eee;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	position: relative;
}
.categories-content .top a.active { background-color: #eee; }
.categories-content .top a:last-of-type { border-bottom: none; }

.categories-content i.trending {
	color: #ff6c3c;
	margin-left: 5px;
}
.categories-content .top .has-sub { padding-right: 30px; }
.categories-content .top .has-sub::after {
	content: "";
	position: absolute;
	top: 12px; right: 12px;
	width: 0; height: 0;
	border-left: 4px solid #999;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
}

.categories-content .subs a { display:block; white-space: wrap; break-inside: avoid; color: #444; padding: 2px 5px; }
.categories-content .subs a.cm-level-1 { font-weight: 500; color:#000; }
.categories-content .subs a.cm-level-2 { padding-left: 10px; }
.categories-content .subs a.cm-level-3 { padding-left: 20px; }
.categories-content .subs a:hover { background-color: #f5f5f5; }
.categories-content .sub-block {
	height: 100%;
	width:100%;
	overflow-y: auto;
	display:none;
}
.categories-content .sub-block .in {
	width: 100%;
	/* column-count: 3;
	column-gap: 10px; */
	/* column-fill: auto; */
}
.categories-content .sub-block .columns {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.categories-content .sub-block .column {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-right: 10px;
}
.categories-content .sub-block h3 {
	display: block;
	width: 100%;
	font-size: 18px;
	margin-bottom: 20px;
}
.categories-content .sub-block .block {
	/* display: inline-block;
	-webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid; */
	margin-bottom: 0px;
	width: 100%;
}









.category-content {
	flex-direction: row;
	position: absolute;
	/* Overlap the submenu border so there is no dead hover seam above the panel. */
	top: calc(100% - 1px); left: 50%;
	transform: translateX(-50%);
	width:100%;
	max-width: calc(min(100%, var(--max-width)) - var(--side-padding) * 2 + 20px);
	max-height: calc(90vh - var(--header-height) - var(--top-menu-height));
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--menu-panel-bg-color);
	border: 0;
	border-radius: 0 0 5px 5px;
	white-space: normal;
	box-shadow: var(--menu-panel-shadow);
	z-index: 10;
	display: flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, visibility 0s linear .18s;
}
.category-content.open {
	transform: translateX(-50%);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}
.category-content.switching { transition: none; }
.category-content .subs {
	padding:18px 24px 24px;
	width: 100%;
}

.category-content .subs a { display:block; white-space: normal; break-inside: avoid; color: var(--menu-panel-text-color); padding: 5px 8px; border-radius: 4px; font-size: 13px; font-weight: normal; line-height: 1.4; transition: background-color .12s ease, color .12s ease; }
/* A parent category is a column title and a link at once: the rule under it holds the column,
   and the accent sweeping that rule says the title itself is clickable. The chevron's slot is
   reserved by space-between, so revealing it on hover shifts nothing. The rule is a hue-neutral
   alpha rather than --menu-panel-border-color, which is transparent on the dark panel. */
.category-content .subs a.cm-level-0 { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; padding:0 8px 9px; border:0; border-radius:0; color:var(--menu-panel-h-color); font-size:14px; font-weight:700; line-height:1.35; }
.category-content .subs a.cm-level-0 .cm-name { flex:1 1 auto; min-width:0; }
.category-content .subs a.cm-level-0 .cm-more-count { flex:0 0 auto; color:var(--menu-panel-dim-color); font-size:11px; font-weight:600; transition:color .14s ease; }
.category-content .subs a.cm-level-0:hover .cm-more-count { color:var(--hl-text-color); }
.category-content .subs a.cm-level-0:before { position:absolute; right:8px; bottom:0; left:8px; height:1px; background:rgba(127,127,127,.28); content:''; transition:background-color .14s ease; }
.category-content .subs a.cm-level-0:after { position:relative; top:-1px; flex:0 0 auto; color:var(--hl-text-color); font-size:15px; font-weight:600; line-height:1; content:'›'; opacity:0; transform:translateX(-4px); transition:opacity .14s ease, transform .16s ease; }
/* Children get a filled pill; the heading gets an underline sweep — two link classes, two shapes. */
.category-content .subs a.cm-level-0:hover { background:transparent; color:var(--hl-text-color); }
.category-content .subs a.cm-level-0:hover:before { background:var(--hl-color); }
.category-content .subs a.cm-level-0:hover:after { opacity:1; transform:translateX(0); }
/* A leaf has nothing under it, so the rule would divide it from the next block rather than
   from its own list. Without the rule it reads as a standalone link, not an empty section. */
.category-content .subs a.cm-level-0.cm-leaf { margin-bottom:0; padding-bottom:0; }
.category-content .subs a.cm-level-0.cm-leaf:before { display:none; }
.category-content .subs .promo-menu-heading { display:block; margin-bottom:5px; padding:5px 8px; color:var(--menu-panel-dim-color); font-size:11px; font-style:normal; font-weight:700; letter-spacing:.05em; line-height:1.3; text-transform:uppercase; }
.category-content .subs a.cm-level-1 { padding-left: 10px; }
.category-content .subs .promo-menu-section { margin-top:18px; }
.category-content .subs a.brand-month-link { display:flex; align-items:center; justify-content:flex-start; gap:8px; }
.category-content .subs .brand-month-discount { display:inline-flex; flex:0 0 auto; align-items:baseline; gap:3px; padding:1px 6px 2px; border:1px solid color-mix(in srgb, var(--hl-color) 18%, transparent); border-radius:9px; background:color-mix(in srgb, var(--hl-color) 7%, transparent); line-height:1.25; white-space:nowrap; }
.category-content .subs .brand-month-qualifier { color:var(--menu-panel-dim-color); font-size:9px; font-weight:600; }
.category-content .subs .brand-month-value { color:var(--hl-text-color); font-size:11px; font-weight:700; }
.category-content .subs .promo-menu-action { margin-top:14px; }
.category-content .subs .promo-menu-block a.promo-menu-button { display:inline-flex; align-items:center; margin:5px 8px 7px; padding:7px 11px; border:1px solid color-mix(in srgb, var(--hl-color) 35%, transparent); border-radius:5px; background:color-mix(in srgb, var(--hl-color) 7%, transparent); color:var(--hl-text-color); font-size:12px; font-weight:600; }
.category-content .subs .promo-menu-block a.promo-menu-button:hover { border-color:color-mix(in srgb, var(--hl-color) 55%, transparent); background:color-mix(in srgb, var(--hl-color) 13%, transparent); color:var(--hl-text-color); }
.category-content .subs a:hover { background-color: var(--menu-panel-hover-bg-color); color: var(--menu-panel-h-color); }
.category-content .subs a.is-current { background: color-mix(in srgb, var(--hl-color) 10%, transparent); color: var(--menu-panel-h-color); font-weight: 600; box-shadow: inset 3px 0 0 var(--hl-color); }

.category-content .subs .columns {
	display: flex;
	flex-direction: row;
	gap: 28px;
	width: 100%;
}
.category-content .subs .column {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.category-content .subs .block {
	margin-bottom: 22px;
}

/* Promo cards sit beside the Offers links. */
.category-content.has-promo-cards .subs {
	flex: 0 0 42%;
	width: 42%;
}
.desktop-promo-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 58%;
	padding: 20px 20px 20px 0;
}
.desktop-promo-cards.single-card {
	display: flex;
	justify-content: flex-end;
}
.desktop-promo-cards.single-card .desktop-promo-card {
	flex: 0 0 calc((100% - 16px) / 2);
	width: calc((100% - 16px) / 2);
}
.desktop-promo-card {
	position: relative;
	display: flex;
	min-height: 255px;
	overflow: hidden;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
.desktop-promo-card:after {
	position: absolute;
	right: -55px;
	bottom: -68px;
	width: 185px;
	height: 185px;
	border: 30px solid rgba(255,255,255,.12);
	border-radius: 50%;
	content: '';
	z-index: -1;
}
.desktop-promo-card.gift-card {
	background-color: rgb(20,50,92);
	background-image: linear-gradient(90deg, rgba(20,50,92,.96) 0%, rgba(17, 39, 69, 0.72) 34%, rgba(11, 29, 54, 0.12) 48%, rgba(9, 23, 43, 0) 56%), url('../images/gift-card-menu-v18.webp');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.desktop-promo-card.gift-card:after { display:none; }
.desktop-promo-card.vip-card {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.desktop-promo-card.vip-card-gold {
	background-color: #110e0a;
	background-image: linear-gradient(90deg, rgba(10,9,8,.96) 0%, rgba(10,9,8,.76) 34%, rgba(10,9,8,.12) 52%, rgba(10,9,8,0) 62%), url('../images/vip-card-menu-gold-v8.webp');
}
.desktop-promo-card.vip-card-blue {
	background-color: #030a15;
	background-image: linear-gradient(90deg, rgba(3,8,15,.96) 0%, rgba(3,8,15,.76) 34%, rgba(3,8,15,.12) 52%, rgba(3,8,15,0) 62%), url('../images/vip-card-menu-blue-v5.webp');
}
.desktop-promo-card.vip-card:after { display:none; }
.desktop-promo-card .kicker {
	margin-bottom: 16px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .1em;
	line-height: 1.3;
	opacity: .78;
	text-transform: uppercase;
}
.desktop-promo-card > strong {
	max-width: 240px;
	margin-bottom: 10px;
	font-size: 24px;
	line-height: 1.1;
}
.desktop-promo-card .description {
	max-width: 260px;
	font-size: 12px;
	line-height: 1.45;
	opacity: .82;
}
.desktop-promo-card .cta {
	margin-top: auto;
	padding: 9px 12px;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-size: 11px;
	font-weight: 800;
}
.desktop-promo-card .cta i { margin-left: 5px; font-size: 9px; }
.desktop-promo-card:hover { color: #fff; filter: brightness(1.06); }

@media (max-width: 1200px) {
	.category-content.has-promo-cards .subs { flex-basis: 38%; width: 38%; }
	.desktop-promo-cards { width: 62%; }
	.desktop-promo-card { min-height: 235px; padding: 20px; }
	.desktop-promo-card > strong { font-size: 20px; }
}

/* Laptop-height viewports. The panel is capped at 90vh minus the two bars, which leaves roughly
   480px on a 768px screen, so the roomier rhythm above tips it into its own scrollbar. Tighten the
   vertical spacing rather than the type — the JS balancer re-measures on open, so columns rebalance
   to the compact heights on their own. ~1080p viewports stay above this and keep the roomy spacing. */
@media (max-height: 860px) {
	.category-content .subs { padding: 12px 18px 16px; }
	.category-content .subs a { padding: 3px 8px; }
	.category-content .subs a.cm-level-0 { margin: 0 0 6px; padding: 0 8px 6px; }
	.category-content .subs .block { margin-bottom: 14px; }
	.category-content .subs .columns { gap: 22px; }
	.category-content .subs .promo-menu-section { margin-top: 12px; }
	.category-content .subs .promo-menu-action { margin-top: 10px; }
}

/* Narrow desktops hold fewer columns, so each one runs taller — buy width back from the gaps. */
@media (max-width: 1280px) {
	nav.submenu .sub-right > .submenu-secondary { display: none; }
	nav.submenu .submenu-more.has-secondary { display: inline-block; }
	.category-content .subs { padding-right: 18px; padding-left: 18px; }
	.category-content .subs .columns { gap: 20px; }
}
@media (max-width: 1120px) {
	nav.submenu .sub-right > .submenu-tracking { display: none; }
	nav.submenu .submenu-more { display: inline-block; }
	nav.submenu .submenu-more-panel .submenu-tracking { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.category-content, .category-content .subs a,
	.category-content .subs a.cm-level-0:before,
	.category-content .subs a.cm-level-0:after { transition: none; }
}







.menu-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,.5);
	z-index: 999;
	display: none;
}

.menu {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: 300px;
	max-width: 90%;
	background: var(--mobile-menu-bg-color);
	color: var(--mobile-menu-text-color);
	box-shadow: 0 0 20px rgba(0,0,0,.2);
	z-index: 1000;
	display: none;
}
.menu .header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: var(--header-height);
	border-bottom: 1px solid var(--mobile-menu-sep-color);
}
.menu .close {
	position: absolute;
	top: 0px; right: 0px;
	width: var(--header-height);
	height: var(--header-height);
	text-align: center;
	color: var(--dim-9-color);
	background: transparent;
	border:none;
	font-size: 24px;
	cursor: pointer;
}
.menu .back {
	position: absolute;
	top: 0px; left: 0px;
	height: var(--header-height);
	text-align: center;
	color: var(--dim-3-color);
	background: transparent;
	border:none;
	padding-left: 20px;
	font-size: 16px;
	cursor: pointer;
	display: none;
}
.menu .back i { margin-right: 10px; font-size: 16px; vertical-align: -1px; }
.menu .wrapper { padding: 0 20px; }
.menu .item {
	display:block;
	padding:5px 20px;
	background: transparent;
	border:none;
	width: 100%;
	text-align: left;
	font-size: 14px;
	color: var(--mobile-menu-text-color);
}

.menu .item .icon {
	display: inline-block;
	width: 20px;
	text-align: center;
	margin-right: 5px;
}
.menu .item.flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }

.menu .sep {
	height: 1px;
	background: var(--mobile-menu-sep-color);
	margin: 10px 0;
}
.menu .categories {
	padding:10px 0;
	border-bottom: 1px solid var(--mobile-menu-sep-color);
}
.menu .categories .item {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 500;
	background: transparent;
	border:none;
	cursor: pointer;
}
.menu .categories .item i {
	color: var(--mobile-menu-text-color);
	opacity: 0.4;
	font-size: 12px;
	margin-left: 10px;
}
.menu .categories .item:hover { background: #f5f5f5; }

.menu .group {
	padding:10px 0;
	border-bottom: 1px solid var(--mobile-menu-sep-color);
}

.menu .screen {
	padding:10px 0;
	overflow-y: auto;
	height: calc(100% - var(--header-height));
	display: none;
}

.menu .block {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding:10px 0px;
	margin-bottom: 0px;
}
.menu .block a { display:block; white-space: wrap; break-inside: avoid; color: #444; padding: 5px 20px; font-weight: normal; }
.menu .block a:hover { background-color: #f5f5f5; }
.menu .block a.cm-level-0 { font-weight: 500; color:#000; }
.menu .block a.cm-level-1 { padding-left: 30px; }

.menu .block .see-more { color:#666; font-style: italic; }
.menu .block .see-more i { font-size: 10px; vertical-align: 0px; margin-left: 5px; }

.menu .user {
	padding:10px 20px;
	border-bottom: 1px solid var(--mobile-menu-sep-color);
	display: flex;
	flex-direction: row;
	align-items: center;
	width:100%;
}
.menu .user .icon {
	width: 36px;
	text-align: center;
	margin-right: 10px;
	border: 1px solid var(--dim-d-color);
	border-radius: 50%;
	height: 36px;
	line-height: 32px;
	background: var(--mobile-menu-bg-color);
}
.menu .user .icon i {
	margin: 0;
	font-size: 16px;
	color: var(--dim-a-color);
}
.menu .user .info {
	color: var(--dim-3-color);
	font-size: 14px;
	font-weight: bold;
}
.menu .user .info .logout {
	color: var(--dim-6-color);
	font-size: 12px;
	font-weight: normal;
}
.menu .user .settings {
	margin-left: auto;
}
.menu .user .settings i {
	width: 16px;
	height: 16px;
	color: var(--dim-a-color);
}

.menu .user .login,
.menu .user .register {
	display: inline-block;
	margin-left: 10px;
	padding: 4px 10px;
	background: transparent;
	color: var(--text-color);
	border: 1px solid var(--dim-c-color);
	border-radius: 12px;
	font-size: 12px;
	cursor: pointer;
}
.menu .user .login { background-color: var(--dim-9-color); color: #fff; border-color: var(--dim-9-color); }



.menu .lang {
	display: inline-block;
	/* vertical-align: -2px; */
}
.menu .lang button {
	background:transparent;
	border:none;
	display: flex;
	align-items: center;
	font-size:10px;
	font-weight: bold;
}
.menu .lang img {
	width:16px;
	margin-right: 5px;
	border-radius: 2px;
	vertical-align: -1px;
}
.menu .lang .lang-indicator { color: var(--dim-9-color); }

.menu .theme-button {
	display: inline-block;
}
.menu .theme-button button {
	text-align: center;
	color: #999;
	background: transparent;
	border:none;
	font-size: 16px;
	cursor: pointer;
}
.menu .theme-button .theme-indicator { color: var(--dim-9-color); }



@media (max-width: 1024px) {
	header .menu-button { display: block; margin-right: 20px; }
}

@media (max-width: 768px) {
	.weekend-sale-bar { height: 60px; }
	/* header.main { position: relative; } */
	header .main-header .wrapper {
		/* padding-bottom: 51px; */
		height: auto;
		backdrop-filter: none;
		background-color: #000;
	}
	header .header-left { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); max-width: calc(100% - 140px); }
	header .logo { margin-right: 0; }
	.top-menu { display: none; }
	header .search-pad {
		/* position: absolute;
		bottom: 0; left: 0; right:0;
		background-color: #fff;
		border-bottom:1px solid #e5e5e5; */
		padding: 0;
		opacity: 0;
		transition: opacity 0.2s ease;
		pointer-events: none;
		position:absolute;
		top: 50%; left: 50%;
		transform:translate(-50%, -50%);
		width: calc(100% - 140px);
	}
	header .menu-button { margin-right:0; }
	header .menu-item .icon { color:#fff; }
	header .categories-button-pad { display: none; }
	header .header-right .user-menu { display: none; }
	header .header-right .favs-menu { display: none; }
	header .menu-item.search-button-mobile { display: inline-block; }

	header.scrolled .main-header .wrapper { padding-bottom: 0; }
	header.scrolled .header-left { display:none; }
	header.scrolled .search-pad, header .search-pad.active { opacity: 1; pointer-events: all; }
	header.scrolled .search-button-mobile { opacity:0; pointer-events: none; }

	header .search-pad.active {
		position:fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		transform: translate(0, 0);
		width: 100%;
		z-index: 1001;
	}
}


/* Weekend sale top bar: above the top menu, outside the sticky header. Follows the "Weekend deals" red tape branding. */
.weekend-sale-bar {
	--wsb-red: #e30613;
	display: block;
	position: relative;
	height: 44px;
	overflow: hidden;
	/* Deep red, so the bar stays apart from the black header below. */
	background: #9d0512;
	color: #fff;
}
.weekend-sale-bar .wsb-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 32px;
	height: 100%;
	white-space: nowrap;
}
.weekend-sale-bar .wsb-tape {
	position: relative;
	justify-self: start;
	display: flex;
	align-items: center;
	align-self: stretch;
	padding-right: 34px;
	font-family: 'Archivo', var(--font-family);
	font-stretch: 125%;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	z-index: 0;
}
/* Red block bleeds to the left screen edge and ends with a slanted cut. */
.weekend-sale-bar .wsb-tape::before {
	content: '';
	position: absolute;
	top: 0; bottom: 0; right: 0;
	left: -100vw;
	background: var(--wsb-red);
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
	z-index: -1;
}
.weekend-sale-bar .wsb-offer {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.weekend-sale-bar .wsb-offer small {
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	/* Optical nudge: centers the letters on the cap height of "-50%". */
	transform: translateY(1px);
}
.weekend-sale-bar .wsb-offer b {
	font-family: 'Archivo', var(--font-family);
	font-stretch: 125%;
	font-size: 20px;
	font-weight: 900;
	line-height: 1;
}
.weekend-sale-bar .wsb-cta {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 30px;
	padding: 0 16px 0 18px;
	border-radius: 999px;
	background: #fff;
	color: var(--wsb-red);
	font-size: 13px;
	font-weight: 700;
	transition: background 0.2s ease;
}
.weekend-sale-bar .wsb-cta svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.weekend-sale-bar:hover .wsb-cta { background: #ffe9ea; }
.weekend-sale-bar:hover .wsb-cta svg { transform: translateX(3px); }
.weekend-sale-bar:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

@media (max-width: 768px) {
	.weekend-sale-bar { height: 60px; }
	.weekend-sale-bar .wsb-inner { grid-template-columns: auto 1fr auto; gap: 14px; }
	.weekend-sale-bar .wsb-tape { padding-right: 26px; font-size: 13px; }
	.weekend-sale-bar .wsb-tape::before { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
	.weekend-sale-bar .wsb-offer b { font-size: 19px; }
	/* Round arrow button; the label stays for screen readers. */
	.weekend-sale-bar .wsb-cta { width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}
@media (max-width: 380px) {
	.weekend-sale-bar .wsb-inner { gap: 10px; }
	.weekend-sale-bar .wsb-tape { padding-right: 20px; font-size: 12px; }
	.weekend-sale-bar .wsb-offer small { display: none; }
	.weekend-sale-bar .wsb-offer b { font-size: 17px; }
}