/*
 * Customer frontend responsive alignment layer.
 * Mobile (<= 767px) remains owned by the existing mobile styles.
 */

:root {
	--customer-container: 1480px;
	--customer-gutter-tablet: clamp(20px, 3vw, 32px);
	--customer-gutter-desktop: clamp(28px, 3vw, 48px);
	--customer-section-space: clamp(24px, 3vw, 42px);
	--customer-card-radius: 8px;
}

.desktop-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media screen and (min-width: 768px) {
	.content .container {
		width: min(
			calc(100% - (2 * var(--customer-gutter-tablet))),
			var(--customer-container)
		) !important;
		max-width: var(--customer-container) !important;
		margin-inline: auto !important;
		padding-inline: 0 !important;
	}

	.homepage-refined .row {
		width: 100% !important;
		margin-inline: 0 !important;
	}

	.homepage-refined .row > [class*="col-"] {
		padding-inline: 0 !important;
	}

	.homepage-refined .row > [class*="col-"] + [class*="col-"] {
		padding-left: 20px !important;
	}

	.hmtrendcatsection,
	.home-products-section,
	.epin-showcase {
		padding-block: calc(var(--customer-section-space) * .45) !important;
	}

	.hmtrendcatsection .bartitle,
	.home-product-title,
	.epin-showcase-head {
		min-height: 76px;
		margin-bottom: 20px !important;
		padding: 14px 18px !important;
		border-radius: var(--customer-card-radius) !important;
		background: var(--dx-surface) !important;
		border: 1px solid var(--dx-border) !important;
		box-shadow: var(--dx-elevate-1) !important;
	}

	.hmtrendcatsection .bartitle .icon,
	.home-product-title .icon,
	.epin-showcase-head .icon {
		border-radius: var(--customer-card-radius) !important;
	}

	.hmtrendcatsection .trendcatSwiper {
		padding: 2px !important;
	}

	.hmtrendcatsection .item {
		aspect-ratio: 4 / 5 !important;
		border-radius: var(--customer-card-radius) !important;
	}

	html body .content .home-products-section .home-product-grid,
	html body .content .epin-showcase .epin-showcase-grid {
		display: grid !important;
		grid-template-columns: repeat(auto-fit, minmax(250px, 292px)) !important;
		align-items: stretch !important;
		justify-content: center !important;
		gap: clamp(16px, 1.6vw, 22px) !important;
		width: 100% !important;
	}

	html body .content .home-product-grid > .epin-card-v2,
	html body .content .epin-showcase-grid > .epin-card-v2 {
		width: 100% !important;
		max-width: 292px !important;
		min-width: 0 !important;
		min-height: 356px !important;
		margin: 0 !important;
		justify-self: center !important;
		border-radius: var(--customer-card-radius) !important;
		box-shadow: var(--dx-elevate-1) !important;
	}

	.epin-card-v2-media {
		height: 168px !important;
		aspect-ratio: 16 / 10;
		padding: 14px !important;
	}

	.epin-card-v2-body {
		padding: 14px !important;
	}

	.epin-card-v2-title {
		min-height: 40px !important;
		font-size: 14px !important;
	}

	.epin-card-v2-cart,
	.epin-card-v2-buy {
		min-height: 42px;
	}

	.epin-card-v2-icon:focus-visible,
	.epin-card-v2-cart:focus-visible,
	.epin-card-v2-buy:focus-visible,
	.home-slider-arrow:focus-visible,
	.hmtrendcatsection [class*="swiper-button-"]:focus-visible,
	.popular-game-tab:focus-visible,
	.popular-product-row:focus-visible {
		outline: 2px solid var(--dx-focus) !important;
		outline-offset: 3px !important;
	}

	.popular-games-block {
		grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) !important;
		align-items: start !important;
		min-height: 0 !important;
		padding: 20px !important;
		border-radius: var(--customer-card-radius) !important;
		background: var(--dx-surface) !important;
		border: 1px solid var(--dx-border) !important;
		box-shadow: var(--dx-elevate-1) !important;
	}

	.popular-games-sidebar {
		align-self: stretch !important;
		border-radius: var(--customer-card-radius) !important;
		background: var(--dx-surface-2) !important;
		border-color: var(--dx-border) !important;
	}

	.popular-games-panels {
		min-height: 0 !important;
	}

	.popular-games-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		align-content: start !important;
	}

	.popular-product-row,
	.popular-games-more {
		border-radius: var(--customer-card-radius) !important;
		background: var(--dx-surface-2) !important;
		border-color: var(--dx-border) !important;
		color: var(--dx-text) !important;
	}

	.popular-product-info strong {
		color: var(--dx-text-strong) !important;
	}

	.popular-product-qty {
		background: var(--dx-surface-3) !important;
		border-color: var(--dx-border) !important;
		color: var(--dx-text) !important;
	}

	.digex-footer {
		margin-top: var(--customer-section-space);
		padding-top: 40px !important;
		background: var(--dx-surface) !important;
		border-color: var(--dx-border) !important;
	}

	.digex-footer .footer-shell {
		width: min(
			calc(100% - (2 * var(--customer-gutter-tablet))),
			var(--customer-container)
		) !important;
		max-width: var(--customer-container) !important;
		padding-inline: 0 !important;
	}

	.digex-footer .footer-top {
		grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr) !important;
		gap: clamp(32px, 5vw, 80px) !important;
	}

	.digex-footer .footer-brand {
		padding: 24px !important;
		border-radius: var(--customer-card-radius) !important;
		background: var(--dx-surface-2) !important;
		border-color: var(--dx-border) !important;
		box-shadow: none !important;
	}

	:root[data-theme="light"] .epin-card-v2 {
		box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .10) !important;
	}

	:root[data-theme="light"] .epin-card-v2:hover {
		box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 16px 34px rgba(16, 24, 40, .14) !important;
	}
}

