/*
Theme Name:     TT4 Child
Theme URI:      https://deine-domain.de/
Description:    Child Theme für Twenty Twenty-Four
Author:         Bonnie & Byte
Author URI:     https://bonniebyte.com/
Template:       twentytwentyfour
Version:        7.32
Text Domain:    tt4-child
*/

/* Optional: Eigene Styles hier einfügen */

.single-product.product_cat-fonts h1 {
  font-size: 0.85em;
}


.woocommerce-category-fonts .woocommerce-loop-product__title,
.wc-block-product-template .wp-block-post-title {
  font-size: 0.85em;
}

.single-product.product_cat-fonts .font-intro {
    font-size: 11rem;
    line-height: 1.2;
}

.schfonts-font-preview {
    font-size: clamp(4rem, 12.7vw, 30rem);
    line-height: 1.2;
}

/* ===============================
   Theme-Farbschemata
   =============================== */

/* ===== Basis (Light – Default) ===== */
:root {
  --bg: #ffffff;
  --fg: #000000;
  --accent: var(--fg);
}

/* ===== Dark ===== */
html[data-theme="dark"] {
  --bg: #1C1C1C;
  --fg: #F7F7F7;
  --accent: var(--fg);
}

/* ===== Ink (Blauer Background) ===== */
html[data-theme="ink"] {
  --bg: #557B17;
  --fg: #FFFFC2;
  --accent: var(--fg);
}

/* ===== Ink (blauer Background)
html[data-theme="ink"] {
  --bg: #0033FF;
  --fg: #FFFFE0;
  --accent: var(--fg);
} ===== */

/* ===== Paper (Rot auf weiss) ===== */
html[data-theme="paper"] {
  --bg: #ffffff;
  --fg: #FF4201;
  --accent: var(--fg);
}

/* ===== Anwendung ===== */
body {
  background: var(--bg);
  color: var(--fg);
}

a {
  color: var(--accent);
}

/* ===============================
   Theme-Drehknopf (UI)
   =============================== */

#theme-dial {
  position: fixed;
  top: 35px;
  right: 16px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: currentColor; /* ← hier passiert die Magie */
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  z-index: 1000;
}

#theme-dial svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ===============================
   WordPress Color Mapping (Farben überschreiben)
   =============================== */

html[data-theme] {
  --wp--preset--color--base:      var(--bg);
  --wp--preset--color--base-2:    var(--bg);
  --wp--preset--color--contrast:  var(--fg);
  --wp--preset--color--contrast-2: color-mix(in srgb, var(--fg) 75%, var(--bg));
  --wp--preset--color--contrast-3: color-mix(in srgb, var(--fg) 45%, var(--bg));
  --wp--preset--color--primary:   var(--accent);
}

/* WooCommerce-Block-Buttons (mini-cart, cart, checkout) und outline-button-hover:
   Hardcoded #1e1e1e/#fff in WC-CSS überschreiben */
.wc-block-components-button:not(.is-link).is-style-outline:hover,
.wc-block-components-button:not(.is-link).outlined:hover {
    background-color: var(--fg) !important;
    color: var(--bg) !important;
}

/* Hintergrundfarbe der WooCommerce/Printful Produkt-Lightbox */
.pswp__bg {
    background: rgba(255, 255, 255, 1.0) !important;
}

/* Standard Focus Styles entfernen */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Formfelder explizit */
select:focus,
input:focus,
textarea:focus,
button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Firefox inner border entfernen */
::-moz-focus-inner {
  border: 0;
}
/* ===============================
   WooCommerce-Formular-Feintuning
   =============================== */

/* Variation-Selects: Descender-Clip und vertikale Zentrierung fixen.
   WC-Blocktheme erzwingt height: 3em, was bei body line-height 1.55
   nicht genug Platz für Descender lässt. Wir entfernen die feste Höhe
   und setzen einen kontrollierten line-height.
   color/background explizit gesetzt, damit die Theme-Farbvariablen
   nicht durch WC- oder Parent-Theme-CSS überschrieben werden. */
