/*
 * AURA Woo Shop — product gallery.
 *
 * A frame around WooCommerce's own gallery. Every selector is inside
 * `.aura-shop-gallery`, so a theme's gallery elsewhere on the site is not
 * touched, and the images, sizes and alt text stay WooCommerce's.
 *
 * The frame keeps its shape while a customer moves between photographs of
 * different sizes: with a fixed ratio the stage reserves its space, so the
 * page does not jump.
 */

.aura-shop-gallery {
	display: grid;
	position: relative;
	/* A bounded column: a slider measures its container, and an auto column
	   would grow to whatever the slider measured, pushing the page wide. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aura-shop-gallery-gap);
	min-inline-size: 0;
	max-inline-size: var(--aura-shop-gallery-max, none);
}

.aura-shop-gallery > * {
	min-inline-size: 0;
}

/* WooCommerce and some themes float the inner gallery at 48%. Inside the
   AURA column it must occupy the full column, or the gallery appears halved. */
.aura-shop-single.product > .aura-shop-gallery,
.aura-shop-single.product > .aura-shop-gallery > .woocommerce-product-gallery {
	inline-size: 100%;
	max-inline-size: 100%;
	float: none;
	box-sizing: border-box;
}

/* Some Woo themes size the image or FlexSlider viewport independently of
   the gallery. Keep the stage inside the chosen column, not at theme 48%. */
.aura-shop-single.product > .aura-shop-gallery .flex-viewport,
.aura-shop-single.product > .aura-shop-gallery > .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	inline-size: 100%;
	max-inline-size: 100%;
	min-inline-size: 0;
	box-sizing: border-box;
}

.aura-shop-single.product > .aura-shop-gallery .flex-viewport {
	overflow: hidden;
}

.aura-shop-single.product > .aura-shop-gallery .woocommerce-product-gallery__image {
	max-inline-size: 100%;
}

.aura-shop-single.product > .aura-shop-gallery .woocommerce-product-gallery__image img {
	inline-size: 100%;
	max-inline-size: 100%;
}

/* Elementor's AURA gallery widget calls WooCommerce's image callback outside
   the native product hook. It has its own frame and must fill its Elementor
   column even when a theme assigns `div.images` a 48% width and float. */
.aura-shop-single .aura-shop-product-gallery {
	inline-size: 100%;
	min-inline-size: 0;
}

.aura-shop-single .aura-shop-product-gallery > .aura-shop-gallery {
	inline-size: 100%;
	min-inline-size: 0;
	margin-inline: auto;
}

.aura-shop-single .aura-shop-product-gallery > .aura-shop-gallery > .woocommerce-product-gallery {
	inline-size: 100%;
	width: 100%;
	max-inline-size: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	box-sizing: border-box;
}

.aura-shop-single .aura-shop-product-gallery .woocommerce-product-gallery__image img {
	inline-size: 100%;
	max-inline-size: 100%;
}


/* The stage: WooCommerce's gallery wrapper is what holds the large image. */
.aura-shop-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
	border-radius: var(--aura-shop-gallery-radius);
	background: var(--aura-shop-gallery-stage, transparent);
	overflow: hidden;
}

.aura-shop-gallery--ratio-fixed .woocommerce-product-gallery__wrapper {
	aspect-ratio: var(--aura-shop-gallery-ratio);
}

.aura-shop-gallery--ratio-fixed .woocommerce-product-gallery__image,
.aura-shop-gallery--ratio-fixed .woocommerce-product-gallery__wrapper > div,
.aura-shop-gallery--ratio-fixed .woocommerce-product-gallery__wrapper > a {
	block-size: 100%;
}

.aura-shop-gallery--ratio-fixed .woocommerce-product-gallery__wrapper img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: var(--aura-shop-gallery-fit);
}

.aura-shop-gallery--ratio-original .woocommerce-product-gallery__wrapper img {
	inline-size: 100%;
	block-size: auto;
}

