/**
 * Responsive overrides — mobile-first breakpoint adjustments.
 */

@media (min-width: 768px) {
	:root {
		--xm-container-padding: 1.5rem;
	}

	.xm-site__main,
	.xm-homepage,
	.xm-home-section,
	.xm-container {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.xm-home-section > .xm-container {
		max-width: var(--xm-container-max);
		margin-left: auto;
		margin-right: auto;
	}

	.xm-product-grid,
	.xm-product-grid.products,
	ul.products.xm-product-grid {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: var(--xm-space-lg) !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.xm-product-grid__item,
	.xm-product-grid.products > li,
	ul.products.xm-product-grid > li {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.xm-section-header__title {
		font-size: var(--xm-font-size-2xl);
	}
}

@media (min-width: 1024px) {
	.xm-product-grid,
	.xm-product-grid.products,
	ul.products.xm-product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 1200px) {
	:root {
		--xm-container-padding: 2rem;
	}
}

@media (max-width: 767px) {
	.xm-hide-mobile {
		display: none !important;
	}

	/* Prevent 100vw / overflow glitches when toggling device mode */
	html,
	body.xm-site {
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}

	.xm-header,
	.xm-site__main,
	.xm-homepage,
	.xm-container,
	.xm-home-section {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.xm-promo-showcase {
		display: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.xm-mobile-search--persistent .xm-container {
		padding-left: var(--xm-container-padding);
		padding-right: var(--xm-container-padding);
	}

	.xm-mobile-search--persistent .xm-search-form {
		width: 100%;
		max-width: 100%;
	}

	/* Two compact product columns on phone */
	.xm-product-grid,
	.xm-product-grid.products,
	ul.products.xm-product-grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 0.625rem !important;
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

	.xm-product-grid__item,
	.xm-product-grid.products > li,
	ul.products.xm-product-grid > li {
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.xm-product-card__body {
		padding: 0.625rem;
		gap: 0.375rem;
	}

	.xm-product-card__title {
		font-size: 0.8125rem;
	}

	.xm-product-card__price--now {
		font-size: 0.875rem;
	}

	.xm-product-card__details-link {
		display: none;
	}

	.xm-home-section {
		padding: var(--xm-space-md) 0 var(--xm-space-lg);
	}

	.xm-homepage--has-mobile-posters .xm-home-section:first-of-type {
		margin-top: var(--xm-space-sm);
	}

	.xm-home-section .xm-section-header {
		position: relative;
		isolation: isolate;
		align-items: center;
		margin-top: var(--xm-space-sm);
		margin-bottom: 0;
		margin-left: calc(-1 * var(--xm-container-padding));
		margin-right: calc(-1 * var(--xm-container-padding));
		padding: 0.875rem var(--xm-container-padding) 1.375rem;
		background: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	.xm-home-section .xm-section-header::before {
		content: '';
		position: absolute;
		inset: 0;
		bottom: -0.625rem;
		background: linear-gradient(
			180deg,
			var(--xm-color-primary-soft) 0%,
			var(--xm-color-primary-soft) 42%,
			rgba(255, 244, 236, 0.72) 72%,
			rgba(255, 244, 236, 0) 100%
		);
		border: none;
		border-radius: 1.25rem 1.25rem 0 0;
		z-index: -2;
		pointer-events: none;
	}

	.xm-home-section .xm-section-header::after {
		content: '';
		position: absolute;
		inset: 0;
		border: 3px solid var(--xm-color-primary);
		border-bottom: none;
		border-radius: 1.25rem 1.25rem 0 0;
		background: transparent;
		-webkit-mask-image: linear-gradient(
			180deg,
			#000 0%,
			#000 62%,
			rgba(0, 0, 0, 0.92) 68%,
			transparent 74%
		);
		mask-image: linear-gradient(
			180deg,
			#000 0%,
			#000 62%,
			rgba(0, 0, 0, 0.92) 68%,
			transparent 74%
		);
		z-index: -1;
		pointer-events: none;
	}

	.xm-home-section:first-of-type .xm-section-header {
		margin-top: 0;
	}

	.xm-home-section .xm-section-header__title {
		font-size: 1.0625rem;
		line-height: 1.25;
		font-weight: var(--xm-font-weight-bold);
		color: var(--xm-color-primary);
		letter-spacing: 0.01em;
	}

	.xm-section-header__title {
		font-size: 1.0625rem;
		line-height: 1.25;
		color: var(--xm-color-text);
		letter-spacing: 0.01em;
	}

	.xm-section-header__link {
		display: inline-flex;
		align-items: center;
		gap: 0.15rem;
		padding: 0.4rem 0.7rem;
		font-size: 0.6875rem;
		font-weight: var(--xm-font-weight-bold);
		line-height: 1;
		color: var(--xm-color-white);
		background: var(--xm-color-primary);
		border-radius: 999px;
		box-shadow: 0 2px 6px rgba(255, 103, 0, 0.28);
		text-decoration: none;
		white-space: nowrap;
	}

	.xm-section-header__link:hover {
		color: var(--xm-color-white);
		background: var(--xm-color-primary-hover);
		text-decoration: none;
	}
}

@media (min-width: 768px) {
	.xm-hide-desktop {
		display: none !important;
	}
}