.woocommerce {
	font-family: "Montserrat", sans-serif;
	color: #323232;
}
.woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal {
	font-size: 20px;
	font-weight: 600;
	color: #323232;
}
.woocommerce-cart .cart-collaterals .cart_totals table {
	border-collapse: collapse;
}
.woocommerce-cart .cart-collaterals .cart_totals table tr:not(:last-child) {
	border-bottom: 1px #CDE5F7 solid;
}
a.mfn-woo-cart-link {
	background-color: #CDE5F7;
	border-radius: 3px;
	color: #76AAD2;
	display: block;
    padding: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}
a.mfn-woo-cart-link:hover {
	background-color: #76AAD2;
	color: #fff;
	text-decoration: none;
}
.woocommerce .cart .button {
	float: left;
	background: #76AAD2 !important;
	color: #fff !important;
}
.woocommerce .cart .button:disabled,
.woocommerce .cart .button:disabled:hover {
	background-color: #CDE5F7 !important;
	color: #76AAD2 !important;
}
.woocommerce .ywgc_have_code,
.woocommerce-notices-wrapper .woocommerce-info {
	display: none;
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border: 0.5px #101010 solid !important;
	padding: 10px;
}
.select2-container--default .select2-selection--single {
	padding: 0 10px;
}
.woocommerce-checkout #payment ul.payment_methods li.active-payment {
	border-color: #76AAD2;
}
.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .mfn-payment-check {
	background-color: #76AAD2;
}
.mcb-section .mcb-wrap .button {
	background-color: #76AAD2;
}
.woocommerce table.shop_table td.actions .coupon {
	width: 100%;
    margin-bottom: 30px;
}
.woocommerce table.shop_table td.actions .coupon .input-text {
	width: 100%;
    margin: 0 0 10px;
    height: 50px;
    letter-spacing: 0;
    text-transform: initial;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}
.woocommerce table.shop_table td.actions .coupon  button[type="submit"] {
	width: 100%;
}
.woocommerce table.shop_table td.actions .coupon  button[type="submit"]:hover {
	color: #76AAD2;
	background-color: #CDE5F7;
}
.woocommerce .quantity {
	width: 90px;
}
.woocommerce .quantity .qty {
	padding: 5px !important;
}
.woocommerce .quantity a.quantity-change {
	width: 18px;
}
.woocommerce table.shop_table tbody:first-child tr:first-child th {
	width: 156px;
}
.woocommerce ul#shipping_method li,
.woocommerce-shipping-calculator {
	text-align: left;
}

/* Hide notification bar (USP carousel) on mobile for cart/checkout pages */
@media screen and (max-width: 767px) {
	body.woocommerce-cart .elvita-notification-bar,
	body.woocommerce-checkout .elvita-notification-bar {
		display: none !important;
	}
}

/* Hide search bar on mobile for cart/checkout pages */
@media screen and (max-width: 767px) {
	body.woocommerce-cart .column_header_search,
	body.woocommerce-checkout .column_header_search {
		display: none !important;
	}
}

/* ─── Quantity selector: minimalist +/- ──────────────────────────────────────
 *
 * Betheme overrides our generic .woocommerce .quantity rule at higher specificity:
 *   Side cart  → line 663 woocommerce.css: display:inline-block; width:60px  (6 classes)
 *   Widget     → line 1220 woocommerce.css: display:block; width:100%         (4 classes + 2 tags)
 * We therefore need context-specific rules, with !important on display/width.
 *
 * Layout intent: naked "−" and "+" symbols flanking a softly-framed number,
 * all on one centred horizontal baseline.
 * ─────────────────────────────────────────────────────────────────────────── */

/* 1 — General / product-page context */
.woocommerce .quantity {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center; /* baseline alignment of − number + */
	gap: 2px;
	width: auto !important;
	position: relative; /* Betheme JS may rely on this */
	float: none;
}

/* 2 — Betheme SIDE CART: override display:inline-block + width:60px */
.mfn-cart-holder .mfn-chpf-col .quantity {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 2px;
	width: auto !important;
	max-width: 100%;       /* never overflow the centred footer column onto the image */
	position: static !important;
	left: auto !important;
	margin-left: 0 !important;
	transform: none !important;
	float: none !important;
}

/* 2a — Hide the screen-reader label.
 *
 * Betheme dequeues WooCommerce core CSS (theme-head.php:583-585), and the
 * standard `.screen-reader-text` accessibility-clip rule lives there — so the
 * <label> from our quantity-input.php template renders VISIBLY as a flex item,
 * widening the row and overlapping the buttons/image.
 *
 * General contexts: restore the proper visually-hidden technique (kept in the
 * a11y tree for screen readers; the input also carries aria-label="Product
 * quantity" as a fallback). Side cart: hard display:none per requirement —
 * removes it from flex flow entirely so the column can't blow out. */
.woocommerce .quantity .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
}
.mfn-cart-holder .quantity .screen-reader-text {
	display: none !important;
}

