/**
 * ForSec Designsystem – Child-Theme-Styles.
 *
 * Quelle: freigegebene Beispielseiten (Material/Beispielseiten).
 * Farb-/Typo-Grundwerte kommen zusätzlich über den YOOtheme-Style
 * (ForSec_Style_YooTheme.json); dieses CSS liefert die markanten
 * Komponenten, die das Style-System nicht abdeckt.
 */

/* ---------- Schrift: Inter (selbst gehostet, DSGVO-konform) ---------- */

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable-Italic.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ---------- Design-Tokens ---------- */

:root {
	--fhs-accent: #d33a26;
	--fhs-accent-hover: #b22e1d;
	--fhs-text: #1a1a1a;
	--fhs-emphasis: #0d0d0d;
	--fhs-muted: #6b7280;
	--fhs-border: #e6e5e2;
	--fhs-bg: #ffffff;
	--fhs-bg-warm: #f3f1ea;
	--fhs-bg-dark: #0d0d0d;
	--fhs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fhs-spring: cubic-bezier(0.34, 1.32, 0.4, 1);
	--fhs-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
	--fhs-radius: 8px;
	--fhs-radius-pill: 999px;

	/* Token-Brücke: wird u. a. vom ForSec-Products-Plugin gelesen. */
	--uk-global-primary-background: var(--fhs-accent);
	--uk-global-secondary-background: var(--fhs-bg-dark);
	--uk-global-muted-background: var(--fhs-bg-warm);
	--uk-global-border: var(--fhs-border);
	--uk-global-link-color: var(--fhs-accent);
	--uk-global-inverse-color: #ffffff;
	--uk-global-margin: 24px;
	--uk-card-border-radius: var(--fhs-radius);
	--uk-card-color: var(--fhs-text);
}

/* ---------- Basis + Fallback-Ebene ----------
   Deckt die Kernwerte auch dann ab, wenn der YOOtheme-Style-Import
   (ForSec_Style_YooTheme.json) nicht angewendet wurde.
   Wichtig: YOOtheme druckt seine kompilierte theme.css NACH diesem
   Stylesheet – alle Selektoren, die mit Theme-Selektoren konkurrieren,
   sind deshalb mit `html`/`:root` minimal höher spezifiziert. */

html:root,
html:root body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

html:root body {
	color: var(--fhs-text);
	background: var(--fhs-bg);
	font-size: 16px;
	line-height: 1.6;
}

/* Bewusst KEINE globale Link-Färbung in Akzentrot: Rot ist der primäre
   Farbakzent und bleibt Buttons, Eyebrows und einzelnen CTA-Zeilen
   vorbehalten. Ganze Karten sind Links – eine globale a-Regel würde
   sie komplett rot färben. */

html h1, html h2, html h3, html h4, html h5, html h6,
html .uk-h1, html .uk-h2, html .uk-h3, html .uk-h4, html .uk-h5, html .uk-h6,
html .uk-card-title {
	/* Auch Karten-Titel: Fuse liefert hier sonst Playfair Display (Serife). */
	font-family: inherit;
	color: var(--fhs-emphasis);
}

.uk-text-muted {
	color: var(--fhs-muted) !important;
}

.uk-section-muted:not(.uk-preserve-color) {
	background: var(--fhs-bg-warm);
}

.uk-section-primary:not(.uk-preserve-color) {
	background: var(--fhs-accent);
}

.uk-section-secondary:not(.uk-preserve-color) {
	background: var(--fhs-bg-dark);
}

.uk-section-secondary:not(.uk-preserve-color) h1,
.uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) h3,
.uk-section-secondary:not(.uk-preserve-color) .uk-h1,
.uk-section-secondary:not(.uk-preserve-color) .uk-h2,
.uk-section-secondary:not(.uk-preserve-color) .uk-h3 {
	color: #fff;
}

.uk-section-secondary:not(.uk-preserve-color) p,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-lead {
	color: rgba(236, 236, 236, 0.72);
}

::selection {
	background: var(--fhs-accent);
	color: #fff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--fhs-accent);
	outline-offset: 2px;
}

/* Headline-Sprache der Beispielseiten: Versalien, 800, enge Zurichtung. */

html h1,
html h2,
html .uk-h1,
html .uk-h2,
html .uk-heading-small,
html .uk-heading-medium,
html .uk-heading-large {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.06;
}

