/*
 * Empty cart (Theme 0.39.1, drawing replaced in Theme 0.39.5). The Cart block of WooCommerce shows a sad face above "Je winkelwagen is
 * momenteel leeg!" (`.with-empty-cart-icon::before`, a mask that takes the colour of the heading). The winking pair of trousers that the
 * owner had drawn takes its place: same box, same colour, so the layout does not move. The icon is decorative (`content: ""`, no text),
 * it is one inline SVG (no request; the drawing traced to one path, the eye, the wink and the smile cut out of the trousers, the pocket and
 * the waistband separated from them by the seam) and the stylesheet only loads on the cart page. The selector is one class longer than the
 * one of WooCommerce, so the order of the two stylesheets does not matter.
 */
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M29.1 95.9C23.8 95.5 21.7 94.8 21.3 93.1C21.1 92.4 21.2 90.5 21.6 87.2C22.8 78.9 22.9 74.4 22.3 69.2C21.9 66.4 21.8 65.7 19.2 54.9C17.4 47.5 16.2 42.2 15.7 38.6C15.3 35.8 15.3 35.9 15.4 35.9C18.1 35.1 19.7 34.1 21.2 32.1C23 29.7 24.2 25.8 24.6 21.4L24.6 20.5L25 20.4C25.2 20.4 25.8 20.3 26.3 20.2C33.3 19.4 43.9 16.6 52.1 13.3C54.2 12.5 54.7 12.3 56.7 11.3L58.5 10.4L58.8 10.8C60.1 12.3 61.6 15.4 62.7 18.7C64.3 23.4 66.5 32.3 68.2 41.4C69.2 46.3 71.2 55.2 71.9 57.1C72.4 58.7 73 60.2 74.3 63C75.5 65.7 76.3 67.3 78.4 70.7C79.3 72.3 80.9 75 81.9 76.7C84.4 80.8 84.8 81.7 84.8 82.5C84.8 84 83.6 85.3 79.9 87.4C73.8 90.9 66.4 92.9 63.9 91.8C62.5 91.2 61.5 89.3 58.5 81C57.1 77.1 56 74.6 55 73C51 66.5 49.6 63.4 45.1 50.9C44.5 49.3 44.1 49 43.6 49.5C43.3 49.9 43.2 50.6 43.3 54.2C43.5 59.3 43.9 62.3 45.3 71.3C47.1 82.2 48.1 88.9 48.3 91.5C48.4 94.1 47.7 94.7 43.3 95.3C39.9 95.9 32.6 96.1 29.1 95.9ZM43.3 39.1C46 38.6 48.3 37.4 49.9 35.7C51 34.5 51.4 33.7 50.9 33.2C50.5 32.6 50.2 32.8 48.8 34.1C47.4 35.4 46.3 36.1 44.8 36.6C42.1 37.6 39.6 37.6 37 36.8C36.1 36.5 35.6 36.7 35.6 37.4C35.6 38 36.2 38.5 37.7 39C39.2 39.4 41.5 39.5 43.3 39.1ZM15.1 33.6C15 33.1 15.2 29.7 15.4 28.2C15.7 25.5 16.5 22 17.1 21L17.3 20.5L18.4 20.6C19 20.6 20.2 20.6 21.1 20.6L22.8 20.6L22.7 21.5C22.4 25.4 21.1 29.3 19.3 31.4C18.4 32.6 16.7 33.7 15.7 33.8C15.2 33.9 15.2 33.9 15.1 33.6ZM35.2 32.9C36.8 32.2 37.4 29.3 36.4 27.1C35.3 24.7 32.8 24.4 31.7 26.6C31.3 27.3 31.3 27.3 31.3 28.7C31.3 29.8 31.3 30.1 31.5 30.6C32.2 32.6 33.8 33.5 35.2 32.9ZM48.9 27.7C50.6 26.4 52.7 26 55.1 26.6L56 26.9L56.3 26.7C57 26.1 56.8 25.3 55.9 24.9C54.9 24.4 52.9 24.2 51.6 24.5C51.3 24.5 51 24.5 51 24.5C50.9 24.5 51.2 24.3 51.5 24.1C52.2 23.6 53.4 23.2 54.2 23.1C55.2 23 55.6 22.4 55.2 21.7C54.9 21.1 54.4 21 53.1 21.3C50.7 21.8 48.3 23.8 47.3 26.1C46.9 27 46.9 27.4 47.4 27.8C47.8 28.2 48.1 28.2 48.9 27.7ZM18.5 18.8C17.5 18.7 17.4 18.7 17.2 18.5C16.5 17.6 16.1 14.2 16.7 13.3C17.1 12.6 17.6 12.5 20.2 12.2C30.6 11.3 42 8.7 53.5 4.7C56.1 3.7 56.7 3.8 57.4 4.9C58 6.1 58.3 8.3 57.8 8.8C57.3 9.3 51.6 11.7 47.2 13.2C36.3 16.9 24.1 19.3 18.5 18.8Z'/%3E%3C/svg%3E");
}

