/**
 * Commerce Studio X — WooCommerce presentation layer.
 * Uses WooCommerce component classes and Blocksy public-facing classes only.
 */

.csx-enabled.csx-commerce-enabled {
	--shop-columns: repeat(var(--csx-shop-columns-desktop), minmax(0, 1fr));
	--csx-price-size: clamp(.98rem, 1.4vw, 1.15rem);
}

/* Product archives and product blocks. */
.csx-enabled.csx-commerce-enabled :where(ul.products, .wc-block-product-template) {
	gap: var(--csx-shop-gap);
	align-items: stretch;
}

.csx-enabled.csx-commerce-enabled :where(ul.products[data-products], ul.products) {
	--shop-columns: repeat(var(--csx-shop-columns-desktop), minmax(0, 1fr));
}

.csx-enabled.csx-commerce-enabled :where(ul.products > li.product, .wc-block-product) {
	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);
}

.csx-enabled.csx-commerce-enabled.csx-equal-cards :where(ul.products > li.product, .wc-block-product) {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.csx-enabled.csx-commerce-enabled.csx-equal-cards :where(.ct-woo-card-actions, .wp-block-button, .wc-block-components-product-button) {
	margin-block-start: auto;
}

.csx-enabled.csx-commerce-enabled.csx-card-bordered :where(ul.products > li.product, .wc-block-product) {
	border: 1px solid var(--csx-border);
	background: var(--csx-surface);
	padding: var(--csx-card-padding);
}

.csx-enabled.csx-commerce-enabled.csx-card-elevated :where(ul.products > li.product, .wc-block-product) {
	border: 1px solid color-mix(in srgb, var(--csx-border) 82%, transparent);
	background: var(--csx-surface);
	padding: var(--csx-card-padding);
	box-shadow: var(--csx-shadow);
}

.csx-enabled.csx-commerce-enabled.csx-card-soft :where(ul.products > li.product, .wc-block-product) {
	border: 1px solid transparent;
	background: var(--csx-surface-alt);
	padding: var(--csx-card-padding);
}

.csx-enabled.csx-commerce-enabled.csx-card-minimal :where(ul.products > li.product, .wc-block-product) {
	border: 0;
	background: transparent;
	box-shadow: none;
}

/* Blocksy card type 2 uses a full-bleed figure/actions calculation based on
 * 20px. Rebind it to our configurable padding so neither system overflows. */
.csx-enabled.csx-commerce-enabled [data-products="type-2"] > li.product {
	--csx-blocksy-card-padding: var(--csx-card-padding);
	padding-block-start: 0;
	padding-block-end: var(--csx-blocksy-card-padding);
	padding-inline: var(--csx-blocksy-card-padding);
}

.csx-enabled.csx-commerce-enabled.csx-card-minimal [data-products="type-2"] > li.product {
	--csx-blocksy-card-padding: 0px;
}

.csx-enabled.csx-commerce-enabled [data-products="type-2"] > li.product > :where(figure, .ct-woo-card-actions) {
	inline-size: calc(100% + (var(--csx-blocksy-card-padding) * 2));
	margin-inline: calc(var(--csx-blocksy-card-padding) * -1);
}

.csx-enabled.csx-commerce-enabled [data-products="type-2"] > li.product > .ct-woo-card-actions:last-child {
	margin-block-end: calc(var(--csx-blocksy-card-padding) * -1);
}

.csx-enabled.csx-commerce-enabled.csx-card-minimal [data-products="type-2"] > li.product > .ct-woo-card-actions {
	border-block: 0;
}

@media (hover: hover) and (pointer: fine) {
	.csx-enabled.csx-commerce-enabled :where(ul.products > li.product, .wc-block-product):hover {
		transform: translateY(var(--csx-motion-lift));
		border-color: color-mix(in srgb, var(--csx-primary) 28%, var(--csx-border));
	}
}

.csx-enabled.csx-commerce-enabled :where(
	ul.products .ct-media-container,
	ul.products .woocommerce-LoopProduct-link > img,
	.wc-block-components-product-image,
	.wc-block-grid__product-image
) {
	position: relative;
	overflow: clip;
	inline-size: 100%;
	aspect-ratio: var(--csx-image-ratio);
	border-radius: max(0px, calc(var(--csx-card-radius) - 5px));
	background: var(--csx-surface);
}

.csx-enabled.csx-commerce-enabled :where(
	ul.products .ct-media-container img,
	ul.products .woocommerce-LoopProduct-link > img,
	.wc-block-components-product-image img,
	.wc-block-grid__product-image img
) {
	inline-size: 100%;
	block-size: 100%;
	padding: var(--csx-image-padding);
	object-fit: var(--csx-image-fit);
	object-position: center;
	transition: transform var(--csx-motion-duration) var(--csx-ease);
}

@media (hover: hover) and (pointer: fine) {
	.csx-enabled.csx-commerce-enabled :where(ul.products > li.product, .wc-block-product):hover :where(.ct-media-container img, .wc-block-components-product-image img) {
		transform: scale(1.025);
	}
}

.csx-enabled.csx-commerce-enabled :where(
	.woocommerce-loop-product__title,
	.wc-block-components-product-name,
	.wc-block-grid__product-title
) {
	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));
	font-size: clamp(.9rem, 1.25vw, 1.05rem);
	line-height: 1.55;
	text-wrap: pretty;
}

