/* ==========================================================================
   Cart Block — HoezoSchattig styling
   --------------------------------------------------------------------------
   Styles the native WooCommerce Cart block (.wp-block-woocommerce-cart) to
   match the brand design: white cards, pink CTA, outline qty steppers, a
   sticky "Overzicht" summary sidebar. Scoped to the cart wrapper so it never
   touches other surfaces. No !important — neutralisations live in
   woocommerce-reset.css. WooCommerce sets container-type on .wc-block-cart,
   so responsive rules use @container, not @media.
   ========================================================================== */

.wp-block-woocommerce-cart {
	--hs-cart-border: #F0E4EB;
	--hs-cart-input-border: #E0D4DA;
	--hs-cart-text-secondary: #999;
	--hs-cart-text-gray: #888;
	--hs-cart-thumb-bg: #FFF0F5;
	--hs-cart-cross-sell-bg: #FFF5F9;
}

/* ==========================================================================
   Two-column layout
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
	gap: 24px;
	align-items: flex-start;
}

.wp-block-woocommerce-cart .wc-block-cart__main {
	margin: 0;
	padding: 0;
	/* Grow to fill the wide cart; the sidebar is fixed-width, so without this the
	   content sits at its natural width and leaves empty space on the right. */
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--hs-cart-border);
	border-radius: 12px;
	padding: 20px;
}

@container (min-width: 700px) {
	.wp-block-woocommerce-cart .wc-block-cart__sidebar {
		flex: 0 0 300px;
		max-width: 300px;
		position: sticky;
		top: 120px;
	}
}

/* ==========================================================================
   Product list — render the items table as a single white card
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart-items {
	/* White fill is re-asserted in woocommerce-reset.css (WC forces the table
	   background transparent with !important); here we add the card frame. */
	border: 1px solid var(--hs-cart-border);
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
}

/* The design has no "Product / Totaal" header row */
.wp-block-woocommerce-cart .wc-block-cart-items__header {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-cart-items__row {
	padding: 0;
}

.wp-block-woocommerce-cart .wc-block-cart-items__row td {
	border-top: 1px solid var(--hs-cart-border);
	padding-top: 12px;
	padding-bottom: 12px;
}

/* Hide WooCommerce's "Bespaar €X" sale badge in cart rows (not in the design) */
.wp-block-woocommerce-cart .wc-block-components-sale-badge {
	display: none;
}

.wp-block-woocommerce-cart .wc-block-cart-items__row:first-child td {
	border-top: none;
}

/* Thumbnail */
.wp-block-woocommerce-cart td.wc-block-cart-item__image {
	padding-left: 18px;
	padding-right: 0;
	width: 60px;
}

.wp-block-woocommerce-cart td.wc-block-cart-item__image img {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--hs-cart-thumb-bg);
}

/* Vertically centre the row so thumb / name / qty / price sit on one line */
.wp-block-woocommerce-cart .wc-block-cart-items__row td {
	vertical-align: middle;
}

/* Product cell — name + meta on the left, qty stepper + remove on the right */
.wp-block-woocommerce-cart td.wc-block-cart-item__product {
	padding-left: 14px;
}

/* Lay the row out as [name/meta left] [stepper + remove right]; the price is in
   the separate total cell. WooCommerce's own cart.css sets __wrap to
   display:flex;flex-direction:column and __quantity to flex-row at specificity
   (0,3,1), so these two overrides mirror its table.../row chain to out-specify it
   (the low-specificity version was silently losing and the grid never applied). */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name qty"
		"meta qty";
	align-items: center;
	column-gap: 14px;
	row-gap: 2px;
}

.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-name {
	grid-area: name;
}

.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-cart-item__wrap .wc-block-components-product-details {
	grid-area: meta;
}

.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
	grid-area: qty;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-cart .wc-block-components-product-name {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	text-decoration: none;
	line-height: 1.35;
}

.wp-block-woocommerce-cart .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-metadata,
.wp-block-woocommerce-cart .wc-block-cart-item__product .wc-block-components-product-details {
	font-size: 12px;
	color: var(--hs-cart-text-secondary);
	margin-top: 2px;
	line-height: 1.4;
}