/* Thumbnails: WooCommerce prints them as a list; the design decides the shape. */
.aura-shop-gallery .flex-control-thumbs,
.aura-shop-gallery .aura-shop-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	gap: var(--aura-shop-gallery-thumb-gap);
	margin: 0;
	margin-block-start: var(--aura-shop-gallery-thumb-offset, 8px);
	padding: 0;
	list-style: none;
}

.aura-shop-gallery .flex-control-thumbs li {
	flex: 0 0 calc((100% - (var(--aura-shop-gallery-thumbs) - 1) * var(--aura-shop-gallery-thumb-gap)) / var(--aura-shop-gallery-thumbs));
	inline-size: auto;
	margin: 0;
	scroll-snap-align: start;
}

.aura-shop-gallery--fallback .woocommerce-product-gallery__image[hidden] { display: none; }
.aura-shop-gallery--fallback .flex-viewport .woocommerce-product-gallery__wrapper {
	display: block;
	transform: none;
	inline-size: 100%;
}
.aura-shop-gallery--fallback .flex-viewport .woocommerce-product-gallery__image {
	float: none;
	inline-size: 100%;
}

.aura-shop-gallery .flex-control-thumbs img,
.aura-shop-gallery .aura-shop-gallery__thumbs img {
	inline-size: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--aura-shop-gallery-thumb-radius);
	border: var(--aura-shop-gallery-thumb-border-width, 1px) solid var(--aura-shop-border);
	box-sizing: border-box;
	object-fit: var(--aura-shop-gallery-fit);
	opacity: 0.72;
	cursor: pointer;
	transition: opacity var(--aura-shop-transition);
}

.aura-shop-gallery .flex-control-thumbs img:hover,
.aura-shop-gallery .flex-control-thumbs img.flex-active,
.aura-shop-gallery [aria-current="true"] img {
	opacity: 1;
	outline: var(--aura-shop-gallery-thumb-outline-width, 2px) solid var(--aura-shop-accent);
	/* The thumbnail list scrolls and clips outside outlines. Keep the whole
	   selection ring inside the image so all four sides remain visible. */
	outline-offset: calc(-1 * var(--aura-shop-gallery-thumb-outline-width, 2px));
}

.aura-shop-gallery .flex-control-thumbs img:focus-visible,
.aura-shop-gallery .aura-shop-gallery__thumbs img:focus-visible {
	outline: 2px solid var(--aura-shop-accent);
	outline-offset: -2px;
}

.aura-shop-gallery--thumbs-hidden .flex-control-thumbs,
.aura-shop-gallery--thumbs-hidden .aura-shop-gallery__thumbs {
	display: none;
}

/*
 * Thumbnails beside the image, on the logical side, from tablet up. The two
 * columns belong to WooCommerce's gallery element, which holds both the image
 * viewport and the thumbnail list; the frame around it keeps one column.
 */
@media (min-width: 768px) {
	.aura-shop-gallery--thumbs-left .woocommerce-product-gallery,
	.aura-shop-gallery--vertical_thumbs .woocommerce-product-gallery {
		display: grid;
		grid-template-columns: minmax(3.5rem, 1fr) minmax(0, 5fr);
		gap: var(--aura-shop-gallery-thumb-offset, 8px);
		align-items: start;
	}

	.aura-shop-gallery--thumbs-left .woocommerce-product-gallery > .flex-viewport,
	.aura-shop-gallery--vertical_thumbs .woocommerce-product-gallery > .flex-viewport,
	.aura-shop-gallery--thumbs-left .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper,
	.aura-shop-gallery--vertical_thumbs .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
		grid-column: 2;
		grid-row: 1;
		min-inline-size: 0;
	}

	.aura-shop-gallery--thumbs-left .woocommerce-product-gallery > .flex-control-thumbs,
	.aura-shop-gallery--vertical_thumbs .woocommerce-product-gallery > .flex-control-thumbs {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		max-block-size: 34rem;
		margin-block-start: 0;
	}
	.aura-shop-gallery--thumbs-left .flex-control-thumbs li,
	.aura-shop-gallery--vertical_thumbs .flex-control-thumbs li { flex: 0 0 auto; }
}