.woocommerce table.variations tr td select,
.woocommerce div.product form.cart table.variations td select {
    height: auto;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    padding-right: 2.5em !important;
    line-height: 1.3;
    overflow: visible;
    appearance: none !important;
    -webkit-appearance: none !important;
    color: var(--fg) !important;
    background-color: var(--bg) !important;
    border: 1px solid color-mix(in srgb, var(--fg) 70%, transparent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85em center !important;
    background-size: 14px !important;
}
/* Variation-Select Chevron: je Theme passende Farbe (gleicher Selektor wie Basis + html[data-theme] Präfix) */
html[data-theme="dark"] .woocommerce table.variations tr td select,
html[data-theme="dark"] .woocommerce div.product form.cart table.variations td select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7F7F7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
html[data-theme="ink"] .woocommerce table.variations tr td select,
html[data-theme="ink"] .woocommerce div.product form.cart table.variations td select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFC2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}
html[data-theme="paper"] .woocommerce table.variations tr td select,
html[data-theme="paper"] .woocommerce div.product form.cart table.variations td select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4201' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

/* Variation-Dropdowns (Schnitt + Lizenz) nebeneinander statt gestapelt */
.woocommerce div.product form.cart table.variations tbody {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.woocommerce div.product form.cart table.variations tr {
    display: block;
    align-self: center;
}
.woocommerce div.product form.cart table.variations td.value {
    display: block;
    padding-bottom: 0 !important;
}
/* WC-Kernstyle erzwingt min-width:75% auf die Selects, das verhindert
   das Nebeneinander (zwei Felder à 75% passen nicht in eine Reihe) */
.woocommerce div.product form.cart .variations select {
    min-width: 220px;
    max-width: 100%;
    margin-right: 0;
}

/* Add-to-Cart-Button: Text sitzt zu tief durch line-height 1.55.
   Expliziter line-height + symmetrisches Padding zentriert ihn korrekt. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
    line-height: 1.3;
    padding: 14px 19px !important;
    border: none;
    box-shadow: none;
    outline: none;
    background-color: color-mix(in srgb, var(--fg) 7%, var(--bg)) !important;
    color: var(--fg) !important;
    font-size: 0.8em;
    font-weight: 400;
    transition: background-color 0.2s, color 0.2s;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
    background-color: var(--fg) !important;
    color: var(--bg) !important;
}

/* "Clear"-Link in WooCommerce-Variationsformular ausblenden */
.woocommerce div.product form.cart .reset_variations {
    display: none !important;
}

/* ── Font product page: spacing between description and specimen ── */
/* Extra breathing room below the post description block */
.single-product .schfonts-product-description {
	margin-top: 4.5rem;
	margin-bottom: 4.5rem;
}

/* Erstes Element in Mehrspaltentexten hat keinen extra Top-Margin
   (verhindert, dass die erste Zeile im Mehrspaltenlayout nach unten rutscht) */
.single-product .schfonts-product-description > *:first-child,
.schfonts-license-text > *:first-child {
	margin-top: 0;
}

/* ── Sanftes Scrollen für #purchase-Sprungmarke ── */
html {
	scroll-behavior: smooth;
}

/* ── Überschrift "Purchase {Fontname}" über dem Lizenztext:
   graue Pille, zentriert (Stil wie «view more»-Button der Fontsliste).
   Die Pille selbst ist ein Link auf #purchase, damit sie als Anker
   fungiert und beim Anklicken mit etwas Abstand zum oberen Rand
   einrastet (siehe scroll-margin-top). ── */
.schfonts-purchase-heading-wrap {
	margin: 0;
}
.schfonts-purchase-heading {
	display: block;
	width: fit-content;
	margin: 90px auto;
	padding: 36px 48px;
	font-size: 2rem;
	font-weight: 400;
	text-transform: none;
	text-decoration: none;
	text-align: center;
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--fg) 10%, var(--bg));
	color: var(--fg);
	transition: background-color 0.2s, color 0.2s;
	scroll-margin-top: 2rem;
}

.schfonts-purchase-heading:hover {
	background-color: var(--fg);
	color: var(--bg);
}

/* ── Lange Texte ab genügend Breite zweispaltig setzen ── */
.single-product .schfonts-product-description,
.schfonts-license-text {
	columns: 28rem 2;
	column-gap: 3rem;
}

/* Ab sehr breiten Fenstern: dritte Spalte, dafür etwas breitere Spalten */
@media (min-width: 1700px) {
	.single-product .schfonts-product-description,
	.schfonts-license-text {
		columns: 34rem 3;
	}
}

/* Bilder in der Beschreibung (klassische <img class="alignleft">, keine
   Gutenberg-Blöcke) sollen nicht als Spalten-Inhalt nebeneinander landen,
   sondern gestapelt über die volle Breite laufen */
