/*
 * woocommerce.css — shop pages only (catalogue, product, cart, checkout,
 * account). Enqueued by inc/woocommerce.php after global.css.
 *
 * WooCommerce's own stylesheets are switched off, so everything it prints is
 * styled here, from the same tokens as the rest of the theme. Product cards
 * and the product page layout are NOT here: they reuse the product, products
 * and product-detail block stylesheets, so a card has one definition.
 *
 * Selectors that begin with a WooCommerce class style its markup; the ones
 * that begin `.an-` style ours. No literal colours, font sizes or spacing.
 */

/* --- Catalogue --- */

.an-shop__head {
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--l);
}

.an-shop__head .term-description {
	margin-block-start: var(--wp--preset--spacing--m);
	max-width: 36rem;
}

/* The hero above already gives the page its top space. */
.an-shop__list {
	padding-block-start: var(--wp--preset--spacing--l);
}

.an-shop__toolbar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--l);
}

.an-shop__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.an-shop__cat {
	border: var(--an-border-width) solid color-mix(in oklab, var(--wp--preset--color--contrast) var(--an-tint-field), transparent);
	border-radius: var(--an-radius-pill);
	font-size: var(--wp--preset--font-size--s);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	text-decoration: none;
	transition:
		background-color var(--an-duration-fast) var(--an-easing),
		border-color var(--an-duration-fast) var(--an-easing);
}

.an-shop__cat:hover {
	border-color: var(--wp--preset--color--contrast);
	color: inherit;
}

.an-shop__cat[aria-current] {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.woocommerce-pagination .page-numbers {
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	justify-content: center;
	list-style: none;
	padding: 0;
}

.woocommerce-pagination {
	margin-block-start: var(--wp--preset--spacing--l);
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	border: var(--an-border-width) solid var(--wp--preset--color--line);
	border-radius: var(--an-radius-pill);
	display: inline-grid;
	font-size: var(--wp--preset--font-size--s);
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding-inline: var(--wp--preset--spacing--s);
	place-items: center;
	text-decoration: none;
}

.woocommerce-pagination .page-numbers .current {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* --- Notices and buttons --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background-color: var(--wp--preset--color--surface);
	border-inline-start: var(--an-rule-width) solid var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--s);
	list-style: none;
	margin-block-end: var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
}

/*
 * Text beside a button — only for a notice that has a button. As a flex row
 * for every notice, a link inside a sentence became an item of its own and was
 * pushed to the far edge, away from the words around it.
 */
.woocommerce-message:has(> .button),
.woocommerce-info:has(> .button),
.woocommerce-error:has(> .button) {
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	justify-content: space-between;
}

/*
 * WooCommerce prints the button before the text ("view cart"; "Erneut
 * senden" on a new account's temporary password); show it after.
 */
.woocommerce-message .button,
.woocommerce-info .button {
	order: 2;
}

/* Its links-as-buttons carry .button; ours carry .btn. Same look. */
.woocommerce a.button,
.woocommerce-page a.button {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border: var(--an-border-width) solid var(--wp--preset--color--primary);
	border-radius: var(--an-radius-m);
	color: var(--wp--preset--color--paper);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--s);
	justify-content: center;
	min-height: var(--an-control-h);
	padding-block: var(--wp--preset--spacing--xs);
	padding-inline: var(--wp--preset--spacing--m);
	text-decoration: none;
}

.woocommerce a.button:hover,
.woocommerce-page a.button:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/*
 * A button WooCommerce has switched off must look it: the password forms
 * switch "Speichern" and "Registrieren" off while the strength meter says
 * the password is too weak, and an unchanged button seemed to do nothing.
 */
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

/* --- Product page: what WooCommerce prints inside the detail layout --- */

.an-product-detail .product_title {
	margin-block-end: var(--wp--preset--spacing--m);
}

.an-product-detail .woocommerce-product-details__short-description {
	max-width: 36rem;
}

