/**
 * Commerce Studio X Storefront presentation bridge.
 *
 * Storefront/QASF owns page content and section order. This stylesheet gives
 * its stable public classes the same tokens used by Blocksy and WooCommerce.
 * Every rule requires csx-storefront-theme, so the bridge can be disabled from
 * the Customizer without changing plugin data.
 */

body.csx-enabled.csx-storefront-theme {
	--qasf-primary: var(--csx-primary);
	--qasf-secondary: var(--csx-secondary);
	--qasf-accent: var(--csx-surface-alt);
	--qasf-text: var(--csx-text);
	--qasf-muted: var(--csx-muted);
	--qasf-surface: var(--csx-surface);
	--qasf-border: var(--csx-border);
	--qasf-radius: var(--csx-card-radius);
	--qasf-gap: var(--csx-shop-gap);
	--qasf-section-space: var(--csx-section-space);
	--qasf-container: var(--csx-container);
}

body.csx-enabled.csx-storefront-theme :where(.qasf-page, .qasf-section-shell, .qasf-section) {
	min-inline-size: 0;
	color: var(--csx-text);
}

body.csx-enabled.csx-storefront-theme.csx-font-custom :where(.qasf-page, .qasf-section-shell) {
	font-family: var(--csx-body-font);
}

body.csx-enabled.csx-storefront-theme :where(.qasf-container, .qasf-hero-shell) {
	inline-size: min(calc(100% - (var(--csx-gutter) * 2)), var(--csx-container));
	max-inline-size: var(--csx-container);
	margin-inline: auto;
}

body.csx-enabled.csx-storefront-theme .qasf-section {
	margin-block: 0;
	padding-block: clamp(calc(var(--csx-section-space) * .52), 6vw, var(--csx-section-space));
}

body.csx-enabled.csx-storefront-theme .qasf-section-shell + .qasf-section-shell .qasf-section {
	padding-block-start: clamp(calc(var(--csx-section-space) * .36), 4vw, calc(var(--csx-section-space) * .72));
}

body.csx-enabled.csx-storefront-theme.csx-storefront-sections-soft .qasf-section:not(.qasf-hero) > .qasf-container {
	padding: clamp(20px, 4vw, 42px);
	border: 1px solid color-mix(in srgb, var(--csx-border) 82%, transparent);
	border-radius: max(var(--csx-radius), 18px);
	background: var(--csx-surface-alt);
}

body.csx-enabled.csx-storefront-theme.csx-storefront-sections-separated .qasf-section:not(.qasf-hero) > .qasf-container {
	padding-block: clamp(20px, 4vw, 38px);
	border-block: 1px solid var(--csx-border);
}

/* Page and section headings. */
body.csx-enabled.csx-storefront-theme :where(.qasf-page-header, .qasf-section-heading) {
	max-inline-size: var(--csx-content);
	margin-inline: auto;
	margin-block-end: clamp(18px, 3vw, 30px);
	text-align: center;
}

body.csx-enabled.csx-storefront-theme .qasf-page-header {
	padding-block: clamp(28px, 5vw, 58px) 0;
}

body.csx-enabled.csx-storefront-theme :where(.qasf-page-header h1, .qasf-section-heading h2) {
	margin-block: 0 8px;
	color: var(--csx-primary);
	line-height: 1.28;
	text-wrap: balance;
}

body.csx-enabled.csx-storefront-theme .qasf-page-header h1 {
	font-size: clamp(2rem, 4vw, 3.25rem);
}

body.csx-enabled.csx-storefront-theme .qasf-section-heading h2 {
	font-size: clamp(1.55rem, 3vw, 2.25rem);
}

body.csx-enabled.csx-storefront-theme.csx-font-custom :where(
	.qasf-page-header h1,
	.qasf-section-heading h2,
	.qasf-hero-slide h1,
	.qasf-hero-slide h2,
	.qasf-cta h2,
	.qasf-feature-card h3
) {
	font-family: var(--csx-heading-font);
	font-weight: var(--csx-heading-weight);
}

body.csx-enabled.csx-storefront-theme :where(.qasf-page-header p, .qasf-section-heading p) {
	margin: 0;
	color: var(--csx-muted);
	font-size: clamp(.92rem, 1.4vw, 1.05rem);
	line-height: 1.8;
}