.single-product .schfonts-product-description img {
	display: block;
	float: none;
	column-span: all;
	width: 100%;
	height: auto;
	margin: 1.5rem 0;
}

/* Produktbilder (separates Feld): volle Containerbreite, auch über Originalgrösse hinaus */
.schfonts-product-images .schfonts-product-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Direkt aufeinanderfolgende Bilder ohne Zwischenraum aneinanderreihen */
.single-product .schfonts-product-description img + img {
	margin-top: 0;
}
.single-product .schfonts-product-description img:has(+ img) {
	margin-bottom: 0;
}


/* ── Footer nav: fluid bis 750px, dann statisch (clamp) ── */
.footer-nav-group {
	flex-basis: min(50%, 780px) !important;
}

/* ── Footer: Character-Bild ── */
.wp-block-image .wp-image-858 {
	padding-left: 30px;
	margin-top: -30px;
}

/* ── Root-Padding angleichen: gleicher Seitenabstand wie Header ── */
/* WordPress ignoriert den 6.5vw-Wert aus child theme.json;
   stattdessen greift das Parent-Preset spacing-50 = min(6.5rem,8vw).
   Wir erzwingen hier 6.5vw um mit dem Header-Inline-Padding gleichzuziehen. */
body {
	--wp--style--root--padding-left:  6.5vw;
	--wp--style--root--padding-right: 6.5vw;
	--wp--preset--font-size--medium: 1.2rem;
	font-size: 1.2rem;
}

/* ── Merch: 258px bis 4 Spalten erreicht sind (~1610px), danach 312px
   um die 4 Spalten zu halten statt auf 5 zu springen ── */
.page-id-246 .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)) !important;
}
@media (min-width: 1600px) {
	.page-id-246 .wc-block-product-template {
		grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)) !important;
	}
}
.page-id-246 .wc-block-product-template > * {
	width: 100% !important;
	max-width: 100% !important;
	flex-basis: unset !important;
}


/* ── Fontsliste: letzte Trennlinie ausblenden ── */
.page-id-9 .wc-block-product-template li:last-child .wp-block-separator {
	display: none;
}

/* ── Fontsliste: «view more» Button ── */
.page-id-9 .wp-block-woocommerce-product-button .wp-block-button__link {
	font-size: 1.4rem !important;
	border-radius: 9999px !important;
	border: none !important;
	background-color: color-mix(in srgb, var(--fg) 10%, var(--bg)) !important;
	color: var(--fg) !important;
	transition: background-color 0.2s, color 0.2s;
}

.page-id-9 .wp-block-woocommerce-product-button .wp-block-button__link:hover {
	background-color: var(--fg) !important;
	color: var(--bg) !important;
}

/* ── Merch-Sektion: «check our shop» Button im dicken Pillen-Stil
   wie die «Purchase {Font}»-Überschrift (.schfonts-purchase-heading) ── */
.page-id-9 .wp-block-buttons .wp-block-button__link {
	font-size: 1.6rem !important;
	font-weight: 400 !important;
	padding: 28.8px 38.4px !important;
	border-radius: 9999px !important;
	border: none !important;
	background-color: color-mix(in srgb, var(--fg) 10%, var(--bg)) !important;
	color: var(--fg) !important;
	transition: background-color 0.2s, color 0.2s;
}

.page-id-9 .wp-block-buttons .wp-block-button__link:hover {
	background-color: var(--fg) !important;
	color: var(--bg) !important;
}

/* ── Mini-Cart Drawer: reagiert auf Colorswitch ── */
.wc-block-components-drawer,
:where(.wp-block-woocommerce-mini-cart-contents) {
	background: var(--bg) !important;
	color: var(--fg) !important;
}

/* ── Ink-Theme: Papier-Noise via SVG feTurbulence ── */
html[data-theme="ink"] body {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'150'%20height%3D'150'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.55'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'150'%20height%3D'150'%20filter%3D'url(%23n)'%20opacity%3D'0.3'%2F%3E%3C%2Fsvg%3E");
	background-repeat: repeat;
	background-size: 150px 150px;
	background-blend-mode: soft-light;
}

