/* Compact product gallery thumbnails (Blocksy / Blocksy Pro).
   Loaded only when Settings -> Buy Now -> Product Page -> compact thumbnails is on.

   Uses Blocksy's own thumbnail carousel - nothing is re-implemented, so its
   scrolling (the active thumbnail is brought into view when the slide changes),
   arrows and rounded corners all keep working. Only four things change:
     - the strip is as wide as the main image, split into --wd-gt-count equal
       thumbnails (default 6), so they fill the row;
     - when a product has fewer images than that, the ones it has keep the same
       size and are centred;
     - the active thumbnail is full opacity, the rest are dimmed;
     - the theme's large gap under the gallery is tightened to 20px.
   --wd-gt-count is set from the settings screen.
   Scoped to the product gallery only (.woocommerce-product-gallery), so the
   dot pagination of product cards in Related / Upsells is never touched, and
   skipped when Blocksy puts the thumbnails on the side (data-thumbs left /
   right), where a 1/6-width strip would not make sense.
   body.wd-gallery-thumbs-mobile = mobile only (Blocksy's 689px breakpoint);
   without it the rules apply on all screens. */

/* all screens */
body.wd-gallery-thumbs:not(.wd-gallery-thumbs-mobile) .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) { margin-bottom: 20px !important; }
body.wd-gallery-thumbs:not(.wd-gallery-thumbs-mobile) .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills {
	width: 100%;
	max-width: 100%;
	margin-inline: auto;
}
body.wd-gallery-thumbs:not(.wd-gallery-thumbs-mobile) .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills li {
	--thumbs-width: calc(100% / var(--wd-gt-count, 6));
	opacity: .4 !important;
	transition: opacity .2s ease;
}
body.wd-gallery-thumbs:not(.wd-gallery-thumbs-mobile) .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills li.active { opacity: 1 !important; }
body.wd-gallery-thumbs:not(.wd-gallery-thumbs-mobile) .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills ol:not([data-flexy]),
body.wd-gallery-thumbs:not(.wd-gallery-thumbs-mobile) .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills ol[data-flexy*="paused"] { justify-content: center; }

/* mobile only (default) */
@media (max-width: 689.98px) {
	body.wd-gallery-thumbs.wd-gallery-thumbs-mobile .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) { margin-bottom: 20px !important; }
	body.wd-gallery-thumbs.wd-gallery-thumbs-mobile .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills {
		width: 100%;
		max-width: 100%;
		margin-inline: auto;
	}
	body.wd-gallery-thumbs.wd-gallery-thumbs-mobile .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills li {
		--thumbs-width: calc(100% / var(--wd-gt-count, 6));
		opacity: .4 !important;
		transition: opacity .2s ease;
	}
	body.wd-gallery-thumbs.wd-gallery-thumbs-mobile .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills li.active { opacity: 1 !important; }
	body.wd-gallery-thumbs.wd-gallery-thumbs-mobile .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills ol:not([data-flexy]),
	body.wd-gallery-thumbs.wd-gallery-thumbs-mobile .woocommerce-product-gallery:not([data-thumbs="left"]):not([data-thumbs="right"]) .flexy-pills ol[data-flexy*="paused"] { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	body.wd-gallery-thumbs .woocommerce-product-gallery .flexy-pills li { transition: none; }
}