/* 2b — Side-cart 2-column layout (CSS Grid, verified live in-browser).
 *
 * ROOT CAUSE of earlier breakage: this site runs BeRocket "Used CSS"
 * optimisation, which froze the cart's *old* single-row rendered dimensions
 * into hardcoded rules that share the theme's own selectors:
 *   .mfn-chp-footer  → position:absolute; width:57px; height:133px
 *   .mfn-chp-remove  → position:absolute; width:40px; height:40px
 *   .mfn-ch-product  → height:133px
 * Those frozen values broke every flex-flow attempt, so instead of fighting
 * them we impose an explicit CSS Grid on .mfn-ch-product. The DOM is 4 siblings
 * (image, info, price, footer) and we cannot wrap them in HTML, so grid-areas
 * place the image as a full-height left column and stack info/price/footer in a
 * right column. All !important — only !important reliably beats the frozen
 * BeRocket rules regardless of stylesheet order. */

/* Grid: image (col 1, all rows) | info / price / footer (col 2, stacked) */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product {
	display: grid !important;
	grid-template-columns: 80px 1fr !important;
	grid-template-rows: auto auto auto !important;
	grid-template-areas: "image info" "image price" "image footer" !important;
	column-gap: 12px !important;
	row-gap: 2px !important;
	height: auto !important;        /* override frozen height:133px */
	align-items: start !important;
	padding: 15px !important;
}

/* Column 1 — fixed-width image thumbnail */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-image {
	grid-area: image !important;
	width: 80px !important;
	margin: 0 !important;
}
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-image img {
	width: 80px !important;
}

/* Column 2 — info / price / footer stacked */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-info {
	grid-area: info !important;
	width: auto !important;
	min-height: 0 !important;       /* override Betheme min-height:100px */
	border-right: 0 !important;     /* divider was for the old horizontal layout */
	padding-right: 0 !important;
}
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-price {
	grid-area: price !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left !important;
}

/* Footer in the right column: quantity left, remove far right */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer {
	grid-area: footer !important;
	position: static !important;    /* override frozen position:absolute */
	width: auto !important;         /* override frozen width:57px */
	height: auto !important;        /* override frozen height:133px */
	margin: 8px 0 0 0 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	background: none !important;    /* drop the old footer band styling */
	border-top: 0 !important;
}
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer .mfn-chpf-col {
	width: auto !important;
	flex: 0 0 auto !important;
	height: auto !important;
	padding: 0 !important;
}
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer .mfn-chpf-col.mfn-chpf-left {
	text-align: left !important;
}
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer .mfn-chpf-col.mfn-chpf-right {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	text-align: right !important;
}

/* Remove link: out of frozen absolute positioning. The "Verwijderen" text is
 * intentionally transparent (icon-only remove) but still occupies ~95px, which
 * pushed the visible trash icon left of the column edge. row-reverse places the
 * icon at the far-right edge while keeping the accessible text in the DOM. */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer .mfn-chpf-col a.mfn-chp-remove {
	position: static !important;
	width: 24px !important;
	height: auto !important;
	display: inline-flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
}

/* Quantity wrapper: left-aligned block holding the inline-flex selector */
.mfn-cart-holder .mfn-chp-footer .mfn-chp-quantity {
	position: static !important;
	left: auto !important;
	margin: 0 !important;
	transform: none !important;
	float: none !important;
	display: block !important;
	width: auto !important;
	max-width: 100%;
	text-align: left !important;
}

/* Remove the "Aantal:" pseudo-label entirely — the −/+ format is self-explanatory. */
.mfn-cart-holder .mfn-chp-quantity::before {
	content: none !important;
	display: none !important;
}

/* 3 — WooCommerce MINI-CART WIDGET: override display:block + width:100%
 *
 * IMPORTANT: must be block-level flex (display:flex, NOT inline-flex) so that
 * `clear: both` actually applies — `clear` is ignored on inline-level boxes,
 * which is why the selector previously slid up beside the float:right thumbnail
 * and overlapped the product image. */
.woocommerce .widget_shopping_cart ul.product_list_widget li .quantity {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start;
	gap: 2px;
	width: auto !important;
	clear: both;        /* drop below the float:right thumbnail */
	margin-top: 10px;
	margin-left: 0;     /* align with the .desc text column, never the image */
}

/* 3a — Contain the float:right thumbnail inside the permalink anchor so it can
 *      never bleed out and collide with the quantity row below it.
 *      :not(.remove) leaves the absolutely-positioned remove "×" untouched. */
.woocommerce .widget_shopping_cart ul.product_list_widget li > a:not(.remove) {
	display: block;
	overflow: hidden; /* establishes a BFC that wraps the floated <img> */
}

