/* WooCommerce Blocks — theme styling overrides.
 * Targets the block-based Cart, Checkout, and Mini-Cart so they match
 * the rest of the SlimWonen design system. */

/* ──────────────────────────────────────────────────────────────
   Page-level header injected via the_content filter
   ────────────────────────────────────────────────────────────── */
.sw-cart-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: var(--container);
	margin: 0 auto 24px;
	padding: 40px 32px 0;
}
.sw-cart-title {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1;
	font-size: clamp(40px, 5vw, 64px);
	margin: 0;
	color: var(--ink);
}

/* Static free-shipping note injected right below the "Verzendkosten" row
   in the cart/checkout totals sidebar (see injectFreeShipNote in functions.php). */
.sw-freeship-note {
	font-family: var(--ui);
	font-size: 12px;
	color: var(--ink-3);
	margin: -8px 0 8px;
	line-height: 1.4;
}
/* Trust block — rendered after the cart/checkout block (NOT inside the
   cart-totals-block, because that's a React-managed container and adding a
   child crashes WC Blocks on re-render). Mirror the cart block's outer
   layout (max-width + padding) so the right edge aligns with the totals
   card, and match the totals card width so the badge visually replaces it. */
.sw-cart-trust {
	max-width: var(--container);
	margin: 12px auto 0;
	padding: 0 32px; /* matches .wp-block-woocommerce-cart inner padding */
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
}
.sw-cart-trust__msg {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 10px 14px;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-size: 12px;
	color: var(--ink-3);
	width: 380px; /* same column width as .wp-block-woocommerce-cart-totals-block */
	max-width: 100%;
	box-sizing: border-box;
}
.sw-cart-trust__msg svg { flex-shrink: 0; color: var(--ok); margin-top: 1px; }

/* ──────────────────────────────────────────────────────────────
   Layout container
   ────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
	font-family: var(--ui);
	color: var(--ink);
}
.wp-block-woocommerce-checkout { margin-top: 32px; margin-bottom: 80px; }

/* ──────────────────────────────────────────────────────────────
   Empty cart — full replacement panel (see slimwonen_nl_empty_cart_inject_cta)
   ────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-empty-cart-block { padding: 0; text-align: left; }

/* Hide WC's leftover default chrome in case the regex didn't match. */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block > .wp-block-separator { display: none; }

/* The card panel — same visual vocabulary as the empty-orders state on the
   account dashboard (dashed border, soft bg, centered content). */
.sw-empty-cart-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 56px 32px;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--bg-2);
	margin: 0 0 48px;
}
.sw-empty-cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--ink-2);
	margin-bottom: 12px;
}
.sw-empty-cart-icon svg { width: 28px; height: 28px; }
.sw-empty-cart-panel h2 {
	font-family: var(--ui);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.005em;
	color: var(--ink);
	margin: 0;
}
.sw-empty-cart-panel p {
	color: var(--ink-3);
	font-size: 14px;
	margin: 0 0 8px;
	max-width: 360px;
}
.sw-empty-cart-panel .btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 22px;
	margin-top: 8px;
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius);
	font-family: var(--ui);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s;
}
.sw-empty-cart-panel .btn:hover { background: var(--accent-hover); }

/* Our "Onze keuze" suggestions block sits below the empty-state panel. The
   section header and product grid pick up the same styles as the homepage
   "Onze keuze." section (.sec-head + .prod-grid), so no extra rules needed —
   just add some top spacing to separate it from the panel. */
.sw-empty-cart-suggestions { margin-top: 56px; }

/* When the filled-cart block contains items (cart is not empty), hide our
   custom empty-cart panel. WC Blocks removes/inserts those rows reactively
   on add/remove, so this :has() rule swaps the UI automatically without any
   bespoke JS. */
.wp-block-woocommerce-cart:has(.wp-block-woocommerce-filled-cart-block .wc-block-cart-items__row) .wp-block-woocommerce-empty-cart-block.sw-empty-cart {
	display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   Filled cart layout
   ────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-filled-cart-block {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	gap: 48px !important;
	align-items: start !important;
	flex-wrap: nowrap !important;
}
@media (max-width: 880px) {
	.wp-block-woocommerce-filled-cart-block { grid-template-columns: 1fr !important; }
}

/* WC sets width:65%/35% + percentage padding on these children, which collapses our grid cells.
   Force them to fill their grid cell. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.wp-block-woocommerce-cart-items-block {
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
}
/* Override the broad zero-padding rule above so the items block has horizontal inset.
   Higher specificity (.wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block)
   is needed to beat the earlier rule that zeroes padding. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block {
	padding: 0 20px !important;
}
.wp-block-woocommerce-cart-items-block table.wc-block-cart-items {
	margin: 0 !important;
	width: 100% !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	/* Query container: the line-item layout responds to the items column's own
	   width (which can be narrow in the 2-column cart even on a wide viewport),
	   not the viewport width. */
	container-type: inline-size;
	container-name: sw-cart;
}
/* Hide PRODUCT / TOTAAL header to match custom cart */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__header,
.wp-block-woocommerce-cart-items-block thead {
	display: none !important;
}
/* Reset all internal borders, then add ONE separator between rows
   via border-top on each row's cells (skip first row). This avoids the
   broken/double-line artefacts caused by mixing per-cell top + bottom borders. */