.csx-enabled.csx-commerce-enabled :where(.price, .wc-block-components-product-price, .wc-block-grid__product-price) {
	color: var(--csx-primary);
	font-size: var(--csx-price-size);
	font-variant-numeric: tabular-nums;
}

.csx-enabled.csx-commerce-enabled.csx-price-strong :where(.price, .wc-block-components-product-price, .wc-block-grid__product-price) {
	font-weight: 800;
}

.csx-enabled.csx-commerce-enabled :where(.price del, .wc-block-components-product-price__regular) {
	color: var(--csx-muted);
	font-size: .82em;
	font-weight: 500;
}

.csx-enabled.csx-commerce-enabled :where(.onsale, .out-of-stock-badge, .wc-block-components-product-sale-badge) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 28px;
	padding-inline: 10px;
	border: 0;
	border-radius: 999px;
	background: var(--csx-accent);
	color: #fff;
	font-size: .75rem;
	font-weight: 800;
	line-height: 1;
}

.csx-enabled.csx-commerce-enabled .csx-product-card--out-of-stock :where(.ct-media-container, .woocommerce-LoopProduct-link > img) {
	opacity: .72;
}

.csx-enabled.csx-commerce-enabled :where(ul.products .button, .wc-block-components-product-button__button, .wc-block-grid__product-add-to-cart .wp-block-button__link) {
	inline-size: 100%;
	justify-content: center;
	text-align: center;
}

/* Catalog toolbar and filters. */
.csx-enabled.csx-commerce-enabled :where(.woocommerce-ordering select, .woocommerce-perpage select) {
	min-inline-size: min(100%, 180px);
}

.csx-enabled.csx-commerce-enabled.csx-filters-panel :where(.ct-woo-filters, .ct-filter-widget, .wc-block-product-filters) {
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
	background: var(--csx-surface);
	padding: clamp(16px, 2.5vw, 24px);
	box-shadow: var(--csx-shadow);
}

.csx-enabled.csx-commerce-enabled.csx-filters-soft :where(.ct-woo-filters, .ct-filter-widget, .wc-block-product-filters) {
	border-radius: var(--csx-radius);
	background: var(--csx-surface-alt);
	padding: clamp(16px, 2.5vw, 24px);
}

.csx-enabled.csx-commerce-enabled :where(.wc-block-components-filter-reset-button, .wc-block-active-filters__clear-all) {
	color: var(--csx-primary);
	font-weight: 700;
}

/* Blocksy quick view: styling only, no duplicate quick-view functionality. */
.csx-enabled.csx-commerce-enabled.csx-quick-view-centered :where(.ct-quick-view-card, .ct-quick-view-content) {
	max-inline-size: min(960px, calc(100vw - (var(--csx-gutter) * 2)));
	border-radius: var(--csx-radius);
	background: var(--csx-surface);
	box-shadow: 0 28px 90px rgba(8, 31, 55, .24);
}