html h3,
html .uk-h3 {
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* Eyebrow-Label (im Builder als Klasse auf Text-Elemente legen). */

.fhs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fhs-accent);
}

.fhs-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--fhs-accent);
}

/* ---------- Buttons: Pill-Form mit rotem Glow ---------- */

html .uk-button {
	border-radius: var(--fhs-radius-pill);
	font-weight: 600;
	text-transform: none;
	letter-spacing: -0.005em;
	transition: transform 0.3s var(--fhs-spring), background-color 0.25s var(--fhs-ease), box-shadow 0.3s var(--fhs-ease), color 0.25s var(--fhs-ease), border-color 0.25s var(--fhs-ease);
}

html .uk-button-primary {
	background-color: var(--fhs-accent);
	color: #fff;
	box-shadow: 0 16px 34px -14px rgba(211, 58, 38, 0.75);
}

html .uk-button-primary:hover,
html .uk-button-primary:focus-visible {
	background-color: var(--fhs-accent-hover);
	color: #fff;
	transform: translateY(-3px);
}

html .uk-button-default {
	border: 1px solid var(--fhs-border);
	background: transparent;
	color: var(--fhs-text);
}

html .uk-button-default:hover,
html .uk-button-default:focus-visible {
	border-color: var(--fhs-text);
	color: var(--fhs-text);
	transform: translateY(-2px);
}

/* Ghost-Variante auf dunklen Sektionen. */