.wp-block-woocommerce-cart-items-block table.wc-block-cart-items,
.wp-block-woocommerce-cart-items-block .wp-block-woocommerce-cart-line-items-block,
.wp-block-woocommerce-cart-items-block tbody,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row {
	border: 0 !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items td,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row > td {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	vertical-align: middle !important;
	border-top: 1px solid var(--line) !important;
	border-bottom: 0 !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items tbody tr:first-child > td,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:first-child > td {
	border-top: 0 !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-item__image {
	width: 120px !important;
	padding-left: 0 !important;
	padding-right: 20px !important;
	/* WC gives this cell position:relative + z-index:1, which (since the sticky
	   checkout sidebar sits in a z-index:auto context) lets the thumbnail paint
	   on top of the fixed "Naar afrekenen" bar. Drop it so the bar stays above. */
	position: static !important;
	z-index: auto !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-item__image img {
	border-radius: var(--radius-sm) !important;
	background: #fff !important;
	padding: 8px !important;
	border: 1px solid var(--line-2) !important;
	width: 100px !important;
	height: 100px !important;
	object-fit: contain !important;
	box-sizing: border-box !important;
	display: block !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-item__product { padding-left: 0 !important; }
.wp-block-woocommerce-cart-items-block .wc-block-cart-item__total {
	padding-right: 0 !important;
	vertical-align: middle !important;
	/* Revert WC's display:flex so the cell behaves as a normal table-cell and
	   vertical-align:middle actually centers the price with the row. */
	display: table-cell !important;
	text-align: right !important;
}

/* Two-column layout inside the product cell: title+remove stack on the left, qty stepper on the right. */
.wc-block-cart-item__wrap {
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	column-gap: 24px !important;
	row-gap: 6px !important;
	align-items: center !important;
}
.wc-block-cart-item__wrap > a.wc-block-components-product-name {
	grid-column: 1;
	grid-row: 1;
}
.wc-block-cart-item__wrap > .wc-block-components-product-metadata { display: none !important; }
.wc-block-cart-item__quantity {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0 !important;
}

/* ──────────────────────────────────────────────────────────────
   Unified line-item layout (all widths)
   WooCommerce flips the cart between a desktop table and a container-responsive
   grid; at some widths that crushed bundle child names into a sliver and pushed
   their thumbnails deep into the shared image column. We opt out of that and lay
   every row out ourselves, so it stays consistent and predictable at every width.
   ────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-cart-items-block table.wc-block-cart-items,
.wp-block-woocommerce-cart-items-block table.wc-block-cart-items > tbody {
	display: block !important;
}
/* Normal + bundle-parent rows: image | product | total */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	align-items: center !important;
	column-gap: 20px !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row > td { display: block !important; }
/* The total cell is the 3rd column; keep its price right-aligned. */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row .wc-block-cart-item__total { text-align: right !important; }

/* Row separator lives on the row, not the cells — the grid column-gap would
   otherwise chop a per-cell border-top into disconnected segments. */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row > td { border-top: 0 !important; }
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row { border-top: 1px solid var(--line) !important; }
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:first-child,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled { border-top: 0 !important; }

/* Keep the "Verwijderen" link visible at every width (WC hides it ≤699px). */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__remove-link {
	display: inline !important;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block {
	background: var(--bg-2) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-lg) !important;
	padding: 20px !important;
	position: sticky;
	top: 92px;
}

/* ──────────────────────────────────────────────────────────────
   Cart line items
   ────────────────────────────────────────────────────────────── */
.wc-block-cart-items {
	font-family: var(--ui);
}
.wc-block-components-product-name {
	font-family: var(--ui);
	font-weight: 500;
	font-size: 15px;
	color: var(--ink) !important;
	text-decoration: none;
	line-height: 1.35;
}
.wc-block-components-product-name:hover {
	color: var(--accent-ink) !important;
}
.wc-block-cart-item__total .wc-block-components-formatted-money-amount.is-discounted-price {
	color: var(--ink-3);
	font-size: 13px;
}
/* Convert the trash-icon remove button into a plain "Verwijderen" text link.
   JS relocates it to be a direct child of .wc-block-cart-item__wrap so the grid
   places it in column 1 / row 2 — directly under the product title. */
.wc-block-cart-item__remove-link {
	grid-column: 1;
	grid-row: 2;
	justify-self: start;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	color: var(--ink-3) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
	cursor: pointer;
}
.wc-block-cart-item__remove-link svg { display: none !important; }
.wc-block-cart-item__remove-link::after { content: "Verwijderen"; }
.wc-block-cart-item__remove-link:hover { color: var(--err) !important; }

/* Hide line-item duplicate-price + long description — keep the row compact like the custom cart.
   The line total still shows on the right cell, and the description belongs on the PDP. */
.wc-block-cart-items .wc-block-cart-item__prices,
.wc-block-cart-items .wc-block-components-product-metadata__description {
	display: none !important;
}

/* Money amounts — pin to ink color, override block defaults */
.wc-block-components-product-price,
.wc-block-components-formatted-money-amount {
	color: var(--ink) !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
/* Line-item total price — slightly bigger to match the custom cart */
.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
	font-size: 16px !important;
	font-weight: 600 !important;
}
/* "3 × € 36,95" subtitle injected via JS when qty > 1 */
.sw-line-calc {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}
.wc-block-components-product-price__regular {
	color: var(--ink-4) !important;
	text-decoration: line-through;
	font-weight: 400;
	margin-right: 8px;
}

/* ──────────────────────────────────────────────────────────────
   Quantity selector
   ────────────────────────────────────────────────────────────── */
.wc-block-components-quantity-selector {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	height: 40px;
	overflow: hidden;
}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-family: var(--ui);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	background: transparent;
	border: 0;
	min-height: 0;
	height: 100%;
	width: 56px;
	padding: 0;
	text-align: center;
}
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button {
	width: 36px;
	height: 100%;
	background: transparent;
	color: var(--ink-2);
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	font-size: 16px;
	cursor: pointer;
}
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:hover { color: var(--ink); background: var(--bg-2); }
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:focus,
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:focus-visible,
.wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:active {
	outline: 0 !important;
	box-shadow: none !important;
	border: 0 !important;
	background: var(--bg-2) !important;
	color: var(--ink) !important;
}

/* ──────────────────────────────────────────────────────────────
   Order summary (right column)
   ────────────────────────────────────────────────────────────── */
.wp-block-woocommerce-cart-order-summary-heading-block,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	/* WC hides this "Overzicht" title below 699px — keep it visible on mobile. */
	display: block !important;
	font-family: var(--ui) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	text-transform: none !important;
	letter-spacing: -0.005em !important;
	line-height: 1.2 !important;
	padding: 0 !important;
	margin: 0 0 14px !important;
	border-bottom: 0 !important;
	color: var(--ink) !important;
}
.wc-block-components-totals-item {
	font-family: var(--ui);
	color: var(--ink);
	padding: 4px 0;
	margin: 0;
	font-size: 14px;
	border: 0;
	text-transform: none;
}
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-fee-block,
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-discount-block,
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-taxes-block {
	margin: 0;
	padding: 0;
}
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	margin: 0 0 12px !important;
	padding: 14px 0 !important;
	border-top: 1px solid var(--line) !important;
	border-bottom: 1px solid var(--line) !important;
}
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-totals-block {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Hide WC's auto "accepted payment methods" icon strip — we don't show payment chips on cart */
.wp-block-woocommerce-cart-accepted-payment-methods-block {
	display: none !important;
}
.wc-block-components-totals-item__label { color: var(--ink-2); text-transform: none !important; }
.wc-block-components-totals-item__value { color: var(--ink); font-variant-numeric: tabular-nums; text-transform: none !important; }
/* Bold Subtotaal label + value */
.wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart-order-summary-subtotal-block .wc-block-components-totals-item__value {
	font-weight: 600 !important;
	color: var(--ink) !important;
}
.wc-block-components-totals-shipping__via,
.wc-block-components-totals-shipping__free-shipping,
.wp-block-woocommerce-cart-totals-block .wc-block-formatted-money-amount,
.wp-block-woocommerce-cart-totals-block [class*="totals-shipping"],
.wp-block-woocommerce-cart-order-summary-shipping-block strong,
.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__value strong {
	text-transform: none !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
}
/* Free shipping ("Gratis") — text-transform reset + green color (matches custom cart/checkout) */
.wp-block-woocommerce-checkout-order-summary-shipping-block strong,
.wp-block-woocommerce-checkout-order-summary-shipping-block .wc-block-components-totals-item__value strong,
.wc-block-checkout__shipping-option--free {
	text-transform: none !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-totals-item__value strong,
.wp-block-woocommerce-checkout-order-summary-shipping-block .wc-block-components-totals-item__value strong,
.wc-block-checkout__shipping-option--free {
	color: var(--ok) !important;
}
.wc-block-components-totals-footer-item {
	border-top: 1px solid var(--line) !important;
	margin-top: 12px !important;
	padding-top: 16px !important;
	font-size: 16px;
	font-weight: 600;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--ui);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.005em;
	color: var(--ink);
}

/* Strip extra dividers + padding WC inserts between summary rows
   (coupon block excluded — it keeps its own border-bottom set above) */
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-cart-order-summary-coupon-form-block),
.wp-block-woocommerce-cart-totals-block .wc-block-components-panel,
.wp-block-woocommerce-cart-totals-block .wc-block-components-panel__button,
.wp-block-woocommerce-cart-totals-block hr,
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-item {
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-cart-order-summary-coupon-form-block) {
	padding: 0 !important;
	margin: 0 !important;
}
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--line) !important;
}

