/* Vendor compatibility boundary.
 * Keep !important here only when a third-party inline/generated rule requires it.
 * Theme-owned components must not add new !important declarations outside this file.
 */
.kiddee-product-archive-hero.has-kiddee-dynamic-spacing {
	margin-bottom: var(--kiddee-catalogue-hero-margin-bottom) !important;
}

/* Typography is intentionally not forced here. Elementor widgets may use a
 * heading widget for body-copy semantics; component owners and typography.css
 * must remain able to choose the correct role without an important override. */

/* WooCommerce initializes product galleries at opacity 0 before its script runs.
 * Keep the first product image visible without making the theme layout itself
 * depend on an inline critical-style owner. */
body.single-product.woocommerce #page .woocommerce-product-gallery {
	opacity: 1 !important;
	transition: none !important;
}

/* YITH forces request-quote links to 1.2rem with !important. Product Action
 * geometry/typography stays component-owned; only this vendor conflict lives here.
 * The shared product-action font token follows the visible LINE CTA per breakpoint. */
body.single-product.woocommerce #page .kiddee-single-product :is(
	.add-request-quote-button.button,
	.yith_ywraq_add_item_browse_message a
) {
	font-size: var(--kv2-product-action-font-size) !important;
	background-color: var(--kv2-kiddee-quote-purple) !important;
	color: var(--kv2-color-on-dark) !important;
}

:where(html:not([data-kiddee-input="touch"])) body.single-product.woocommerce #page .kiddee-single-product :is(
	.add-request-quote-button.button,
	.yith_ywraq_add_item_browse_message a
):hover{
	background-color: color-mix(in srgb, var(--kv2-kiddee-quote-purple) 86%, var(--kv2-airbnb-ink)) !important;
	color: var(--kv2-color-on-dark) !important;
}

/* Elementor's saved Home project-carousel CSS forces legacy blue navigation
 * with !important. Keep the exception scoped to the semantic project widget. */
body.home #page .kiddee-document-home .kiddee-bind-b054943 .elementor-swiper-button {
	background-color: var(--kv2-carousel-nav-background) !important;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--kv2-carousel-nav-background) 22%, transparent) !important;
}

:where(html:not([data-kiddee-input="touch"])) body.home #page .kiddee-document-home .kiddee-bind-b054943 .elementor-swiper-button:hover{
	background-color: var(--kv2-carousel-nav-background-hover) !important;
}

/* Elementor's saved Project Portfolio overlay carries a legacy blue gradient.
 * Consume the component's touch gradient; desktop retains its transparent base. */
body.home #page .kiddee-document-home .kiddee-bind-b054943 .elementor-carousel-image-overlay {
	background: var(--kiddee-portfolio-overlay-background, transparent);
}