/* Short product description — design shows only add-on/variation meta, not the
   blurb. Keep .wc-block-components-product-details (variation + WCPA add-ons). */
.wp-block-woocommerce-cart .wc-block-components-product-metadata__description {
	display: none;
}

/* Per-unit price under the name — hide (design shows only line total at right).
   WooCommerce's own cart.css sets this to display:flex at 0,3,1, so the override
   must out-specify it (match its table.../row structure, +1 wrapper class). */
.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	display: none;
}

/* Total (right column). WooCommerce sets this cell to display:flex, which drops
   it out of the table layout so it shrinks to its content (~35px) and sits at the
   top of the taller row. Restore display:table-cell (like the image/product
   cells) so it fills the row height, then vertical-align:middle lines the price
   up with the stepper + remove. The price wrapper is right-aligned below. */
.wp-block-woocommerce-cart td.wc-block-cart-item__total {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	padding-right: 18px;
	font-size: 14px;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	justify-content: flex-end;
}

.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price {
	font-size: 14px;
	font-weight: 700;
	color: #333;
}

/* ==========================================================================
   Quantity stepper — match the classic 28px outline circles
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	border: none;
	border-radius: 0;
	width: auto;
	display: inline-flex;
	align-items: center;
	gap: 0;
	min-height: 0;
}

/* DOM order is input → minus → plus; reorder to −  [n]  + */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--minus {
	order: 1;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
	order: 2;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button--plus {
	order: 3;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button {
	/* Flex-centre so the fullwidth ＋ / − glyph sits dead-centre — text-align alone
	   leaves it slightly left because of the glyph's side bearing. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 28px;
	flex: 0 0 28px;
	border-radius: 50%;
	border: 1px solid var(--hs-cart-input-border);
	background: var(--wp--preset--color--base);
	color: #666;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	padding: 0;
	transition: border-color 0.15s, color 0.15s;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__button:hover:not(:disabled) {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector__input {
	width: 30px;
	min-width: 30px;
	border: none;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: #333;
	padding: 0;
}

/* Remove control — WooCommerce renders an SVG trash icon button; it sits inline
   with the stepper (gap from __quantity), so no extra margin. */
.wp-block-woocommerce-cart .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	color: #aaa;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	transition: color 0.15s;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.wp-block-woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Order summary sidebar — white "Overzicht" card
   ========================================================================== */

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Native order puts the coupon at the top; the design has it at the bottom.
   No margin-top: the coupon's border-top is the divider below the trust badges,
   so its gap above must match the trust's gap below (the slot padding) — the
   trust's own padding alone provides it, keeping the badges centred between the
   two dividers. The padding-top spaces the coupon toggle below its divider. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	order: 10;
	margin-top: 0;
	padding-top: 14px;
	border-top: 1px solid var(--hs-cart-border);
}

.wp-block-woocommerce-cart .wc-block-cart__totals-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	color: #333;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 14px;
	padding: 0;
}

/* WooCommerce hides the "Overzicht" title on mobile (≤699px); show it here too.
   Out-specifies WC's `.wc-block-cart .wc-block-components-sidebar …` (0,3,0). */
@container (max-width: 699px) {
	.wp-block-woocommerce-cart .wc-block-cart .wc-block-components-sidebar .wc-block-cart__totals-title {
		display: block;
	}
}

.wp-block-woocommerce-cart .wc-block-components-totals-item {
	font-size: 13px;
	color: var(--hs-cart-text-gray);
	padding: 4px 0;
}

.wp-block-woocommerce-cart .wc-block-components-totals-item__value {
	color: #333;
	font-weight: 600;
}

/* Footer total — WooCommerce's totals-wrapper already draws the divider above
   it; don't add a second border-top (that caused a double line). */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item {
	padding-top: 4px;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: 15px;
	font-weight: 700;
	color: #333;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 22px;
	font-weight: 700;
	color: #333;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item-tax {
	font-size: 11px;
	color: var(--hs-cart-text-secondary);
}

/* ==========================================================================
   Coupon panel
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-components-totals-coupon {
	padding: 0;
}

/* "Coupons toevoegen" toggle */
.wp-block-woocommerce-cart .wc-block-components-panel__button {
	font-size: 13px;
	font-weight: 600;
	color: #555;
}

/* WooCommerce already lays the form out as a flex row (input + button); we only
   brand it — compact input, pink "Toepassen" button. */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__form {
	flex-wrap: nowrap;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input {
	border: 1px solid var(--hs-cart-input-border);
	border-radius: 8px;
	font-size: 13px;
}

/* Brand focus — without this the browser's default blue focus ring shows (the
   cart has no generic text-input focus rule like the checkout does). */
.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: none;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon__input label {
	font-size: 13px;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon__button {
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	font-size: 13px;
	font-weight: 600;
	min-height: 0;
}

.wp-block-woocommerce-cart .wc-block-components-totals-coupon__button:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/* ==========================================================================
   Checkout button
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart__submit-container {
	margin-top: 16px;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	width: 100%;
	margin: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
	border-radius: 10px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: 700;
	padding: 15px;
	text-align: center;
	cursor: pointer;
	transition: background 0.2s;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	animation: gelatine 0.5s;
}

/* Accepted-payment icons under the button */
.wp-block-woocommerce-cart .wc-block-components-payment-method-icons {
	margin-top: 14px;
}

/* ==========================================================================
   Cross-sells ("Past hier ook mooi bij")
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart__main .wp-block-woocommerce-product-collection {
	margin-top: 16px;
	/* The block ships a 30px default margin-bottom; on mobile (main stacked above
	   the sidebar) that compounds with the layout gap into a big empty band. It's
	   the last block in the column, so drop it. */
	margin-bottom: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--hs-cart-border);
	border-radius: 12px;
	padding: 16px 18px;
}

.wp-block-woocommerce-cart .wc-block-cart__main .wp-block-woocommerce-product-collection > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	color: var(--wp--preset--color--primary);
	margin: 0 0 12px;
}

