/*
 * Cart and checkout.
 *
 * Loaded only on those pages (see inc/cart-checkout.php) — none of it
 * belongs in woocommerce.css, which is render-blocking on product pages.
 *
 * WHICH MARKUP THIS TARGETS
 * This shop uses the WooCommerce **Cart** and **Checkout blocks**, not
 * the old `[woocommerce_cart]` shortcode. That markup is completely
 * different: no `table.shop_table`, no `#customer_details`, no
 * `form.checkout`. Everything is `.wc-block-*`, rendered by React from
 * the Store API. Rules written against the classic classes match
 * nothing here, so this file speaks the block vocabulary throughout.
 *
 * The order-received page is still a classic template, so that section
 * at the bottom keeps the old class names on purpose. My Account is
 * classic too, but it has a sheet of its own — assets/css/account.css —
 * because neither page should carry the other's CSS through the
 * critical path.
 *
 * SPECIFICITY STANDARD
 * Same principle as the product page: WooCommerce's own sheet
 * (wc-blocks-style) is on the page and may print after ours, so ties
 * decided on source order are not safe to rely on. Every rule is
 * prefixed:
 *
 *   body.woocommerce-cart .wc-block-cart …
 *   body.woocommerce-checkout .wc-block-checkout …
 *
 * That is (0,3,1) against block CSS which is mostly (0,1,0)–(0,3,0), so
 * these win on weight rather than on luck. Keep the prefix even where it
 * looks redundant; the rule that drops it is the one that stops working
 * after the next WooCommerce release.
 *
 * NO TEMPLATE OVERRIDES
 * German Market (3.30+) is compatible with the blocks and adds its
 * legally required parts as inner blocks and Store API extensions — the
 * AGB and Widerruf checkboxes via the "German Market Checkboxes" block,
 * the per-item tax rows, the Grundpreis, the pay-obligation wording on
 * the order button. All of that lands inside the styles below rather
 * than beside them, which stays true only as long as nothing here
 * replaces markup.
 */

/* ---------- Page frame ---------- */

body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
	padding-block: 2rem 4.5rem;
}

body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.4vw, 2.5rem);
	line-height: 1.15;
	margin: 0 0 2.25rem;
	color: var(--fk-color-text);
}

/* The blocks declare alignwide. There is no wide layout on these two
   pages — the content column is already 75rem — so neutralise it rather
   than let the block escape the column it was measured in. */
body.woocommerce-cart .entry-content > .alignwide,
body.woocommerce-checkout .entry-content > .alignwide {
	max-width: 100%;
	margin-inline: 0;
}

/* ---------- Shared: buttons ---------- */

/* One button in two weights: solid dark for the step forward, quiet
   outline for everything else. Sage on hover with the dark label on it
   — 7.7:1, the same pairing as the product page.
   `.wc-block-components-button` otherwise carries WooCommerce purple. */
body.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link),
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button:not(.is-link) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.875rem 2rem;
	border: 1px solid var(--fk-color-text);
	border-radius: 0.25rem;
	background: var(--fk-color-text);
	color: #fff;
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link):hover,
body.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link):focus-visible,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button:not(.is-link):hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button:not(.is-link):focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
	box-shadow: 0 10px 24px rgba(31, 31, 31, 0.22);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-button:not(.is-link):disabled,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button:not(.is-link):disabled {
	opacity: 0.55;
	box-shadow: none;
}

