/* Mobile menu v2 — all selectors namespaced m2- so nothing touches the live menu. */

:root {
	--m2-w: min(360px, 88vw);
	/* Hue-neutral tint — sits correctly on both the white and the dark navy panel. */
	--m2-tint: rgba(127, 127, 127, .14);
	--m2-tint-strong: rgba(127, 127, 127, .22);
	--m2-ease: cubic-bezier(.22, .61, .36, 1);
	--m2-dur: .28s;
	--m2-row-h: 50px;
	--m2-pad: 16px;
}

.m2-panel *,
.m2-panel *::before,
.m2-panel *::after { box-sizing: border-box; }

.m2-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	/* Stays under .dark-overlay (1000) and .lang-ww (1100), same as the v1 menu. */
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--m2-dur) var(--m2-ease), visibility 0s linear var(--m2-dur);
}
.m2-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--m2-dur) var(--m2-ease), visibility 0s linear 0s;
}

.m2-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--m2-w);
	display: flex;
	flex-direction: column;
	background: var(--mobile-menu-bg-color);
	color: var(--mobile-menu-text-color);
	/* Cast only toward the page so no shadow reads as a border on the panel's left edge. */
	box-shadow: 16px 0 24px -16px rgba(0, 0, 0, .42);
	border: 0;
	z-index: 999;
	transform: translate3d(-100%, 0, 0);
	visibility: hidden;
	will-change: transform;
	transition: transform var(--m2-dur) var(--m2-ease), visibility 0s linear var(--m2-dur);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	overscroll-behavior: contain;
}
.m2-panel.is-open {
	transform: translate3d(0, 0, 0);
	visibility: visible;
	transition: transform var(--m2-dur) var(--m2-ease), visibility 0s linear 0s;
}
/* Cover the one-pixel GPU seam produced at the left edge of the translated panel. */
.m2-panel::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2px;
	width: 3px;
	background: var(--mobile-menu-bg-color);
	content: '';
	pointer-events: none;
	z-index: 2;
}
/* While a finger is dragging the panel we drive the transform directly. */
.m2-panel.is-dragging,
.m2-panel.is-dragging .m2-screen {
	transition: none;
}


/* ---------- Header ---------- */

.m2-head {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	/* box-sizing is border-box here, so the notch inset has to be added to the height as well —
	   as padding alone it would eat the header instead of clearing the notch. */
	height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
	padding-top: env(safe-area-inset-top, 0px);
	border-left: 0;
	border-bottom: 1px solid var(--mobile-menu-sep-color);
	box-shadow: none;
}
.m2-back,
.m2-close {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--mobile-menu-text-color);
	font-size: 20px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Collapses on the root screen instead of holding an empty 48px gutter, so the title there
   lines up with the list below it. Widening on drill carries the title across with it. */
.m2-back {
	width: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-6px);
	transition: width .22s var(--m2-ease), opacity .18s var(--m2-ease), transform .18s var(--m2-ease);
}
.m2-panel.has-back .m2-back {
	width: 48px;
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}
.m2-title {
	flex: 1 1 auto;
	min-width: 0;
	/* Root: 0 + 16 = flush with the rows. Drilled: 48 + 4 = clear of the chevron. */
	padding: 0 4px 0 var(--m2-pad);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: padding-left .22s var(--m2-ease);
}
.m2-panel.has-back .m2-title { padding-left: 4px; }


/* ---------- Screen stack ---------- */

.m2-screens {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}
.m2-screen {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: var(--mobile-menu-bg-color);
	transform: translate3d(100%, 0, 0);
	visibility: hidden;
	transition: transform var(--m2-dur) var(--m2-ease), visibility 0s linear var(--m2-dur);
}
.m2-screen.is-active,
.m2-screen.is-behind {
	visibility: visible;
	transition: transform var(--m2-dur) var(--m2-ease), visibility 0s linear 0s;
}
.m2-screen.is-active { transform: translate3d(0, 0, 0); }
/* Parent screens park slightly to the left so the slide reads as depth, not a swap. */
.m2-screen.is-behind {
	transform: translate3d(-24%, 0, 0);
	pointer-events: none;
}


