/* ===========================================================
   MOSCH Storefront — Produktseite (v0.16.0, Vorlage „V2 Card")
   Emitter: SF_Product_Page. Canvas „Storefront Shop Pages rev1",
   Seite „Product Page".

   Farben, Schriften und Knöpfe kommen aus dem Theme:
   - Variablen der Child-Theme-style.css (--primary-color usw.).
   - Add to Cart ist das WooCommerce-Formular; Ornament-Kappen und
     Partikel liefern style.css und custom.js (.single_add_to_cart_button).
   - Alle anderen Knöpfe tragen .fusion-button (Avada + style.css).
   - Der Tag nutzt .single-product .tags a aus style.css.
   Hier steht nur Layout und was das Theme nicht kennt.
   Breakpoints als Container Queries am Shortcode-Umschlag.
   =========================================================== */

.sfp {
	--sfp-pc: var(--primary-color, #a4895b);
	--sfp-sc: var(--secondary-color, #367588);
	--sfp-tl: var(--text-color-light, #e6cfa9);
	--sfp-ow: var(--off-white, #f3ebda);
	--sfp-dg: var(--color-dark-gold, #4a3c27);
	--sfp-night: #041119;
	--sfp-bm: var(--color-blue-medium, #0a1f28);
	--sfp-bd: var(--color-blue-dark, #031118);
	--sfp-ink: #211c14;
	--sfp-dim: rgba(230, 207, 169, .64);
	--sfp-head: var(--font-family-heading, "Eisenkraft", serif);
	--sfp-body: var(--font-family-body, "Reddit Sans", Arial, sans-serif);
	--sfp-side: max(64px, calc((100% - 1580px) / 2));
	position: relative;
	container-type: inline-size;
	color: var(--sfp-tl);
	font-family: var(--sfp-body);
}
.sfp *,
.sfp *::before,
.sfp *::after {
	box-sizing: border-box;
}
body .sfp .sfp-ek {
	margin: 0;
	font-family: var(--sfp-head);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.05;
	text-transform: none;
}
/* Body-Stil der Website (Avada body_typography) für Fließtext. */
.sfp .sfp-lore,
.sfp .sfp-bi p,
.sfp .sfp-desc p,
.sfp .sfp-rt,
.sfp .sfp-rvt p {
	font-family: var(--sfp-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 2em;
	letter-spacing: .015em;
	color: var(--sfp-ow);
}
.sfp-blur {
	filter: blur(4px);
	user-select: none;
}
.sfp-admin {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	border: 1px dashed var(--sfp-sc);
	background: rgba(54, 117, 136, .08);
	font-size: 14px;
	line-height: 1.5;
}
.sfp-admin b {
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--sfp-sc);
}
.sfp .sfp-btn {
	margin: 0;
}

/* ── Hero: Galerie | Karte, darunter der Fortschritt ─────────────── */

.sfp-hero {
	display: grid;
	grid-template-columns: minmax(0, 848px) minmax(0, 1fr);
	column-gap: 80px;
	row-gap: 24px;
	max-width: 1580px;
	margin: 0 auto;
}
.sfp-gal {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}
.sfp-thumbs {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 24px;
	padding: 56px 0;
}
.sfp .sfp-th {
	position: relative;
	display: block;
	width: 128px;
	height: 128px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--sfp-paper) #efe4cc;
	cursor: pointer;
}
.sfp .sfp-th img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10%;
	object-fit: contain;
	opacity: .55;
	transition: opacity .2s;
}
.sfp .sfp-th.is-on img,
.sfp .sfp-th:hover img {
	opacity: 1;
}
.sfp .sfp-th::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 13px solid transparent;
	border-image: var(--sfp-thumb) 13 / 13px stretch;
	pointer-events: none;
}
.sfp .sfp-th:hover::after,
.sfp .sfp-th:focus-visible::after {
	border-image-source: var(--sfp-thumb-hover);
}
.sfp-pi {
	position: relative;
	flex: 1;
	aspect-ratio: 1;
	max-width: 696px;
	background: var(--sfp-paper) #efe4cc;
}
.sfp-pi img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 8%;
	object-fit: contain;
}
.sfp-pi::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 27px solid transparent;
	border-image: var(--sfp-card) 27 / 27px stretch;
	pointer-events: none;
}

/* Karte, bündig mit der Galerie (Rasterzeile streckt sie). */
.sfp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 40px 48px;
}
.sfp-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 87px solid transparent;
	border-image: var(--sfp-box) 87 / 87px stretch;
	pointer-events: none;
}
.sfp-card > * {
	position: relative;
}
.sfp .sfp-tags p {
	display: flex;
	justify-content: flex-start;
	margin: 0;
	line-height: 0;
}
/* Tag als Block, damit die runde Innenlinie aus style.css den Kasten ganz füllt. */
.single-product .sfp .sfp-tags a,
.sfp .sfp-tags a {
	position: relative;
	display: inline-block;
	vertical-align: top;
	line-height: 30px;
	background: var(--secondary-color, #367588); /* v0.17.2 — statt medium blue (style.css #0a1f28) */
}
/* v0.17.2 — Hover aus style.css färbt Text und Linie secondary und verschwände
   auf der secondary-Fläche; Text wird off-white, die Linie bleibt primary. */
.single-product .sfp .sfp-tags a:hover,
.sfp .sfp-tags a:hover {
	box-shadow: inset 0 0 0 1px var(--primary-color, #a4895b);
	color: var(--sfp-ow);
}
.single-product .sfp .sfp-tags a:hover::before,
.sfp .sfp-tags a:hover::before {
	border-color: var(--primary-color, #a4895b);
}
/* v0.16.4 — wie style.css gemeint: die runde Linie liegt deckungsgleich auf
   dem 1px-Rahmen, gerade Kanten fallen zusammen, nur die Ecken bleiben frei.
   style.css rechnet mit content-box (100 % − 2px + 2px Rand); .sfp setzt
   border-box, darum hier inset 0 statt calc(). */
.single-product .sfp .sfp-tags a::before,
.sfp .sfp-tags a::before {
	inset: 0;
	width: auto;
	height: auto;
	box-sizing: border-box;
}
.sfp-tt {
	display: flex;
	align-items: center;
	gap: 24px;
}
.sfp-ttx {
	flex: 1;
	min-width: 0;
	container-type: inline-size;
}
body .sfp h1.sfp-title {
	margin: 0;
	font-family: var(--sfp-head);
	font-weight: 400;
	font-size: min(64px, calc(100cqi / (var(--len) * .30)));
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	text-transform: none;
	color: var(--primary-color, #a4895b);
}
.sfp .sfp-sub {
	margin: 2px 0 0;
	font-family: var(--sfp-body);
	font-size: 20px;
	font-style: italic;
	font-weight: 400; /* v0.16.4 — Vorgabe Max */
	line-height: 1.4;
	color: var(--text-color-light, #e6cfa9);
}
.sfp .sfp-ticon {
	flex: none;
	width: 72px;
	height: 72px;
	object-fit: contain;
}
.sfp .sfp-lore {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.6em;
}
/* v0.16.4 — freier Raum der Karte 2 : 3 um die Liste. */
.sfp .sfp-sp {
	display: block;
	flex: 2 1 0;
	min-height: 0;
	margin: -8px 0;
}
.sfp .sfp-sp-b {
	flex-grow: 3;
}
.sfp .sfp-incl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sfp .sfp-incl li {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 16px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-tl);
}
.sfp .sfp-incl li::before {
	content: "\e90b"; /* mmm-ornament-small */
	flex: none;
	font-family: var(--font-family-iconfont, "MaxsMagnificent-Icons");
	font-size: 18px;
	line-height: 1.3;
	text-transform: none;
	color: var(--secondary-color, #367588);
}
.sfp-pb {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--sfp-dg);
	text-align: center;
}
.sfp-p {
	font-size: 64px;
	font-weight: 300;
	line-height: 1;
	color: var(--sfp-tl);
}
.sfp-p del {
	margin-right: 16px;
	font-size: 32px;
	color: var(--sfp-dim);
}
.sfp-p ins {
	text-decoration: none;
}
.sfp-lgd {
	margin-top: 12px;
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--sfp-dim);
}
.sfp-lgd a {
	color: var(--sfp-dim);
	text-decoration: underline;
}
.sfp-cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}
.sfp-cart form.cart.variations_form {
	flex-direction: column;
	align-items: stretch;
}
/* Menge: drei Quadrate in der Höhe von Add to Cart (−, Feld, +),
   Optik wie die Mengen-Kästchen der style.css. */
.sfp-qty {
	display: flex;
	flex: none;
	height: 67px;
}
.sfp .sfp-qm,
.sfp .sfp-qp {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 67px;
	height: 67px;
	margin: 0;
	padding: 0;
	border: 2px solid var(--primary-color, #a4895b);
	border-radius: 0;
	background: var(--color-blue-medium, #0a1f28);
	font-size: 20px;
	line-height: 1;
	color: var(--text-color-light, #e6cfa9);
	cursor: pointer;
	transition: background-color .2s ease;
}
/* v0.16.4 — Glyph über die Klasse der Iconfont (mmm-curve-arrow-left/-right). */
.sfp .sfp-qm i,
.sfp .sfp-qp i {
	display: block;
	font-size: 20px;
	line-height: 1;
	pointer-events: none;
}
.sfp .sfp-qm:hover,
.sfp .sfp-qp:hover {
	background-color: var(--secondary-color, #367588);
}
/* counter: Avada setzt Zahlenfelder mit .fusion-body input[type=number]. */
body #wrapper .sfp .sfp-qty input.qty {
	flex: none;
	width: 67px;
	height: 67px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 2px solid var(--primary-color, #a4895b);
	border-right: 0;
	border-left: 0;
	border-radius: 0;
	background: transparent;
	font-size: 18px;
	font-weight: 500;
	line-height: 63px;
	text-align: center;
	color: var(--text-color-light, #e6cfa9);
	-moz-appearance: textfield;
	appearance: textfield;
}
.sfp .sfp-qty input.qty::-webkit-outer-spin-button,
.sfp .sfp-qty input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
/* Partikel über der Ornament-Fläche.
   counter: style.css blendet sie am Warenkorb-Knopf mit
   `.single_add_to_cart_button .particles-js-canvas-el { display: none !important }` aus;
   auf der Storefront-Produktseite sollen sie sichtbar sein (Vorgabe Max 21.09.). */
.sfp .single_add_to_cart_button .particles-js-canvas-el,
.sfp .fusion-button .particles-js-canvas-el {
	display: block !important;
	z-index: 2;
	pointer-events: none;
}
.sfp .sfp-cart .sfp-download {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 67px;
	text-decoration: none;
}
body .sfp .sfp-cart form.cart .single_add_to_cart_button {
	position: relative;
	flex: 1;
	height: 67px;
	margin: 0;
}

/* Free-Shipping-Fortschritt: 1px primary, Beschriftung unter den Kreisen. */
.sfp-fsu {
	grid-column: 2;
	padding-bottom: 44px;
}
.sfp-fsu-t {
	margin-bottom: 10px;
	font-size: 16px;
	letter-spacing: .05em;
	text-align: center;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp-fsu-t b {
	font-weight: 500;
	color: var(--sfp-tl);
}
.sfp-bar {
	position: relative;
	height: 8px;
	background: var(--sfp-bm);
	box-shadow: inset 0 0 0 1px var(--primary-color, #a4895b);
}
.sfp-bar i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--sfp-pc);
}
.sfp-bar em {
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: var(--sfp-bd);
	box-shadow: inset 0 0 0 2px var(--sfp-pc);
	font-style: normal;
}
.sfp-bar em.on {
	background: var(--sfp-pc);
}
.sfp-bar em span {
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	color: var(--sfp-tl);
}
.sfp-bar em.end span {
	left: auto;
	right: -4px;
	transform: none;
	text-align: right;
	color: var(--sfp-pc);
}

/* ── On the Map (ornament-box-gold, 400 hoch) ───────────────────── */

/* v0.48.0 — mehrere Kandidaten: nur der zufällig gewählte ist sichtbar. */
.sfp-band[hidden] {
	display: none;
}
.sfp-band {
	position: relative;
	height: 400px;
	margin-top: 40px;
	background: var(--sfp-band) center / cover;
}
.sfp-band::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(3, 17, 24, .9) 0%, rgba(3, 17, 24, .62) 38%, rgba(3, 17, 24, 0) 66%);
}
.sfp-band::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 3;
	border: 87px solid transparent;
	border-image: var(--sfp-box) 87 / 87px stretch;
	pointer-events: none;
}
.sfp-bi {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 40px;
	height: 100%;
	/* bündig mit der linken Kante des Heros */
	padding-left: max(128px, calc((100% - 1580px) / 2 + 64px));
}
/* v0.16.4 — Textspalte; links davon optional das Wappen des Orts. */
.sfp-bt {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	min-width: 0;
}
.sfp .sfp-crest {
	flex: none;
	width: 160px;
	height: 160px;
	object-fit: contain;
}
.sfp-bk {
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
body .sfp .sfp-bi h3 {
	font-size: 56px;
	color: var(--sfp-pc); /* v0.16.4 — primary wie der Produkttitel */
}
.sfp .sfp-bi p {
	max-width: 620px;
	margin: 0;
}
.sfp-bb {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
}

/* ── Unlock ────────────────────────────────────────────────────── */

.sfp-paper {
	position: relative;
	background: var(--sfp-paper) repeat var(--sfp-ow);
	color: var(--sfp-ink);
}
.sfp-in {
	position: relative;
	max-width: 1708px;
	margin: 0 auto;
	padding: 64px 64px 128px; /* v0.17.2 — Inhalt 64 px unter der Oberkante */
}
/* v0.17.2 — Statblock (792) + Liste (470) als zentrierter Block; der Statblock
   ist so hoch wie die Liste (Blatt absolut, blendet unten aus). */
.sfp-un {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 48px;
}
.sfp-mini {
	position: relative;
	flex: none;
	width: 792px;
	min-height: 400px;
	overflow: hidden;
}
.sfp-un:not(.has-items) .sfp-mini {
	height: 640px;
}
.sfp-mini::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: linear-gradient(rgba(243, 235, 218, 0), var(--sfp-ow));
	pointer-events: none;
}
.sfp-sheet-wrap {
	/* Das Compendium-Kopfraster (Name links, Bild rechts) braucht ab
	   1253 px Containerbreite; verkleinert auf die 792er Spalte. */
	position: absolute;
	top: 0;
	left: 0;
	width: 1480px;
	zoom: .535;
}
/* Gesperrt: Kennwerte und Fließtext unscharf (der Text ist ohnehin Platzhalter). */
.sfp-mini.is-locked .im-sb-kv,
.sfp-mini.is-locked .im-sb-cols,
.sfp-mini.is-locked .im-sheet-prose {
	filter: blur(4px);
	user-select: none;
}
.sfp .sfp-sbopen {
	position: absolute;
	left: 50%;
	bottom: 24px;
	z-index: 2;
	transform: translateX(-50%);
	padding: 12px 24px;
	background: var(--sfp-bd);
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-tl);
}
.sfp-items {
	display: flex;
	flex: 0 0 470px;
	flex-direction: column;
	min-width: 0;
}
.sfp-lt {
	margin-bottom: 4px;
}
.sfp-lt.is-odd {
	background: var(--sfp-night);
}
.sfp-lt.is-even {
	background: var(--sfp-bm);
}
.sfp .sfp-ltr {
	display: flex;
	align-items: center;
	width: 100%;
	height: 88px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.sfp-lth {
	position: relative;
	display: grid;
	flex: none;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-right: 12px;
	border: 2px solid var(--sfp-pc);
	background: var(--sfp-paper) #efe4cc;
}
.sfp-lth img {
	width: 52px;
	height: 52px;
	object-fit: contain;
}
.sfp-lth::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 13px solid transparent;
	border-image: var(--sfp-thumb-n) 13 / 13px stretch;
	pointer-events: none;
}
.sfp-lt.is-even .sfp-lth::after {
	border-image-source: var(--sfp-thumb-m);
}
.sfp-lt.is-open .sfp-lth {
	border-color: var(--sfp-sc);
}
.sfp-lti {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}
.sfp-ltt {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .015em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp-lts {
	font-size: 18px;
	font-style: italic;
	line-height: 1.4;
	color: var(--sfp-tl);
}
.sfp-tg {
	position: relative;
	flex: none;
	width: 59px;
	height: 59px;
	margin-left: 12px;
}
.sfp-tg-fill {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--sfp-bm);
	transition: background .2s;
}
.sfp-lt.is-open .sfp-tg-fill,
.sfp-lt:not(.is-open) .sfp-ltr:hover .sfp-tg-fill {
	background: var(--secondary-color, #367588);
}
.sfp-tg-svg {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 59px;
	height: 59px;
	pointer-events: none;
}
.sfp-tg-btn {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sfp-tg-btn i {
	display: inline-block;
	margin: 0 !important;
	font-size: 20px;
	line-height: 1;
	color: var(--sfp-tl);
	transform: rotate(90deg);
	transition: transform .2s;
}
.sfp-lt.is-open .sfp-tg-btn i {
	transform: rotate(-90deg);
}
.sfp-ltb {
	padding: 0 24px 24px 88px;
	font-size: 16px;
	color: var(--sfp-tl);
}
/* v0.17.2 — Wachssiegel AoD. Ein Bild (480 × 2187): oben 526 px Siegel bis
   Bandbeginn, unten 360 px Schwalbenschwanz, die Mitte streckt sich. Das
   Siegel sitzt am Block (50 % + 550 px = Band beginnt kurz vor den Toggles)
   und endet im unteren Drittel der Unlock-Fläche. */
.sfp-rib {
	position: absolute;
	z-index: 6;
	top: 24px;
	bottom: 12%;
	left: calc(50% + 550px);
	display: flex;
	flex-direction: column;
	width: 240px;
	min-height: 720px;
	border-style: solid;
	border-color: transparent;
	border-width: 263px 0 180px;
	border-image: var(--sfp-seal) 526 0 360 0 fill / 263px 0 180px 0 stretch;
	filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45));
	pointer-events: none;
}
.sfp-paper.has-overlap .sfp-rib {
	top: -151px; /* zwei Drittel des Siegels liegen auf „On the Map" */
}
.sfp-r {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 20px 0 24px;
	padding: 0 38px;
	text-align: center;
	color: var(--sfp-ow);
	text-shadow: 0 1px 2px rgba(60, 0, 0, .55);
}
.sfp .sfp-rhd {
	font-family: var(--sfp-head);
	font-size: 38px;
	line-height: 1.08;
}
.sfp-r small {
	display: block;
	margin-top: 22px;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #f6dfa6;
}
.sfp .sfp-rl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.sfp .sfp-rl li {
	position: relative;
	margin: 0;
	padding-left: 18px;
	font-size: 17px;
	line-height: 1.3;
	color: var(--sfp-ow);
}
.sfp .sfp-rl li::before {
	content: "";
	position: absolute;
	top: .42em;
	left: 0;
	width: 7px;
	height: 7px;
	background: #f6dfa6;
	transform: rotate(45deg);
}
.sfp-rib .sfp-btn {
	flex: none;
	margin-top: 24px;
	padding: 0 32px;
	pointer-events: auto;
}

/* ── Tabs, volle Breite, ornament-box-gold ─────────────────────── */

.sfp-pinfo {
	padding: 40px 0 0;
}
.sfp-obg {
	position: relative;
	padding: 96px var(--sfp-side) 112px;
}
.sfp-obg::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 87px solid transparent;
	border-image: var(--sfp-box) 87 / 87px stretch;
	pointer-events: none;
}
.sfp-obg > * {
	position: relative;
	z-index: 1;
}
.sfp-tabs {
	display: flex;
	justify-content: center;
	gap: 48px;
	margin-bottom: 48px;
	border-bottom: 1px solid var(--sfp-dg);
}
.sfp .sfp-tabs button {
	flex: none;
	height: 56px;
	margin-bottom: -1px;
	padding: 0;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	font-family: var(--sfp-body);
	font-size: 16px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sfp-tl);
	cursor: pointer;
}
.sfp .sfp-tabs button.is-on,
.sfp .sfp-tabs button:hover {
	color: var(--sfp-pc);
}
.sfp .sfp-tabs button.is-on {
	border-bottom-color: var(--sfp-pc);
}
.sfp-pcols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 560px;
	align-items: start;
	gap: 80px;
}
.sfp-spec {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr);
	margin: 0;
	border-top: 1px solid var(--sfp-dg);
}
.sfp-spec dt,
.sfp-spec dd {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--sfp-dg);
}
.sfp-spec dt {
	padding-top: 19px;
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp-note {
	margin: 16px 0 0;
	font-size: 16px;
	color: var(--sfp-dim);
}
.sfp-fb {
	position: relative;
	padding: 48px;
}
.sfp-fb::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 64px solid transparent;
	border-image: var(--sfp-box) 87 / 64px stretch;
	pointer-events: none;
}
.sfp-fb > * {
	position: relative;
}
body .sfp .sfp-tbox h3 {
	margin-bottom: 24px;
	font-size: 40px;
	text-align: center;
	color: var(--sfp-tl);
}
.sfp-tb {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sfp-tb div {
	display: flex;
	justify-content: space-between;
	gap: 24px;
}
.sfp-tb span:first-child {
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp-tb-ed {
	padding-top: 8px;
	border-top: 1px solid var(--sfp-dg);
}
.sfp-quote {
	padding: 48px 32px;
	background: var(--sfp-night);
	box-shadow: inset 0 0 0 1px var(--sfp-dg);
	text-align: center;
}
body .sfp .sfp-quote p {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	color: var(--sfp-pc);
}
.sfp-shipt {
	width: 100%;
	border-collapse: collapse;
}
.sfp-shipt th,
.sfp-shipt td {
	padding: 16px 24px 16px 0;
	border: 0;
	border-bottom: 1px solid var(--sfp-dg);
	background: none;
	text-align: left;
}
.sfp-shipt th {
	font-size: 14px;
	font-weight: 300;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-pc);
}
.sfp-shipt .r {
	padding-right: 0;
	text-align: right;
}
.sfp .sfp-rt {
	margin: 0 0 24px;
}
.sfp .sfp-wide {
	width: 100%;
}
.sfp .sfp-rtl {
	display: block;
	margin-top: 16px;
	font-size: 14px;
	letter-spacing: .05em;
	text-align: center;
	text-transform: uppercase;
}
.sfp-rv {
	padding: 24px 0;
	border-bottom: 1px solid var(--sfp-dg);
}
.sfp-rv:first-child {
	padding-top: 0;
}
.sfp-rvm {
	font-size: 14px;
	color: var(--sfp-dim);
}
.sfp-stars {
	display: inline-flex;
	gap: 2px;
}
.sfp-stars svg {
	width: 20px;
	height: 20px;
}
.sfp-stars .f path {
	fill: var(--sfp-pc);
}
.sfp-stars .e path {
	fill: none;
	stroke: var(--sfp-pc);
	stroke-width: 1.5;
}
.sfp-rvs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}
body .sfp .sfp-avg {
	font-size: 80px;
	color: var(--sfp-tl);
}
.sfp-rbs {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 16px 0 24px;
}
.sfp-rb {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 24px;
	align-items: center;
	gap: 12px;
	font-size: 14px;
}
.sfp-rb i {
	height: 8px;
	background: var(--sfp-bm);
	box-shadow: inset 0 0 0 1px var(--sfp-dg);
}
.sfp-rb u {
	display: block;
	height: 100%;
	background: var(--sfp-pc);
}
.sfp-wr {
	width: 100%;
	text-align: left;
}
.sfp-wr summary {
	list-style: none;
	cursor: pointer;
}
.sfp-wr summary::-webkit-details-marker {
	display: none;
}
.sfp-wr form {
	margin-top: 24px;
}