/* Coupon — quiet link until expanded, then a clean inline input + dark button.
   Outer wrapper spacing/borders are set on the parent .wp-block-woocommerce-cart-totals-block rule above. */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button {
	font-family: var(--ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ink-3) !important;
	padding: 2px 0 !important;
	border: 0 !important;
	background: transparent !important;
	text-align: left !important;
	width: 100% !important;
	min-height: 0 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 6px !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button:hover {
	color: var(--ink) !important;
}
/* SVG is the first child in WC's markup — push it to the visual right with `order` */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button svg {
	order: 99;
	color: currentColor !important;
}
/* Coupon expanded form — applies on both cart and checkout */
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__content,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-totals-coupon__content {
	margin-top: 0 !important;
	padding: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-panel__button,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button {
	padding: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-totals-coupon__form,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-totals-coupon__form {
	display: flex !important;
	gap: 8px !important;
	align-items: stretch !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-text-input {
	margin: 0 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	display: block !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input input,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-text-input input {
	height: 40px !important;
	min-height: 40px !important;
	font-family: var(--ui) !important;
	font-size: 14px !important;
	padding: 0 12px !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	box-shadow: none !important;
	color: var(--ink) !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input input::placeholder,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-text-input input::placeholder { color: var(--ink-4) !important; }
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-text-input input:focus { border-color: var(--ink) !important; outline: 0 !important; }
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-text-input label,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-text-input label {
	display: none !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block button[type="submit"],
.wp-block-woocommerce-cart-order-summary-coupon-form-block .wc-block-components-button,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block button[type="submit"],
.wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-button {
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	background: var(--bg) !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	transition: border-color .15s, color .15s !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block button[type="submit"]:hover,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block button[type="submit"]:hover {
	border-color: var(--ink) !important;
	color: var(--ink) !important;
	background: var(--bg) !important;
}
.wp-block-woocommerce-cart-order-summary-coupon-form-block button[type="submit"][disabled],
.wp-block-woocommerce-cart-order-summary-coupon-form-block button[type="submit"]:disabled,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block button[type="submit"][disabled],
.wp-block-woocommerce-checkout-order-summary-coupon-form-block button[type="submit"]:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* Applied-coupon list — outlined container, dense rows separated by thin lines */
.wc-block-components-totals-discount__coupon-list {
	list-style: none !important;
	margin: 6px 0 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid var(--line) !important;
	border-radius: 6px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
}
.wc-block-components-chip.wc-block-components-totals-discount__coupon-list-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	padding: 8px 6px 8px 12px !important;
	margin: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--ui) !important;
	font-size: 14px !important;
	color: var(--ink-2) !important;
	text-transform: none !important;
	line-height: 1.3 !important;
	box-shadow: none !important;
}
/* Thin divider between stacked coupons (not on the first one) */
.wc-block-components-chip.wc-block-components-totals-discount__coupon-list-item + .wc-block-components-chip.wc-block-components-totals-discount__coupon-list-item {
	border-top: 1px solid var(--line-2) !important;
}
.wc-block-components-chip__text { font-weight: 500 !important; display: inline-flex; align-items: center; gap: 6px; }
.wc-block-components-chip__text::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: var(--ok);
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 12.4L2.6 8.5l1.4-1.4 2.5 2.5 5.5-5.5 1.4 1.4z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='currentColor' d='M6.5 12.4L2.6 8.5l1.4-1.4 2.5 2.5 5.5-5.5 1.4 1.4z'/></svg>");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}
.wc-block-components-chip__remove {
	width: 26px !important;
	height: 26px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--ink-3) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: color .15s, background .15s;
	flex: 0 0 auto;
}
.wc-block-components-chip__remove svg { display: none !important; }
.wc-block-components-chip__remove .sw-x {
	font-family: var(--ui);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	color: currentColor;
	display: inline-block;
}
.wc-block-components-chip__remove:hover { color: var(--ink) !important; background: transparent !important; }

/* Remove default WC line below the order-summary block, and add breathing room
   above the "Naar afrekenen" button. */
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: 0 !important;
}
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-proceed-to-checkout-block,
.wp-block-woocommerce-cart-totals-block .wc-block-cart__submit {
	margin-top: 22px !important;
}

/* ──────────────────────────────────────────────────────────────
   Buttons — proceed to checkout, etc.
   ────────────────────────────────────────────────────────────── */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 22px;
	border-radius: var(--radius);
	background: var(--accent);
	color: #fff;
	font-family: var(--ui);
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	border: 1px solid var(--accent);
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}
.wc-block-components-button.outlined,
.wc-block-components-button.text {
	background: var(--bg);
	color: var(--ink);
	border-color: var(--line);
}
.wc-block-components-button.outlined:hover,
.wc-block-components-button.text:hover {
	background: var(--bg-2);
	border-color: var(--ink-3);
}

/* ──────────────────────────────────────────────────────────────
   Notices + snackbar
   ────────────────────────────────────────────────────────────── */
.wc-block-components-notices .wc-block-components-notice-banner {
	border-radius: var(--radius);
	font-family: var(--ui);
	font-size: 14px;
	border: 1px solid var(--line);
}
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
	background: color-mix(in oklch, var(--err) 8%, var(--bg));
	border-color: color-mix(in oklch, var(--err) 30%, var(--line));
}

/* WC Blocks snackbar (e.g. "coupon applied / removed") — restyle it to match
   our unified .sw-toast look: top-right white card with a thin border and
   soft shadow. Container is pinned to the same position as .sw-toast. */
.wc-block-components-notices__snackbar {
	font-family: var(--ui) !important;
	position: fixed !important;
	top: 88px !important;
	right: 24px !important;
	left: auto !important;
	bottom: auto !important;
	z-index: 1001 !important;
	max-width: calc(100vw - 48px) !important;
	width: auto !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
.wc-block-components-notice-snackbar {
	background: #fff !important;
	color: var(--ink) !important;
	border: 1px solid var(--line) !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important;
	padding: 14px 14px 14px 16px !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	min-width: 320px !important;
	max-width: 380px !important;
	display: grid !important;
	grid-template-columns: auto 1fr auto !important;
	align-items: center !important;
	gap: 12px !important;
}
/* Replace the leading info-circle SVG with our green check (same visual
   language as the .sw-toast item icon) via ::before. */
.wc-block-components-notice-snackbar > svg:first-child { display: none !important; }
.wc-block-components-notice-snackbar::before {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	color: var(--ok);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>") center/contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='m5 13 4 4L19 7'/></svg>") center/contain no-repeat;
	flex-shrink: 0;
}
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__content {
	color: var(--ink) !important;
	padding: 0 !important;
}
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss {
	background: transparent !important;
	border: 0 !important;
	color: var(--ink-3) !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: 24px !important;
	width: 24px !important;
	flex: 0 0 auto !important;
	border-radius: 6px !important;
	cursor: pointer;
	transition: color .15s, background .15s;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss:hover {
	color: var(--ink) !important;
	background: var(--bg-2) !important;
}
/* Hide WC's default × SVG; the JS-injected .sw-x span carries the glyph. */
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss svg {
	display: none !important;
}
.wc-block-components-notice-snackbar .wc-block-components-notice-banner__dismiss .sw-x {
	font-family: var(--ui);
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	color: inherit;
	display: inline-block;
}

/* ──────────────────────────────────────────────────────────────
   Form fields (checkout)
   ────────────────────────────────────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select select,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"] {
	font-family: var(--ui);
	font-size: 15px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	height: 48px;
	padding: 0 14px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select select:focus,
.wc-block-components-form input:focus {
	border-color: var(--ink);
	outline: 0;
}
.wc-block-components-text-input label,
.wc-block-components-checkbox__label {
	font-family: var(--ui);
	color: var(--ink-2);
	font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────
   Checkout step headings
   ────────────────────────────────────────────────────────────── */
.wc-block-components-checkout-step__title,
.wc-block-components-title {
	font-family: var(--display) !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	color: var(--ink) !important;
}
.wc-block-components-checkout-step__description {
	color: var(--ink-3);
	font-size: 14px;
}

/* ──────────────────────────────────────────────────────────────
   Checkout block — match our custom form-checkout.php layout
   ────────────────────────────────────────────────────────────── */
.sw-cart-back {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 12px;
}
.sw-cart-back a { color: inherit; text-decoration: none; }
.sw-cart-back a:hover { color: var(--ink); }

/* Two-column layout: form on left, sticky summary on right.
   The grid lives on .wc-block-components-sidebar-layout (the actual flex/grid wrapper
   WC inserts between .wp-block-woocommerce-checkout and the fields/totals blocks). */
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-checkout {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
	gap: 48px !important;
	align-items: start !important;
	max-width: none !important;
	width: 100% !important;
}
@media (max-width: 880px) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout,
	.wp-block-woocommerce-checkout .wc-block-checkout {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	/* Single column now — drop the sticky so the order summary doesn't pin to
	   the top and overlap the address form as you scroll. */
	.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block,
	.wp-block-woocommerce-checkout .wc-block-components-sidebar {
		position: static !important;
		top: auto !important;
	}
	/* Tablet single-col (769–880px): show summary ABOVE the form fields so
	   tablet users see the cart before scrolling through the steps. */
	@media (min-width: 769px) {
		.wp-block-woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
			grid-row: 1 !important;
		}
		.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-fields-block {
			grid-row: 2 !important;
		}
	}
	/* True mobile (≤699px): summary BELOW the form. WC ships its own
	   `order: 0` / `order: 1` rule that flips them on mobile (sidebar first),
	   so override it back — the customer fills the form, then sees the
	   total at the bottom right above the place-order button. */
	@media (max-width: 699px) {
		.wp-block-woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
			order: 1 !important;
		}
		.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
		.wp-block-woocommerce-checkout .wc-block-checkout__main {
			order: 0 !important;
		}
	}
	/* WC renders the order summary in TWO places on mobile: a collapsed bar
	   at the top of the layout (.wc-block-checkout__sidebar) and the actual
	   items/totals via a React portal in a fill-wrapper deep inside the
	   actions block. We expand the top bar via JS (see expandMobileOrderSummary)
	   so its inline items show, and hide the duplicate fill-wrapper at the
	   bottom. Moving the fill-wrapper in the DOM is unsafe — React's
	   reconcile crashes ("Failed to execute removeChild") because the portal
	   target moves out from under it. */
	.wp-block-woocommerce-checkout .wc-block-checkout__actions .checkout-order-summary-block-fill-wrapper {
		display: none !important;
	}
	/* The mobile collapsed bar — keep visible at the top, style it as a card
	   matching the desktop sidebar so the look is consistent across widths. */
	.wp-block-woocommerce-checkout .wc-block-components-sidebar.wc-block-checkout__sidebar {
		background: var(--bg-2) !important;
		border: 1px solid var(--line) !important;
		border-radius: var(--radius) !important;
		padding: 24px !important;
		margin-bottom: 16px !important;
		box-sizing: border-box !important;
	}
	/* Once expanded, drop the toggle's pointer + chevron styling — looks like
	   a static heading rather than a clickable bar. */
	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] {
		cursor: default !important;
	}
	.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title[aria-expanded="true"] .wc-block-components-checkout-order-summary__title-icon {
		display: none !important;
	}
}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	float: none !important;
}
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
	background: var(--bg-2) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	padding: 24px !important;
	position: sticky;
	top: 88px;
}