.an-product-detail .price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: var(--an-tracking-tight);
	line-height: var(--an-leading-snug);
	margin-block-start: var(--wp--preset--spacing--m);
}

.an-product-detail .price del {
	color: var(--wp--preset--color--secondary);
}

.an-product-detail .price ins {
	text-decoration: none;
}

/*
 * Germanized's notes under the price: the price per kilogram, then tax and
 * shipping. Its base price carries the class `price` as well, so it would
 * otherwise be set as large as the price itself.
 */
.an-product-detail .price-unit,
.an-product-detail .legal-price-info {
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0;
	margin: 0;
}

.an-product-detail .legal-price-info a {
	color: inherit;
}

/*
 * Trade tiers, printed by the annasnudel-trade plugin for trade customers
 * only. A list and not a table: three tiers by two sizes do not fit a phone
 * as columns.
 */
.an-trade {
	border-block: var(--an-border-width) solid var(--wp--preset--color--line);
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--s);
}

.an-trade__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: var(--an-weight-semibold);
	letter-spacing: 0;
	margin: 0;
}

.an-trade__tiers {
	list-style: none;
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: 0;
}

.an-trade__tier {
	column-gap: var(--wp--preset--spacing--s);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--s);
}

.an-trade__off {
	font-weight: var(--an-weight-semibold);
}

.an-trade__prices {
	margin-inline-start: auto;
}

.an-trade__note {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	margin: var(--wp--preset--spacing--xs) 0 0;
}

/*
 * The photo is a button that opens the enlarged view. It keeps the frame's
 * look, so everything the global button rule adds is taken off again.
 */
.an-product-detail__enlarge {
	border: 0;
	border-radius: 0;
	cursor: zoom-in;
	display: block;
	min-height: 0;
	padding: 0;
	width: 100%;
}

.an-product-detail__enlarge:hover {
	background-color: var(--wp--preset--color--surface);
}

/*
 * The magnifier. magnifier.js sets the class while a mouse is over the photo
 * and moves `transform-origin` to the pointer; the frame clips the rest.
 */
.an-product-detail__enlarge .an-product-detail__image {
	transition: transform var(--an-duration-fast) var(--an-easing);
}

.an-product-detail__enlarge.is-magnified .an-product-detail__image {
	transform: scale(2);
}

/*
 * Touch screens get neither the magnifier nor the enlarged view: on a phone
 * the popover is no larger than the photo already is. The photo is then just
 * a photo. magnifier.js tests the opposite of this query; change both together.
 */
@media not ((hover: hover) and (pointer: fine)) {
	.an-product-detail__enlarge {
		cursor: default;
		pointer-events: none;
	}
}

/*
 * The enlarged photo: a native popover, so no script. `display` is not set
 * here on purpose; the browser hides a closed popover with it, and an author
 * `display` would show it permanently.
 */
.an-product-detail__zoom {
	background: var(--wp--preset--color--paper);
	border: 0;
	border-radius: var(--an-radius-l);
	box-shadow: var(--an-shadow-m);
	/* The browser centres a popover with this; the global reset removed it. */
	margin: auto;
	padding: var(--wp--preset--spacing--xs);
}

.an-product-detail__zoom::backdrop {
	background: rgb(27 40 32 / 0.6);
}

.an-product-detail__zoom-image {
	/* Whole photo, as large as the window allows; the popover wraps it. */
	border-radius: var(--an-radius-m);
	block-size: auto;
	inline-size: auto;
	max-block-size: calc(100dvh - var(--wp--preset--spacing--xl) * 2);
	max-inline-size: min(62rem, 100vw - var(--wp--preset--spacing--gutter) * 2 - var(--wp--preset--spacing--xs) * 2);
}

.an-product-detail__zoom-close {
	border-radius: 50%;
	block-size: var(--an-control-h);
	inline-size: var(--an-control-h);
	inset-block-start: var(--wp--preset--spacing--s);
	inset-inline-end: var(--wp--preset--spacing--s);
	padding: 0;
	position: absolute;
}

