/*
Theme Name:        Lukoyang
Description:       Block-Theme für den Lukoyang-Shop.
Version:           1.0.0
Requires at least: 6.8
Tested up to:      7.1
Requires PHP:      8.1
Author:            Jerschabek GmbH
Text Domain:       lukoyang
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
*/

/*
 * Gestaltung gehört primär in die theme.json. Hier nur, was sich dort
 * nicht ausdrücken lässt.
 *
 */

/*
 * Outline-Buttons: Farben und Rahmen kommen aus der theme.json (Variation
 * „outline“), dort lässt sich der Hover der Variation aber nicht setzen.
 */

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Textmarker: gelber Balken unter dem unteren Drittel der Zeile, wie im Design. */
mark {
	background-color: transparent;
	background-image: linear-gradient(transparent 67%, var(--wp--preset--color--accent) 67%);
	color: inherit;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}


/* Unterstrichener Textlink, z. B. „Zum LUKOYANG Blog“. */
.lukoyang-more-link a {
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/*
 * Produktkarten (patterns/startseite-neu-eingetroffen.php): Der Warenkorb-Button
 * liegt unten im Produktbild, darunter Titel, Preis und Lieferzeit.
 */

.lukoyang-products .wc-block-product-template {
	gap: 2.625rem 1rem;
}

.lukoyang-products .wc-block-product {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.lukoyang-products .wc-block-components-product-image {
	margin-bottom: 0;
	border-radius: 6px;
	background-color: var(--wp--preset--color--muted);
	overflow: hidden;
}

/*
 * Fotos, die nicht ins Bildformat passen (Produktkarten, Produkt-Galerie,
 * Beitragsbilder): Das Foto steht ganz im Bild, die freie Fläche füllt eine
 * unscharfe Kopie, siehe lukoyang_get_image_backdrop(). Das Skalieren
 * verhindert helle Ränder, die der Blur sonst an den Kanten erzeugt.
 */
.has-image-backdrop {
	position: relative;
	overflow: hidden;
}

.has-image-backdrop .lukoyang-image-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(24px);
	transform: scale(1.15);
	pointer-events: none;
}

.has-image-backdrop img:not(.lukoyang-image-backdrop) {
	position: relative;
	object-fit: contain;
}

/* Beim Beitragsbild sitzt der Radius am Foto, die Kopie braucht ihn am Rahmen. */
.wp-block-post-featured-image.has-image-backdrop {
	border-radius: 6px;
}

/*
 * Badges (Neu, Angebot) im Bild oben links untereinander.
 *
 * Der Badge hängt an .wp-block-woocommerce-product-image, nicht an
 * .wc-block-components-product-image: Im Editor steht diese Klasse nur am
 * Bild, die Badges sind dort Geschwister davon.
 */
.lukoyang-products .wc-block-components-product-image__inner-container {
	align-items: flex-start;
	gap: 0.375rem;
	padding: 0.875rem;
}

.lukoyang-products .wp-block-woocommerce-product-image .wc-block-components-product-sale-badge {
	position: static;
	margin: 0;
	padding: 0.25rem 0.5625rem;
	border: 0;
	border-radius: 100px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--accent);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
}

.lukoyang-products .wp-block-post-title {
	margin: 0.875rem 0 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

.lukoyang-products .wp-block-post-title a {
	text-decoration: none;
}

.lukoyang-products .wp-block-woocommerce-product-price {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

/* WooCommerce gibt den alten Preis vor dem neuen aus, deshalb der Abstand rechts. */
.lukoyang-products .wp-block-woocommerce-product-price del {
	margin-right: 0.25rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.lukoyang-products .delivery-time-info {
	color: var(--wp--preset--color--success);
	font-size: 0.8125rem;
}

.lukoyang-products .delivery-time-info::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 0.375rem;
	border-radius: 50%;
	background-color: currentcolor;
	vertical-align: 0.1em;
}

.lukoyang-products .wp-block-woocommerce-gzd-product-delivery-time {
	margin: 0.375rem 0 0;
}

/*
 * Shop und Produktkategorien (templates/archive-product.html): Beschreibung,
 * Leiste mit Ergebniszahl und Sortierung, Seitenzahlen.
 */
.lukoyang-term-description {
	max-width: 48rem;
}

.lukoyang-catalog-toolbar {
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-catalog-toolbar :is(.woocommerce-result-count, .woocommerce-ordering) {
	margin: 0;
}

.lukoyang-catalog-toolbar .orderby {
	padding: 0.5rem 2.25rem 0.5rem 1rem;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 100px;
	/* Chevron (Lucide chevron-down) in der Textfarbe „contrast“. */
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d1b16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.875rem center;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	appearance: none;
	cursor: pointer;
}

.lukoyang-pagination {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.lukoyang-pagination :is(.page-numbers, .wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 1rem;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 100px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.lukoyang-pagination .page-numbers {
	padding: 0;
}

.lukoyang-pagination .page-numbers.dots {
	border-color: transparent;
}

.lukoyang-pagination :is(.page-numbers.current, a:hover) {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.lukoyang-pagination .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.5rem;
}


/* Beitragskarten (patterns/startseite-wegweiser.php) */

.lukoyang-post-cards .wp-block-post-featured-image {
	margin-bottom: 1.125rem;
}

.lukoyang-post-cards :is(.wp-block-post-terms, .wp-block-post-title) a {
	color: inherit;
	text-decoration: none;
}


/*
 * Kundenbilder-Galerie (patterns/kundenbilder-galerie.php): Kachelwand aus
 * einem Query-Loop, drei Spalten ab 900px. Kundenbilder mit Haken „Zitat“
 * stehen an ihrer Stelle in der Reihenfolge als Zitat-Kachel (li.lukoyang-quote,
 * von lukoyang_kundenbild_render_quotes() in inc/custom-post-type.php).
 *
 * src/gallery/gallery.js setzt `is-masonry` und lässt jede Kachel so viele
 * 1px-Zeilen belegen, wie sie hoch ist. Ohne JavaScript bleibt ein normales
 * Raster. Der Abstand nach unten ist ein margin, damit er in der Höhe der
 * Kachel mitzählt.
 */
.lukoyang-gallery .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 1rem;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lukoyang-gallery .wp-block-post-template.is-masonry {
	grid-auto-rows: 1px;
}

.lukoyang-gallery .wp-block-post-template > li {
	margin: 0 0 3.5rem;
}

.lukoyang-gallery .wp-block-post-template > li:focus {
	outline: none;
}

/* Formate der Kachelwand aus dem Design (437 px breit), der Reihe nach wiederholt. */
.lukoyang-gallery .wp-block-lukoyang-kundenbild-image__image {
	object-fit: cover;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 1) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 560;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 2) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 420;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 3) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 480;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 4) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 520;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 5) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 600;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 6) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 440;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 7) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 500;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 8) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 460;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 9) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 620;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 10) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 440;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 11) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 800;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 12) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 420;
}

.lukoyang-gallery .wp-block-post-template > li:nth-child(13n + 13) .wp-block-lukoyang-kundenbild-image__image {
	aspect-ratio: 437 / 380;
}

/* Zitat-Kachel: großes Anführungszeichen, Zitat (Titel), Quelle. */
.lukoyang-quote {
	padding: 2.25rem;
	border-radius: 6px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.lukoyang-quote__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.lukoyang-quote__quote::before {
	content: "“";
	display: block;
	height: 0.5em;
	margin-bottom: 0.25rem;
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: 7.5rem;
	font-weight: 850;
	line-height: 0.8;
}

.lukoyang-quote__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo-semi-condensed);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.lukoyang-quote__source {
	display: block;
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1.2;
	text-transform: uppercase;
}

@media (max-width: 899px) {
	.lukoyang-gallery .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.lukoyang-gallery .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.lukoyang-gallery .wp-block-post-template > li {
		margin-bottom: 2.5rem;
	}
}

.lukoyang-gallery .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--30);
}


/*
 * Kundenbilder als Bento-Galerie (patterns/kundenbilder-bento.php, Sketch:
 * „03 Galerie (Bento)“ auf „Kundenbilder Desktop (Alternative)“): Query-Loop
 * mit quadratischen Rasterzeilen, Titel und Shop-Link liegen auf dem Foto.
 *
 * Die Formate wiederholen sich alle 16 Kacheln wie im Design (vier Spalten,
 * sieben Reihen): 1 und 7 groß (2 × 2), 4, 9 und 12 breit (2 × 1), 5, 13 und
 * 14 hoch (1 × 2), der Rest 1 × 1. Deshalb lädt die Seite 16 Kundenbilder auf
 * einmal. Zitate (li.lukoyang-quote) nehmen das Format ihrer Stelle an.
 *
 * Eine Zeile ist so hoch wie eine Spalte breit (100cqi ist die Breite des
 * Loops), wächst aber, wenn eine Kachel mehr Platz braucht (z. B. ein langes
 * Zitat). `dense` füllt Lücken, die mit zwei Spalten entstehen. Unter 600px
 * eine Spalte, die Kacheln mit eigenem Seitenverhältnis.
 *
 * Das Foto (lukoyang/kundenbild-image mit `lightbox`) liegt als Ebene hinter
 * Titel und Link und ist ganz klickbar; src/lightbox/lightbox.js öffnet die
 * Bildergalerie. Titel und Link-Absatz lassen Klicks durch, nur der Shop-Link
 * selbst nicht.
 */
.lukoyang-bento {
	--lukoyang-bento-gap: 1rem;
	container-type: inline-size;
}

