/*
 * Mobile menu (design/artboards/mobile-menu-390.html). Values at 390 map to the roles:
 * main rows h3 300 (20), group names and articles h4 500 (17), countries body (16), hints and
 * currencies meta (14), back row eyebrow with label tracking (13). The artboard sets the country
 * row and colourways at 15px, which no role gives at 390 — kept at 15 as drawn. The Country panel's
 * rows are the destination selector's (components/destination.css).
 */

.mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--canvas);
	color: var(--ink);
}

.mobile-menu[hidden] {
	display: none;
}

/* Opening and closing: a 200ms fade (tangens-tokens.md §8, menu transitions 200–300ms). */
.mobile-menu {
	opacity: 0;
	transition: opacity 200ms var(--ease);
}

.mobile-menu.is-open {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu {
		transition: none;
	}
}

.mobile-menu :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu :where(button) {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: start;
	cursor: pointer;
}

.mobile-menu svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--stone);
}

/* Header row: the same geometry as the site header at 390. */
.mobile-menu__header {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	height: var(--header-h);
	margin-block-start: var(--wp-admin--admin-bar--height, 0px);
	padding-inline: var(--container-pad);
	font-size: var(--fs-meta);
	line-height: var(--lh-meta);
}

.mobile-menu__close {
	position: relative;
	width: var(--touch-min);
	height: var(--touch-min);
	margin-inline-start: calc((var(--touch-min) - 22px) / -2);
}

.mobile-menu__close span {
	position: absolute;
	inset-inline: calc((var(--touch-min) - 22px) / 2);
	top: calc(50% - 0.75px);
	height: 1.5px;
	background: currentColor;
}

.mobile-menu__close span:first-child {
	transform: rotate(45deg);
}

.mobile-menu__close span:last-child {
	transform: rotate(-45deg);
}

.mobile-menu__logo-img {
	width: auto;
	height: var(--logo-header);
}

.mobile-menu__cart {
	display: inline-flex;
	align-items: center;
	justify-self: end;
	min-height: var(--touch-min);
}

/* Panels */
.mobile-menu__panels {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
}

.mobile-menu__panel {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.75rem var(--container-pad) calc(2rem + env(safe-area-inset-bottom, 0px));
	background: var(--canvas);
	transform: translateX(100%);
	transition: transform var(--dur-panel) var(--ease);
}

.mobile-menu[data-panel="main"] [data-panel-id="main"],
.mobile-menu[data-panel="watches"] [data-panel-id="watches"],
.mobile-menu[data-panel="journal"] [data-panel-id="journal"],
.mobile-menu[data-panel="country"] [data-panel-id="country"] {
	transform: translateX(0);
}

.mobile-menu:not([data-panel="main"]) [data-panel-id="main"] {
	transform: translateX(-22%);
}

/* Main level */
.mobile-menu__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding-block: 1.25rem;
	border-bottom: var(--hairline) solid var(--line);
	font-size: var(--fs-h3);
	font-weight: 300;
	line-height: normal;
}

.mobile-menu__foot {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-block-start: auto;
	padding-block-start: 2.25rem;
}

.mobile-menu__setting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	width: 100%;
	padding-block: var(--space-2);
	border-bottom: var(--hairline) solid var(--line);
	font-size: 0.9375rem;
	line-height: normal;
}

.mobile-menu__value {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--graphite);
}

.mobile-menu__social {
	display: flex;
	gap: 1.125rem;
	padding-block-start: 1.5rem;
}

.mobile-menu__social a {
	position: relative;
	display: block;
	color: var(--ink);
}

.mobile-menu__social a::after {
	content: "";
	position: absolute;
	inset: -0.5625rem;
}

.mobile-menu__social svg {
	width: var(--icon-social);
	height: var(--icon-social);
	color: inherit;
}

/* Sub levels */
.mobile-menu__back {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	padding-block: 0.875rem 1.375rem;
	color: var(--graphite);
	font-size: var(--fs-eyebrow);
	font-weight: 500;
	line-height: normal;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.mobile-menu__back svg {
	width: 1rem;
	height: 1rem;
}

.mobile-menu__group {
	display: flex;
	flex-direction: column;
	margin-block-end: 1.125rem;
	padding-block: 0.25rem 1.125rem;
	border-bottom: var(--hairline) solid var(--line);
}

.mobile-menu__group:last-child {
	border-bottom: 0;
}

.mobile-menu__group-name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.375rem 0.75rem;
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: normal;
}

.mobile-menu__product {
	padding-block: var(--space-1);
	color: var(--graphite);
	font-size: 0.9375rem;
	line-height: normal;
}

.mobile-menu__article {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-block: 0.875rem;
	border-bottom: var(--hairline) solid var(--line);
}

.mobile-menu__thumb {
	flex: 0 0 4rem;
	width: 4rem;
	height: 4rem;
	border-radius: var(--radius);
	object-fit: cover;
}

.mobile-menu__article span {
	flex: 1 1 auto;
	font-size: var(--fs-h4);
	font-weight: 500;
	line-height: normal;
}

@media (min-width: 1280px) {
	.mobile-menu {
		display: none !important;
	}
}

/* While the menu is open the page behind it does not scroll (never at desktop width). */
@media (max-width: 1279px) {
	html.has-mobile-menu {
		overflow: hidden;
	}
}