/* Flat, solid floater rim with a shadowed canvas gap. */
.woocommerce-product-gallery.art-frame-maker--active .woocommerce-product-gallery__image:first-child > a {
	position: relative;
	display: block;
	box-sizing: border-box;
	--art-frame-width: calc(clamp(12px, 1.8vw, 20px) * 2 / 3);
	--art-frame-gap: clamp(5px, 0.7vw, 8px);
	margin: 4px;
	padding: var(--art-frame-gap);
	border-width: var(--art-frame-width) !important;
	border-style: solid !important;
	border-color: var(--art-frame-color) !important;
	border-image: none !important;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.18), transparent 55%) top / 100% var(--art-frame-gap) no-repeat padding-box,
		linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent 55%) left / var(--art-frame-gap) 100% no-repeat padding-box,
		linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent 50%) right / var(--art-frame-gap) 100% no-repeat padding-box,
		linear-gradient(to top, rgba(0, 0, 0, 0.06), transparent 50%) bottom / 100% var(--art-frame-gap) no-repeat padding-box,
		linear-gradient(var(--art-frame-recess-color), var(--art-frame-recess-color)) padding-box !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.woocommerce-product-gallery.art-frame-maker--active .woocommerce-product-gallery__image:first-child > a > img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.45);
}

/* WooCommerce's zoom overlay uses the unframed image and would cover the rim. */
.woocommerce-product-gallery.art-frame-maker--active .woocommerce-product-gallery__image:first-child .zoomImg {
	display: none !important;
}

.woocommerce-product-gallery .art-frame-maker__artwork {
	display: none;
}

.woocommerce-product-gallery.art-frame-maker--active .woocommerce-product-gallery__image:first-child > a.art-frame-maker--transparent > img {
	display: none !important;
}

.woocommerce-product-gallery.art-frame-maker--active .art-frame-maker__artwork {
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
	box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.45);
}

.woocommerce-product-gallery .art-frame-maker__artwork > img {
	position: absolute;
	display: block;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	object-fit: fill;
}

/* The recessed band stays in the frame's color family, with shadow for depth. */
.woocommerce-product-gallery.art-frame-maker--black {
	--art-frame-color: #202020;
	--art-frame-highlight: #454545;
	--art-frame-shade: #090909;
	--art-frame-recess-color: #4c4c4c;
}

/* Give the black finish enough edge contrast to reveal the floating gap. */
.woocommerce-product-gallery.art-frame-maker--active.art-frame-maker--black .woocommerce-product-gallery__image:first-child > a {
	box-shadow:
		inset 1px 1px 0 rgba(255, 255, 255, 0.14),
		inset -1px -1px 0 rgba(0, 0, 0, 0.45),
		0 2px 4px rgba(0, 0, 0, 0.2);
}
.woocommerce-product-gallery.art-frame-maker--white {
	--art-frame-color: #ffffff;
	--art-frame-highlight: #ffffff;
	--art-frame-shade: #b9b9b5;
	--art-frame-recess-color: #b5b5b0;
}
.woocommerce-product-gallery.art-frame-maker--grey {
	--art-frame-color: #808080;
	--art-frame-highlight: #a9a9a9;
	--art-frame-shade: #494949;
	--art-frame-recess-color: #535353;
}
.woocommerce-product-gallery.art-frame-maker--silver {
	--art-frame-color: #c0c0c0;
	--art-frame-highlight: #f3f4f5;
	--art-frame-shade: #777c80;
	--art-frame-recess-color: #7a7e81;
}
.woocommerce-product-gallery.art-frame-maker--gold {
	--art-frame-color: #d4af37;
	--art-frame-highlight: #f5dc85;
	--art-frame-shade: #8b651f;
	--art-frame-recess-color: #8c7025;
}