/* Each checkout step is a "card" — like our .step container */
.wc-block-components-checkout-step {
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	background: var(--bg) !important;
	padding: 24px !important;
	margin: 0 0 16px !important;
	box-shadow: none !important;
}
/* "Voeg een notitie toe aan uw bestelling" is a tiny checkbox — not a full bordered step card. */
.wc-block-checkout__order-notes.wc-block-components-checkout-step {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 4px 0 0 !important;
}
/* Disclaimer text below the notitie — kill WC's default separator line + tighten the color */
.wc-block-checkout__terms {
	border: 0 !important;
	padding: 10px 0 0 !important;
	font-family: var(--ui) !important;
	font-size: 12px !important;
	color: var(--ink-3) !important;
}
.wc-block-checkout__terms a {
	color: var(--ink-2) !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}
.wc-block-checkout__terms a:hover { color: var(--ink) !important; }
/* When the textarea opens after checking, give it consistent input styling */
.wc-block-checkout__order-notes textarea {
	margin-top: 10px !important;
	min-height: 80px !important;
	padding: 12px 14px !important;
	font-family: var(--ui) !important;
	font-size: 14px !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
}
.wc-block-components-checkout-step::before,
.wc-block-components-checkout-step::after { display: none !important; }
.wc-block-components-checkout-step__heading,
.wc-block-components-checkout-step__heading-content {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 0 6px !important;
}
.wc-block-components-checkout-step__title {
	font-family: var(--ui) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	letter-spacing: -0.005em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
	color: var(--ink) !important;
	text-transform: none !important;
}
/* Numbered circles before each step heading — matches the custom checkout's ① ② badges.
   Counter is reset on the fields block (parent of all the .wc-block-components-checkout-step
   children), then incremented per step. */