/* A browser without popovers would print the large photo into the page. */
@supports not selector(:popover-open) {
	.an-product-detail__zoom {
		display: none;
	}
}

.an-product-detail .cart {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * The size chooser is a layout table. Undo the global table rules: no frame,
 * no minimum width, cells stacked.
 */
.an-product-detail .variations {
	background: none;
	min-inline-size: 0;
}

.an-product-detail .variations th,
.an-product-detail .variations td {
	border: 0;
	display: block;
	padding: 0;
}

/* A second choice (size, then "Mit Ei / Vegan") starts a little lower. */
.an-product-detail .variations tr + tr th {
	padding-block-start: var(--wp--preset--spacing--s);
}

.an-product-detail .variations label {
	display: block;
	font-size: var(--wp--preset--font-size--s);
	font-weight: var(--an-weight-semibold);
	margin-block-end: var(--wp--preset--spacing--xs);
}

.an-product-detail .reset_variations {
	color: var(--wp--preset--color--secondary);
	display: inline-block;
	font-size: var(--wp--preset--font-size--xs);
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* Pills built by variations.js from the select's options. */
.an-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
}

.an-pill {
	background-color: transparent;
	border-color: color-mix(in oklab, var(--wp--preset--color--contrast) var(--an-tint-field), transparent);
	border-radius: var(--an-radius-pill);
	color: var(--wp--preset--color--contrast);
	min-height: 0;
}

.an-pill:hover {
	background-color: transparent;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.an-pill[aria-checked='true'] {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.an-pill:disabled {
	cursor: not-allowed;
	opacity: 0.45;
}

.woocommerce-variation-price {
	margin-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--xs);
}

.woocommerce-variation-price .price {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--m);
	font-weight: var(--an-weight-semibold);
	letter-spacing: 0;
	margin: 0;
}

.woocommerce-variation-price .an-product-detail__base {
	font-weight: var(--an-weight-normal);
	margin-inline-start: var(--wp--preset--spacing--xs);
}

/* Quantity beside the button, for simple products and inside a variation. */
.an-product-detail .cart:not(.variations_form),
.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
	margin-block-start: var(--wp--preset--spacing--m);
}

.an-product-detail .quantity .qty {
	text-align: center;
	width: 5rem;
}

.an-product-detail .single_add_to_cart_button {
	flex: 1 1 12rem;
}

.an-product-detail .single_add_to_cart_button.disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.an-product-detail .stock {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--s);
}

/* The long description: facts under hairlines, as in the design. */
.an-product-detail__description {
	border-block-start: var(--an-border-width) solid var(--wp--preset--color--line);
	color: color-mix(in oklab, var(--wp--preset--color--contrast) var(--an-tint-body), var(--wp--preset--color--base));
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin-block-start: var(--wp--preset--spacing--l);
	padding-block-start: var(--wp--preset--spacing--m);
}

.an-product-detail__description h2,
.an-product-detail__description h3 {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	font-weight: var(--an-weight-semibold);
	letter-spacing: 0;
	line-height: var(--an-leading-base);
	margin-block-start: var(--wp--preset--spacing--s);
}

.an-product-detail__description summary {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s);
	letter-spacing: 0;
	padding-block: var(--wp--preset--spacing--s);
}

.an-product-detail__description details {
	border-block-start: var(--an-border-width) solid var(--wp--preset--color--line);
	margin-block-start: var(--wp--preset--spacing--s);
}

/* --- Cart, checkout, account: plain pages, wider than prose --- */

.woocommerce-cart .entry > .container,
.woocommerce-checkout .entry > .container,
.woocommerce-account .entry > .container {
	max-width: var(--wp--style--global--content-size);
}

/*
 * The cards under "Neu im Shop" on the empty cart. The heading above them is
 * the page's, so the grid brings no section spacing of its own.
 */
