/* Repair missing margin */
.storefront-full-width-content.single-product div.product {

	& .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 {

		& .flex-control-thumbs li:nth-child(5) {

			@media (min-width: 768px) {
				margin-right: 10px !important;
			}
		}
	}
}

/* Product Single - Carousel Arrows */
.woocommerce-product-gallery {
	position: relative;

	& .woocommerce-product-gallery__image {
		background-color: rgb(0 0 0 / 0.08);
	}

	& .flex-direction-nav {
		list-style: none;
		left: 0;
		margin: 0;
		/* position: absolute; */
		/* top: 0; */
		/* width: 100%; */
		background-color: rgb(0 0 0 / 0.08);

		& .flex-nav-prev,
		& .flex-nav-next {
			position: absolute;
			height: 32px;
			top: calc(0.5 * (100% - 20px - (104 / 1043.97 * 100%) - 10px));
			transform: translateY(-50%) translateY(calc(-1 * 0.5 * 26px));
			width: 32px;
		}

		& .flex-nav-prev {
			left: 15px;
		}

		& .flex-nav-next {
			right: 15px;
		}

		& .flex-nav-prev .flex-prev,
		& .flex-nav-next .flex-next {
			background: no-repeat 0 0;
			background-image: url('/wp-content/plugins/wonderplugin-slider/engine/arrows-32-32-0.png');
			cursor: pointer;
			display: block;
			height: 32px;
			overflow: hidden;
			position: absolute;
			text-indent: 100%;
			white-space: nowrap;
			width: 32px;

			&:focus:not(:focus-visible) {
				outline: none;
			}
		}

		& .flex-nav-prev .flex-prev {
			background-position: left 0;

			&:hover {
				background-position: left bottom;
			}
		}

		& .flex-nav-next .flex-next {
			background-position: right 0;

			&:hover {
				background-position: right bottom;
			}
		}
	}
}