.uk-section-secondary .uk-button-default,
.uk-card-secondary .uk-button-default,
.fhs-dark-shell .uk-button-default {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.uk-section-secondary .uk-button-default:hover,
.fhs-dark-shell .uk-button-default:hover {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

/* ---------- Karten ---------- */

html .uk-card-default {
	border: 1px solid var(--fhs-border);
	border-radius: var(--fhs-radius);
	box-shadow: none;
	color: var(--fhs-text);
	transition: transform 0.3s var(--fhs-ease), box-shadow 0.3s var(--fhs-ease), border-color 0.3s var(--fhs-ease);
}

.uk-card-default.uk-card-hover:hover,
.fsp-card:hover {
	border-color: rgba(13, 13, 13, 0.18);
	box-shadow: 0 24px 48px -24px rgba(13, 13, 13, 0.25);
}

/* ---------- Navi 2026: Knöpfe in der Pill, Mega-Dropdowns, Footer ---------- */

/* ---------- Kopf: schwebende dunkle Kapsel wie bei den SCHWEISS-PROFIS ---------- */

:root {
	--fs-nav-h: 64px;
	--fs-nav-top: 12px;
}

.fhs-has-utilbar {
	--fs-nav-top: 50px;
}

html .tm-header,
html .tm-header-mobile {
	position: fixed;
	top: var(--fs-nav-top);
	left: 50%;
	z-index: 980;
	width: min(calc(100% - 32px), 1120px);
	transform: translateX(-50%);
}

html .tm-header .uk-navbar-container.uk-navbar-container,
html .tm-header-mobile .uk-navbar-container.uk-navbar-container {
	box-sizing: border-box;
	height: var(--fs-nav-h);
	padding: 0 14px 0 28px;
	border: 0;
	border-radius: 999px;
	background: rgba(22, 23, 26, 0.78);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	backdrop-filter: blur(22px) saturate(150%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.22);
	color: #fff;
}

html .tm-header .uk-container,
html .tm-header-mobile .uk-container {
	max-width: none;
	padding-inline: 0;
}

html .tm-header :is(.uk-navbar, .uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle),
html .tm-header-mobile :is(.uk-navbar, .uk-navbar-item, .uk-navbar-toggle) {
	min-height: var(--fs-nav-h);
}

html .tm-header .uk-logo img,
html .tm-header-mobile .uk-logo img {
	width: auto;
	height: 28px;
}

html .tm-header .uk-navbar-nav {
	gap: 0;
}

html .tm-header .uk-navbar-nav > li > a {
	padding-inline: 14px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	transition: color 0.2s ease;
}

html .tm-header .uk-navbar-nav > li > a::before,
html .tm-header .uk-navbar-nav > li > a::after {
	display: none;
}

html .tm-header .uk-navbar-nav > li:not(.fs-cta) > a:hover,
html .tm-header .uk-navbar-nav > li:not(.fs-cta) > a:focus-visible,
html .tm-header .uk-navbar-nav > li:not(.fs-cta) > a[aria-expanded="true"],
html .tm-header .uk-navbar-nav > li.uk-active:not(.fs-cta) > a {
	color: var(--fhs-accent);
}

html .tm-header .uk-navbar-nav > li.fs-cta {
	margin-left: 10px;
}

html .tm-header .uk-navbar-nav > li.fs-cta > a {
	height: 38px;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	min-height: 0;
	margin-block: calc((var(--fs-nav-h) - 38px) / 2);
	padding-inline: 18px;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: #0d0d0d;
	transition: background-color 0.25s ease, color 0.25s ease;
}

html .tm-header .uk-navbar-nav > li.fs-cta > a:hover,
html .tm-header .uk-navbar-nav > li.fs-cta > a:focus-visible {
	color: #0d0d0d;
}

/* Knöpfe mit Pfeil: der Kreis rechts wächst über den ganzen Knopf, der Pfeil fährt durch */

a.fs-pfeil {
	--fs-h: 50px;
	--fs-k: calc(var(--fs-h) - 8px);
	--fs-fill: #fff;
	--fs-fill-ink: #0d0d0d;
	--fs-pfeil: var(--fhs-accent);
	--fs-zeit: 0.45s cubic-bezier(0.785, 0.135, 0.15, 0.86);
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--fs-h);
	overflow: hidden;
	isolation: isolate;
	padding: 0 calc(var(--fs-k) + 18px) 0 24px;
	white-space: nowrap;
}

.fs-pfeil.fs-pfeil--rot {
	--fs-fill: var(--fhs-accent);
	--fs-fill-ink: #fff;
	--fs-pfeil: #fff;
}

.fs-pfeil.fs-pfeil--dunkel {
	--fs-pfeil: #0d0d0d;
}

a.fs-pfeil.fs-pfeil--rot.uk-button-default,
a.fs-pfeil.fs-pfeil--rot.uk-button-default:hover,
a.fs-pfeil.fs-pfeil--rot.uk-button-default:focus-visible {
	border: 0;
	background: #fff;
	color: #0d0d0d;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}

html .tm-header .uk-navbar-nav > li.fs-cta > a.fs-pfeil {
	--fs-h: 40px;
	height: var(--fs-h);
	margin-block: calc((var(--fs-nav-h) - var(--fs-h)) / 2);
	padding: 0 calc(var(--fs-k) + 14px) 0 18px;
}

.fs-pfeil__kreis,
.fs-pfeil__maske {
	position: absolute;
	pointer-events: none;
	z-index: 2;
}

.fs-pfeil__kreis {
	inset: 4px 4px 4px calc(100% - 4px - var(--fs-k));
	border-radius: 999px;
	background: var(--fs-fill);
	transition: inset var(--fs-zeit);
}

.fs-pfeil__maske {
	inset: 0;
	display: flex;
	align-items: center;
	padding: inherit;
	color: var(--fs-fill-ink);
	clip-path: inset(4px 4px 4px calc(100% - 4px - var(--fs-k)) round 999px);
	transition: clip-path var(--fs-zeit);
}

.fs-pfeil__icon {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 3;
	width: var(--fs-k);
	height: var(--fs-k);
	overflow: hidden;
	border-radius: 999px;
	color: var(--fs-pfeil);
	pointer-events: none;
}

.fs-pfeil__icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	transition: transform var(--fs-zeit);
}

.fs-pfeil__icon svg:first-child {
	transform: translate(-170%, -50%) scale(0);
}

.fs-pfeil__icon svg:last-child {
	transform: translate(-50%, -50%) scale(1);
}

.fs-pfeil:is(:hover, :focus-visible) .fs-pfeil__kreis {
	inset: 0;
}

.fs-pfeil:is(:hover, :focus-visible) .fs-pfeil__maske {
	clip-path: inset(0 0 0 0 round 999px);
}

.fs-pfeil:is(:hover, :focus-visible) .fs-pfeil__icon svg:first-child {
	transform: translate(-50%, -50%) scale(1);
}

.fs-pfeil:is(:hover, :focus-visible) .fs-pfeil__icon svg:last-child {
	transform: translate(70%, -50%) scale(0);
}

@media (prefers-reduced-motion: reduce) {
	.fs-pfeil__kreis,
	.fs-pfeil__maske,
	.fs-pfeil__icon svg {
		transition: none;
	}
}

html .tm-header .uk-navbar-dropdown {
	padding: 28px;
	border: 0;
	border-radius: 18px;
	background: #16171a;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
	color: rgba(236, 236, 236, 0.75);
}

html .tm-header .uk-navbar-dropdown .uk-nav > li > a {
	padding: 7px 0;
	color: #cfd2d6;
}

html .tm-header .uk-navbar-dropdown .uk-nav > li > a:hover {
	color: #fff;
}

html .tm-header-mobile .uk-navbar-toggle {
	color: #fff;
}

html .tm-header .fs-megamenu li > a {
	padding: 7px 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.78);
}