.an-products.an-shop__new {
	padding-block: var(--wp--preset--spacing--m) 0;
}

/*
 * WooCommerce's tables size themselves. The global table rules give every table
 * a minimum width and expect core's scrolling wrapper around it; these have no
 * wrapper, so that minimum pushed the cart wider than a phone.
 */
.wc-block-cart-items,
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	background: none;
	min-inline-size: 0;
}

/*
 * The cart block's phone layout. WooCommerce gives the row two fixed tracks,
 * `80px 132px`, plus automatic ones for the overflow and the line total, and
 * the row sits in a table that grows to fit. Measured at a 320px viewport: a
 * 309px row in a 280px column, the line total pushed off screen. A flexible
 * middle track fixes it. The selector repeats WooCommerce's own so that it
 * outranks it; if a WooCommerce update changes that rule, re-measure this.
 */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
	column-gap: var(--wp--preset--spacing--xs);
	grid-template-columns: 80px minmax(0, 1fr);
}

.wc-block-cart.is-mobile .wc-block-cart-item__quantity {
	flex-wrap: wrap;
}

/* The cart and checkout are WooCommerce blocks with their own stylesheet; this
   only brings their buttons into line. */
.wc-block-components-button:not(.is-link) {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	border-radius: var(--an-radius-m);
	color: var(--wp--preset--color--paper);
	min-height: var(--an-control-h);
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}

/* Account: navigation beside content from 48rem. */
.woocommerce-account .woocommerce {
	display: grid;
	gap: var(--wp--preset--spacing--l);
}

@media (min-width: 48rem) {
	.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 13rem minmax(0, 1fr);
	}
}

/* On a phone the menu is a wrapped row above the content, not seven lines
   (269px) before the order a customer came to see (Ruben, 10-26). */
.woocommerce-MyAccount-navigation ul {
	flex-flow: row wrap;
	gap: 0;
	list-style: none;
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	border-block-end: 2px solid transparent;
	display: block;
	font-size: var(--wp--preset--font-size--s);
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation .is-active a {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary);
}

@media (min-width: 48rem) {
	.woocommerce-MyAccount-navigation ul {
		flex-direction: column;
	}

	.woocommerce-MyAccount-navigation a {
		border-block-end: 0;
		border-inline-start: 2px solid transparent;
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	}
}

/*
 * Order details on the thank-you page and under Konto. A PayPal payment's
 * title carries the payer's address, one unbreakable word that pushed the
 * table to 444px on a 375px phone; values may now break anywhere. Less cell
 * padding on a phone. WooCommerce marks number, date and status with
 * <mark>, which browsers paint yellow.
 */
.woocommerce-table--order-details td,
.woocommerce-order-overview li {
	overflow-wrap: anywhere;
}

.woocommerce-table--order-details :is(th, td) {
	padding: var(--wp--preset--spacing--xs);
}

@media (min-width: 48rem) {
	.woocommerce-table--order-details :is(th, td) {
		padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	}
}

.woocommerce mark {
	background: none;
	color: inherit;
	font-weight: 700;
}

/*
 * Thank-you page: "Wie geht es weiter?" between the overview and the order
 * details (inc/woocommerce.php). Steps numbered, done ones ticked.
 */
.an-order-next {
	background-color: var(--wp--preset--color--paper);
	border: var(--an-border-width) solid var(--wp--preset--color--line);
	border-radius: var(--an-radius-m);
	display: grid;
	gap: var(--wp--preset--spacing--s);
	margin-block: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--m);
}

.an-order-next h2 {
	font-size: var(--wp--preset--font-size--l);
}

.an-order-next__steps {
	counter-reset: an-step;
	gap: var(--wp--preset--spacing--s);
	list-style: none;
	padding: 0;
}

.an-order-next__steps li {
	counter-increment: an-step;
	display: grid;
	gap: var(--wp--preset--spacing--xxs);
	justify-items: start;
	min-height: 2rem;
	padding-inline-start: 2.75rem;
	position: relative;
}

