/**
 * 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;
}

/* ── Stand tagDiv's elastislide down when WE render the gallery. tagDiv Shop
 * (td-woo) wraps WooCommerce's own thumbnail list in
 * .elastislide-wrapper > .elastislide-carousel { overflow: hidden } via inline
 * footer JS that cannot be unhooked server-side (td_js_buffer). The zero-width
 * carousel then clips the whole column out of existence. These rules make the
 * wrapper inert wherever it appears around WC's list and hide its own nav —
 * the selectors only exist on tagDiv sites, so this is a no-op elsewhere.
 * !important is unavoidable: elastislide writes its sizing as inline style. */
.single-product .woocommerce-product-gallery .elastislide-wrapper,
.single-product .woocommerce-product-gallery .elastislide-carousel {
	position: static !important;
	overflow: visible !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
.single-product .woocommerce-product-gallery ol.flex-control-thumbs {
	height: auto !important;
}
.single-product .woocommerce-product-gallery .elastislide-wrapper nav,
.single-product .woocommerce-product-gallery .elastislide-prev,
.single-product .woocommerce-product-gallery .elastislide-next {
	/* The bare prev/next selectors matter too: elastislide appends its
	 * "Previous"/"Next" nav to whatever wrapper reference it holds, which
	 * after our strip reclaims the list is not necessarily inside a
	 * .elastislide-wrapper any more. */
	display: none !important;
}
/* 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;
	/* Capped HERE, not only inside the JS-built strip: between first paint and
	 * the script running (or if it never runs), a 12-image product must not
	 * paint a 1300px column past the bottom of the image. A real scroller
	 * rather than overflow:hidden, so wheel and touch swipe navigate the
	 * thumbnails too — the arrows are one way to scroll, not the only one.
	 * The scrollbar itself stays hidden (see the ::-webkit-scrollbar rule). */
	max-height: 332px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
	width: 0;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 100% !important;
	max-width: none !important;  /* elastislide writes inline max-width onto items */
	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;
	/* A fixed square frame: the thumbnail's size never depends on its file.
	 * A missing or slow image keeps the square instead of stretching to fit
	 * its alt text, and flex-shrink 0 stops the scrolling column squeezing it. */
	aspect-ratio: 1 / 1;
	overflow: hidden;
	flex: 0 0 auto;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	cursor: pointer;
	opacity: 0.55;
	border-radius: 0;
	transition: opacity 0.15s ease;
	font-size: 11px;            /* a missing file's alt text stays small inside the frame */
	line-height: 1.3;
}
.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;
	/* Count mode (the default): the ↑ + thumbnails + ↓ group sits compact and
	 * v-centred, arrows hugging the list. The "Fill the image height" option
	 * overrides this to space-between from PHP, pinning the arrows flush with
	 * the image's top and bottom edges and letting the list grow between. */
	justify-content: center;
	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) */
	min-height: 0;                /* may shrink when the image is shorter */
	overflow-y: auto;             /* wheel + touch swipe, scrollbar hidden */
	overflow-x: 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) {
	/* tagDiv lays the gallery out as a flex ROW (viewport flex:1). On desktop
	 * our strip is absolute and stays out of that flow, but on mobile it is a
	 * static full-width child — a second flex item that squeezes the viewport
	 * to zero width and the main image out of existence. Under our ownership
	 * the mobile gallery is a simple block: image first, thumbnail row below. */
	.single-product .woocommerce-product-gallery {
		display: block !important;
	}
	.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;
		max-height: none;
		margin-top: 8px;
	}
	.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 64px !important;
		flex: 0 0 64px;
	}
	/* Size the IMAGE, not only the box: elastislide leaves inline max-width on
	 * the items, and a 40px image inside a 64px box paints a white gap. */
	.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
		width: 100% !important;
		max-width: none !important;
		height: 100%;
	}
}

/* ── Brief section 18: the thumbnail position and the arrows ─────────────
 * The position is a class on the gallery root, set on the server
 * (`aieo-gl-thumbs-left|right|bottom|top`), so nothing moves when the script
 * starts; the arrow style likewise (`aieo-gl-arrows-long|chevron`). Phones
 * keep the strip under the image (the block above) unless it is `top`. */
