/* ── Force 1:1 aspect on the main single product image (img element) ── */
img.apu-product-image {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	min-height: auto !important;
	max-height: none !important;
}

/* Force 1:1 aspect when the product photo is rendered as a background-image. */
.apu-product-image-bg {
	aspect-ratio: 1 / 1 !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	width: 100% !important;
	height: auto !important;
	min-height: auto !important;
	max-height: none !important;
}

/* Fallback selectors in case JS hasn't tagged anything. */
body.single-product .elementor-widget-woocommerce-product-images img,
body.single-product .woocommerce-product-gallery__image img,
body.single-product .woocommerce-product-gallery img,
body.single-product figure.wp-block-post-featured-image img,
body.single-product .elementor-widget-image .elementor-widget-container > img,
body.single-product .elementor-widget-image .elementor-widget-container > a > img {
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
}

/* ── Self-contained gallery wrap (image + thumbs share a column) ────── */
.apu-gallery-wrap {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}
.apu-image-frame {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
}

/* ── Gallery thumbnail strip below the main image ────────────────────── */
.apu-gallery-thumbs {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 0 100% !important;
	flex-basis: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	clear: both;
}
button.apu-gallery-thumb,
.apu-gallery-thumb {
	flex: 0 0 72px !important;
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	min-height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 2px solid transparent !important;
	outline: none !important;
	background: #fff !important;
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	overflow: hidden !important;
	box-sizing: border-box !important;
	transition: border-color 120ms ease;
	border-radius: 2px !important;
	font: inherit;
	line-height: 0 !important;
	text-align: center;
	color: inherit;
}
.apu-gallery-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	max-width: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
}
.apu-gallery-thumb:hover { border-color: #b1746f !important; }
.apu-gallery-thumb.is-active { border-color: #b1746f !important; }
.apu-gallery-thumb:focus,
.apu-gallery-thumb:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border-color: #b1746f !important;
}

/* ── Prev/Next arrows over the main single-product image ─────────────── */
.apu-nav-arrow {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 5 !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	max-width: 40px !important;
	max-height: 40px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	outline: none !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.85) !important;
	background-image: none !important;
	color: #2b2b2b !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	line-height: 0 !important;
	font: inherit;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity 200ms ease, background 120ms ease !important;
}
.apu-nav-host:hover .apu-nav-arrow,
.apu-nav-host:focus-within .apu-nav-arrow {
	opacity: 1 !important;
	pointer-events: auto !important;
}
.apu-nav-arrow:hover {
	background: rgba(255, 255, 255, 1) !important;
}
.apu-nav-arrow:focus,
.apu-nav-arrow:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 2px #b1746f, 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
.apu-nav-arrow svg {
	width: 22px !important;
	height: 22px !important;
	display: block !important;
	pointer-events: none;
}
.apu-nav-prev { left: 12px !important; right: auto !important; }
.apu-nav-next { right: 12px !important; left: auto !important; }

/* ── Single-product Add-to-Cart: ensure the left border isn't clipped ─ */
body.single-product .cart .button,
body.single-product .cart button,
body.single-product button.single_add_to_cart_button,
body.single-product button[name="add-to-cart"],
body.single-product .elementor-button-link,
body.single-product .elementor-button {
	box-sizing: border-box !important;
	border-left-width: 1px !important;
	border-left-style: solid !important;
}
body.single-product form.cart {
	overflow: visible !important;
	padding-left: 1px;
}

/* ── Hover-swap transition on shop archives ─────────────────────────── */
img[data-apu-hover] { transition: opacity 150ms ease; }