.an-order-next__steps li::before {
	align-items: center;
	border: var(--an-border-width) solid var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	content: counter(an-step);
	display: flex;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
	inline-size: 2rem;
	block-size: 2rem;
	inset-block-start: 0;
	inset-inline-start: 0;
	justify-content: center;
	position: absolute;
}

.an-order-next__steps li.is-done::before {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--paper);
	content: "\2713";
}

.an-order-next__steps strong {
	line-height: 2rem;
}

.an-order-next__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s);
}

.woocommerce .an-order-next a.button--secondary {
	background-color: transparent;
	color: var(--wp--preset--color--primary);
}

.woocommerce .an-order-next a.button--secondary:hover {
	color: var(--wp--preset--color--paper);
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	max-width: 28rem;
}

/* Login and registration side by side from 48rem, each on a paper card. */
#customer_login {
	display: grid;
	gap: var(--wp--preset--spacing--l);
	max-width: 60rem;
}

#customer_login > div {
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--an-radius-m);
	padding: var(--wp--preset--spacing--m);
}

@media (min-width: 48rem) {
	#customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.woocommerce-form-row,
.form-row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	margin-block-end: var(--wp--preset--spacing--s);
}

.woocommerce-form-row label,
.form-row label {
	font-size: var(--wp--preset--font-size--s);
}

.woocommerce-form-row .input-text,
.form-row .input-text {
	width: 100%;
}

/*
 * The "show password" button. WooCommerce prints it empty, inside a wrapper
 * around the field, and draws the eye in its own stylesheet, which this theme
 * switches off. Without these rules it is a bare red button under the field.
 */
.password-input {
	display: block;
	position: relative;
}

.show-password-input {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--secondary);
	inset-block: 0;
	inset-inline-end: 0;
	padding-inline: var(--wp--preset--spacing--s);
	position: absolute;
}

.show-password-input:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.show-password-input::before {
	background-color: currentcolor;
	block-size: 1.25rem;
	content: "";
	inline-size: 1.25rem;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Shown: the same eye, struck through. */
.show-password-input.display-password::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E");
}

/* A checkbox and its text on one line, not stacked like a field and its label. */
.woocommerce-form__label-for-checkbox {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	margin-block-end: var(--wp--preset--spacing--xs);
}

/*
 * The partner's sums and orders on the account page, printed by the
 * annasnudel-partner plugin. Lists, not a table, for the same reason as the
 * trade tiers: four columns do not fit a phone.
 */
.an-partner {
	border-block-start: var(--an-border-width) solid var(--wp--preset--color--line);
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--m);
}

.an-partner__title {
	font-size: var(--wp--preset--font-size--l);
	margin: 0 0 var(--wp--preset--spacing--xs);
}

.an-partner__totals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--l);
	margin-block: var(--wp--preset--spacing--s);
}

.an-partner__total dt {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
}

.an-partner__total dd {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--l);
	margin: 0;
}

.an-partner__orders {
	list-style: none;
	margin: 0;
	padding: 0;
}

.an-partner__order {
	border-block-start: var(--an-border-width) solid var(--wp--preset--color--line);
	column-gap: var(--wp--preset--spacing--s);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--s);
	padding-block: var(--wp--preset--spacing--xs);
}

.an-partner__basis {
	color: var(--wp--preset--color--secondary);
}

.an-partner__amount {
	font-weight: var(--an-weight-semibold);
	margin-inline-start: auto;
}

.an-partner__note {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--xs);
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* "Bald erhältlich" in place of the cart button (annasnudel_coming_soon()). */
.an-coming-soon {
	background: var(--wp--preset--color--surface);
	border-radius: var(--an-radius-m);
	font-size: var(--wp--preset--font-size--s);
	margin-block: var(--wp--preset--spacing--m);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
}