@media screen and (min-width: 992px) {
	.homepage-refined .homeSliderSwiper .swiper-slide a,
	.homepage-refined .homeSliderSwiper .swiper-slide img {
		width: 100% !important;
		height: clamp(320px, 32vw, 460px) !important;
		min-height: 0 !important;
		aspect-ratio: auto !important;
		border-radius: var(--customer-card-radius) !important;
		object-fit: cover !important;
	}

	.homepage-refined .anasliderdoping .item {
		border-radius: var(--customer-card-radius) !important;
	}

	.homepage-refined .home-slider-controls {
		left: 18px !important;
		bottom: 18px !important;
		border-radius: var(--customer-card-radius) !important;
	}

	.homepage-refined .home-slider-arrow,
	.homepage-refined .custom-pagination {
		border-radius: 6px !important;
	}
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) {
	.site-desktop-header .site-topline,
	.site-desktop-header .site-mainline {
		width: calc(100% - (2 * var(--customer-gutter-tablet))) !important;
		max-width: none !important;
		padding-inline: 0 !important;
	}

	.site-desktop-header .site-mainline {
		gap: 14px !important;
	}

	.site-desktop-header .site-logo .horizontal-header-logo {
		width: auto !important;
		height: 72px !important;
		max-width: 215px !important;
	}

	.site-desktop-header .site-search {
		flex-basis: 320px !important;
		min-width: 280px !important;
	}

	.site-desktop-header .site-categories {
		gap: 18px !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 899.98px) {
	.popular-games-block {
		grid-template-columns: 1fr !important;
	}

	.popular-games-tabs {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.popular-games-panel {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media screen and (min-width: 1200px) {
	.content .container {
		width: min(
			calc(100% - (2 * var(--customer-gutter-desktop))),
			var(--customer-container)
		) !important;
	}

	.site-desktop-header .site-topline,
	.site-desktop-header .site-mainline {
		width: min(
			calc(100% - (2 * var(--customer-gutter-desktop))),
			var(--customer-container)
		) !important;
		max-width: var(--customer-container) !important;
		padding-inline: 0 !important;
	}

	.site-desktop-header .site-mainline {
		display: grid !important;
		grid-template-columns: minmax(180px, 220px) minmax(360px, 1fr) auto;
		grid-template-rows: minmax(86px, auto) auto;
		column-gap: clamp(18px, 2vw, 30px) !important;
		row-gap: 0 !important;
		align-items: center !important;
	}

	.site-desktop-header .site-logo {
		grid-column: 1;
		grid-row: 1;
	}

	.site-desktop-header .site-search {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		min-width: 0;
	}

	.site-desktop-header .site-actions {
		grid-column: 3;
		grid-row: 1;
		margin-left: 0 !important;
	}

	.site-desktop-header .site-categories {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		margin-top: 0 !important;
		gap: clamp(18px, 2.2vw, 34px) !important;
		padding-block: 12px 16px !important;
		flex-wrap: nowrap !important;
		overflow: hidden !important;
	}

	.digex-footer .footer-shell {
		width: min(
			calc(100% - (2 * var(--customer-gutter-desktop))),
			var(--customer-container)
		) !important;
	}
}

.site-utility-actions {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.site-search-submit:focus-visible,
.site-desktop-header a:focus-visible,
.digex-footer a:focus-visible {
	outline: 2px solid var(--dx-focus) !important;
	outline-offset: 2px !important;
}

.site-desktop-header .site-search-results {
	z-index: 20 !important;
	background: var(--dx-surface) !important;
	border-color: var(--dx-border-strong) !important;
	color: var(--dx-text) !important;
}

.site-desktop-header .search-result-name {
	color: var(--dx-text-strong) !important;
}

.site-desktop-header .search-result-title,
.site-desktop-header .search-result-empty,
.site-desktop-header .search-result-loading {
	color: var(--dx-muted) !important;
}

.site-desktop-header .search-result-item {
	color: var(--dx-text) !important;
}

.site-desktop-header .search-result-item:hover,
.site-desktop-header .search-result-item:focus-visible {
	background: var(--dx-active) !important;
	color: var(--dx-active-text) !important;
	outline: 2px solid var(--dx-focus);
	outline-offset: -2px;
}

@media screen and (min-width: 768px) {
	html:root[data-theme] body .digex-footer {
		background: var(--dx-surface) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.epin-card-v2,
	.epin-card-v2 img,
	.home-slider-arrow,
	.hmtrendcatsection .item,
	.hmtrendcatsection .item img,
	.popular-game-tab,
	.popular-product-row,
	.digex-footer a {
		transition: none !important;
		animation: none !important;
	}

	.epin-card-v2:hover,
	.hmtrendcatsection .item:hover,
	.popular-product-row:hover {
		transform: none !important;
	}
}

/* Keep the premium trend header treatment ahead of desktop surface overrides. */
@media screen and (min-width: 768px) {
	.hmtrendcatsection .bartitle {
		padding: 14px 18px !important;
		border-radius: 18px !important;
		background:
			radial-gradient(circle at 0% 0%, rgba(79, 124, 255, .16), transparent 38%),
			linear-gradient(135deg,
				color-mix(in srgb, var(--dx-surface) 93%, #0b2e6f 7%),
				color-mix(in srgb, var(--dx-surface-2) 90%, #1d4ed8 10%)) !important;
		border: 1px solid color-mix(in srgb, var(--dx-accent) 26%, var(--dx-border)) !important;
		box-shadow: 0 14px 30px rgba(15, 35, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
	}

	:root[data-theme="light"] .hmtrendcatsection .bartitle {
		background:
			radial-gradient(circle at 0% 0%, rgba(79, 124, 255, .12), transparent 40%),
			linear-gradient(135deg, #ffffff 0%, #f5f9ff 58%, #edf5ff 100%) !important;
		box-shadow: 0 12px 28px rgba(53, 88, 140, .12), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
	}

	.hmtrendcatsection .bartitle .icon {
		border-radius: 14px !important;
	}
}