/* Grids: product columns share the WooCommerce controls. */
body.csx-enabled.csx-storefront-theme .qasf-grid {
	gap: var(--csx-shop-gap);
	align-items: stretch;
}

body.csx-enabled.csx-storefront-theme .qasf-product-grid {
	grid-template-columns: repeat(var(--csx-shop-columns-desktop), minmax(0, 1fr));
}

body.csx-enabled.csx-storefront-theme .qasf-term-grid {
	grid-template-columns: repeat(var(--csx-brand-columns-desktop), minmax(0, 1fr));
}

body.csx-enabled.csx-storefront-theme .qasf-features-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

/* Hero. */
body.csx-enabled.csx-storefront-theme .qasf-hero-slider__viewport {
	isolation: isolate;
	border: 1px solid var(--csx-border);
	border-radius: clamp(18px, 3vw, calc(var(--csx-radius) + 14px));
	background: var(--csx-surface-alt);
	box-shadow: var(--csx-shadow);
}

body.csx-enabled.csx-storefront-theme .qasf-hero-slide {
	background:
		radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--csx-secondary) 22%, transparent), transparent 34%),
		linear-gradient(135deg, var(--csx-surface-alt), var(--csx-surface));
}

body.csx-enabled.csx-storefront-theme .qasf-hero-slide__inner {
	gap: clamp(22px, 5vw, 64px);
	padding: clamp(28px, 5vw, 68px);
}

body.csx-enabled.csx-storefront-theme .qasf-hero-slide__content {
	max-inline-size: 720px;
	padding: 0;
}

body.csx-enabled.csx-storefront-theme :where(.qasf-hero-slide h1, .qasf-hero-slide h2) {
	margin-block: 0 14px;
	color: var(--csx-primary);
	font-size: clamp(2rem, 5vw, 3.65rem);
	line-height: 1.18;
	text-wrap: balance;
}

body.csx-enabled.csx-storefront-theme .qasf-hero-slide p {
	max-inline-size: 640px;
	margin: 0;
	color: var(--csx-muted);
	font-size: clamp(.98rem, 1.6vw, 1.18rem);
	line-height: 1.85;
}

body.csx-enabled.csx-storefront-theme .qasf-eyebrow {
	display: inline-flex;
	align-items: center;
	min-block-size: 30px;
	padding-inline: 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--csx-secondary) 13%, var(--csx-surface));
	color: var(--csx-primary);
	font-size: .8rem;
	font-weight: 800;
}

body.csx-enabled.csx-storefront-theme .qasf-hero-slide--background .qasf-hero-slide__content {
	padding: clamp(18px, 3vw, 30px);
	border: 1px solid color-mix(in srgb, var(--csx-border) 72%, transparent);
	border-radius: var(--csx-radius);
	background: color-mix(in srgb, var(--csx-surface) 90%, transparent);
	box-shadow: var(--csx-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

body.csx-enabled.csx-storefront-theme .qasf-hero-slide__overlay {
	background: var(--csx-primary);
	opacity: .2;
}

body.csx-enabled.csx-storefront-theme :where(.qasf-slider-arrow, .qasf-slider-dot) {
	color: var(--csx-primary);
}

body.csx-enabled.csx-storefront-theme .qasf-slider-arrow {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: 1px solid var(--csx-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--csx-surface) 90%, transparent);
	box-shadow: 0 8px 24px rgba(15, 42, 70, .12);
}

body.csx-enabled.csx-storefront-theme .qasf-slider-dots {
	padding: 7px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--csx-surface) 78%, transparent);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

body.csx-enabled.csx-storefront-theme:dir(rtl) .qasf-slider-dots {
	transform: translateX(50%);
}

body.csx-enabled.csx-storefront-theme .qasf-slider-dot {
	border-radius: 99px;
	background: var(--csx-primary);
	transition: inline-size var(--csx-motion-duration) var(--csx-ease), opacity var(--csx-motion-duration) var(--csx-ease);
}

body.csx-enabled.csx-storefront-theme .qasf-slider-dot.is-active {
	inline-size: 24px;
}

