/* ==========================================================================
   GRVTY – globale Styles
   Farben/Typo kommen aus theme.json (--wp--preset--*). Hier nur, was
   theme.json nicht ausdrücken kann: Vinyl-Bauteil,
   Utilities, Reveal-Choreografie, View Transitions.
   ========================================================================== */

:root {
	--g-ease: var(--wp--custom--motion--ease, cubic-bezier(.16, 1, .3, 1));
	--g-ease-io: var(--wp--custom--motion--ease-in-out, cubic-bezier(.65, 0, .35, 1));
	--g-fast: var(--wp--custom--motion--fast, 160ms);
	--g-base: var(--wp--custom--motion--base, 320ms);
	--g-slow: var(--wp--custom--motion--slow, 900ms);
	--g-header-h: var(--wp--custom--header--height, 72px);
	--g-gutter: clamp(1rem, 3vw, 2.5rem);
	--g-accent: var(--wp--preset--color--accent);
	--song-accent: var(--g-accent);
	/* Schrift auf Cover-Akzentflächen: Cover-Akzente sind immer hell → immer dunkle Schrift */
	--song-ink: #0a0a0a;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color var(--g-base) var(--g-ease), color var(--g-base) var(--g-ease);
}
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.wp-site-blocks { min-height: 100svh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > * + * { margin-block-start: 0; }

/* Skip-Link */
.skip-link:focus { z-index: 100000; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink); }

/* ---------- Typo-Utilities ---------- */
.g-eyebrow,
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--s);
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--wp--preset--color--contrast-2);
	font-weight: 400;
}
.g-display { font-family: var(--wp--preset--font-family--display); text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; font-weight: 400; }
.g-muted { color: var(--wp--preset--color--contrast-2); }
.g-arrow { display: inline-block; vertical-align: -.12em; transition: transform var(--g-base) var(--g-ease); }
.g-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* Hairline-Tabelle (Meta-Zeilen wie bei A24) */
.g-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid currentColor; border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent); }
.g-rows > li,
.g-rows > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: var(--wp--preset--spacing--20);
	padding-block: var(--wp--preset--spacing--10);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 35%, transparent);
}
.g-rows dt, .g-rows .g-rows__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--s);
	text-transform: uppercase; letter-spacing: .14em;
	color: var(--wp--preset--color--contrast-2);
	flex: none;
}
.g-rows dd, .g-rows .g-rows__value { margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: right; font-size: var(--wp--preset--font-size--m); }

/* Pill-Link / Button */
.g-btn {
	display: inline-flex; align-items: center; gap: .6em;
	padding: .85em 1.5em; border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--s);
	text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
	background: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-ink);
	border: 1px solid var(--wp--preset--color--accent);
	transition: background-color var(--g-fast) var(--g-ease), color var(--g-fast) var(--g-ease), transform var(--g-base) var(--g-ease);
	cursor: pointer;
}
.g-btn:hover { background: transparent; color: var(--wp--preset--color--accent); }
.g-btn:hover .g-arrow { transform: translateX(3px); }
.g-btn--ghost { background: transparent; color: var(--wp--preset--color--contrast); border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent); }
.g-btn--ghost:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* ==========================================================================
   VINYL – das zentrale Bauteil
   Struktur: .g-vinyl > edge | disc(art, ring) | grooves | sheen | hole
   ========================================================================== */
.g-vinyl {
	--size: 100%;
	position: relative;
	width: var(--size);
	aspect-ratio: 1;
	border-radius: 50%;
	transform-style: preserve-3d;
	isolation: isolate;
	color: #f1f3ee;
}
.g-vinyl > span { position: absolute; inset: 0; border-radius: 50%; }

/* Plattenrand – leicht nach hinten versetzt, gibt im 3D-Raum Materialstärke */
.g-vinyl__edge {
	background: #0b0c0e;
	transform: translateZ(-7px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 80px -20px rgba(0, 0, 0, .55);
}
.g-vinyl__edge::before,
.g-vinyl__edge::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background: #1a1c1f; transform: translateZ(2.5px);
}
.g-vinyl__edge::after { background: #222428; transform: translateZ(5px); }

.g-vinyl__disc {
	overflow: hidden;
	background: #0d0e10;
	transform: rotate(var(--spin, 0deg));
	will-change: transform;
	/* Mittelloch ausstanzen */
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 2.1%, #000 2.25%);
	mask: radial-gradient(circle at 50% 50%, transparent 0 2.1%, #000 2.25%);
}
.g-vinyl__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Picture-Disc: Artwork mit Einlaufrille + Label-Ring */
.g-vinyl--picture .g-vinyl__disc::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, rgba(10, 11, 13, .92) 0 9%, rgba(255, 255, 255, .22) 9.2% 9.5%, transparent 9.7%),
		radial-gradient(circle at 50% 50%, transparent 0 96.6%, rgba(0, 0, 0, .55) 97%, rgba(255, 255, 255, .25) 99.2%, rgba(0, 0, 0, .7) 100%);
}

