/*
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.13
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;
}

/* Preis und Add-to-Cart-Button auf einer Zeile: .single_variation (enthält
   die Beschreibung + den Preis) wird per display:contents aufgelöst, damit
   Preis und Button als Geschwister im selben Flex-Layout landen. */
.single_variation_wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(1rem + 30px) 1rem;
}
.woocommerce-variation.single_variation {
	display: contents;
}
.woocommerce-variation-description {
	flex: 1 1 100%;
}
/* Preis ohne Pille, schlicht */
.woocommerce-variation-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;
}

/* ── 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: 50px 60px 20px;
	margin-top: 32px;
}

/* ── 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: injizierter Preis bei einfachen Produkten in einer Reihe mit Menge+Button, korrekte Reihenfolge ── */
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart {
	grid-template-columns: max-content max-content max-content !important;
	column-gap: 1rem !important;
	justify-content: start !important;
}
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart > .woocommerce-variation-price {
	grid-column: 1 !important;
}
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart > .quantity {
	grid-column: 2 !important;
	justify-self: start;
	width: fit-content;
	margin-left: 16px !important;
}
.product_cat-merch .wp-block-woocommerce-add-to-cart-form form.cart > .single_add_to_cart_button {
	grid-column: 3 !important;
	margin-left: -16px !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;
}