/* Buttons use one theme language while preserving plugin actions. */
body.csx-enabled.csx-storefront-theme :where(.qasf-button, .qasf-card-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--csx-button-height);
	padding: 10px 20px;
	border: 1px solid var(--csx-primary);
	border-radius: var(--csx-button-radius);
	background: var(--csx-primary);
	color: #fff;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

body.csx-enabled.csx-storefront-theme .qasf-actions .qasf-button + .qasf-button {
	border-color: var(--csx-border);
	background: var(--csx-surface);
	color: var(--csx-primary);
}

@media (hover: hover) and (pointer: fine) {
	body.csx-enabled.csx-storefront-theme :where(.qasf-button, .qasf-card-button):hover {
		transform: translateY(var(--csx-motion-lift));
		filter: brightness(.96);
	}
}

/* Product cards created by Storefront, not WooCommerce loop templates. */
body.csx-enabled.csx-storefront-theme .qasf-product-card {
	min-inline-size: 0;
	border-radius: var(--csx-card-radius);
	transition:
		transform var(--csx-motion-duration) var(--csx-ease),
		box-shadow var(--csx-motion-duration) var(--csx-ease),
		border-color var(--csx-motion-duration) var(--csx-ease);
}

body.csx-enabled.csx-storefront-theme.csx-card-minimal .qasf-product-card {
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.csx-enabled.csx-storefront-theme.csx-card-bordered .qasf-product-card {
	border: 1px solid var(--csx-border);
	background: var(--csx-surface);
}

body.csx-enabled.csx-storefront-theme.csx-card-elevated .qasf-product-card {
	border: 1px solid color-mix(in srgb, var(--csx-border) 82%, transparent);
	background: var(--csx-surface);
	box-shadow: var(--csx-shadow);
}

body.csx-enabled.csx-storefront-theme.csx-card-soft .qasf-product-card {
	border: 1px solid transparent;
	background: var(--csx-surface-alt);
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__media {
	aspect-ratio: var(--csx-image-ratio);
	border-start-start-radius: var(--csx-card-radius);
	border-start-end-radius: var(--csx-card-radius);
	background: var(--csx-surface);
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__media img {
	padding: var(--csx-image-padding);
	object-fit: var(--csx-image-fit);
	transition: transform var(--csx-motion-duration) var(--csx-ease);
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__body {
	gap: 9px;
	padding: var(--csx-card-padding);
}

body.csx-enabled.csx-storefront-theme .qasf-product-card h3 {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--csx-title-lines);
	line-clamp: var(--csx-title-lines);
	min-block-size: calc(1.55em * min(var(--csx-title-lines), 2));
	margin: 0;
	font-size: var(--csx-product-title-size);
	font-weight: var(--csx-product-title-weight);
	line-height: 1.55;
}

body.csx-enabled.csx-storefront-theme.csx-font-custom .qasf-product-card h3 {
	font-family: var(--csx-product-font);
}

body.csx-enabled.csx-storefront-theme .qasf-product-card h3 a {
	color: var(--csx-text);
	text-decoration: none;
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__price {
	color: var(--csx-primary);
	font-size: var(--csx-product-price-size);
	font-weight: var(--csx-product-price-weight);
	font-variant-numeric: tabular-nums;
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__price :where(del, .woocommerce-Price-amount:first-child:not(:last-child)) {
	color: var(--csx-muted);
	font-size: .8em;
	font-weight: 500;
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__excerpt {
	color: var(--csx-muted);
	line-height: 1.7;
}

body.csx-enabled.csx-storefront-theme .qasf-product-card__rating {
	color: var(--csx-muted);
	font-size: .82rem;
}

body.csx-enabled.csx-storefront-theme .qasf-card-button {
	inline-size: 100%;
	margin-block-start: auto;
}

body.csx-enabled.csx-storefront-theme .qasf-sale-badge {
	inset-block-start: 10px;
	inset-inline-start: 10px;
	border-radius: 999px;
	background: var(--csx-accent);
	color: #fff;
	font-size: .74rem;
	font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
	body.csx-enabled.csx-storefront-theme .qasf-product-card:hover {
		transform: translateY(var(--csx-motion-lift));
		border-color: color-mix(in srgb, var(--csx-primary) 28%, var(--csx-border));
	}

	body.csx-enabled.csx-storefront-theme .qasf-product-card:hover .qasf-product-card__media img {
		transform: scale(1.025);
	}
}

/* Brand/category and feature cards. */
body.csx-enabled.csx-storefront-theme :where(.qasf-term-card, .qasf-feature-card) {
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-card-radius);
	background: var(--csx-surface);
	box-shadow: 0 8px 26px rgba(15, 42, 70, .05);
	color: var(--csx-text);
	transition:
		transform var(--csx-motion-duration) var(--csx-ease),
		border-color var(--csx-motion-duration) var(--csx-ease),
		box-shadow var(--csx-motion-duration) var(--csx-ease);
}

body.csx-enabled.csx-storefront-theme .qasf-term-card {
	padding: clamp(12px, 2vw, 18px);
}

body.csx-enabled.csx-storefront-theme .qasf-term-card__media {
	aspect-ratio: 4 / 3;
	margin-block-end: 10px;
	padding: 8px;
	border-radius: max(8px, calc(var(--csx-card-radius) - 6px));
	background: var(--csx-surface);
}

body.csx-enabled.csx-storefront-theme .qasf-term-card__name {
	color: var(--csx-primary);
	font-weight: 800;
	line-height: 1.45;
}

body.csx-enabled.csx-storefront-theme .qasf-term-card__description,
body.csx-enabled.csx-storefront-theme .qasf-term-card__count {
	color: var(--csx-muted);
	font-size: .78rem;
}

body.csx-enabled.csx-storefront-theme .qasf-term-fallback {
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--csx-primary), var(--csx-secondary));
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
}

body.csx-enabled.csx-storefront-theme .qasf-feature-card {
	padding: clamp(16px, 2.5vw, 24px);
}

body.csx-enabled.csx-storefront-theme .qasf-feature-icon {
	display: grid;
	place-items: center;
	inline-size: 48px;
	block-size: 48px;
	border-radius: max(10px, calc(var(--csx-radius) - 3px));
	background: color-mix(in srgb, var(--csx-secondary) 13%, var(--csx-surface));
	color: var(--csx-primary);
	font-size: 1.3rem;
	font-weight: 900;
}

body.csx-enabled.csx-storefront-theme .qasf-feature-card h3 {
	margin-block-end: 5px;
	color: var(--csx-primary);
}

body.csx-enabled.csx-storefront-theme .qasf-feature-card p {
	margin: 0;
	color: var(--csx-muted);
	line-height: 1.75;
}

@media (hover: hover) and (pointer: fine) {
	body.csx-enabled.csx-storefront-theme :where(.qasf-term-card, .qasf-feature-card):hover {
		transform: translateY(var(--csx-motion-lift));
		border-color: color-mix(in srgb, var(--csx-primary) 28%, var(--csx-border));
		box-shadow: var(--csx-shadow);
	}
}

/* City status, empty states and CTA. The popup itself remains excluded. */
body.csx-enabled.csx-storefront-theme :where(.qasf-city-prompt, .qasf-current-city, .qasf-empty-products, .qasf-admin-hint) {
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
	background: var(--csx-surface);
	color: var(--csx-muted);
}

body.csx-enabled.csx-storefront-theme :where(.qasf-city-prompt, .qasf-current-city) a {
	color: var(--csx-primary);
	font-weight: 800;
}

body.csx-enabled.csx-storefront-theme .qasf-cta__inner {
	padding: clamp(24px, 5vw, 54px);
	border-radius: max(var(--csx-radius), 18px);
	background: linear-gradient(135deg, var(--csx-primary), var(--csx-secondary));
	color: #fff;
	box-shadow: var(--csx-shadow);
}

body.csx-enabled.csx-storefront-theme .qasf-cta :where(h2, p) {
	color: inherit;
}

body.csx-enabled.csx-storefront-theme .qasf-cta .qasf-button {
	border-color: #fff;
	background: #fff;
	color: var(--csx-primary);
}

/* Responsive column controls shared with the Customizer. */
@media (max-width: 1024px) {
	body.csx-enabled.csx-storefront-theme .qasf-product-grid {
		grid-template-columns: repeat(var(--csx-shop-columns-tablet), minmax(0, 1fr));
	}

	body.csx-enabled.csx-storefront-theme .qasf-term-grid {
		grid-template-columns: repeat(var(--csx-brand-columns-tablet), minmax(0, 1fr));
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	body.csx-enabled.csx-storefront-theme :where(.qasf-hero-slider__track, .qasf-hero-slide__inner) {
		min-block-size: clamp(30rem, 60vw, 34rem);
	}
}

@media (max-width: 767px) {
	body.csx-enabled.csx-storefront-theme :where(.qasf-container, .qasf-hero-shell) {
		inline-size: min(calc(100% - (var(--csx-gutter-min) * 2)), var(--csx-container));
	}

	body.csx-enabled.csx-storefront-theme :where(.qasf-hero-slider__track, .qasf-hero-slide__inner) {
		min-block-size: clamp(41rem, 170vw, 42rem);
	}

	body.csx-enabled.csx-storefront-theme .qasf-hero-slide__inner {
		align-content: start;
	}

	body.csx-enabled.csx-storefront-theme .qasf-section {
		padding-block: clamp(28px, 10vw, calc(var(--csx-section-space) * .72));
	}

	body.csx-enabled.csx-storefront-theme .qasf-product-grid {
		grid-template-columns: repeat(var(--csx-shop-columns-mobile), minmax(0, 1fr));
		gap: min(var(--csx-shop-gap), 14px);
	}

	body.csx-enabled.csx-storefront-theme .qasf-term-grid {
		grid-template-columns: repeat(var(--csx-brand-columns-mobile), minmax(0, 1fr));
		gap: min(var(--csx-shop-gap), 14px);
	}

	body.csx-enabled.csx-storefront-theme .qasf-hero-slide__inner {
		gap: 16px;
		padding: 24px 18px 52px;
	}

	body.csx-enabled.csx-storefront-theme :where(.qasf-hero-slide h1, .qasf-hero-slide h2) {
		font-size: clamp(1.75rem, 9vw, 2.45rem);
	}

	body.csx-enabled.csx-storefront-theme .qasf-slider-arrow {
		inline-size: 38px;
		block-size: 38px;
		min-block-size: 38px;
	}

	body.csx-enabled.csx-storefront-theme.csx-compact-mobile .qasf-product-card__body {
		gap: 7px;
		padding: min(10px, var(--csx-card-padding));
	}

	body.csx-enabled.csx-storefront-theme.csx-compact-mobile .qasf-product-card__media img {
		padding: min(9px, var(--csx-image-padding));
	}

	body.csx-enabled.csx-storefront-theme .qasf-product-card h3 {
		font-size: var(--csx-product-title-mobile);
	}

	body.csx-enabled.csx-storefront-theme .qasf-product-card__price {
		font-size: var(--csx-product-price-mobile);
	}

	body.csx-enabled.csx-storefront-theme .qasf-term-card {
		padding: 10px;
	}

	body.csx-enabled.csx-storefront-theme .qasf-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	body.csx-enabled.csx-storefront-theme .qasf-actions .qasf-button {
		inline-size: 100%;
	}
}

@media (max-width: 380px) {
	body.csx-enabled.csx-storefront-theme .qasf-product-grid,
	body.csx-enabled.csx-storefront-theme .qasf-term-grid {
		gap: 8px;
	}

	body.csx-enabled.csx-storefront-theme .qasf-card-button {
		min-block-size: 44px;
		padding-inline: 7px;
		font-size: .76rem;
	}
}

@media (forced-colors: active) {
	body.csx-enabled.csx-storefront-theme :where(.qasf-product-card, .qasf-term-card, .qasf-feature-card, .qasf-hero-slider__viewport) {
		border: 1px solid CanvasText;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.csx-enabled.csx-storefront-theme .qasf-product-card,
	body.csx-enabled.csx-storefront-theme .qasf-product-card__media img,
	body.csx-enabled.csx-storefront-theme .qasf-term-card,
	body.csx-enabled.csx-storefront-theme .qasf-feature-card,
	body.csx-enabled.csx-storefront-theme .qasf-slider-dot,
	body.csx-enabled.csx-storefront-theme .qasf-button,
	body.csx-enabled.csx-storefront-theme .qasf-card-button {
		animation-duration: .01ms;
		animation-iteration-count: 1;
		transition-duration: .01ms;
		scroll-behavior: auto;
	}
}