/* ── Variation confirmation text (icon + copy) ── */
/* Grosse graue Pille hinter Icon-Pille + Text, beide vertikal zentriert. */
.woocommerce-variation-description .schfonts-var-desc {
	display: inline-flex;
	align-items: center;
	gap: 1.5rem;
	background-color: color-mix(in srgb, var(--fg) 7%, var(--bg));
	border-radius: 999px;
	padding: 16px 60px 22px 14px;
	margin-top: 0.25rem;
}
.schfonts-var-desc .schfonts-var-pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	flex-shrink: 0;
	background-color: transparent;
	border-radius: 999px;
	width: 130px;
	height: 93px;
	padding: 2px 8px;
}
.schfonts-var-desc .schfonts-var-icon {
	width: 54px;
	height: 54px;
	object-fit: contain;
	display: block;
}
.schfonts-var-desc .schfonts-var-name {
	font-size: 0.75rem;
	line-height: 1.2;
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.schfonts-var-desc .schfonts-var-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-size: 1em;
	line-height: 1.45;
	margin-left: -40px;
}

.woocommerce .single_variation_wrap .woocommerce-variation {
	margin-bottom: 1em;
}

.woocommerce-variation.single_variation {
	display: none;
}
.woocommerce-variation-description {
	flex: 1 1 100%;
}
/* Preis ohne Pille, schlicht */
/* .schfonts-base-price ist der Preis vor der Variantenwahl. Er sieht aus wie
   der Variationspreis, traegt aber bewusst nicht dessen Klasse: mehrere
   Skripte greifen per querySelector auf .woocommerce-variation-price zu und
   wuerden sonst das falsche Element erwischen. */
.woocommerce-variation-price,
.schfonts-base-price {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--fg);
}
.woocommerce-variation-add-to-cart.variations_button {
	display: flex;
	align-items: center;
}

/* Serverseitig gerenderte Preise bringen die Pflichtangaben als eigene Spans
   mit, durch Leerzeichen getrennt. inline-flex verwirft die: Reine Leerzeichen
   zwischen Flex-Kindern werden nicht gerendert — deshalb klebte bei einfachen
   Produkten "13,99 EURincl. 19% VATplus Shipping" zusammen. gap stellt den
   Abstand wieder her, flex-wrap laesst die Zeile auf schmalen Schirmen
   umbrechen statt ueberzulaufen.
   Betrifft nur den injizierten span (einfache Produkte) und den Basispreis;
   der Variationspreis ist ein div, das WooCommerce selbst fuellt — dort
   stimmen die Abstaende bereits. */
span.woocommerce-variation-price,
.schfonts-base-price {
	gap: 0.35em;
	flex-wrap: wrap;
}

/* Der Basispreis bildet eine eigene Zeile in .single_variation_wrap und
   braucht denselben Abstand nach unten wie .woocommerce-variation, das an
   seine Stelle tritt, sobald eine Variante gewaehlt ist — sonst springt die
   Karte beim Auswaehlen.
   display:flex statt inline-flex ist dafuer noetig, nicht kosmetisch: An einem
   inline-flex-Element bleibt margin-bottom wirkungslos, weil es in einer
   Zeilenbox sitzt und deren Hoehe nicht beeinflusst. Beim einfachen Produkt
   faellt das nicht auf, weil Grid-Items ohnehin block-level werden.
   1.2rem statt 1em, weil .woocommerce-variation die Schriftgroesse des Body
   erbt (1.2rem) — 1em waere hier 1.5rem und damit ein anderer Abstand. */
.schfonts-base-price {
	display: flex;
	margin-bottom: 1.2rem;
}

/* ── Footer Schriftgrösse passend zu Schriftnamen ── */
.schfonts-footer {
	font-size: 0.85em;
}

/* ── Add-to-Cart grauer Hintergrund-Card ── */
.wp-block-woocommerce-add-to-cart-form {
	background-color: color-mix(in srgb, var(--fg) 4%, var(--bg));
	border-radius: 60px;
	padding: 40px;
	margin-top: 32px;
}

.woocommerce div.product form.cart {
	margin-bottom: 0;
}

/* ── Mobile: Variation-Pille (dunklere Pille mit Icon + Text) passt bei
   fixem 130px-Icon + 1.5rem-Gap + Text nicht mehr in schmale Viewports.
   Text rutscht unter das Icon, beides linksbündig; nur die Radien dieser
   inneren Pille werden reduziert. Die äussere, hellgraue Add-to-Cart-Card
   bleibt unverändert. Ab 600px bleibt alles unverändert (Desktop-Layout
   oben). ── */