.wp-block-woocommerce-checkout-fields-block {
	counter-reset: sw-step;
}
.wc-block-components-checkout-step {
	counter-increment: sw-step;
}
.wc-block-components-checkout-step .wc-block-components-checkout-step__heading {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
.wc-block-components-checkout-step .wc-block-components-checkout-step__heading::before {
	content: counter(sw-step);
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.wc-block-components-checkout-step__description {
	font-size: 13px !important;
	color: var(--ink-3) !important;
	margin: 0 0 16px !important;
}
.wc-block-components-checkout-step__content {
	margin-top: 16px !important;
}

/* Form fields — labels ABOVE the input (no floating-label material style).
   The input comes first in the DOM, so use flex-direction: column-reverse to flip the visual order. */
.wc-block-components-form .wc-block-components-text-input,
.wc-block-components-form .wc-block-components-textarea,
.wc-block-components-form .wc-block-components-select {
	margin: 0 0 14px !important;
	position: static !important;
	display: flex !important;
	flex-direction: column-reverse !important;
}
/* Reposition the floating label as a static block above the field */
.wc-block-components-text-input label,
.wc-block-components-textarea label,
.wc-block-components-select label,
.wc-block-components-checkout-step .wc-block-components-form label {
	position: static !important;
	transform: none !important;
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ink-2) !important;
	letter-spacing: 0 !important;
	line-height: 1.3 !important;
	background: transparent !important;
}
.wc-block-components-form .wc-block-components-text-input input,
.wc-block-components-form .wc-block-components-textarea textarea,
.wc-block-components-form .wc-block-components-select select,
.wc-block-components-form input[type="text"],
.wc-block-components-form input[type="email"],
.wc-block-components-form input[type="tel"],
.wc-block-components-form input[type="number"] {
	height: 44px !important;
	min-height: 44px !important;
	font-family: var(--ui) !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0 14px !important;
	box-shadow: none !important;
	transition: border-color .15s !important;
}
.wc-block-components-form .wc-block-components-textarea textarea {
	height: auto !important;
	min-height: 96px !important;
	padding: 12px 14px !important;
	line-height: 1.5 !important;
}
.wc-block-components-form .wc-block-components-text-input input:focus,
.wc-block-components-form .wc-block-components-textarea textarea:focus,
.wc-block-components-form .wc-block-components-select select:focus {
	border-color: var(--ink) !important;
	outline: 0 !important;
}
/* Override WC's "has value" / "is-active" floating animation — label stays above */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input.has-error label {
	transform: none !important;
}

/* Add red asterisk after the label for required fields */
.wc-block-components-text-input:has(input[required]) label::after,
.wc-blocks-components-select:has(select[required]) .wc-blocks-components-select__label::after {
	content: " *";
	color: var(--err);
	font-weight: 500;
}

/* Country/region select uses a different class (wc-blocks-components-select, not wc-block-components-select).
   Apply matching label-above styling. */
.wc-blocks-components-select {
	margin: 0 0 14px !important;
}
.wc-blocks-components-select__container {
	display: block !important;
	position: static !important;
}
.wc-blocks-components-select__label {
	position: static !important;
	transform: none !important;
	display: block !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ink-2) !important;
	letter-spacing: 0 !important;
	line-height: 1.3 !important;
}
.wc-blocks-components-select__select {
	height: 44px !important;
	min-height: 44px !important;
	font-family: var(--ui) !important;
	font-size: 14px !important;
	color: var(--ink) !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0 14px !important;
	box-shadow: none !important;
}
.wc-blocks-components-select__select:focus { border-color: var(--ink) !important; outline: 0 !important; }

/* Always show Toevoeging next to Straat + huisnummer — hide the toggle */
.wc-block-components-address-form__address_2-toggle { display: none !important; }
.wc-block-components-address-form__address_2 { display: flex !important; }

/* Two-up: address_1 takes ~70%, address_2 takes ~30% on the same row. Use flex on the form.
   WC defaults each wrapper to `flex: 0 0 100%`, so we override the flex-basis directly. */
.wc-block-components-address-form {
	display: flex !important;
	flex-wrap: wrap !important;
	column-gap: 12px !important;
	row-gap: 10px !important;
}
/* WC ships .wc-block-components-text-input with margin-bottom: 14px, which
   stacks on top of our row-gap and makes the form feel airy. Zero out the
   per-field margin so row-gap alone controls vertical rhythm. */
