/* =========================================================================
   Defib24 Child ES — winkel-UI
   Hoort bij inc/shop-ui.php
   1. Compatibiliteitsregel
   2. Levertijdregel
   3. Vastgezette koopbalk (mobiel)
   4. Knoppenblok in productlijsten
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Compatibiliteitsregel
   ---------------------------------------------------------------------- */
.d24-compat{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:.35em .6em;
	margin:.35em 0 .9em;
	padding:0;
	font-size:.95rem;
	line-height:1.45;
	color:#1A1A2E;
}
.d24-compat-check{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:1.25em;
	height:1.25em;
	flex:0 0 auto;
	border-radius:50%;
	background:#00A651;
	color:#fff;
	font-size:.75em;
	font-weight:700;
	line-height:1;
}
.d24-compat-text strong{ color:#1A3A7C; }
.d24-compat-link{
	font-size:.85rem;
	color:#3366CC;
	text-decoration:underline;
	text-underline-offset:2px;
}
.d24-compat-link:hover{ color:#1A3A7C; }

@media (max-width:767px){
	.d24-compat{ font-size:.9rem; margin:.3em 0 .7em; }
	.d24-compat-link{ flex-basis:100%; }
}

/* -------------------------------------------------------------------------
   2. Levertijdregel
   ---------------------------------------------------------------------- */
.d24-levertijd{
	display:flex;
	align-items:flex-start;
	gap:.55em;
	margin:.2em 0 1em;
	padding:.7em .9em;
	border-left:3px solid #00A651;
	background:#F5F7FA;
	font-size:.95rem;
	line-height:1.4;
	color:#1A1A2E;
}
.d24-levertijd-icoon{
	color:#00A651;
	font-weight:700;
	line-height:1.4;
}
.d24-levertijd-sub{
	display:block;
	margin-top:.15em;
	font-size:.85rem;
	color:#6B7280;
}

@media (max-width:767px){
	.d24-levertijd{ font-size:.9rem; padding:.6em .75em; }
}

/* -------------------------------------------------------------------------
   3. Vastgezette koopbalk (alleen mobiel)
   ---------------------------------------------------------------------- */
.d24-sticky-cart{ display:none; }

@media (max-width:767px){
	.d24-sticky-cart{
		display:flex;
		align-items:center;
		gap:.75em;
		position:fixed;
		left:0;
		right:0;
		bottom:0;
		z-index:9998;
		padding:.6em .8em calc(.6em + env(safe-area-inset-bottom));
		background:#fff;
		border-top:1px solid #E5E7EB;
		box-shadow:0 -2px 12px rgba(26,58,124,.12);
		transform:translateY(110%);
		transition:transform .18s ease-out;
	}
	.d24-sticky-cart.is-visible{ transform:translateY(0); }
	.d24-sticky-cart[hidden]{ display:none; }

	/* --- v3.10.1 --------------------------------------------------------
	   De chatwidget van Zoho SalesIQ staat vast rechtsonder (knop 55x55 op
	   10px van rechts/onder, met de begroetingsbubbel van 208x60 ernaast).
	   Op een telefoon beslaat dat samen ruim tweederde van de schermbreedte
	   en valt het precies over de knop "Anadir al carrito" in de koopbalk.
	   De wrapper van Zoho heeft z-index 2147483647, dus die wint altijd.
	   Daarom schuiven we de chatwidget omhoog zodra de koopbalk verschijnt,
	   in plaats van aan de z-index van de koopbalk te sleutelen.
	   -------------------------------------------------------------------- */
	#zsiq_float{
		transition:bottom .18s ease-out;
	}

	body.d24-cart-bar-open #zsiq_float{
		bottom:var(--d24-cart-bar-h,68px) !important;
	}

	.d24-sticky-cart-info{
		display:flex;
		flex-direction:column;
		min-width:0;
		flex:1 1 auto;
		line-height:1.25;
	}
	.d24-sticky-cart-title{
		font-size:.8rem;
		color:#6B7280;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.d24-sticky-cart-price{
		font-size:1rem;
		font-weight:700;
		color:#1A3A7C;
	}
	.d24-sticky-cart-price del{ display:none; }
	.d24-sticky-cart-price ins{ text-decoration:none; }

	.d24-sticky-cart-btn{
		flex:0 0 auto;
		padding:.75em 1.2em;
		border:0;
		border-radius:8px;
		background:#E2192B;
		color:#fff;
		font-size:.95rem;
		font-weight:700;
		line-height:1;
		cursor:pointer;
	}
	.d24-sticky-cart-btn:active{ background:#C8101E; }
}

/* -------------------------------------------------------------------------
   4. Knoppenblok in productlijsten — uit de hover-overlay
   Kadence zet .product-action-wrap absoluut met opacity 0. Met twee knoppen
   (winkelwagen + offerte) overlapt dat de kaart, en op aanraakschermen is er
   geen hover, waardoor de knoppen daar onbereikbaar zijn.
   ---------------------------------------------------------------------- */
.woocommerce ul.products.woo-archive-action-on-hover li.product .product-action-wrap,
.woocommerce ul.products li.product .product-action-wrap{
	position:static !important;
	bottom:auto !important;
	left:auto !important;
	right:auto !important;
	width:auto !important;
	opacity:1 !important;
	padding:0 !important;
	margin-top:auto !important;
	padding-top:.9em !important;
	transition:none !important;
	display:flex !important;
	flex-direction:column !important;
	gap:.5em !important;
	align-items:stretch !important;
}

.woocommerce ul.products li.product .product-details{
	display:flex !important;
	flex-direction:column !important;
}

.woocommerce ul.products li.product .product-action-wrap > *{
	width:100% !important;
	margin:0 !important;
}

.woocommerce ul.products li.product .product-action-wrap .screen-reader-text,
.woocommerce ul.products li.product .product-action-wrap .gtm4wp_productdata{
	width:auto !important;
}

.woocommerce ul.products li.product .product-action-wrap .add_to_cart_button{
	display:block !important;
	text-align:center !important;
	background:#E2192B !important;
	color:#fff !important;
	border:0 !important;
	border-radius:8px !important;
	padding:.5em .8em !important;
	font-size:.8rem !important;
	font-weight:700 !important;
	line-height:1.6 !important;
	text-decoration:none !important;
}
.woocommerce ul.products li.product .product-action-wrap .add_to_cart_button:hover,
.woocommerce ul.products li.product .product-action-wrap .add_to_cart_button:focus{
	background:#C8101E !important;
	color:#fff !important;
}

.woocommerce ul.products li.product .product-action-wrap .wpb-get-a-quote-button-btn{
	justify-content:center !important;
}

@media (max-width:767px){
	.woocommerce ul.products li.product .product-action-wrap{
		gap:.4em !important;
		padding-top:.7em !important;
	}
	.woocommerce ul.products li.product .product-action-wrap .add_to_cart_button,
	.woocommerce ul.products li.product .product-action-wrap .wpb-get-a-quote-button-btn{
		font-size:.85rem !important;
		padding:.7em .6em !important;
	}
}