/* Full-screen mobile navigation and utility content. */

.mobile-menu-utility {
	display: none;
}

@media (max-width: 980px) {
	.primary-nav {
		display: flex;
		min-height: 100dvh;
		flex-direction: column;
		padding: 102px var(--gutter) 42px;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-14px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}

	.primary-nav.is-open {
		display: flex;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}

	.primary-nav__list,
	.mobile-menu-utility {
		width: min(100%, 620px);
		margin-inline: auto;
	}

	.primary-nav__list > li > a {
		padding-block: 14px;
		font-size: 23px;
	}

	.mobile-menu-utility {
		display: block;
		padding-top: 26px;
	}

	.mobile-menu-utility a {
		padding: 0;
		border-bottom: 0;
		font-size: inherit;
	}

	.mobile-menu-utility__shortcuts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		margin-bottom: 30px;
	}

	.mobile-menu-utility__shortcuts > a {
		display: flex;
		min-height: 54px;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 11px 14px;
		border: 1px solid var(--color-line-dark);
		color: #fff;
		font-size: 13px;
		font-weight: 800;
	}

	.mobile-menu-utility__shortcuts > a:hover,
	.mobile-menu-utility__shortcuts > a:focus-visible {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.mobile-menu-utility__shortcuts .mobile-menu-utility__cart {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: var(--color-dark);
	}

	.mobile-menu-utility__shortcuts .mobile-menu-utility__cart:hover,
	.mobile-menu-utility__shortcuts .mobile-menu-utility__cart:focus-visible {
		background: var(--color-accent-hover);
		color: var(--color-dark);
	}

	.mobile-menu-utility__shortcuts svg {
		width: 21px;
		height: 21px;
		flex: 0 0 21px;
	}

	.mobile-menu-utility__cart strong {
		display: grid;
		min-width: 22px;
		height: 22px;
		place-items: center;
		padding-inline: 4px;
		background: var(--color-dark);
		color: var(--color-accent);
		font-family: var(--font-mono);
		font-size: 10px;
	}

	.mobile-menu-contact {
		padding: 28px 0;
		border-top: 1px solid var(--color-line-dark);
		border-bottom: 1px solid var(--color-line-dark);
	}

	.mobile-menu-contact h2 {
		margin-bottom: 20px;
		color: #fff;
		font-size: 18px;
		letter-spacing: -.02em;
	}

	.mobile-menu-contact__links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 24px;
	}

	.mobile-menu-contact__links a {
		display: flex;
		min-width: 0;
		align-items: center;
		gap: 12px;
		color: #fff;
	}

	.mobile-menu-contact__links a:hover,
	.mobile-menu-contact__links a:focus-visible {
		color: var(--color-accent);
	}

	.mobile-menu-contact__links svg,
	.mobile-menu-contact__hours svg {
		width: 23px;
		height: 23px;
		flex: 0 0 23px;
		color: var(--color-accent);
	}

	.mobile-menu-contact__links span {
		display: grid;
		min-width: 0;
		gap: 2px;
	}

	.mobile-menu-contact__links small {
		color: #9ca6b5;
		font-size: 11px;
		font-weight: 600;
	}

	.mobile-menu-contact__links strong {
		overflow: hidden;
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mobile-menu-contact__hours {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 20px 0 0;
		color: #c6ccd5;
		font-size: 12px;
	}

	.mobile-menu-brand {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
		padding-top: 30px;
	}

	.mobile-menu-brand__logo {
		display: block;
		width: 190px;
		max-width: 52%;
	}

	.mobile-menu-brand__image {
		width: 100%;
		height: auto;
	}

	.mobile-menu-brand__socials {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 7px 14px;
	}

	.mobile-menu-brand__socials a {
		color: #b8c0cb;
		font-size: 11px;
		font-weight: 700;
	}

	.mobile-menu-brand__socials a:hover,
	.mobile-menu-brand__socials a:focus-visible {
		color: var(--color-accent);
	}
}

@media (max-width: 640px) {
	.primary-nav {
		padding: 88px 18px 28px;
	}

	.primary-nav__list > li > a {
		font-size: 21px;
	}

	.mobile-menu-utility {
		padding-top: 20px;
	}

	.mobile-menu-utility__shortcuts {
		margin-bottom: 24px;
	}

	.mobile-menu-contact {
		padding-block: 24px;
	}

	.mobile-menu-contact__links {
		grid-template-columns: 1fr;
	}

	.mobile-menu-brand {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
		padding-top: 26px;
	}

	.mobile-menu-brand__logo {
		width: 178px;
		max-width: 100%;
	}

	.mobile-menu-brand__socials {
		justify-content: flex-start;
	}
}

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

/* Mobile navigation: stable touch targets, safe areas and keyboard focus. */
@media (max-width: 980px) {
	.primary-nav {
		padding-top: calc(96px + env(safe-area-inset-top));
		padding-right: max(var(--gutter), env(safe-area-inset-right));
		padding-bottom: calc(42px + env(safe-area-inset-bottom));
		padding-left: max(var(--gutter), env(safe-area-inset-left));
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}

	.primary-nav__list > li > a,
	.mobile-menu-utility a {
		-webkit-tap-highlight-color: transparent;
	}

	.primary-nav__list > li > a {
		display: flex;
		min-height: 44px;
		align-items: center;
		padding-block: 10px;
	}

	.primary-nav__list > li > a:active {
		outline: 0;
		box-shadow: none;
	}

	.primary-nav__list > li > a:focus-visible,
	.mobile-menu-utility a:focus-visible,
	.menu-toggle:focus-visible {
		outline: 3px solid var(--color-accent);
		outline-offset: 4px;
	}

	.menu-toggle[aria-expanded=true] {
		top: max(12px, env(safe-area-inset-top));
		right: max(12px, env(safe-area-inset-right));
		display: grid;
		width: 44px;
		height: 44px;
		padding: 0;
		place-items: center;
	}
}

@media (min-width: 641px) and (max-width: 980px) {
	.site-header__inner {
		min-height: 76px;
	}

	.product-search {
		margin-bottom: 10px;
	}

	.product-search__control,
	.header-action {
		min-height: 52px;
	}
}

@media (min-width: 981px) and (max-width: 1300px) {
	.site-header__inner {
		min-height: 78px;
		gap: 12px;
	}

	.primary-nav {
		padding-bottom: 8px;
	}

	.primary-nav a {
		padding-block: 9px;
	}
}

@media (max-width: 640px) {
	.primary-nav {
		padding-top: calc(82px + env(safe-area-inset-top));
		padding-right: max(18px, env(safe-area-inset-right));
		padding-bottom: calc(28px + env(safe-area-inset-bottom));
		padding-left: max(18px, env(safe-area-inset-left));
	}
}

@media (max-width: 340px) {
  .site-logo { width: 126px; }
  .site-header__inner { gap: 6px; }
  .header-actions { gap: 8px; }
}