/**
 * Self-contained attribute gallery (main image + thumbs + slider).
 * Used when the theme has no WooCommerce product gallery widget.
 */

.wcag-host {
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
}

.wcag-gallery-ui {
	display: block !important;
	width: 100%;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative;
}

.wcag-gallery-ui__stage {
	position: relative;
	width: 100%;
}

.wcag-gallery-ui__link {
	display: block;
	line-height: 0;
}

.wcag-gallery-ui__image,
.wcag-gallery-ui img.wp-post-image {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain;
}

.wcag-gallery-ui button,
.wcag-gallery-ui button:hover,
.wcag-gallery-ui button:focus,
.wcag-gallery-ui button:active,
.wcag-gallery-ui button:visited {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	color: #000 !important;
}

.wcag-gallery-ui img,
.wcag-gallery-ui a {
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.wcag-gallery-ui__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 24px;
	height: 24px;
	margin-top: -12px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	color: #000 !important;
}

.wcag-gallery-ui__nav:hover,
.wcag-gallery-ui__nav:focus,
.wcag-gallery-ui__nav:active {
	color: #000 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 1;
}

.wcag-gallery-ui__nav::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 6px auto 0;
	border: 0;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	background: none;
}

.wcag-gallery-ui__nav:hover::before,
.wcag-gallery-ui__nav:focus::before,
.wcag-gallery-ui__nav:active::before {
	border-top-color: #000;
	border-right-color: #000;
}

.wcag-gallery-ui__nav--prev {
	left: 8px;
}

.wcag-gallery-ui__nav--prev::before {
	margin-left: 8px;
	transform: rotate(-135deg);
}

.wcag-gallery-ui__nav--next {
	right: 8px;
}

.wcag-gallery-ui__nav--next::before {
	margin-left: 4px;
	transform: rotate(45deg);
}

.wcag-gallery-ui__thumbs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
	overflow: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	width: 100%;
}

.wcag-gallery-ui__thumbs li {
	flex: 0 0 calc(25% - 6px);
	width: calc(25% - 6px);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.wcag-gallery-ui__thumb,
.wcag-gallery-ui__thumb:hover,
.wcag-gallery-ui__thumb:focus,
.wcag-gallery-ui__thumb:active {
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0;
	opacity: 0.55;
	color: inherit !important;
}

.wcag-gallery-ui__thumb img,
.wcag-gallery-ui__thumb:hover img,
.wcag-gallery-ui__thumb:focus img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	aspect-ratio: 1;
	object-fit: cover;
}

.wcag-gallery-ui__thumb.is-active {
	opacity: 1;
}

.woocommerce-product-gallery.wcag-active {
	opacity: 1 !important;
	overflow: visible !important;
	height: auto !important;
}

.woocommerce-product-gallery.wcag-active .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs.wcag-thumbs {
	display: flex !important;
	flex-wrap: wrap;
	overflow: visible;
	margin: 0;
	padding: 0;
	list-style: none;
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
}

.woocommerce-product-gallery .flex-control-thumbs.wcag-thumbs li,
.woocommerce-product-gallery.wcag-active .flex-control-thumbs li {
	float: none;
	width: 25%;
	margin: 0;
	padding: 5px 5px 0 0;
	list-style: none;
	cursor: pointer;
}

.woocommerce-product-gallery.wcag-active .flex-control-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.5;
	cursor: pointer;
}

.woocommerce-product-gallery.wcag-active .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery.wcag-active .flex-control-thumbs img:hover {
	opacity: 1;
}