/* ===== Responsive Layout ===== */
/* ============================================
   LOWKEYS RESPONSIVE STABILITY
   Desktop, tablet, Android, iOS, and small mobile support.
   ============================================ */
@media (max-width: 1180px) {
	:root {
		--header-height: 128px;
	}

	.navbar-main {
		grid-template-columns: minmax(132px, 200px) minmax(240px, 1fr) auto;
		gap: 14px;
	}

	.header-actions {
		gap: 6px;
	}

	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	:root {
		--header-height: 142px;
	}

	.navbar {
		gap: 8px;
	}

	.navbar-main {
		grid-template-columns: minmax(126px, 188px) minmax(220px, 1fr) auto;
	}

	.logo-wordmark-img {
		width: clamp(124px, 18vw, 174px);
	}

	.header-action,
	.cart-icon {
		--tap-size: 40px;
	}

	.header-action--optional:last-child {
		display: none;
	}

	.section-header {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.filters {
		justify-content: flex-start;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.footer-contact {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	:root {
		--header-height: 142px;
		--container-padding: 16px;
	}

	.header {
		min-height: var(--header-height);
	}

	.navbar {
		position: relative;
		gap: 10px;
		padding-block: 10px;
	}

	.navbar-main {
		grid-template-columns: minmax(112px, 1fr) auto;
		grid-template-areas:
			"logo actions"
			"search search";
		gap: 10px 12px;
	}

	.brand-logo {
		grid-area: logo;
	}

	.header-search {
		grid-area: search;
		width: 100%;
		height: 40px;
		justify-self: stretch;
	}

	.header-actions {
		grid-area: actions;
		justify-self: end;
	}

	.header-action--optional {
		display: none;
	}

	.mobile-menu-toggle {
		position: relative;
		display: inline-grid;
	}

	.mobile-menu-toggle i {
		display: none;
	}

	.mobile-menu-toggle::before,
	.mobile-menu-toggle::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 18px;
		height: 2px;
		border-radius: var(--radius-pill);
		background: currentColor;
		transition:
			transform var(--duration-base) var(--ease-smooth),
			box-shadow var(--duration-base) var(--ease-smooth);
	}

	.mobile-menu-toggle::before {
		transform: translate3d(-50%, -6px, 0);
		box-shadow: 0 6px 0 currentColor;
	}

	.mobile-menu-toggle::after {
		transform: translate3d(-50%, 6px, 0);
	}

	.mobile-menu-toggle.active::before {
		transform: translate3d(-50%, 0, 0) rotate(45deg);
		box-shadow: 0 0 0 currentColor;
	}

	.mobile-menu-toggle.active::after {
		transform: translate3d(-50%, 0, 0) rotate(-45deg);
	}

	.nav-links {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: grid;
		grid-template-columns: 1fr;
		align-content: start;
		gap: 0;
		width: 100vw;
		height: calc(100dvh - var(--header-height));
		max-height: none;
		padding: 8px 0 max(28px, env(safe-area-inset-bottom));
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-block: 1px solid transparent;
		border-inline: 0;
		border-radius: 0;
		background: var(--header-surface);
		box-shadow: inset 0 1px 0 var(--header-divider);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(0, -10px, 0);
		transform-origin: top center;
		transition:
			opacity var(--duration-base) var(--ease-smooth),
			visibility var(--duration-base) var(--ease-smooth),
			transform var(--duration-base) var(--ease-smooth),
			border-color var(--duration-base) var(--ease-smooth),
			background-color var(--duration-base) var(--ease-smooth);
	}

	.nav-links.active {
		border-color: var(--header-divider);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(0, 0, 0);
	}

	.nav-links li {
		width: 100%;
	}

	.nav-links a {
		width: 100%;
		min-height: 54px;
		justify-content: center;
		padding-inline: var(--container-padding);
		border-top: 1px solid rgba(17, 17, 17, 0.06);
		font-size: 0.9rem;
	}

	.nav-links li:first-child a {
		border-top: 0;
	}

	.nav-links a::after {
		display: none;
	}

	.hero {
		min-height: 720px;
		padding-block: calc(var(--header-height) + 36px) 54px;
	}

	.hero::before {
		right: -30vw;
		width: min(82vw, 460px);
		opacity: 0.45;
	}

	.hero::after {
		right: -12vw;
		width: min(62vw, 300px);
		opacity: 0.7;
	}

	.hero-content h1 {
		font-size: clamp(2.35rem, 12vw, 4.2rem);
	}

	.hero-content p {
		font-size: 0.98rem;
	}

	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.product-card {
		border-radius: 20px;
	}

	.product-info {
		padding: 13px;
		gap: 8px;
	}

	.product-description,
	.product-rating,
	.product-stock,
	.variant-group label {
		font-size: 0.74rem;
	}

	.product-variants-ui {
		gap: 7px;
	}

	.size-options,
	.color-options {
		gap: 5px;
	}

	.product-description {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.product-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.add-to-cart-btn {
		width: 100%;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	:root {
		--header-height: 136px;
		--tap-size: 38px;
	}

	.navbar-main {
		gap: 8px 10px;
	}

	.logo-wordmark-img {
		width: clamp(116px, 36vw, 146px);
	}

	.header-actions {
		gap: 4px;
	}

	.header-search-input {
		font-size: 0.88rem;
		padding-left: 12px;
	}

	.hero {
		min-height: 690px;
	}

	.hero-btns {
		gap: 10px;
	}

	.hero-btns .btn {
		width: auto;
	}

	.products {
		padding-block: 50px 70px;
	}

	.section-title h2 {
		font-size: 2rem;
	}

	.filters {
		width: 100%;
	}

	.filter-btn {
		width: auto;
		padding-inline: 12px;
	}

	.product-grid {
		gap: 10px;
	}

	.product-image-container {
		aspect-ratio: 1 / 1;
	}

	.product-title {
		font-size: 0.88rem;
	}

	.product-category,
	.review-count,
	.product-description,
	.product-rating,
	.product-stock,
	.variant-group label {
		font-size: 0.68rem;
	}

	.size-options,
	.color-options {
		gap: 4px;
	}

	.size-btn {
		min-width: 25px;
		height: 23px;
		font-size: 0.66rem;
		padding-inline: 5px;
	}

	.color-swatch {
		width: 23px;
		height: 14px;
	}

	.product-price {
		font-size: 0.9rem;
	}

	.add-to-cart-btn {
		min-height: 34px;
		padding: 8px 10px;
		font-size: 0.78rem;
	}

	.cart-sidebar {
		width: 100vw;
	}

	.cart-header,
	.cart-footer,
	.cart-items {
		padding-inline: 16px;
	}

	.cart-item {
		grid-template-columns: 68px minmax(0, 1fr) 32px;
	}

	.cart-item-visual {
		width: 68px;
		height: 78px;
	}
}

@media (max-width: 360px) {
	:root {
		--container-padding: 12px;
	}

	.header-action,
	.cart-icon {
		--tap-size: 36px;
	}

	.header-actions {
		gap: 2px;
	}

	.logo-wordmark-img {
		width: clamp(104px, 34vw, 126px);
	}

	.header-search {
		height: 38px;
	}

	.product-grid {
		gap: 8px;
	}

	.product-info {
		padding: 11px;
	}

	.product-description {
		-webkit-line-clamp: 2;
	}
}


/* ===== Mobile Horizontal Control Stability ===== */
@media (max-width: 768px) {
	.hero-btns {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		max-width: 100%;
		padding-bottom: 2px;
		scroll-snap-type: x proximity;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.hero-btns::-webkit-scrollbar {
		display: none;
	}

	.hero-btns .btn {
		flex: 0 0 auto;
		width: auto;
		min-width: max-content;
		white-space: nowrap;
		scroll-snap-align: start;
	}

	.filters {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 8px;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.filters::-webkit-scrollbar {
		display: none;
	}

	.filter-btn {
		flex: 0 0 auto;
		width: auto;
		min-width: max-content;
		white-space: nowrap;
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	.hero-btns {
		gap: 8px;
	}

	.hero-btns .btn {
		min-height: 42px;
		padding: 11px 16px;
		font-size: 0.86rem;
	}

	.filter-btn {
		min-height: 34px;
		padding: 8px 12px;
		font-size: 0.8rem;
	}

	.product-status-chip {
		min-height: 18px;
		padding: 3px 6px;
		font-size: 0.54rem;
	}
}


/* ===== Compact product logo on small catalog cards ===== */
@media (max-width: 480px) {
	.product-placeholder-logo {
		width: clamp(42px, 44%, 78px);
	}

	.cart-item-logo {
		width: 32px;
	}
}


/* ===== Responsive Hero Banner Sources ===== */
@media (max-width: 1024px) {
	.hero.hero--banner {
		aspect-ratio: 4 / 3;
		min-height: 0;
		padding: 0;
	}
}

@media (max-width: 640px) {
	.hero.hero--banner {
		aspect-ratio: 3 / 4;
		min-height: 0;
		padding: 0;
	}
}