/*
 * AURA Woo Shop — WooCommerce and theme normalization.
 *
 * Every selector here is scoped to an AURA root, so nothing outside the shop
 * (checkout, other loops, widgets, other plugins, other AURA modules) is
 * touched. These rules exist because WooCommerce's own stylesheets size loop
 * items with floats and percentages at a higher specificity than a single
 * component class; they reset that inside AURA's grid and nowhere else.
 */

/* WooCommerce loop items: no floats, no percentage widths inside the grid. */
.woocommerce .aura-shop ul.products li.product,
.woocommerce-page .aura-shop ul.products li.product,
.woocommerce .aura-shop ul.products[class*="columns-"] li.product,
.woocommerce-page .aura-shop ul.products[class*="columns-"] li.product,
.woocommerce .aura-shop-single ul.products[class*="columns-"] li.product {
	float: none;
	clear: none;
	inline-size: auto;
	width: auto;
	margin: 0;
}

/* WooCommerce clears its loop with pseudo elements, which become grid items. */
.woocommerce .aura-shop ul.products::before,
.woocommerce .aura-shop ul.products::after,
.woocommerce .aura-shop-single ul.products::before,
.woocommerce .aura-shop-single ul.products::after {
	content: none;
}

/* Titles, prices and images inside the AURA card follow the design tokens. */
.woocommerce .aura-shop ul.products li.product .woocommerce-loop-product__title,
.woocommerce .aura-shop-single ul.products li.product .woocommerce-loop-product__title {
	padding: 0;
	font-size: var(--aura-shop-card-title-size);
	font-weight: var(--aura-shop-card-title-weight);
}

.woocommerce .aura-shop ul.products li.product .price,
.woocommerce .aura-shop-single ul.products li.product .price {
	margin: 0;
	color: var(--aura-shop-price-color);
	font-size: var(--aura-shop-card-price-size);
}

.woocommerce .aura-shop ul.products li.product a img,
.woocommerce .aura-shop-single ul.products li.product a img {
	margin: 0;
	box-shadow: none;
}

/* WooCommerce notices inside the shop keep the shop's radius and spacing. */
.aura-shop .woocommerce-notices-wrapper .woocommerce-message,
.aura-shop .woocommerce-notices-wrapper .woocommerce-info,
.aura-shop .woocommerce-notices-wrapper .woocommerce-error {
	border-radius: var(--aura-shop-button-radius);
}

/* The purchase control inside the AURA card follows the design, not WooCommerce's grey. */
.woocommerce .aura-shop ul.products li.product .aura-shop-card__actions .button,
.woocommerce-page .aura-shop ul.products li.product .aura-shop-card__actions .button {
	border: 1px solid var(--aura-shop-accent);
	border-radius: var(--aura-shop-button-radius);
	background: var(--aura-shop-accent);
	color: var(--aura-shop-accent-contrast);
}

.woocommerce .aura-shop ul.products li.product .aura-shop-card__actions .button:hover,
.woocommerce-page .aura-shop ul.products li.product .aura-shop-card__actions .button:hover {
	border-color: var(--aura-shop-accent-hover);
	background: var(--aura-shop-accent-hover);
	color: var(--aura-shop-accent-contrast);
}

.woocommerce .aura-shop ul.products li.product .aura-shop-card__actions .button:not(.product_type_simple),
.woocommerce-page .aura-shop ul.products li.product .aura-shop-card__actions .button:not(.product_type_simple) {
	border-color: var(--aura-shop-border);
	background: var(--aura-shop-surface-secondary);
	color: var(--aura-shop-text);
}

.woocommerce .aura-shop ul.products li.product .aura-shop-card__actions .button:not(.product_type_simple):hover,
.woocommerce-page .aura-shop ul.products li.product .aura-shop-card__actions .button:not(.product_type_simple):hover {
	border-color: var(--aura-shop-text);
	background: var(--aura-shop-surface-secondary);
	color: var(--aura-shop-text);
}

.woocommerce div.product.aura-shop-single p.price,
.woocommerce div.product.aura-shop-single span.price {
	color: var(--aura-shop-price-color);
	font-size: var(--aura-shop-single-price-size);
}