@media (max-width: 480px) {
	.wp-block-woocommerce-add-to-cart-form {
		padding-left: 42px;
		padding-right: 42px;
	}
	.woocommerce-variation-description .schfonts-var-desc {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		box-sizing: border-box;
		width: 100%;
		gap: 0.5rem;
		padding: 20px 24px;
		border-radius: 32px;
	}
	.schfonts-var-desc .schfonts-var-pill {
		width: auto;
		height: auto;
		padding: 0;
		margin-left: -8px;
	}
	.schfonts-var-desc .schfonts-var-text {
		margin-left: 0;
		text-align: left;
	}
}

/* ── SCHFONTS Logo: Safari Sub-Pixel Fix ── */
header.wp-block-template-part .alignfull {
	padding-left: round(6.5vw, 1px) !important;
	padding-right: round(6.5vw, 1px) !important;
}
.wp-block-site-title {
	transform: translateZ(0);
	overflow: visible;
	margin-left: -6px;
}
.wp-block-site-title a {
	overflow: visible;
}

/* ── Merch-Produkte: Tab-Navigation ausblenden, Beschreibung direkt zeigen ── */
.product_cat-merch .woocommerce table.variations th.label {
	display: none;
}
.product_cat-merch .woocommerce-tabs ul.tabs {
	display: none;
}
.product_cat-merch .woocommerce-tabs .woocommerce-Tabs-panel {
	border-top: none;
	padding-top: 0;
}