@media (min-width: 768px) {
	/* right: the strip on the far side of the image */
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-right:has(.flex-control-thumbs) {
		padding-left: 0;
		padding-right: 116px;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-right .flex-control-thumbs,
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-right .aieo-gallery-thumbs-strip {
		left: auto;
		right: 0;
	}
	/* below or above: a horizontal strip in the flow, arrows at its ends */
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom:has(.flex-control-thumbs),
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top:has(.flex-control-thumbs) {
		padding-left: 0;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top {
		display: flex;
		flex-direction: column;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom .aieo-gallery-thumbs-strip,
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .aieo-gallery-thumbs-strip {
		position: static;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		margin-top: 8px;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .aieo-gallery-thumbs-strip {
		order: -1;
		margin: 0 0 8px;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom .flex-control-thumbs,
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .flex-control-thumbs,
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom .aieo-gallery-thumbs-strip .flex-control-thumbs,
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .aieo-gallery-thumbs-strip .flex-control-thumbs {
		position: static;
		width: auto;
		max-width: 332px;
		max-height: none;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom .flex-control-thumbs:not(.aieo-gallery-thumbs-strip .flex-control-thumbs),
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .flex-control-thumbs:not(.aieo-gallery-thumbs-strip .flex-control-thumbs) {
		margin: 8px auto 0;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom .aieo-gallery-arrow,
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .aieo-gallery-arrow {
		width: 36px;
		height: 104px;
	}
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-bottom .aieo-gallery-arrow:not(.has-icon),
	.single-product .woocommerce-product-gallery.aieo-gl-thumbs-top .aieo-gallery-arrow:not(.has-icon) {
		transform: rotate(-90deg);
		width: 104px;
		height: 36px;
		margin: 34px -34px;
	}
}
/* The strip arrows with the contract's icons: 32px, a 1.25px line in the text
 * colour, over the strip, out of the tab order. Only an end that overflows
 * shows its arrow. */
.single-product .woocommerce-product-gallery .aieo-gallery-arrow.has-icon {
	background-image: none;
	color: inherit;
	opacity: 0.7;
}
/* The theme's icon, an SVG or (contract C11) a mask span whose line weight is --rooster-icon-line. */
.single-product .woocommerce-product-gallery .aieo-gallery-arrow.has-icon :is(svg, .rooster-icon) {
	width: 32px;
	height: 32px;
	stroke-width: 1.25;
	--rooster-icon-line: var(--rooster-icon-125, var(--rooster-icon));
}
.single-product .woocommerce-product-gallery .aieo-gl-arrows-chevron .aieo-gallery-arrow.has-icon :is(svg, .rooster-icon),
.single-product .woocommerce-product-gallery.aieo-gl-arrows-chevron .aieo-gallery-arrow.has-icon :is(svg, .rooster-icon) {
	width: 28px;
	height: 28px;
}
.single-product .woocommerce-product-gallery .aieo-gallery-arrow.has-icon:hover,
.single-product .woocommerce-product-gallery .aieo-gallery-arrow.has-icon:focus-visible {
	opacity: 1;
}
.single-product .woocommerce-product-gallery .aieo-gallery-thumbs-strip.aieo-has-overflow .aieo-gallery-arrow.is-at-end {
	visibility: hidden;
}
/* The image's previous and next arrows (FlexSlider's direction nav, moved
 * into the viewport by the script): at the image's sides, vertically centred,
 * no box or disc, 48px targets, the icon at 32px (chevrons 28px), 70% opacity,
 * 100% on hover or focus, 20% when there is no image that way. */
.single-product .woocommerce-product-gallery .flex-viewport {
	position: relative;
}
.single-product .woocommerce-product-gallery .flex-direction-nav {
	display: block !important;
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	z-index: 3;
}
.single-product .woocommerce-product-gallery .flex-direction-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.single-product .woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none !important;
	box-shadow: none;
	color: inherit;
	font-size: 0;
	line-height: 0;
	text-indent: 0;
	text-decoration: none;
	opacity: 0.7;
	pointer-events: auto;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.single-product .woocommerce-product-gallery .flex-direction-nav a::before,
.single-product .woocommerce-product-gallery .flex-direction-nav a::after {
	content: none !important;
}
.single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 4px; }
.single-product .woocommerce-product-gallery .flex-direction-nav .flex-next { right: 4px; }
.single-product .woocommerce-product-gallery .flex-direction-nav a :is(svg, .rooster-icon) {
	width: 32px;
	height: 32px;
	stroke-width: 1.25;
	--rooster-icon-line: var(--rooster-icon-125, var(--rooster-icon));
}
.single-product .woocommerce-product-gallery.aieo-gl-arrows-chevron .flex-direction-nav a :is(svg, .rooster-icon) {
	width: 28px;
	height: 28px;
}
.single-product .woocommerce-product-gallery .flex-direction-nav a:hover,
.single-product .woocommerce-product-gallery .flex-direction-nav a:focus-visible {
	opacity: 1;
}
.single-product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
	opacity: 0.2;
	pointer-events: none;
}
@media (max-width: 767px) {
	.single-product .woocommerce-product-gallery .flex-direction-nav { display: none !important; }
}