/* Single product. */
.csx-enabled.csx-commerce-enabled :where(.product-entry-wrapper, .woocommerce-product-gallery, .entry-summary) {
	min-inline-size: 0;
}

.csx-enabled.csx-commerce-enabled :where(.woocommerce-product-gallery__wrapper, .woocommerce-product-gallery__image) {
	border-radius: var(--csx-card-radius);
	background: var(--csx-surface);
}

.csx-enabled.csx-commerce-enabled .entry-summary :where(.quantity, .single_add_to_cart_button) {
	min-block-size: var(--csx-button-height);
}

.csx-enabled.csx-commerce-enabled :where(.variations, .woocommerce-product-attributes) {
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
	overflow: clip;
}

.csx-enabled.csx-commerce-enabled :where(.variations th, .variations td, .woocommerce-product-attributes th, .woocommerce-product-attributes td) {
	padding: 12px 14px;
	border-block-end: 1px solid var(--csx-border);
	text-align: start;
}

.csx-enabled.csx-commerce-enabled :where(.woocommerce-tabs ul.tabs) {
	display: flex;
	overflow-x: auto;
	gap: 8px;
	padding-block-end: 4px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.csx-enabled.csx-commerce-enabled :where(.woocommerce-tabs ul.tabs li a) {
	white-space: nowrap;
}

.csx-enabled.csx-commerce-enabled .csx-description-content.is-collapsed {
	position: relative;
	overflow: hidden;
	max-block-size: calc(var(--csx-description-lines) * 1.8em);
}

.csx-enabled.csx-commerce-enabled .csx-description-content.is-collapsed::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 3.5em;
	background: linear-gradient(to bottom, transparent, var(--csx-surface));
	pointer-events: none;
}

.csx-enabled.csx-commerce-enabled .csx-description-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-start: 12px;
	padding-inline: 18px;
	border: 1px solid var(--csx-border);
	background: var(--csx-surface);
	color: var(--csx-primary);
}

/* Notices and forms across classic WooCommerce. */
.csx-enabled.csx-commerce-enabled :where(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
	border: 1px solid var(--csx-border);
	border-inline-start: 4px solid var(--csx-primary);
	border-radius: min(var(--csx-radius), 14px);
	background: var(--csx-surface);
	color: var(--csx-text);
	box-shadow: 0 8px 26px rgba(15, 42, 70, .06);
}

.csx-enabled.csx-commerce-enabled :where(.woocommerce-error, .wc-block-components-notice-banner.is-error) {
	border-inline-start-color: #c62828;
}

.csx-enabled.csx-commerce-enabled :where(.woocommerce-form, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .cart_totals, .woocommerce-checkout-review-order) {
	border-radius: var(--csx-radius);
}

/* Modern Cart and Checkout Blocks — stable component APIs, low specificity. */
.csx-enabled.csx-commerce-enabled :where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) {
	--csx-checkout-gap: clamp(16px, 3vw, 32px);
	font-variant-numeric: tabular-nums;
}

.csx-enabled.csx-commerce-enabled :where(
	.wc-block-components-sidebar,
	.wc-block-components-totals-wrapper,
	.wc-block-checkout__payment-method,
	.wc-block-components-order-summary
) {
	border-color: var(--csx-border);
	border-radius: var(--csx-radius);
	background: var(--csx-surface);
}

.csx-enabled.csx-commerce-enabled :where(.wc-block-components-checkout-step) {
	margin-block-end: var(--csx-checkout-gap);
}

.csx-enabled.csx-commerce-enabled :where(.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input) {
	min-block-size: max(52px, var(--csx-field-height));
	border-color: var(--csx-border);
	border-radius: min(var(--csx-radius), 12px);
}

.csx-enabled.csx-commerce-enabled :where(.wc-block-components-button) {
	min-block-size: max(48px, var(--csx-button-height));
	border-radius: var(--csx-button-radius);
}