/* Grid: every photograph at once, which needs no stage of its own. */
.aura-shop-gallery--grid .woocommerce-product-gallery__wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--aura-shop-gallery-gap);
	background: none;
}

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

/* Navigation AURA adds when WooCommerce's gallery has no slider. */
.aura-shop-gallery__nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: var(--aura-shop-space-sm);
}

.aura-shop-gallery--ready .aura-shop-gallery__nav { display: flex; }
.aura-shop-gallery--ready .flex-direction-nav { display: none; }

.aura-shop-gallery__arrow {
	display: inline-grid;
	position: absolute;
	z-index: 2;
	inset-block-start: 40%;
	place-items: center;
	inline-size: var(--aura-shop-gallery-arrow-size, 44px);
	block-size: var(--aura-shop-gallery-arrow-size, 44px);
	padding: 0;
	border: 1px solid var(--aura-shop-border);
	border-radius: var(--aura-shop-button-radius);
	background: var(--aura-shop-gallery-arrow-background, var(--aura-shop-surface));
	color: var(--aura-shop-gallery-arrow-color, var(--aura-shop-heading));
	cursor: pointer;
}

.aura-shop-gallery__arrow--previous { inset-inline-start: var(--aura-shop-space-sm, 8px); }
.aura-shop-gallery__arrow--next { inset-inline-end: var(--aura-shop-space-sm, 8px); }

.aura-shop-gallery__arrow--previous .aura-shop-icon {
	transform: rotate(180deg);
}

html[dir="rtl"] .aura-shop-gallery__arrow--previous .aura-shop-icon {
	transform: none;
}

html[dir="rtl"] .aura-shop-gallery__arrow--next .aura-shop-icon {
	transform: rotate(180deg);
}

.aura-shop-gallery__dots {
	display: flex;
	gap: var(--aura-shop-space-xs);
}

.aura-shop-gallery__dot {
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.aura-shop-gallery__dot::before {
	content: "";
	display: block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin: 0 auto;
	border-radius: 999px;
	background: var(--aura-shop-border);
	transition: background var(--aura-shop-transition);
}

.aura-shop-gallery__dot[aria-selected="true"]::before {
	background: var(--aura-shop-accent);
}

.aura-shop-gallery__arrow:focus-visible,
.aura-shop-gallery__dot:focus-visible {
	outline: 3px solid var(--aura-shop-accent);
	outline-offset: 2px;
}

.aura-shop-gallery--nav-none .aura-shop-gallery__nav,
.aura-shop-gallery--nav-none .flex-direction-nav,
.aura-shop-gallery--nav-dots .flex-direction-nav {
	display: none;
}

.aura-shop-gallery--nav-none.aura-shop-gallery--ready .aura-shop-gallery__nav { display: none; }

@media (min-width: 768px) {
	.aura-shop-gallery--nav-arrows .aura-shop-gallery__dots { display: none; }
}

/* Sticky gallery, only where there is room for it. */
@media (min-width: 1024px) {
	.aura-shop-gallery--sticky {
		position: sticky;
		inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--aura-shop-space-lg));
	}
}

