/**
 * 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;
	overflow-anchor: none;
}

.wcag-gallery-ui__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}

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

.wcag-gallery-ui__image,
.wcag-gallery-ui img.wp-post-image {
	position: absolute !important;
	inset: 0;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
}

.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;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 48px;
	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: 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: 12px;
	transform: translateY(-50%);
}

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

.wcag-gallery-ui__nav--next {
	right: 12px;
	transform: translateY(-50%);
}

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

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

.wcag-gallery-ui__thumbs::-webkit-scrollbar {
	display: none;
}

.wcag-gallery-ui__thumbs li {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	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: 100px !important;
	height: 100px !important;
	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: 100px !important;
	height: 100px !important;
	max-width: 100px !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	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: nowrap !important;
	gap: 8px;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	visibility: visible !important;
	opacity: 1 !important;
	height: 100px !important;
}

.woocommerce-product-gallery.wcag-active .flex-control-thumbs::-webkit-scrollbar,
.woocommerce-product-gallery .flex-control-thumbs.wcag-thumbs::-webkit-scrollbar {
	display: none;
}

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

.woocommerce-product-gallery.wcag-active .flex-control-thumbs img {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: cover;
	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;
}