.wc-block-components-address-form > .wc-block-components-text-input,
.wc-block-components-address-form > .wc-blocks-components-select {
	margin: 0 !important;
}
.wc-block-components-address-form > .wc-block-components-address-form__first_name,
.wc-block-components-address-form > .wc-block-components-address-form__last_name,
.wc-block-components-address-form > .wc-block-components-address-form__city,
.wc-block-components-address-form > .wc-block-components-address-form__phone {
	flex: 0 0 calc(50% - 6px) !important;
	max-width: calc(50% - 6px) !important;
}
/* Email field on its own — make it full width */
.wc-block-components-address-form > .wc-block-components-address-form__email {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
.wc-block-components-address-form > .wc-block-components-address-form__address_1 {
	flex: 0 0 calc(70% - 6px) !important;
	max-width: calc(70% - 6px) !important;
}
.wc-block-components-address-form > .wc-block-components-address-form__address_2 {
	flex: 0 0 calc(30% - 6px) !important;
	max-width: calc(30% - 6px) !important;
}
/* Forms on mobile: every field full-width, one clean column. This overrides the
   50/70/30 side-by-side splits above (same specificity, later + in a media
   query) and WC's own width rules (which aren't !important). Side-by-side
   returns at ≥601px. */
@media (max-width: 600px) {
	.wc-block-components-address-form > .wc-block-components-text-input,
	.wc-block-components-address-form > .wc-blocks-components-select,
	.wc-block-components-address-form > .wc-block-components-select {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}
/* We only ship to Nederland (WC: Settings → General → Selling/Shipping
   locations → Sell to specific countries → Nederland), so the country
   dropdown only contains one real option. WC Blocks doesn't auto-collapse
   it, so hide it — the form-state JS in functions.php pins the value to
   "NL" so validation still passes. */
.wc-block-components-address-form > .wc-block-components-address-form__country {
	display: none !important;
}

/* B2B fields: Bedrijf and BTW-nummer are tucked below the rest of the form
   and only revealed when the user ticks "Ik bestel als bedrijf". The
   `sw-show-company` class is toggled by JS in functions.php based on the
   checkbox state. WC's additional-fields render with class
   `wc-block-components-address-form__slimwonen-{field-id}`.
   The JS also physically reorders the DOM so Bedrijf sits right before
   BTW-nummer (after the is-business toggle) — so tab order matches visual. */
.wc-block-components-address-form > .wc-block-components-address-form__company,
.wc-block-components-address-form > [class*="slimwonen-btw-nummer"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
	display: none !important;
}
.wc-block-components-address-form.sw-show-company > .wc-block-components-address-form__company,
.wc-block-components-address-form.sw-show-company > [class*="slimwonen-btw-nummer"] {
	display: flex !important;
}
.wc-block-components-address-form > [class*="slimwonen-is-business"] {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
.wc-block-components-checkbox__label {
	font-family: var(--ui) !important;
	font-size: 13px !important;
	color: var(--ink-2) !important;
}
.wc-block-components-validation-error {
	font-size: 12px !important;
	color: var(--err) !important;
}
/* WC's text-input wrapper is flex column-reverse (so label sits above the
   input). Without a tweak, the validation error appears as a 3rd DOM child
   and gets pushed above the label by column-reverse — looks like the error
   floats above the field. Pin it to flex order -1 so it ends up BELOW the
   input in the visual stack. */
.wc-block-components-text-input > .wc-block-components-validation-error {
	order: -1 !important;
	padding-top: 6px !important;
}

/* Radio-style option rows for shipping and payment methods — card UI */
.wc-block-components-radio-control__option,
.wc-block-components-payment-method-label {
	font-family: var(--ui) !important;
	font-size: 14px !important;
	color: var(--ink) !important;
}
.wc-block-components-radio-control {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wc-block-components-radio-control__option {
	padding: 14px 16px !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	background: var(--bg) !important;
	margin: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	transition: border-color .15s, background .15s !important;
	position: relative !important;
}
.wc-block-components-radio-control__option:hover {
	border-color: var(--ink-3) !important;
}
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option:has(input:checked) {
	border: 1px solid var(--line) !important;
	padding: 14px 16px !important;
	background: var(--bg) !important;
	box-shadow: none !important;
	outline: 0 !important;
}
/* When the checked option has expanded content below, the option + content share one outline */
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content:not(:empty)) .wc-block-components-radio-control__option {
	border-bottom: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.wc-block-components-radio-control__input {
	accent-color: var(--ink) !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	transform: none !important;
	flex: 0 0 auto !important;
	margin: 0 !important;
}
.wc-block-components-radio-control__option-layout { flex: 1 1 auto !important; min-width: 0 !important; }

/* Shipping-rate option label/price */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__secondary-label {
	font-family: var(--ui) !important;
	font-size: 14px !important;
	color: var(--ink) !important;
}
.wc-block-components-radio-control__description {
	font-size: 12px !important;
	color: var(--ink-3) !important;
	margin-top: 2px !important;
}

/* Payment methods — wrap all options in a single rounded container with internal
   dividers (avoids the "double-line" look when 2 cards stack with a gap). */
.wc-block-checkout__payment-method .wc-block-components-radio-control {
	display: flex !important;
	flex-direction: column !important;
	gap: 0 !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	overflow: hidden !important;
	background: var(--bg) !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control__option,
.wc-block-checkout__payment-method .wc-block-components-radio-control__option:has(input:checked),
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control-accordion-content:not(:empty)) .wc-block-components-radio-control__option {
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--bg) !important;
	box-shadow: none !important;
}
.wc-block-checkout__payment-method .wc-block-components-radio-control-accordion-option + .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border-top: 1px solid var(--line) !important;
}
.wc-block-components-payment-method-content {
	padding: 12px 16px 4px !important;
	border-top: 1px solid var(--line-2) !important;
	margin-top: 10px !important;
}
/* Hide empty payment-method content (gateways without extra fields, e.g. iDEAL) so
   the leftover border doesn't read as a phantom line below the selected option. */
.wc-block-components-payment-method-content:empty {
	display: none !important;
}
/* The Mollie iDEAL gateway renders an empty <div></div> inside .mollie-payment-method-container,
   which gives the accordion-content extra height. Collapse the empty container. */
.wc-block-components-radio-control-accordion-content {
	padding: 0 !important;
	margin: 0 !important;
}
.mollie-payment-method-container:empty,
.wc-block-components-radio-control-accordion-content:has(.mollie-payment-method-container > div:empty:only-child) {
	display: none !important;
}
/* WC adds an inset box-shadow (acts like a thicker highlight border) on the accordion-option
   wrapper when selected, with a smaller border-radius than our inner option — creating a visible
   "double border / split corners" artefact. Strip it so only the inner option's border shows. */
.wc-block-components-radio-control-accordion-option {
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}
/* WC also adds a ::after overlay on the radio-control container with a faint border-left,
   which renders as a thin vertical line down the left of the option group. Hide it. */
.wc-block-components-radio-control::after {
	display: none !important;
}
/* Payment-method content (inline payment form fields, e.g. Mollie credit card) — sits
   inside the outer payment-methods container with no extra border, just a divider above
   and a subtle bg tint. */
.wc-block-components-radio-control-accordion-content:not(:empty) {
	padding: 12px 16px 16px !important;
	background: var(--bg-2) !important;
	border: 0 !important;
	border-top: 1px solid var(--line) !important;
	border-radius: 0 !important;
	margin-top: 0 !important;
}
/* Mollie credit-card fields are iframe-based (.mollie-component divs).
   Style them to match our other form inputs (44px tall, light border, white bg). */
.mollie-component-wrapper > div {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.mollie-component {
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	background: var(--bg) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius-sm) !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	overflow: hidden !important;
}
.mollie-component iframe {
	flex: 1 1 auto !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.mollie-component-wrapper {
	margin-bottom: 12px !important;
}
.mollie-component-label {
	font-family: var(--ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ink-2) !important;
	margin-bottom: 4px !important;
	display: block !important;
}
/* Layout: cardHolder + cardNumber full-width, then expiryDate + CVC side-by-side as a row */
.mollie-components {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	column-gap: 12px !important;
	row-gap: 0 !important;
}
.mollie-component-wrapper--cardHolder,
.mollie-component-wrapper--cardNumber {
	grid-column: 1 / -1 !important;
}
.mollie-component-wrapper--expiryDate {
	grid-column: 1 !important;
}
.mollie-component-wrapper--verificationCode {
	grid-column: 2 !important;
}
.wc-block-components-payment-method-icons img {
	max-height: 22px !important;
	width: auto !important;
}

/* Place order button — big green primary, full-width with back link stacked below on the left */
.wc-block-checkout__actions_row {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	align-items: stretch !important;
}
.wp-block-woocommerce-checkout-actions-block .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout-actions-block button[type="submit"],
.wc-block-components-checkout-place-order-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	height: 56px !important;
	padding: 0 24px !important;
	border-radius: var(--radius) !important;
	background: var(--accent) !important;
	color: #fff !important;
	font-family: var(--ui) !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	border: 1px solid var(--accent) !important;
	text-decoration: none !important;
	box-shadow: none !important;
	order: 1 !important;
}
.wc-block-checkout__actions_row .wc-block-components-checkout-return-to-cart-button {
	order: 2 !important;
	align-self: flex-start !important;
	width: auto !important;
}
.wp-block-woocommerce-checkout-actions-block button[type="submit"]:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--accent-hover) !important;
	border-color: var(--accent-hover) !important;
}