html .tm-header .fs-megamenu li > a:hover {
	color: #fff;
}

html .tm-header .fs-megakarte {
	padding-left: 32px;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(236, 236, 236, 0.75);
}

html footer .fs-fussnav li > a {
	padding: 5px 0;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(236, 236, 236, 0.7);
}

html footer .fs-fussnav li > a:hover {
	color: #fff;
}

html footer .fs-fuss .uk-text-meta {
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
	color: rgba(236, 236, 236, 0.55);
}

html footer .fs-fuss-unten {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html footer .fs-fusskarte .uk-button-default {
	background: #fff;
	border-color: #fff;
	color: #0d0d0d;
}

html footer .fs-fusskarte .uk-button-default:hover {
	background: #0d0d0d;
	border-color: #0d0d0d;
	color: #fff;
}

#tm-dialog-mobile .fs-cta > a {
	display: inline-flex;
	margin-top: 12px;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--fhs-accent);
	color: #fff;
}

#tm-dialog-mobile .fs-cta--zweit > a {
	background: rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* ---------- Utility-Bar (fix, 38px, Breadcrumbs + Uppercase-Links) ---------- */

.fhs-utilbar {
	position: sticky;
	top: 0;
	z-index: 100;
	height: 38px;
	background: #fff;
	border-bottom: 1px solid var(--fhs-border);
	transition: background-color 0.35s var(--fhs-ease);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fhs-utilbar.is-past-hero {
	background: #f2f2f4;
}

html .fhs-dark-shell .fhs-utilbar,
html .fhs-dark-shell .fhs-utilbar.is-past-hero {
	background: #0d0d0d;
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

html .fhs-dark-shell .fhs-utilbar__inner,
html .fhs-dark-shell .fhs-utilbar__crumbs,
html .fhs-dark-shell .fhs-utilbar__crumbs a {
	color: rgba(236, 236, 236, 0.55);
}

html .fhs-dark-shell .fhs-utilbar__crumbs a:hover {
	color: #fff;
}

.fhs-utilbar__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: var(--fhs-text);
}

.fhs-utilbar__crumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fhs-muted);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fhs-utilbar__crumbs a {
	color: var(--fhs-muted);
	text-decoration: none;
	transition: color 0.2s var(--fhs-ease);
}

.fhs-utilbar__crumbs a:hover {
	color: var(--fhs-text);
}

.fhs-utilbar__crumbsep {
	opacity: 0.45;
}

.fhs-utilbar__right {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	flex-shrink: 0;
}

.fhs-utilbar__right a {
	color: var(--fhs-text);
	text-decoration: none;
	transition: color 0.2s var(--fhs-ease);
}

.fhs-utilbar__right a:hover {
	color: var(--fhs-accent);
}

@media (max-width: 639px) {
	.fhs-utilbar__right {
		display: none;
	}
}

/* Die Utility-Bar übernimmt die Breadcrumbs – die des Plugins ausblenden. */

.fhs-has-utilbar .fsp-breadcrumbs {
	display: none;
}

/* Logo auf die negative (helle) Variante umschalten. */

html .tm-header .uk-logo img:not(.uk-logo-inverse),
html .tm-header-mobile .uk-logo img:not(.uk-logo-inverse) {
	display: none;
}

html .tm-header .uk-logo img.uk-logo-inverse,
html .tm-header-mobile .uk-logo img.uk-logo-inverse {
	display: inline-block;
}

/* Helle Icons für einen etwaigen mobilen Menü-Toggle. */

html .tm-header-mobile .uk-navbar-toggle {
	color: rgba(255, 255, 255, 0.85);
}

/* --- Inhalt unter dem schwebenden Header freistellen --- */

/* /produkte/ (kein Hero): Sektion bekommt oben Luft für die Navbar. */

