/*
 Theme Name:  Divi Child Theme
 Description:  Child Theme for Divi
 Template:     Divi
*/

/*****Add any custom CSS below this line*****/

/* ============================================================
   Upperbay frame-swap overlay — ported from legacy UpperBay Frame
   child theme (fgd). The WC variation gallery swaps the frame
   itself; #output is the art piece layered inside the mat.

   Positioning uses center-anchored translate so it adapts to any
   frame image and any column width. Per-product tweaks can adjust
   width/height or nudge via translate offsets.
   ============================================================ */

.single-product .woocommerce-product-gallery .bgimage {
	position: relative;
	display: inline-block;
	max-width: 100%;
	overflow: visible;
	vertical-align: top;
}

.single-product .woocommerce-product-gallery .bgimage .woocommerce-product-gallery__wrapper {
	position: relative;
	display: inline-block;
	margin: 0;
}

.single-product .woocommerce-product-gallery .bgimage .woocommerce-product-gallery__wrapper a,
.single-product .woocommerce-product-gallery .bgimage .woocommerce-product-gallery__wrapper > img {
	display: block;
}

.single-product .woocommerce-product-gallery .bgimage .woocommerce-product-gallery__wrapper a img,
.single-product .woocommerce-product-gallery .bgimage .woocommerce-product-gallery__wrapper > img {
	max-width: 100%;
	width: auto;
	height: auto;
	border: 0;
	z-index: 4;
	position: relative;
}

/* Art overlay — centered in the frame, sized to fit the mat window.
   Tune width/height for each frame type; per-product overrides below. */
#output {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 88%;
	height: auto;
	max-width: none;
	max-height: 88%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	z-index: 5;
	display: block;
	pointer-events: none;
}

/* Per-product tweaks: adjust width/height (and optional translate
   nudges) if a frame image has an off-center mat window. */
.postid-3654 #output,
.postid-3148 #output {
	width: 72%;
	max-height: 70%;
}

.product-4204 #output {
	width: 54%;
	max-height: 85%;
	object-fit: contain;
	padding: 5px;
}

/* Hide the overlay once a variation is selected on products whose
   variation images are pre-composed frame+art. */
div#product-3654 .woocommerce-variation-add-to-cart #output,
div#product-3148 .woocommerce-variation-add-to-cart #output,
div#product-3996 .woocommerce-variation-add-to-cart #output {
	display: none !important;
}