/* =========================================================
   WooCommerce · Galeria de producte (tema Total)
   - Desktop: thumbs verticals a l'esquerra, limitats a l'alçada
     de la imatge principal, amb scroll vertical.
   - Mòbil: thumbs en una sola fila amb scroll horitzontal.
   - Fletxes de navegació dins de la imatge principal.
   ========================================================= */

/* ---------- DESKTOP ---------- */
@media (min-width: 768px) {

	.single-product div.product .woocommerce-product-gallery {
		--pd-thumb-width: 92px;
		--pd-gallery-gap: 18px;

		position: relative;
		display: block;
		/* Reservem l'espai de l'esquerra per als thumbs (que van absoluts). */
		padding-left: calc(var(--pd-thumb-width) + var(--pd-gallery-gap));
	}

	/* Columna de thumbs: absoluta → no allarga el contenidor.
	   top/bottom:0 la fan de la mateixa alçada que la imatge principal. */
	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: var(--pd-thumb-width);

		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch;
		gap: 12px;

		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;

		/* Scroll funcional però barra amagada. */
		scrollbar-width: none;
		-ms-overflow-style: none;

		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs::-webkit-scrollbar,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs li,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs li {
		flex: 0 0 auto;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs img,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs img {
		display: block;
		width: 100% !important;
		height: auto !important;
		opacity: 1;
		cursor: pointer;
		border: 1px solid transparent;
		box-sizing: border-box;
		transition: opacity .2s ease, border-color .2s ease;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs img.flex-active,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs img.flex-active {
		border-color: rgba(0, 0, 0, .18);
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs img:hover,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs img:hover {
		opacity: .9;
	}

	/* Imatge principal (en flux, defineix l'alçada del contenidor). */
	.single-product div.product .woocommerce-product-gallery > .flex-viewport {
		position: relative;
		width: 100%;
		min-width: 0;
		overflow: hidden;
	}

	/* Fletxes: només sobre la imatge principal. */
	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav {
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
		left: calc(var(--pd-thumb-width) + var(--pd-gallery-gap));
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		pointer-events: none;
		z-index: 20;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav li {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav a {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 42px;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border-radius: 999px;
		box-shadow: none;
		opacity: 1 !important;
		pointer-events: auto;
		text-decoration: none;
		margin: 0 !important;
		margin-block-start: 0 !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .flex-prev {
		left: 12px;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .flex-next {
		right: 12px;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .flex-disabled {
		opacity: .45 !important;
		cursor: default;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .wpex-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 18px;
		height: 18px;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .wpex-icon svg {
		display: block;
		width: 18px;
		height: 18px;
		color: #b8b8b8;
	}
}

/* ---------- MÒBIL ---------- */
@media (max-width: 767px) {

	.single-product div.product .woocommerce-product-gallery {
		--pd-thumb-width-mobile: 72px;
		position: relative;
		display: block;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-viewport {
		position: relative;
		overflow: hidden;
	}

	/* Una sola fila amb scroll horitzontal. */
	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: flex-start;
		gap: 10px;
		width: 100%;

		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;

		/* Scroll funcional però barra amagada. */
		scrollbar-width: none;
		-ms-overflow-style: none;

		margin: 12px 0 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs::-webkit-scrollbar,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs li,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs li {
		flex: 0 0 var(--pd-thumb-width-mobile);
		width: var(--pd-thumb-width-mobile) !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-control-thumbs img,
	.single-product div.product .woocommerce-product-gallery > ol.flex-control-nav.flex-control-thumbs img {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav {
		position: absolute;
		inset: 0;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		pointer-events: none;
		z-index: 20;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav a {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border-radius: 999px;
		opacity: 1 !important;
		pointer-events: auto;
		margin: 0 !important;
		margin-block-start: 0 !important;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .flex-prev {
		left: 10px;
	}

	.single-product div.product .woocommerce-product-gallery > .flex-direction-nav .flex-next {
		right: 10px;
	}
}