/* 4 — The number input: softly framed, perfectly centred */
.woocommerce .quantity .qty {
	flex-shrink: 0;
	width: 46px !important;
	min-width: 0 !important;
	height: 34px;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 1px solid #eee !important;
	border-radius: 4px !important;
	background: #fff;
	color: #323232;
	font-size: 15px;
	font-weight: 600;
	line-height: normal;     /* let the input centre its text itself — a fixed
	                            line-height clips the digit on Windows (different
	                            font baseline metrics) while looking fine on macOS */
	text-align: center;      /* horizontal centring */
	-moz-appearance: textfield;
	appearance: textfield;
	box-shadow: none;
}
.woocommerce .quantity .qty:focus {
	border-color: #76AAD2 !important;
	outline: none;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* 4b — Side cart: beat Betheme's high-specificity .input-text rule.
 *
 * Betheme's `… .mfn-chpf-col .quantity .input-text` sets `padding: 10px 12px
 * !important; font-size: 14px` (7 classes). Combined with height:34px that left
 * only ~12px of content height, so the digit got clipped — invisible on Windows,
 * barely visible on macOS. `input.qty` (7 classes + element) outranks it, and we
 * reset the vertical padding + line-height so the number is cleanly centred and
 * fully visible on every platform. */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer .mfn-chpf-col .quantity input.qty {
	padding: 0 4px !important;
	height: 34px !important;
	line-height: normal !important;
	font-size: 15px !important;
}

/* 5 — Naked +/- buttons: no background, no border by default */
.woocommerce .quantity button.minus,
.woocommerce .quantity button.plus {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 34px;
	padding: 0;
	margin: 0;
	background: transparent !important;
	border: none !important;
	border-radius: 4px;
	color: #444;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	-webkit-appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

/* 6 — Hover: subtle soft-grey chip with brand-blue symbol */
.woocommerce .quantity button.minus:hover,
.woocommerce .quantity button.plus:hover {
	background: #f5f5f5 !important;
	color: #76AAD2;
}

/* 7 — Active (pressed): slightly darker, gentle tap feedback */
.woocommerce .quantity button.minus:active,
.woocommerce .quantity button.plus:active {
	background: #e9e9e9 !important;
	color: #76AAD2;
	transform: scale(0.92);
}

/* 8 — Keyboard focus accessibility */
.woocommerce .quantity button.minus:focus-visible,
.woocommerce .quantity button.plus:focus-visible {
	outline: 2px solid #76AAD2;
	outline-offset: 1px;
}

/* ─── Mini-cart widget: per-item price line ───────────────────────────────── */
.woocommerce-mini-cart-item .mini-cart-price {
	display: block;
	font-size: 0.875em;
	color: #555;
	margin-top: 2px;
}

/* ─── Mobiele sticky add-to-cart bar: quantity verbergen ───────────────────────
 *
 * De custom #elvita-mobile-sticky-cart balk (<767px) bevat een eigen
 * .woocommerce-variation-add-to-cart met een quantity. In de smalle balk toonde
 * onze quantity-input override alleen het kale getal naast de grote knop. Op
 * mobiel wil je daar enkel de "Toevoegen aan winkelwagen" knop — aantal pas je
 * aan in de cart. Verberg dus de quantity in deze balk.
 * (Unieke id-selector: raakt NOOIT de side cart of de gewone product-quantity.) */
@media screen and (max-width: 767px) {
	#elvita-mobile-sticky-cart .quantity {
		display: none !important;
	}
}

/* ─── Premium voorraad-melding (inline, vervangt de browser-alert) ─────────────
 *
 * Door JS toegevoegd (.elvita-stock-msg) zodra de bezoeker boven de voorraad wil
 * gaan via de +-knop of door handmatig een te hoog aantal te typen. Verschijnt
 * als zachte amber notitie onder de quantity en fade't na een paar seconden weg.
 *
 * In de side cart hangt de melding in .mfn-chp-footer; flex-wrap zorgt dat hij op
 * een eigen volledige regel onder de −/aantal/+ en prullenbak valt. */
.mfn-cart-holder .mfn-ch-content .mfn-ch-product .mfn-chp-footer {
	flex-wrap: wrap !important;
}

.elvita-stock-msg {
	flex: 0 0 100%;            /* eigen regel in de flex-footer */
	width: 100%;              /* full-width in niet-flex hosts (widget/product) */
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 7px;
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 500;
	color: #8a4b0b;
	background: #fdf3e3;
	border: 1px solid #f3d9ad;
	border-radius: 7px;
	/* verborgen begintoestand voor de fade + slide + uitvouw */
	opacity: 0;
	transform: translateY(-3px);
	max-height: 0;
	overflow: hidden;
	margin-top: 0;
	padding: 0 11px;
	border-width: 0;
	transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease,
	            margin-top 0.25s ease, padding 0.25s ease, border-width 0.2s ease;
}
.elvita-stock-msg.is-visible {
	opacity: 1;
	transform: translateY(0);
	max-height: 80px;
	margin-top: 10px;
	padding: 8px 11px;
	border-width: 1px;
}
.elvita-stock-msg__icon {
	flex: 0 0 auto;
	margin-top: 1px;
}