/* ── Pakete: mehrere Statblocks (v0.51.0, PA3a) ─────────────────── */

.sfp-sheets {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 32px;
	width: 792px;
}
.sfp-sheets .sfp-mini {
	width: 100%;
	height: 560px;
}

/* ── Encounter Box: mögliche Ergebnisse (v0.51.0, PA4a, PA5a) ────── */

.sfp-odds {
	max-width: 1310px;
	margin: 0 auto 64px;
}
body .sfp .sfp-odds-h {
	margin-bottom: 8px;
	font-size: 40px;
	text-align: center;
	color: var(--sfp-ink);
}
.sfp .sfp-odds-s {
	max-width: 720px;
	margin: 0 auto 32px;
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
	color: var(--sfp-ink);
}
.sfp-odds-r {
	display: grid;
	grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr) 96px;
	gap: 16px;
	align-items: center;
	min-height: 64px;
	margin-bottom: 4px;
	padding: 0 24px;
	color: var(--sfp-tl);
}
.sfp-odds-r.is-odd {
	background: var(--sfp-night);
}
.sfp-odds-r.is-even {
	background: var(--sfp-bm);
}
.sfp-odds-r.is-head {
	min-height: 40px;
	background: none;
	font-size: 14px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sfp-ink);
}
.sfp-odds-d {
	font-family: var(--sfp-head);
	font-size: 24px;
	color: var(--sfp-pc);
}
.sfp-odds-e {
	font-weight: 500;
}
.sfp-odds-p {
	text-align: right;
	color: var(--sfp-pc);
}