html body.fhs-dark-shell.post-type-archive-forsec_product .tm-main.uk-section-default {
	padding-top: 124px;
}

/* Sicherheitsnetz für weitere Dark-Shell-Seiten ohne Hero (z. B. Serien-/Norm-Archive). */

html body.fhs-dark-shell .tm-main.uk-section-default:not(:has(.fsp-cathero)):not(:has(.fsp-prodx)) {
	padding-top: 124px;
}

/* Kategorieseiten: Hero läuft hinter die Navbar, dafür etwas mehr Höhe. */

html body.fhs-dark-shell .fsp-cathero {
	height: clamp(310px, 44vh, 470px);
}

/* Produktdetail: Bildbühne läuft bis oben unter die Navbar, nur Text und Freisteller rücken nach unten. */

html body.fhs-dark-shell .fsp-prodx__hero {
	--fsp-kopf: 112px;
	padding-top: 0;
	background: var(--fhs-bg-dark, #0d0d0d);
}

html body.fhs-dark-shell .fsp-prodx__info {
	padding-top: calc(var(--fsp-kopf) + 24px);
}

html body.fhs-dark-shell .fsp-prodx__stage-col {
	padding-top: calc(var(--fsp-kopf) + 24px);
}

@media (min-width: 960px) {
	html body.fhs-dark-shell.post-type-archive-forsec_product .tm-main.uk-section-default,
	html body.fhs-dark-shell .tm-main.uk-section-default:not(:has(.fsp-cathero)):not(:has(.fsp-prodx)) {
		padding-top: 154px;
	}

	html body.fhs-dark-shell .fsp-prodx__hero {
		--fsp-kopf: 132px;
	}
}

/* ---------- Container: 1320px + großzügigeres Padding (wie Beispielseiten) ---------- */

.uk-container:not(.uk-container-xsmall):not(.uk-container-small):not(.uk-container-large):not(.uk-container-xlarge):not(.uk-container-expand) {
	max-width: 1320px;
	padding-left: clamp(15px, 4vw, 32px);
	padding-right: clamp(15px, 4vw, 32px);
}

/* ---------- Dunkle Produktübersichten (Beispiel „Übersicht dunkel“) ---------- */

body.fhs-dark-shell {
	background: var(--fhs-bg-dark);
}

/* Das Theme legt den Inhalt in eine weiße Default-Sektion (tm-main) –
   auf Dark-Shell-Seiten muss diese Fläche dunkel sein. */

.fhs-dark-shell .tm-main.uk-section-default:not(.uk-preserve-color) {
	background: var(--fhs-bg-dark);
	--uk-inverse: light;
}

.fhs-dark-shell .fsp-archive {
	color: rgba(236, 236, 236, 0.82);
}

.fhs-dark-shell .fsp-archive__title,
.fhs-dark-shell .fsp-archive__section-title {
	color: #fff;
}

.fhs-dark-shell .fsp-archive__description {
	color: rgba(236, 236, 236, 0.66);
}

.fhs-dark-shell .fsp-chip {
	border-color: rgba(255, 255, 255, 0.24);
	color: rgba(236, 236, 236, 0.85);
}

.fhs-dark-shell .fsp-chip:hover,
.fhs-dark-shell .fsp-chip:focus {
	border-color: var(--fhs-accent);
	color: #fff;
}

.fhs-dark-shell .fsp-chip.is-active {
	border-color: var(--fhs-accent);
	background: rgba(211, 58, 38, 0.22);
	color: #fff;
	font-weight: 600;
}

/* Farb-Swatch-Ring: Lücke in Seitenhintergrundfarbe. */
.fhs-dark-shell .fsp-filter {
	--fsp-ring-gap: var(--fhs-bg-dark);
}

.fhs-dark-shell .fsp-archive__section-link {
	color: rgba(236, 236, 236, 0.85);
}

.fhs-dark-shell .fsp-card {
	border-color: transparent;
}

.fhs-dark-shell .uk-pagination a,
.fhs-dark-shell .uk-pagination span {
	color: rgba(236, 236, 236, 0.75);
}

/* ---------- Motion ---------- */

.fhs-rv {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--fhs-ease), transform 0.8s var(--fhs-ease);
}

.fhs-rv.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fhs-rv {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.uk-button,
	.uk-card-default,
	.fsp-card {
		transition: none;
	}

	.uk-button-primary:hover {
		transform: none;
	}
}