.lukoyang-bento .wp-block-post-template {
	--lukoyang-bento-columns: 1;
	display: grid;
	grid-template-columns: repeat(var(--lukoyang-bento-columns), minmax(0, 1fr));
	grid-auto-flow: row dense;
	gap: var(--lukoyang-bento-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lukoyang-bento .wp-block-post-template > li {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.875rem;
	min-width: 0;
	margin: 0;
	padding: 1.25rem;
	overflow: hidden;
	border-radius: 6px;
	background-color: var(--wp--preset--color--muted);
}

.lukoyang-bento .wp-block-post-template > li:focus {
	outline: none;
}

.lukoyang-bento .wp-block-post-template > li > * {
	margin: 0;
}

.lukoyang-bento .wp-block-post-template > li:has(.wp-block-lukoyang-kundenbild-image__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-image {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Verlauf von der Mitte nach unten, damit der helle Titel lesbar bleibt. */
.lukoyang-bento .wp-block-lukoyang-kundenbild-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(29, 27, 22, 0) 45%, rgba(29, 27, 22, 0.85));
	pointer-events: none;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-image__link {
	display: block;
	width: 100%;
	height: 100%;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-image__link:focus-visible {
	outline: none;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-image__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s ease;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-image[aria-busy="true"] {
	cursor: progress;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.lukoyang-bento .wp-block-post-template > li:hover .wp-block-lukoyang-kundenbild-image__image {
		transform: scale(1.04);
	}
}

.lukoyang-bento .wp-block-post-title {
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.33;
	text-transform: none;
	pointer-events: none;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-link {
	pointer-events: none;
}

/* Shop-Link als gelber Chip. */
.lukoyang-bento .wp-block-lukoyang-kundenbild-link__link {
	display: inline-block;
	padding: 0.375rem 0.75rem;
	border-radius: 100px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	text-wrap: balance;
	pointer-events: auto;
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-link__link:hover {
	background-color: var(--wp--preset--color--ivory);
}

.lukoyang-bento .wp-block-lukoyang-kundenbild-link__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--ivory);
	outline-offset: 2px;
}

/* Zitat-Kachel: oben beginnend, Größe der Stelle. */
.lukoyang-bento .wp-block-post-template > li.lukoyang-quote {
	justify-content: flex-start;
	padding: 2.5rem;
	background-color: var(--wp--preset--color--accent);
}

.lukoyang-bento .lukoyang-quote__text {
	font-size: clamp(1.375rem, 1rem + 1vw, 2.125rem);
}

.lukoyang-bento .wp-block-query-pagination {
	margin-top: 4.5rem;
}

@media (max-width: 599px) {
	.lukoyang-bento .wp-block-post-template > li {
		aspect-ratio: 4 / 3;
	}

	.lukoyang-bento .wp-block-post-template > li:is(:nth-child(16n + 1), :nth-child(16n + 7)) {
		aspect-ratio: 1;
	}

	.lukoyang-bento .wp-block-post-template > li:is(:nth-child(16n + 5), :nth-child(16n + 13), :nth-child(16n + 14)) {
		aspect-ratio: 4 / 5;
	}

	.lukoyang-bento .wp-block-post-template > li.lukoyang-quote {
		aspect-ratio: auto;
		padding: 2rem;
	}

	.lukoyang-bento .wp-block-query-pagination {
		margin-top: 3rem;
	}
}

@media (min-width: 600px) {
	.lukoyang-bento .wp-block-post-template {
		--lukoyang-bento-columns: 2;
		grid-auto-rows: minmax(calc((100cqi - (var(--lukoyang-bento-columns) - 1) * var(--lukoyang-bento-gap)) / var(--lukoyang-bento-columns)), auto);
	}

	.lukoyang-bento .wp-block-post-template > li:is(:nth-child(16n + 1), :nth-child(16n + 7)) {
		grid-column: span 2;
		grid-row: span 2;
		padding: 2rem;
	}

	.lukoyang-bento .wp-block-post-template > li:is(:nth-child(16n + 1), :nth-child(16n + 7)) .wp-block-post-title {
		font-size: clamp(1.375rem, 0.75rem + 1.5vw, 1.75rem);
		line-height: 1.29;
	}

	.lukoyang-bento .wp-block-post-template > li:is(:nth-child(16n + 4), :nth-child(16n + 9), :nth-child(16n + 12)) {
		grid-column: span 2;
	}

	.lukoyang-bento .wp-block-post-template > li:is(:nth-child(16n + 5), :nth-child(16n + 13), :nth-child(16n + 14)) {
		grid-row: span 2;
	}
}

@media (min-width: 900px) {
	.lukoyang-bento .wp-block-post-template {
		--lukoyang-bento-columns: 4;
	}
}


/*
 * „Weitere … laden“ in Query-Loops mit `lukoyang-load-more` (Galerie, Blog)
 * wie ein Outline-Button, src/load-more/load-more.js lädt damit nach.
 */
.lukoyang-load-more .wp-block-query-pagination-next {
	display: inline-block;
	padding: calc(var(--wp--preset--spacing--30) - 1.5px) calc(1.625rem - 1.5px);
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 100px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.lukoyang-load-more .wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.lukoyang-load-more .wp-block-query-pagination-next[aria-disabled="true"] {
	opacity: 0.5;
	cursor: progress;
}


/*
 * Blog (templates/home.html, templates/archive.html, Beiträge aus
 * patterns/blog-beitraege.php): Beitragsbild im Format des Designs mit
 * gelben Kategorie-Badges oben links. Ohne Beitragsbild bleibt die Fläche
 * sandfarben stehen, damit die Karten gleich hoch beginnen.
 */
/*
 * Zeilenabstand hier statt im Block: Mit getrenntem Abstand für Zeilen und
 * Spalten schreibt WordPress beide Werte in die calc()-Formel der
 * Spaltenbreite, das Raster fiele dann auf eine Spalte zurück.
 */
.lukoyang-blog .wp-block-post-template {
	row-gap: 4.5rem;
}

.lukoyang-blog__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 437 / 340;
	border-radius: 6px;
	background-color: var(--wp--preset--color--muted);
}

/* Auf Sand (z. B. „Weitere Artikel“) wäre die leere Fläche unsichtbar. */
.has-muted-background-color .lukoyang-blog__media {
	background-color: var(--wp--preset--color--ivory);
}

.lukoyang-blog__media .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.lukoyang-blog__media .wp-block-post-featured-image :is(a, img) {
	display: block;
	width: 100%;
	height: 100%;
}

.lukoyang-blog .lukoyang-blog__badges {
	position: absolute;
	top: 1rem;
	left: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
}

:is(.lukoyang-blog__badges, .lukoyang-article__badges) a {
	padding: 0.375rem 0.75rem;
	border-radius: 100px;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

:is(.lukoyang-blog__badges, .lukoyang-article__badges) .wp-block-post-terms__separator {
	display: none;
}

.lukoyang-blog .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

/* „Weiterlesen →“ wie der Shop-Link der Kundenbilder. */
.lukoyang-blog .wp-block-read-more {
	display: inline-block;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.35em;
}

.lukoyang-blog .wp-block-read-more:hover {
	text-decoration: none;
}

.lukoyang-blog .wp-block-query-pagination {
	margin-top: 5rem;
}

/*
 * Beitrag (templates/single.html): Kopf mit Badges, Titel und Auszug als
 * Einleitung auf 960px, Beitragsbild in voller Breite, Text auf 760px.
 * Abschnitte in voller Breite bringen die Patterns mit (Blog: Nummerierte
 * Karten auf Sand, Blog: Passende Skulpturen).
 */
.lukoyang-article__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.lukoyang-article__content > * + * {
	margin-block-start: 1.5rem;
}

.lukoyang-article__content > :is(h2, h3):not(:first-child) {
	margin-block-start: 3rem;
}

.lukoyang-article__content > :is(p, ul, ol):not(.has-text-color) {
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.75;
}

/*
 * Nummerierte Karten (patterns/blog-karten.php). Der Zeilenabstand steht hier,
 * aus demselben Grund wie beim Blog-Raster.
 */
.lukoyang-numbered-cards {
	row-gap: 4rem;
}

.lukoyang-numbered-card .lukoyang-numbered-card__number {
	flex: none;
	width: 2.75rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: 2.5rem;
	font-weight: 850;
	line-height: 1;
}


/*
 * Über uns (patterns/ueber-uns-*.php)
 */

/* Aufgaben im Team: gelbe Punkte statt Listenzeichen. */
.lukoyang-dot-list {
	padding-left: 0;
	list-style: none;
}

.lukoyang-dot-list li {
	position: relative;
	padding-left: 1.25rem;
	line-height: 1.75;
}

.lukoyang-dot-list li + li {
	margin-top: 0.625rem;
}

.lukoyang-dot-list li::before {
	content: "";
	position: absolute;
	top: calc(0.5lh - 4px);
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

/*
 * LUK · O · YANG: Die drei Wörter füllen zusammen die Breite (cqi), die Linie
 * ist so breit wie das Wort. Unter 600px untereinander, Erklärung daneben.
 */
.lukoyang-name-meaning {
	container-type: inline-size;
}

.lukoyang-name-meaning .lukoyang-name-meaning__word {
	width: fit-content;
	margin: 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid currentcolor;
	font-family: var(--wp--preset--font-family--archivo-wide);
	font-size: 13cqi;
	font-weight: 850;
	line-height: 1;
}

.lukoyang-name-meaning .lukoyang-name-meaning__text {
	font-weight: 600;
	line-height: 1.5;
}

@media (max-width: 599px) {
	.wp-block-group.lukoyang-name-meaning {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.lukoyang-name-meaning > * {
		display: flex;
		align-items: center;
		gap: 1rem;
		padding: 0.75rem 0;
		border-bottom: 2px solid currentcolor;
	}

	.lukoyang-name-meaning .lukoyang-name-meaning__word {
		flex: none;
		width: 3.6em;
		padding: 0;
		border: 0;
		font-size: 2.5rem;
	}

	.lukoyang-name-meaning .lukoyang-name-meaning__text {
		margin: 0;
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Yin, Symbol, Yang: untereinander zentriert. */
@media (max-width: 781px) {
	.lukoyang-yin-yang > .wp-block-column,
	.lukoyang-yin-yang .has-text-align-right {
		text-align: center;
	}

	.lukoyang-yin-yang .wp-block-image img {
		width: min(240px, 100%) !important;
	}
}

/* Checkliste mit gelbem Kreis und Häkchen (Lucide check), Linie unter jedem Punkt. */
.lukoyang-check-list {
	padding-left: 0;
	list-style: none;
}

.lukoyang-check-list li {
	position: relative;
	padding: 1.125rem 0 1.125rem 3.25rem;
	border-bottom: 1px solid rgb(29 27 22 / 12%);
	line-height: 1.6;
}

.lukoyang-check-list li:first-child {
	padding-top: 0;
}

.lukoyang-check-list li::before {
	content: "";
	position: absolute;
	top: 1.125rem;
	left: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 1rem;
}

.lukoyang-check-list li:first-child::before {
	top: 0;
}

.lukoyang-check-list strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/*
 * Buddha Wegweiser (patterns/wegweiser-ratgeber.php): Bild und Text im
 * Wechsel. Untereinander (Spalten-Breakpoint 782px) steht das Bild immer
 * über dem Text, egal auf welcher Seite es breit steht.
 */
/* Auch kleine Bilder füllen die Spalte, damit alle Zeilen gleich aussehen. */
.lukoyang-guide .wp-block-image img {
	width: 100%;
}

@media (max-width: 781px) {
	.lukoyang-guide > .wp-block-column:has(> .wp-block-image) {
		order: -1;
	}
}

/*
 * Ratgeber-Beiträge des Buddha Wegweisers (patterns/wegweiser-*.php). Kopf
 * und Textspalte kommen vom Blogbeitrag (templates/single.html, lukoyang-article).
 */

/* Kompakte Checkliste: kleiner gelber Kreis mit Häkchen, ohne Linien. Ein
   Punkt kann mit fettem Titel und Zeilenumbruch beginnen. */
.lukoyang-tick-list {
	padding-left: 0;
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.75;
	list-style: none;
}

.lukoyang-tick-list li {
	position: relative;
	padding-left: 2.625rem;
}

.lukoyang-tick-list li + li {
	margin-top: 0.625rem;
}

.lukoyang-tick-list li:has(> strong:first-child) + li {
	margin-top: 1.25rem;
}

.lukoyang-tick-list li::before {
	content: "";
	position: absolute;
	top: calc(0.5lh - 0.8125rem);
	left: 0;
	width: 1.625rem;
	height: 1.625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b16' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 0.875rem;
}

.lukoyang-tick-list strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}


/*
 * Produktseite (templates/single-product.html): Kopf (Titel und
 * Kurzbeschreibung), Galerie und Kaufbereich stehen in dieser Reihenfolge im
 * Raster, auf schmalen Bildschirmen also untereinander. Ab 1024px Galerie
 * links über beide Zeilen, rechts oben der Kopf, darunter der Kaufbereich. Der Breakpoint steht auch
 * in src/product-gallery/style.scss.
 */
.lukoyang-product__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

.lukoyang-product__grid > * {
	min-width: 0;
	margin: 0;
}

@media (min-width: 1024px) {
	.lukoyang-product__grid {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		column-gap: clamp(2rem, 5vw, 4.5rem);
	}

	.lukoyang-product__grid > .lukoyang-product__header {
		grid-column: 2;
		grid-row: 1;
	}

	.lukoyang-product__grid > .wp-block-lukoyang-product-gallery {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.lukoyang-product__grid > .lukoyang-product__summary {
		grid-column: 2;
		grid-row: 2;
	}
}

.lukoyang-product__header > * {
	margin-bottom: 0;
}

/* Kurzbeschreibung (woocommerce/product-summary), WooCommerce setzt sie in Absätze. */
.lukoyang-product__header .wc-block-components-product-summary {
	line-height: 1.6;
}

.lukoyang-product__header .wc-block-components-product-summary > :first-child {
	margin-top: 0;
}

.lukoyang-product__header .wc-block-components-product-summary > :last-child {
	margin-bottom: 0;
}

.lukoyang-product__price .wp-block-woocommerce-product-price {
	font-weight: 700;
}

.lukoyang-product__price .wp-block-woocommerce-product-price del {
	margin-right: 0.375rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* Germanized-Hinweise in einer Zeile: „inkl. 19 % MwSt. · zzgl. Versandkosten“. */
.lukoyang-product__price-notes {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

.lukoyang-product__price-notes > *,
.lukoyang-product__price-notes > * > div {
	display: inline;
	margin: 0;
}

.lukoyang-product__price-notes > * + *::before {
	content: " · ";
}

.lukoyang-product__price-notes a {
	color: inherit;
}

/* Lieferzeit und Bestand (lukoyang/product-availability) mit etwas Abstand zu den Hinweisen. */
.lukoyang-product__price > .wp-block-lukoyang-product-availability {
	margin-top: 0.875rem;
}

/*
 * Warenkorb: Menge (falls mehr als ein Stück möglich) und Button über die
 * volle Breite. WooCommerces Bestandszeile über dem Formular entfällt, den
 * Bestand zeigt lukoyang/product-availability unter dem Preis. Die Angabe je
 * Variante bei variablen Produkten ebenso, siehe unten.
 */
.lukoyang-product__buy .wp-block-add-to-cart-form > .stock {
	display: none;
}

.lukoyang-product__buy form.cart {
	display: flex;
	gap: 0.5rem;
}

/*
 * Gegen Abstände von WooCommerce: 2em unter dem Formular
 * (.woocommerce div.product form.cart), 4px seitlich wegen der ausgeblendeten
 * Bestandszeile davor (… > * + *) und Abstände rechts an Menge und Eingabe.
 * Die Selektoren müssen dafür so lang sein.
 */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form form.cart {
	margin: 0;
	padding: 0;
}

/* WooCommerces Clearfix wäre im Flex-Layout je ein leeres Element mit Abstand. */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form form.cart::before,
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form form.cart::after {
	content: none;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form :is(form.cart, .woocommerce-variation-add-to-cart) > .quantity {
	display: flex;
	margin: 0;
}

/* Ohne Mengenwahl (nur ein Stück möglich) enthält .quantity nur ein verstecktes Feld. */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form :is(form.cart, .woocommerce-variation-add-to-cart) > .quantity:not(:has(input:not([type="hidden"]))) {
	display: none;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form :is(form.cart, .woocommerce-variation-add-to-cart) > .quantity:not(.wc-block-components-quantity-selector) .qty {
	width: 4.5rem;
	min-height: 3.5rem;
	margin: 0;
	padding: 0 0.25rem;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	text-align: center;
}

.lukoyang-product__buy .single_add_to_cart_button {
	flex: 1;
	min-height: 3.5rem;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
}

/*
 * Variable Produkte: jede Eigenschaft mit Label über den Swatches (siehe
 * lukoyang_variation_swatches() in inc/woocommerce.php), darunter
 * „Zurücksetzen“, die Angaben zur gewählten Variante und die Zeile mit Menge
 * und Button. WooCommerces Tabelle wird dafür zu Blöcken; die langen
 * Selektoren schlagen .woocommerce div.product form.cart …
 */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form form.cart.variations_form {
	display: block;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .variations {
	width: 100%;
	margin: 0 0 1.5rem;
	border: 0;
	border-collapse: collapse;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .variations :is(tbody, tr, th, td) {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	line-height: inherit;
	text-align: left;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .variations tr + tr {
	margin-top: 1.5rem;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .variations th {
	margin-bottom: 0.625rem;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .variations label {
	font-weight: 600;
}

/* Ohne JavaScript bleibt das <select>, mit Swatches entfällt es. */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .variations select {
	min-width: 0;
	min-height: 3.25rem;
	margin: 0;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--stone);
	border-radius: 6px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .has-swatches .variations select,
.lukoyang-swatches {
	display: none;
}

.has-swatches .lukoyang-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.lukoyang-swatches__option {
	min-width: 3.25rem;
	min-height: 3.25rem;
	padding: 0.5rem 1.5rem;
	border: 1.5px solid var(--wp--preset--color--stone);
	border-radius: 6px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.lukoyang-swatches__option[hidden] {
	display: none;
}

.lukoyang-swatches__option:hover:not(:disabled) {
	border-color: var(--wp--preset--color--contrast);
}

.lukoyang-swatches__option[aria-pressed="true"] {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 3px var(--wp--preset--color--muted);
	color: var(--wp--preset--color--base);
}

.lukoyang-swatches__option:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Nicht verfügbar (z. B. ausverkauft): durchgestrichen, nicht wählbar. */
.lukoyang-swatches__option:disabled {
	border-style: dashed;
	color: var(--wp--preset--color--stone);
	text-decoration: line-through;
	cursor: not-allowed;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .reset_variations {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Angaben zur gewählten Variante: Preis (nur wenn er abweicht) und
 * Beschreibung. Den Bestand zeigt lukoyang/product-availability unter dem
 * Preis, wie bei einfachen Produkten.
 */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .woocommerce-variation-availability {
	display: none;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .woocommerce-variation {
	font-size: var(--wp--preset--font-size--small);
}

/* WooCommerce lässt leere Bereiche stehen, deshalb der Abstand nur an gefüllten. */
.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .woocommerce-variation > :not(:empty) {
	margin-bottom: 1rem;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .woocommerce-variation p {
	margin: 0;
}

.lukoyang-product .lukoyang-product__buy .wp-block-add-to-cart-form .woocommerce-variation-add-to-cart {
	display: flex;
	gap: 0.5rem;
}


/*
 * Kundenkonto (templates/page-my-account.html): Navigation und Inhalt als
 * Karten, ab 1024px nebeneinander. WooCommerces Stylesheets laden nach diesem,
 * deshalb beginnen die Selektoren mit .lukoyang-account .woocommerce und sind
 * teils so lang, wie sie sind.
 */
.lukoyang-account > .woocommerce {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-items: start;
}

/* WooCommerce begrenzt den Bereich im Konto auf 1000px (.woocommerce-account main .woocommerce). */
.lukoyang-account.wp-block-post-content > .woocommerce {
	max-width: none;
}

/* WooCommerces Clearfix wäre im Raster je ein leeres Element. */
.lukoyang-account.wp-block-post-content > .woocommerce::before,
.lukoyang-account.wp-block-post-content > .woocommerce::after {
	content: none;
}

@media (min-width: 1024px) {
	.lukoyang-account > .woocommerce:has(> .woocommerce-MyAccount-navigation) {
		grid-template-columns: 17.5rem minmax(0, 1fr);
	}
}

.lukoyang-account .woocommerce > :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
	float: none;
	width: auto;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 50%, transparent);
	border-radius: 12px;
}

/* Navigation: Icons (Lucide) je Endpunkt, aktiver Punkt dunkel mit gelbem Icon. */
.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation {
	padding: 0.625rem;
	background-color: var(--wp--preset--color--ivory);
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation ul {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
}

/* Ab 600px nebeneinander, solange keine Seitenleiste daraus wird. */
@media (min-width: 600px) and (max-width: 1023px) {
	.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation ul {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
}

@media (max-width: 599px) {
	.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	padding: 0;
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E");
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--orders {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3Cpath d='m7.5 4.27 9 5.15'/%3E%3C/svg%3E");
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--downloads {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--payment-methods {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E");
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout {
	--lukoyang-account-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E");
	grid-column: 1 / -1;
	margin-top: 0.375rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--wp--preset--color--muted);
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li a {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.625rem 0.875rem;
	box-sizing: border-box;
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li a::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background-color: currentcolor;
	-webkit-mask: var(--lukoyang-account-icon) center / contain no-repeat;
	mask: var(--lukoyang-account-icon) center / contain no-repeat;
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li.is-active a::before {
	background-color: var(--wp--preset--color--accent);
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--wp--preset--color--contrast-3);
	font-weight: 500;
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Inhalt: Abstände über gap, leere Hinweisbereiche zählen nicht mit. */
.lukoyang-account .woocommerce > .woocommerce-MyAccount-content {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background-color: var(--wp--preset--color--base);
}

.lukoyang-account .woocommerce > .woocommerce-MyAccount-content > * {
	margin: 0;
}

.lukoyang-account .woocommerce .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Überschriften im Konto kleiner als im übrigen Inhalt. */
.lukoyang-account .woocommerce :is(h2, h3) {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

/* Überschrift über einem Formular, z. B. „Rechnungsadresse“. */
.lukoyang-account .woocommerce-MyAccount-content > form > :is(h2, h3) {
	margin-bottom: 1.5rem;
}

.lukoyang-account .woocommerce-MyAccount-content :is(.woocommerce-Address-title, .woocommerce-column) :is(h2, h3) {
	font-family: var(--wp--preset--font-family--archivo-semi-condensed);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

/*
 * Formulare (Adressen, Kontodetails, Anmelden, Passwort vergessen): ein
 * Raster statt WooCommerces Floats, Vor- und Nachname usw. ab 600px
 * nebeneinander.
 */
.lukoyang-account .woocommerce :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.lukoyang-account .woocommerce :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) > * {
	grid-column: 1 / -1;
	margin: 0;
}

.lukoyang-account .woocommerce :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword) > .form-row-first {
	grid-column: 1;
}

.lukoyang-account .woocommerce :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword) > .form-row-last {
	grid-column: 2;
}

@media (max-width: 599px) {
	.lukoyang-account .woocommerce :is(.woocommerce-address-fields__field-wrapper, .woocommerce-EditAccountForm, .woocommerce-ResetPassword) > :is(.form-row-first, .form-row-last) {
		grid-column: 1 / -1;
	}
}

.lukoyang-account .woocommerce form .clear {
	display: none;
}

.lukoyang-account .woocommerce form .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.lukoyang-account .woocommerce .woocommerce-address-fields > p:last-child {
	margin: 1.5rem 0 0;
}

.lukoyang-account .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox) {
	margin: 0 0 0.375rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.4;
}

.lukoyang-account .woocommerce form .form-row :is(input.input-text, select, textarea),
.lukoyang-account .woocommerce form .form-row .select2-container .select2-selection--single {
	min-height: 3.25rem;
	padding: 0.75rem 1rem;
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--stone);
	border-radius: 6px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	/* Mindestens 16px, sonst zoomt iOS beim Fokus hinein. */
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.lukoyang-account .woocommerce form .form-row select {
	padding-right: 3rem;
}

.lukoyang-account .woocommerce form .form-row :is(input.input-text, select, textarea):hover {
	border-color: var(--wp--preset--color--contrast-3);
}

.lukoyang-account .woocommerce form .form-row :is(input.input-text, select, textarea):focus,
.lukoyang-account .woocommerce form .form-row .select2-container--focus .select2-selection--single,
.lukoyang-account .woocommerce form .form-row .select2-container--open .select2-selection--single {
	border-color: var(--wp--preset--color--contrast);
	outline: 0;
	box-shadow: 0 0 0 3px var(--wp--preset--color--muted);
}

.lukoyang-account .woocommerce form .form-row .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
	padding: 0;
}

.lukoyang-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 2.5rem 0 1rem;
	color: inherit;
	line-height: 1.4;
}

.lukoyang-account .woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 0.75rem;
	height: 1.5rem;
	transform: translateY(-50%);
}

/* Hinweis unter dem Anzeigenamen. */
.lukoyang-account .woocommerce .woocommerce-EditAccountForm .form-row > span:not(.woocommerce-input-wrapper) {
	display: block;
	margin-top: 0.375rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

.lukoyang-account .woocommerce .woocommerce-EditAccountForm .form-row > span em {
	font-style: normal;
}

.lukoyang-account .woocommerce .woocommerce-EditAccountForm fieldset {
	display: grid;
	gap: 1.25rem;
	margin: 0.5rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 10px;
}

.lukoyang-account .woocommerce .woocommerce-EditAccountForm legend {
	padding: 0 0.5rem;
	font-weight: 700;
}

.lukoyang-account .woocommerce form .button {
	min-height: 3.25rem;
	margin: 0;
	border: 0;
	cursor: pointer;
}

/* Anmelden: „Angemeldet bleiben“ und Button in einer Zeile. */
.lukoyang-account .woocommerce .woocommerce-form-login > .form-row:has(.woocommerce-form-login__submit) {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: center;
	justify-content: flex-end;
}

/* WooCommerces Clearfix wäre in der Flex-Zeile je ein leeres Element mit Abstand. */
.lukoyang-account .woocommerce .woocommerce-form-login > .form-row:has(.woocommerce-form-login__submit)::before,
.lukoyang-account .woocommerce .woocommerce-form-login > .form-row:has(.woocommerce-form-login__submit)::after {
	content: none;
}

.lukoyang-account .woocommerce .woocommerce-form-login .woocommerce-form-login__submit {
	float: none;
	margin: 0;
}

.lukoyang-account .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.lukoyang-account .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wp--preset--color--contrast);
}

.lukoyang-account .woocommerce .lost_password {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Nicht angemeldet: Anmelden (und Passwort vergessen) als eine schmale Karte;
 * ist die Registrierung aktiv, Anmelden und Registrieren als zwei Karten.
 */
.lukoyang-account > .woocommerce:not(:has(> .woocommerce-MyAccount-navigation, #customer_login)) {
	max-width: 32rem;
	box-sizing: border-box;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 50%, transparent);
	border-radius: 12px;
	gap: 1.25rem;
}

.lukoyang-account .woocommerce #customer_login {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	width: auto;
}

@media (min-width: 900px) {
	.lukoyang-account .woocommerce #customer_login {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lukoyang-account .woocommerce #customer_login::before,
.lukoyang-account .woocommerce #customer_login::after {
	content: none;
}

.lukoyang-account .woocommerce #customer_login > .u-column1,
.lukoyang-account .woocommerce #customer_login > .u-column2 {
	display: grid;
	gap: 1.25rem;
	align-content: start;
	float: none;
	width: auto;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--stone) 50%, transparent);
	border-radius: 12px;
}

/* Tabellen (Bestellungen, Bestelldetails): ohne Rahmen, Zeilen mit Linien. */
.lukoyang-account .woocommerce table.shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-account .woocommerce table.shop_table :is(th, td) {
	padding: 1rem 0.75rem;
	border-top: 1px solid var(--wp--preset--color--muted);
	line-height: 1.5;
	text-align: left;
}

.lukoyang-account .woocommerce table.shop_table :is(th, td):first-child {
	padding-left: 0;
}

.lukoyang-account .woocommerce table.shop_table :is(th, td):last-child {
	padding-right: 0;
}

.lukoyang-account .woocommerce table.shop_table thead th {
	padding-top: 0;
	border-top: 0;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lukoyang-account .woocommerce table.shop_table a:not(.button) {
	font-weight: 600;
}

.lukoyang-account .woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-actions {
	text-align: right;
}

.lukoyang-account .woocommerce table.my_account_orders .woocommerce-orders-table__header-order-actions {
	text-align: right;
}

/* Aktionen kompakt nebeneinander, nur die erste gelb, die übrigen umrandet. */
.lukoyang-account .woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-actions a.button {
	display: inline-block;
	margin: 0.125rem 0 0.125rem 0.375rem;
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-account .woocommerce table.shop_table a.button ~ a.button,
.lukoyang-account .woocommerce .order-actions-button:not(:first-child) {
	padding: calc(0.5rem - 1.5px) calc(1rem - 1.5px);
	border: 1.5px solid var(--wp--preset--color--contrast);
	background-color: transparent;
}

.lukoyang-account .woocommerce table.shop_table a.button ~ a.button:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Bestelldetails: Beträge rechts, Gesamtsumme hervorgehoben. */
.lukoyang-account .woocommerce table.order_details :is(.product-total, tfoot td) {
	text-align: right;
}

.lukoyang-account .woocommerce table.order_details tfoot th {
	font-weight: 500;
}

.lukoyang-account .woocommerce table.order_details tfoot .order-actions--heading {
	font-weight: 500;
}

.lukoyang-account .woocommerce table.order_details .order-actions-button {
	display: inline-block;
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-account .woocommerce .woocommerce-order-details {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

.lukoyang-account .woocommerce .woocommerce-order-details > * {
	margin: 0;
}

/* Als Inline-Element ragte der Button über seinen Absatz hinaus. */
.lukoyang-account .woocommerce .order-again .button {
	display: inline-block;
}

/*
 * Unter 768px macht WooCommerce aus jeder Zeile einen Block mit Beschriftung
 * (data-title). Hier wird jede Bestellung eine kleine Karte.
 */
@media (max-width: 768px) {
	.lukoyang-account .woocommerce table.shop_table_responsive tbody tr {
		margin-bottom: 0.75rem;
		padding: 0.25rem 1rem;
		border: 1px solid var(--wp--preset--color--muted);
		border-radius: 10px;
	}

	/* Beschriftung links (float wie bei WooCommerce), Wert rechts. */
	.lukoyang-account .woocommerce table.shop_table_responsive tbody tr :is(th, td) {
		display: block;
		padding: 0.625rem 0;
		background-color: transparent;
		text-align: right;
	}

	.lukoyang-account .woocommerce table.shop_table_responsive tbody tr > :first-child {
		border-top: 0;
	}

	.lukoyang-account .woocommerce table.shop_table_responsive tbody tr :is(th, td)::before {
		content: attr(data-title);
		float: left;
		margin-right: 1rem;
		color: var(--wp--preset--color--contrast-3);
		font-weight: 500;
	}

	.lukoyang-account .woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-actions {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.lukoyang-account .woocommerce table.my_account_orders .woocommerce-orders-table__cell-order-actions a.button {
		flex: 1;
		margin: 0;
		text-align: center;
	}
}

/* Adressen (Übersicht und Bestelldetails) als Karten in Elfenbein. */
.lukoyang-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-customer-details .addresses) {
	display: grid;
	gap: 1rem;
	width: auto;
	margin: 0;
}

@media (min-width: 600px) {
	.lukoyang-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-customer-details .addresses) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lukoyang-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-customer-details .addresses)::before,
.lukoyang-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-customer-details .addresses)::after {
	content: none;
}

.lukoyang-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-customer-details .addresses) > :is(.col-1, .col-2) {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	float: none;
	width: auto;
	padding: 1.25rem 1.5rem;
	border-radius: 10px;
	background-color: var(--wp--preset--color--ivory);
}

.lukoyang-account .woocommerce .woocommerce-Addresses .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	align-items: baseline;
}

.lukoyang-account .woocommerce .woocommerce-Addresses .woocommerce-Address-title::before,
.lukoyang-account .woocommerce .woocommerce-Addresses .woocommerce-Address-title::after {
	content: none;
}

.lukoyang-account .woocommerce .woocommerce-Addresses .woocommerce-Address-title .edit {
	display: inline;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-underline-offset: 0.2em;
}

.lukoyang-account .woocommerce :is(.woocommerce-Addresses, .woocommerce-customer-details) address {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-style: normal;
	line-height: 1.6;
}

.lukoyang-account .woocommerce .woocommerce-customer-details :is(.woocommerce-customer-details--email, .woocommerce-customer-details--phone) {
	margin: 0.5rem 0 0;
	padding: 0;
}

.lukoyang-account .woocommerce .woocommerce-customer-details :is(.woocommerce-customer-details--email, .woocommerce-customer-details--phone)::before {
	content: none;
}


/*
 * Kasse und Bestellbestätigung (templates/page-checkout.html,
 * templates/order-confirmation.html) im Stil von Shopify: reduzierte Kopf- und
 * Fußzeile, Formular links auf Weiß, Bestellübersicht rechts auf Elfenbein bis
 * zum Seitenrand.
 *
 * Zweispaltig wird die Kasse nur, wenn WooCommerce sie zweispaltig rendert
 * (Klasse is-large am Container, WooCommerce misst dafür die Blockbreite).
 * Hintergrund, Kopf- und Fußzeile hängen per :has() an derselben Klasse,
 * eine Media Query könnte davon abweichen.
 *
 * Die Regeln für Raster und Hintergrund setzen voraus, dass die Seitenleiste
 * ein direktes Kind von .wc-block-checkout ist. Das gilt nur im Frontend; im
 * Editor stecken Formular und Übersicht in Editor-Wrappern, dafür gibt es
 * unten einen eigenen Abschnitt. Die Komponenten-Regeln gelten mit
 * :is(.lukoyang-checkout, .editor-styles-wrapper …) für beide.
 *
 * Germanized (Button-Lösung, § 312j BGB) hängt Gesamtsumme und Bestell-Button
 * als .wc-gzd-checkout-submit in die Seitenleiste. Daran wird nichts geändert;
 * die Seitenleiste bekommt display: contents, und das Raster setzt die
 * Übersicht nach rechts (mobil nach oben) und Gesamtsumme samt Button unter
 * das Formular.
 */
/* Maße und Farben, auch für den Kassen-Block im Editor. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) {
	--lukoyang-checkout-main: 600px;
	--lukoyang-checkout-aside: 460px;
	--lukoyang-checkout-gap: clamp(2rem, 4vw, 4.5rem);
	--lukoyang-checkout-radius: 6px;
	--lukoyang-checkout-line: color-mix(in srgb, var(--wp--preset--color--stone) 55%, var(--wp--preset--color--base));
	/* Trennlinien von WooCommerce (Optionslisten, Summen, Express-Zahlung). */
	--wc-separator-color: var(--lukoyang-checkout-line);
}

.lukoyang-checkout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.lukoyang-checkout > * {
	margin-block: 0;
}

.lukoyang-checkout > footer {
	margin-top: auto;
}

/* Geteilter Hintergrund mit Linie in der Mitte, Kopfzeile bleibt weiß. */
.lukoyang-checkout:has(.wc-block-checkout.is-large > :is(.wc-block-checkout__sidebar, .block-editor-inner-blocks)) {
	background: linear-gradient(to right, var(--wp--preset--color--base) 50%, var(--lukoyang-checkout-line) 50%, var(--lukoyang-checkout-line) calc(50% + 1px), var(--wp--preset--color--ivory) calc(50% + 1px));
}

/*
 * Spalten: links rechtsbündig bis zur Mitte, rechts linksbündig ab der Mitte.
 * Kopfzeile, Formular und Fußzeile nutzen dieselben Maße und fluchten so.
 */
.lukoyang-checkout:has(.wc-block-checkout.is-large > :is(.wc-block-checkout__sidebar, .block-editor-inner-blocks)) :is(.wp-block-lukoyang-checkout-header__inner, .wp-block-lukoyang-checkout-footer__inner) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0;
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
}

.lukoyang-checkout:has(.wc-block-checkout.is-large > :is(.wc-block-checkout__sidebar, .block-editor-inner-blocks)) :is(.wp-block-lukoyang-checkout-header__logo, .wp-block-lukoyang-checkout-footer__nav) {
	justify-self: end;
	box-sizing: border-box;
	width: min(100%, calc(var(--lukoyang-checkout-main) + var(--lukoyang-checkout-gap)));
	padding-right: var(--lukoyang-checkout-gap);
}

.lukoyang-checkout:has(.wc-block-checkout.is-large > :is(.wc-block-checkout__sidebar, .block-editor-inner-blocks)) .wp-block-lukoyang-checkout-header__actions {
	justify-self: start;
	box-sizing: border-box;
	width: min(100%, calc(var(--lukoyang-checkout-aside) + var(--lukoyang-checkout-gap)));
	padding-left: var(--lukoyang-checkout-gap);
}

/* Die Linie über den Rechtslinks endet vor der Mitte, wie das Formular. */
.lukoyang-checkout:has(.wc-block-checkout.is-large > :is(.wc-block-checkout__sidebar, .block-editor-inner-blocks)) .wp-block-lukoyang-checkout-footer__nav {
	border-top: 0;
	background: linear-gradient(var(--lukoyang-checkout-line), var(--lukoyang-checkout-line)) top left / calc(100% - var(--lukoyang-checkout-gap)) 1px no-repeat;
}

.lukoyang-checkout .wc-block-store-notices:not(:has(.wc-block-components-notice-banner)) {
	display: none;
}

.lukoyang-checkout .wc-block-store-notices {
	margin-top: var(--wp--preset--spacing--40);
}

/* Raster der Kasse. Mobil: Übersicht, Formular, Gesamtsumme und Button. */
.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout:has(> .wc-block-checkout__sidebar) {
	display: grid;
	grid-template-columns: minmax(0, var(--lukoyang-checkout-main));
	grid-template-areas: "aside" "main" "submit";
	justify-content: center;
	gap: 0;
	margin: 0;
	padding-bottom: var(--wp--preset--spacing--50);
}

.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar {
	display: contents;
}

.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__main {
	grid-area: main;
	width: auto;
	margin-top: var(--wp--preset--spacing--40);
	padding: 0;
}

.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
	grid-area: aside;
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--ivory);
	/* Elfenbein bis zum Bildschirmrand, ohne die Spalte breiter zu machen. */
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--ivory);
	clip-path: inset(0 -100vmax);
}

.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout > .wc-block-checkout__sidebar > .wc-gzd-checkout-submit {
	grid-area: submit;
	position: static;
	margin: 0;
	padding: 0;
}

/* Breit: Formular und Button links, Übersicht rechts und haftend. */
.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large:has(> .wc-block-checkout__sidebar) {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: "main aside" "submit aside";
	justify-content: stretch;
	padding-block: var(--wp--preset--spacing--50);
}

.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .wc-block-checkout__main,
.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .wc-block-checkout__sidebar > .wc-gzd-checkout-submit {
	justify-self: end;
	box-sizing: border-box;
	width: min(100%, calc(var(--lukoyang-checkout-main) + var(--lukoyang-checkout-gap)));
	margin: 0;
	padding-right: var(--lukoyang-checkout-gap);
}

.lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	align-self: start;
	justify-self: start;
	box-sizing: border-box;
	width: min(100%, calc(var(--lukoyang-checkout-aside) + var(--lukoyang-checkout-gap)));
	padding: 0 0 0 var(--lukoyang-checkout-gap);
	background: none;
	box-shadow: none;
	clip-path: none;
}

/*
 * Gesamtsumme: Germanized blendet sie auf breiten Bildschirmen in der Übersicht
 * aus und zeigt sie nur über dem Button. Rechts steht sie wieder, wie bei
 * Shopify. Mobil steht die Übersicht oben, deshalb kommt die Gesamtsumme aus
 * .wc-gzd-checkout-submit zusätzlich direkt über den Button.
 */
.lukoyang-checkout .wc-gzd-checkout .is-large .wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-wrapper.wc-gzd-hide-total-wrapper:has(.wc-block-components-totals-footer-item) {
	display: block;
}

.lukoyang-checkout .wc-gzd-checkout .wc-block-checkout:not(.is-large) .wc-gzd-checkout-submit > .wp-block-woocommerce-checkout-order-summary-block {
	display: block;
	margin-top: var(--wp--preset--spacing--40);
	border: 0;
}

.lukoyang-checkout .wc-gzd-checkout .wc-block-checkout:not(.is-large) .wc-gzd-checkout-submit > .wp-block-woocommerce-checkout-order-summary-block :is(.wc-block-components-checkout-order-summary__title, .wc-gzd-hide-total-wrapper) {
	display: none;
}

.lukoyang-checkout .wc-gzd-checkout .wc-block-checkout:not(.is-large) .wc-gzd-checkout-submit > .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
	display: block;
}

.lukoyang-checkout .wc-gzd-checkout .wc-gzd-checkout-submit .wc-block-components-totals-wrapper {
	padding-inline: 0;
	border-top: 1px solid var(--lukoyang-checkout-line);
}

.lukoyang-checkout .wc-gzd-checkout .wc-gzd-checkout-submit .wc-block-components-totals-wrapper.slot-wrapper:not(:has(.wc-block-components-order-meta > *)) {
	display: none;
}

.lukoyang-checkout .wc-gzd-checkout .wc-gzd-checkout-submit .wc-block-checkout__actions {
	padding: var(--wp--preset--spacing--40) 0 0;
	border-top: 0;
}

/*
 * Editor: dieselbe Aufteilung für den Kassen-Block. Dort stecken Formular und
 * Übersicht in Editor-Wrappern, und Germanizeds Submit-Block gibt es nicht;
 * WooCommerces Bestell-Button steht am Ende des Formulars. Ohne
 * Template-Ansicht fehlt der geteilte Hintergrund, deshalb füllt die
 * Übersicht selbst die rechte Hälfte bis zum Rand.
 */
.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: minmax(0, var(--lukoyang-checkout-main));
	justify-content: center;
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout > .block-editor-inner-blocks > .block-editor-block-list__layout > .wc-block-checkout__main {
	order: 1;
	width: auto;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout > .block-editor-inner-blocks > .block-editor-block-list__layout > .wc-block-checkout__sidebar {
	order: 0;
	width: auto;
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--ivory);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--ivory);
	clip-path: inset(0 -100vmax);
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .block-editor-inner-blocks > .block-editor-block-list__layout {
	grid-template-columns: 1fr 1fr;
	justify-content: stretch;
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .block-editor-inner-blocks > .block-editor-block-list__layout > .wc-block-checkout__main {
	order: 0;
	justify-self: end;
	box-sizing: border-box;
	width: min(100%, calc(var(--lukoyang-checkout-main) + var(--lukoyang-checkout-gap)));
	margin: 0;
	padding-right: var(--lukoyang-checkout-gap);
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .block-editor-inner-blocks > .block-editor-block-list__layout > .wc-block-checkout__sidebar {
	order: 0;
	box-sizing: border-box;
	padding: 0 0 0 var(--lukoyang-checkout-gap);
	border-left: 1px solid var(--lukoyang-checkout-line);
	/* Nur nach rechts bis zum Rand, links endet die Fläche an der Linie. */
	clip-path: inset(0 -100vmax 0 0);
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .block-editor-inner-blocks > .block-editor-block-list__layout > .wc-block-checkout__sidebar > .block-editor-inner-blocks {
	max-width: var(--lukoyang-checkout-aside);
}

/* Im Template liefert der geteilte Hintergrund Fläche und Linie. */
.editor-styles-wrapper .lukoyang-checkout .wp-block-woocommerce-checkout .wc-block-checkout.is-large > .block-editor-inner-blocks > .block-editor-block-list__layout > .wc-block-checkout__sidebar {
	border-left: 0;
	background: none;
	box-shadow: none;
}

.editor-styles-wrapper .wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
}

/* Schritte: ruhige Überschriften, ohne Nummern und Linie. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-form .wc-block-components-checkout-step {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-form .wc-block-components-checkout-step::after,
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-form .wc-block-components-checkout-step .wc-block-components-checkout-step__title::before {
	content: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-step .wc-block-components-checkout-step__heading {
	margin: 0 0 1rem;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-step .wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title,
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-order-summary__title .wc-block-components-checkout-order-summary__title-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-step__description {
	margin: -0.5rem 0 1rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-step__content > p,
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-checkout__guest-checkout-notice {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
}

/* Express-Zahlung: Rahmen mit Titel und „Oder“-Trenner, dezent. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-express-payment--checkout .wc-block-components-express-payment__title {
	padding-inline: 0.75rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-express-payment-continue-rule {
	margin: var(--wp--preset--spacing--40) 0;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Optionslisten (Versand, Abholung, Zahlung): verbundene Liste, gewählte
 * Option in Elfenbein mit dunklem Rahmen.
 *
 * WooCommerce zeichnet Außenrahmen (::after am Container), Trennlinien
 * (::after je Option) und die Hervorhebung (Inset-Schatten) getrennt, die
 * Linien liegen dann versetzt übereinander. Stattdessen hat jede Option einen
 * eigenen Rahmen, die Rahmen überlappen um 1px, und die gewählte liegt oben.
 * Versand: die Optionen sind label-Elemente; Zahlung: Wrapper mit label und Inhalt.
 */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control.wc-block-components-radio-control--highlight-checked::after,
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option)::after {
	content: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option) {
	position: relative;
	margin: -1px 0 0;
	border: 1px solid var(--lukoyang-checkout-line);
	border-radius: 0;
	background-color: var(--wp--preset--color--base);
	box-shadow: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option):first-child {
	margin-top: 0;
	border-top-left-radius: var(--lukoyang-checkout-radius);
	border-top-right-radius: var(--lukoyang-checkout-radius);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option):last-child {
	border-bottom-left-radius: var(--lukoyang-checkout-radius);
	border-bottom-right-radius: var(--lukoyang-checkout-radius);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control > :is(.wc-block-components-radio-control__option, .wc-block-components-radio-control-accordion-option):has(.wc-block-components-radio-control__input:checked) {
	z-index: 1;
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--ivory);
}

/* Text und Radio-Button vertikal mittig. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__option {
	display: flex;
	align-items: center;
	min-height: 3.5rem;
	box-sizing: border-box;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0;
	background: none;
	box-shadow: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control :is(.wc-block-components-radio-control__label, .wc-block-components-radio-control__secondary-label) {
	font-size: 0.9375rem;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__input {
	border-color: var(--wp--preset--color--stone);
	/*
	 * Mittig: WooCommerce verschiebt um -45 % (Kreis zu tief), bei den
	 * Versandoptionen setzt es dagegen top: 16px ohne Verschiebung.
	 */
	top: 50%;
	transform: translateY(-50%);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
	border: 0;
	background-color: var(--wp--preset--color--contrast);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--base);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
	outline: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control .wc-block-components-radio-control__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

/* Inhalt der gewählten Zahlungsart (z. B. Hinweis zur Überweisung). */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control-accordion-content {
	padding: 0 1rem 1rem 3rem;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-radio-control-accordion-content:empty {
	display: none;
}

/* Gesetzliche Gewährleistung (Germanized) als kleiner Link. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-gzd-block-checkout__legal-guarantee {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Bestell-Button: volle Breite, dunkel, eckig wie die Felder. Text und
 * Platzierung kommen von Germanized.
 */
:is(.lukoyang-checkout, .editor-styles-wrapper) .wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 3.5rem;
	margin: 0;
	padding: 1rem 1.5rem;
	border: 0;
	border-radius: var(--lukoyang-checkout-radius);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 1.0625rem;
	font-weight: 700;
	transition: background-color 0.15s;
}

:is(.lukoyang-checkout, .editor-styles-wrapper) .wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
}

:is(.lukoyang-checkout, .editor-styles-wrapper) .wp-block-woocommerce-checkout .wc-block-components-button.wc-block-components-checkout-place-order-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
	box-shadow: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-checkout__actions .wc-block-checkout__actions_row {
	gap: 1rem;
}

/* „Zurück zum Warenkorb“ klein mit Chevron. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-return-to-cart-button {
	display: inline-flex;
	gap: 0.25rem;
	align-items: center;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-return-to-cart-button svg {
	position: static;
	transform: none;
}

/* Bestellübersicht */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-checkout-order-summary__title {
	margin: 0;
	padding: 0 0 1rem;
	border: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wp-block-woocommerce-checkout-order-summary-block :is(.wc-block-components-totals-wrapper, .wc-block-components-totals-item, .wc-block-components-panel, .wc-block-components-panel__button, .wc-block-components-panel__content) {
	padding-inline: 0;
}

/* Germanized rahmt die Gesamtsumme über dem Button wie eine eigene Übersicht. */
.lukoyang-checkout .wc-gzd-checkout .wc-gzd-checkout-submit > .wp-block-woocommerce-checkout-order-summary-block {
	border: 0;
	border-radius: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary {
	padding: 0;
	background: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item {
	gap: 1rem;
	padding-block: 0.5rem;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__image {
	flex: none;
	width: 64px;
	margin: 0;
	padding: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
	width: 64px;
	max-width: none;
	height: 64px;
	box-sizing: border-box;
	border: 1px solid var(--lukoyang-checkout-line);
	border-radius: 8px;
	background-color: var(--wp--preset--color--base);
	object-fit: cover;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	top: -0.5rem;
	right: -0.5rem;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.375rem;
	box-sizing: border-box;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--contrast);
	box-shadow: none;
	color: var(--wp--preset--color--base);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.375rem;
	transform: none;
}

/*
 * Schmale Bildschirme: Die Beschreibung darf schrumpfen und umbrechen.
 * Sonst schieben Germanizeds Angaben (Breite 120 bzw. 130 %) und das
 * EU-Garantielabel (200px) die Zeile samt Preis über den Rand. WooCommerce
 * setzt die Artikelliste als Tabelle, die nie schmaler als ihr Inhalt wird.
 */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary__content {
	display: block;
	width: 100%;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-product-metadata .wc-block-components-product-details [class*="wc-block-components-product-details__gzd-"] {
	width: auto;
	max-width: 100%;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary :is(.wc-gzd-garan-label, .wc-gzd-garan-label > a) {
	max-width: 100%;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-gzd-garan-label img {
	max-width: 100%;
	height: auto;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	flex: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__description {
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-order-summary-item__total-price {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-product-metadata {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-product-metadata p {
	margin: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-order-summary .wc-block-components-product-details .wc-block-components-product-details__value {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

/* Summen: kompakt, Gesamtsumme groß. */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-wrapper {
	padding-block: 1rem;
	border-top: 1px solid var(--lukoyang-checkout-line);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wp-block-woocommerce-checkout-order-summary-block .wp-block-woocommerce-checkout-order-summary-cart-items-block.wc-block-components-totals-wrapper {
	padding-top: 0.5rem;
	border-top: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wp-block-woocommerce-checkout-order-summary-totals-block .wc-block-components-totals-wrapper {
	padding-block: 0.25rem;
	border: 0;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wp-block-woocommerce-checkout-order-summary-totals-block {
	padding-block: 0.75rem;
	border-top: 1px solid var(--lukoyang-checkout-line);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-item {
	font-size: var(--wp--preset--font-size--small);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-item .wc-block-components-totals-item__description {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

/*
 * Ladezustand nach einem Wechsel der Zahlungsart, bis die neu berechneten
 * Summen (Skonto bei Vorkasse) da sind. Die Klasse setzt
 * src/woocommerce/checkout-skonto.js am Checkout-Block. Beträge blenden ab,
 * „Gesamtsumme“ bekommt einen Kreisel (in der Übersicht und über dem Button),
 * der Bestell-Button ist gesperrt.
 */
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value {
	transition: opacity 0.15s;
}

.wp-block-woocommerce-checkout.lukoyang-is-recalculating .wc-block-components-totals-item__value {
	opacity: 0.35;
}

.wp-block-woocommerce-checkout.lukoyang-is-recalculating .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after {
	content: "";
	display: inline-block;
	width: 0.875em;
	height: 0.875em;
	margin-inline-start: 0.5em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.1em;
	animation: lukoyang-spin 0.7s linear infinite;
}

.wp-block-woocommerce-checkout.lukoyang-is-recalculating .wc-block-components-checkout-place-order-button {
	opacity: 0.6;
	pointer-events: none;
}

@keyframes lukoyang-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-checkout.lukoyang-is-recalculating .wc-block-components-totals-footer-item .wc-block-components-totals-item__label::after {
		animation-duration: 2s;
	}
}

/* Gutschein-Panel */
:is(.lukoyang-checkout, .editor-styles-wrapper .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon .wc-block-components-panel__button {
	margin: 0;
	padding-block: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}


/*
 * Bestellbestätigung: dasselbe geteilte Raster, Bestätigung und Adressen
 * links, Bestelldetails rechts. Hier gibt es keine is-large-Klasse, deshalb
 * eine Media Query an ungefähr derselben Stelle.
 *
 * Ruft jemand die Seite einer Gastbestellung später oder in einer anderen
 * Sitzung auf, zeigt WooCommerce statt der Details nur ein Formular zur
 * E-Mail-Bestätigung. Ohne Bestelldetails bleibt die Seite deshalb einspaltig
 * (:has(.wc-block-order-confirmation-totals)).
 */
.lukoyang-thankyou .lukoyang-thankyou__layout {
	display: grid;
	grid-template-columns: minmax(0, var(--lukoyang-checkout-main));
	justify-content: center;
	padding: 0 var(--wp--style--root--padding-right) var(--wp--preset--spacing--50) var(--wp--style--root--padding-left);
}

.lukoyang-thankyou .lukoyang-thankyou__layout > * {
	margin: 0;
}

.lukoyang-thankyou .lukoyang-thankyou__main {
	padding-block: var(--wp--preset--spacing--50);
}

.lukoyang-thankyou .lukoyang-thankyou__main > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Mobil: Bestelldetails als Elfenbein-Band unter der Bestätigung. */
.lukoyang-thankyou .lukoyang-thankyou__aside {
	padding-block: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--ivory);
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--ivory);
	clip-path: inset(0 -100vmax);
}

@media (min-width: 900px) {
	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) {
		background: linear-gradient(to right, var(--wp--preset--color--base) 50%, var(--lukoyang-checkout-line) 50%, var(--lukoyang-checkout-line) calc(50% + 1px), var(--wp--preset--color--ivory) calc(50% + 1px));
	}

	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) .lukoyang-thankyou__layout,
	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) :is(.wp-block-lukoyang-checkout-header__inner, .wp-block-lukoyang-checkout-footer__inner) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 0;
		/* Im Flex-Container .lukoyang-checkout schrumpfte das Raster sonst auf seinen Inhalt. */
		width: 100%;
		max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
		margin-inline: auto;
		box-sizing: border-box;
	}

	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) :is(.lukoyang-thankyou__main, .wp-block-lukoyang-checkout-header__logo, .wp-block-lukoyang-checkout-footer__nav) {
		justify-self: end;
		box-sizing: border-box;
		width: min(100%, calc(var(--lukoyang-checkout-main) + var(--lukoyang-checkout-gap)));
		padding-right: var(--lukoyang-checkout-gap);
	}

	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) :is(.lukoyang-thankyou__aside, .wp-block-lukoyang-checkout-header__actions) {
		justify-self: start;
		box-sizing: border-box;
		width: min(100%, calc(var(--lukoyang-checkout-aside) + var(--lukoyang-checkout-gap)));
		padding-left: var(--lukoyang-checkout-gap);
	}

	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) .lukoyang-thankyou__aside {
		position: sticky;
		top: var(--wp--preset--spacing--40);
		align-self: start;
		padding-block: var(--wp--preset--spacing--50);
		background: none;
		box-shadow: none;
		clip-path: none;
	}

	.lukoyang-thankyou:has(.wc-block-order-confirmation-totals) .wp-block-lukoyang-checkout-footer__nav {
		border-top: 0;
		background: linear-gradient(var(--lukoyang-checkout-line), var(--lukoyang-checkout-line)) top left / calc(100% - var(--lukoyang-checkout-gap)) 1px no-repeat;
	}
}

/* Status mit Häkchen (Lucide circle-check) wie bei Shopify. */
.lukoyang-thankyou .wc-block-order-confirmation-status {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.25rem 1rem;
	align-items: center;
}

.lukoyang-thankyou .wc-block-order-confirmation-status::before {
	content: "";
	grid-row: span 2;
	width: 3rem;
	height: 3rem;
	background-color: var(--wp--preset--color--success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lukoyang-thankyou .wc-block-order-confirmation-status > * {
	grid-column: 2;
	margin: 0;
}

.lukoyang-thankyou .wc-block-order-confirmation-status h1 {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.lukoyang-thankyou .wc-block-order-confirmation-status p {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--small);
}

/* Hinweis und Formular zur E-Mail-Bestätigung, Felder wie in der Kasse. */
.lukoyang-thankyou .wc-block-order-confirmation-status-description {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-thankyou .wc-block-order-confirmation-status-description > p {
	margin: 0;
}

.lukoyang-thankyou .woocommerce-verify-email {
	display: grid;
	gap: 1rem;
	margin-top: 1.5rem;
}

.lukoyang-thankyou .woocommerce-verify-email .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.lukoyang-thankyou .woocommerce-verify-email label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

.lukoyang-thankyou .woocommerce-verify-email input.input-text {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 3.25rem;
	padding: 0 0.875rem;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: var(--lukoyang-checkout-radius);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
}

/* WooCommerce setzt das Feld per ID auf 50 % Breite. */
.lukoyang-thankyou .woocommerce-verify-email #verify-email {
	width: 100%;
}

.lukoyang-thankyou .woocommerce-verify-email input.input-text:focus {
	border-color: var(--wp--preset--color--contrast);
	outline: 0;
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

.lukoyang-thankyou .woocommerce-verify-email .button {
	width: 100%;
	min-height: 3.5rem;
	border: 0;
	border-radius: var(--lukoyang-checkout-radius);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

.lukoyang-thankyou .woocommerce-verify-email .button:hover {
	background-color: var(--wp--preset--color--contrast-2);
}

.lukoyang-thankyou .woocommerce-verify-email .button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* Leerer Bereich der Bestelldetails nicht als Elfenbein-Band. */
.lukoyang-thankyou .lukoyang-thankyou__aside:not(:has(.wc-block-order-confirmation-totals)) {
	display: none;
}

/* Bestellnummer, Datum, Summe usw. als Karte. */
.lukoyang-thankyou .wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 1rem 1.5rem;
	margin: 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--lukoyang-checkout-line);
	border-radius: var(--lukoyang-checkout-radius);
	list-style: none;
}

.lukoyang-thankyou .wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-thankyou .wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.lukoyang-thankyou .wc-block-order-confirmation-summary .wc-block-order-confirmation-summary-list-item__value {
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Überschriften der Abschnitte wie die Schritte der Kasse. */
.lukoyang-thankyou :is(.lukoyang-thankyou__main, .lukoyang-thankyou__aside) h2.wp-block-heading {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* Adressen als zwei Karten; den Rahmen hat WooCommerce schon. */
.lukoyang-thankyou .wc-block-order-confirmation-address-wrapper {
	gap: 1rem;
}

.lukoyang-thankyou .wc-block-order-confirmation-address-wrapper :is(.wc-block-order-confirmation-shipping-address, .wc-block-order-confirmation-billing-address) {
	box-sizing: border-box;
	margin: 0;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--lukoyang-checkout-line);
	border-radius: var(--lukoyang-checkout-radius);
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-thankyou .wc-block-order-confirmation-address-wrapper address {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	line-height: 1.6;
}

/* Germanized-Hinweise (z. B. Bankverbindung) und weitere Angaben. */
.lukoyang-thankyou .wc-block-order-confirmation-additional-information {
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-thankyou .wc-block-order-confirmation-additional-information:empty {
	display: none;
}

/* Bestelldetails ohne Tabellenlinien, Beträge rechts. Die rechte Spalte darf
   umbrechen, weil dort auch lange Texte stehen (z. B. Abholadresse und Hinweis
   der Versandart); Beträge bleiben zusammen, WooCommerce setzt zwischen Zahl
   und Währung ein &nbsp;. */
.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table :is(th, td) {
	padding: 0.375rem 0;
	border: 0;
	background: none;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table .wc-block-order-confirmation-totals__total {
	padding-left: 1rem;
	text-align: right;
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table tbody td {
	padding-block: 0.75rem;
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table tbody .wc-block-order-confirmation-totals__product a {
	font-weight: 600;
	text-decoration: none;
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table tbody .wc-block-order-confirmation-totals__product :is(p, .wc-item-meta) {
	margin: 0.125rem 0 0;
	color: var(--wp--preset--color--contrast-3);
	font-size: var(--wp--preset--font-size--x-small);
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table tfoot tr:first-child > * {
	padding-top: 1rem;
	border-top: 1px solid var(--lukoyang-checkout-line);
}

.lukoyang-thankyou .wc-block-order-confirmation-totals .wc-block-order-confirmation-totals__table tfoot td {
	font-weight: 600;
}


/*
 * Gemeinsame Komponenten von Warenkorb und Kasse: Felder, Checkboxen,
 * Buttons, Hinweise, Mengenwähler. Das Layout des Warenkorbs bleibt.
 *
 * WooCommerce setzt die Felder mit bis zu fünf Klassen (Fokus im aktiven
 * Feld), deshalb beginnen diese Regeln mit dem body.
 */
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]),
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__select,
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-textarea {
	height: 3.25rem;
	padding-inline: 0.875rem;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: var(--lukoyang-checkout-radius, 6px);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	transition: border-color 0.15s, box-shadow 0.15s;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-textarea {
	height: auto;
	min-height: 6rem;
	padding-block: 0.75rem;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input.is-active input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]) {
	padding: 1.375rem 0.875rem 0.375rem;
	border: 1px solid var(--wp--preset--color--stone);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]):focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input.is-active input:is([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]):focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-textarea:focus {
	padding-left: 0.875rem;
	border: 1px solid var(--wp--preset--color--contrast);
	outline: 0;
	box-shadow: 0 0 0 1px var(--wp--preset--color--contrast);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__select {
	padding-top: 1rem;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__container {
	border-radius: var(--lukoyang-checkout-radius, 6px);
}

/* Schwebende Labels von WooCommerce, nur an den neuen Innenabstand angepasst. */
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input label,
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-blocks-components-select .wc-blocks-components-select__label {
	left: 0.875rem;
	color: var(--wp--preset--color--contrast-3);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input label {
	top: 1.625rem;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-text-input.is-active label {
	top: 0.4375rem;
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :is(.wc-block-components-text-input, .wc-blocks-components-select).has-error :is(input, select) {
	border-color: #cc1818;
	box-shadow: 0 0 0 1px #cc1818;
}

/* Checkboxen, auch die von Germanized. */
:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid var(--wp--preset--color--stone);
	border-radius: 4px;
	background-color: var(--wp--preset--color--base);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--wp--preset--color--base);
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkbox label {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

:is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-checkbox.has-error .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: #cc1818;
}

/* Gutschein-Button und weitere Buttons neben Feldern. */
body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button {
	height: 3.25rem;
	padding-inline: 1.25rem;
	border-radius: var(--lukoyang-checkout-radius, 6px);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

body:is(.woocommerce-cart, .woocommerce-checkout, .editor-styles-wrapper) :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) .wc-block-components-totals-coupon__button:hover {
	background-color: var(--wp--preset--color--contrast-2);
}

/* Hinweise (Fehler, Info, Erfolg) */
:is(.lukoyang-checkout, .wp-block-woocommerce-cart) .wc-block-components-notice-banner {
	padding: 0.875rem 1rem;
	border-color: var(--lukoyang-checkout-line, var(--wp--preset--color--stone));
	border-radius: var(--lukoyang-checkout-radius, 6px);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
}

:is(.lukoyang-checkout, .wp-block-woocommerce-cart) .wc-block-components-notice-banner.is-error {
	border-color: #cc1818;
	background-color: #fdf3f3;
}

:is(.lukoyang-checkout, .wp-block-woocommerce-cart) .wc-block-components-notice-banner.is-success {
	border-color: var(--wp--preset--color--success);
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--base));
}

:is(.lukoyang-checkout, .wp-block-woocommerce-cart) .wc-block-components-notice-banner.is-success > svg {
	background-color: var(--wp--preset--color--success);
}

/* Mengenwähler im Warenkorb */
.wp-block-woocommerce-cart .wc-block-components-quantity-selector {
	border-radius: 6px;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector::after {
	border-color: var(--wp--preset--color--stone);
	border-radius: 6px;
}

.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:focus-visible,
.wp-block-woocommerce-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: -2px;
	box-shadow: none;
}

/* „Zur Kasse“ wie der Bestell-Button. */
.wp-block-woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button.wc-block-cart__submit-button {
	min-height: 3.5rem;
	border-radius: 6px;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 1.0625rem;
	font-weight: 700;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-container .wc-block-components-button.wc-block-cart__submit-button:hover {
	background-color: var(--wp--preset--color--contrast-2);
	color: var(--wp--preset--color--base);
}

/* Summen im Warenkorb wie in der Kasse. */
.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.wp-block-woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}