/* Reference drawer. Native dialog supplies the modal layer and inert background. */
.mobile-navigation {
	inset: 0 0 0 auto;
	inline-size: 85vw;
	max-inline-size: none;
	block-size: 100dvh;
	max-block-size: 100dvh;
	margin: 0;
	padding: 24px;
	border: 0;
	border-inline-start: 1px solid #e2e0df;
	background: var(--dermobliss-background-primary);
	color: var(--dermobliss-text-primary);
	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-navigation::backdrop {
	background: rgb(0 0 0 / 80%);
}

.mobile-navigation[data-state="open"] {
	animation: mobile-navigation-enter 500ms var(--dermobliss-transition-easing);
}

.mobile-navigation[data-state="closing"] {
	animation: mobile-navigation-leave 300ms var(--dermobliss-transition-easing) forwards;
}

.mobile-navigation[data-state="open"]::backdrop {
	animation: mobile-backdrop-enter 150ms linear;
}

.mobile-navigation[data-state="closing"]::backdrop {
	animation: mobile-backdrop-leave 150ms linear forwards;
}

.mobile-navigation__close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	display: grid;
	place-items: center;
	inline-size: 32px;
	block-size: 32px;
	padding: 8px;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--dermobliss-text-secondary);
}

.mobile-navigation__content {
	margin-block-start: 40px;
}

.mobile-navigation__brand a { display: inline-flex; }
.language-switcher--mobile { margin-block-start: 28px; }

.mobile-navigation__label {
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 0.22em;
	color: var(--dermobliss-accent-gold-dark);
}

.mobile-navigation__pages {
	margin-block-start: 48px;
}

.mobile-navigation__categories ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.mobile-navigation__categories a {
	display: block;
	padding-block: 9px;
	border-block-end: 1px solid rgb(28 27 26 / 6%);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}

.mobile-navigation__categories a:is(:hover, :focus-visible) {
	color: var(--dermobliss-accent-gold-dark);
}

.mobile-navigation .primary-menu {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.mobile-navigation .primary-menu a {
	display: block;
	padding-block: 12px;
	border-block-end: 1px solid rgb(28 27 26 / 6%);
	font-family: var(--dermobliss-font-display);
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	text-decoration: none;
}

.mobile-navigation .primary-menu > li + li {
	margin-block-start: 4px;
}

.mobile-navigation .primary-menu .current-menu-item > a,
.mobile-navigation .primary-menu a:focus-visible {
	color: var(--dermobliss-accent-gold-dark);
}

.mobile-navigation__purchase {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-block-start: 36px;
	padding: 16px 24px;
	border-radius: 9999px;
	background: var(--dermobliss-text-primary);
	color: var(--dermobliss-background-primary);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.14em;
	text-decoration: none;
}

.mobile-navigation__purchase:is(:hover, :focus-visible) {
	background: var(--dermobliss-accent-gold-dark);
	color: var(--dermobliss-background-primary);
}

.mobile-navigation__purchase:focus-visible {
	outline-color: var(--dermobliss-text-primary);
}

@media (min-width: 640px) {
	.mobile-navigation {
		max-inline-size: 384px;
	}
}

@media (max-width: 1023px) {
	.mobile-menu-toggle {
		display: grid;
		place-items: center;
		padding: 8px;
		inline-size: 38px;
		block-size: 38px;
		border: 0;
		background: transparent;
		color: var(--dermobliss-text-primary);
	}

	.admin-bar .site-header {
		inset-block-start: var(--wp-admin--admin-bar--height, 46px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-navigation,
	.mobile-navigation::backdrop {
		animation: none !important;
	}
}

@keyframes mobile-navigation-enter {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes mobile-navigation-leave {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}

@keyframes mobile-backdrop-enter {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mobile-backdrop-leave {
	from { opacity: 1; }
	to { opacity: 0; }
}