/* Outline weight: the coupon "Einlösen" and anything secondary. */
body.woocommerce-cart .wc-block-cart .wc-block-components-button.outlined,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.outlined {
	background: transparent;
	color: var(--fk-color-text);
	border-color: rgba(31, 31, 31, 0.35);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-button.outlined:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.outlined:hover {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
}

/* Text buttons. */
body.woocommerce-cart .wc-block-cart .wc-block-components-button.is-link,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.is-link {
	color: var(--fk-color-sage-text);
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-button.is-link:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-button.is-link:hover {
	color: var(--fk-color-text);
}

/* Focus is the one thing a checkout may not lose. */
body.woocommerce-cart .wc-block-cart :focus-visible,
body.woocommerce-checkout .wc-block-checkout :focus-visible {
	outline: 2px solid var(--fk-color-sage-dark);
	outline-offset: 2px;
}

/* ---------- Shared: typography ---------- */

body.woocommerce-cart .wc-block-cart .wc-block-components-title,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fk-color-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-product-name,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-product-name {
	font-family: var(--fk-font-serif);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--fk-color-text);
	text-decoration: none;
}

body.woocommerce-cart .wc-block-cart a.wc-block-components-product-name:hover {
	color: var(--fk-color-sage-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Where the greeting-card motif, the message and the requested delivery
   date arrive: cart item meta comes through this list. */
body.woocommerce-cart .wc-block-cart .wc-block-components-product-details,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-product-details {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fk-color-sage-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-product-details__name,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-product-details__name {
	font-weight: 400;
	color: var(--fk-color-body);
}

/* ---------- Shared: totals rows ---------- */

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item {
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	color: var(--fk-color-body);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__label {
	font-weight: 400;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-item__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-item__description {
	font-size: 0.8125rem;
	color: var(--fk-color-sage-text);
}

/* The line the eye goes to — and where German Market prints its
   "inkl. MwSt." note underneath. */
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item {
	padding-top: 1rem;
	border-top: 1px solid rgba(31, 31, 31, 0.14);
	font-family: var(--fk-font-serif);
	font-size: 1.25rem;
	color: var(--fk-color-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 500;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item__tax-value,
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item__tax-value,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__description {
	font-family: var(--fk-font-sans);
	font-size: 0.8125rem;
	color: var(--fk-color-sage-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-wrapper,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-wrapper {
	border-color: rgba(31, 31, 31, 0.12);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-discount__coupon-list,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-discount__coupon-list {
	font-size: 0.8125rem;
}

/* ---------- Shared: coupon panel ---------- */

body.woocommerce-cart .wc-block-cart .wc-block-components-panel__button,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__button {
	padding: 0.75rem 0;
	font-family: var(--fk-font-sans);
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--fk-color-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-panel__button:hover,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__button:hover {
	color: var(--fk-color-sage-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-panel__content,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-panel__content {
	padding-bottom: 1rem;
}

/* ---------- Shared: form fields ---------- */

/* The block fields float their label inside the border, so the input
   keeps its top padding — only the frame is restyled. */
body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type="text"],
body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type="email"],
body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="text"],
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="email"],
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input[type="tel"],
body.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control input.components-combobox-control__input,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-form select {
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
	background: #fff;
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	color: var(--fk-color-text);
	box-shadow: none;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-textarea:focus,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox-control input.components-combobox-control__input:focus {
	border-color: var(--fk-color-sage-dark);
	box-shadow: 0 0 0 1px var(--fk-color-sage-dark);
	outline: none;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-text-input label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-combobox label {
	font-family: var(--fk-font-sans);
	color: var(--fk-color-sage-text);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-validation-error {
	color: #b3261e;
	font-size: 0.8125rem;
}

body.woocommerce-checkout .wc-block-checkout .has-error input,
body.woocommerce-checkout .wc-block-checkout .has-error .wc-block-components-combobox-control input {
	border-color: #b3261e;
}

/* ---------- Shared: notices ---------- */

/* The block notice banners in the theme's language rather than
   WooCommerce's blue and green. Errors stay red: that is the one colour
   that should not be reinterpreted. */
body.woocommerce-cart .wc-block-components-notice-banner,
body.woocommerce-checkout .wc-block-components-notice-banner {
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 0.875rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--fk-color-sage-dark);
	border-radius: 0.25rem;
	background: var(--fk-color-greige);
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	line-height: 1.5;
}

body.woocommerce-cart .wc-block-components-notice-banner > svg,
body.woocommerce-checkout .wc-block-components-notice-banner > svg {
	fill: var(--fk-color-sage-dark);
}

body.woocommerce-cart .wc-block-components-notice-banner.is-error,
body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
	border-left-color: #b3261e;
	background: #fdf3f2;
}

body.woocommerce-cart .wc-block-components-notice-banner.is-error > svg,
body.woocommerce-checkout .wc-block-components-notice-banner.is-error > svg {
	fill: #b3261e;
}

/* Classic notices still reach these pages — the login form, German
   Market's messages — so they get the same treatment. */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 3px solid var(--fk-color-sage-dark);
	border-radius: 0.25rem;
	background: var(--fk-color-greige);
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	line-height: 1.5;
	list-style: none;
}

body.woocommerce-cart .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
	border-left-color: #b3261e;
}

body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-error::before {
	content: none;
}

/* ---------- Shared: the two-column layout ---------- */

/* Cart and checkout share one layout: a flex row of
   `.wc-block-components-main` and `.wc-block-components-sidebar`, sized
   65% / 35% and allowed to wrap.

   THE PREFIX IS DELIBERATELY DIFFERENT HERE. `.wc-block-cart` and
   `.wc-block-checkout` are not wrappers around the layout — WooCommerce
   puts them on the layout element ITSELF (SidebarLayout takes the block
   class and merges it into its own className). So
   `.wc-block-checkout .wc-block-components-sidebar-layout` asks for a
   descendant that does not exist and matches nothing, which is exactly
   what left the checkout summary sitting under the payment section: the
   row rule never landed, while the rules on main and sidebar — real
   descendants — did. Half an override is worse than none.

   Scoping on the body class alone is (0,2,1) against WooCommerce's
   (0,1,0), so it still wins, and it does not care which of the two
   block classes is on the element.

   `flex: 1 1 0` rather than `1 1 auto` for the main column: with a
   basis of `auto` the flex base size is the form's max-content width,
   and a wrapping row breaks the line before it ever gets to shrinking.
   A basis of zero takes the leftover space instead, and cannot wrap.

   `align-items: flex-start` is what makes the sticky summary possible —
   a stretched flex item is already as tall as the row and has nothing
   left to slide against. */
@media (min-width: 60em) {
	body.woocommerce-cart .wc-block-components-sidebar-layout,
	body.woocommerce-checkout .wc-block-components-sidebar-layout {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 3rem;
	}

	body.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-main,
	body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-main {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	body.woocommerce-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar,
	body.woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar {
		position: sticky;
		top: 1.5rem;
		flex: 0 0 22rem;
		width: auto;
		max-width: 22rem;
		margin: 0;
		padding: 0;
	}
}

/* ---------- Shared: the coupon field ---------- */

/* WooCommerce hides the coupon behind a disclosure. A gift hamper is
   often bought with a code in hand, and a field that has to be found
   before it can be used is a field that gets missed — so the form is
   opened on load and the toggle removed (assets/js/cart-checkout.js).

   The class the script sets is what gates this: without JavaScript the
   disclosure keeps working exactly as WooCommerce shipped it, rather
   than leaving a coupon field nobody can reach. */
html.fk-coupon-visible body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__button,
html.fk-coupon-visible body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button {
	display: none;
}

html.fk-coupon-visible body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon .wc-block-components-panel__content,
html.fk-coupon-visible body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon .wc-block-components-panel__content {
	padding: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__form,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__form {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

/* Basis zero for the same reason as the page columns: a basis of `auto`
   measures the input's content and breaks the line before it shrinks. */
body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__input,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__input {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__input input,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__input input {
	background: #fff;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-totals-coupon__button,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-totals-coupon__button {
	flex: 0 0 auto;
	min-height: 2.75rem;
	padding-inline: 1.25rem;
	font-size: 0.9375rem;
}

/* ==================================================================
 * CART
 * ================================================================== */

/* ---------- Cart: item list ---------- */

body.woocommerce-cart .wc-block-cart table.wc-block-cart-items {
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-items__header {
	border-bottom: 1px solid rgba(31, 31, 31, 0.14);
	font-family: var(--fk-font-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fk-color-sage-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-items__row {
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-items__row td {
	padding-block: 1.5rem;
	border: 0;
	vertical-align: top;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-item__image img {
	width: 100%;
	max-width: 6.5rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.25rem;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-item__product {
	padding-left: 1.25rem;
	font-size: 0.9375rem;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-item__wrap > * {
	margin-block: 0.25rem;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-product-price {
	font-size: 0.9375rem;
	color: var(--fk-color-body);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart-item__total .wc-block-components-product-price__value {
	font-size: 1rem;
	color: var(--fk-color-text);
}

/* ---------- Cart: quantity and remove ---------- */

body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector {
	width: auto;
	min-width: 7.5rem;
	max-width: 8.5rem;
	margin: 0.75rem 0 0;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
	background: #fff;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector::after {
	content: none;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	padding: 0.5rem 0;
	border: 0;
	background: transparent;
	font-family: var(--fk-font-sans);
	font-size: 0.9375rem;
	color: var(--fk-color-text);
	box-shadow: none;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button {
	padding: 0.5rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--fk-color-text);
	font-size: 1.125rem;
	line-height: 1;
	opacity: 1;
	transition: color 0.2s ease;
}

body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:hover {
	color: var(--fk-color-sage-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-components-quantity-selector button.wc-block-components-quantity-selector__button:disabled {
	color: rgba(31, 31, 31, 0.3);
}

/* Removing something from a cart is destructive and should read as a
   deliberate act, not as a stray icon. */
body.woocommerce-cart .wc-block-cart button.wc-block-cart-item__remove-link {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fk-color-sage-text);
	font-family: var(--fk-font-sans);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

body.woocommerce-cart .wc-block-cart button.wc-block-cart-item__remove-link:hover {
	color: #b3261e;
}

/* ---------- Cart: summary ---------- */

/* One greige card rather than a stack of bordered strips: it reads as
   the thing you act on, and it matches the panels on the product page. */
body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: 1.5rem;
	border-radius: 0.5rem;
	background: var(--fk-color-greige);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__totals-title {
	display: block;
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: var(--fk-font-serif);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	color: var(--fk-color-text);
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper:first-child {
	padding-top: 0;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container {
	padding: 1.25rem 0 0;
	background: transparent;
}

body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-button {
	width: 100%;
	font-size: 1.0625rem;
}

/* On narrow screens WooCommerce sticks the checkout button to the
   bottom edge. Keep the behaviour, lose the hard white bar. */
body.woocommerce-cart .wc-block-cart .wc-block-cart__submit-container--sticky {
	padding: 1rem;
	border-top: 1px solid rgba(31, 31, 31, 0.12);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
}

/* ---------- Cart: empty ---------- */

/*
 * The empty cart is not an error page — for a shop it is the second-best
 * moment to show what there is. So: the message on a reading width, and
 * the products below it across the full column, in the same shape they
 * have in the shop.
 *
 * THE TEXTS ARE NOT HERE. „Ihr Warenkorb ist noch leer" and the heading
 * over the products are HEADING BLOCKS in the page content — WooCommerce
 * writes them into the page when it creates it, in whatever language was
 * active then. They are edited in the block editor, not in a stylesheet
 * and not in the dictionary (which is why the entries for them never
 * fire). See the go-live list.
 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	padding-block: clamp(1rem, 4vw, 2.5rem);
	text-align: center;
}

/* Everything except the product row keeps a reading width. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > p,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	max-width: 40rem;
	margin-inline: auto;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.15;
	color: var(--fk-color-text);
}

/* Air between the three parts: message, rule, invitation. The block
   editor's own margins are tuned for running text, and here they let
   the two headings crowd the dotted rule between them. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	margin: 0 auto 1.75rem;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > .wp-block-separator {
	margin-block: 0 2.5rem;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block > h2:not(.wc-block-cart__empty-cart__title) {
	margin: 0 auto;
}

/*
 * The icon above the message. WooCommerce draws it as a MASK filled with
 * `currentColor`, which is why it arrives in the near-black of the
 * heading — a big dark face over an empty page. A mask takes any colour,
 * so it becomes the brand's sage: the same message, one that does not
 * shout. Sage-dark rather than the light sage, because this is an icon
 * and icons keep the darker one (see the tokens in critical.css).
 */
body.woocommerce-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	background-color: var(--fk-color-sage-dark);
	margin-bottom: 1.5em;
}

/* The dotted rule between the message and the products. WooCommerce's
   own is near-black; at this size it reads as a line of punctuation
   rather than a divider. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	color: var(--fk-color-sage-dark);
	opacity: 0.55;
}

/* ---------- Cart: the products under the empty message ---------- */

/*
 * Same shape as the shop: the photograph is the card — no frame, no
 * shadow — with the name under it and the price under that. Two abreast
 * on a phone, four where there is room.
 */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

@media (min-width: 48em) {
	body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 2.5rem 1.75rem;
	}
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1rem;
	/* Only transform moves — a scale is composited, a width is not. */
	transition: transform 0.4s ease;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover img,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:focus-visible img {
	transform: scale(1.02);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	flex: 1; /* Keeps the prices on one line across the row. */
	margin: 0 0 0.5rem;
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fk-color-text);
	text-decoration: none;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:hover .wc-block-grid__product-title,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link:focus-visible .wc-block-grid__product-title {
	color: var(--fk-color-sage-text);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--fk-color-text);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price del {
	margin-right: 0.5ch;
	font-weight: 400;
	color: var(--fk-color-muted);
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price ins {
	background: none;
	color: var(--fk-color-text);
	text-decoration: none;
}

/* If the grid is ever configured to show one, the button is the shop's
   outlined one rather than the block editor's default. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: inline-block;
	margin-top: 1rem;
	padding: 0.625rem 1.5rem;
	border: 1px solid rgba(31, 31, 31, 0.35);
	border-radius: 0.25rem;
	background: transparent;
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
}

/* ==================================================================
 * CHECKOUT
 * ================================================================== */

/* ---------- Checkout: steps ---------- */

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step {
	padding: 0 0 2.25rem;
	border: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 0.5rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__title {
	font-family: var(--fk-font-serif);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fk-color-text);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content {
	font-size: 0.875rem;
	color: var(--fk-color-sage-text);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__heading-content a {
	color: var(--fk-color-sage-text);
	text-underline-offset: 0.2em;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__description {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	color: var(--fk-color-sage-text);
}

/* WooCommerce indents the step body to clear a step number. There is no
   step number in this design, so the indent is dead space that only
   costs field width on tablets. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__container {
	padding-left: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__container::after {
	content: none;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-step__content {
	padding-bottom: 0;
}

/* ---------- Checkout: options (delivery, payment) ---------- */

/* Shipping and payment methods as cards: a hairline each, sage and a
   greige tint on the chosen one. WooCommerce's default is a flat list
   where the selection is marked only by the radio dot. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option {
	margin: 0 0 0.5rem;
	padding: 1rem 1rem 1rem 3rem;
	border: 1px solid rgba(31, 31, 31, 0.2);
	border-radius: 0.375rem;
	background: #fff;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option:hover {
	border-color: rgba(31, 31, 31, 0.4);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__option-checked,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--fk-color-sage-dark);
	background: var(--fk-color-greige);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__input {
	left: 1rem;
	border-color: rgba(31, 31, 31, 0.35);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__input:checked {
	border-color: var(--fk-color-sage-dark);
	background: var(--fk-color-sage-dark);
	box-shadow: inset 0 0 0 3px #fff;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__label {
	font-size: 0.9375rem;
	color: var(--fk-color-text);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-label,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__description,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control__secondary-description {
	font-size: 0.875rem;
	color: var(--fk-color-sage-text);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-radio-control-accordion-content {
	padding: 0 1rem 1rem 3rem;
	font-size: 0.9375rem;
}

/* ---------- Checkout: checkboxes ---------- */

/* This is where German Market's AGB and Widerruf checkboxes land, so the
   label has to stay readable at three lines of legal text with links in
   the middle of it. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--fk-color-body);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid rgba(31, 31, 31, 0.35);
	border-radius: 0.1875rem;
	background: #fff;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--fk-color-sage-dark);
	background: var(--fk-color-sage-dark);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__mark {
	fill: #fff;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkbox__label a {
	color: var(--fk-color-sage-text);
	text-underline-offset: 0.2em;
}

/* The one checkbox that changes what the rest of the form asks for:
   tick it off and a second address appears. It decides where a hamper
   is delivered, so it gets a surface of its own rather than sitting
   loose under the last field. */
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__use-address-for-billing {
	margin: 1.25rem 0 0;
	padding: 0.875rem 1rem;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.375rem;
	background: var(--fk-color-greige);
}

/* ---------- Checkout: order summary sidebar ---------- */

body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--fk-color-greige);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary .wc-block-components-panel__button {
	padding-top: 0;
	font-family: var(--fk-font-serif);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--fk-color-text);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
	font-size: 0.9375rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item:last-child {
	border-bottom: 0;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__image img {
	width: 3.5rem;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.25rem;
}

/* The quantity badge on the corner of the thumbnail; WooCommerce
   colours it with its own accent. */
body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__quantity {
	border: 1px solid var(--fk-color-greige);
	background: var(--fk-color-text);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.4;
	box-shadow: none;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: 0.9375rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-order-summary-item__total-price {
	font-size: 0.9375rem;
	color: var(--fk-color-text);
}

/* ---------- Checkout: the order button ---------- */

body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions {
	padding-top: 0.5rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__actions_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-place-order-button {
	flex: 1 1 auto;
	min-height: 3.25rem;
	font-size: 1.0625rem;
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-checkout-return-to-cart-button {
	order: -1;
	color: var(--fk-color-sage-text);
	font-size: 0.875rem;
}

/* The terms text above the button, and the pay-obligation wording
   German Market puts beside it. */
body.woocommerce-checkout .wc-block-checkout .wc-block-checkout__terms {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--fk-color-sage-text);
}

/* ---------- Checkout: express payment ---------- */

body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment {
	margin: 0 0 2rem;
	padding: 1.25rem;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.5rem;
	background: var(--fk-color-greige);
}

body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment__title-container,
body.woocommerce-checkout .wc-block-checkout .wc-block-components-express-payment-continue-rule {
	font-size: 0.875rem;
	color: var(--fk-color-sage-text);
}

/* ---------- Loading state ---------- */

/* The blocks paint a skeleton until the Store API answers. In
   WooCommerce's grey it flashes against the greige page; this keeps the
   placeholder in the same family, so the swap is not a colour change. */
body.woocommerce-cart .wc-block-components-skeleton,
body.woocommerce-checkout .wc-block-components-skeleton {
	--wc-skeleton-color-start: rgba(31, 31, 31, 0.06);
	--wc-skeleton-color-end: rgba(31, 31, 31, 0.12);
}

/* ==================================================================
 * GERMAN MARKET
 * ================================================================== */

/* Named ahead of the plugin so its output lands inside the design
   instead of on top of it: delivery time, Grundpreis, tax notes and the
   checkbox block. Nothing here changes their content. */
body.woocommerce-cart .wc-gzd-additional-info,
body.woocommerce-checkout .wc-gzd-additional-info,
body.woocommerce-cart .wgm-info,
body.woocommerce-checkout .wgm-info,
body.woocommerce-cart .delivery-time-info,
body.woocommerce-checkout .delivery-time-info,
body.woocommerce-cart .shipping-costs-info,
body.woocommerce-checkout .shipping-costs-info {
	display: block;
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fk-color-sage-text);
}

body.woocommerce-checkout .wc-gzd-checkbox-placeholder,
body.woocommerce-checkout .german-market-checkboxes,
body.woocommerce-checkout .wp-block-woocommerce-german-market-checkboxes {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* The label of the AGB checkbox itself. The three wrappers above were
   written before German Market was ever installed on an environment we
   could look at — this class is the one confirmed against the rendered
   page, and it is where the typography is actually decided.

   The plugin ships it at 13px. That is smaller than everything around
   it, which reads as a footnote — and this is the one line on the page
   that has to be ticked before an order can be placed. So it takes the
   same size and rhythm as the rest of the fine print above the button.

   It keeps the darker body colour rather than that line's sage: a
   required field that looks optional is a field people miss. Decided
   with the shop, 26.08.2026.

   The family is named explicitly so a plugin update cannot quietly move
   this one line off the theme's stack. */
body.woocommerce-checkout .wc-block-checkout .german-market-checkbox {
	font-family: var(--fk-font-sans);
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--fk-color-body);
}

body.woocommerce-checkout .wc-block-checkout .german-market-checkbox a {
	color: var(--fk-color-sage-text);
	text-underline-offset: 0.2em;
}

body.woocommerce-checkout #legal-wrapper,
body.woocommerce-checkout .legal-info {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--fk-color-sage-text);
}

/* ==================================================================
 * ORDER RECEIVED  (classic template — not a block page)
 * ================================================================== */

body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order > .woocommerce-notice {
	margin: 0 0 2rem;
	padding: 1.25rem 1.5rem;
	border-radius: 0.5rem;
	background: var(--fk-color-greige);
	font-family: var(--fk-font-serif);
	font-size: clamp(1.25rem, 2.6vw, 1.625rem);
	line-height: 1.3;
	color: var(--fk-color-text);
}

body.woocommerce-order-received ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	border: 0;
	list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fk-color-sage-text);
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.25rem;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fk-color-text);
}

body.woocommerce-order-received .woocommerce-order-details h2,
body.woocommerce-order-received .woocommerce-customer-details h2,
body.woocommerce-order-received .woocommerce-column__title {
	margin: 0 0 1rem;
	font-family: var(--fk-font-serif);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--fk-color-text);
}

body.woocommerce-order-received table.woocommerce-table--order-details {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

body.woocommerce-order-received table.woocommerce-table--order-details th,
body.woocommerce-order-received table.woocommerce-table--order-details td {
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
	text-align: left;
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot th {
	font-weight: 400;
	color: var(--fk-color-sage-text);
}

/* A clearfix is a grid item.
 *
 * WooCommerce tidies its floated columns with the classic micro-clearfix:
 * `content: " "; display: table` on ::before AND ::after. In a float
 * layout those are two invisible boxes. In the grid below they are two
 * ITEMS — and ::before is the first one. It took cell 1, so the billing
 * address moved to column 2 and the shipping address to the next row.
 * Four items in a raster for two, and not one rule of ours was wrong.
 *
 * `display: none` would not be enough: an invisible grid item still
 * counts. The content has to go.
 *
 * account.css does the same for `.col2-set` on the account page — this
 * section carries that class too, it was simply never neutralised here. */
body.woocommerce-order-received .woocommerce-columns--addresses::before,
body.woocommerce-order-received .woocommerce-columns--addresses::after {
	content: none;
}

body.woocommerce-order-received .woocommerce-columns--addresses {
	display: grid;
	gap: 2rem;
	margin-top: 2.5rem;
}

@media (min-width: 48em) {
	body.woocommerce-order-received .woocommerce-columns--addresses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Amounts belong under their heading, and the heading is on the right.
   The rule above sets every cell left, which is right for the product
   column and wrong for the one next to it. */
body.woocommerce-order-received table.woocommerce-table--order-details th.product-total,
body.woocommerce-order-received table.woocommerce-table--order-details td.product-total,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
	text-align: right;
}

/* The last row of the table is not a total but a button — German
   Market's Widerrufsbelehrung among them. Left as it comes it is a grey
   plugin button in the middle of the theme. */
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .order-actions-button {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--fk-color-text);
	border-radius: 0.25rem;
	background: transparent;
	color: var(--fk-color-text);
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.woocommerce-order-received table.woocommerce-table--order-details tfoot .order-actions-button:hover,
body.woocommerce-order-received table.woocommerce-table--order-details tfoot .order-actions-button:focus-visible {
	background: var(--fk-color-text);
	color: #fff;
}

/* The two addresses. WooCommerce gives the box a border of its own; this
   replaces it with the theme's card so it reads as one family with the
   tiles everywhere else. */
body.woocommerce-order-received .woocommerce-customer-details address {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(31, 31, 31, 0.12);
	border-radius: 0.5rem;
	background: #fff;
	font-style: normal;
	line-height: 1.7;
}

body.woocommerce-order-received .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details--email {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--fk-color-sage-text);
}

/* The bank details of a Vorkasse order. Its heading sits outside the two
   sections the h2 rule above covers, so it is named here rather than
   left to the global heading style. */
body.woocommerce-order-received .wc-bacs-bank-details-heading {
	margin: 2.5rem 0 1rem;
	font-family: var(--fk-font-serif);
	font-size: 1.375rem;
	font-weight: 500;
	color: var(--fk-color-text);
}

body.woocommerce-order-received .wc-bacs-bank-details-account-name {
	margin: 0 0 0.75rem;
	font-family: var(--fk-font-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--fk-color-text);
}