/* ---------- Rows ---------- */

.m2-panel a { text-decoration: none; }

.m2-list { padding: 6px 0; }

.m2-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--m2-row-h);
	padding: 8px var(--m2-pad);
	background: transparent;
	border: none;
	text-align: left;
	font-size: 15px;
	font-family: inherit;
	line-height: 1.3;
	color: var(--mobile-menu-text-color);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .12s linear;
}
.m2-row:active { background: var(--m2-tint); }

.m2-label {
	flex: 1 1 auto;
	min-width: 0;
}
.m2-ico {
	flex: 0 0 auto;
	width: 22px;
	text-align: center;
	font-size: 15px;
	color: var(--dim-6-color);
}
.m2-chev {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--dim-9-color);
}

/* A category with children gets two targets: the name opens it, the round button lists its subcategories. */
.m2-split { display: flex; align-items: stretch; }
.m2-row-main { flex: 1 1 auto; min-width: 0; }
.m2-more {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* A soft round target reads as its own control without a divider line. */
.m2-more .m2-chev {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--m2-tint);
	color: var(--dim-6-color);
	transition: background-color .12s linear;
}
.m2-more:active .m2-chev { background: var(--m2-tint-strong); }

/* Secondary rows sit quieter than the category list above them. */
.m2-row-minor {
	min-height: 46px;
	font-size: 14px;
	color: var(--dim-3-color);
}
.m2-row-minor .m2-ico { color: var(--dim-9-color); font-size: 14px; }
.m2-value {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--dim-9-color);
}
.m2-value img { width: 17px; border-radius: 2px; }

.m2-list-sep { border-top: 1px solid var(--mobile-menu-sep-color); }

.m2-row-all {
	font-weight: 600;
	color: var(--hl-color);
	border-bottom: 1px solid var(--mobile-menu-sep-color);
	margin-bottom: 6px;
}
.m2-row-all .m2-ico { color: var(--hl-color); }

.m2-row-sub {
	min-height: 44px;
	font-size: 14px;
	color: var(--dim-6-color);
}
.m2-row-sub.m2-lvl-1 { padding-left: calc(var(--m2-pad) + 16px); }
.m2-row-sub.m2-lvl-2 { padding-left: calc(var(--m2-pad) + 32px); }
.m2-row-sub.m2-lvl-3 { padding-left: calc(var(--m2-pad) + 48px); }

/* You-are-here markers, set from JS against the current URL. */
.m2-row.is-current {
	color: var(--hl-color);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--hl-color);
}
.m2-row.has-current .m2-label::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--hl-color);
	vertical-align: 1px;
}


/* Section label — names the list it sits above, not the whole panel. */
.m2-h {
	margin: 12px 0 0;
	padding: 0 var(--m2-pad);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dim-9-color);
}
/* A labelled section carries its own divider, so the rule sits above the label, not under it. */
.m2-h-sep {
	margin-top: 0;
	padding-top: 14px;
	border-top: 1px solid var(--mobile-menu-sep-color);
}


/* ---------- Segmented value (theme) ---------- */

/* The row states a setting rather than performing one, so nothing about it reads as tappable. */
.m2-row-static {
	cursor: default;
}
.m2-row-static:active { background: transparent; }

.m2-seg {
	flex: 0 0 auto;
	display: flex;
	gap: 2px;
	padding: 2px;
	border-radius: 16px;
	background: var(--m2-tint);
}
.m2-seg-btn {
	padding: 6px 12px;
	border: none;
	border-radius: 14px;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--dim-9-color);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color .12s linear, color .12s linear;
}
/* The selected side is the only one that reads as a surface — which one is current is never a guess. */
.m2-seg-btn.is-on {
	background: var(--mobile-menu-bg-color);
	color: var(--mobile-menu-text-color);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
	cursor: default;
}
.m2-theme-row.has-auto .m2-label { display: none; }
.m2-seg.has-auto { margin-left: auto; }
.m2-seg.has-auto .m2-seg-btn { padding-right: 8px; padding-left: 8px; font-size: 11px; }


/* ---------- Popular chips ---------- */