/* Schwarze Platte mit Cover als Label */
.g-vinyl--vinyl .g-vinyl__disc {
	background:
		radial-gradient(circle at 50% 50%, #111 0 34%, transparent 34.5%),
		repeating-radial-gradient(circle at 50% 50%, #0c0d0f 0 .55px, #17181b .9px 1.5px),
		#0e0f11;
}
.g-vinyl__label {
	position: absolute; inset: 32%; border-radius: 50%; overflow: hidden;
	background: var(--song-accent);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.g-vinyl__label .g-vinyl__art { border-radius: 50%; }

/* Rillen (statisch, radialsymmetrisch – müssen nicht mitdrehen) */
.g-vinyl__grooves {
	pointer-events: none;
	background:
		repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 1.4px, rgba(0, 0, 0, .22) 1.6px 2.1px, rgba(255, 255, 255, .035) 2.3px 2.8px);
	-webkit-mask: radial-gradient(circle, transparent 0 34.5%, #000 35%, #000 96%, transparent 96.5%);
	mask: radial-gradient(circle, transparent 0 34.5%, #000 35%, #000 96%, transparent 96.5%);
	mix-blend-mode: multiply;
	opacity: .55;
}
.g-vinyl--picture .g-vinyl__grooves { -webkit-mask: radial-gradient(circle, transparent 0 9.8%, #000 10.5%, #000 96%, transparent 96.5%); mask: radial-gradient(circle, transparent 0 9.8%, #000 10.5%, #000 96%, transparent 96.5%); opacity: .45; }

/* Lichtreflex – zwei gegenüberliegende Keile wie auf echtem Vinyl */
.g-vinyl__sheen {
	pointer-events: none;
	/* Reflex wird gedreht statt neu gemalt (Verlauf und Maske sind rotationssymmetrisch):
	   --sheen ändert sich im Karussell jeden Frame, ein Repaint pro Platte würde ruckeln. */
	transform: rotate(var(--sheen, 0deg));
	background: conic-gradient(from 20deg at 50% 50%,
		transparent 0deg, rgba(255, 255, 255, .16) 18deg, transparent 42deg,
		transparent 180deg, rgba(255, 255, 255, .12) 198deg, transparent 222deg, transparent 360deg);
	-webkit-mask: radial-gradient(circle, transparent 0 10%, #000 12%);
	mask: radial-gradient(circle, transparent 0 10%, #000 12%);
	mix-blend-mode: screen;
}
.g-vinyl__hole { pointer-events: none; background: radial-gradient(circle at 50% 50%, transparent 0 2.1%, rgba(255, 255, 255, .5) 2.15% 2.4%, transparent 2.6%); }

/* Umlaufschrift als Artwork: Größenangabe in SVG-Koordinaten. */
.g-vinyl__ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.g-vinyl__ring text {
	font-family: var(--wp--preset--font-family--mono), monospace;
	font-size: 2.3px; letter-spacing: .5px; fill: rgba(255, 255, 255, .78);
}
.g-vinyl--vinyl .g-vinyl__ring text { fill: rgba(255, 255, 255, .35); }
.g-vinyl.is-blank .g-vinyl__disc { background: radial-gradient(circle, var(--song-accent) 0 9%, #0e0f11 9.5%); }

/* Einfache CSS-Rotation für statische Platten (Detailseite, Index) */
@keyframes g-spin { to { transform: rotate(360deg); } }
.g-vinyl.is-spinning .g-vinyl__disc { animation: g-spin var(--wp--custom--disc--spin, 1.8s) linear infinite; }

/* ==========================================================================
   CARD – quadratisches Gegenstück zum Vinyl (Shop-Produkte)
   Struktur: .g-card > edge | face(art) | sheen. Gleiche 3D-Hooks wie .g-vinyl
   (preserve-3d, --dim, --sheen), damit das Karussell beide identisch bewegt.
   ========================================================================== */
.g-card {
	--size: 100%;
	position: relative;
	width: var(--size);
	aspect-ratio: 1;
	transform-style: preserve-3d;
	isolation: isolate;
	color: #f1f3ee;
}
.g-card > span { position: absolute; inset: 0; }
.g-card__edge {
	background: #0b0c0e;
	transform: translateZ(-7px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 80px -20px rgba(0, 0, 0, .55);
}
.g-card__edge::before,
.g-card__edge::after { content: ""; position: absolute; inset: 0; background: #1a1c1f; transform: translateZ(2.5px); }
.g-card__edge::after { background: #222428; transform: translateZ(5px); }
.g-card__face { overflow: hidden; background: #0d0e10; }
.g-card__face::after {
	/* Haarlinie am Kartenrand, wie die Hairlines der Meta-Tabellen */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.g-card__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.g-card.is-blank .g-card__face { background: linear-gradient(135deg, #15171a, #0b0c0e); }
.g-card.is-blank .g-card__face::before { content: ""; position: absolute; inset: 42%; background: var(--song-accent); }
/* Lichtreflex: ein diagonaler Streifen, gedreht über --sheen (wird im Karussell pro Frame gesetzt) */
.g-card__sheen { pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.g-card__sheen::before {
	content: ""; position: absolute; inset: -60%;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
	transform: rotate(var(--sheen, 0deg));
}

/* ==========================================================================
   Reveal-Choreografie (Blur + Rise, eine Bewegungssprache)
   ========================================================================== */
.js [data-reveal] { opacity: 0; filter: blur(10px); transform: translateY(18px); transition: opacity .9s var(--g-ease), filter .9s var(--g-ease), transform 1.1s var(--g-ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; filter: none; transform: none; }
.js [data-reveal="fade"] { transform: none; }

/* Animierte Wörter bleiben zusammen, solange sie in die Zeile passen. */
.g-split-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/* Zeilen-Maske für Display-Text (Deszender geschützt) */
.g-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.g-line > span { display: inline-block; }
.js .g-split .g-ch { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.35em); transition: opacity .8s var(--g-ease), filter .9s var(--g-ease), transform 1s var(--g-ease); transition-delay: calc(var(--i, 0) * 28ms + var(--d, 0ms)); }
.js .g-split.is-in .g-ch { opacity: 1; filter: none; transform: none; }

/* ==========================================================================
   View Transitions – nur noch Unterbau der Seitenübergänge
   Die eigentliche Choreografie steckt in assets/css/transit.css (GRVTY Transit).
   Typen (inc/setup.php): transit · morph · plain
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
/* Zurück/Vor ohne Blende: kurzer Überblender */
::view-transition-old(root) { animation: .3s cubic-bezier(.4, 0, 1, 1) both g-vt-out; }
::view-transition-new(root) { animation: .4s var(--g-ease) .05s both g-vt-in; }
/* Blende deckt alte und neue Seite identisch ab → kein zusätzlicher Effekt */
html:active-view-transition-type(transit)::view-transition-old(root),
html:active-view-transition-type(transit)::view-transition-new(root) { animation: none; }
/* Platten-Flug (Karussell / Index / Nächste Platte → Song): Seiten blenden schnell, die Platte fliegt */
html:active-view-transition-type(morph)::view-transition-old(root) { animation: .28s cubic-bezier(.4, 0, 1, 1) both g-vt-out; }
html:active-view-transition-type(morph)::view-transition-new(root) { animation: .32s var(--g-ease) .08s both g-vt-in; }
@keyframes g-vt-out { to { opacity: 0; } }
@keyframes g-vt-in { from { opacity: 0; } }

/* ==========================================================================
   Legal / Content-Seiten
   ========================================================================== */
/* Titel und Text teilen sich eine Spalte; der Titel ist kleiner, damit lange Wörter (DATENSCHUTZ) hineinpassen */
.g-legal > .wp-block-post-title { font-size: clamp(1.75rem, 1rem + 2.2vw, 3rem); line-height: 1.1; overflow-wrap: anywhere; margin-bottom: var(--wp--preset--spacing--40); }
.g-legal > .wp-block-post-content > .g-eyebrow:first-child { margin-top: 0; }
.g-legal h2 { font-size: var(--wp--preset--font-size--m); margin-top: var(--wp--preset--spacing--40); }
.g-legal li + li { margin-top: var(--wp--preset--spacing--10); }
.g-legal a { overflow-wrap: anywhere; }
.g-legal h3 { font-size: var(--wp--preset--font-size--m); margin-top: var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--body); text-transform: none; font-weight: 600; letter-spacing: 0; }
.g-legal p, .g-legal li { color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent); }
.g-placeholder { background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent); padding: 0 .25em; border-radius: 3px; }

/* Bildunterschriften & Galerie */
.wp-block-gallery.has-nested-images figure.wp-block-image img { border-radius: 4px; }

/* Reduced Motion – erreicht alles, auch Canvas/rAF (siehe JS) */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.js [data-reveal], .js .g-split .g-ch { opacity: 1; filter: none; transform: none; }
	@view-transition { navigation: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.g-footer {
	--g-footer-ink: #f2f2f2;
	--g-footer-muted: #b4b4b4;
	--g-footer-rule: rgb(255 255 255 / .15);
	--g-footer-ease: cubic-bezier(.32, .72, 0, 1);
	padding-block: clamp(3rem, 7vw, 7rem) .85rem;
	background: #000;
	box-shadow: inset 0 1px var(--g-footer-rule);
	color: var(--g-footer-ink);
}

.g-footer .g-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	margin-block: 0;
}

.g-footer__cols > .wp-block-column { min-width: 0; margin: 0; }
.g-footer__intro > p:not(.g-eyebrow) {
	max-width: 25ch;
	margin-block: .55rem 1.25rem;
	font-size: clamp(1.25rem, 2.25vw, 2.25rem) !important;
	letter-spacing: -.035em;
	text-wrap: balance;
}

.g-footer .g-eyebrow {
	margin-block: 0 .55rem;
	color: var(--g-footer-muted);
}

.g-footer__list { list-style: none; padding: 0; margin-block: 0; }
.g-footer :is(.g-footer__list, .g-footer__bar) a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--g-footer-ink);
	text-decoration: none;
}

.g-footer__list a {
	font-size: 1.0625rem;
	transition: color .35s var(--g-footer-ease), transform .35s var(--g-footer-ease);
}

.g-footer__list a:hover { color: #fff; transform: translateX(.25rem); }
.g-footer a:focus-visible { outline: 1px solid var(--g-footer-ink); outline-offset: 3px; }

.g-footer .wp-block-button__link,
.g-footer__bar a {
	gap: .7rem;
	transition: transform .45s var(--g-footer-ease);
}

.g-footer .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: .3rem .3rem .3rem 1.05rem;
	border-radius: 100vw;
	background: var(--g-footer-ink);
	color: #111;
}

.g-footer .wp-block-button__link::after,
.g-footer__bar a::after {
	content: "↗" / "";
	display: grid;
	width: 2.1rem;
	aspect-ratio: 1;
	place-items: center;
	border-radius: 50%;
	background: rgb(0 0 0 / .09);
	font-size: 1rem;
	transition: transform .45s var(--g-footer-ease);
}

.g-footer__bar a::after { content: "↑" / ""; background: rgb(255 255 255 / .09); }
.g-footer :is(.wp-block-button__link, .g-footer__bar a):hover::after { transform: translate(2px, -2px); }
.g-footer :is(.wp-block-button__link, .g-footer__bar a):active { transform: scale(.98); }

.g-footer .wp-block-social-links { margin-block: 0; gap: .35rem; }
.g-footer .wp-block-social-links .wp-social-link { transition: transform .45s var(--g-footer-ease); }
.g-footer .wp-block-social-links .wp-block-social-link-anchor {
	display: grid;
	width: 44px;
	aspect-ratio: 1;
	place-items: center;
	padding: 4px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--g-footer-rule);
	color: var(--g-footer-ink);
}
.g-footer .wp-block-social-links svg {
	box-sizing: content-box;
	width: 18px;
	height: 18px;
	padding: 8px;
	border-radius: 50%;
	background: rgb(255 255 255 / .08);
	box-shadow: inset 0 1px 1px rgb(255 255 255 / .1);
}

.g-footer .g-footer__brand { margin-block: clamp(1.65rem, 4.3vw, 4.75rem) clamp(.65rem, 1.5vw, 1.5rem); }
.g-footer__mark {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	font: 400 205px var(--wp--preset--font-family--display);
	fill: rgb(255 255 255 / .10);
	stroke: none;
}
.js .g-footer__mark[data-reveal] {
	filter: none;
	transition: opacity .9s var(--g-footer-ease), transform .9s var(--g-footer-ease);
}

.g-footer .g-footer__bar {
	margin-block: 0;
	padding-top: .5rem;
	box-shadow: inset 0 1px var(--g-footer-rule);
	gap: .3rem 1rem;
}
.g-footer__bar p { margin: 0; }
.g-footer__version { opacity: .5; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
	.g-footer .g-footer__cols { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr) minmax(0, 1fr) minmax(0, .9fr); }
}

@media (min-width: 768px) {
	.g-footer .g-footer__cols:has(> .g-footer__shop) {
		grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .65fr)) minmax(0, 1fr) minmax(0, .9fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.g-footer *, .g-footer *::after, .js .g-footer__mark[data-reveal] { transition: none; }
	.g-footer :is(a, .wp-social-link):hover,
	.g-footer :is(.wp-block-button__link, .g-footer__bar a):hover::after { transform: none; }
}

/* Song-Story (Post-Content auf der Song-Seite) */
.g-song-story h2 { font-size: var(--wp--preset--font-size--display); }
.g-song-story p { font-size: var(--wp--preset--font-size--m); line-height: 1.55; color: color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent); }
.g-song-story .wp-block-gallery { margin-top: var(--wp--preset--spacing--40); }
.g-player { width: 100%; }

/* Patterns */
.g-cta mark.g-placeholder { color: inherit; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); background: transparent; }

/* WooCommerce */
.g-shop .woocommerce-products-header__title,
.g-shop .product_title {
	font-family: var(--wp--preset--font-family--display);
	overflow-wrap: anywhere;
}

/* WooCommerce bringt eigene Größen für Produktkarten und Formulare mit. */
:is(body.woocommerce, .woocommerce, .woocommerce-page) ul.products li.product :is(.woocommerce-loop-product__title, .price),
body .wc-block-grid :is(.wc-block-grid__product-title, .wc-block-grid__product-price),
.g-shop .woocommerce-Reviews .comment-reply-title,
.g-shop :is(.wc-block-components-product-name, .wc-block-components-totals-item),
.g-shop .wp-block-woocommerce-cart :is(.wc-block-grid__product, .wc-block-grid__product-add-to-cart) {
	font-size: var(--wp--preset--font-size--m);
}

/* Shop-Schaltflächen bleiben auch in schmalen Produktspalten innerhalb der Karte. */
:is(body.woocommerce, .woocommerce, .woocommerce-page) ul.products li.product .button {
	max-width: 100%;
	padding-inline: var(--wp--preset--spacing--20);
	white-space: normal;
	overflow-wrap: anywhere;
}

.woocommerce .woocommerce-loop-product__title {
	color: var(--wp--preset--color--contrast);
}

.g-shop div.product p.stock,
.g-shop #review_form .stars a,
.g-shop :is(.wc-block-components-product-metadata, .wc-block-components-totals-item__description, .wc-block-components-text-input label) {
	font-size: var(--wp--preset--font-size--s);
}

.g-shop .woocommerce-breadcrumb,
.g-shop .woocommerce-breadcrumb a,
.g-shop .woocommerce-result-count,
.g-shop .price {
	color: var(--wp--preset--color--contrast-2);
}

.g-shop .woocommerce-ordering select,
.g-shop .quantity input {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	padding: .45rem;
}

.g-shop a.button,
.g-shop button.button,
.g-shop button.button.alt,
.g-shop .wc-block-components-button:not(.is-link) {
	background: var(--g-accent);
	color: var(--wp--preset--color--accent-ink);
	font: inherit;
	font-weight: 700;
}

.g-shop .woocommerce-message,
.g-shop .woocommerce-info,
.g-shop .woocommerce-error {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* Größenklassen bereits gespeicherter WordPress-Blöcke. */
.has-xs-font-size { font-size: var(--wp--preset--font-size--s) !important; }
.has-l-font-size, .has-xl-font-size { font-size: var(--wp--preset--font-size--m) !important; }
.has-xxl-font-size, .has-giant-font-size { font-size: var(--wp--preset--font-size--display) !important; }