/**
 * Watch Configurator Bridge — product page layout (gallery slot).
 *
 * Nutreko / WC: fill the full product-images column; use a taller viewport-based
 * iframe so the embedded UI (3D + option grids) needs less internal scrolling.
 */

.wcb-configurator-wrap {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

/* Replaces WC gallery: span entire images column (avoid 36rem cap on wide layouts) */
.wcb-as-product-images {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

/* Allow content to extend — some themes clip div.images */
body.wcb-replaces-product-gallery.single-product div.product div.images {
	overflow: visible;
	max-height: none;
}

/*
 * Nutreko (and similar): images + summary live inside .content-single-wrapper; tabs are a *sibling*
 * below. A 2-column grid on div.product wrongly pairs [wrapper+tabs] and shoves tabs beside the
 * product row — three cramped columns. Apply the balance only to .content-single-wrapper.
 */
@media (min-width: 992px) {
	body.wcb-replaces-product-gallery.single-product div.product .content-single-wrapper {
		display: grid !important;
		grid-template-columns: minmax(260px, min(52%, 720px)) minmax(300px, 1fr);
		column-gap: clamp(1rem, 2.2vw, 1.75rem);
		align-items: start;
	}

	body.wcb-replaces-product-gallery.single-product div.product .content-single-wrapper::after {
		content: none !important;
		display: none !important;
	}

	body.wcb-replaces-product-gallery.single-product div.product .content-single-wrapper div.images,
	body.wcb-replaces-product-gallery.single-product div.product .content-single-wrapper .summary.entry-summary {
		width: 100% !important;
		max-width: none !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	body.wcb-replaces-product-gallery.single-product div.product .content-single-wrapper .summary.entry-summary {
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-left: none !important;
	}
}

/*
 * Inline height on the iframe is overridden here so older shortcodes / caches
 * still get a usable min-height. !important beats inline width/height.
 */
.wcb-as-product-images .wcb-configurator-iframe,
.wcb-layout-gallery .wcb-configurator-iframe {
	width: 100% !important;
	max-width: 100% !important;
	height: min(92vh, 1080px) !important;
	min-height: min(85vh, 960px) !important;
	background: #f6f6f6;
}

/* Shortcode placed in summary / other areas */
.wcb-auto-embed {
	max-width: min(100%, 48rem);
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.wcb-auto-embed .wcb-configurator-iframe {
	width: 100% !important;
	height: min(88vh, 1000px) !important;
	min-height: min(78vh, 820px) !important;
}

@media (max-width: 767px) {
	.wcb-as-product-images .wcb-configurator-iframe,
	.wcb-layout-gallery .wcb-configurator-iframe {
		height: min(88vh, 1020px) !important;
		min-height: min(75vh, 720px) !important;
	}

	.wcb-auto-embed .wcb-configurator-iframe {
		height: min(85vh, 960px) !important;
		min-height: min(70vh, 640px) !important;
	}
}

/* Elementor shortcode column */
.elementor-widget-shortcode .wcb-as-product-images {
	max-width: 100%;
}

/* Cart / mini-cart: configurator-rendered preview */
.woocommerce img.wcb-cart-thumb {
	border-radius: 4px;
}