/* Horizontal mini-cards: [thumb] [name / price] [+ knop] */
.wp-block-woocommerce-cart .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-cart .wc-block-product-template .wc-block-product {
	display: grid;
	grid-template-columns: 50px 1fr auto;
	grid-template-areas:
		"img title btn"
		"img price btn";
	align-items: center;
	column-gap: 12px;
	row-gap: 1px;
	background: var(--hs-cart-cross-sell-bg);
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0;
	text-align: left;
}

.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-image {
	grid-area: img;
	margin: 0;
}

.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-image img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 8px;
}

.wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title {
	grid-area: title;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	text-align: left;
}

.wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title a {
	color: #333;
	text-decoration: none;
}

.wp-block-woocommerce-cart .wc-block-product-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
}

.wp-block-woocommerce-cart .wc-block-product-template .wp-block-woocommerce-product-price {
	grid-area: price;
	font-size: 13px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0;
	text-align: left;
}

.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-button {
	grid-area: btn;
	margin: 0;
}

.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-button .wp-element-button {
	font-size: 12px;
	font-weight: 600;
	padding: 7px 12px;
	background: var(--wp--preset--color--base);
	color: #555;
	border: 1px solid var(--hs-cart-input-border);
	border-radius: 8px;
	min-height: 0;
	white-space: nowrap;
}

.wp-block-woocommerce-cart .wc-block-product-template .wc-block-components-product-button .wp-element-button:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--base);
}

/* ==========================================================================
   Free-gift progress — the "Nog €X tot je gratis verrassing" bar. Shown only
   while LOCKED; once unlocked the gift shows as the in-cart "Gratis verrassing"
   row instead. It is portalled (from the OrderMeta slot's reactive props) into
   the .hs-gift-progress-slot placeholder so it sits as the last row of the cart
   items column — matching the design — instead of in the sidebar.
   ========================================================================== */

/* Portal target in the items column: spacing only when it holds the bar
   (unlocked → the portal renders nothing, so it collapses). */
.wp-block-woocommerce-cart .hs-gift-progress-slot:not(:empty) {
	margin-top: 12px;
}

.wp-block-woocommerce-cart .hs-gift-progress-slot .hs-gift-progress {
	margin-top: 0;
}