.m2-chips {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	padding: 10px var(--m2-pad) 5px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.m2-chips::-webkit-scrollbar { display: none; }
.m2-chip {
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: 18px;
	background: var(--m2-tint);
	border: 1px solid var(--mobile-menu-sep-color);
	font-size: 13px;
	font-weight: 500;
	color: var(--mobile-menu-text-color);
	white-space: nowrap;
}
.m2-chip:active { background: var(--m2-tint-strong); }


/* ---------- Account ---------- */

.m2-account {
	display: flex;
	gap: 8px;
	padding: 4px var(--m2-pad) 12px;
	border-bottom: 1px solid var(--mobile-menu-sep-color);
}
.m2-account-in {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	color: var(--mobile-menu-text-color);
}
.m2-avatar {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hl-color);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}
.m2-account-txt {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.m2-account-txt b {
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.m2-account-txt small {
	font-size: 12px;
	color: var(--dim-9-color);
}

.m2-btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 22px;
	border: 1px solid var(--dim-c-color);
	background: transparent;
	color: var(--mobile-menu-text-color);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.m2-btn-primary {
	background: var(--hl-color);
	border-color: var(--hl-color);
	color: #fff;
}


/* ---------- New version notice ---------- */

.m2-version-notice {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 16px;
	gap: 11px;
	align-items: center;
	margin: 4px var(--m2-pad) 4px;
	padding: 11px 12px;
	border: 1px solid transparent;
	border-radius: 14px;
	background:
		linear-gradient(var(--mobile-menu-bg-color), var(--mobile-menu-bg-color)) padding-box,
		linear-gradient(115deg, color-mix(in srgb, var(--hl-color) 24%, transparent), var(--hl-color), #9d6cff, color-mix(in srgb, var(--hl-color) 24%, transparent)) border-box;
	background-size: 100% 100%, 240% 100%;
	background-position: 0 0, 0 50%;
	color: var(--mobile-menu-text-color);
	overflow: hidden;
}
.m2-version-notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: color-mix(in srgb, var(--hl-color) 15%, transparent);
	color: var(--hl-color);
	font-size: 15px;
}
.m2-version-notice-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.m2-version-notice-text strong {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}
.m2-version-notice-text small {
	margin-top: 2px;
	color: var(--dim-9-color);
	font-size: 11px;
	line-height: 1.3;
}
.m2-version-notice-arrow {
	color: var(--hl-color);
	font-size: 12px;
}
.m2-panel.is-open .m2-version-notice {
	animation:
		m2-version-notice-in .4s var(--m2-ease) .1s both,
		m2-version-notice-border 3.6s linear .5s infinite;
}

@keyframes m2-version-notice-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
@keyframes m2-version-notice-border {
	0%, 100% { background-position: 0 0, 0% 50%; }
	50% { background-position: 0 0, 100% 50%; }
}


/* ---------- Brands ---------- */

.m2-brand-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 10px var(--m2-pad);
}
.m2-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	padding: 8px;
	border: 1px solid var(--mobile-menu-sep-color);
	border-radius: 8px;
	background: #fff;
}
.m2-brand img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* Shared menu assets are white logos made for dark backgrounds. */
.m2-brand img.shared-brand-logo {
	filter: invert(1);
}
.m2-brand-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--dim-f5-color);
	color: var(--dim-6-color);
	font-size: 17px;
	font-weight: 700;
}
.m2-brand-fallback[hidden] { display: none; }


/* ---------- Offers cards ---------- */

.m2-offers-extra {
	padding: 6px 0 14px;
}
.m2-offers-parent {
	min-height: 50px;
	font-weight: 600;
}
.m2-offers-link {
	min-height: 42px;
	padding-left: calc(var(--m2-pad) + 12px);
	color: var(--dim-6-color);
	font-size: 14px;
}
.m2-offers-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0 6px;
	color: var(--dim-6-color);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .07em;
	line-height: 1.3;
	text-transform: uppercase;
}
.m2-offers-heading:before {
	flex: 0 0 auto;
	width: 3px;
	height: 12px;
	border-radius: 2px;
	background: var(--hl-color);
	content: '';
}
.m2-featured-brands {
	margin: 12px var(--m2-pad) 0;
	padding: 2px 0 4px;
	border-top: 1px solid var(--mobile-menu-sep-color);
}
.m2-brand-month-link {
	min-height: 42px;
	padding: 7px 8px 7px 12px;
	font-size: 14px;
}
.m2-brand-month-link + .m2-brand-month-link { border-top: 1px solid var(--mobile-menu-sep-color); }
.m2-brand-month-discount {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: 3px;
	padding: 2px 7px;
	border: 0;
	border-radius: 10px;
	background: color-mix(in srgb, var(--hl-color) 11%, transparent);
	color: var(--hl-color);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}
