/*
 * AURA Woo Shop — single product normalization.
 *
 * Scoped to `.aura-shop-single`, the class AURA adds to the WooCommerce
 * product wrapper, so the theme's other templates, the checkout and every
 * other plugin stay untouched. WooCommerce keeps the gallery, the form, the
 * variations and the stock messages; AURA gives them consistent type sizes,
 * spacing and controls.
 */

.aura-shop-single {
	--aura-shop-single-gap: var(--aura-shop-space-xl);
}

.aura-shop-single .product_title,
.aura-shop-single .aura-shop-product-summary__part--title h1 {
	margin-block: 0 var(--aura-shop-space-sm);
	font-family: var(--aura-shop-font-heading);
	font-size: var(--aura-shop-single-title-size);
	font-weight: var(--aura-shop-heading-weight);
	line-height: 1.15;
	color: var(--aura-shop-single-title-color, var(--aura-shop-heading));
}

.aura-shop-single .price,
.aura-shop-single .aura-shop-product-summary__part--price .price {
	color: var(--aura-shop-single-price-color, var(--aura-shop-price-color, var(--aura-shop-accent)));
	font-size: var(--aura-shop-single-price-size);
	font-weight: 600;
}

.aura-shop-single .price del {
	margin-inline-end: var(--aura-shop-space-xs);
	color: var(--aura-shop-muted);
	font-size: 0.8em;
	font-weight: 400;
}

.aura-shop-single .woocommerce-product-details__short-description {
	color: var(--aura-shop-text);
}

.aura-shop-single .woocommerce-product-gallery img {
	border-radius: var(--aura-shop-image-radius);
}

.aura-shop-single .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.aura-shop-single .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aura-shop-space-sm);
	margin: var(--aura-shop-space-sm) 0 0;
	padding: 0;
	list-style: none;
}

.aura-shop-single .flex-control-thumbs li {
	inline-size: auto;
	margin: 0;
	float: none;
}

.aura-shop-single .flex-control-thumbs img {
	inline-size: 4.5rem;
	block-size: auto;
	border: var(--aura-shop-gallery-thumb-border-width, 1px) solid var(--aura-shop-border);
	border-radius: var(--aura-shop-image-radius);
}

.aura-shop-single .aura-shop-product-summary {
	display: flex;
	flex-direction: column;
	gap: var(--aura-shop-single-summary-gap, var(--aura-shop-space-md));
}

/* WooCommerce/theme rules often float every `.summary` at 48%. The Elementor
   widget is already inside its own column; a second 48% is what makes the
   purchase panel appear as a narrow island in a largely empty column. */
.aura-shop-single .aura-shop-product-summary.summary.entry-summary {
	inline-size: 100%;
	width: 100%;
	max-inline-size: 100%;
	max-width: 100%;
	float: none;
	clear: none;
	margin-inline: 0;
	align-self: stretch;
}

.aura-shop-single.product > .summary,
.aura-shop-single .aura-shop-product-summary {
	box-sizing: border-box;
	padding: var(--aura-shop-single-summary-padding, 0px);
	border: var(--aura-shop-single-summary-border-width, 0px) solid var(--aura-shop-border, transparent);
	border-radius: var(--aura-shop-single-summary-radius, 0px);
	background: var(--aura-shop-single-surface, transparent);
}

.aura-shop-single .aura-shop-product-summary__part { min-inline-size: 0; }
.aura-shop-single .aura-shop-product-summary__part > * { max-inline-size: 100%; }

.aura-shop-single form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aura-shop-space-sm);
	margin-block: var(--aura-shop-space-md);
}

.aura-shop-single form.cart .quantity input.qty {
	min-block-size: var(--aura-shop-cta-height);
	inline-size: 5rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--aura-shop-border);
	border-radius: var(--aura-shop-input-radius);
	background: var(--aura-shop-surface);
	color: var(--aura-shop-text);
	font: inherit;
	text-align: center;
	box-sizing: border-box;
}

.aura-shop-single form.cart .button,
.aura-shop-single .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--aura-shop-single-button-height, var(--aura-shop-cta-height));
	padding-block: 0.625rem;
	padding-inline: 1.5rem;
	border: 1px solid var(--aura-shop-single-button-color, var(--aura-shop-accent));
	border-radius: var(--aura-shop-single-button-radius, var(--aura-shop-button-radius));
	background: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	color: var(--aura-shop-single-button-text, var(--aura-shop-accent-contrast));
	inline-size: var(--aura-shop-single-button-width, auto);
	font-weight: 600;
	line-height: 1.2;
}

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

/* Variable products nest the button in two WooCommerce wrappers. Keep those
   wrappers full-width, then let the configured button width decide its size. */
.aura-shop-single form.variations_form .single_variation_wrap,
.aura-shop-single form.variations_form .woocommerce-variation-add-to-cart {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.aura-shop-single form.variations_form .single_variation_wrap { flex: 1 0 100%; }
.aura-shop-single form.variations_form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aura-shop-space-sm);
}

/* Themes often paint `.button.alt.disabled` after AURA's base `.button` rule.
   This scoped selector gives the variable-product button the same settings as
   a simple product, without changing WooCommerce's disabled semantics. */
