#wooswipe {
	position: relative;
	padding-bottom: 20px;
	max-width: 100%;
	box-sizing: border-box;
}

/*
 * Classic WooCommerce templates use `.images { float:left; width:48% }` beside
 * `.summary`. Do not set width/float on #wooswipe globally — an ID + 100%
 * (especially with !important) makes the gallery full-width and stacks the
 * product summary below it.
 *
 * Block themes already put the gallery in a column, so restore 100% there only.
 */
body.wooswipe-block-gallery #wooswipe, .wp-block-woocommerce-product-image-gallery #wooswipe {
	float: none !important;
	width: 100% !important;
	margin: 0 0 1em;
}

#wooswipe .single-product-main-image, #wooswipe .woocommerce-product-gallery__image, #wooswipe .single-product-main-image-wrap {
	width: 100%;
	max-width: 100%;
	display: block;
}

#wooswipe .single-product-main-image img, #wooswipe .wp-post-image, #wooswipe .single-product-main-image-ul img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

#wooswipe .wooswipe-pinit {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 25px;
	height: 25px;
	z-index: 9;
}

#wooswipe .thumbnails {
	list-style: none;
	height: 100px;
	overflow: hidden;
	max-height: 100%;
	padding: 0;
	margin-bottom: 20px;
	width: 100%;
}

#wooswipe .thumbnails .thumb, #wooswipe .thumbnails .thumb img {
	max-width: 100%;
	height: auto;
	display: block;
}

#wooswipe .thumbnail-nav {
	width: 100%;
}

#wooswipe .thumbnail-nav .slick-slide {
	padding: 0 4px;
	box-sizing: border-box;
}

#wooswipe .thumbnail-nav .slick-slide img {
	width: 100%;
	height: auto;
	object-fit: cover;
	max-height: 100px;
}

body.elementor #wooswipe .thumbnails, body.elementor-page #wooswipe .thumbnails, body.theme-hello-elementor #wooswipe .thumbnails {
	height: auto;
}

/* Fix for some themes */
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
	width: 100%;
}

#wooswipe div.single-product-main-image a:hover {
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}

#wooswipe li.slick-slide div.single-product-main-image a:hover {
	cursor: default;
}

#wooswipe .single-product-main-image-wrap .single-product-main-image {
	margin-inline-end: 0px;
	padding-inline-start: 0px !important;
	margin-left: 0px;
	margin-right: 0px;
}

button.wooswipe-prev {
	left: 0;
}

button.wooswipe-prev.slick-arrow.slick-disabled, button.wooswipe-next.slick-arrow.slick-disabled {
	cursor: not-allowed;
}

button.wooswipe-prev.slick-disabled svg, button.wooswipe-next.slick-disabled svg {
	opacity: .6;
}

button.wooswipe-next.slick-arrow {
	right: 0;
}

button.wooswipe-next.slick-arrow, button.wooswipe-prev.slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
	line-height: 0;
	display: block;
	cursor: pointer;
	z-index: 999;
}

button.wooswipe-next.slick-arrow svg, button.wooswipe-prev.slick-arrow svg {
	display: block;
	vertical-align: middle;
}

.single-product-main-image button.wooswipe-prev.slick-arrow {
	left: 40px;
}

.single-product-main-image button.wooswipe-next.slick-arrow {
	right: 40px;
}

/* Vertically center thumbnail arrows (was incorrectly top: 35%) */
#wooswipe .thumbnail-nav button.wooswipe-next.slick-arrow, #wooswipe .thumbnail-nav button.wooswipe-prev.slick-arrow {
	top: 50%;
	transform: translateY(-50%);
}

#wooswipe .wooswipe-pinit.wooswipe-mainimagepin {
	position: absolute;
	top: 25px;
	left: 35px;
	width: 25px;
	height: 25px;
	z-index: 9;
}

.wooswipe-popup {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 25px;
	height: 25px;
}

#wooswipe .wooswipe-popup.wooswipe-mainimagepopup {
	position: absolute;
	display: block;
	top: 25px;
	right: 35px;
	width: 25px;
	height: 25px;
	z-index: 9;
}

#wooswipe .wooswipe-popup.wooswipe-mainimagepopup.light-icon img {
	filter: invert(1);
}

.site a.wooswipe-mainimagepopup:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
	outline: unset !important;
	text-decoration: unset !important;
	text-decoration-skip-ink: none !important;
	background: transparent !important;
}

.site a.wooswipe-mainimagepopup:focus:not(.wp-block-button__link):not(.wp-block-file__button) img {
	outline: unset !important;
}

#wooswipe .slick-prev.light-icon:before, #wooswipe .slick-next.light-icon:before {
	filter: invert(1);
}

#wooswipe .woocommerce-main-image {
	cursor: default;
}