/*
 * Rahath: extra layout controls for Elementor Pro's "Product Images" widget.
 * Classes (rahath-gtp-*, rahath-gts-*) come from control `prefix_class`.
 * Custom properties (--rahath-thumb-*) come from control `selectors`.
 * See rahath-product-gallery-controls.php.
 */

.elementor-widget-woocommerce-product-images .woocommerce-product-gallery {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --rahath-gallery-gap, 0px );
}

.elementor-widget-woocommerce-product-images .flex-viewport {
	flex: 1 1 0%;
	min-width: 0;
}

/*
 * Left/Right positions only: WooCommerce's bundled flexslider measures
 * .flex-viewport's width and bakes it into fixed pixel math for its slide
 * track *before* it builds and inserts .flex-control-nav (see
 * jquery.flexslider.js: doMath() runs, then controlNav.setup()). If
 * .flex-viewport's width were left to flex-grow (`flex: 1 1 0%`), flexslider
 * would measure it as full-width (thumbnails don't exist yet), then the
 * thumbnail column would appear afterwards and eat into space flexslider had
 * already committed to — showing as a torn/overlapping image.
 *
 * Giving it an explicit calc() width instead makes it correct from the very
 * first layout pass, independent of when the thumbnail nav gets inserted.
 */
.elementor-widget-woocommerce-product-images.rahath-gtp-left .flex-viewport,
.elementor-widget-woocommerce-product-images.rahath-gtp-right .flex-viewport {
	flex: 0 0 auto;
	width: calc( 100% - var( --rahath-thumb-w, 90px ) - var( --rahath-gallery-gap, 0px ) );
}

.elementor-widget-woocommerce-product-images .flex-control-nav {
	display: flex;
	flex: 0 0 auto;
	gap: var( --rahath-thumb-gap, 0px );
}

/* --- Thumbnails position --- */

.elementor-widget-woocommerce-product-images.rahath-gtp-bottom .woocommerce-product-gallery {
	flex-direction: column;
}

.elementor-widget-woocommerce-product-images.rahath-gtp-top .woocommerce-product-gallery {
	flex-direction: column-reverse;
}

/*
 * The main image (.flex-viewport) is always the first DOM child and the
 * thumbnail nav (.flex-control-nav) is always appended after it (flexslider
 * inserts it that way) — so putting thumbnails on the *left* means
 * reversing visual order (row-reverse), and *right* is the unreversed,
 * natural row order.
 */
.elementor-widget-woocommerce-product-images.rahath-gtp-left .woocommerce-product-gallery {
	flex-direction: row-reverse;
}

.elementor-widget-woocommerce-product-images.rahath-gtp-right .woocommerce-product-gallery {
	flex-direction: row;
}

.elementor-widget-woocommerce-product-images.rahath-gtp-top .flex-control-nav,
.elementor-widget-woocommerce-product-images.rahath-gtp-bottom .flex-control-nav {
	flex-direction: row;
	flex-wrap: wrap;
}

.elementor-widget-woocommerce-product-images.rahath-gtp-left .flex-control-nav,
.elementor-widget-woocommerce-product-images.rahath-gtp-right .flex-control-nav {
	flex-direction: column;
}

/* --- Scrollable thumbnails --- */

.elementor-widget-woocommerce-product-images.rahath-gts-yes.rahath-gtp-top .flex-control-nav,
.elementor-widget-woocommerce-product-images.rahath-gts-yes.rahath-gtp-bottom .flex-control-nav {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	max-width: var( --rahath-thumb-scroll, 100% );
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.elementor-widget-woocommerce-product-images.rahath-gts-yes.rahath-gtp-left .flex-control-nav,
.elementor-widget-woocommerce-product-images.rahath-gts-yes.rahath-gtp-right .flex-control-nav {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: var( --rahath-thumb-scroll, 400px );
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Prevent thumbnails from shrinking when their row/column scrolls. */
.elementor-widget-woocommerce-product-images.rahath-gts-yes .flex-control-nav li {
	flex-shrink: 0;
}

/* --- Thumbnail box + image fit --- */

.elementor-widget-woocommerce-product-images .flex-control-nav li {
	flex: 0 0 auto;
}

.elementor-widget-woocommerce-product-images .flex-control-nav li img {
	display: block;
	width: 100%;
	object-fit: var( --rahath-thumb-fit, cover );
	object-position: center;
}

/*
 * Width/height only for the non-default positions (Top/Left/Right), with
 * !important, and NOT for Bottom (the default WooCommerce/flexslider
 * position): WooCommerce's own woocommerce.css ships
 * `.woocommerce div.product div.images .flex-control-thumbs li { width: 25% }`
 * and `.woocommerce div.product div.images img { height: auto }` — both more
 * specific than a plain descendant selector here, so without !important
 * WooCommerce's hardcoded values would silently win and the Thumbnail
 * Width/Height controls would appear to do nothing.
 *
 * Excluding Bottom keeps WooCommerce's native 25%-per-row thumbnail grid
 * completely untouched until an admin deliberately picks a different
 * position — Width/Height only "activate" together with that choice, so
 * nothing changes for a widget nobody has customized yet. Left/Right also
 * need a concrete fallback (not `auto`) since their column width has to
 * match the calc() reserved for it above.
 */
.elementor-widget-woocommerce-product-images.rahath-gtp-top .flex-control-nav li,
.elementor-widget-woocommerce-product-images.rahath-gtp-left .flex-control-nav li,
.elementor-widget-woocommerce-product-images.rahath-gtp-right .flex-control-nav li {
	width: var( --rahath-thumb-w, 90px ) !important;
}

.elementor-widget-woocommerce-product-images.rahath-gtp-top .flex-control-nav li img,
.elementor-widget-woocommerce-product-images.rahath-gtp-left .flex-control-nav li img,
.elementor-widget-woocommerce-product-images.rahath-gtp-right .flex-control-nav li img {
	height: var( --rahath-thumb-h, 90px ) !important;
}