/*
 * The purchase button keeps the design's accent in every state. WooCommerce
 * paints `.button.alt` and, until a variation is chosen, `.button.alt.disabled`
 * in its own purple (seen on a real shop, Gate 12); a disabled button reads
 * as disabled through opacity, not through another brand's colour.
 */
.woocommerce div.product.aura-shop-single form.cart .button,
.woocommerce div.product.aura-shop-single form.cart .button:disabled,
.woocommerce div.product.aura-shop-single form.cart .button.disabled {
	border-color: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	background-color: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	color: var(--aura-shop-single-button-text, var(--aura-shop-accent-contrast));
}

.woocommerce div.product.aura-shop-single form.cart .button:hover {
	border-color: var(--aura-shop-single-button-hover, var(--aura-shop-accent-hover));
	background-color: var(--aura-shop-single-button-hover, var(--aura-shop-accent-hover));
	color: var(--aura-shop-single-button-text, var(--aura-shop-accent-contrast));
}

.woocommerce div.product.aura-shop-single form.cart .button:disabled,
.woocommerce div.product.aura-shop-single form.cart .button.disabled,
.woocommerce div.product.aura-shop-single form.cart .button:disabled:hover,
.woocommerce div.product.aura-shop-single form.cart .button.disabled:hover {
	border-color: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	background-color: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	opacity: var(--aura-shop-single-button-disabled-opacity, 0.50);
	cursor: not-allowed;
}

/* Star ratings: WooCommerce's font-based stars, sized for the card. */
.aura-shop .star-rating,
.aura-shop-single .star-rating {
	font-size: 0.8125rem;
}

/* Themes that force uppercase or huge headings inside loops. */
.aura-shop .aura-shop-card__title,
.aura-shop-single .aura-shop-card__title {
	text-transform: none;
	letter-spacing: normal;
}

/*
 * Themes commonly set a minimum height and padding on every input for touch
 * targets. A filter checkbox sits inside a 44px label that already provides
 * the target, so inside AURA the control keeps its own size.
 */
.aura-shop .aura-shop-filter__option input[type="checkbox"],
.aura-shop .aura-shop-filter__option input[type="radio"],
.aura-shop-drawer .aura-shop-filter__option input[type="checkbox"],
.aura-shop-drawer .aura-shop-filter__option input[type="radio"] {
	min-inline-size: 0;
	min-block-size: 0;
	padding: 0;
}

/*
 * Themes that make every input full width also stretch checkboxes and radios,
 * such as the review form's consent box, past the edge of the product page.
 * A box is never a full-width control.
 */
.aura-shop-single input[type="checkbox"],
.aura-shop-single input[type="radio"] {
	inline-size: auto;
	max-inline-size: 100%;
}

/* Cart and Checkout keep WooCommerce's markup and behaviour. AURA only
 * supplies the merchant-selected action colours and corners. */
body.woocommerce-cart :is(.wc-block-cart__submit-button, .checkout-button),
body.woocommerce-cart .wc-proceed-to-checkout a.button {
	border-color: var(--aura-shop-cart-button-border);
	border-radius: var(--aura-shop-cart-button-radius);
	background-color: var(--aura-shop-cart-button-background);
	color: var(--aura-shop-cart-button-text);
}

body.woocommerce-cart :is(.wc-block-cart__submit-button, .checkout-button):is(:hover, :focus-visible),
body.woocommerce-cart .wc-proceed-to-checkout a.button:is(:hover, :focus-visible) {
	border-color: var(--aura-shop-cart-button-hover);
	background-color: var(--aura-shop-cart-button-hover);
	color: var(--aura-shop-cart-button-text);
}

body.woocommerce-checkout :is(.wc-block-components-checkout-place-order-button, #place_order, button[name="woocommerce_checkout_place_order"]) {
	border-color: var(--aura-shop-checkout-button-border);
	border-radius: var(--aura-shop-checkout-button-radius);
	background-color: var(--aura-shop-checkout-button-background);
	color: var(--aura-shop-checkout-button-text);
}