/*
 * One font on the cart page (Theme 0.56.2; owner, 31 October 2026: "lettertype is in winkelwagen niet goede font"). The page mixed three: the title
 * and the headings in Unna (a serif), the button in Montserrat and everything else (the item, its price and options, the totals, the coupon, the
 * quantity) in the body font, Inter, which no page loads, so a visitor saw Segoe UI or Arial. The cart now has the one font of the menu and of the
 * checkout page: Montserrat, through the variable the menu uses (decision for the checkout page, 31 October 2026: "het lettertype dat ook in het
 * megamenu wordt gebruikt"; the same choice is assumed here). It is set on the content of the page (`main`), not on the header and the footer:
 * the menu already has that font and the footer keeps its own text. As on the checkout page the headings are a little smaller than they were in
 * the serif, because Montserrat is wider and has a larger x-height at the same size.
 *
 * Every rule here carries the body class and an element or a second class, so it weighs more than the theme's rules for headings (`h1` to `h6`
 * in release-012.css, `.bpal-entry__header h1` and `.bpal-page-content .bpal-entry__content h2`: at most two classes and an element) whichever
 * stylesheet prints first. The stylesheet itself depends on the last stylesheet of the theme (hover-stability.css, see functions.php), so that it loads after it.
 */
body.bpal-is-cart main,
body.bpal-is-cart main * {
	font-family: var(--bpal-heading);
}

body.bpal-is-cart .bpal-entry__header h1 {
	font-size: clamp(1.625rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

body.bpal-is-cart .bpal-entry__content :is(h2, h3) {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
}

/* The message of the empty cart is the one statement on that page: a little larger than the other headings. */
body.bpal-is-cart .bpal-entry__content .wc-block-cart__empty-cart__title {
	font-size: 1.5rem;
	font-weight: 700;
}

/*
 * Three font sizes on the cart with items (Theme 0.60.1; owner, 1 November 2026: "drie lettergroottes", variant B, "met verzendkosten niet bold").
 * The page had six visible sizes: the title (32 px), the totals (19), the button (16), the plus and minus of the quantity (14.4), the name, prices,
 * coupon and shipping (13) and the options of the item (11.4). Now: the title 32 px (26 px on a narrow screen, as before), the total 20 px and
 * everything else 14 px, the options of the item included (they stay grey). The Cart block takes its sizes from the font size presets of
 * WordPress (`--wp--preset--font-size--small` for the name, the prices, the quantity and the summary, `--x-small` for the options, `--medium` for
 * the total), so the presets are set here, on the block with items only, and everything that reads them follows, also an element that the block adds
 * later (the form of the coupon, a notice about the stock). The plus and minus (`.9em`) and the button take no preset and get 14 px themselves. The amount
 * of the shipping is the one text the block makes bold (`<strong>`): it is not. The empty cart keeps its own sizes, and so do the header and the footer.
 */
body.bpal-is-cart .wp-block-woocommerce-filled-cart-block {
	--wp--preset--font-size--small: 14px;
	--wp--preset--font-size--x-small: 14px;
	--wp--preset--font-size--medium: 20px;
}

body.bpal-is-cart .wp-block-woocommerce-filled-cart-block :is(.wc-block-components-quantity-selector__button, .wc-block-cart__submit-button, .wc-block-cart__submit-button .wc-block-components-button__text) {
	font-size: 14px;
}

body.bpal-is-cart .wp-block-woocommerce-filled-cart-block .wc-block-components-totals-shipping .wc-block-components-totals-item__value strong {
	font-weight: 400;
}