/* Fix: on the product page, the image-gallery column and the calculator/summary
   column sit in an Elementor flex row with default align-items: stretch, which
   stretches the (shorter) image column down to match the (taller) calculator
   column -- leaving a large blank gap below the product images. Forcing the
   flex item that contains the gallery to align to the top removes the stretch,
   but on its own that still leaves a plain blank gap next to the gallery once
   the page is scrolled past the (shorter) images, because the calculator
   column keeps going. Making the gallery STICK in place while the user scrolls
   past it removes that dead space entirely -- same pattern most print/e-comm
   sites use (Vistaprint, Sinalite, etc.) for a tall configurator next to
   product images. `top: 100px` clears the site's sticky header so the images
   don't get hidden behind it. Targets both the specific saved-template
   element ID and, as a robust fallback if Elementor regenerates that ID, any
   flex item that contains the WooCommerce gallery. Scoped to
   min-width: 768px (Elementor's own tablet-up breakpoint, where the
   gallery column switches to a 41.4% side-by-side width) because
   below that the row wraps to a single stacked column -- applying
   sticky there would pin the images on screen and float them over
   the calculator/description as the visitor scrolls a phone. */
@media (min-width: 768px) {
	.elementor-element-9e58e18,
	.e-con.e-child:has( .woocommerce-product-gallery ) {
		align-self: flex-start !important;
		position: sticky !important;
		top: 100px !important;
	}
}

.dbk-calculator {
	background: #f0f0f0;
	padding: 20px;
	border-radius: 4px;
	max-width: 420px;
}

.dbk-field {
	margin-bottom: 14px;
}

.dbk-field label {
	display: block;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #555;
	margin-bottom: 6px;
}

.dbk-field select,
.dbk-field input[type="number"] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	font-size: 14px;
}

.dbk-field select:disabled {
	background: #f7f7f7;
	color: #666;
}

.dbk-quote-notice {
	background: #fff4e5;
	border: 1px solid #f0b849;
	border-radius: 4px;
	padding: 16px;
	text-align: center;
	margin-top: 10px;
}

.dbk-quote-notice p {
	margin: 0 0 10px;
	font-weight: 600;
	color: #8a5b00;
}

.dbk-quote-btn {
	display: inline-block;
	background: #d9534f;
	color: #fff;
	padding: 10px 20px;
	border-radius: 3px;
	text-decoration: none;
	font-weight: 700;
}

.dbk-quote-btn:hover {
	background: #c9302c;
	color: #fff;
}

.dbk-price-box {
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 16px;
	margin-top: 10px;
}

.dbk-price-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 14px;
}

.dbk-price-total {
	font-size: 20px;
	font-weight: 700;
	border-top: 1px solid #eee;
	margin-top: 8px;
	padding-top: 10px;
}

.dbk-add-to-cart-btn {
	width: 100%;
	margin-top: 14px;
	padding: 14px;
	background: #2c7be5;
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.dbk-add-to-cart-btn:hover {
	background: #1a68d1;
}

.dbk-add-to-cart-btn:disabled {
	background: #9bb8e0;
	cursor: not-allowed;
}

.dbk-cart-message {
	margin-top: 10px;
	font-weight: 600;
	text-align: center;
}