:is(.aura-shop-single.product, .aura-shop-single .aura-shop-product-summary) form.cart .single_add_to_cart_button.button.alt {
	inline-size: var(--aura-shop-single-button-width, auto);
	box-sizing: border-box;
	min-block-size: var(--aura-shop-single-button-height, var(--aura-shop-cta-height));
	border-color: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	border-radius: var(--aura-shop-single-button-radius, var(--aura-shop-button-radius));
	background-color: var(--aura-shop-single-button-color, var(--aura-shop-accent));
	color: var(--aura-shop-single-button-text, var(--aura-shop-accent-contrast));
}

.aura-shop-single form.variations_form .single_variation_wrap .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.alt {
	inline-size: var(--aura-shop-single-button-width, auto);
	width: var(--aura-shop-single-button-width, auto);
	max-inline-size: 100%;
	min-block-size: var(--aura-shop-single-button-height, var(--aura-shop-cta-height));
	border-radius: var(--aura-shop-single-button-radius, var(--aura-shop-button-radius));
}

:is(.aura-shop-single.product, .aura-shop-single .aura-shop-product-summary) form.cart .single_add_to_cart_button.button.alt:not(:disabled):not(.disabled):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));
}

:is(.aura-shop-single.product, .aura-shop-single .aura-shop-product-summary) form.cart .single_add_to_cart_button.button.alt:is(:disabled, .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));
	opacity: var(--aura-shop-single-button-disabled-opacity, 0.50);
	cursor: not-allowed;
}

.aura-shop-single table.variations {
	display: block;
	inline-size: 100%;
	flex: 1 0 100%;
	margin-block: 0 var(--aura-shop-space-sm);
	border: 0;
	/* A fixed layout lets the column decide the width, not the longest option. */
	table-layout: fixed;
}

.aura-shop-single table.variations tbody { display: block; }
.aura-shop-single table.variations tr {
	display: grid;
	grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr);
	gap: var(--aura-shop-space-sm);
	align-items: center;
}
.aura-shop-single table.variations th.label,
.aura-shop-single table.variations td.value { inline-size: auto; min-inline-size: 0; }

.aura-shop-single table.variations th,
.aura-shop-single table.variations td {
	padding-block: var(--aura-shop-space-xs);
	padding-inline: 0;
	border: 0;
	text-align: start;
	vertical-align: middle;
}

.aura-shop-single table.variations select {
	/* A block of its own: nothing shares its line and pushes the row wide. */
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	min-inline-size: 0;
	margin-inline: 0;
	max-inline-size: 100%;
	min-block-size: 2.75rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--aura-shop-border);
	border-radius: var(--aura-shop-input-radius);
	background: var(--aura-shop-surface);
	color: var(--aura-shop-text);
	font: inherit;
}

.aura-shop-single .stock {
	margin: 0;
	color: var(--aura-shop-muted);
	font-size: 0.9375rem;
}

.aura-shop-single .stock.out-of-stock {
	color: var(--aura-shop-sale);
}

.aura-shop-single .product_meta {
	margin-block-start: var(--aura-shop-space-md);
	color: var(--aura-shop-muted);
	font-size: var(--aura-shop-single-meta-size, 14px);
}

.aura-shop-single .aura-shop-product-content {
	margin-block: var(--aura-shop-space-2xl) var(--aura-shop-space-xl);
}

.aura-shop-single .aura-shop-accordion__panel h2,
.aura-shop-single .aura-shop-accordion__panel h3 {
	font-family: var(--aura-shop-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--aura-shop-heading-weight);
}

.aura-shop-single .aura-shop-related {
	margin-block: var(--aura-shop-space-2xl);
}

.aura-shop-single .aura-shop-related__title,
.aura-shop-related__title {
	margin-block: 0 var(--aura-shop-space-lg);
	font-family: var(--aura-shop-font-heading);
	font-size: 1.375rem;
	font-weight: var(--aura-shop-heading-weight);
}

.aura-shop-single .aura-shop-related .aura-shop-grid,
.aura-shop-single .aura-shop-related ul.products {
	display: grid;
	grid-template-columns: repeat(var(--aura-shop-columns), minmax(0, 1fr));
	gap: var(--aura-shop-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.aura-shop-single--sticky-summary .summary,
	.aura-shop-single--sticky-summary .aura-shop-product-summary {
		position: sticky;
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--aura-shop-space-lg));
	}
}

.aura-shop-single table.variations .reset_variations {
	display: inline-block;
	margin-block-start: var(--aura-shop-space-xs);
}

/* On a narrow screen the label sits above its choice instead of beside it. */
@media (max-width: 767px) {
	.aura-shop-single table.variations,
	.aura-shop-single table.variations tbody,
	.aura-shop-single table.variations tr,
	.aura-shop-single table.variations th,
	.aura-shop-single table.variations td {
		display: block;
		inline-size: 100%;
	}
	.aura-shop-single table.variations tr { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.aura-shop-single table.variations th.label,
	.aura-shop-single table.variations td.value { inline-size: 100%; }
}