.wp-block-woocommerce-cart .hs-gift-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	background: #FBEAF0;
	border-radius: 12px;
	padding: 14px 18px;
	margin-top: 16px;
}

.wp-block-woocommerce-cart .hs-gift-progress__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.6);
	color: #993556;
}

.wp-block-woocommerce-cart .hs-gift-progress__body {
	flex: 1;
	min-width: 0;
}

.wp-block-woocommerce-cart .hs-gift-progress__text {
	display: block;
	font-size: 13px;
	color: #72243E;
	line-height: 1.35;
}

.wp-block-woocommerce-cart .hs-gift-progress__text strong {
	font-weight: 700;
}

.wp-block-woocommerce-cart .hs-gift-progress__bar {
	height: 6px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	margin-top: 8px;
	overflow: hidden;
}

.wp-block-woocommerce-cart .hs-gift-progress__fill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), #993556);
	transition: width 0.4s ease;
}

/* ==========================================================================
   Free-gift line item — the pink "Gratis verrassing" status row.
   The row is tagged with .hs-gift-item via the cartItemClass checkout filter;
   the remove link is dropped via showRemoveItemLink and the stepper via the
   store-api quantity-editable filter. Here we paint the row and add the icon +
   sub-line (the only parts with no official filter), and hide the €0 price /
   residual quantity for this row only.
   ========================================================================== */

.wp-block-woocommerce-cart .wc-block-cart-items__row.hs-gift-item td {
	background: #FBEAF0;
}

.wp-block-woocommerce-cart .hs-gift-item td.wc-block-cart-item__image img {
	display: none;
}

.wp-block-woocommerce-cart .hs-gift-item td.wc-block-cart-item__image::before {
	content: "";
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6) center / 24px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23993556' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v10H4V12'/%3E%3Cpath d='M2 7h20v5H2z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

.wp-block-woocommerce-cart .hs-gift-item .wc-block-components-product-name {
	color: #72243E;
	pointer-events: none;
}

/* The "Je ontvangt een gratis verrassing!" sub-line — no official filter exists
   to add a second line, so it is decorative CSS content in the meta cell. */
.wp-block-woocommerce-cart .hs-gift-item .wc-block-cart-item__wrap .wc-block-components-product-name::after {
	content: "Je ontvangt een gratis verrassing!";
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: #993556;
	margin-top: 2px;
}

/* Hide the €0 price and the static quantity for the gift row only. Hide the
   price-cell CONTENTS (not the <td>) — `visibility:hidden` on the td would also
   hide its border-top, leaving the divider above the gift row short on the right. */
.wp-block-woocommerce-cart .hs-gift-item td.wc-block-cart-item__total > *,
.wp-block-woocommerce-cart .hs-gift-item .wc-block-cart-item__quantity {
	visibility: hidden;
}

/* Trust badges (rendered in the OrderMeta slot). WooCommerce wraps the slot
   content with a generous `padding: 16px 0` (.slot-wrapper > * > *), which made
   the trust block dominate the sidebar — trim it. Its wrapper already draws the
   divider above, so the badges add no border/margin of their own (the trimmed
   padding now provides the gap). */
.wp-block-woocommerce-cart .wc-block-components-totals-wrapper.slot-wrapper > * > * {
	padding-top: 8px;
	padding-bottom: 8px;
}

.wp-block-woocommerce-cart .hs-cart-trust {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 0;
}

.wp-block-woocommerce-cart .hs-cart-trust__item {
	text-align: center;
}

.wp-block-woocommerce-cart .hs-cart-trust__icon {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 2px;
	stroke: #575760;
}

.wp-block-woocommerce-cart .hs-cart-trust__label {
	font-size: 11px;
	color: #888;
	white-space: nowrap;
}

/* ==========================================================================
   Deposit / Borg box — style the native fee block (which sits above the total)
   as the blue panel + a "retour" sub-line. :has() gates it so an empty fee
   block (no borg) shows nothing. The borg is the only cart fee in this shop.
   ========================================================================== */