/* ── Fate Card in der Bestellansicht (v0.51.0, PA4a) ───────────────
   Emitter: SF_Encounter_Box::fate_card (woocommerce_order_details_before_order_table). */

.sfp-fate-w {
	margin: 0 0 40px;
}
.sfp-fate {
	position: relative;
	padding: 40px 48px;
	border: 2px solid var(--sfp-pc);
	background: var(--sfp-bd);
	color: var(--sfp-tl);
}
.sfp .sfp-fate-k {
	margin: 0 0 8px;
	font-size: 14px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sfp-sc);
}
body .sfp .sfp-fate-h {
	margin-bottom: 32px;
	font-size: 44px;
	color: var(--sfp-pc);
}
.sfp-fate-l {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.sfp-fate-r {
	display: flex;
	gap: 32px;
	align-items: center;
}
.sfp-die {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	background: var(--sfp-sc);
	clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	color: var(--sfp-ow);
	animation: sfp-roll 1.4s cubic-bezier(.2, .8, .2, 1) calc(var(--sfp-i, 0) * .4s) both;
}
.sfp-die-f {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .8;
}
.sfp-die b {
	font-family: var(--sfp-head);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
}
.sfp-fate-t {
	min-width: 0;
	animation: sfp-fade .6s ease calc(var(--sfp-i, 0) * .4s + 1.1s) both;
}
.sfp .sfp-fate-s {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	color: var(--sfp-dim);
}
body .sfp .sfp-fate-e {
	margin-bottom: 8px;
	font-size: 30px;
	color: var(--sfp-ow);
}
.sfp .sfp-fate-f {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sfp .sfp-fate-f li {
	font-size: 18px;
	line-height: 1.6;
}
.sfp .sfp-fate-p {
	margin: 32px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sfp-dim);
}
@keyframes sfp-roll {
	0% {
		transform: rotate(-720deg) scale(.3);
		opacity: 0;
	}
	70% {
		transform: rotate(20deg) scale(1.08);
		opacity: 1;
	}
	100% {
		transform: rotate(0) scale(1);
	}
}
@keyframes sfp-fade {
	from {
		transform: translateY(8px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
@media (prefers-reduced-motion: reduce) {
	.sfp-die,
	.sfp-fate-t {
		animation: none;
	}
}
@container (max-width: 1400px) {
	.sfp-sheets {
		flex: 1 1 100%;
		width: auto;
	}
}
@container (max-width: 1100px) {
	.sfp-sheets {
		width: 100%;
	}
	.sfp-sheets .sfp-mini {
		height: 720px;
	}
}
@container (max-width: 700px) {
	.sfp-odds-r {
		grid-template-columns: 56px minmax(0, 1fr) 64px;
		row-gap: 4px;
		padding: 12px 16px;
	}
	.sfp-odds-r > :nth-child(3) {
		grid-column: 2;
		grid-row: 2;
	}
	.sfp-odds-r > :nth-child(4) {
		grid-column: 3;
		grid-row: 1;
	}
	.sfp-odds-r.is-head > :nth-child(3) {
		display: none;
	}
	body .sfp .sfp-odds-h {
		font-size: 30px;
	}
	.sfp-fate {
		padding: 32px 24px;
	}
	.sfp-fate-r {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	body .sfp .sfp-fate-h {
		font-size: 32px;
	}
}

/* ── Pakete: Inhalt, Ersparnis, Release (v0.52.0, PK1a–PK5a) ────────
   Emitter: SF_Product_Page::contents_inner, card_html, release_html.
   Die Teilkarten tragen die Klassen der Shop-Karte (archive.css, .sfa-card). */

.sfp-cont {
	max-width: 1580px;
	margin: 0 auto;
	padding: 96px 0 32px;
}
.sfp-cont-in {
	padding: 0 var(--sfp-side, 64px);
}
.sfp .sfp-cont-k {
	margin: 0 0 8px;
	font-size: 14px;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	color: var(--sfp-sc);
}
body .sfp .sfp-cont-h {
	font-size: 56px;
	text-align: center;
	color: var(--sfp-pc);
}
.sfp .sfp-cont-s {
	max-width: 760px;
	margin: 16px auto 56px;
	font-size: 18px;
	line-height: 1.6;
	text-align: center;
	color: var(--sfp-tl);
}
.sfp .sfp-cont-s .amount {
	color: var(--sfp-pc);
}
.sfp .sfa-grid.sfp-cont-g {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.sfp .sfp-cont-g .sfa-tt {
	font-size: 26px;
}
.sfp-part.is-only .sfa-im::after {
	border-image-source: var(--sfp-thumb-n);
}
.sfp .sfp-only {
	font-size: 16px;
	font-style: italic;
	letter-spacing: .02em;
	color: var(--sfp-dim);
}
.sfp-cf {
	display: grid;
	grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
	margin-bottom: 72px;
}
.sfp-cf-t .sfp-cont-k {
	text-align: left;
}
body .sfp .sfp-cf-n {
	margin-bottom: 16px;
	font-size: 48px;
	color: var(--sfp-pc);
}
.sfp-cf-t .sfa-pr {
	margin: 24px 0;
}
.sfp .sfp-sum {
	margin-right: 16px;
	font-size: 32px;
	color: var(--sfp-dim);
}
.sfp .sfp-save {
	display: inline-block;
	margin-left: 20px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: .08em;
	vertical-align: middle;
	text-transform: uppercase;
	color: var(--sfp-sc);
}
.sfp-rel {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--sfp-dg);
}
.sfp .sfp-rel p {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--sfp-tl);
}
.sfp .sfp-rel a {
	margin-left: 6px;
	color: var(--sfp-pc);
	text-decoration: underline;
}
.sfp .sfp-rel a:hover {
	color: var(--sfp-sc);
}
@container (max-width: 1400px) {
	.sfp .sfa-grid.sfp-cont-g {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@container (max-width: 1100px) {
	.sfp .sfa-grid.sfp-cont-g {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sfp-cf {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
	body .sfp .sfp-cont-h {
		font-size: 44px;
	}
}
@container (max-width: 700px) {
	.sfp-cont {
		padding-top: 64px;
	}
	.sfp-cont-in {
		padding: 0 16px;
	}
	.sfp .sfa-grid.sfp-cont-g {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.sfp .sfp-cont-g .sfa-tt {
		font-size: 20px;
	}
	.sfp .sfp-cont-g .sfa-pr {
		font-size: 20px;
	}
	body .sfp .sfp-cont-h {
		font-size: 36px;
	}
	body .sfp .sfp-cf-n {
		font-size: 34px;
	}
	.sfp .sfp-save {
		display: block;
		margin: 12px 0 0;
	}
}

/* ── Breakpoints ───────────────────────────────────────────────── */

@container (max-width: 1720px) {
	.sfp-hero { padding: 0 64px; }
	/* v0.17.2 — Block + Siegel passen nicht mehr zentriert: Block links, Siegel rechts am Rand. */
	.sfp-un { justify-content: flex-start; padding-right: 200px; }
	.sfp-items { flex: 1 1 0; }
	.sfp-rib { left: auto; right: 40px; }
}
@container (max-width: 1400px) {
	.sfp-hero { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); column-gap: 48px; }
	.sfp-un { flex-wrap: wrap; }
	.sfp-items { flex: 1 1 360px; }
	.sfp-mini { flex: 1 1 100%; width: auto; height: 640px; }
	.sfp-pcols { grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; }
}
@container (max-width: 1100px) {
	.sfp-hero { grid-template-columns: minmax(0, 1fr); }
	.sfp-fsu { grid-column: 1; }
	.sfp-un { flex-direction: column; gap: 48px; padding-right: 0; }
	.sfp-mini { flex: none; width: 100%; height: 720px; }
	.sfp-sheet-wrap { width: auto; zoom: 1; }
	.sfp-items { flex: none; width: 100%; }
	.sfp-rib,
	.sfp-paper.has-overlap .sfp-rib { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 200px; min-height: 0; margin: 48px auto 0; border-width: 219px 0 150px; border-image-width: 219px 0 150px 0; }
	.sfp-r { margin: 10px 0 4px; padding: 0 32px; }
	.sfp .sfp-rhd { font-size: 30px; }
	.sfp-pcols { grid-template-columns: minmax(0, 1fr); }
	.sfp-tabs { justify-content: flex-start; gap: 32px; overflow-x: auto; }
	.sfp-bi { padding-left: 96px; }
}
@container (max-width: 700px) {
	.sfp-hero { padding: 0 16px; }
	.sfp-gal { flex-direction: column-reverse; gap: 12px; }
	.sfp-thumbs { flex-direction: row; gap: 12px; padding: 0; }
	.sfp .sfp-th { flex: 1; width: auto; height: auto; aspect-ratio: 1; }
	.sfp-pi { width: 100%; max-width: none; }
	.sfp-card { padding: 32px 24px; }
	.sfp-card::before { border-width: 48px; border-image-width: 48px; }
	.sfp .sfp-ticon { width: 48px; height: 48px; }
	.sfp .sfp-incl { grid-template-columns: minmax(0, 1fr); }
	.sfp-p { font-size: 48px; }
	.sfp-band { height: 480px; margin-top: 64px; }
	.sfp-band::before { inset: 6px; border-width: 48px; border-image-width: 48px; }
	.sfp-band::after { background: linear-gradient(0deg, rgba(3, 17, 24, .92) 0%, rgba(3, 17, 24, .6) 55%, rgba(3, 17, 24, .1) 100%); }
	.sfp-bi { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px; padding: 0 32px 56px; }
	.sfp .sfp-crest { width: 96px; height: 96px; }
	body .sfp .sfp-bi h3 { font-size: 36px; }
	.sfp-in { padding: 40px 16px 64px; }
	.sfp-obg { padding: 48px 24px 56px; }
	.sfp-obg::before { inset: 6px; border-width: 48px; border-image-width: 48px; }
	.sfp-spec { grid-template-columns: minmax(0, 1fr); }
	.sfp-spec dt { padding: 16px 0 0; border-bottom: 0; }
	.sfp-spec dd { padding: 4px 0 16px; }
}