/* Mobile: one photograph at a time, swiped, with dots under it. */
@media (max-width: 767px) {
	.aura-shop-gallery--mobile-slider:is(.aura-shop-gallery--aura, .aura-shop-gallery--fallback) .woocommerce-product-gallery__wrapper {
		display: flex;
		gap: var(--aura-shop-gallery-gap);
		scroll-snap-type: x mandatory;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	.aura-shop-gallery--mobile-slider:is(.aura-shop-gallery--aura, .aura-shop-gallery--fallback) .woocommerce-product-gallery__image {
		flex: 0 0 100%;
		scroll-snap-align: center;
	}

	.aura-shop-gallery--mobile-stack:is(.aura-shop-gallery--aura, .aura-shop-gallery--fallback) .woocommerce-product-gallery__wrapper {
		display: grid;
		gap: var(--aura-shop-gallery-gap);
		aspect-ratio: auto;
	}

	.aura-shop-gallery--mobile-nav-none .aura-shop-gallery__nav,
	.aura-shop-gallery--mobile-nav-none .flex-control-thumbs,
	.aura-shop-gallery--mobile-nav-dots .flex-control-thumbs {
		display: none;
	}
	.aura-shop-gallery--mobile-nav-dots.aura-shop-gallery--ready .aura-shop-gallery__nav { display: flex; }
	.aura-shop-gallery--mobile-nav-dots .aura-shop-gallery__arrow { display: none; }
	.aura-shop-gallery--mobile-nav-thumbnails .aura-shop-gallery__nav { display: none; }

	/* A row of six tiny thumbnails is not a control: on mobile they stay big. */
	.aura-shop-gallery--mobile-nav-thumbnails .flex-control-thumbs,
	.aura-shop-gallery--mobile-nav-thumbnails .aura-shop-gallery__thumbs {
		--aura-shop-gallery-thumbs: 4;
	}

}

/* ---------------------------------------------------------- Product layouts */

/*
 * WooCommerce prints the gallery and the summary as siblings inside the
 * product wrapper. AURA turns that wrapper into a grid instead of copying
 * `single-product.php`, so a theme that adds its own markup keeps working.
 */
@media (min-width: 1024px) {
	/* Elementor's starter product template owns the outer two columns, not
	   WooCommerce's `.product` grid. Match only a section containing both AURA
	   product widgets; custom columns elsewhere remain Elementor's decision. */
	body.aura-shop-single-product {
		--aura-shop-elementor-gallery-width: var(--aura-shop-gallery-width, 50%);
	}

	body.aura-shop-single-layout-classic:not(.aura-shop-single-custom-gallery-width) {
		--aura-shop-elementor-gallery-width: 50%;
	}

	body.aura-shop-single-layout-gallery_focus:not(.aura-shop-single-custom-gallery-width) {
		--aura-shop-elementor-gallery-width: 60%;
	}

	body.aura-shop-single-layout-vertical_gallery:not(.aura-shop-single-custom-gallery-width),
	body.aura-shop-single-layout-editorial:not(.aura-shop-single-custom-gallery-width) {
		--aura-shop-elementor-gallery-width: 55%;
	}

	body.aura-shop-single-product .elementor-section:has(.elementor-widget-aura-shop-product-gallery):has(.elementor-widget-aura-shop-product-summary) > .elementor-container > .elementor-column:has(.elementor-widget-aura-shop-product-gallery),
	body.aura-shop-single-product .elementor-section:has(.elementor-widget-aura-shop-product-gallery):has(.elementor-widget-aura-shop-product-summary) > .elementor-container > .elementor-row > .elementor-column:has(.elementor-widget-aura-shop-product-gallery),
	body.aura-shop-single-product .e-con:has(> .e-con > .elementor-widget-aura-shop-product-gallery):has(> .e-con > .elementor-widget-aura-shop-product-summary) > .e-con:has(> .elementor-widget-aura-shop-product-gallery),
	body.aura-shop-single-product .e-con:has(> .e-con-inner > .e-con > .elementor-widget-aura-shop-product-gallery):has(> .e-con-inner > .e-con > .elementor-widget-aura-shop-product-summary) > .e-con-inner > .e-con:has(> .elementor-widget-aura-shop-product-gallery) {
		flex: 0 0 var(--aura-shop-elementor-gallery-width);
		inline-size: var(--aura-shop-elementor-gallery-width);
		max-inline-size: var(--aura-shop-elementor-gallery-width);
	}

	body.aura-shop-single-product .elementor-section:has(.elementor-widget-aura-shop-product-gallery):has(.elementor-widget-aura-shop-product-summary) > .elementor-container > .elementor-column:has(.elementor-widget-aura-shop-product-summary),
	body.aura-shop-single-product .elementor-section:has(.elementor-widget-aura-shop-product-gallery):has(.elementor-widget-aura-shop-product-summary) > .elementor-container > .elementor-row > .elementor-column:has(.elementor-widget-aura-shop-product-summary),
	body.aura-shop-single-product .e-con:has(> .e-con > .elementor-widget-aura-shop-product-gallery):has(> .e-con > .elementor-widget-aura-shop-product-summary) > .e-con:has(> .elementor-widget-aura-shop-product-summary),
	body.aura-shop-single-product .e-con:has(> .e-con-inner > .e-con > .elementor-widget-aura-shop-product-gallery):has(> .e-con-inner > .e-con > .elementor-widget-aura-shop-product-summary) > .e-con-inner > .e-con:has(> .elementor-widget-aura-shop-product-summary) {
		flex: 1 1 0;
		inline-size: auto;
		max-inline-size: none;
		min-inline-size: 0;
	}

	.aura-shop-single.product {
		display: grid;
		grid-template-columns: minmax(0, calc(var(--aura-shop-gallery-width, 50%) - var(--aura-shop-space-2xl) / 2)) minmax(0, 1fr);
		column-gap: var(--aura-shop-space-2xl);
		align-items: start;
	}

	.aura-shop-single.product > .woocommerce-product-gallery,
	.aura-shop-single.product > .aura-shop-gallery {
		grid-column: 1;
		min-inline-size: 0;
		max-inline-size: none;
	}

	.aura-shop-single.product > .summary,
	.aura-shop-single.product > .aura-shop-product-summary {
		grid-column: 2;
		min-inline-size: 0;
		margin: 0;
		inline-size: auto;
		float: none;
	}

	/* Everything else — tabs, related products, accordions — spans the row. */
	.aura-shop-single.product > *:not(.woocommerce-product-gallery):not(.aura-shop-gallery):not(.summary):not(.aura-shop-product-summary) {
		grid-column: 1 / -1;
	}

	.aura-shop-single--layout-classic.product:not(.aura-shop-single--custom-gallery-width) {
		grid-template-columns: minmax(0, calc(50% - var(--aura-shop-space-2xl) / 2)) minmax(0, 1fr);
	}

	.aura-shop-single--layout-gallery_focus.product:not(.aura-shop-single--custom-gallery-width) {
		grid-template-columns: minmax(0, calc(60% - var(--aura-shop-space-2xl) / 2)) minmax(0, 1fr);
	}

	.aura-shop-single--layout-vertical_gallery.product:not(.aura-shop-single--custom-gallery-width) {
		grid-template-columns: minmax(0, calc(55% - var(--aura-shop-space-2xl) / 2)) minmax(0, 1fr);
	}

	.aura-shop-single--layout-editorial.product:not(.aura-shop-single--custom-gallery-width) {
		grid-template-columns: minmax(0, calc(55% - var(--aura-shop-space-2xl) / 2)) minmax(0, 1fr);
	}

	/*
	 * Editorial: the photographs fill the first column as a grid and the
	 * summary stays beside them. It only applies when the product has enough
	 * images; with fewer, the wrapper carries the classic layout instead.
	 */
	.aura-shop-single--layout-editorial.product > .aura-shop-gallery .woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--aura-shop-gallery-gap);
		aspect-ratio: auto;
	}

	.aura-shop-single--layout-editorial.product > .aura-shop-gallery .flex-control-thumbs {
		display: none;
	}

	.aura-shop-product-gallery--editorial > .aura-shop-gallery .woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--aura-shop-gallery-gap);
		aspect-ratio: auto;
	}

	.aura-shop-product-gallery--editorial > .aura-shop-gallery .flex-control-thumbs {
		display: none;
	}
}