/*
Theme Name: Steine mit Geschichte
Theme URI: https://stoneshop.de
Description: Block-first archival theme for "Steine mit Geschichte" — a museum-catalogue aesthetic for one-of-a-kind stones. Paper-and-ink palette with a single green accent, Cinzel + EB Garamond (self-hosted), square corners, flat surfaces. Entire visual language is driven by theme.json (single token source). Folder slug: steine-block.
Version: 2.0.10
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Author: Steine mit Geschichte
Text Domain: steine-block
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: full-site-editing, block-patterns, e-commerce, custom-colors, custom-menu, editor-style, translation-ready
*/

/* -------------------------------------------------------------------------
   Steine mit Geschichte — foundation stylesheet
   Design tokens live ONLY in theme.json. This stylesheet consumes them via
   the generated --wp--preset--* custom properties. There is deliberately NO
   parallel :root { --color-* } token system (that decoupling was the old
   theme's core defect — Site-Editor edits must drive components for free).
   Non-token helper vars (motion timing) are namespaced --smg-* below.
   ------------------------------------------------------------------------- */

:root {
	--smg-transition-fast: 150ms ease;
	--smg-transition-base: 200ms ease;
	--smg-focus-color: var(--wp--preset--color--accent, #4f7a4d);
}

/* --- Links: green, underline offset .15em; dense-UI links drop underline --- */
a {
	text-underline-offset: 0.15em;
	transition: color var(--smg-transition-fast);
}

/* --- Focus: a visible 2px green outline on every interactive element ------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-search__input:focus-visible {
	outline: 2px solid var(--smg-focus-color);
	outline-offset: 2px;
}

/* --- Buttons -------------------------------------------------------------- */
/* Ghost is the default (theme.json). Solid is the rare primary action. */
.wp-block-button.is-style-solid > .wp-block-button__link {
	background-color: var(--wp--preset--color--text-primary, #2c2c2c);
	color: var(--wp--preset--color--bg-primary, #f8f7f4);
	border: 1px solid var(--wp--preset--color--text-primary, #2c2c2c);
	border-radius: 0;
}
.wp-block-button.is-style-solid > .wp-block-button__link:hover,
.wp-block-button.is-style-solid > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent, #4f7a4d);
	border-color: var(--wp--preset--color--accent, #4f7a4d);
	color: var(--wp--preset--color--bg-primary, #f8f7f4);
}
/* Ghost default hover -> green text + green border */
.wp-block-button:not(.is-style-solid) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-solid) > .wp-block-button__link:focus {
	color: var(--wp--preset--color--accent, #4f7a4d);
	border-color: var(--wp--preset--color--accent, #4f7a4d);
}

/* --- Inputs / search / select: square, hairline border, paper bg ---------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select,
.wp-block-search__input {
	font-family: var(--wp--preset--font-family--body, "EB Garamond", Garamond, Georgia, serif);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	background-color: var(--wp--preset--color--bg-primary, #f8f7f4);
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	border-radius: 0;
	padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
}
input::placeholder,
textarea::placeholder,
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
input:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--text-secondary, #5a5a5a);
}

/* --- Accessibility: skip link + screen-reader-text ------------------------ */
.skip-link.screen-reader-text {
	background-color: var(--wp--preset--color--bg-primary, #f8f7f4);
	color: var(--wp--preset--color--accent, #4f7a4d);
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	font-family: var(--wp--preset--font-family--body, "EB Garamond", Garamond, Georgia, serif);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--50, 1.5rem);
	left: var(--wp--preset--spacing--30, 0.75rem);
	top: var(--wp--preset--spacing--30, 0.75rem);
	z-index: 100000;
	text-decoration: none;
	outline: 2px solid var(--smg-focus-color);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Global shell — header, footer, contact, payment, breadcrumbs (STONE-85)
   Layout is driven by core blocks + theme.json; this only adds the few
   token-based touches the editor can't express (dense-UI link treatment,
   search measure, hours grid, badge chips). No hardcoded colours/sizes.
   ------------------------------------------------------------------------- */

/* Header search flexes but stays within a comfortable measure (~28rem). */
.smg-header__search {
	flex: 1 1 16rem;
	max-width: 28rem;
}

/* --- Live search autocomplete (STONE-8) ---------------------------------- */
/* The enhanced form anchors the absolutely-positioned results panel. */
.smg-header__search.smg-header__search--enhanced {
	position: relative;
}
.smg-search__panel {
	position: absolute;
	z-index: 50;
	top: calc(100% + 0.25rem);
	left: 0;
	right: 0;
	max-height: 70vh;
	overflow-y: auto;
	background-color: var(--wp--preset--color--bg-primary, #f8f7f4);
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.smg-search__panel[hidden] {
	display: none;
}
.smg-search__group {
	margin: 0;
	padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--10, 0.25rem);
	font-family: var(--wp--preset--font-family--heading, "Cinzel", serif);
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-search__option {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30, 0.75rem);
	padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1rem);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-search__option:hover,
.smg-search__option.is-active {
	background-color: var(--wp--preset--color--bg-secondary, #efede8);
}
.smg-search__option.is-active .smg-search__title,
.smg-search__option:hover .smg-search__title {
	color: var(--wp--preset--color--accent, #4f7a4d);
}
.smg-search__thumb {
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	object-fit: cover;
}
.smg-search__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.smg-search__title {
	font-family: var(--wp--preset--font-family--body, "EB Garamond", Garamond, Georgia, serif);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	line-height: 1.25;
}
.smg-search__price {
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-search__option--thema {
	justify-content: space-between;
}
.smg-search__count {
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-search__empty {
	margin: 0;
	padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--40, 1rem);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}

/* Mobile: collapse the field to its icon; the icon button expands it. */
@media (max-width: 768px) {
	.smg-header__search--enhanced:not(.is-search-open) .wp-block-search__input {
		width: 0;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
		border-width: 0;
		opacity: 0;
		pointer-events: none;
	}
	.smg-header__search--enhanced {
		flex: 0 0 auto;
	}
	.smg-header__search--enhanced.is-search-open {
		flex: 1 1 100%;
	}
}

/* Category nav + legal nav: dense UI links — colour over underline. */
.smg-header__nav a,
.smg-footer__legal a {
	text-decoration: none;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}
.smg-header__nav a:hover,
.smg-header__nav a:focus,
.smg-footer__legal a:hover,
.smg-footer__legal a:focus {
	color: var(--wp--preset--color--accent, #4f7a4d);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Two-tier masthead (STONE-103, ledger §1 #4) ------------------------- */
/* The category nav reads as a distinct band beneath the utility bar (logo ·
   search · cart): divided by an ink rule, links in tracked small-caps Cinzel —
   the museum-masthead reading, coherent with the locked Vitrine/Letterpress
   register (§1). Tokens only; reversible by dropping the modifier class. */
.smg-header--two-tier .smg-header__nav {
	border-top: 1px solid var(--wp--preset--color--text-primary, #2c2c2c);
	margin-top: var(--wp--preset--spacing--40, 1rem);
	padding-top: var(--wp--preset--spacing--40, 1rem);
}
.smg-header--two-tier .smg-header__nav a {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", serif);
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	font-variant: small-caps;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}

/* Uppercase, tracked, muted label (contact title, hours, payment). */
.smg-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: var(--wp--preset--spacing--30, 0.75rem);
}

/* Pre-footer contact: hours as a calm tabular day/time grid. */
.smg-hours__title {
	margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}
.smg-hours__list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--sm, 1rem);
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}
.smg-hours__list li {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50, 1.5rem);
	padding: var(--wp--preset--spacing--10, 0.25rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light, #e5e3de);
}
.smg-hours__list li:last-child {
	border-bottom: 0;
}
.smg-hours__day {
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-hours__time {
	font-variant-numeric: tabular-nums;
}

/* Payment-method badges: the one allowed 4px chip (design brief §6). */
.smg-payment__badge {
	margin: 0;
	padding: var(--wp--preset--spacing--10, 0.25rem) var(--wp--preset--spacing--30, 0.75rem);
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	border-radius: 4px;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	background-color: var(--wp--preset--color--bg-primary, #f8f7f4);
}

/* Breadcrumbs (Woo block): dense, muted, green on hover. */
.smg-breadcrumbs {
	font-size: var(--wp--preset--font-size--sm, 1rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	margin-bottom: var(--wp--preset--spacing--40, 1rem);
}
.smg-breadcrumbs a {
	text-decoration: none;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}
.smg-breadcrumbs a:hover,
.smg-breadcrumbs a:focus {
	color: var(--wp--preset--color--accent, #4f7a4d);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
   Storefront — object grid, archives & PDP (STONE-87)
   WooCommerce block templates, restyled to the museum-catalogue object grid
   and the golden-ratio PDP. Tokens only (--wp--preset--*); the few literal
   values (1:1 ratio, 220px track, 1.618 split, 6rem dt) are design constants
   from the brief, not colours/sizes that the Site Editor should own.
   ------------------------------------------------------------------------- */

/* --- Object grid: auto-fill minmax(220px), square images, no gimmicks ----- */
.smg-object-grid .wp-block-woocommerce-product-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(16px, 3vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.smg-object-grid .wc-block-product {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	max-width: none;
	text-align: left;
	list-style: none;
}
/* Square 1:1 object photo on secondary paper, cover. */
.smg-object-card__image img,
.smg-object-grid .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
	background-color: var(--wp--preset--color--bg-secondary, #f3f2ef);
	border-radius: 0;
}
.smg-object-card__title {
	margin: var(--wp--preset--spacing--30, 0.75rem) 0 var(--wp--preset--spacing--10, 0.25rem);
	line-height: 1.3;
}
.smg-object-card__title a {
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-object-card__title a:hover,
.smg-object-card__title a:focus {
	color: var(--wp--preset--color--accent, #4f7a4d);
}
/* --- Object-card SKU line (STONE-112) ------------------------------------
   The product's Artikelnummer (SKU) directly beneath the title. Small, muted
   and monospaced-ish via letter-spacing so it reads as a catalogue reference
   without competing with the title. Rendered by stoneshop/object-sku, which
   emits nothing when the product has no SKU (so no empty element appears). */
.smg-object-card__sku {
	margin: 0 0 var(--wp--preset--spacing--10, 0.25rem);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	letter-spacing: 0.06em;
	line-height: 1.4;
}
.smg-object-card__price {
	margin: 0;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}
.smg-object-card__price ins {
	text-decoration: none;
}

/* --- Object-card metadata line (STONE-104) -------------------------------
   "Object record" caption: Fundort · Material · Epoche, muted, " · "-joined.
   Rendered by stoneshop/object-meta (one source of truth with the PDP facts);
   each axis is its own <span>, the separator is a CSS ::before so the theme
   owns the glyph and empty axes never bracket a blank. No price here. */
.smg-object-card__meta {
	margin: var(--wp--preset--spacing--10, 0.25rem) 0 var(--wp--preset--spacing--20, 0.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.5rem;
	font-size: var(--wp--preset--font-size--sm, 0.8125rem);
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.4;
}
.smg-object-card__meta span + span::before {
	content: "·";
	margin-right: 0.5rem;
	color: var(--wp--preset--color--border, #d8d4cc);
}

/* --- Object card: Vitrine treatment (STONE-104 study winner) --------------
   Variant 1 "Vitrine" — the framed museum-label card, coherent with the
   locked Vitrine/Letterpress register (ledger §1). Additive + token-driven:
   a 2px ink frame on secondary paper, the photo ruled off from the caption,
   the title in small-caps. Reversible (re-mark in the study if another reads
   better). Grid stays uniform (auto-fill minmax, decided in the same study). */
.smg-object-grid .wc-block-product {
	border: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
	background-color: var(--wp--preset--color--bg-secondary, #f3f2ef);
	padding-bottom: var(--wp--preset--spacing--30, 0.75rem);
	display: flex;
	flex-direction: column;
}
.smg-object-card__image {
	margin: 0;
}
.smg-object-card__image img,
.smg-object-grid .wc-block-components-product-image img {
	border-bottom: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-object-card__title {
	margin-top: var(--wp--preset--spacing--30, 0.75rem);
	font-variant: small-caps;
	letter-spacing: 0.04em;
}
.smg-object-card__title,
.smg-object-card__sku,
.smg-object-card__meta,
.smg-object-card__price {
	padding-left: var(--wp--preset--spacing--30, 0.75rem);
	padding-right: var(--wp--preset--spacing--30, 0.75rem);
}

/* Drop to two columns on the smallest screens (design brief: ~540px). */
@media (max-width: 540px) {
	.smg-object-grid .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40, 1rem);
	}
}

/* --- Archive header ------------------------------------------------------- */
.smg-archive__intro {
	max-width: 42rem;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	line-height: 1.7;
}
.smg-archive__kicker {
	margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}
.smg-pagination {
	margin-top: var(--wp--preset--spacing--70, 3rem);
}

/* --- Archive faceted filters: instant left rail (STONE-36) ----------------
   Verdict §1 #3 "Seitenleiste": the facet panel lives in a fixed left rail —
   the same "unified spine / left rail" the shop uses — with results flowing to
   the right. Tokens only; paper-and-ink, square, flat, reduced-motion-safe. */
.smg-archive__body {
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 2.75rem);
}
.smg-archive__results {
	flex: 1 1 auto;
	min-width: 0;
}
.smg-facets.smg-archive__rail {
	flex: 0 0 15rem;
	position: sticky;
	top: var(--wp--preset--spacing--40, 1rem);
	margin: 0;
	padding-right: var(--wp--preset--spacing--40, 1rem);
	border-right: 1px solid var(--wp--preset--color--border, #d4d2cd);
}
.smg-facets__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40, 1rem);
	margin: 0 0 var(--wp--preset--spacing--30, 0.75rem);
	padding-bottom: var(--wp--preset--spacing--20, 0.5rem);
	border-bottom: 1px solid var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-facets__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, "Cinzel", serif);
	font-variant: small-caps;
	letter-spacing: 0.06em;
}
.smg-facets__reset {
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-facets__group {
	margin: 0 0 var(--wp--preset--spacing--50, 1.5rem);
	padding: 0;
	border: 0;
}
.smg-facets__legend {
	margin: 0 0 var(--wp--preset--spacing--20, 0.5rem);
	padding: 0;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-facets__opts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 0.25rem);
}
.smg-facets__label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 0.5rem);
	padding: 0.28rem 0.5rem;
	font-size: var(--wp--preset--font-size--sm, 1rem);
	border: 1px solid transparent;
	cursor: pointer;
}
.smg-facets__label[data-on="1"] {
	border-color: var(--wp--preset--color--text-primary, #2c2c2c);
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
}
.smg-facets__input {
	accent-color: var(--wp--preset--color--accent, #4f7a4d);
}
.smg-facets__actions {
	margin-top: var(--wp--preset--spacing--40, 1rem);
}
.smg-facets__apply {
	cursor: pointer;
}
/* Stack the rail above the results on narrow screens. */
@media (max-width: 781px) {
	.smg-archive__body {
		flex-wrap: wrap;
	}
	.smg-facets.smg-archive__rail {
		position: static;
		flex-basis: 100%;
		padding-right: 0;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--border, #d4d2cd);
		padding-bottom: var(--wp--preset--spacing--40, 1rem);
	}
	.smg-facets__opts {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* --- PDP: golden-ratio split (1.618fr image : 1fr content), stacks <768 --- */
.smg-pdp__layout {
	gap: var(--wp--preset--spacing--70, 3rem);
	align-items: flex-start;
}
.smg-pdp__media img {
	width: 100%;
	height: auto;
	max-height: min(70vh, 560px);
	object-fit: contain;
	background-color: var(--wp--preset--color--bg-secondary, #f3f2ef);
}
.smg-pdp__title {
	margin-top: 0;
}
.smg-pdp__price {
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	margin: var(--wp--preset--spacing--30, 0.75rem) 0 var(--wp--preset--spacing--50, 1.5rem);
}
.smg-pdp__excerpt {
	max-width: 36rem;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	line-height: 1.7;
}
/* Germanized legal notices (tax / unit price / shipping / delivery): quiet. */
.smg-pdp__legal {
	margin-top: calc(-1 * var(--wp--preset--spacing--40, 1rem));
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-pdp__legal a {
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}
/* Shipping-origin hint: directly under the price, a touch louder than the
   fine-print legal notices it sits above. */
.smg-pdp__shipping-origin {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm, 1rem);
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}

/* --- Stone facts: semantic <dl> on the secondary-paper panel -------------- */
.smg-facts {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0;
	padding: var(--wp--preset--spacing--50, 1.5rem);
	background-color: var(--wp--preset--color--bg-secondary, #f3f2ef);
	border: 1px solid var(--wp--preset--color--border-light, #e5e3de);
	font-size: var(--wp--preset--font-size--sm, 1rem);
}
.smg-facts__row {
	display: flex;
	gap: var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--30, 0.75rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light, #e5e3de);
}
.smg-facts__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.smg-facts__row:first-child {
	padding-top: 0;
}
.smg-facts__label {
	flex: 0 0 6rem;
	margin: 0;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	line-height: 1.6;
}
.smg-facts__value {
	margin: 0;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	font-variant-numeric: tabular-nums;
}
.smg-facts__value a {
	color: var(--wp--preset--color--accent, #4f7a4d);
	text-decoration: none;
}
.smg-facts__value a:hover,
.smg-facts__value a:focus {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* --- Stone info card: "Über diesen Stein" knowledge panel ----------------- */
/* Same secondary-paper panel + hairline rows as .smg-facts, with a calm
   <details> for the full datasheet. All colours/spacing from theme.json tokens. */
.smg-stonecard {
	margin: var(--wp--preset--spacing--50, 1.5rem) 0;
	padding: var(--wp--preset--spacing--50, 1.5rem);
	background-color: var(--wp--preset--color--bg-secondary, #f3f2ef);
	border: 1px solid var(--wp--preset--color--border-light, #e5e3de);
	font-size: var(--wp--preset--font-size--sm, 1rem);
}
.smg-stonecard__title {
	margin: 0 0 var(--wp--preset--spacing--30, 0.75rem);
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	font-size: var(--wp--preset--font-size--base, 1.125rem);
	font-weight: 600;
	letter-spacing: 0.01em;
}
.smg-stonecard__list {
	margin: 0;
}
.smg-stonecard__row {
	display: flex;
	gap: var(--wp--preset--spacing--40, 1rem);
	padding: var(--wp--preset--spacing--30, 0.75rem) 0;
	border-bottom: 1px solid var(--wp--preset--color--border-light, #e5e3de);
}
.smg-stonecard__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
.smg-stonecard__row:first-child {
	padding-top: 0;
}
.smg-stonecard__label {
	flex: 0 0 6rem;
	margin: 0;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	line-height: 1.6;
}
.smg-stonecard__value {
	margin: 0;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
}
/* The full datasheet: a quiet disclosure, never an attention-grabber. */
.smg-stonecard__more {
	margin-top: var(--wp--preset--spacing--30, 0.75rem);
	border-top: 1px solid var(--wp--preset--color--border-light, #e5e3de);
	padding-top: var(--wp--preset--spacing--30, 0.75rem);
}
.smg-stonecard__summary {
	cursor: pointer;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	list-style: none;
}
.smg-stonecard__summary::-webkit-details-marker {
	display: none;
}
.smg-stonecard__summary::after {
	content: " +";
}
.smg-stonecard__more[open] .smg-stonecard__summary::after {
	content: " –";
}
.smg-stonecard__more[open] .smg-stonecard__summary {
	margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}
.smg-stonecard__sheet {
	animation: smg-stonecard-reveal var(--smg-transition-fast, 180ms) ease;
}
@keyframes smg-stonecard-reveal {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.smg-stonecard__sheet {
		animation: none;
	}
}

/* --- Acquire block: uppercase label + the one solid primary button -------- */
.smg-acquire {
	margin-top: var(--wp--preset--spacing--50, 1.5rem);
}
.smg-acquire__label {
	margin-bottom: var(--wp--preset--spacing--20, 0.5rem);
}
/* The Woo add-to-cart button is the single solid/primary action on the site. */
.smg-pdp .single_add_to_cart_button,
.smg-acquire .single_add_to_cart_button {
	background-color: var(--wp--preset--color--text-primary, #2c2c2c);
	color: var(--wp--preset--color--bg-primary, #f8f7f4);
	border: 1px solid var(--wp--preset--color--text-primary, #2c2c2c);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body, "EB Garamond", Garamond, Georgia, serif);
	padding: var(--wp--preset--spacing--30, 0.75rem) var(--wp--preset--spacing--60, 2rem);
	transition: background-color var(--smg-transition-fast), border-color var(--smg-transition-fast);
}
.smg-pdp .single_add_to_cart_button:hover,
.smg-pdp .single_add_to_cart_button:focus,
.smg-acquire .single_add_to_cart_button:hover,
.smg-acquire .single_add_to_cart_button:focus {
	background-color: var(--wp--preset--color--accent, #4f7a4d);
	border-color: var(--wp--preset--color--accent, #4f7a4d);
	color: var(--wp--preset--color--bg-primary, #f8f7f4);
}
.smg-pdp .quantity input.qty {
	width: 4.5rem;
	text-align: center;
}

/* --- In einer Sammlung: a sold Unikat, calmly noted (no urgency) ---------- */
/* The acquire slot when archived — same spacing as .smg-acquire, no badge,    */
/* no colour shift; the object simply rests in a collection now.               */
.smg-sammlung__note {
	margin: var(--wp--preset--spacing--20, 0.5rem) 0 0;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	font-style: italic;
	line-height: 1.7;
}

/* --- Sold-archive index: the "Zuhause gefunden" counter + object grid ------ */
.smg-sammlung-archiv__counter {
	margin: 0 0 var(--wp--preset--spacing--60, 2rem);
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	line-height: 1.5;
}
.smg-sammlung-archiv__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: clamp(16px, 3vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.smg-sammlung-archiv__item {
	margin: 0;
	padding: 0;
}
.smg-sammlung-archiv__link {
	display: block;
	text-decoration: none;
}
.smg-sammlung-archiv__date {
	display: block;
	margin-top: var(--wp--preset--spacing--10, 0.25rem);
}
.smg-sammlung-archiv__empty {
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	font-style: italic;
}
@media (max-width: 540px) {
	.smg-sammlung-archiv__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40, 1rem);
	}
}

/* --- Related objects ------------------------------------------------------ */
.smg-related__title {
	margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

/* -------------------------------------------------------------------------
   Cart & Checkout (STONE-88)
   Standard WooCommerce Cart/Checkout blocks + Germanized, restyled to the
   calm museum palette. Tokens only (--wp--preset--*); radius 0 everywhere,
   the one solid ink fill stays the primary action (proceed / place order).
   ------------------------------------------------------------------------- */
.smg-cart__title,
.smg-checkout__title {
	margin-bottom: var(--wp--preset--spacing--60, 2rem);
}

/* Square geometry on all Woo block controls (brief: radius 0 default). */
.smg-cart .wc-block-components-button,
.smg-checkout .wc-block-components-button,
.smg-cart .wc-block-components-text-input input,
.smg-checkout .wc-block-components-text-input input,
.smg-checkout .wc-block-components-checkout-step,
.smg-cart .wc-block-cart__totals-title {
	border-radius: 0;
}

/* The primary actions — "Weiter zur Kasse" and "Bestellung abschließen" —
   are the rare solid ink fill, paper text (brief §buttons). */
.smg-cart .wc-block-cart__submit-button,
.smg-checkout .wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--text-primary, #2c2c2c);
	color: var(--wp--preset--color--bg-primary, #f8f7f4);
	border: 1px solid var(--wp--preset--color--text-primary, #2c2c2c);
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body, "EB Garamond", Garamond, Georgia, serif);
	transition: background-color var(--smg-transition-fast), border-color var(--smg-transition-fast);
}
.smg-cart .wc-block-cart__submit-button:hover,
.smg-cart .wc-block-cart__submit-button:focus,
.smg-checkout .wc-block-components-checkout-place-order-button:hover,
.smg-checkout .wc-block-components-checkout-place-order-button:focus {
	background-color: var(--wp--preset--color--accent, #4f7a4d);
	border-color: var(--wp--preset--color--accent, #4f7a4d);
	color: var(--wp--preset--color--bg-primary, #f8f7f4);
}

/* Germanized legal checkboxes (AGB/Widerruf): keep readable, green accent. */
.smg-checkout .wc-gzd-checkout-checkboxes,
.smg-checkout .wc-block-components-checkout-step--with-step-number {
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-checkout .wc-gzd-checkbox-placeholder,
.smg-checkout input[type="checkbox"]:checked {
	accent-color: var(--wp--preset--color--accent, #4f7a4d);
}

/* Order-received / confirmation: align headings to the page rhythm. */
.smg-order-confirmation .wc-block-order-confirmation-status {
	margin-bottom: var(--wp--preset--spacing--50, 1.5rem);
}

/* --- Homepage: hero, section rhythm, collection tiles --------------------- */
/* Section headings share one quiet rhythm; the grids reuse .smg-object-grid. */
.smg-home-section__title {
	margin: 0 0 var(--wp--preset--spacing--60, 2rem);
}

/* Hero: two-column text|image, generous gap. Image-first stack on mobile. */
.smg-home-hero__cols {
	align-items: center;
}
.smg-home-hero__title {
	max-width: 16ch;
	font-size: clamp(2.2rem, 3.6vw, 3.4rem);
	line-height: 1.15;
	margin: 0 0 var(--wp--preset--spacing--50, 1.5rem);
}
.smg-home-hero__intro {
	max-width: 36ch;
	line-height: 1.6;
}
.smg-home-hero__actions {
	margin-top: var(--wp--preset--spacing--60, 2rem);
}
.smg-home-hero__image img {
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	border-radius: 0;
}
/* Hero stacks below the PDP/hero breakpoint, image first (design brief). */
@media (max-width: 768px) {
	.smg-home-hero__cols {
		flex-wrap: wrap;
	}
	.smg-home-hero__cols .smg-home-hero__media {
		order: -1;
	}
}

/* Featured collection tiles: 4:3 calm cards, title turns green on hover. */
.smg-collection-card .wp-block-group {
	height: 100%;
}
/* Tile media: fixed 4:3 frame so the grid never collapses or shows a broken
   image. Real auto-derived photo fills the frame; an empty category renders the
   .__placeholder block (calm secondary paper) instead. */
.smg-collection-card__media {
	aspect-ratio: 4 / 3;
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
	overflow: hidden;
	border-radius: 0;
}
.smg-collection-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.smg-collection-card__placeholder {
	background-color: var(--wp--preset--color--bg-secondary, #f3f2ef);
}
.smg-collection-card h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-collection-card h3 a:hover,
.smg-collection-card h3 a:focus {
	color: var(--wp--preset--color--accent, #4f7a4d);
}

/* --- Brand story (Über uns): draft copy + calm empty photo slots ----------- */
/* Draft marker: a quiet, italic note so it is unmistakably placeholder copy
   awaiting the human's final fassung — never reads as finished prose. */
.smg-about__draft {
	font-style: italic;
	letter-spacing: 0.02em;
	margin: 0 0 var(--wp--preset--spacing--40, 1rem);
}
.smg-about__title {
	margin-top: 0;
}
/* Photo slots: secondary-paper placeholders with a fixed 4:3 frame so the
   layout never collapses or shows a broken image while empty. The human drops
   a real photo into the slot later (swap-seam) with no code change. */
.smg-about__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: var(--wp--preset--spacing--50, 1.5rem);
}
.smg-about__photo-label {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
/* If a real image is later placed inside the slot, let it fill the frame. */
.smg-about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Photo slots stack on narrow screens (match the hero breakpoint). */
@media (max-width: 768px) {
	.smg-about__media {
		flex-wrap: wrap;
	}
}

/* --- Reduced motion: zero all transitions/animations ---------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Echtheitszertifikat: print-only specimen card (STONE-98) -------------- */
/* The certificate body lives in the DOM but is hidden on screen (D1: provenance
   never reaches the on-screen customer view); only the print trigger shows. */
.smg-certificate {
	display: none;
}

.smg-certificate__print {
	margin-top: var(--wp--preset--spacing--30);
	background: transparent;
	color: var(--wp--preset--color--text-primary);
	border: 1px solid var(--wp--preset--color--text-primary);
	border-radius: 0;
	padding: 0.5em 1em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.smg-certificate__print:hover,
.smg-certificate__print:focus-visible {
	background: var(--wp--preset--color--text-primary);
	color: var(--wp--preset--color--bg-primary);
}

/* --- Print: white bg, black text, 12pt, underlined links, hide chrome ------ */
@media print {
	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}
	a {
		color: #000;
		text-decoration: underline;
	}
	.no-print,
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.wp-block-search,
	.skip-link {
		display: none !important;
	}
	img {
		max-width: 100% !important;
	}

	/* PDP shop chrome that has no place on the printed certificate. */
	.smg-related,
	.smg-acquire,
	.wp-block-woocommerce-store-notices {
		display: none !important;
	}

	/* Reveal the specimen card and render it as a calm paper-and-ink certificate. */
	.smg-certificate {
		display: block;
		margin-top: 1.5rem;
		padding: 1.5rem;
		border: 1px solid #000;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.smg-certificate__eyebrow {
		margin: 0 0 0.25rem;
		font-size: 10pt;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.smg-certificate__title {
		margin: 0 0 0.25rem;
		font-size: 16pt;
	}
	.smg-certificate__sku {
		margin: 0 0 1rem;
		font-size: 10pt;
	}
	.smg-certificate__group {
		margin: 0 0 1rem;
	}
	.smg-certificate__grouphead dt {
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		font-size: 10pt;
		padding-top: 0.5rem;
		border-top: 1px solid #000;
	}
	.smg-certificate__row {
		display: flex;
		gap: 1rem;
		padding: 0.15rem 0;
	}
	.smg-certificate__row dt {
		flex: 0 0 9rem;
		font-weight: 600;
	}
	.smg-certificate__row dd {
		flex: 1 1 auto;
		margin: 0;
	}
	.smg-certificate__foot {
		margin-top: 1.5rem;
		padding-top: 0.75rem;
		border-top: 1px solid #000;
		font-size: 10pt;
	}
	.smg-certificate__signline {
		margin-top: 1.5rem;
	}
}

/* -------------------------------------------------------------------------
   Lesarten — the exhibition (STONE-94)

   Presentation for the hub + four lens surfaces rendered by the
   stoneshop-core `stoneshop/lesarten-*` blocks. Coupled to those blocks by the
   `smg-lesarten*` class NAMES only. Every value reads a theme.json
   `--wp--preset--*` token (or the `--smg-*` motion vars), so the later register
   re-skin (STONE-93) is a token swap with no edits here. Paper-and-ink baseline.
   ------------------------------------------------------------------------- */

.smg-lesarten {
	font-family: var(--wp--preset--font-family--body, "EB Garamond", Georgia, serif);
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}

/* alignfull lens roots get their own breathing room + a centred column. */
.smg-lesarten__head,
.smg-zeitachse__rail,
.smg-matrix__scroll,
.smg-pfad__choices,
.smg-pfad__branch,
.smg-berater__form,
.smg-berater__cards,
.smg-lesarten-hub__grid {
	max-width: 62rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 3.5rem);
	padding-right: clamp(1rem, 4vw, 3.5rem);
}

/* --- Shared lens header --------------------------------------------------- */
.smg-lesarten__head {
	padding-top: clamp(2.5rem, 6vw, 5rem);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.smg-lesarten__kicker {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-lesarten__title {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-weight: 400;
	line-height: 1.2;
	font-size: clamp(2rem, 4.4vw, 3rem);
	margin: 0 0 1.1rem;
	max-width: 20ch;
}
.smg-lesarten__intro {
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	line-height: 1.7;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	max-width: 48ch;
	margin: 0;
}
.smg-lesarten__back {
	margin: 1.5rem 0 0;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
}

/* --- Shared: a column of live stones (Zeitachse + Erzählpfad leaves) ------- */
.smg-stones {
	display: flex;
	flex-direction: column;
	gap: 1px;
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	background: var(--wp--preset--color--border, #d4d2cd);
}
.smg-stone {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	transition: color var(--smg-transition-base, 200ms ease), background var(--smg-transition-base, 200ms ease);
}
.smg-stone:hover,
.smg-stone:focus-visible {
	color: var(--wp--preset--color--accent, #4f7a4d);
	background: var(--wp--preset--color--bg-tertiary, #eceae6);
}
.smg-stone__name {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-size: var(--wp--preset--font-size--base, 1.125rem);
}
.smg-stone__meta {
	font-size: var(--wp--preset--font-size--xs, 0.8125rem);
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-left: auto;
}

/* --- Hub: the four doors -------------------------------------------------- */
.smg-lesarten-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--border, #d4d2cd);
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	margin-bottom: clamp(2rem, 5vw, 4rem);
}
.smg-lesarten-hub__card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	transition: background var(--smg-transition-base, 200ms ease);
}
.smg-lesarten-hub__card:hover,
.smg-lesarten-hub__card:focus-visible {
	background: var(--wp--preset--color--bg-tertiary, #eceae6);
}
.smg-lesarten-hub__frage {
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-lesarten-hub__name {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-size: var(--wp--preset--font-size--xl, 2rem);
	line-height: 1.1;
}
.smg-lesarten-hub__blurb {
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	line-height: 1.6;
}

/* --- Zeitachse: the deep-time rail ---------------------------------------- */
.smg-zeitachse__rail {
	list-style: none;
	margin: 0 auto;
	padding-top: clamp(1rem, 3vw, 2rem);
	padding-bottom: 4rem;
}
.smg-era {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 4vw, 3rem) 0;
	border-top: 1px solid var(--wp--preset--color--border, #d4d2cd);
}
.smg-era:first-child {
	border-top: 0;
}
.smg-era__age {
	display: block;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-era__eon {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	display: block;
	font-size: 1.05rem;
	margin-top: 0.45rem;
}
.smg-era__title {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xl, 2rem);
	margin: 0 0 0.65rem;
}
.smg-era__lead {
	margin: 0 0 1.5rem;
	max-width: 62ch;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}

/* --- Matrix: the crosstab + gaps ------------------------------------------ */
.smg-matrix__scroll {
	overflow-x: auto;
	padding-bottom: 3rem;
}
.smg-matrix__table {
	border-collapse: collapse;
	width: 100%;
	min-width: 40rem;
	background: var(--wp--preset--color--border, #d4d2cd);
}
.smg-matrix__table th,
.smg-matrix__table td {
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
	padding: 0.75rem 0.9rem;
	text-align: left;
	vertical-align: middle;
}
.smg-matrix__table thead th,
.smg-matrix__table th[scope="row"] {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	letter-spacing: 0.02em;
	background: var(--wp--preset--color--bg-tertiary, #eceae6);
}
.smg-matrix__stone {
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-matrix__stone:hover,
.smg-matrix__stone:focus-visible {
	color: var(--wp--preset--color--accent, #4f7a4d);
}
.smg-matrix__cell--gap {
	text-align: center;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	background: var(--wp--preset--color--bg-primary, #f8f7f4);
}

/* --- Erzählpfad: branching ------------------------------------------------ */
.smg-pfad__choices {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.smg-pfad__prompt {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	margin: 0 0 1rem;
}
.smg-pfad__choice {
	display: inline-block;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	transition: border-color var(--smg-transition-base, 200ms ease), color var(--smg-transition-base, 200ms ease);
}
.smg-pfad__choice:hover,
.smg-pfad__choice:focus-visible {
	border-color: var(--wp--preset--color--accent, #4f7a4d);
	color: var(--wp--preset--color--accent, #4f7a4d);
}
.smg-pfad__branch {
	padding-top: clamp(1.5rem, 4vw, 2.5rem);
	padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
	border-top: 1px solid var(--wp--preset--color--border, #d4d2cd);
}
.smg-pfad__title {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xl, 2rem);
	margin: 0 0 0.65rem;
}
.smg-pfad__lead {
	margin: 0 0 1.5rem;
	max-width: 62ch;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
}

/* --- Berater: questions + suggestion cards -------------------------------- */
.smg-berater__form {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 2rem;
}
.smg-berater__q {
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	padding: 0.75rem 1rem 1rem;
	margin: 0;
	min-width: 14rem;
}
.smg-berater__legend {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-size: var(--wp--preset--font-size--sm, 1rem);
	padding: 0 0.4rem;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-berater__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}
.smg-berater__opt {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
}
.smg-berater__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--border, #d4d2cd);
	border: 1px solid var(--wp--preset--color--border, #d4d2cd);
	margin-bottom: 4rem;
}
.smg-berater__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
}
.smg-berater__card[hidden] {
	display: none;
}
.smg-berater__profile {
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
	margin: 0;
}
.smg-berater__lead {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--text-secondary, #5a5a5a);
	line-height: 1.6;
}
.smg-berater__pick {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--wp--preset--color--text-primary, #2c2c2c);
	margin-top: auto;
}
.smg-berater__pick-label {
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--text-muted, #7a7a7a);
}
.smg-berater__pick-name {
	font-family: var(--wp--preset--font-family--heading, "Cinzel", Georgia, serif);
	font-size: var(--wp--preset--font-size--lg, 1.5rem);
	line-height: 1.2;
}
.smg-berater__pick:hover .smg-berater__pick-name,
.smg-berater__pick:focus-visible .smg-berater__pick-name {
	color: var(--wp--preset--color--accent, #4f7a4d);
}
.smg-berater__alt {
	font-size: var(--wp--preset--font-size--xs, 0.875rem);
	color: var(--wp--preset--color--accent, #4f7a4d);
}

@media (max-width: 640px) {
	.smg-era {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}
	.smg-stone__meta {
		margin-left: 0;
	}
}

/* Reduced-motion: the global rule (above) already kills transitions; this keeps
   the lens surfaces explicitly static for clarity. */
@media (prefers-reduced-motion: reduce) {
	.smg-lesarten * {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
   Lesarten — Vitrine / Letterpress register (STONE-101, register d)

   The locked register verdict (STONE-93 → d · Vitrine / Letterpress) applied as
   a bounded skin scoped to the `.smg-lesarten` container. It translates register
   d's structural rules (reference: exhibition-preview/zeitachse-d.html, the
   `.reg-d *` block) onto the real `.smg-*` markup, across the hub + all four
   lenses:
     - every content unit (era / story node / suggestion card / hub door) is a
       framed museum-label card: 2px ink border, paper-2 fill, vertical rhythm;
     - section/unit titles are uppercase small-caps Cinzel under a hairline rule;
     - the age/meta markers carry a 2px ink bottom rule, inline-block;
     - the object lists drop onto a dark inset panel — the one dark accent, the
       vitrine plinth.
   Reads the same `--wp--preset--*` tokens as the baseline (no parallel colour
   system); no palette inversion — register d is light. Everything is scoped under
   `.smg-lesarten`, so the shop chrome (browse / PDP / cart / checkout / legal)
   stays plain paper-and-ink and every lens still terminates at a plain PDP.
   ------------------------------------------------------------------------- */

/* Framed museum-label card — each content unit gets the 2px ink frame. */
.smg-lesarten .smg-era,
.smg-lesarten .smg-pfad__branch,
.smg-lesarten .smg-berater__card,
.smg-lesarten .smg-lesarten-hub__card {
	border: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
	background: var(--wp--preset--color--bg-secondary, #f3f2ef);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* The framing replaces the baseline hairline rails; give the stacked cards
   (Zeitachse eras, Erzählpfad branches) breathing room between frames. */
.smg-lesarten .smg-era,
.smg-lesarten .smg-pfad__branch {
	border-top: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
	margin-bottom: 1.75rem;
}
.smg-lesarten .smg-era:first-child {
	border-top: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
}

/* Card grids (hub doors, Berater suggestions) become floating framed labels:
   drop the baseline hairline-grid background so each card is its own vitrine. */
.smg-lesarten .smg-lesarten-hub__grid,
.smg-lesarten .smg-berater__cards {
	background: none;
	border: 0;
	gap: clamp(1rem, 2.5vw, 1.75rem);
}

/* Section / unit titles: uppercase small-caps Cinzel under a hairline rule. */
.smg-lesarten .smg-era__title,
.smg-lesarten .smg-pfad__title,
.smg-lesarten .smg-lesarten-hub__name {
	text-transform: uppercase;
	font-variant: small-caps;
	letter-spacing: 0.08em;
	font-size: 1.6rem;
	border-bottom: 1px solid var(--wp--preset--color--text-primary, #2c2c2c);
	padding-bottom: 0.5rem;
	margin-bottom: 0.75rem;
}

/* Age / meta markers: a 2px ink bottom rule, inline-block (the era plate). */
.smg-lesarten .smg-era__age,
.smg-lesarten .smg-lesarten-hub__frage,
.smg-lesarten .smg-berater__profile {
	display: inline-block;
	border-bottom: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
	padding-bottom: 0.35rem;
}

/* Object lists drop onto a dark inset panel — the vitrine plinth (Zeitachse +
   Erzählpfad leaves). Stones stay paper-2, so the 1px gaps read as ink hairlines. */
.smg-lesarten .smg-stones {
	border-color: var(--wp--preset--color--text-primary, #2c2c2c);
	background: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-lesarten .smg-stone__name {
	font-variant: small-caps;
	letter-spacing: 0.04em;
}

/* Matrix: the crosstab itself is the plinth — a 2px ink frame, ink gridlines,
   small-caps Cinzel on both header bands. Filled cells stay paper-2 (the inlay). */
.smg-lesarten .smg-matrix__table {
	border: 2px solid var(--wp--preset--color--text-primary, #2c2c2c);
	background: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-lesarten .smg-matrix__table th,
.smg-lesarten .smg-matrix__table td {
	border-color: var(--wp--preset--color--text-primary, #2c2c2c);
}
.smg-lesarten .smg-matrix__table thead th,
.smg-lesarten .smg-matrix__table th[scope="row"] {
	text-transform: uppercase;
	font-variant: small-caps;
	letter-spacing: 0.06em;
}

/* Print: keep the exhibition paper-and-ink — drop the dark plinth accents so the
   printed page stays clean (the global @media print sets a white/black base). */
@media print {
	.smg-lesarten .smg-stones,
	.smg-lesarten .smg-matrix__table {
		background: #fff;
		border-color: #000;
	}
	.smg-lesarten .smg-era,
	.smg-lesarten .smg-pfad__branch,
	.smg-lesarten .smg-berater__card,
	.smg-lesarten .smg-lesarten-hub__card {
		border-color: #000;
	}
}