@container (max-width: 700px) {
	.csx-enabled.csx-commerce-enabled :where(.wc-block-components-sidebar, .wc-block-components-main) {
		inline-size: 100%;
	}

	.csx-enabled.csx-commerce-enabled :where(.wc-block-cart-items__row) {
		gap: 12px;
	}
}

/* Account screens. */
.csx-enabled.csx-commerce-enabled .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 8px;
	border: 1px solid var(--csx-border);
	border-radius: var(--csx-radius);
	background: var(--csx-surface);
	list-style: none;
}

.csx-enabled.csx-commerce-enabled .woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: 14px;
	border-radius: max(6px, calc(var(--csx-radius) - 6px));
}

.csx-enabled.csx-commerce-enabled .woocommerce-MyAccount-navigation .is-active a {
	background: var(--csx-surface-alt);
	color: var(--csx-primary);
	font-weight: 750;
}

/* Tablet and mobile product grids. */
@media (max-width: 1024px) {
	.csx-enabled.csx-commerce-enabled :where(ul.products[data-products], ul.products) {
		--shop-columns: repeat(var(--csx-shop-columns-tablet), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.csx-enabled.csx-commerce-enabled :where(ul.products[data-products], ul.products) {
		--shop-columns: repeat(var(--csx-shop-columns-mobile), minmax(0, 1fr));
	}

	.csx-enabled.csx-commerce-enabled {
		--csx-shop-gap-mobile: min(var(--csx-shop-gap), 14px);
	}

	.csx-enabled.csx-commerce-enabled :where(ul.products, .wc-block-product-template) {
		gap: var(--csx-shop-gap-mobile);
	}

	.csx-enabled.csx-commerce-enabled.csx-compact-mobile.csx-card-bordered :where(ul.products > li.product, .wc-block-product),
	.csx-enabled.csx-commerce-enabled.csx-compact-mobile.csx-card-elevated :where(ul.products > li.product, .wc-block-product),
	.csx-enabled.csx-commerce-enabled.csx-compact-mobile.csx-card-soft :where(ul.products > li.product, .wc-block-product) {
		padding: min(10px, var(--csx-card-padding));
	}

	.csx-enabled.csx-commerce-enabled.csx-compact-mobile [data-products="type-2"] > li.product {
		--csx-blocksy-card-padding: min(10px, var(--csx-card-padding));
		padding-block-start: 0;
		padding-block-end: var(--csx-blocksy-card-padding);
		padding-inline: var(--csx-blocksy-card-padding);
	}

	.csx-enabled.csx-commerce-enabled.csx-compact-mobile :where(
		ul.products .ct-media-container img,
		ul.products .woocommerce-LoopProduct-link > img,
		.wc-block-components-product-image img,
		.wc-block-grid__product-image img
	) {
		padding: min(9px, var(--csx-image-padding));
	}

	.csx-enabled.csx-commerce-enabled.csx-compact-mobile :where(.woocommerce-loop-product__title, .wc-block-components-product-name) {
		font-size: clamp(.82rem, 3.7vw, .94rem);
	}

	.csx-enabled.csx-commerce-enabled.csx-quick-view-sheet :where(.ct-quick-view-card, .ct-quick-view-content) {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		max-block-size: min(88dvh, 760px);
		max-inline-size: none;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
		overflow-y: auto;
	}

	.csx-enabled.csx-commerce-enabled :where(.shop_table_responsive, .woocommerce-orders-table) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 380px) {
	.csx-enabled.csx-commerce-enabled :where(ul.products, .wc-block-product-template) {
		gap: 8px;
	}

	.csx-enabled.csx-commerce-enabled :where(ul.products .button, .wc-block-components-product-button__button) {
		min-block-size: 40px;
		padding-inline: 7px;
		font-size: .78rem;
	}
}

@media (forced-colors: active) {
	.csx-enabled.csx-commerce-enabled :where(.onsale, .out-of-stock-badge, .wc-block-components-product-sale-badge) {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}
}