.m2-brand-month-qualifier {
	color: var(--dim-9-color);
	font-size: 9px;
	font-weight: 600;
}
.m2-sale-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	margin: 10px var(--m2-pad) 0;
	padding: 9px 13px;
	border: 1px solid color-mix(in srgb, var(--hl-color) 35%, transparent);
	border-radius: 7px;
	background: color-mix(in srgb, var(--hl-color) 7%, transparent);
	color: var(--hl-color);
	font-size: 13px;
	font-weight: 700;
}
.m2-sale-button i { color: inherit; font-size: 11px; }
.m2-promo-cards {
	display: grid;
	gap: 10px;
	padding: 12px var(--m2-pad) 20px;
	border-top: 1px solid var(--mobile-menu-sep-color);
}
.m2-promo-card {
	position: relative;
	display: flex;
	min-height: 180px;
	overflow: hidden;
	flex-direction: column;
	align-items: flex-start;
	padding: 16px;
	border-radius: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	isolation: isolate;
}
.m2-promo-card.m2-gift-card {
	background-color: rgb(20,50,92);
	background-image: linear-gradient(90deg, rgba(20,50,92,.98) 0%, rgba(17,39,69,.80) 42%, rgba(11,29,54,.15) 62%, rgba(9,23,43,0) 72%), url('../images/gift-card-menu-v18.webp');
}
.m2-promo-card.m2-vip-card-gold {
	background-color: #110e0a;
	background-image: linear-gradient(90deg, rgba(10,9,8,.98) 0%, rgba(10,9,8,.82) 42%, rgba(10,9,8,.15) 62%, rgba(10,9,8,0) 72%), url('../images/vip-card-menu-gold-v8.webp');
}
.m2-promo-card.m2-vip-card-blue {
	background-color: #030a15;
	background-image: linear-gradient(90deg, rgba(3,8,15,.98) 0%, rgba(3,8,15,.82) 42%, rgba(3,8,15,.15) 62%, rgba(3,8,15,0) 72%), url('../images/vip-card-menu-blue-v5.webp');
}
.m2-promo-kicker {
	width: 100%;
	max-width: none;
	font-size: 8px;
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.35;
	opacity: .78;
	text-transform: uppercase;
}
.m2-promo-card strong {
	max-width: 58%;
	margin-top: 8px;
	font-size: 18px;
	line-height: 1.08;
}
.m2-promo-description {
	max-width: 61%;
	margin-top: 7px;
	font-size: 10px;
	line-height: 1.35;
	opacity: .82;
}
.m2-promo-cta {
	margin-top: auto;
	padding: 7px 9px;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-size: 10px;
	font-weight: 800;
}
.m2-promo-cta i { margin-left: 4px; font-size: 8px; }


/* Pointer devices only — otherwise a tap leaves the row stuck in its hover state. */
@media (hover: hover) and (pointer: fine) {
	.m2-row:hover { background: var(--m2-tint); }
	.m2-row-static:hover { background: transparent; }
	.m2-seg-btn:not(.is-on):hover { color: var(--mobile-menu-text-color); }
	.m2-more:hover .m2-chev { background: var(--m2-tint-strong); }
	.m2-chip:hover { background: var(--m2-tint-strong); }
	.m2-back:hover,
	.m2-close:hover { color: var(--hl-color); }
}

@media (prefers-reduced-motion: reduce) {
	.m2-panel,
	.m2-overlay,
	.m2-screen,
	.m2-title,
	.m2-back { transition-duration: .01ms; }
	.m2-panel.is-open .m2-version-notice { animation: none; }
}