/* A ready gift's greeting field (annasnudel-gift), above quantity and button. */
.an-gift-greeting {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	margin: 0 0 var(--wp--preset--spacing--m);
}

.an-gift-greeting__label {
	font-size: var(--wp--preset--font-size--s);
	font-weight: var(--an-weight-semibold);
}

.an-gift-greeting__optional,
.an-gift-greeting__hint {
	color: var(--wp--preset--color--secondary);
	font-weight: var(--an-weight-normal);
}

.an-gift-greeting__hint {
	font-size: var(--wp--preset--font-size--xs);
}

.an-gift-greeting__field {
	inline-size: 100%;
	resize: vertical;
}

/*
 * The amount due stays beside the order button when a voucher is applied.
 * Germanized repeats the summary above the button and shows only the total
 * there; it finds "the total" as the first footer line. The Gift Cards
 * plugin's "Summe (vor Gutscheinen)" is a footer line too, so with a voucher
 * Germanized showed that and hid the real "Gesamtsumme" and the § 19 note.
 */
.wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-components-totals-wrapper:has(> .wc-block-components-totals-footer-item:not(.wc-gift-cards-totals)),
.wc-gzd-checkout .is-large .wc-gzd-checkout-submit .wc-block-components-totals-wrapper.slot-wrapper:has(> .wc-block-components-order-meta) {
	display: block;
}

/*
 * A voucher's quantity is its number of recipients, so the Gift Cards plugin
 * prints the quantity field hidden; its empty wrapper still took a slot in the
 * row and pushed the button in. WooCommerce prints either a hidden or a
 * visible field, never both.
 */
.cart .quantity:has(> input[type="hidden"]) {
	display: none;
}

/*
 * An applied code under "Rabatt" or "Gutschein" is WooCommerce's chip. The
 * global list rule stretched it to the full width, the global button height
 * turned its small round cross into a tall grey bar, and its text was 11px.
 */
.wc-block-components-totals-discount__coupon-list {
	align-items: flex-start;
}

.wc-block-components-chip {
	font-size: var(--wp--preset--font-size--s);
}

.wc-block-components-chip .wc-block-components-chip__text {
	font-size: inherit;
}

.wc-block-components-chip .wc-block-components-chip__remove {
	min-height: 1.5rem;
	min-width: 1.5rem;
}

/*
 * On a phone Germanized hides its copy of the summary beside the order
 * button, and with it the § 19 note, which then shows nowhere at the checkout.
 * That note alone is shown again, right above the button.
 */
.wc-gzd-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-gzd-checkout-submit .checkout-order-summary-block-fill-wrapper:has(.wc-gzd-small-business-info) {
	display: block;
	padding-block-end: var(--wp--preset--spacing--s);
}

/* A plain line, not the frame of the summary it came from. */
.wc-gzd-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-gzd-checkout-submit .checkout-order-summary-block-fill-wrapper .checkout-order-summary-block-fill,
.wc-gzd-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-gzd-checkout-submit .checkout-order-summary-block-fill-wrapper .wc-block-components-totals-wrapper,
.wc-gzd-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-gzd-checkout-submit .checkout-order-summary-block-fill-wrapper .wc-gzd-small-business-info {
	border: 0;
	padding: 0;
}

.wc-gzd-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-gzd-checkout-submit .checkout-order-summary-block-fill-wrapper:has(.wc-gzd-small-business-info) > :not(.checkout-order-summary-block-fill),
.wc-gzd-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-gzd-checkout-submit .checkout-order-summary-block-fill-wrapper:has(.wc-gzd-small-business-info) .checkout-order-summary-block-fill > :not(:has(.wc-gzd-small-business-info)) {
	display: none;
}

/*
 * With a voucher, the plugin's "Summe (vor Gutscheinen)" is a line like the
 * others, not a second total: only the amount to pay stands out.
 */
.wc-gift-cards-totals.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-gift-cards-totals.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: inherit;
	font-weight: inherit;
}