/* Product Gallery Slider Controls: shared stylesheet.
   Per-instance sizing (thumb size, per-view length) is computed and applied
   directly by gts.js at runtime; this file only handles layout/axis. */

.gts-wrap.gts-pos-top,
.gts-wrap.gts-pos-bottom {
	display: flex;
	flex-direction: column;
}
.gts-wrap.gts-pos-left,
.gts-wrap.gts-pos-right {
	display: flex;
}

.gts-wrap.gts-pos-top .gts-slider { order: 1; margin-bottom: 10px; }
.gts-wrap.gts-pos-top .woocommerce-product-gallery__wrapper { order: 2; }

.gts-wrap.gts-pos-bottom .woocommerce-product-gallery__wrapper { order: 1; }
.gts-wrap.gts-pos-bottom .gts-slider { order: 2; margin-top: 10px; }

.gts-wrap.gts-pos-left .gts-slider { order: 1; margin-right: 10px; }
.gts-wrap.gts-pos-left .woocommerce-product-gallery__wrapper { order: 2; flex: 1 1 auto; min-width: 0; }

.gts-wrap.gts-pos-right .woocommerce-product-gallery__wrapper { order: 1; flex: 1 1 auto; min-width: 0; }
.gts-wrap.gts-pos-right .gts-slider { order: 2; margin-left: 10px; }

.gts-slider {
	display: flex;
	flex-shrink: 0;
}
.gts-slider.gts-axis-vertical {
	flex-direction: column;
	align-items: stretch;
}
.gts-slider.gts-axis-horizontal {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.gts-viewport { overflow: hidden; flex-shrink: 0; }
.gts-track { display: flex; will-change: transform; transition: transform 0.3s ease; }

.gts-track .gts-thumb-item { margin: 0 !important; box-sizing: border-box; }
.gts-track .gts-thumb-item a { display: block; height: 100%; }
/* !important beats WooCommerce's own ".woocommerce div.product div.images img"
   (height: auto), which is more specific than a plain class selector here and
   was otherwise leaving the image at its natural aspect ratio inside the
   fixed-size thumbnail box, making object-fit have nothing to crop. */
.gts-track .gts-thumb-item a img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

@media (min-width: 993px) {
	.gts-track .gts-thumb-item {
		cursor: pointer;
		outline: 2px solid transparent;
		outline-offset: -2px;
		transition: outline-color 0.15s;
	}
	.gts-track .gts-thumb-item:hover { outline-color: #333; }
}

.gts-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f8f8f8;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	color: #555;
	font-size: 11px;
	flex-shrink: 0;
	transition: background 0.2s, opacity 0.2s;
}
.gts-btn:hover { background: #e8e8e8; }
.gts-btn:disabled,
.gts-btn[disabled] { opacity: 0.2; cursor: default; pointer-events: none; }

.gts-slider.gts-axis-vertical .gts-btn { width: 100%; padding: 5px; }
.gts-slider.gts-axis-horizontal .gts-btn { padding: 0 10px; }

/* Position (and which side the slider sits on) is resolved per breakpoint by
   gts.js, which swaps the .gts-pos-* class and re-inserts the slider before/
   after the main image to match; the .gts-pos-* rules above already cover
   every position at every width, so no separate forced-collapse override is
   needed here. */

/* <=767px: fixed compact tier, same on every position (3 thumbs, 60px). */
@media (max-width: 767px) {
	.gts-slider { gap: 6px; }
	.gts-track { gap: 6px !important; }
	.gts-viewport {
		height: 60px !important;
		width: auto !important;
		max-width: 192px !important;
	}
	.gts-track .gts-thumb-item {
		width: 60px !important;
		height: 60px !important;
		flex: 0 0 60px !important;
	}
	.gts-btn { height: 60px; }
}