/*
 * Gebruik zoveel mogelijk nested CSS
 * Meer informatie: https://www.w3schools.com/cssref/sel_nesting.php
 */

.facetwp-facet {
    margin-bottom: 0px !important;
}


.aw-qty-btn-wrapper .aw-qty-btn-wrapper-right button, .aw-qty-btn-wrapper .aw-view-product-btn, body.woocommerce-cart .btn, body.woocommerce-cart .btn-primary, .woocommerce-cart .coupon button.button, .facetwp-reset {
	background-color: #31B3D6 !important;
	border-width: 0px !important;
	color: #fff;
}


.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
	color: #31B3D6 !important;
}


@media (max-width: 600px) {


	.aw-qty-btn-wrapper .aw-qty-btn-wrapper-left {
			min-width: 40px !important;

	}
	.aw-view-product-btn {
		display:none !important;
	}
.usp_list	span.elementor-icon-list-text {
		padding-left: 0px !important;
	}
	  
}

.aw-qty-btn-wrapper .aw-qty-btn-wrapper-left input[type="number"] {
    padding: 0 6px 0 6px;
}


.aw-qty-btn-wrapper {
	margin-top: 0px;
}


.row.wc-proceed-to-checkout a.btn {
	color: #fff !important;
}


body.woocommerce-checkout .awcc-step.completed {
    background: #044a76 !important;
}


html body.woocommerce-checkout .btn, 
html body.woocommerce-checkout button,
html body.woocommerce-checkout .btn-primary {
	    background-color: #044a76 !important;
	color: #fff !important;
	border: 0px !important;
}



.elementor-menu-cart__footer-buttons {
    display: flex;
    flex-direction: column;
}



.elementor-widget-woocommerce-menu-cart .elementor-menu-cart__product-name a {
	color: #31B3D6;
}

.elementor-menu-cart__subtotal {
    font-weight: 400;
}


a.elementor-button.elementor-button--view-cart.elementor-size-md {
    background: #31B3D6;
}

a.elementor-button.elementor-button--checkout.elementor-size-md {
	background: #3D9F92;
}


.elementor-nav-menu .sub-arrow {
    padding-left: 0px;
}


.aw-qty-btn-wrapper .aw-qty-btn-wrapper-right button, .aw-qty-btn-wrapper .aw-view-product-btn, body.woocommerce-cart .btn, body.woocommerce-cart .btn-primary, .woocommerce-cart .coupon button.button {
	border: 0px !important;
}

.aw-qty-btn-wrapper .aw-qty-btn-wrapper-right button:hover:not(:disabled):not(.aw-error-state), body div .view-cart-button:hover, a.aw-view-product-btn:hover, button.aw-view-cart-btn:hover, body.woocommerce-cart .btn:hover, body.woocommerce-cart .btn-primary:hover, .woocommerce-cart .coupon button.button:hover {
	border: 0px !important;
	background: #044A76 !important;
	color: #fff !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
	z-index: 95;
}

.woocommerce h2 {
	margin-bottom: 0px !important;
	color: #044a76;
}

.woocommerce  {
	font-family: "Montserrat";
}




.e-shop-table.e-cart-section,
.e-cart-totals.e-cart-section{
    border: 0px;
    padding: 0px;
}


/* =========================================================
   Checkout: betaalmethode-kaart.

   AWCC zet de <li> op flex met de uitleg op flex-basis 100%, maar flex-wrap
   komt in deze combinatie (Elementor-checkoutwidget) niet aan. Daardoor stonden
   de naam en de uitleg naast elkaar, kromp het label naar 0 breed en viel
   "Bankoverschrijving" letter voor letter onder elkaar. Wrap afdwingen zet de
   naam op regel 1 en de uitleg eronder.

   Dit is een AWCC-brede fout; zolang die niet in de plugin zit, staat de
   reparatie hier.
   ========================================================= */

.awcc-accordion .awcc-block--payment .wc_payment_methods li.wc_payment_method {
    flex-wrap: wrap !important;
}

.awcc-accordion .awcc-block--payment .wc_payment_methods li.wc_payment_method > label {
    flex: 1 1 auto !important;
    min-width: 50% !important;
    color: #044A76 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.awcc-accordion .awcc-block--payment .wc_payment_methods li.wc_payment_method > .payment_box {
    flex: 0 0 100% !important;
}

/* Bankicoon voor de naam. Nodig omdat WooCommerce het keuzerondje verbergt
   zodra er maar één betaalmethode is — zonder icoon is de kaart kale tekst. */
.awcc-accordion .awcc-block--payment .wc_payment_methods li.wc_payment_method > label::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-160v-366q-25-11-42.5-33t-17.5-51v-60l60-250h600l60 250v60q0 29-17.5 51T800-526v366h-80v-240H520v240H200Zm80-80h160v-160H280v160Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-160v-366q-25-11-42.5-33t-17.5-51v-60l60-250h600l60 250v60q0 29-17.5 51T800-526v366h-80v-240H520v240H200Zm80-80h160v-160H280v160Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Een betaalmethode met een eigen logo heeft het bankicoon niet nodig. */
.awcc-accordion .awcc-block--payment .wc_payment_methods li.wc_payment_method > label:has(img)::before {
    display: none;
}


/* Groothandel Peeters: knoppen groen in plaats van lichtblauw (29 sep 2026), zodat de site zich onderscheidt van
 * Peeters Hygiëne. Zelfde groen als "Toevoegen aan winkelwagen" op de productpagina. Tabbladen, links, het
 * accounticoon in de header (widget 3e135ae, transparant) en de knop "Bijwerken" in de winkelwagen blijven zoals ze zijn. */
.elementor-widget-button:not(.elementor-element-3e135ae) .elementor-button,
.elementor-widget-form .elementor-button,
.elementor-button.elementor-button--view-cart,
.aw-qty-btn-wrapper .aw-qty-btn-wrapper-right button,
.aw-add-to-cart-btn,
.aw-qty-btn-wrapper .aw-view-product-btn,
.facetwp-reset,
body.woocommerce-cart .btn,
body.woocommerce-cart .btn-primary,
.woocommerce-cart .coupon button.button {
	background-color: #3D9F92 !important;

	&:hover,
	&:focus-visible {
		background-color: #338577 !important;
	}
}