/* Always-visible gallery arrows (Blocksy / Blocksy Pro).
   Loaded only when Settings -> Buy Now -> Product Page -> "Always show gallery
   arrows" is on. Blocksy fades the previous/next arrows in on hover, which never
   happens on a touch screen; here they are shown all the time, as tabs
   flush with the image edges, at --wd-ga-opacity (set from that screen).
   No colours are set here: background, arrow colour, shadow and hover colours
   all come from the theme (Blocksy's own arrow settings).
   Only the main image's arrows are touched (.flexy > ...), not the thumbnail
   strip's own. Blocksy still hides them when a product has a single image. */

body.wd-gallery-arrows .woocommerce-product-gallery .flexy > [class*="flexy-arrow"] {
	--translate-x: 0 !important;
	transform: none !important;
	opacity: var(--wd-ga-opacity, .75) !important;
	width: 30px;
	height: 40px;
	top: calc(50% - 20px);
}
/* Blocksy keeps the arrows hidden (data-flexy="no") until the first hover.
   gallery-arrows.js starts the slider on load; this just makes sure they are
   shown in the meantime, for galleries with more than one image. */
body.wd-gallery-arrows .woocommerce-product-gallery .flexy-container:has(.flexy-items > :nth-child(2)) .flexy > [class*="flexy-arrow"] {
	visibility: visible !important;
}
body.wd-gallery-arrows .woocommerce-product-gallery .flexy > .flexy-arrow-prev {
	left: 0;
	border-radius: 0 14px 14px 0;
}
body.wd-gallery-arrows .woocommerce-product-gallery .flexy > .flexy-arrow-next {
	right: 0;
	border-radius: 14px 0 0 14px;
}
/* Hover: full strength only. The hover background / arrow colour are Blocksy's
   own (Customizer -> Product Gallery arrows), so they are not overridden here. */
body.wd-gallery-arrows .woocommerce-product-gallery .flexy > [class*="flexy-arrow"]:hover {
	opacity: 1 !important;
}