/* Notices in the checkout */
.wc-block-components-notices .wc-block-components-notice-banner,
.wc-block-components-form-step-error {
	border-radius: var(--radius) !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	border: 1px solid var(--line) !important;
}

/* "Terug naar winkelwagen" back-link next to the submit button — keep it on one line */
.wc-block-components-checkout-return-to-cart-button {
	white-space: nowrap !important;
	font-family: var(--ui) !important;
	font-size: 13px !important;
	color: var(--ink-3) !important;
	text-decoration: none !important;
	flex: 0 0 auto !important;
}
.wc-block-components-checkout-return-to-cart-button:hover { color: var(--ink) !important; }

/* Order summary on the right — mirror our cart-summary block */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-panel {
	border: 0 !important;
	box-shadow: none !important;
}
/* WC adds 16px top-padding to each subtotal/discount/shipping wrapper — strip it for
   tight row spacing (matches the cart summary). Coupon-form block is excluded since
   it keeps its own border + padding for visual emphasis. */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-wrapper:not(.wp-block-woocommerce-checkout-order-summary-coupon-form-block) {
	padding: 0 !important;
	margin: 0 !important;
}
/* Strip the default outer borders/padding around the order-summary block — they
   stack on the outer card border and read as double lines. */
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-block {
	border: 0 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* "Jouw bestelling" title container: let the JS-injected "Wijzig winkelwagen"
   link wrap to its own line under the title text. */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-checkout-order-summary__title {
	flex-wrap: wrap !important;
}
.sw-edit-cart-link {
	flex-basis: 100%;
	display: block;
	font-family: var(--ui);
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-3);
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: 2px;
}
.sw-edit-cart-link:hover { color: var(--ink); }
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-totals-block {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Checkout coupon expander — give it the same bracketing lines as the cart.
   No top margin: the coupon form's border-top doubles as the bottom divider
   for the cart-items block above. */
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	margin: 0 0 12px !important;
	padding: 12px 0 !important;
	border-top: 1px solid var(--line) !important;
	border-bottom: 1px solid var(--line) !important;
}
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel,
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-coupon-form-block .wc-block-components-panel__button {
	font-family: var(--ui) !important;
	font-size: 13px !important;
	color: var(--ink-3) !important;
}
/* Separator line above the order-summary-cart-items list (right under "Jouw bestelling" title) */
.wp-block-woocommerce-checkout-totals-block .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	padding-top: 10px !important;
	border-top: 1px solid var(--line) !important;
}
/* WC wraps the cart-items list in a `.wc-block-components-order-summary` div
   with its own 16px horizontal padding, indenting the rows from the rest of
   the totals column. Reset it so rows align with subtotal/coupon-form etc. */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary {
	padding: 0 !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item {
	padding: 8px 0;
	border-top: 1px solid var(--line-2) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
}
/* Hide the bundle contents in the checkout order summary — both the locked
   child rows (each shown at € 0,00) and the "Includes: Hub M3 × 2 / …" detail
   line on the parent. The kit shows as one clean line; the breakdown was
   confusing here. Scoped broadly so it covers both the sidebar summary and the
   mobile collapsible "Jouw bestelling" fill. */
.wc-block-components-order-summary-item.is-bundled,
.wc-block-components-order-summary-item .wc-block-components-product-details__includes {
	display: none !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item:first-child {
	border-top: 0 !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item:last-child {
	padding-bottom: 12px !important;
}
/* Product image — square with subtle border like the cart line items.
   Reset WC's default margin so the badge anchors to the actual image edge. */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__image {
	width: 56px !important;
	height: 56px !important;
	flex: 0 0 56px !important;
	position: relative !important;
	margin: 0 !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__image img {
	width: 56px !important;
	height: 56px !important;
	/* WC's checkout.css ships max-width: 48px on this img — override or the
	   image renders 48px wide regardless of our width: 56px. Lock the aspect
	   ratio so the inner image never gets stretched into a non-square. */
	max-width: 56px !important;
	max-height: 56px !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: contain !important;
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--line-2) !important;
	background: #fff !important;
	padding: 4px !important;
	box-sizing: border-box !important;
}
/* Qty badge — hidden; the quantity is shown as a "Nx " prefix on the title
   via the `data-sw-qty` attribute set by the swap()/relocate() script and the
   ::before rule on .wc-block-components-product-name below. */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__quantity {
	display: none !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-product-name[data-sw-qty]::before {
	content: attr(data-sw-qty);
	color: var(--ink-3);
	font-weight: 500;
	margin-right: 2px;
}
/* Constrain parents so flex items shrink properly within the card */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary__content,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item {
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__description {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	/* WC default sets padding-left: 24px on top of the row's 12px gap — that
	   doubles the visible gap between image and title. Reset to zero so only
	   the row's `gap: 12px` controls spacing. */
	padding: 0 !important;
	margin: 0 !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-product-name {
	font-family: var(--ui) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	line-height: 1.3 !important;
	min-width: 0 !important;
	display: block !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__total-price {
	font-family: var(--ui) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	color: var(--ink) !important;
	flex: 0 0 auto !important;
	white-space: nowrap !important;
}
/* Reduce vertical spacing between summary totals rows */
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item {
	padding: 4px 0 !important;
}
/* Restyle the "Besteloverzicht" → "Jouw bestelling" title to match the cart's Overzicht */
.wc-block-components-checkout-order-summary__title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--ui) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	letter-spacing: -0.005em !important;
	line-height: 1.2 !important;
	color: var(--ink) !important;
	text-transform: none !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
}
/* Hide duplicate per-item descriptions/unit-prices in the checkout summary — keep just name + line total */
.wp-block-woocommerce-checkout-totals-block .wc-block-cart-item__prices,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-product-metadata,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-product-metadata__description,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-order-summary-item__individual-prices {
	display: none !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-item {
	padding: 4px 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	border: 0 !important;
	text-transform: none !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--line) !important;
	margin-top: 12px !important;
	padding-top: 14px !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item__label,
.wp-block-woocommerce-checkout-totals-block .wc-block-components-totals-footer-item__value {
	font-family: var(--ui) !important;
	font-weight: 600 !important;
	font-size: 18px !important;
	color: var(--ink) !important;
}
.wp-block-woocommerce-checkout-totals-block .wc-block-cart-item__image img {
	border-radius: var(--radius-sm) !important;
	background: #fff !important;
	padding: 4px !important;
	border: 1px solid var(--line-2) !important;
}

/* ──────────────────────────────────────────────────────────────
   Bundle rows in the cart (WooCommerce Product Bundles)
   The plugin tags the parent row .is-bundle and each child .is-bundled.
   Children are locked to the bundle (qty + price fixed), so we strip the
   stepper, remove link and price, shrink the thumbnail and indent them so
   they read as "included in the kit above".
   ────────────────────────────────────────────────────────────── */
/* Bundle parent gets its divider; the first child loses it so the whole group
   reads as one block. */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundle > td { padding-bottom: 6px !important; }

/* Child rows: compact single flex line — small thumbnail, full-width name, and
   an "Inbegrepen in de set" note — indented only ~10px. (Lives outside the grid
   used by normal rows so the name never crushes against a shared image column.) */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 6px 0 6px 10px !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled > td {
	border-top: 0 !important;
	padding: 0 !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__image {
	flex: 0 0 40px !important;
	width: 40px !important;
	padding: 0 !important;
}
/* The image link can collapse to 0 width (letting the img overflow into the
   name) — pin the link and the img, and undo WC's absolute positioning. */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__image > * {
	display: block !important;
	width: 40px !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__image img {
	position: static !important;
	inset: auto !important;
	margin: 0 !important;
	width: 40px !important;
	height: 40px !important;
	max-width: none !important;
	padding: 4px !important;
}
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__product {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding: 0 !important;
}
/* WC's wrap is a 2-col grid with a big left padding to clear a row-spanning
   image; flatten it so the name spans the full width and the note sits below. */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap {
	display: block !important;
	grid-template-columns: none !important;
	padding: 0 !important;
}
/* Child product name: smaller, muted — it's a sub-line of the bundle */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-components-product-name {
	font-size: 13px !important;
	color: var(--ink-2) !important;
	font-weight: 400 !important;
}
/* Children are fixed by the bundle — hide qty stepper, remove link and price */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__quantity,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__remove-link,
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__total {
	display: none !important;
}
/* Label each locked child instead of a stepper */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row.is-bundled .wc-block-cart-item__wrap::after {
	content: "Inbegrepen in de set";
	display: block;
	font-size: 11px;
	color: var(--ink-3);
	margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────────
   Narrow cart line items (items column ≤480px)
   When the items column is narrow — a phone, OR the 2-column desktop cart on a
   mid-width screen — the horizontal image | name+qty | price row can't fit and
   the fixed-width qty stepper overflows into the price. Below this width we
   shrink the thumbnail, stack title → qty → remove, and let the price sit on
   its own. Driven by a container query so it tracks the real column width.
   ────────────────────────────────────────────────────────────── */
@container sw-cart (max-width: 480px) {
	/* Two columns: the image spans on the left, everything else stacks on the
	   right (name → qty → remove, then the price on its own line). This stops
	   the fixed-width qty stepper and the price column from fighting over the
	   little horizontal room a narrow column has. */
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) {
		grid-template-columns: auto minmax(0, 1fr) !important;
		align-items: start !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__image {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__product {
		grid-column: 2 !important;
		grid-row: 1 !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__total {
		grid-column: 2 !important;
		grid-row: 2 !important;
		/* Left-align the price and its "N × € …" subtitle on mobile — reads more
		   naturally under the qty/remove stack. Also kill the price element's
		   auto-margin so it stays left with the cell. */
		text-align: left !important;
		padding-top: 8px !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__total .sw-line-calc {
		text-align: left !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__total .wc-block-components-formatted-money-amount,
	.wp-block-woocommerce-cart-items-block .wc-block-cart-items__row:not(.is-bundled) .wc-block-cart-item__total .wc-block-components-product-price {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-item__image {
		width: 84px !important;
		padding-right: 14px !important;
		vertical-align: top !important;
	}
	.wp-block-woocommerce-cart-items-block .wc-block-cart-item__image img {
		width: 70px !important;
		height: 70px !important;
		padding: 6px !important;
	}
	/* Top-align the product + total cells so the name lines up with the
	   thumbnail's top edge instead of floating in the middle of the row. */
	.wp-block-woocommerce-cart-items-block .wc-block-cart-item__product { vertical-align: top !important; }
	.wp-block-woocommerce-cart-items-block .wc-block-cart-item__total {
		vertical-align: top !important;
		padding-top: 2px !important;
	}
	/* Stack the title → qty → remove vertically in one column on mobile so
	   nothing overlaps in the narrow product cell. */
	.wc-block-cart-item__wrap {
		grid-template-columns: 1fr !important;
		row-gap: 8px !important;
		align-items: start !important;
		justify-items: start !important;
	}
	.wc-block-cart-item__wrap > a.wc-block-components-product-name { grid-row: 1 !important; }
	.wc-block-cart-item__quantity {
		grid-column: 1 !important;
		grid-row: 2 !important;
	}
	.wc-block-cart-item__remove-link {
		grid-column: 1 !important;
		grid-row: 3 !important;
	}
	.wc-block-components-product-name {
		font-size: 14px !important;
	}
	/* Tighten the qty stepper so the title keeps more room */
	.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
		max-width: 96px !important;
	}
	.wc-block-cart-item__total .wc-block-components-product-price,
	.wc-block-cart-item__total .wc-block-components-formatted-money-amount {
		font-size: 15px !important;
	}
}