/* No fee → hide the empty wrapper so it doesn't leave a stray divider. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block:not(:has(.wc-block-components-totals-item)) {
	display: none;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block:has(.wc-block-components-totals-item) {
	border-top: none;
	background: #E5F6FC;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 12px 0;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block .wc-block-components-totals-item__label,
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block .wc-block-components-totals-item__value {
	font-size: 12px;
	font-weight: 700;
	color: #1580A6;
}

.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-fee-block:has(.wc-block-components-totals-item)::after {
	content: "Volledig retour na inlevering product";
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: #1E9EC5;
	margin-top: 1px;
}

/* ==========================================================================
   Responsive (cart container is inline-size; use @container)
   ========================================================================== */

@container (max-width: 699px) {
	.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout {
		gap: 18px;
	}

	.wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
		padding: 16px;
	}

	.wp-block-woocommerce-cart .wc-block-cart__submit-button {
		font-size: 16px;
		padding: 16px;
	}

	.wp-block-woocommerce-cart .wc-block-product-template {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Mobile item layout (≤699px, WooCommerce's single-column breakpoint) — the
   desktop one-line row (name | stepper+trash | price) can't fit at phone widths
   and squeezes the name into 2-3 wrapped lines. Match the original mobile cart
   instead: a compact two-line item — circular thumb on the left, the product
   name on its own line, the qty stepper and line total together below. Achieved
   by flattening the table cells (display:contents) into a per-row grid so
   name/meta/qty/total become row grid items.
   -------------------------------------------------------------------------- */
@container (max-width: 699px) {
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row {
		display: grid;
		grid-template-columns: 46px 1fr auto;
		grid-template-areas:
			"img name  name"
			"img meta  meta"
			"img qty   price";
		column-gap: 12px;
		row-gap: 4px;
		align-items: center;
		padding: 14px 16px;
		border-top: 1px solid var(--hs-cart-border);
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row:first-child {
		border-top: none;
	}

	/* WooCommerce gives each row a grey border-bottom that is invisible on desktop
	   (table-row borders don't paint) but DOES paint on mobile (the row is grid),
	   doubling up with our pink border-top. Neutralise it — match WC's
	   `:not():not()` specificity so this wins — leaving only our divider. */
	.wp-block-woocommerce-cart .wc-block-cart table.wc-block-cart-items:not(.wc-block-mini-cart-items):not(:last-child) .wc-block-cart-items__row {
		border-bottom: none;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td {
		border-top: none;
		padding: 0;
	}

	/* Flatten the product cell + its wrap so the inner name/meta/qty become grid
	   items of the row alongside the image + total cells. */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap {
		display: contents;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image {
		grid-area: img;
		align-self: center;
		width: 46px;
	}

	/* The image link is display:inline here, so it shrink-wraps a portrait source
	   to an oval. Force the link + img to a fixed 46px circle (full prefix to
	   out-specify WC's `…__image img { width: 100% }`). */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image > a {
		display: block;
		width: 46px;
		height: 46px;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image img {
		width: 46px;
		height: 46px;
		object-fit: cover;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
		grid-area: name;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-metadata,
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product .wc-block-components-product-details {
		grid-area: meta;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity {
		grid-area: qty;
		justify-content: flex-start;
	}

	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
		grid-area: price;
		display: block;
		align-self: center;
		text-align: right;
		padding: 0;
	}
}

/* ==========================================================================
   Empty-cart state — replicates the classic cart's blue info notice
   (old theme: .woocommerce-info — bright-blue bar, white text, 10px radius)
   followed by the standard brand button ("Terug naar winkel").
   ========================================================================== */

.wp-block-woocommerce-cart .hs-cart-empty__notice {
	background: var(--wp--preset--color--secondary);
	color: #fff;
	border-radius: 10px;
	padding: 12px 20px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 24px;
}

/* WooCommerce 10.9+ renders the selected shipping-rate name under the shipping
   total (totals-shipping__via) when multiple rates exist. Redundant here — the
   rate list sits directly in the same summary — and it shifts the approved
   layout, so keep it hidden. */

.wp-block-woocommerce-cart .wc-block-components-totals-shipping__via {
	display: none;
}