/**
 * AIEO single-product gallery — theme-independent default representation.
 *
 * WooCommerce's stock FlexSlider gallery floats ~48% with thumbnails in a
 * row below, which leaves whitespace in a wide image column and doesn't match
 * the intended layout. This makes the gallery fill its column and lays the
 * thumbnails as a vertical strip on the LEFT with the main image to the right
 * — on ANY theme (targets only WC's own gallery classes), enqueued by the
 * plugin on single-product pages so it's the default regardless of theme.
 *
 * The vertical thumb-strip space is RESERVED via padding-left (only when
 * thumbs exist, via :has) so the FlexSlider viewport width is stable and the
 * slides don't mis-size when the thumbnails are injected after JS init.
 *
 * @package ai-eshop-optimizer
 */
.single-product .woocommerce-product-gallery {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	position: relative;
	box-sizing: border-box;
}
/* Remove the magnifier icon — a click/tap on the image opens the lightbox (JS).
 * pointer-events:none on the hover-zoom overlay lets the click reach the image. */
.single-product .woocommerce-product-gallery__trigger { display: none !important; }
.single-product .zoomImg { pointer-events: none; }
.single-product .woocommerce-product-gallery .flex-viewport { cursor: zoom-in; }
.single-product .woocommerce-product-gallery:has(.flex-control-thumbs) {
	padding-left: 116px;
}
/* The gallery BLOCK shrink-wrapped to the image (e.g. 512px) instead of filling
 * the column — force it full so WC/FlexSlider initialise at the column width and
 * the image fills naturally (no upscale-stretch). */
.single-product .wp-block-woocommerce-product-image-gallery {
	width: 100% !important;
	max-width: 100% !important;
}
.single-product .woocommerce-product-gallery .flex-viewport,
.single-product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
	width: 100%;
	margin: 0;
}
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flex-viewport img {
	width: 100%;
	height: auto;
	display: block;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs {
	position: absolute;
	left: 0;
	top: 0;
	width: 104px;
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	list-style: none;
	border: 1px solid #000;     /* thin black border (crisp — not faded by img opacity) */
	box-sizing: border-box;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
	display: block;
	cursor: pointer;
	opacity: 0.55;
	border-radius: 0;
	transition: opacity 0.15s ease;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}

/* ── Thumbnail strip + ↑ / ↓ nav arrows (JS wraps these on multi-image
 * galleries). Shows ~3 thumbnails; the arrows scroll to reveal the rest and
 * appear only when the strip overflows. */
.single-product .woocommerce-product-gallery .aieo-gallery-thumbs-strip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;                  /* full gallery height */
	width: 104px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;    /* v-align the ↑ + thumbnails + ↓ group middle */
	gap: 6px;
}
.single-product .woocommerce-product-gallery .aieo-gallery-thumbs-strip .flex-control-thumbs {
	position: static;
	width: 100%;
	max-height: 332px;            /* ~3 thumbnails (104px + gap) */
	overflow: hidden;
	scroll-behavior: smooth;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.single-product .woocommerce-product-gallery .aieo-gallery-arrow {
	display: none;                /* shown only when thumbnails overflow */
	width: 104px;
	height: 36px;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	padding: 0;
	cursor: pointer;
	flex: 0 0 auto;
	transition: opacity 0.15s ease;
}
/* Arrow glyphs embedded as inline SVG data URIs (no extra requests). */
.single-product .woocommerce-product-gallery .aieo-gallery-arrow--up {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36.003' height='34.138' viewBox='0 0 36.003 34.138'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_159' data-name='Rectangle 159' width='34.138' height='36.003' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_68' data-name='Group 68' transform='translate(36.003) rotate(90)'%3E%3Cpath id='Path_81' data-name='Path 81' d='M0,17.878,16.253,0V35.756Z' transform='translate(0.248 0.123)' fill='%23fff'/%3E%3Cg id='Group_66' data-name='Group 66' transform='translate(0 0)'%3E%3Cg id='Group_65' data-name='Group 65' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_82' data-name='Path 82' d='M16.253,35.756,0,17.878,16.253,0' transform='translate(0.248 0.124)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3Cline id='Line_68' data-name='Line 68' x2='33.815' transform='translate(0.324 18.001)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.single-product .woocommerce-product-gallery .aieo-gallery-arrow--down {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36.003' height='34.138' viewBox='0 0 36.003 34.138'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_159' data-name='Rectangle 159' width='34.138' height='36.003' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_72' data-name='Group 72' transform='translate(0 34.138) rotate(-90)'%3E%3Cpath id='Path_81' data-name='Path 81' d='M0,17.878,16.253,0V35.756Z' transform='translate(0.248 0.123)' fill='%23fff'/%3E%3Cg id='Group_66' data-name='Group 66' transform='translate(0 0)'%3E%3Cg id='Group_65' data-name='Group 65' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_82' data-name='Path 82' d='M16.253,35.756,0,17.878,16.253,0' transform='translate(0.248 0.124)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3Cline id='Line_68' data-name='Line 68' x2='33.815' transform='translate(0.324 18.001)' fill='none' stroke='%23000' stroke-miterlimit='10' stroke-width='1'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.single-product .woocommerce-product-gallery .aieo-gallery-thumbs-strip.aieo-has-overflow .aieo-gallery-arrow {
	display: block;
}
.single-product .woocommerce-product-gallery .aieo-gallery-arrow:hover { opacity: 0.6; }

@media (max-width: 767px) {
	.single-product .woocommerce-product-gallery:has(.flex-control-thumbs) {
		padding-left: 0;
	}
	.single-product .woocommerce-product-gallery .aieo-gallery-thumbs-strip {
		position: static;
		width: 100%;
		flex-direction: row;
		margin-top: 8px;
	}
	.single-product .woocommerce-product-gallery .aieo-gallery-thumbs-strip .flex-control-thumbs {
		flex-direction: row;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.single-product .woocommerce-product-gallery .aieo-gallery-arrow { display: none !important; }
	.single-product .woocommerce-product-gallery .flex-control-thumbs {
		position: static;
		width: 100%;
		flex-direction: row;
		overflow-x: auto;
		margin-top: 8px;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 64px !important;
		flex: 0 0 64px;
	}
}