/* GRZ mobile header v2 — final responsive ownership layer. */

.grz-mobile-utility,
.grz-mobile-account-button,
.grz-mobile-auth-button,
.grz-mobile-account-drawer,
.grz-mobile-auth-dialog {
	display: none;
}

.grz-panel-open { overflow: hidden; }

.grz-drawer-overlay {
	background: rgba(7, 17, 34, 0.58);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.grz-mobile-drawer--nav,
.grz-mobile-account-drawer,
.grz-mobile-auth-dialog {
	visibility: hidden;
	pointer-events: none;
}

.grz-mobile-drawer--nav.is-open,
.grz-mobile-account-drawer.is-open,
.grz-mobile-auth-dialog.is-open {
	visibility: visible;
	pointer-events: auto;
}

.grz-mobile-drawer--nav,
[dir="rtl"] .grz-mobile-drawer--nav {
	right: auto;
	left: 0;
	transform: translateX(-105%);
	box-shadow: 22px 0 54px rgba(5, 18, 40, 0.22);
}

.grz-mobile-drawer--nav.is-open,
[dir="rtl"] .grz-mobile-drawer--nav.is-open {
	transform: translateX(0);
}

@media (max-width: 1120px) {
	.grz-mobile-utility {
		display: block;
		border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
		background: color-mix(in srgb, var(--grz-surface, #fff) 94%, transparent);
		color: var(--grz-ink, #10203a);
	}

	[data-grz-header-mode="embedded"] .grz-mobile-utility,
	[data-grz-header-mode="automatic"] .grz-mobile-utility {
		border-color: rgba(255, 255, 255, 0.13);
		background: rgba(8, 22, 42, 0.28);
		color: #fff;
	}

	.grz-mobile-utility__inner {
		display: flex;
		min-height: 36px;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-block: 4px;
	}

	.grz-mobile-utility__links {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 4px;
	}

	.grz-mobile-utility__links a,
	.grz-mobile-locale {
		display: inline-flex;
		min-height: 28px;
		align-items: center;
		gap: 5px;
		border: 1px solid transparent;
		border-radius: 7px;
		color: inherit;
		font-size: 0.68rem;
		font-weight: 780;
		line-height: 1;
		text-decoration: none;
		white-space: nowrap;
	}

	.grz-mobile-utility__links a { padding: 0 7px; }

	.grz-mobile-utility__links a:hover,
	.grz-mobile-utility__links a:focus-visible {
		background: color-mix(in srgb, currentColor 8%, transparent);
	}

	.grz-mobile-utility__links .grz-icon,
	.grz-mobile-locale .grz-icon {
		width: 13px;
		height: 13px;
	}

	.grz-mobile-locale {
		flex: 0 0 auto;
		border-color: color-mix(in srgb, currentColor 22%, transparent);
		background: color-mix(in srgb, currentColor 5%, transparent);
		padding: 0 8px;
	}

	.grz-mobile-locale:hover,
	.grz-mobile-locale:focus-visible {
		border-color: color-mix(in srgb, currentColor 38%, transparent);
		background: color-mix(in srgb, currentColor 10%, transparent);
	}

	.grz-mobile-locale__divider {
		width: 1px;
		height: 14px;
		background: color-mix(in srgb, currentColor 22%, transparent);
	}

	.grz-mobile-locale .grz-locale-country-flag,
	.grz-mobile-locale .grz-locale-country-flag img,
	.grz-mobile-locale .grz-locale-country-flag svg {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		object-fit: cover;
	}

	.grz-main-header__inner,
	.grz-header-actions { direction: ltr; }

	.grz-header-actions {
		grid-column: 3;
		gap: 2px;
	}

	.grz-mobile-search-button { order: 1; }
	.grz-cart-link { order: 2; }
	.grz-mobile-account-button { order: 3; }
	.grz-mobile-auth-button { order: 2; }

	body.grz-adaptive-header .grz-header-actions .grz-account-icon--desktop,
	body.grz-adaptive-header .grz-header-actions--guest .grz-header-auth-action {
		display: none !important;
	}

	.grz-mobile-account-button,
	.grz-mobile-auth-button { display: inline-grid; }

	.grz-header-actions--guest .grz-cart-link--guest { display: none !important; }

	.grz-mobile-drawer--nav,
	.grz-mobile-account-drawer {
		display: flex;
		position: fixed;
		top: 12px;
		bottom: 12px;
		z-index: 999;
		width: min(calc(100vw - 24px), 320px);
		max-width: calc(100vw - 24px);
		flex-direction: column;
		overflow: hidden;
		border: 1px solid rgba(204, 215, 229, 0.9);
		border-radius: 14px;
		background: #fff;
		box-shadow: 0 24px 64px rgba(5, 18, 40, 0.28);
		color: #122039;
		transition: transform 240ms cubic-bezier(0.2, 0.75, 0.2, 1), visibility 240ms linear;
	}

	.grz-mobile-drawer--nav {
		right: auto !important;
		left: 12px !important;
		padding: 16px;
		transform: translateX(calc(-100% - 28px));
	}

	.grz-mobile-account-drawer {
		right: 12px;
		left: auto;
		padding: 0 14px 14px;
		transform: translateX(calc(100% + 28px));
	}

	.grz-mobile-account-drawer.is-open,
	.grz-mobile-drawer--nav.is-open { transform: translateX(0); }

	.grz-mobile-drawer--nav .grz-mobile-drawer__header {
		min-height: 58px;
		gap: 12px;
		border-bottom-color: #e2e8f1;
		padding: 0 0 12px;
	}

	.grz-mobile-drawer--nav .grz-brand--drawer {
		width: 106px;
		max-width: calc(100% - 44px);
	}

	.grz-mobile-drawer--nav .grz-brand__image {
		filter: brightness(0) saturate(100%) invert(16%) sepia(22%) saturate(1554%) hue-rotate(178deg) brightness(91%) contrast(92%);
	}

	.grz-mobile-drawer--nav .grz-brand__main {
		color: #122039;
		font-size: 1.35rem;
	}

	.grz-mobile-drawer--nav .grz-brand__sub { color: #52637c; }

	.grz-mobile-drawer--nav .grz-mobile-nav {
		flex: 0 0 auto;
		overflow: visible;
		padding: 11px 0;
	}

	.grz-mobile-drawer--nav .grz-mobile-menu > li > a {
		min-height: 42px;
		gap: 9px;
		border-radius: 7px;
		color: #15233a;
		font-size: 0.82rem;
		font-weight: 760;
		padding: 8px 10px;
	}

	.grz-mobile-drawer--nav .grz-mobile-menu .sub-menu {
		margin-block-end: 5px;
		margin-inline-start: 15px;
		padding-inline-start: 10px;
	}

	.grz-mobile-drawer--nav .grz-mobile-menu .sub-menu a {
		font-size: 0.76rem;
		padding: 7px 8px;
	}

	.grz-mobile-drawer--nav .grz-mobile-drawer__quick-links {
		gap: 1px;
		border-top-color: #e2e8f1;
		padding: 10px 0 0;
	}

	.grz-mobile-drawer--nav .grz-mobile-drawer__quick-links a {
		min-height: 40px;
		gap: 9px;
		border-radius: 7px;
		color: #2f405a;
		font-size: 0.78rem;
		font-weight: 690;
		padding: 7px 8px;
	}

	.grz-mobile-drawer--nav .grz-mobile-drawer__quick-links a:hover,
	.grz-mobile-drawer--nav .grz-mobile-drawer__quick-links a:focus-visible {
		background: #edf4ff;
		color: #0762e6;
	}

	.grz-mobile-drawer--nav .grz-mobile-drawer__quick-links .grz-icon {
		width: 15px;
		height: 15px;
	}

	.grz-mobile-drawer--nav .grz-mobile-drawer__meta,
	.grz-mobile-drawer--nav .grz-sign-in--drawer { display: none !important; }

	.grz-mobile-account-drawer__header {
		display: flex;
		min-height: 70px;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border-bottom: 1px solid #e2e8f1;
	}

	.grz-mobile-account-drawer__identity {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 9px;
		color: #122039;
		text-decoration: none;
	}

	.grz-mobile-account-drawer__avatar {
		width: 40px;
		height: 40px;
		border: 2px solid #dce8fa;
		border-radius: 50%;
		object-fit: cover;
	}

	.grz-mobile-account-drawer__identity > span {
		display: grid;
		min-width: 0;
		gap: 3px;
	}

	.grz-mobile-account-drawer__identity strong,
	.grz-mobile-account-drawer__identity small {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.grz-mobile-account-drawer__identity strong { font-size: 0.84rem; }
	.grz-mobile-account-drawer__identity small { color: #6b7890; font-size: 0.68rem; }

	.grz-mobile-account-drawer__progress {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 8px 12px;
		margin: 10px 0 2px;
		border: 1px solid #e2e8f1;
		border-radius: 8px;
		background: #f7f9fc;
		padding: 9px 10px;
		color: #65738b;
		font-size: 0.64rem;
		font-weight: 800;
		letter-spacing: 0.07em;
		text-transform: uppercase;
	}

	.grz-mobile-account-drawer__progress strong { color: #122039; }

	.grz-mobile-account-drawer__progress i {
		display: block;
		grid-column: 1 / -1;
		height: 5px;
		overflow: hidden;
		border-radius: 3px;
		background: #e4eaf3;
	}

	.grz-mobile-account-drawer__progress b {
		display: block;
		height: 100%;
		border-radius: inherit;
		background: #0762e6;
	}

	.grz-mobile-account-drawer__nav {
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 4px 0 10px;
	}

	.grz-mobile-account-drawer__group {
		padding: 10px 0;
		border-bottom: 1px solid #e6ebf2;
	}

	.grz-mobile-account-drawer__group h2 {
		margin: 0 7px 5px;
		color: #8490a4;
		font-size: 0.61rem;
		font-weight: 850;
		letter-spacing: 0.11em;
		text-transform: uppercase;
	}

	.grz-mobile-account-drawer__group a,
	.grz-mobile-account-drawer__footer a {
		display: grid;
		grid-template-columns: 31px minmax(0, 1fr) auto 14px;
		min-height: 40px;
		align-items: center;
		gap: 7px;
		border-radius: 7px;
		color: #24344f;
		font-size: 0.77rem;
		font-weight: 680;
		padding: 4px 7px;
		text-decoration: none;
	}

	.grz-mobile-account-drawer__group a:hover,
	.grz-mobile-account-drawer__group a:focus-visible,
	.grz-mobile-account-drawer__footer a:hover,
	.grz-mobile-account-drawer__footer a:focus-visible {
		background: #edf4ff;
		color: #0762e6;
	}

	.grz-mobile-account-drawer__item-icon {
		display: inline-grid;
		width: 29px;
		height: 29px;
		place-items: center;
		border-radius: 7px;
		background: #f2f6fc;
		color: #31547d;
	}

	.grz-mobile-account-drawer__item-icon .grz-icon,
	.grz-mobile-account-drawer__footer .grz-icon {
		width: 16px;
		height: 16px;
	}

	.grz-mobile-account-drawer__group a > .grz-icon:last-child {
		width: 13px;
		height: 13px;
		color: #9ba8b9;
	}

	.grz-mobile-account-drawer__group em {
		display: inline-grid;
		min-width: 22px;
		height: 22px;
		place-items: center;
		border-radius: 6px;
		background: #e9f2ff;
		color: #0762e6;
		font-size: 0.67rem;
		font-style: normal;
		font-weight: 850;
		padding: 0 5px;
	}

	.grz-mobile-account-drawer__footer {
		display: grid;
		gap: 2px;
		margin-top: auto;
		border-top: 1px solid #dfe6ef;
		padding-top: 10px;
	}

	.grz-mobile-account-drawer__footer a {
		display: flex;
		align-items: center;
		gap: 9px;
		width: 100%;
		line-height: 1.2;
		white-space: nowrap;
	}

	.grz-mobile-account-drawer__footer a > span:last-child {
		min-width: 0;
	}

	.grz-mobile-account-drawer__footer .grz-mobile-account-drawer__logout {
		color: #c83245;
	}

	.grz-mobile-account-drawer__footer .grz-mobile-account-drawer__logout:hover,
	.grz-mobile-account-drawer__footer .grz-mobile-account-drawer__logout:focus-visible {
		background: #fff0f2;
		color: #a51f31;
	}

	.grz-mobile-auth-dialog {
		display: grid;
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1000;
		width: min(calc(100vw - 32px), 382px);
		max-height: calc(100dvh - 32px);
		overflow-y: auto;
		transform: translate(-50%, calc(-50% + 14px)) scale(0.98);
		gap: 0;
		border: 1px solid rgba(255, 255, 255, 0.66);
		border-radius: 14px;
		background:
			linear-gradient(135deg, rgba(7, 98, 230, 0.08), transparent 44%),
			linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
		box-shadow: 0 28px 80px rgba(4, 18, 42, 0.32);
		color: #122039;
		padding: 30px 26px 22px;
		opacity: 0;
		transition: transform 220ms cubic-bezier(0.2, 0.75, 0.2, 1), opacity 180ms ease, visibility 220ms linear;
	}

	.grz-mobile-auth-dialog.is-open {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}

	.grz-mobile-auth-dialog__close {
		position: absolute;
		top: 12px;
		right: 12px;
	}

	.grz-mobile-auth-dialog__brand {
		display: flex;
		width: 126px;
		min-height: 46px;
		align-items: center;
		justify-content: center;
		margin: 0 auto 20px;
		isolation: isolate;
	}

	/* The account chooser owns a normal full-colour logo. Header contrast
	   modes must never turn this mark white or tint it for the atmosphere. */
	.grz-mobile-auth-dialog__brand .grz-brand__image {
		width: 100%;
		max-height: 46px;
		object-fit: contain;
		filter: none !important;
		mix-blend-mode: normal !important;
		opacity: 1 !important;
	}

	.grz-mobile-auth-dialog__brand .grz-brand__fallback {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		filter: none !important;
		mix-blend-mode: normal !important;
	}

	.grz-mobile-auth-dialog__brand .grz-brand__main {
		color: #0762e6 !important;
		text-shadow: none !important;
	}

	.grz-mobile-auth-dialog__brand .grz-brand__sub {
		color: #122039 !important;
		text-shadow: none !important;
	}

	.grz-mobile-auth-dialog__eyebrow {
		margin: 0 0 7px !important;
		color: #0762e6 !important;
		font-size: 0.69rem !important;
		font-weight: 850 !important;
		letter-spacing: 0.12em;
		text-align: center;
		text-transform: uppercase;
	}

	.grz-mobile-auth-dialog h2 {
		margin: 0;
		color: #122039;
		font-size: clamp(1.35rem, 6vw, 1.72rem);
		line-height: 1.12;
		text-align: center;
	}

	.grz-mobile-auth-dialog > p:not(.grz-mobile-auth-dialog__eyebrow) {
		margin: 10px auto 0;
		max-width: 310px;
		color: #64728a;
		font-size: 0.82rem;
		line-height: 1.55;
		text-align: center;
	}

	.grz-mobile-auth-dialog__actions {
		display: grid;
		gap: 9px;
		margin-top: 22px;
	}

	.grz-mobile-auth-dialog__actions a {
		display: inline-flex;
		min-height: 46px;
		align-items: center;
		justify-content: center;
		gap: 8px;
		border: 1px solid #d7e0ec;
		border-radius: 8px;
		font-size: 0.83rem;
		font-weight: 820;
		text-decoration: none;
	}

	.grz-mobile-auth-dialog__primary {
		border-color: #0762e6 !important;
		background: #0762e6;
		box-shadow: 0 10px 24px rgba(7, 98, 230, 0.2);
		color: #fff;
	}

	.grz-mobile-auth-dialog__primary:hover,
	.grz-mobile-auth-dialog__primary:focus-visible {
		background: #064fc2;
		color: #fff;
		transform: translateY(-1px);
	}

	.grz-mobile-auth-dialog__secondary {
		background: #f7f9fc;
		color: #17304f;
	}

	.grz-mobile-auth-dialog__secondary:hover,
	.grz-mobile-auth-dialog__secondary:focus-visible {
		border-color: #aebfd3;
		background: #eef3f9;
		color: #0762e6;
	}

	.grz-mobile-auth-dialog__actions .grz-icon {
		width: 15px;
		height: 15px;
	}

	.grz-mobile-auth-dialog__trust {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		margin-top: 16px;
		color: #6f7d91;
		font-size: 0.68rem;
		line-height: 1.35;
		text-align: center;
	}

	.grz-mobile-auth-dialog__trust .grz-icon {
		width: 15px;
		height: 15px;
		color: #20a66a;
	}

	.grz-mobile-auth-dialog__legal {
		display: flex;
		justify-content: center;
		gap: 18px;
		margin-top: 15px;
		padding-top: 14px;
		border-top: 1px solid #e4e9f1;
	}

	.grz-mobile-auth-dialog__legal a {
		color: #65738b;
		font-size: 0.68rem;
		font-weight: 700;
		text-decoration: none;
	}

	body.grz-acct-page-auth .grz-acct-nav { display: none !important; }

	body.grz-acct-page-auth .grz-acct-layout {
		display: block !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 0 !important;
	}

	body.grz-acct-page-auth .grz-acct-content {
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 430px) {
	.grz-mobile-utility__inner { padding-inline: 12px; }
	.grz-mobile-utility__links a { padding-inline: 5px; }
	.grz-mobile-utility__links a:last-child span { display: none; }
	.grz-mobile-locale { padding-inline: 7px; }
}

@media (max-width: 350px) {
	.grz-mobile-utility__links a span { display: none; }
	.grz-mobile-utility__links a {
		width: 28px;
		justify-content: center;
		padding: 0;
	}
	.grz-mobile-auth-dialog { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.grz-mobile-drawer--nav,
	.grz-mobile-account-drawer,
	.grz-mobile-auth-dialog,
	.grz-drawer-overlay { transition-duration: 1ms !important; }
}