/* ── Merch: Printful Size Guide in Dropdown-Reihe ── */
.product_cat-merch table.variations .schfonts-sg-cell {
	display: block;
	align-self: center;
}
.product_cat-merch table.variations .schfonts-sg-cell a {
	font-size: 0.8em;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

/* ── Merch Produkt: Extra Abstand zwischen Text-Spalte und Bild-Spalte ── */
.product_cat-merch .wp-block-columns.alignwide {
	gap: 80px;
}

/* ── Merch: Bild-Spalte skaliert nahtlos mit (clamp statt Breakpoint-Sprung) ── */
.product_cat-merch .wp-block-columns .wp-block-column:last-child {
	flex-basis: max(512px, 45%) !important;
}

/* ── Merch: Spalten-Container ab 1400px einfrieren, damit Text/Bild-Verhältnis fix bleibt ── */
.product_cat-merch .wp-block-columns.alignwide {
	max-width: 1400px;
	margin-left: 0;
	margin-right: auto;
}

/* ── Root-Padding Fix: .has-global-padding überschreibt sich selbst mit
   preset-spacing-50 statt 6.5vw (höhere Spezifität als body-Override).
   Das verschiebt JEDEN has-global-padding-Container (z.B. <main>) gegenüber
   dem Header, der hart auf 6.5vw gesetzt ist. Hier direkt auf der Klasse
   selbst erzwingen, damit alle Container konsistent 6.5vw nutzen. ── */
.has-global-padding {
	--wp--style--root--padding-left: 6.5vw !important;
	--wp--style--root--padding-right: 6.5vw !important;
}

/* ── Direkter Fix: <main> Padding hart auf 6.5vw setzen (wie Header),
   statt auf die CSS-Variable zu vertrauen. ── */
main.wp-block-group.has-global-padding {
	padding-left: round(6.5vw, 1px) !important;
	padding-right: round(6.5vw, 1px) !important;
}

/* ── Merch: generische WP-Regel überschreibt margin-right:auto auf
   nicht-aligned Kindern (z.B. Text-Spalte) - das verzerrt den Abstand.
   Hier hart auf 0 setzen. ── */
.product_cat-merch main.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ── Merch: zusätzlicher Abstand Description → More Products → Footer ── */
.product_cat-merch .woocommerce-tabs {
	margin-bottom: 120px;
}
.product_cat-merch .wp-block-woocommerce-product-collection {
	margin-bottom: 120px;
}

/* ── Mengenfeld: graue Pille, native Spinner ausgeblendet ── */
.woocommerce div.product form.cart .quantity {
	position: relative;
}
.woocommerce div.product form.cart .quantity .qty {
	height: auto;
	padding: 14px 24px 14px 6px !important;
	line-height: 1.3;
	border-radius: 999px;
	border: none;
	background-color: color-mix(in srgb, var(--fg) 7%, var(--bg));
	text-align: center;
	-moz-appearance: textfield;
}
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.schfonts-qty-steppers {
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.schfonts-qty-steppers button {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	border: none;
	padding: 0;
	width: 14px;
	height: 8px;
	cursor: pointer;
}
.schfonts-qty-up {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'/%3E%3C/svg%3E");
}
.schfonts-qty-down {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── Merch, einfache Produkte: Preis in eigener Zeile ueber Menge + Button ──
   Zwei Spalten statt drei. Alles in einer Reihe wurde zu breit; variable
   Produkte brechen ohnehin um (der Preis sitzt dort in .single_variation_wrap
   eine Ebene tiefer). Der Abstand nach unten ist derselbe wie dort:
   .woocommerce-variation traegt margin-bottom: 1em. */
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart {
	grid-template-columns: max-content max-content 1fr !important;
	column-gap: 1rem !important;
	justify-content: start !important;
}
/* Die dritte, flexible Spalte ist noetig, nicht kosmetisch: Ein Element, das
   ueber mehrere Spalten spannt, verteilt seine Breite auf die
   max-content-Spalten und blaeht sie auf. Die Preiszeile ist mit den
   Pflichtangaben rund 400px breit — dadurch wurde Spalte 1 viel breiter als
   die Mengen-Pille und der Kaufen-Button rutschte ans Ende der Preiszeile.
   Spannt das Element auch ueber eine flexible Spalte, nimmt diese die Breite
   auf und die beiden anderen bleiben so schmal wie ihr Inhalt.
   Die Zeilen stehen explizit da, damit die ::before/::after-Clearfixes des
   Formulars die automatische Platzierung nicht verschieben koennen. */
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart > .woocommerce-variation-price {
	grid-column: 1 / -1 !important;
	grid-row: 1 !important;
	margin-bottom: 1em;
}
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart > .quantity {
	grid-column: 1 !important;
	grid-row: 2 !important;
	justify-self: start;
	width: fit-content;
}
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button {
	grid-column: 2 !important;
	grid-row: 2 !important;
}

/* ── Pillenförmige Buttons in Mini-Cart & Warenkorb ── */
:where(.wp-block-woocommerce-mini-cart-contents) .wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-components-button {
	border-radius: 9999px !important;
}

/* ── Startseite: "Load more"-Button für die Font-Liste ── */
.schfonts-load-more-wrap {
	display: flex;
	justify-content: center;
	margin: 3.5rem 0 2rem;
}
.schfonts-load-more {
	display: inline-block;
	padding: 1.15em 3.25em;
	font-size: var(--wp--preset--font-size--medium, 1.2rem);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.2;
	color: #fff;
	background-color: #000;
	border: 1px solid #000;
	border-radius: 9999px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.schfonts-load-more:hover,
.schfonts-load-more:focus-visible {
	opacity: 0.82;
}
.schfonts-load-more:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}
.schfonts-load-more.is-loading,
.schfonts-load-more:disabled {
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

/* ── Startseite: Merch-Überschrift-Link wie Font-Produkttitel
   (kein Underline, erst bei Hover) ── */
.page-id-9 h6.wp-block-heading a {
	text-decoration: none;
}
.page-id-9 h6.wp-block-heading a:hover {
	text-decoration: underline;
}

/* ── Accordion: Höhe beim Auf- und Zuklappen animieren ──
   Der Core-Block versteckt das Panel mit `display: none` — zwischen none und
   block gibt es nichts zu interpolieren, jede transition auf height oder all
   bleibt deshalb wirkungslos.

   In accordion-item/style.css liegt bereits ein
   `transition: grid-template-rows 0.3s ease-out` bereit, nur ohne die
   zugehörigen Grid-Regeln. Die ergänzen wir hier: Das Item wird zum Raster
   aus zwei Zeilen — Kopf (auto) und Panel (0fr bzw. 1fr). Zwischen 0fr und
   1fr kann der Browser rechnen, das Panel wächst also mit.

   Die Regel gilt nur, wenn keine reduzierte Bewegung gewünscht ist; ohne
   Animation bleibt das schlichte Ein- und Ausblenden des Cores. */
@media (prefers-reduced-motion: no-preference) {
	.wp-block-accordion-item {
		display: grid;
		grid-template-rows: auto 0fr;
		/* Zeilen oben verankern. Ohne das verteilt der Browser den Raum beim
		   Wachsen, und der Text wandert sichtbar mit, statt nur aufgedeckt zu
		   werden — die zweite Bewegung, die niemand bestellt hat. */
		align-content: start;
	}

	.wp-block-accordion-item.is-open {
		grid-template-rows: auto 1fr;
	}

	/* `display: none` des Cores aufheben, sonst ist im geschlossenen Zustand
	   kein Element da, dessen Höhe wachsen könnte. Der Inhalt bleibt trotzdem
	   unzugänglich: Das Raster gibt ihm keine Höhe, overflow schneidet ab,
	   und das `inert`-Attribut hält ihn aus Tastaturfokus und Screenreader
	   heraus. */
	.wp-block-accordion-panel[inert] {
		display: block;
	}

	.wp-block-accordion-panel {
		min-height: 0;
		overflow: hidden;
	}
}

/* Panel schliesst buendig an die Ueberschrift an — in jedem Zustand, sonst
   klappt der Abstand beim Oeffnen mit auf. */
.wp-block-accordion-panel {
	margin-block-start: 0;
}

.wp-block-accordion-panel > :first-child {
	margin-block-start: 0;
}

/* ── Rechtstexte: zweispaltig und kompakter ──
   Die Spalten sind nur etwa halb so breit wie der normale Textkoerper, und die
   Seiten bestehen aus vielen kurzen Abschnitten mit eigener Ueberschrift. In
   den Normalgroessen (h2 = 2.5rem gegen 1.2rem Fliesstext, Faktor 2,1)
   beherrschen die Ueberschriften die Spalte, statt sie zu gliedern.
   Hier liegt der Faktor bei 1,4 — die Gliederung bleibt lesbar, das Gewicht
   verschiebt sich zurueck auf den Text.
   Der Fliesstext erbt vom Container; eigene Groessen brauchen nur die
   Ueberschriften, weil die aus theme.json des Elternthemes kommen. */
.legal-columns {
	font-size: 1rem;
	line-height: 1.4;
}
.legal-columns :is(h1, h2, h3, h4, h5, h6) {
	line-height: 1.3;
	margin-top: 1.7em;
}
.legal-columns h2 {
	font-size: 1.4rem;
}
.legal-columns h3 {
	font-size: 1.15rem;
}
.legal-columns h4 {
	font-size: 1rem;
}
/* Tabellen stehen in der schmalen Spalte besonders unter Druck. */
.legal-columns table {
	font-size: 0.95rem;
}

/* ── Hinweis auf den kostenlosen Versand in Warenkorb und Mini-Warenkorb ──
   Bewusst zurueckhaltend: Die Zeile steht neben den Summen und soll dort
   informieren, nicht mit dem Kaufen-Button um Aufmerksamkeit ringen. */
.schfonts-versandhinweis {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	line-height: 1.4;
	color: color-mix(in srgb, var(--fg) 60%, var(--bg));
}

/* ── Mini-Warenkorb: Steuer- und Versandhinweis teilen sich eine Zeile ──
   Beide landen beim Rendern in der Button-Zeile, einem Flex-Container mit
   Umbruch. Germanized setzt seinen Hinweis dort auf volle Breite und
   rechtsbuendig, der eigene stand deshalb darunter.

   Mit Inhaltsbreite passen beide nebeneinander. Den Umbruch davor uebernimmt
   ein leeres ::after des Containers, das per order zwischen Hinweisen und
   Buttons einsortiert wird — der uebliche Weg, in einem umbrechenden
   Flex-Container eine Zeile zu erzwingen. Ueber die Basisbreiten der Buttons
   zu gehen war der naheliegendere Versuch, hat sie aber untereinander
   geschoben; so bleiben sie unberuehrt nebeneinander. */
.wc-block-mini-cart__footer-actions .wc-gzd-block-mini-cart-notices,
.wc-block-mini-cart__footer-actions .schfonts-versandhinweis {
	order: 1;
	flex: 0 1 auto;
}
.wc-block-mini-cart__footer-actions .wc-gzd-block-mini-cart-notices {
	margin-top: 0;
	text-align: left;
}
.wc-block-mini-cart__footer-actions .schfonts-versandhinweis {
	margin-bottom: 0;
	font-size: 0.8rem;
}
.wc-block-mini-cart__footer-actions::after {
	content: "";
	order: 2;
	flex: 0 0 100%;
	height: 0;
}
.wc-block-mini-cart__footer-actions .wc-block-components-button {
	order: 3;
}