body.woocommerce-checkout :is(.wc-block-components-checkout-place-order-button, #place_order, button[name="woocommerce_checkout_place_order"]):is(:hover, :focus-visible) {
	border-color: var(--aura-shop-checkout-button-hover);
	background-color: var(--aura-shop-checkout-button-hover);
	color: var(--aura-shop-checkout-button-text);
}

/*
 * WooCommerce gives the variation select `min-width: 75%` and a trailing
 * margin so a «Clear» link fits beside it. In the AURA product page the select
 * is the full width of its column, so that margin pushed the page sideways
 * on a phone. Same scope as WooCommerce's rule, inside the AURA product only.
 */
.woocommerce div.product.aura-shop-single form.cart .variations select {
	min-inline-size: 0;
	max-inline-size: 100%;
	margin-inline: 0;
}

/*
 * WooCommerce's own layout floats the gallery and the summary at 48% each and
 * each thumbnail at 25%. Inside the AURA product those percentages apply to
 * AURA's own columns again, so the gallery shrank to half its column and the
 * thumbnails to a few pixels. The AURA grid places both columns; WooCommerce's
 * floats stand down, at the same specificity and only inside the AURA root.
 */
.woocommerce #content div.product.aura-shop-single .aura-shop-gallery div.images,
.woocommerce div.product.aura-shop-single .aura-shop-gallery div.images,
.woocommerce-page #content div.product.aura-shop-single .aura-shop-gallery div.images,
.woocommerce-page div.product.aura-shop-single .aura-shop-gallery div.images,
.woocommerce #content div.product.aura-shop-single > div.summary,
.woocommerce div.product.aura-shop-single > div.summary,
.woocommerce-page #content div.product.aura-shop-single > div.summary,
.woocommerce-page div.product.aura-shop-single > div.summary {
	float: none;
	inline-size: auto;
	width: auto;
}

/* WooCommerce zeroes the list's margin; AURA keeps the independently chosen
   distance below the main image. */
.woocommerce div.product.aura-shop-single .aura-shop-gallery div.images .flex-control-thumbs {
	gap: var(--aura-shop-gallery-thumb-gap, 8px);
	margin-block-start: var(--aura-shop-gallery-thumb-offset, 8px);
}

/* Elementor's gallery is nested inside the product, not itself the product.
   Its thumbnail offset must win over the theme's `div.images` rule too. */
.woocommerce div.product .aura-shop-product-gallery .aura-shop-gallery div.images .flex-control-thumbs {
	gap: var(--aura-shop-gallery-thumb-gap, 8px);
	margin-block-start: var(--aura-shop-gallery-thumb-offset, 8px);
}

@media (min-width: 768px) {
	.woocommerce div.product.aura-shop-single .aura-shop-gallery--thumbs-left div.images .flex-control-thumbs,
	.woocommerce div.product.aura-shop-single .aura-shop-gallery--vertical_thumbs div.images .flex-control-thumbs,
	.woocommerce div.product .aura-shop-product-gallery .aura-shop-gallery--thumbs-left div.images .flex-control-thumbs,
	.woocommerce div.product .aura-shop-product-gallery .aura-shop-gallery--vertical_thumbs div.images .flex-control-thumbs {
		margin-block-start: 0;
	}
}

.woocommerce div.product.aura-shop-single .aura-shop-gallery div.images .flex-control-thumbs li {
	float: none;
	inline-size: auto;
	width: auto;
	margin: 0;
}

.woocommerce div.product .aura-shop-product-gallery .aura-shop-gallery div.images .flex-control-thumbs li {
	float: none;
	inline-size: auto;
	width: auto;
	margin: 0;
}

.woocommerce div.product.aura-shop-single .aura-shop-gallery div.images .flex-control-thumbs li img {
	margin: 0;
}

/*
 * Only what AURA frames is normalized: a theme that prints its own gallery
 * also sizes it, and a wider rule here collapsed one theme's gallery.
 */

/* Elementor wrappers must not add their own spacing inside AURA components. */
.elementor-widget-aura-shop-product-grid .aura-shop-results,
.elementor-widget-aura-shop-filters .aura-shop-filters,
.elementor-widget-aura-shop-toolbar .aura-shop-toolbar {
	margin: 0;
}