/*
Theme Name: Falken Pizza
Description: A custom block theme.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.3.22
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: falken-pizza
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* === Custom Properties === */
:root {
	--fp-bg:           #0D0D0D;
	--fp-surface:      #191919;
	--fp-surface-lt:   #222222;
	--fp-primary:      #FFC107;
	--fp-primary-h:    #E0A800;
	--fp-red:          #E62E2D;
	--fp-ink:          #FFFFFF;
	--fp-ink-muted:    #999999;
	--fp-border:       rgba(255,255,255,0.10);
	--fp-shadow-b:     4px 4px 0px rgba(0,0,0,0.5);
	--fp-shadow-lg:    6px 6px 0px rgba(0,0,0,0.5);
	--fp-shadow-xl:    8px 8px 0px #0D0D0D;
	--fp-shadow-red:   4px 4px 0px #E62E2D;
	--fp-radius:       6px;
	--fp-max-w:        1400px;
	--fp-content-w:    1200px;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

body {
	background-color: var(--fp-bg);
	color: var(--fp-ink);
	font-family: var(--wp--preset--font-family--sans, 'Outfit', sans-serif);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	margin: 0;
	overflow-x: hidden; /* prevent horizontal scroll from badge overflow */
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--fp-primary); color: #000; }

/* === Scrollbar === */
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: var(--fp-bg); }
body::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background: var(--fp-primary); }

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--heading, 'Anton', sans-serif);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--fp-ink);
	margin-top: 0;
}

.fp-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem; /* React: space-x-2 = 8px (dot gap) */
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; /* React hero eyebrow: text-xs = 12px */
	line-height: 1rem; /* React: text-xs lh = 16px → badge height 32px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em; /* React: tracking-widest = 0.1em (was 0.3em → over-spaced) */
	padding: 0.5rem 1rem; /* React: px-4 py-2 = 8px 16px */
	border-radius: 4px; /* React: rounded = 4px */
}

.fp-label--red   { background: var(--fp-red);     color: #fff; transform: skewX(-6deg); }
/* React: outer box skewed -6deg, inner text counter-skewed +6deg so the text reads straight */
.fp-label--red .fp-label__txt { display: inline-block; transform: skewX(6deg); }
.fp-label--amber { background: var(--fp-primary);  color: #000; }
.fp-label--pulse::before {
	content: '';
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #fff;
	animation: fp-pulse 2s ease-in-out infinite;
}

.fp-text-primary { color: var(--fp-primary); }
.fp-text-red     { color: var(--fp-red); }
.fp-text-muted   { color: var(--fp-ink-muted); }

/* === Focus / A11y === */
*:focus-visible {
	outline: 2px solid var(--fp-primary);
	outline-offset: 3px;
}

.screen-reader-text {
	clip: rect(1px,1px,1px,1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.skip-link {
	position: absolute;
	top: -60px;
	left: 1rem;
	padding: 0.75rem 1.5rem;
	background: var(--fp-primary);
	color: #000;
	font-weight: 700;
	z-index: 9999;
	transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* === Header === */
.fp-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9000;
	transition: background 0.3s ease, padding 0.3s ease, border-color 0.3s ease,
	            box-shadow 0.3s ease;
	border-bottom: 2px solid transparent;
	/* React: py-4 default, sm:py-6 = 24px. At lg:h-20=80px logo + 2×24px = 128px */
	padding: 1.5rem 0 !important; /* 24px = sm:py-6 — !important defeats any Gutenberg inline group padding */
}

.fp-header.is-scrolled {
	background: var(--fp-surface);
	border-color: var(--fp-border);
	box-shadow: 0 10px 30px rgba(0,0,0,0.8);
	/* React scrolled: bg-surface py-3 = 12px */
	padding: 0.75rem 0 !important; /* py-3 = 12px */
}

.fp-header__inner {
	/* React: max-w-7xl = 1280px, px-4 sm:px-6 lg:px-8 */
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 2rem; /* lg:px-8 = 32px */
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 1.5rem; /* React: space-x-6 between icon group and phone */
	width: 100%;
}

/* ── Desktop optische Zentrierung (≥1366px, wo der Inhalt sicher reinpasst): die KOMPLETTE sichtbare
   Header-Gruppe (Falken-Logo … Telefonbutton) wird als Ganzes mittig gestellt. width:fit-content
   schrumpft den Container exakt auf seine Inhaltsbreite, margin-inline:auto zentriert ihn → die ganze
   Gruppe rückt als Block in die Mitte. Interne Abstände/Gaps bleiben unverändert (space-between hat
   keinen Freiraum mehr → No-Op). KEINE Größen, KEINE Umverteilung. Unter 1366px Fallback (bestehend). ── */
@media (min-width: 1366px) {
	.fp-header__inner { width: fit-content; max-width: none; }
}

.fp-header__logo img {
	/* React: h-14 sm:h-16 lg:h-20 = 80px. At desktop (lg) = 80px */
	height: 5rem; /* 80px = lg:h-20 */
	width: auto;
	max-width: 260px;
	object-fit: contain;
	transition: opacity 0.2s;
	filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55));
}
.fp-header__logo:hover img { opacity: 0.9; }

/* React: h-14=56px default, sm:h-16=64px, lg:h-20=80px */
@media (max-width: 1023px) {
	.fp-header__logo img { height: 4rem; max-width: 210px; } /* sm:h-16 = 64px */
}
@media (max-width: 639px) {
	.fp-header__logo img { height: 3.5rem; max-width: 170px; } /* h-14 = 56px */
}

.fp-header__nav {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	background: var(--fp-surface);
	padding: 0.875rem 2.5rem;
	border-radius: 4px; /* React: rounded = 4px (Tailwind default) */
	border: 2px solid var(--fp-border);
	box-shadow: var(--fp-shadow-b);
	/* Keep nav compact, do not let WP stretch it */
	flex: 0 1 auto !important;
	width: auto !important;
	max-width: fit-content !important;
}

/* Override WP navigation inner list inheriting fp-header__nav styles */
.fp-header__nav .wp-block-navigation__container {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.fp-header__nav .wp-block-pages-list__item__link,
.fp-header__nav .wp-block-navigation-item__content {
	color: rgba(255,255,255,0.6);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; /* text-xs = 12px */
	font-weight: 700;
	letter-spacing: 0.1em; /* React: tracking-widest = 0.1em */
	text-transform: uppercase;
	transition: color 0.2s;
	padding: 0 !important;
	white-space: nowrap;
}
.fp-header__nav .wp-block-pages-list__item__link:hover,
.fp-header__nav .wp-block-navigation-item__content:hover,
.fp-header__nav .wp-block-pages-list__item.current-menu-item .wp-block-pages-list__item__link { color: var(--fp-primary); }

.fp-header__nav a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; /* text-xs = 12px */
	line-height: 1rem; /* React: text-xs lh=16px → nav pill 48px (was inheriting body 1.6 → 51px) */
	font-weight: 700;
	letter-spacing: 0.1em; /* React: tracking-widest = 0.1em */
	text-transform: uppercase;
	color: rgba(255,255,255,0.6);
	transition: color 0.2s;
	white-space: nowrap;
}
.fp-header__nav a:hover,
.fp-header__nav a[aria-current="page"] { color: var(--fp-primary); }

.fp-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* === Header Icon Buttons (Search + Cart) === */
.fp-header__icon-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.fp-header__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem; /* React: p-3 */
	background: var(--fp-surface);
	border: 2px solid var(--fp-border);
	border-radius: 4px; /* React: rounded = 4px */
	box-shadow: var(--fp-shadow-b);
	color: rgba(255,255,255,0.7);
	cursor: pointer;
	transition: color 0.2s;
}
.fp-header__icon-btn:hover { color: var(--fp-primary); }
.fp-header__icon-btn svg {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Account/Login/„Mein Konto"-Icon (WooCommerce customer-account Block, icon_only) — auf DESKTOP (≥1024)
   optisch exakt wie Suche/Warenkorb (.fp-header__icon-btn), inkl. gleichem Abstand zur Icon-Gruppe.
   NUR Optik, keine WC-Logik/URL geändert. Das Icon ist fill-basiert → Farbe über currentColor (KEIN
   fill:none, das würde es verstecken). Gilt ausgeloggt (Login/Register) UND eingeloggt (Mein Konto).
   Mobile (<1024) siehe eigener Block direkt darunter. */
@media (min-width: 1024px) {
	.fp-header__inner > .wp-block-woocommerce-customer-account { display: flex; align-items: center; }
	.fp-header__inner > .wp-block-woocommerce-customer-account a {
		display: flex; align-items: center; justify-content: center;
		padding: 0.75rem;
		background: var(--fp-surface);
		border: 2px solid var(--fp-border);
		border-radius: 4px;
		box-shadow: var(--fp-shadow-b);
		color: rgba(255,255,255,0.7);
		transition: color 0.2s;
	}
	.fp-header__inner > .wp-block-woocommerce-customer-account a:hover { color: var(--fp-primary); }
	.fp-header__inner > .wp-block-woocommerce-customer-account svg { width: 1.25rem; height: 1.25rem; }
	/* gleicher Abstand zur Icon-Gruppe wie zwischen den Icons (12px statt 24px Inner-Gap) */
	.fp-header__inner > .fp-header__actions { margin-left: -0.75rem; }
}

/* Account/Login-Icon auf MOBILE (<1024): ebenfalls als Box, passend zu Suche/Hamburger
   (44×44, padding 0.625rem, shadow 2px2px0 — die kleineren mobilen Icon-Boxen, NICHT die 48er
   Desktop-Box). Zusätzlich das Problem lösen, dass der Account durch space-between mittig
   „gestrandet" ist (Lücke ~64px zu Suche): margin-left:auto zieht Account + Actions als Cluster
   an den rechten Rand, und margin-left:-0.75rem auf .fp-header__actions setzt den Abstand
   Account↔Suche auf 12px = exakt wie search↔hamburger → gleichmäßiger 3-Box-Cluster rechts,
   Logo links. Desktop (≥1024) bleibt durch die Media-Trennung komplett unberührt. */
@media (max-width: 1023px) {
	.fp-header__inner > .wp-block-woocommerce-customer-account {
		display: flex; align-items: center;
		margin-left: auto; /* Account + Actions rechts clustern, space-between-Lücke auflösen */
	}
	.fp-header__inner > .wp-block-woocommerce-customer-account a {
		display: flex; align-items: center; justify-content: center;
		padding: 0.625rem; /* 10px → 44×44 wie mobile Suche/Hamburger */
		background: var(--fp-surface);
		border: 2px solid var(--fp-border);
		border-radius: 4px;
		box-shadow: 2px 2px 0 rgba(0,0,0,0.5); /* mobile Icon-Shadow, nicht der Desktop-Shadow */
		color: rgba(255,255,255,0.7);
		transition: color 0.2s;
	}
	.fp-header__inner > .wp-block-woocommerce-customer-account a:hover { color: var(--fp-primary); }
	.fp-header__inner > .wp-block-woocommerce-customer-account svg { width: 1.25rem; height: 1.25rem; }
	/* Abstand Account↔Actions von 24px (inner-gap) auf 12px = wie search↔hamburger */
	.fp-header__inner > .fp-header__actions { margin-left: -0.75rem; }
}

/* Phone button icon */
.fp-btn-phone__icon {
	width: 1rem;
	height: 1rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
	display: inline-block;
	margin-right: 0.5rem;
}

/* Phone button — class is on .wp-block-button wrapper, target .wp-element-button */
.fp-btn-phone .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem; /* React: mr-2 on icon */
	background: var(--fp-primary);
	color: #000 !important;
	padding: 0.75rem 1.75rem; /* React: px-7 py-3 */
	border-radius: 4px; /* React: rounded = 4px */
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; /* React: text-xs = 12px */
	font-weight: 700;
	letter-spacing: 0.1em; /* React: tracking-widest = 0.1em */
	text-transform: uppercase;
	transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
	box-shadow: var(--fp-shadow-b);
	white-space: nowrap;
}
.fp-btn-phone .wp-element-button:hover {
	background: var(--fp-primary-h);
	transform: translateY(-4px); /* React: hover:-translate-y-1 = -4px */
	box-shadow: var(--fp-shadow-b);
}
.fp-btn-phone .wp-element-button:active { transform: translateY(0); box-shadow: none; }

/* === Mobile Toggle === */
.fp-header__toggle {
	display: none;
	background: var(--fp-surface);
	border: 2px solid var(--fp-border);
	box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
	border-radius: 4px; /* React: rounded = 4px (was 6px) */
	padding: 0.625rem; /* React: p-2.5 = 10px → 44×44 (matches search) */
	cursor: pointer;
	color: rgba(255,255,255,0.7);
	transition: color 0.2s;
}
.fp-header__toggle:hover { color: var(--fp-primary); }
.fp-header__toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Below lg (1024px): Hide desktop nav and phone button */
@media (max-width: 1023px) {
	.fp-header__nav { display: none !important; }
	.fp-header__phone-btn-wrap { display: none !important; } /* React: hidden lg:flex */
	.fp-header__toggle { display: flex; align-items: center; }
}
/* Mobile actions: show search, hide cart (cart only on md+ in React) */
@media (max-width: 1023px) {
	.fp-header__actions { display: flex; gap: 0.75rem; align-items: center; } /* React mobile cluster: gap-3 = 12px */
	.fp-header__icon-btn#fp-cart-btn { display: none; } /* React: hidden md:flex */
	.fp-header__icon-group { display: flex; } /* Keep search visible */
	/* React mobile search/hamburger: p-2.5=10px → 44×44, shadow 2px2px0 (desktop keeps p-3 + 4px4px0) */
	.fp-header__icon-btn { padding: 0.625rem; box-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
	.fp-header__inner { padding-left: 1.5rem; padding-right: 1.5rem; } /* React tablet: sm:px-6 = 24px */
}
/* React mobile (<640) outer header padding: px-4 = 16px (logo/buttons 16px from the edges) */
@media (max-width: 639px) {
	.fp-header__inner { padding-left: 1rem; padding-right: 1rem; }
}
/* Mobile logo: React h-14=56px (<640px), sm:h-16=64px (>=640px), lg:h-20=80px (>=1024px) */
@media (max-width: 639px) {
	.fp-header__logo img { height: 3.5rem; max-width: 170px; } /* h-14 = 56px */
}
@media (min-width: 640px) and (max-width: 1023px) {
	.fp-header__logo img { height: 4rem; max-width: 210px; } /* sm:h-16 = 64px */
}

/* === Mobile Menu === */
.fp-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 8999;
	background: #110f0c;
	display: flex;
	flex-direction: column;
	padding: 6rem 1.5rem 2.5rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	/* Glow decorations via pseudo-elements */
}
.fp-mobile-menu.is-open {
	transform: translateX(0);
}

.fp-mobile-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 2rem;
}

.fp-mobile-menu__nav a {
	display: flex;
	align-items: center;
	gap: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.75rem, 12vw, 5rem);
	text-transform: uppercase;
	color: #FDFDFD;
	padding: 0.5rem 0;
	line-height: 1;
	transition: color 0.2s;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	overflow: hidden;
}
.fp-mobile-menu__nav a:hover { color: var(--fp-primary); }
.fp-mobile-menu__nav a::before {
	content: '';
	display: block;
	height: 4px;
	width: 0;
	background: var(--fp-primary);
	transition: width 0.3s ease, margin 0.3s ease;
	flex-shrink: 0;
	margin-right: 0;
}
.fp-mobile-menu__nav a:hover::before {
	width: 2.5rem;
	margin-right: 1rem;
}

.fp-mobile-menu__footer {
	margin-top: auto;
	padding-top: 2.5rem;
	border-top: 1px solid rgba(255,255,255,0.05);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.fp-mobile-menu__label {
	display: block;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--fp-primary);
	margin-bottom: 1rem;
	font-weight: 700;
}

.fp-mobile-phone {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: rgba(255,255,255,0.8);
	transition: color 0.2s;
}
.fp-mobile-phone:hover { color: #fff; }
.fp-mobile-phone__icon {
	width: 2.75rem;
	height: 2.75rem;
	background: var(--fp-surface);
	border: 2px solid var(--fp-border);
	border-radius: var(--fp-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fp-primary);
	transition: background 0.2s;
}
.fp-mobile-phone:hover .fp-mobile-phone__icon { background: rgba(255,193,7,0.15); }
.fp-mobile-phone__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	letter-spacing: 0.1em;
	color: inherit;
}

/* === Hero === */
.fp-hero {
	position: relative;
	min-height: 100svh;
	min-height: 100vh; /* fallback */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	/* flex-start (not center): the ~700px content is nearly as tall as the viewport, so
	   centering pushed the whole composition up under the fixed header. Top-align it and
	   control the gap via .fp-hero__inner padding-top — predictable across viewport heights. */
	justify-content: flex-start !important;
	/* React: pt-24=96px sm:pt-32=128px lg:pt-40=160px */
	padding-top: 10rem;  /* lg:pt-40=160px */
	padding-bottom: 8rem; /* lg:pb-32=128px */
	/*
	 * overflow-x:clip clips the badge. Use hidden on the site-blocks level instead.
	 * The hero itself must allow badge overflow.
	 */
	overflow: visible;
	border-bottom: 2px solid var(--fp-border);
	background: var(--fp-bg);
}

.fp-hero__bg {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* The bg image is a wp-block-image figure — target the img within */
.fp-hero__bg-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
}
.fp-hero__bg-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	opacity: 0.15;
	filter: sepia(20%) hue-rotate(-10deg);
	display: block;
}

.fp-hero__bg-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(to top, var(--fp-bg) 0%, transparent 100%);
	z-index: 1;
}

.fp-hero__inner {
	position: relative;
	z-index: 10;
	/* React Hero uses max-w-[1400px] (NOT max-w-7xl!) */
	max-width: 1400px;
	margin: 0 auto;
	/* React: px-4 sm:px-6 lg:px-8. Add extra right padding for badge overflow space */
	padding: 0 1.5rem;
	/* Vertical position of the whole hero composition (content + visual) below the fixed
	   header. Desktop value; tablet/mobile overridden in the media queries below. */
	padding-top: 10rem; /* desktop: ~30px air under the 130px header to the pizza, ~84px to the badge */
	width: 100%;
	display: grid !important;
	/*
	 * React: lg:w-[55%] / lg:w-[45%] — at 1400px container.
	 * At 1040px the right col is only 446px but pizza+badge needs ~500px.
	 * Use auto sizing so pizza-wrap drives the column width.
	 */
	/*
	 * React: lg:w-[55%] / lg:w-[45%]
	 * At 1040px: 55%=572px content, 45%=468px visual
	 * Pizza wrap 43vw=447px + badge 32px right = 479px ≤ 468px
	 * The visual has padding-right:2.5rem so pizza+badge fits in 468-40=428px... too small.
	 * Solution: reduce gap to 2rem, use 52%/48%
	 */
	/*
	 * React: left w-[55%], right w-[45%], gap lg:gap-16=64px
	 * Use fr units so grid respects the gap correctly:
	 * 55fr / 45fr = same 55/45 ratio without overflow
	 */
	grid-template-columns: 55fr 45fr;
	align-items: center !important;
	gap: 4rem; /* React: lg:gap-16 = 64px */
}

.fp-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.fp-hero__eyebrow {
	/* React: mb-6=24px sm:mb-8=32px */
	margin-bottom: 2rem; /* 32px = sm:mb-8 ✓ */
}

.fp-hero__h1 {
	/*
	 * React exact:
	 *   text-[80px]  (≥0px default)
	 *   sm:text-[80px] (≥640px)
	 *   md:text-[100px] (≥768px)
	 *   lg:text-[130px] (≥1024px) ← fixed, not clamp!
	 * React leading-[0.8] = line-height 0.8
	 * React tracking-tighter = -0.05em
	 * React ml-[-2px]
	 * Must use explicit 130px at ≥1024px, not a vw-based clamp
	 */
	font-size: 6.25rem; /* 100px = md fallback at <1024px */
	line-height: 0.8; /* React: leading-[0.8] exactly */
	letter-spacing: -0.05em; /* React: tracking-tighter = -0.05em */
	margin-bottom: 2rem;
	margin-left: -2px; /* React: ml-[-2px] */
	color: #fff;
}

.fp-hero__h1 .hl { color: var(--fp-primary); }
.fp-hero__h1 .fp-text-primary { color: var(--fp-primary); }
.fp-hero__h1 .hl-red { color: var(--fp-red); }
/* React desktop h1 is 3 lines: "HEISS GELIEFERT." share line 3 (inline). Mobile (<640) drops it to line 4. */
.fp-hero__h1-last { display: inline; }

/* Button arrow SVGs inline in button text */
.fp-btn-arrow, .fp-btn-phone-icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
	display: inline-block;
	margin-left: 0.5rem;
}
.fp-btn-phone-icon {
	margin-left: 0;
	margin-right: 0.5rem;
	color: var(--fp-primary);
}
/* Hero CTA icons — scoped so the Final-CTA arrow stays untouched. React: order ArrowRight w-8 sw3, phone Phone w-6 sw2.
   margin:0 → spacing comes purely from the flex gap (16/12px), so the icon+text group is symmetric. */
.fp-btn-primary .fp-btn-arrow { width: 2rem; height: 2rem; stroke-width: 3; margin: 0; }
.fp-btn-secondary .fp-btn-phone-icon { width: 1.5rem; height: 1.5rem; stroke-width: 2; margin: 0; }
/* Center the icon+text group inside both hero CTA cards (cards are wider than their content after the equal-width pass) */
.fp-hero__ctas .wp-element-button { justify-content: center; }

.fp-hero__desc {
	/*
	 * React: text-[15px] sm:text-xl=20px lg:text-2xl=24px
	 * font-sans font-medium leading-[1.4] max-w-xl=576px
	 */
	font-size: clamp(0.9375rem, 2.3vw, 1.5rem); /* 15px min, 24px at 1040px */
	color: rgba(255,255,255,0.8);
	font-weight: 500;
	line-height: 1.4;
	max-width: 36rem; /* max-w-xl = 576px */
	margin-bottom: 2.5rem;
}

.fp-hero__ctas {
	display: flex !important;
	flex-direction: row !important;
	/* React: flex-col sm:flex-row — sm=640px+ always row */
	flex-wrap: nowrap !important;
	gap: 1rem;
	align-items: center;
}
/* Each wp-block-buttons wrapper should not stretch */
.fp-hero__ctas .wp-block-buttons {
	margin: 0 !important;
	flex-shrink: 0;
}
/* Mobile: stack buttons vertically like React flex-col */
@media (max-width: 639px) {
	.fp-header { padding: 1rem 0 !important; } /* React mobile: py-4 = 16px (base 24px = sm:py-6) */
	.fp-hero__ctas {
		flex-direction: column !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
	}
	.fp-hero__ctas .wp-block-buttons { width: 100% !important; }
	.fp-hero__ctas .wp-block-button { width: 100% !important; }
	.fp-hero__ctas .wp-element-button { width: 100% !important; justify-content: center; } /* React: w-full */
}

/* User design choice: EQUAL-WIDTH hero CTA cards on desktop (React itself uses different widths).
   Both cards share the content column equally; if the column is too narrow they wrap to full-width stacked (no overflow). */
@media (min-width: 1024px) {
	.fp-hero__ctas { flex-wrap: wrap !important; width: min(100%, 44rem); gap: 1rem; }
	.fp-hero__ctas .wp-block-buttons { flex: 1 1 0 !important; min-width: 21rem; }
	.fp-hero__ctas .wp-block-button { width: 100% !important; }
	.fp-hero__ctas .wp-element-button { width: 100% !important; white-space: nowrap; }
}

/* Primary button — React: bg-primary px-10 py-5 font-heading text-3xl shadow-[4px_4px_0px_#E62E2D] */
.fp-btn-primary .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 1rem; /* React: sm:gap-4 = 16px */
	background: var(--fp-primary) !important;
	color: #000 !important;
	/* React: px-6 sm:px-10 py-4 sm:py-5 */
	padding: 1.25rem 2.5rem !important;    /* React: py-5 px-10 = 20px 40px */
	border-radius: 6px !important;    /* React: rounded-md = 6px */
	font-family: var(--wp--preset--font-family--heading) !important;
	/* React: text-xl sm:text-2xl lg:text-3xl = 30px */
	font-size: 1.875rem !important;       /* text-3xl = 30px */
	text-transform: uppercase !important;
	box-shadow: 4px 4px 0px var(--fp-red) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
	border: none !important;
	line-height: 36px !important; /* React: text-3xl lh=36px → button height 76px (= phone) */
	min-height: 3.75rem; /* React: sm:min-h-[60px] */
}
.fp-btn-primary .wp-element-button:hover {
	background: var(--fp-primary-h) !important;
	transform: translateY(-2px);
	box-shadow: 6px 6px 0px var(--fp-red) !important; /* React: hover:shadow-[6px_6px_0px_#E62E2D] */
}
.fp-btn-primary .wp-element-button:active { transform: translateY(0); box-shadow: none !important; }

/* Secondary button — React: bg-surface border-2 border-white/10 font-heading text-2xl shadow-[4px_4px_0px_#333] */
.fp-btn-secondary .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: var(--fp-surface) !important;
	color: #fff !important;
	/* React: px-6 sm:px-10 py-4 sm:py-5 — match primary sizing */
	padding: 1.25rem 2.5rem !important;    /* React: py-5 px-10 = 20px 40px */
	border-radius: 6px !important;    /* React: rounded-md = 6px */
	border: 2px solid var(--fp-border) !important;
	font-family: var(--wp--preset--font-family--heading) !important;
	/* React: text-lg sm:text-2xl = 24px */
	font-size: 1.5rem !important;         /* text-2xl = 24px */
	text-transform: uppercase !important;
	box-shadow: 4px 4px 0px #333 !important;
	transition: background 0.2s ease, border-color 0.2s ease !important;
	line-height: 32px !important; /* React: text-2xl lh=32px → +4px border = 76px (= order) */
	min-height: 3.75rem;
}
.fp-btn-secondary .wp-element-button:hover {
	background: var(--fp-surface-lt) !important;
	border-color: rgba(255,255,255,0.2) !important;
}

/* React hero/final CTA buttons use Anton with NO letter-spacing (theme.json button preset adds 0.05em — override to match) */
.fp-btn-primary .wp-element-button,
.fp-btn-secondary .wp-element-button,
.fp-btn-dark .wp-element-button { letter-spacing: normal !important; }

/* Mobile hero CTA sizing — placed AFTER the desktop rules so it wins at <640px.
   React mobile: order text-xl(20)/lh28, phone text-lg(18)/lh28, py-4 px-6, order arrow w-5(20px). Heights → order 60, phone 64. */
@media (max-width: 639px) {
	.fp-btn-primary .wp-element-button { font-size: 1.25rem !important; line-height: 1.75rem !important; padding: 1rem 1.5rem !important; gap: 0.75rem; }
	.fp-btn-secondary .wp-element-button { font-size: 1.125rem !important; line-height: 1.75rem !important; padding: 1rem 1.5rem !important; }
	.fp-btn-primary .fp-btn-arrow { width: 1.25rem; height: 1.25rem; }
}

.fp-hero__visual {
	position: relative;
	/*
	 * React: h-[400px] sm:h-[500px] lg:h-[700px]
	 */
	height: clamp(400px, 67vh, 700px);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible; /* badge at -2rem overflows — body overflow-x:hidden prevents scrollbar */
	align-self: stretch;
}

.fp-hero__glow {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: 75%;
	aspect-ratio: 1;
	background: var(--fp-primary);
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.18;
	pointer-events: none;
}

.fp-hero__pizza-wrap {
	position: relative;
	/*
	 * React: w-[280px] mobile, w-[300px] min-375, w-[450px] sm, w-[550px] lg
	 * At WP 1040px (between sm=768 and lg=1024):
	 *   Target ~430px. 43vw * 1040 = 447px ✓
	 * At 1400px: 43vw * 1400 = 602 → clamped to 550px ✓
	 */
	/*
	 * At 1040px (WP viewport): target ~420px so badge (-2rem right) fits in 48% col
	 * 40vw * 1040 = 416px. Badge right edge: 416 + 32 = 448px within ~499px col ✓
	 * At 1400px: 40vw * 1400 = 560 → clamped to 550px. Badge: 550+32=582px in ~672px col ✓
	 */
	/*
	 * React: sm:w-[450px], lg:w-[550px]
	 * In WP FSE the right column may be narrower than 550px at 1040px viewport.
	 * Use min() to prevent overflow: match React but never exceed column width.
	 * The visual container is flex with items-center so the wrap centres inside.
	 */
	width: min(450px, 100%);
	aspect-ratio: 1;
	z-index: 2;
	overflow: visible;
}

.fp-hero__pizza-img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	margin: 0;
}
.fp-hero__pizza-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	border: 12px solid var(--fp-surface); /* React: border-[12px] border-surface */
	transform: rotate(-5deg);
	box-shadow: 0 20px 60px rgba(0,0,0,0.7);
	display: block;
}

.fp-hero__badge {
	position: absolute !important;
	/*
	 * React: -top-6 -right-6 (mobile w-28=112px)
	 *         sm:-top-8 sm:-right-8 (sm+ w-36=144px)
	 */
	top: -1.5rem;   /* -top-6 = -24px */
	right: -1.5rem; /* -right-6 = -24px */
	width: 7rem;    /* w-28 = 112px mobile default */
	height: 7rem;
	background: var(--fp-red);
	color: #fff;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	transform: rotate(15deg);
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); /* React: shadow-2xl (soft drop, NO ring) */
	border: 4px solid var(--fp-bg); /* React: border-4 inside box-sizing:border-box → red Ø 136px, total 144px (was a 4px shadow-ring OUTSIDE → 152px, looked bigger) */
	z-index: 20; /* above pizza image */
	text-transform: uppercase;
	pointer-events: none;
}
/* React: sm+ = w-36=144px, -top-8=-32px, -right-8=-32px */
@media (min-width: 640px) {
	.fp-hero__badge {
		width: 9rem;   /* 144px = w-36 */
		height: 9rem;
		top: -2rem;    /* -top-8 = -32px */
		right: -2rem;  /* -right-8 = -32px */
	}
}
.fp-hero__badge-sub {
	/* React: text-sm=14px mobile, sm:text-base=16px; font-heading (Anton) inherited from badge */
	font-size: 0.875rem; /* 14px */
	font-weight: 700; /* faux-bold Anton, like React's font-bold */
	letter-spacing: normal; /* React: no tracking on "NUR" (was 0.05em) */
	line-height: 1;
	font-family: var(--wp--preset--font-family--heading); /* React: Anton (was Outfit → looked thinner/wider) */
	text-transform: uppercase;
}
.fp-hero__badge-price {
	/* React: text-3xl=30px mobile, sm:text-5xl=48px */
	font-size: 1.875rem; /* 30px mobile */
	line-height: 1;
	margin-top: 0.25rem;
	font-weight: 900;
	font-family: var(--wp--preset--font-family--heading);
}
@media (min-width: 640px) {
	.fp-hero__badge-sub { font-size: 1rem; } /* sm:text-base=16px */
	.fp-hero__badge-price { font-size: 3rem; } /* sm:text-5xl=48px */
}

.fp-info-cards {
	position: absolute;
	/*
	 * React: -left-4 sm:left-4 lg:left-0, top-1/2 -translate-y-1/2
	 * lg:left-0 = left edge of the visual container
	 * Cards are 280px wide – they overlap the pizza circle from the left
	 */
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	z-index: 4; /* above glow, below badge */
}

.fp-info-card {
	background: var(--fp-surface);
	border: 2px solid var(--fp-border);
	border-radius: 0.75rem; /* React: rounded-xl */
	padding: 1rem;          /* React: p-4 */
	display: flex;
	align-items: center;
	gap: 1rem;              /* React: gap-4 */
	width: 17.5rem;         /* React: w-[280px] */
	box-shadow: 4px 4px 0px rgba(0,0,0,0.5); /* React: shadow-[4px_4px_0px_rgba(0,0,0,0.5)] */
}
.fp-info-card--amber { border-color: var(--fp-primary); }
.fp-info-card__icon {
	width: 3rem; height: 3rem;
	background: var(--fp-surface-lt);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.fp-info-card__icon svg {
	width: 1.5rem; height: 1.5rem; /* React: lucide default 24px (was 20px) */
	stroke: #fff; fill: none; stroke-width: 2.5;
	stroke-linecap: round; stroke-linejoin: round;
}
/* React: the Flame (fresh) card icon stays WHITE — iconbox text-white overrides text-primary; only the card BORDER is amber */
.fp-info-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem; /* React: text-xl = 20px (was 17.6px → looked thinner) */
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 0.25rem;
	color: #fff;
}
.fp-info-card__desc {
	font-size: 0.625rem; /* React: text-[10px] (was 9.6px) */
	text-transform: uppercase;
	letter-spacing: 0.1em; /* React: tracking-widest (was 0.2em → over-spaced) */
	font-weight: 700;
	color: rgba(255,255,255,0.6); /* React: text-white/60 (was 0.5) */
}

/* lg and up (1024px+): exact React lg:text-[130px] + lg:w-[550px] */
@media (min-width: 1024px) {
	.fp-hero__h1 { font-size: 8.125rem; } /* 130px exactly */
	.fp-hero__pizza-wrap { width: min(550px, 100%); } /* lg:w-[550px] */
	.fp-hero__visual { height: 700px; } /* React: lg:h-[700px] — fixed, NOT vh-based */
	.fp-hero__inner { padding-left: 2rem; padding-right: 2rem; } /* React: lg:px-8 = 32px */
}
/* md (768px–1023px): React md:text-[100px] */
@media (min-width: 768px) and (max-width: 1023px) {
	.fp-hero__h1 { font-size: 6.25rem; } /* 100px exactly */
}
/* sm (640px–767px): React sm:text-[80px] */
@media (min-width: 640px) and (max-width: 767px) {
	.fp-hero__h1 { font-size: 5rem; } /* 80px exactly */
}

/* Tablet and below: single-column hero */
@media (max-width: 1023px) {
	.fp-hero {
		padding-top: 8rem;   /* sm:pt-32=128px */
		padding-bottom: 5rem; /* sm:pb-20=80px */
	}
	.fp-hero__inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 3rem; /* sm:gap-12 = 48px */
		padding-top: 9rem; /* tablet: clear header + air (overrides desktop 10rem) */
	}
	.fp-hero__content { align-items: center; }
	.fp-hero__ctas { width: 100%; } /* React: w-full below lg (lg:w-auto) — let column-stretch fill buttons */
	.fp-hero__desc { text-align: center; }
	.fp-info-cards { display: none; }
	.fp-hero__visual { height: 500px; } /* React sm:h-[500px] — tablet 640–1023 (was clamp → too short) */
}
/* Mobile overrides for badge */
@media (max-width: 639px) {
	.fp-hero {
		padding-top: 7rem; /* pt-24=96px min */
	}
	/* React mobile h1 (sm:hidden): text-[60px] leading-[0.85] tracking-tight(-0.025em), centered, 4 lines */
	.fp-hero__h1 { font-size: 60px; line-height: 0.85; letter-spacing: -0.025em; }
	.fp-hero__h1-last { display: block; } /* GELIEFERT. on its own 4th line */
	.fp-hero__desc { max-width: 300px; margin-left: auto; margin-right: auto; } /* React: max-w-[300px] */
	.fp-hero__pizza-wrap { width: 300px; } /* React: min-[375px]:w-[300px] */
	.fp-hero__visual { height: 400px; } /* React mobile h-[400px] — gives the 300px pizza ~50px vertical air (was 300px → cramped/cut-off) */
	.fp-hero__inner { padding-left: 1rem; padding-right: 1rem; padding-top: 7.5rem; } /* React: px-4 = 16px; mobile clears the 90px header + air */
	.fp-hero__badge {
		width: 7rem;   /* w-28=112px */
		height: 7rem;
		top: -1.5rem;  /* -top-6 */
		right: -1.5rem; /* -right-6 */
	}
	.fp-hero__badge-price { font-size: 1.875rem; } /* text-3xl=30px */
	.fp-hero__badge-sub { font-size: 0.875rem; }
}
/* React mobile h1: min-[414px]:text-[64px] */
@media (min-width: 414px) and (max-width: 639px) {
	.fp-hero__h1 { font-size: 64px; }
}
/* React mobile h1: text-[16vw] below 375px; pizza w-[280px] */
@media (max-width: 374px) {
	.fp-hero__h1 { font-size: 16vw; }
	.fp-hero__pizza-wrap { width: 280px; }
}

/* === Sections === */
.fp-section {
	padding: 5rem 0;
	border-bottom: 2px solid var(--fp-border);
	--wp--style--block-gap: 0px;
}
/* Force full width on all alignfull group wrappers */
.wp-block-group.alignfull,
.wp-block-group.fp-hero,
.wp-block-group.fp-cta-final,
[class*="fp-section"].alignfull {
	max-width: 100% !important;
	width: 100% !important;
}
.fp-section--lg { padding: 8rem 0; }
.fp-section--surface { background: var(--fp-surface); }

/* === Categories "Entdecke unsere Vielfalt" — Phase-1 visual category nav (no WooCommerce data) === */
.fp-cats { background: var(--fp-surface); overflow-x: hidden; } /* React: bg-surface + overflow-hidden */
.fp-cats__h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem; /* React: sm:text-5xl = 48px */
	line-height: 1;
	letter-spacing: -0.05em; /* tracking-tighter */
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 4rem; /* React: lg:mb-16 = 64px */
}
.fp-cats__h2 .fp-text-primary { color: var(--fp-primary); }
.fp-cats__scroll {
	display: flex;
	gap: 1.5rem; /* React: sm:gap-6 = 24px */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0.5rem 0 2rem; /* React: pt-2 pb-8 */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Center the 4-card row as a group when it fits; "safe" falls back to start on overflow
	   so the first card stays reachable and horizontal scroll keeps working on narrow viewports. */
	justify-content: safe center;
}
.fp-cats__scroll::-webkit-scrollbar { display: none; }
.fp-cat-card {
	flex-shrink: 0;
	width: 300px;  /* React: sm:w-[300px] */
	height: 340px; /* React: h-[340px] */
	background: var(--fp-bg);
	border: 2px solid var(--fp-border);
	border-radius: 0.75rem; /* rounded-xl */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	scroll-snap-align: start;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); /* shadow-xl */
	transition: border-color 0.2s;
	cursor: pointer;
}
.fp-cat-card:hover { border-color: var(--fp-primary); } /* React: hover:border-primary */
.fp-cat-card__img { position: relative; width: 100%; height: 200px; overflow: hidden; background: #000; }
.fp-cat-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.9; transition: transform 0.5s ease, opacity 0.5s ease; display: block; }
.fp-cat-card:hover .fp-cat-card__img img { transform: scale(1.05); opacity: 1; } /* React: group-hover scale-105 + opacity-100 */
.fp-cat-card__grad { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; background: linear-gradient(to top, var(--fp-bg) 0%, transparent 100%); pointer-events: none; }
.fp-cat-card__body {
	padding: 1.5rem; /* p-6 */
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--fp-bg);
	position: relative;
	z-index: 1;
	margin-top: -1.5rem; /* React: -mt-6 (overlaps gradient) */
}
.fp-cat-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.25rem; /* React: text-4xl = 36px */
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0.25rem; /* mb-1 */
	transition: color 0.2s;
}
.fp-cat-card:hover .fp-cat-card__title { color: var(--fp-primary); } /* React: group-hover text-primary */
.fp-cat-card__desc {
	font-size: 0.875rem; /* React: text-sm = 14px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em; /* tracking-wider */
	color: rgba(255,255,255,0.5);
	margin: 0;
}
/* Tablet/Mobile (React: py-20 below lg, container px-6/px-4, cards w-[240px], gap-4, H2 text-4xl/mb-12) */
@media (max-width: 1023px) {
	.fp-cats.wp-block-group { padding-top: 5rem !important; padding-bottom: 5rem !important; }
	.fp-cats__h2 { margin-bottom: 3rem; }
	.fp-cats .fp-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 639px) {
	.fp-cats__h2 { font-size: 2.25rem; }
	.fp-cats .fp-inner { padding-left: 1rem; padding-right: 1rem; }
	.fp-cats__scroll { gap: 1rem; }
	.fp-cat-card { width: 240px; }
}

.fp-inner {
	max-width: 1400px; /* React content sections use max-w-[1400px] (header/footer differ) */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 2rem; /* React: lg:px-8 = 32px */
	padding-right: 2rem;
	width: 100%;
}
.fp-inner--content { max-width: var(--fp-content-w); }

.fp-section-title {
	margin-bottom: 3rem;
}

/* Ensure section padding applies even with WP overrides */
.fp-section.wp-block-group {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}
.fp-section--lg.wp-block-group {
	padding-top: 8rem !important;
	padding-bottom: 8rem !important;
}

.fp-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 3rem;
}

/* Category cards and section divider: reserved for Phase 2 (Speisekarte/WooCommerce) — styles removed to keep Phase 1 CSS lean. */

/* === Info Cards === */
/* USP / Feature cards shared style */
.fp-usp-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem;
	width: 100%;
}

/* Columns override: WP columns block becomes a grid inside .fp-usp-grid */
.fp-usp-grid.wp-block-columns {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	flex-wrap: unset !important;
}

/* WP column children: override WP flex-basis */
.fp-usp-card.wp-block-column {
	padding: 2rem !important;
	width: auto !important;
	flex-basis: auto !important;
	flex-grow: 0 !important;
}

.fp-usp-card {
	background: var(--fp-bg);
	border: 2px solid var(--fp-border);
	border-radius: 0.75rem;
	padding: 2rem;
	transition: border-color 0.2s;
}
.fp-usp-card:hover { border-color: rgba(255,255,255,0.3); } /* React: hover:border-white/30 */

.fp-usp-card__num {
	width: 3rem; height: 3rem;
	background: var(--fp-bg);
	border: 2px solid var(--fp-border);
	border-radius: var(--fp-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	color: var(--fp-primary);
	margin-bottom: 1.25rem;
	flex-shrink: 0;
}

.fp-usp-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0.5rem;
	transition: color 0.2s;
}
.fp-usp-card:hover .fp-usp-card__title { color: var(--fp-primary); }
.fp-usp-card__text {
	font-size: 0.875rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.6;
}

@media (max-width: 767px) {
	.fp-usp-grid,
	.fp-usp-grid.wp-block-columns {
		grid-template-columns: 1fr !important;
		display: grid !important;
	}
	.fp-usp-card.wp-block-column {
		width: 100% !important;
		flex-basis: 100% !important;
	}
}

/* === Feature Section === */
.fp-feature {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 5rem;
}

.fp-feature__eyebrow { margin-bottom: 1.5rem; }
/* React feature eyebrow: px-3 py-1, tracking-widest(0.1em), rounded(4px) */
.fp-feature__eyebrow .fp-label { font-size: 0.625rem; padding: 0.25rem 0.75rem; letter-spacing: 0.1em; border-radius: 4px; } /* React feature eyebrow: text-[10px] px-3 py-1 */

.fp-feature__h2 {
	/* React: sm:text-[70px] xl:text-[90px]; section is hidden <md so 70px is the base visible size */
	font-size: 70px;
	line-height: 0.85; /* React: leading-[0.85] */
	letter-spacing: -0.05em; /* React: tracking-tighter */
	margin-bottom: 2rem; /* mb-8 = 32px */
}
@media (min-width: 1280px) { .fp-feature__h2 { font-size: 90px; } } /* React: xl:text-[90px] */

.fp-feature__h2 .hl-red { color: var(--fp-red); }

.fp-feature__desc {
	color: rgba(255,255,255,0.7); /* React: text-white/70 */
	max-width: 28rem; /* max-w-md = 448px */
	font-size: 1.25rem; /* React: text-xl = 20px */
	font-weight: 500; /* React: font-medium */
	line-height: 1.625; /* React: leading-relaxed */
	margin-bottom: 3rem; /* mb-12 = 48px */
}

.fp-feature__list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.fp-feature__item {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
}

.fp-feature__item-num {
	width: 3rem; height: 3rem;
	background: var(--fp-bg);
	border: 2px solid var(--fp-border);
	border-radius: 4px; /* React: rounded = 4px */
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem; /* text-2xl = 24px */
	font-weight: 400; /* React: Anton 400 (markup no longer <strong>) */
	color: var(--fp-primary);
	flex-shrink: 0;
}

.fp-feature__item-body { display: flex; flex-direction: column; } /* React: title stacked above description */
.fp-feature__item-title {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem; /* React: text-2xl = 24px */
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0.25rem; /* mb-1 = 4px */
	transition: color 0.2s;
}
.fp-feature__item:hover .fp-feature__item-title { color: var(--fp-primary); }
.fp-feature__item-text { display: block; font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.625; max-width: 24rem; } /* React: text-sm white/60 leading-relaxed max-w-sm */

.fp-feature__visual {
	position: relative;
	/* React: sm:h-[700px] (section visible only >=768px) */
	height: 700px;
	border-radius: 0.75rem;
	overflow: hidden;
	border: 4px solid var(--fp-bg);
	box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* The figure wrapper needs to fill the visual container */
.fp-feature__visual-img {
	position: absolute !important;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.fp-feature__visual-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.fp-feature__overlay {
	position: absolute !important;
	inset: 0;
	background: linear-gradient(to top, var(--fp-bg) 0%, transparent 60%);
	z-index: 2;
	pointer-events: none;
}

.fp-feature__cta-card {
	position: absolute !important;
	z-index: 3;
	bottom: 2.5rem; /* React wrapper p-10 = 40px */
	left: 2.5rem;
	right: auto;
	max-width: 28rem; /* React: max-w-md = 448px */
	background: var(--fp-red);
	padding: 2rem; /* React: p-8 = 32px all sides */
	border-radius: 0.5rem; /* React: rounded-lg */
	border: 2px solid var(--fp-bg); /* React: border-2 border-background-deep */
	box-shadow: 8px 8px 0px #0D0D0D; /* React: shadow-[8px_8px_0px_#0D0D0D] */
	transform: rotate(2deg); /* React: transform rotate-2 */
}
.fp-feature__cta-card h3 {
	color: #fff;
	font-size: 2.25rem; /* React: text-4xl = 36px */
	line-height: 1; /* leading-none */
	letter-spacing: normal;
	margin-bottom: 0.5rem; /* mb-2 = 8px */
}
.fp-feature__cta-card p { color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: 0.025em; } /* React: text-base tracking-wide font-bold */

@media (max-width: 1023px) {
	.fp-feature,
	.fp-feature.wp-block-group {
		grid-template-columns: 1fr !important;
	}
	.fp-feature__visual { height: 700px; } /* React sm:h-[700px] */
}
/* User choice (A): keep "Warum Falken Pizza?" VISIBLE on mobile as a single column.
   NOTE: React hides this section (`hidden md:block`) — it has no mobile reference,
   so these <768px values adapt React's desktop design (not 1:1 from React). */
@media (max-width: 767px) {
	.fp-feature__h2 { font-size: clamp(2.75rem, 12vw, 3.5rem); } /* fits "FALKEN PIZZA?" without overflow */
	.fp-feature__desc { font-size: 1.125rem; margin-bottom: 2.5rem; }
	.fp-feature__visual { height: 360px; }
	.fp-feature__cta-card { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; padding: 1.5rem; max-width: none; }
	.fp-feature__cta-card h3 { font-size: 1.875rem; }
	.fp-feature__cta-card p { font-size: 0.9375rem; }
	.fp-feature__item-text { max-width: none; }
}

/* === Hours Table === */
.fp-location {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.fp-location__card {
	background: var(--fp-surface);
	border: 2px solid var(--fp-border);
	border-radius: 0.75rem;
	padding: 3rem;
	position: relative;
	overflow: hidden;
}

.fp-location__block {
	margin-bottom: 3rem;
}
.fp-location__block:last-child { margin-bottom: 0; }

.fp-location__sub {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.fp-location__sub svg {
	width: 1.25rem; height: 1.25rem;
	stroke: var(--fp-primary); fill: none;
	stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.fp-location__sub-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255,255,255,0.55);  /* WCAG-AA (vorher 0.4 ≈ 3,8:1) */
}

.fp-location__address {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 3.5rem);
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
	margin-bottom: 1rem;
}
.fp-location__address span { color: rgba(255,255,255,0.58); }  /* WCAG (vorher 0.3 ≈ 2,6:1) */

.fp-location__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 2px solid var(--fp-primary);
	padding-bottom: 2px;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	transition: color 0.2s;
}
.fp-location__link:hover { color: var(--fp-primary); }

.fp-location__divider {
	height: 2px;
	background: rgba(255,255,255,0.05);
	margin: 3rem 0;
	border: none;
}

.fp-hours {
	list-style: none;
	padding: 0;
	margin: 0;
	max-width: 26rem;
}
.fp-hours li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	color: rgba(255,255,255,0.65);
}
.fp-hours li:last-child { border-bottom: none; }
.fp-hours li strong { color: rgba(255,255,255,0.5); }
.fp-hours li.is-special { color: var(--fp-primary); }
.fp-hours__time { white-space: nowrap; }

@media (max-width: 1023px) {
	.fp-location,
	.fp-location.wp-block-columns {
		grid-template-columns: 1fr !important;
		display: grid !important;
	}
	.fp-location__card { padding: 2rem; }
	.fp-location__map,
	.fp-location__map.wp-block-column {
		min-height: 300px !important;
	}
}

/* === Map === */
.fp-location__map,
.fp-location__map.wp-block-column {
	background: var(--fp-surface);
	border: 2px solid var(--fp-border);
	border-radius: 0.75rem;
	overflow: hidden;
	min-height: 450px !important;
	padding: 0;
	position: relative;
}

.fp-location__map iframe {
	width: 100%;
	height: 100%;
	min-height: 450px;
	display: block;
	border-radius: 0.5rem;
	border: 0;
	filter: invert(100%) hue-rotate(180deg) brightness(0.8) contrast(1.2);
}

/* === Final CTA === */
.fp-cta-final {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fp-primary);
	text-align: center;
	overflow: hidden;
}

.fp-cta-final__inner {
	position: relative;
	z-index: 10;
	max-width: var(--fp-max-w);
	margin: 0 auto;
	padding: 5rem 1.5rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fp-cta-final__h2 {
	/* React: text-6xl=60px sm:text-[100px] lg:text-[140px] */
	font-size: clamp(3.75rem, 13.5vw, 8.75rem);
	/* 13.5 * 1040/100 = 140.4px ≈ lg:140px ✓ */
	line-height: 0.85;
	color: #000;
	margin-bottom: 1rem;
	letter-spacing: -0.025em; /* React: tracking-tight = -0.025em */
}

.fp-cta-final__sub {
	font-family: var(--wp--preset--font-family--heading);
	/* React: text-2xl=24px default, sm:text-5xl=48px, uppercase, tracking-wide, opacity-80 */
	font-size: 3rem; /* 48px = sm:text-5xl */
	line-height: 1.6;
	color: rgba(0,0,0,0.8); /* React: opacity-80 */
	text-transform: uppercase;
	letter-spacing: 0.025em; /* tracking-wide */
	margin-bottom: 2.5rem; /* sm:mb-12=48px */
}

/* Dark CTA button — React: bg-black px-8 sm:px-12 py-5 sm:py-6 text-2xl sm:text-3xl shadow-[6px_6px_...] sm:shadow-[8px_8px_...] */
.fp-btn-dark .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	background: #000 !important;
	color: #fff !important;
	padding: 1.5rem 3rem !important;       /* py-6=24px px-12=48px */
	border-radius: 0.375rem !important;   /* rounded-md */
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.875rem !important;        /* text-3xl=30px */
	text-transform: uppercase !important;
	box-shadow: 8px 8px 0 rgba(0,0,0,0.3) !important; /* sm:shadow-[8px_8px_...] */
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
	border: none !important;
	line-height: 1 !important;
	min-height: 3.75rem;
}
.fp-btn-dark .wp-element-button:hover {
	background: var(--fp-surface-lt) !important;
	transform: translateY(-2px);
}
.fp-btn-dark .wp-element-button:active { transform: translateY(0); box-shadow: none !important; }

/* === Footer === */
.fp-footer {
	background: var(--fp-bg);
	border-top: 4px solid var(--fp-surface);
	/* React: py-16 md:py-20, pb-[calc(6rem+safe-area)] on mobile (for bottom bar) */
	padding: 4rem 0 3rem;
}
@media (max-width: 767px) {
	/* React: pb-[calc(6rem+env(safe-area-inset-bottom))] = ~100px min */
	.fp-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

.fp-footer__inner {
	max-width: 1280px; /* React: max-w-7xl = 1280px */
	margin: 0 auto;
	padding: 0 2rem; /* React: px-4 sm:px-6 lg:px-8 — use 32px on desktop */
}

.fp-footer__grid {
	display: grid !important;
	grid-template-columns: 2fr 1fr 1fr 1fr !important;
	gap: 3rem;
	margin-bottom: 4rem;
}

.fp-footer__logo img {
	/* React: h-12=48px sm:h-14=56px md:h-16=64px */
	height: 4rem; /* md:h-16 = 64px on desktop */
	width: auto;
	max-width: 240px; /* React: md:max-w-[240px] */
	object-fit: contain;
	filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55));
	transition: opacity 0.2s;
	margin-bottom: 1.5rem;
}
.fp-footer__logo:hover img { opacity: 0.8; }

.fp-footer__tagline {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: rgba(255,255,255,0.58);  /* WCAG-AA (vorher 0.3 ≈ 2,6:1) */
	max-width: 20rem;
	line-height: 1.7;
}

.fp-footer__col-title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--fp-primary);
	margin-bottom: 1.5rem;
	display: block;
}

.fp-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.fp-footer__list li,
.fp-footer__list a {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255,255,255,0.5);
	transition: color 0.2s;
}
.fp-footer__list a:hover { color: #fff; }
.fp-footer__list a[href^="tel"] { color: rgba(255,255,255,0.8); }

.fp-footer__hours {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.fp-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	color: rgba(255,255,255,0.5);
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fp-footer__hours li:last-child { border-bottom: none; }
.fp-footer__hours li.is-special { color: var(--fp-primary); }

.fp-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

.fp-footer__copy {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255,255,255,0.6);  /* WCAG-AA (vorher 0.25 ≈ 2,1:1) */
}

.fp-footer__legal {
	display: flex;
	gap: 2rem;
}

.fp-footer__legal a {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(255,255,255,0.62);  /* WCAG-AA: Rechtslinks (Impressum/Datenschutz/AGB) müssen lesbar sein (vorher 0.25 ≈ 2,1:1) */
	transition: color 0.2s;
}
.fp-footer__legal a:hover { color: #fff; }

@media (max-width: 1023px) {
	.fp-footer__grid,
	.fp-footer__grid.wp-block-columns {
		grid-template-columns: 1fr 1fr !important;
		display: grid !important;
	}
}
@media (max-width: 599px) {
	.fp-footer__grid,
	.fp-footer__grid.wp-block-columns {
		grid-template-columns: 1fr !important;
	}
	.fp-footer__bottom { flex-direction: column; text-align: center; }
}

/* === Page Hero === */
.fp-page-hero {
	padding-top: 9rem;
	padding-bottom: 4rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: var(--fp-bg);
	border-bottom: 2px solid var(--fp-border);
}

.fp-page-hero__glow {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 300px;
	background: var(--fp-primary);
	border-radius: 50%;
	filter: blur(150px);
	opacity: 0.12;
	pointer-events: none;
}

.fp-page-hero__h1 {
	font-size: clamp(4rem, 10vw, 8rem);
	line-height: 0.85;
	letter-spacing: -0.03em;
	margin-bottom: 1.5rem;
	color: #fff;
}

.fp-page-hero__desc {
	max-width: 36rem;
	margin: 0 auto;
	color: rgba(255,255,255,0.6);
	font-size: 1.1rem;
	line-height: 1.6;
}

/* Glass card (used on contact/delivery pages) */
.fp-glass {
	background: rgba(26,26,26,0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 1.5rem;
	padding: 3rem;
}

@media (max-width: 767px) {
	.fp-glass { padding: 2rem 1.5rem; }
}

/* === Legal Pages === */
.fp-legal {
	max-width: 860px;
	margin: 0 auto;
	padding: 2rem 1.5rem 5rem;
}

.fp-legal h2 {
	font-size: 1.5rem;
	color: var(--fp-primary);
	margin-top: 3rem;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: none;
}

.fp-legal h3 {
	font-size: 1.1rem;
	color: rgba(255,255,255,0.8);
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.fp-legal p, .fp-legal li {
	color: rgba(255,255,255,0.65);
	line-height: 1.8;
	margin-bottom: 1rem;
}

.fp-legal a {
	color: var(--fp-primary);
	text-decoration: underline;
}

.fp-placeholder {
	background: rgba(255,193,7,0.1);
	border: 2px dashed rgba(255,193,7,0.4);
	border-radius: var(--fp-radius);
	padding: 1rem 1.5rem;
	color: var(--fp-primary);
	font-size: 0.875rem;
	font-weight: 600;
	margin: 1rem 0;
	line-height: 1.6;
}

/* === Delivery / Contact Page Extras === */
.fp-deliver-grid.wp-block-columns {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 2rem;
	align-items: start;
}

.fp-deliver-col.wp-block-column {
	padding: 2.5rem;
	width: auto !important;
	flex-basis: auto !important;
}

.fp-deliver-list.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.fp-deliver-list li {
	padding: 0.875rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.8);
	font-size: 1.1rem;
}

.fp-deliver-notice {
	background: rgba(230,46,45,0.1);
	border: 1px solid rgba(230,46,45,0.2);
	border-radius: var(--fp-radius);
	padding: 1rem 1.25rem;
	margin-top: 1.5rem;
}
.fp-deliver-notice p { color: rgba(255,200,200,0.8); font-size: 0.875rem; line-height: 1.6; margin: 0; }

.fp-deliver-highlight {
	background: rgba(255,193,7,0.1);
	border: 1px solid rgba(255,193,7,0.2);
	border-radius: var(--fp-radius);
	padding: 1.5rem;
	margin: 1.5rem 0;
}
.fp-deliver-highlight h3 { color: var(--fp-primary); font-size: 1.5rem; margin-bottom: 0.5rem; }
.fp-deliver-highlight p { color: rgba(255,255,255,0.8); font-size: 0.9rem; line-height: 1.6; }

.fp-glass h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: 1rem; }
.fp-glass h3 { font-size: 1rem; color: var(--fp-primary); letter-spacing: 0.1em; margin-top: 2rem; margin-bottom: 0.75rem; font-family: var(--wp--preset--font-family--sans); text-transform: uppercase; }
.fp-glass p { color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 1rem; }

.fp-contact-call.wp-block-buttons { margin: 1.5rem 0 2rem; }
.fp-contact-call .fp-btn-primary .wp-element-button { font-size: 1.1rem !important; padding: 0.875rem 1.75rem !important; }

/* Legal page smallhero variant */
.fp-page-hero--sm { padding-top: 8rem; padding-bottom: 2rem; }
.fp-page-hero--sm .fp-page-hero__h1 { font-size: clamp(3rem, 7vw, 5rem); }

/* Mobile page-hero padding handled by .fp-page-hero.wp-block-group rule above */

/* Fix page hero glow + override WP inline padding:0 on all page heros */
.fp-page-hero { position: relative; }
.fp-page-hero__glow { position: absolute !important; }

/* WP block sets inline padding:0 — override with !important */
.fp-page-hero.wp-block-group {
	padding-top:    9rem !important;
	padding-bottom: 4rem !important;
}
.fp-page-hero--sm.wp-block-group {
	padding-top:    8rem !important;
	padding-bottom: 2rem !important;
}
@media (max-width: 767px) {
	.fp-page-hero.wp-block-group     { padding-top: 7rem !important; }
	.fp-page-hero--sm.wp-block-group { padding-top: 6.5rem !important; }
}

@media (max-width: 767px) {
	.fp-deliver-grid.wp-block-columns {
		grid-template-columns: 1fr !important;
	}
	.fp-deliver-col.wp-block-column { padding: 1.5rem; }
}

/* === About page "Über uns" — replicated from React UeberUns.tsx (scoped to .fp-about) === */
.fp-about { max-width: 1280px; margin: 0 auto; padding: 8rem 2rem 8rem; color: #fff; } /* max-w-7xl, pt-32 px-8 pb-32 */

.fp-about__hero {
	position: relative; border-radius: 3rem; overflow: hidden; min-height: 500px;
	display: flex; align-items: center; background: #171717; /* neutral-900 */
	border: 1px solid rgba(255,255,255,0.05);
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); /* shadow-2xl */
	margin-bottom: 6rem; /* mb-24 */
}
.fp-about__hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fp-about__hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.4; mix-blend-mode: overlay; display: block; }
.fp-about__hero-grad { position: absolute; inset: 0; background: linear-gradient(to right, var(--fp-bg) 0%, rgba(13,13,13,0.8) 50%, transparent 100%); }
.fp-about__hero-content { position: relative; z-index: 1; padding: 5rem; max-width: 48rem; } /* lg:p-20, max-w-3xl */
.fp-about__eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
	padding: 0.375rem 1rem; border-radius: 9999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
	color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; width: max-content;
}
.fp-about__eyebrow-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fp-primary); display: inline-block; }
.fp-about__h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 6rem; /* lg:text-8xl = 96px */
	line-height: 0.85; letter-spacing: -0.025em; text-transform: uppercase; color: #fff; margin-bottom: 1.5rem;
}
.fp-about__h1 .fp-text-primary { color: var(--fp-primary); display: block; }
.fp-about__hero-desc {
	font-size: 1.5rem; /* md:text-2xl = 24px */
	color: rgba(255,255,255,0.7); line-height: 1.625; font-weight: 300; max-width: 36rem; margin: 0;
}

.fp-about__story { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; margin-bottom: 8rem; } /* lg:grid-cols-2 lg:gap-24 mb-32 */
.fp-about__h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.75rem; /* md:text-6xl = 60px */
	line-height: 1; letter-spacing: 0.025em; text-transform: uppercase; color: #fff; margin-bottom: 2rem;
}
.fp-about__h2 .fp-text-primary { color: var(--fp-primary); }
.fp-about__story-text { color: rgba(255,255,255,0.6); line-height: 1.625; font-size: 1.125rem; margin: 0 0 1.5rem; } /* text-lg, space-y-6 */
.fp-about__story-text:last-child { margin-bottom: 0; }
.fp-about__story-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; position: relative; }
.fp-about__story-glow { position: absolute; inset: -2.5rem; background: rgba(255,193,7,0.2); filter: blur(100px); border-radius: 50%; z-index: 0; }
.fp-about__story-img { width: 100%; height: 350px; object-fit: cover; border-radius: 1.5rem; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); display: block; }
.fp-about__story-img--offset { margin-top: 4rem; } /* mt-16 stagger */

.fp-about__values {
	background: rgba(26,26,26,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.1); border-radius: 3rem; padding: 5rem; margin-bottom: 6rem;
}
.fp-about__values-h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.75rem; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase;
	color: #fff; text-align: center; margin-bottom: 4rem;
}
.fp-about__values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* md:grid-cols-3 gap-8 */
.fp-about__value {
	background: var(--fp-bg); padding: 2.5rem; border-radius: 1.5rem;
	border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
	text-align: center; transition: border-color 0.2s;
}
.fp-about__value:hover { border-color: rgba(255,193,7,0.5); }
.fp-about__value-icon {
	width: 5rem; height: 5rem; background: rgba(255,255,255,0.05); color: var(--fp-primary);
	border-radius: 1rem; display: flex; align-items: center; justify-content: center;
	margin: 0 auto 2rem; border: 1px solid rgba(255,255,255,0.1); transition: background 0.2s;
}
.fp-about__value:hover .fp-about__value-icon { background: rgba(255,193,7,0.2); }
.fp-about__value-icon svg { width: 2.5rem; height: 2.5rem; }
.fp-about__value-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin: 0 0 1rem;
}
.fp-about__value-desc { color: rgba(255,255,255,0.6); font-size: 0.875rem; line-height: 1.625; margin: 0; }

.fp-about__cta { display: flex; justify-content: center; padding-bottom: 3rem; }
.fp-about__cta-btn {
	display: inline-flex; align-items: center; gap: 0.75rem;
	background: var(--fp-primary); color: #000; padding: 1.25rem 2.5rem; border-radius: 9999px;
	font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem;
	letter-spacing: 0.025em; text-transform: uppercase; line-height: 1; text-decoration: none;
	box-shadow: 0 10px 40px -10px rgba(255,193,7,0.6);
	transition: transform 0.2s ease, background 0.2s ease;
}
.fp-about__cta-btn:hover { background: var(--fp-primary-h); transform: scale(1.05); }
.fp-about__cta-btn svg { width: 1.5rem; height: 1.5rem; }

/* Tablet (768–1023): React md values; story stacks (lg:grid-cols-2) */
@media (max-width: 1023px) {
	.fp-about { padding: 7rem 1.5rem 6rem; }
	.fp-about__hero-content { padding: 2.5rem; } /* p-10 */
	.fp-about__h1 { font-size: 4.5rem; } /* md:text-7xl = 72px */
	.fp-about__story { grid-template-columns: 1fr; gap: 4rem; margin-bottom: 5rem; }
	.fp-about__values { padding: 2.5rem; }
}
/* Mobile (<768): React base values; values stack (md:grid-cols-3) */
@media (max-width: 767px) {
	.fp-about__h1 { font-size: 3.75rem; } /* text-6xl = 60px */
	.fp-about__hero-desc { font-size: 1.25rem; } /* text-xl = 20px */
	.fp-about__h2, .fp-about__values-h2 { font-size: 3rem; } /* text-5xl = 48px */
	.fp-about__values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
	.fp-about { padding: 7rem 1rem 5rem; }
	.fp-about__hero { border-radius: 2rem; }
	.fp-about__hero-content { padding: 2rem; }
	.fp-about__values { border-radius: 2rem; }
	.fp-about__story-img { height: 240px; }
	.fp-about__story-img--offset { margin-top: 2rem; }
}

/* === About gallery "Falken Pizza vor Ort." (.fp-about-gallery) — real local photos, scoped === */
.fp-about-gallery { margin-bottom: 6rem; }
.fp-about-gallery__eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
	padding: 0.375rem 1rem; border-radius: 9999px; margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
	color: rgba(255,255,255,0.8); width: max-content;
}
.fp-about-gallery__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fp-primary); display: inline-block; }
.fp-about-gallery__h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3.75rem; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase;
	color: #fff; margin: 0 0 1rem;
}
.fp-about-gallery__h2 .fp-text-primary { color: var(--fp-primary); }
.fp-about-gallery__text { font-size: 1.125rem; line-height: 1.625; color: rgba(255,255,255,0.6); max-width: 38rem; margin: 0 0 2.5rem; }
.fp-about-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 1rem; }
.fp-about-gallery__cars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; }
.fp-about-gallery__item {
	position: relative; margin: 0; overflow: hidden; border-radius: 1.5rem;
	border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
	background: var(--fp-surface); transition: border-color 0.3s ease;
}
.fp-about-gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; }
.fp-about-gallery__item:hover { border-color: rgba(255,193,7,0.5); }
.fp-about-gallery__item:hover img { transform: scale(1.05); }
.fp-about-gallery__item--hero { grid-column: span 2; grid-row: span 2; }
.fp-about-gallery__item--tall { grid-row: span 2; }
.fp-about-gallery__car { aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
	.fp-about-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 175px; }
	.fp-about-gallery__h2 { font-size: 3rem; }
}
@media (max-width: 600px) {
	.fp-about-gallery__grid, .fp-about-gallery__cars { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.fp-about-gallery__item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: auto !important; }
	.fp-about-gallery__item img { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.fp-about-gallery__item, .fp-about-gallery__item img { transition: none; }
	.fp-about-gallery__item:hover img { transform: none; }
}

/* === /speisekarte/ Phase-1 placeholder (.fp-soon) — neutral notice, no products/prices === */
.fp-soon { max-width: 720px; margin: 0 auto; padding: 9rem 1.5rem 7rem; text-align: center; color: #fff; }
.fp-soon__eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
	padding: 0.375rem 1rem; border-radius: 9999px; margin: 0 auto 1.5rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
	color: rgba(255,255,255,0.8); width: max-content;
}
.fp-soon__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fp-primary); display: inline-block; }
.fp-soon__h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 0.95; letter-spacing: -0.01em;
	text-transform: uppercase; margin: 0 0 1.5rem; color: #fff;
}
.fp-soon__h1 .fp-text-primary { color: var(--fp-primary); }
.fp-soon__text { font-size: 1.125rem; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 34rem; margin: 0 auto 2.5rem; }
.fp-soon__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.fp-soon__btn {
	display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem 2rem; border-radius: 9999px;
	text-decoration: none; font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem;
	letter-spacing: 0.03em; text-transform: uppercase; transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.fp-soon__btn--primary { background: var(--fp-primary); color: #000; box-shadow: 0 10px 40px -10px rgba(255,193,7,0.6); }
.fp-soon__btn--primary:hover { background: var(--fp-primary-h); transform: scale(1.04); }
.fp-soon__btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.2); }
.fp-soon__btn--ghost:hover { border-color: var(--fp-primary); color: var(--fp-primary); }

/* === Maps click-to-load consent placeholder (.fp-map) — no Google request before click === */
.fp-map { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.fp-map__btn {
	display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
	background: transparent; border: 0; cursor: pointer; text-align: center;
	font-family: var(--wp--preset--font-family--sans); color: rgba(255,255,255,0.7);
}
.fp-map__btn svg { color: var(--fp-primary); margin-bottom: 0.3rem; }
.fp-map__btn-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; color: #fff; transition: color 0.2s; }
.fp-map__btn-note { font-size: 0.78rem; opacity: 0.65; max-width: 22rem; line-height: 1.45; }
.fp-map__btn:hover .fp-map__btn-title, .fp-map__btn:focus-visible .fp-map__btn-title { color: var(--fp-primary); }
.fp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* === Header search overlay (.fp-search) — wires the existing search icon to native WP search === */
.fp-search {
	position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-start; justify-content: center;
	background: rgba(13,13,13,0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 7rem 1.5rem 1.5rem;
}
.fp-search.is-open { display: flex; }
.fp-search__box { width: 100%; max-width: 640px; display: flex; gap: 0.75rem; align-items: center; }
.fp-search__input {
	flex: 1; background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.15); border-radius: 9999px;
	padding: 1rem 1.5rem; color: #fff; font-size: 1.1rem; font-family: var(--wp--preset--font-family--sans); outline: none;
}
.fp-search__input::placeholder { color: rgba(255,255,255,0.45); }
.fp-search__input:focus { border-color: var(--fp-primary); }
.fp-search__submit {
	background: var(--fp-primary); color: #000; border: 0; border-radius: 9999px; width: 3.25rem; height: 3.25rem;
	display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.fp-search__submit svg { width: 1.4rem; height: 1.4rem; }
.fp-search__close {
	position: absolute; top: 1.5rem; right: 1.5rem; background: transparent; border: 0; color: #fff;
	width: 2.75rem; height: 2.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.7;
}
.fp-search__close:hover { opacity: 1; }
.fp-search__close svg { width: 1.6rem; height: 1.6rem; }

/* === WooCommerce pages: clear the fixed header ===
   Scoped to woo body classes only (shop, product, category, cart, checkout, account),
   so the home/about/etc. layout is untouched. The fixed .fp-header would otherwise
   overlap the woo content (its main has no top padding). NOT a shop redesign. */
body.woocommerce main,
body.woocommerce-page main {
	padding-top: 10rem; /* clear the 130px fixed header + air */
}
@media (max-width: 1023px) {
	body.woocommerce main,
	body.woocommerce-page main { padding-top: 8.5rem; }
}
@media (max-width: 639px) {
	body.woocommerce main,
	body.woocommerce-page main { padding-top: 7rem; } /* mobile header ~90px */
}

/* === WooCommerce "Mein Konto": header/bottom clearance + Falken card styling ===
   The account page <main> carries an INLINE style="padding-top:0;padding-bottom:0"
   (from the page template) which beats normal CSS — so the fixed header overlapped
   the "Anmelden" title. Override with !important, scoped to the account body only.
   Pure layout/styling — no WooCommerce account logic touched. */
body.woocommerce-account main {
	padding-top: 10rem !important;   /* clear the 130px fixed header + air */
	padding-bottom: 6rem !important;
}
@media (max-width: 1023px) {
	body.woocommerce-account main { padding-top: 8.5rem !important; }
}
@media (max-width: 639px) {
	body.woocommerce-account main {
		padding-top: 7rem !important;
		padding-bottom: 9rem !important; /* clear the fixed mobile bottom-bar */
	}
}

/* Login / Register: two responsive Falken cards (flex — immune to grid auto-flow) */
body.woocommerce-account .u-columns.col2-set {
	display: flex; flex-wrap: wrap; gap: 1.5rem;
	max-width: 56rem; margin: 0 auto;
}
@media (max-width: 767px) {
	body.woocommerce-account .u-columns.col2-set { flex-direction: column; }
}
body.woocommerce-account .u-column1,
body.woocommerce-account .u-column2 {
	flex: 1 1 22rem; min-width: 0;
	width: auto !important; float: none !important; margin: 0 !important;
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 2rem 1.75rem;
}
body.woocommerce-account .u-columns h2 {
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
	color: var(--fp-ink); font-size: 1.75rem; margin: 0 0 1.25rem;
}
/* Inputs */
body.woocommerce-account .woocommerce form .form-row input.input-text,
body.woocommerce-account .woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-account input.woocommerce-Input {
	width: 100%; box-sizing: border-box;
	background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 0.5rem;
	color: var(--fp-ink); padding: 0.75rem 0.9rem; font-size: 1rem; line-height: 1.4;
}
body.woocommerce-account input:focus { border-color: var(--fp-primary); outline: none; }
body.woocommerce-account .woocommerce form .form-row label {
	color: var(--fp-ink-muted); font-weight: 600; margin-bottom: 0.35rem; display: block;
}
body.woocommerce-account .required { color: var(--fp-primary); border: 0; text-decoration: none; }
body.woocommerce-account .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce form .form-row + p { color: var(--fp-ink-muted); font-size: 0.9rem; }
/* Password field + visibility toggle */
body.woocommerce-account .woocommerce-password-strength { font-size: 0.85rem; }
body.woocommerce-account .password-input { position: relative; display: block; }
body.woocommerce-account input[type="password"] { padding-right: 2.75rem; }
/* Password visibility toggle: subtle icon inside the field, NOT a yellow button. */
body.woocommerce-account .show-password-input {
	position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
	background: transparent !important; border: none !important; box-shadow: none !important;
	padding: 0 !important; margin: 0 !important; width: 1.5rem !important; height: 1.5rem; min-width: 0;
	color: var(--fp-ink-muted); cursor: pointer;
}
/* The eye icon is a dark (#111) SVG drawn on ::before — invisible on the dark field.
   Recolor it via filter so it's clearly visible; hover/focus → Falken yellow. The filter
   recolors whichever icon WooCommerce shows, so the eye↔eye-slash toggle still works. */
body.woocommerce-account .show-password-input::before {
	filter: brightness(0) saturate(100%) invert(0.75) !important; /* soft light grey ~#bfbfbf */
	transition: filter 0.15s ease;
}
body.woocommerce-account .show-password-input:hover::before,
body.woocommerce-account .show-password-input:focus::before,
body.woocommerce-account .show-password-input:focus-visible::before {
	filter: brightness(0) saturate(100%) invert(78%) sepia(64%) saturate(560%) hue-rotate(358deg) brightness(102%) contrast(101%) !important; /* Falken yellow #ffc400 */
}
body.woocommerce-account .show-password-input:focus-visible {
	outline: 2px solid var(--fp-primary); outline-offset: 2px; border-radius: 4px;
}
/* Remove the default light WooCommerce form border (avoids a double-box inside the card). */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register {
	border: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important;
}
/* "Angemeldet bleiben" checkbox */
body.woocommerce-account .woocommerce-form-login__rememberme {
	display: flex; align-items: center; gap: 0.5rem; color: var(--fp-ink-muted);
	margin: 0.25rem 0 1rem;
}
body.woocommerce-account .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
/* Buttons → Falken yellow */
body.woocommerce-account .woocommerce form button,
body.woocommerce-account button.woocommerce-button,
body.woocommerce-account button[name="login"],
body.woocommerce-account button[name="register"] {
	background: var(--fp-primary); color: var(--fp-bg); border: none; border-radius: 0.5rem;
	padding: 0.8rem 1.6rem; font-weight: 700; text-transform: uppercase; cursor: pointer;
	font-family: 'Anton', sans-serif; letter-spacing: 0.02em; transition: filter 0.2s ease;
}
body.woocommerce-account .woocommerce form button:hover { filter: brightness(1.08); }
body.woocommerce-account .woocommerce-LostPassword a { color: var(--fp-primary); }
/* No horizontal overflow */
body.woocommerce-account .woocommerce { overflow-wrap: break-word; }

/* === WooCommerce Kasse (/kasse/): Falken-Dark-Design — reiner CSS-Pass, Classic Checkout.
   Kein Template-Override, keine Zahlungslogik. Gescoped auf body.woocommerce-checkout. === */
/* Kasse nutzt den vollen, fixed Falken-Header (wie Shop/Warenkorb) → gleiche Top-Clearance
   (10rem/8.5rem/7rem). Auf Mobile ist zusätzlich die fixe Bottom-Bar sichtbar → extra
   Bottom-Clearance, damit „Zahlungspflichtig bestellen" nie verdeckt wird. */
body.woocommerce-checkout main { padding-top: 10rem !important; padding-bottom: 4rem !important; }
@media (max-width: 1023px) { body.woocommerce-checkout main { padding-top: 8.5rem !important; } }
@media (max-width: 639px) { body.woocommerce-checkout main { padding-top: 7rem !important; padding-bottom: 9rem !important; } }
body.woocommerce-checkout .woocommerce { max-width: 1080px; margin-inline: auto; }

/* Notices (Login-/Gutschein-Toggle, Info/Message/Error) → Falken-dunkel mit Amber-Akzent */
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error {
	background: var(--fp-surface) !important;
	border: 1px solid var(--fp-border);
	border-left: 3px solid var(--fp-primary);
	border-radius: var(--fp-radius);
	color: var(--fp-ink) !important;
}
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before { color: var(--fp-primary); }
body.woocommerce-checkout .woocommerce-info a,
body.woocommerce-checkout .showcoupon,
body.woocommerce-checkout .showlogin { color: var(--fp-primary); }
/* WC-Blocks-Notice-Banner (Login-/Gutschein-Hinweis) → Falken-dunkel */
body.woocommerce-checkout .wc-block-components-notice-banner {
	background: var(--fp-surface) !important;
	border: 1px solid var(--fp-border) !important;
	border-left: 3px solid var(--fp-primary) !important;
	border-radius: var(--fp-radius) !important;
	color: var(--fp-ink) !important;
}
body.woocommerce-checkout .wc-block-components-notice-banner .wc-block-components-notice-banner__content,
body.woocommerce-checkout .wc-block-components-notice-banner p { color: var(--fp-ink) !important; }
body.woocommerce-checkout .wc-block-components-notice-banner a { color: var(--fp-primary) !important; }
body.woocommerce-checkout .wc-block-components-notice-banner > svg {
	fill: var(--fp-primary) !important; background: transparent !important; border-radius: 0 !important;
}
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login {
	background: var(--fp-surface); border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius); color: var(--fp-ink);
}

/* Form-Sektionen + Order-Review als dunkle Falken-Cards */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout #order_review {
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: var(--fp-radius);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 { margin-top: 0; color: var(--fp-ink); }
body.woocommerce-checkout #order_review_heading { margin: 0 0 1rem; color: var(--fp-ink); }

/* Inputs / Selects / Textareas → dunkel, lesbar, Focus = Primary */
body.woocommerce-checkout .input-text,
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout textarea,
body.woocommerce-checkout select {
	background: var(--fp-bg) !important;
	border: 1px solid var(--fp-border) !important;
	color: var(--fp-ink) !important;
	border-radius: 8px;
	padding: 0.7rem 0.85rem;
}
body.woocommerce-checkout .input-text:focus,
body.woocommerce-checkout textarea:focus,
body.woocommerce-checkout select:focus { border-color: var(--fp-primary) !important; outline: none; }
body.woocommerce-checkout ::placeholder { color: var(--fp-ink-muted); opacity: 1; }
/* select2 (Land/Region) geschlossener Zustand dunkel */
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 8px; height: auto; padding: 0.35rem 0.4rem;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--fp-ink); line-height: 1.9; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }

/* Labels + Pflichtstern lesbar */
body.woocommerce-checkout .form-row label { color: var(--fp-ink-muted); }
body.woocommerce-checkout .required { color: var(--fp-primary) !important; border: 0; text-decoration: none; }
body.woocommerce-checkout .optional { color: var(--fp-ink-muted); }

/* Order-Review-Tabelle lesbar, Total hervorgehoben */
body.woocommerce-checkout .woocommerce-checkout-review-order-table,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td { border-color: var(--fp-border); color: var(--fp-ink); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .amount { color: var(--fp-ink); }
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount { color: var(--fp-primary); font-size: 1.15rem; }
body.woocommerce-checkout .cart_item .variation,
body.woocommerce-checkout .cart_item dl,
body.woocommerce-checkout .cart_item .wapf-checkout-data { color: var(--fp-ink-muted); font-size: 0.9rem; }

/* Versandmethoden */
body.woocommerce-checkout #shipping_method { margin: 0; padding: 0; }
body.woocommerce-checkout #shipping_method li { list-style: none; color: var(--fp-ink); }
body.woocommerce-checkout #shipping_method label,
body.woocommerce-checkout .woocommerce-shipping-totals th { color: var(--fp-ink); }

/* Payment-Box → dunkel; Notice (z.B. „keine Zahlungsart") lesbar */
body.woocommerce-checkout #payment { background: transparent; border: 0; padding: 0; }
body.woocommerce-checkout #payment ul.wc_payment_methods {
	background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem;
}
body.woocommerce-checkout #payment ul.wc_payment_methods li { list-style: none; color: var(--fp-ink); }
body.woocommerce-checkout #payment label { color: var(--fp-ink); }
body.woocommerce-checkout #payment .payment_box { background: var(--fp-surface-lt); color: var(--fp-ink-muted); border-radius: 8px; }
body.woocommerce-checkout #payment .payment_box::before { border-bottom-color: var(--fp-surface-lt); }

/* Place-Order-Button Falken-Gelb, volle Breite */
body.woocommerce-checkout #place_order {
	background: var(--fp-primary); color: #111; border: 0; width: 100%;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
	border-radius: 10px; padding: 0.9rem 1.5rem; font-size: 1.15rem; margin-top: 0.5rem; cursor: pointer;
}
body.woocommerce-checkout #place_order:hover { filter: brightness(1.06); }

/* Kundendaten-Innenspalten immer gestapelt → saubere einspaltige Form */
body.woocommerce-checkout #customer_details.col2-set { display: block; }
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; margin: 0; }
@media (max-width: 600px) {
	body.woocommerce-checkout .form-row-first,
	body.woocommerce-checkout .form-row-last { width: 100%; float: none; }
}

/* Desktop ≥1024px: zwei Spalten — Kundendaten links, Bestellung/Zahlung rechts (sticky) */
@media (min-width: 1024px) {
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
		gap: 0 2rem; align-items: start;
	}
	body.woocommerce-checkout form.checkout > * { grid-column: 1 / -1; }
	body.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
	body.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
	body.woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 1.5rem; }
}

/* === Single-Product: Falken-Konfigurator-Feeling (Referenz: React „DishModal").
   Übersetzt Design/Flow des Produkt-Popups auf die NORMALE WooCommerce-Produktseite — reines
   CSS, gescoped auf body.single-product. Keine Popup-/Overlay-/Produkt-/APF-/Add-to-cart-Logik. === */
/* Clearance: voller fixed fp-Header (wie Shop) + Mobile-Bottom-Bar */
body.single-product main { padding-top: 9rem !important; padding-bottom: 4rem !important; }
@media (max-width: 1023px) { body.single-product main { padding-top: 8rem !important; } }
@media (max-width: 639px)  { body.single-product main { padding-top: 6.5rem !important; padding-bottom: 9rem !important; } }

/* Breadcrumb → klare Rückkehr zur Speisekarte */
body.single-product .woocommerce-breadcrumb,
body.single-product .wc-block-breadcrumbs { color: var(--fp-ink-muted); font-size: 0.9rem; margin: 0 0 1.25rem; }
body.single-product .woocommerce-breadcrumb a,
body.single-product .wc-block-breadcrumbs a { color: var(--fp-primary); text-decoration: none; }

/* 2 Spalten: Bildfläche | Konfigurator */
body.single-product .wp-block-columns.alignwide { gap: 2.5rem; align-items: flex-start; max-width: 1120px; margin-inline: auto; }
@media (max-width: 781px) { body.single-product .wp-block-columns.alignwide { gap: 1.5rem; } }
@media (min-width: 1024px) { body.single-product .wp-block-columns.alignwide > .wp-block-column:first-child { position: sticky; top: 9rem; } }

/* Bildfläche → dunkle, gerahmte Produktfläche */
body.single-product .wp-block-woocommerce-product-image-gallery,
body.single-product .woocommerce-product-gallery {
	background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius);
	padding: 1rem; margin: 0;
}
body.single-product .woocommerce-product-gallery img { border-radius: calc(var(--fp-radius) - 2px); width: 100%; height: auto; display: block; }

/* Titel / Preis / Beschreibung */
body.single-product .wp-block-post-title, body.single-product .product_title {
	font-family: 'Anton', sans-serif; text-transform: uppercase; font-weight: 400;
	font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.05; margin: 0 0 0.4rem; color: var(--fp-ink);
}
body.single-product .wp-block-woocommerce-product-price, body.single-product p.price, body.single-product .summary .price {
	font-size: 1.6rem; color: var(--fp-primary); font-weight: 700; margin: 0 0 1.1rem;
}
body.single-product .price del { color: var(--fp-ink-muted); font-weight: 400; opacity: 0.7; }
body.single-product .price ins { text-decoration: none; }
body.single-product .wp-block-post-excerpt, body.single-product .woocommerce-product-details__short-description {
	color: var(--fp-ink-muted); line-height: 1.6; margin: 0 0 1.5rem;
}

/* Variationen → linearisierte, klare Sektion mit dunklem Select */
body.single-product .variations, body.single-product .variations tbody,
body.single-product .variations tr, body.single-product .variations th, body.single-product .variations td {
	display: block; width: 100%; border: 0; padding: 0; text-align: left;
}
body.single-product .variations tr { margin: 0 0 1rem; }
body.single-product .variations th.label label {
	font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.1rem; color: var(--fp-ink); margin: 0 0 0.4rem; display: block;
}
body.single-product .variations select {
	width: 100%; background: var(--fp-bg); border: 1px solid var(--fp-border); color: var(--fp-ink);
	border-radius: 10px; padding: 0.8rem 0.9rem; font-size: 1rem;
}
body.single-product .variations select:focus { border-color: var(--fp-primary); outline: none; }
body.single-product .reset_variations { color: var(--fp-ink-muted); font-size: 0.85rem; }
body.single-product .single_variation_wrap .woocommerce-variation-price .price { color: var(--fp-primary); }

/* APF-Gruppen → Konfigurator-Option-Cards */
body.single-product .wapf-wrapper { margin: 1rem 0 0; }
body.single-product .wapf-field-group {
	background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 12px;
	padding: 1.1rem 1.2rem; margin: 0 0 1rem;
}
body.single-product .wapf-field-label { margin-bottom: 0.7rem; }
body.single-product .wapf-field-label label, body.single-product .wapf-field-label span {
	font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.05rem; color: var(--fp-ink); letter-spacing: 0.01em;
}
/* Radio/Checkbox-Optionen → antippbare Cards */
body.single-product .wapf-checkable { margin: 0 0 0.5rem; }
body.single-product .wapf-checkable:last-child { margin-bottom: 0; }
body.single-product .wapf-checkable .wapf-input-label {
	/* position:relative makes this label the containing block for the visually-hidden
	   abspos .wapf-input below. Without it the input's containing block is <main>, so it
	   does NOT scroll with the inner Extra-Zutaten list — after scrolling, the input ends
	   up far below its label, off-screen. A real tap focuses that off-screen input and the
	   browser scrolls the whole page down to it (the reported scroll-jump). Anchoring the
	   input to its own label keeps it on-screen, so focusing it never moves the page. */
	position: relative;
	display: flex; align-items: center; gap: 0.7rem; width: 100%; margin: 0;
	padding: 0.8rem 0.95rem; border: 1px solid var(--fp-border); border-radius: 10px;
	cursor: pointer; color: var(--fp-ink-muted); transition: border-color 0.15s, background 0.15s, color 0.15s;
}
body.single-product .wapf-checkable .wapf-input-label:hover { border-color: rgba(255,255,255,0.25); }
/* Tastatur-Fokus auf der Option-Card sichtbar machen (Input ist visuell versteckt) */
body.single-product .wapf-checkable .wapf-input-label:has(.wapf-input:focus-visible) { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
body.single-product .wapf-checkable .wapf-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body.single-product .wapf-checkable .wapf-label-text { flex: 1; }
body.single-product .wapf-checkable .wapf-input-label::before {
	content: ""; width: 1.2rem; height: 1.2rem; border: 2px solid var(--fp-border); flex-shrink: 0; box-sizing: border-box;
}
body.single-product .wapf-field-radio .wapf-checkable .wapf-input-label::before { border-radius: 999px; }
body.single-product .wapf-field-checkboxes .wapf-checkable .wapf-input-label::before { border-radius: 5px; }
body.single-product .wapf-checkable .wapf-input-label:has(.wapf-input:checked) {
	border-color: var(--fp-primary); background: rgba(255,193,7,0.10); color: var(--fp-ink);
}
body.single-product .wapf-checkable .wapf-input-label:has(.wapf-input:checked)::before {
	background: var(--fp-primary); border-color: var(--fp-primary); box-shadow: inset 0 0 0 3px var(--fp-surface);
}
body.single-product .wapf-price, body.single-product .wapf-pric_preview { color: var(--fp-primary); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* Textareas / Text-Inputs (Spezialwunsch) → dunkel */
body.single-product textarea.wapf-input {
	width: 100%; background: var(--fp-bg); border: 1px solid var(--fp-border); color: var(--fp-ink);
	border-radius: 10px; padding: 0.8rem 0.9rem; min-height: 92px; resize: vertical;
}
body.single-product input.wapf-input[type="text"], body.single-product input.wapf-input[type="number"] {
	background: var(--fp-bg); border: 1px solid var(--fp-border); color: var(--fp-ink); border-radius: 10px; padding: 0.7rem 0.85rem;
}
body.single-product textarea.wapf-input:focus, body.single-product input.wapf-input:focus { border-color: var(--fp-primary); outline: none; }
body.single-product .wapf-input::placeholder { color: var(--fp-ink-muted); }

/* Familienpizza (#155): APF-Select-Felder (#363 „Zutat 1/2/3") an die bestehende
   Extra-Zutaten-/Konfigurator-Optik angleichen — dunkel wie `.variations select` /
   die Spezialwunsch-Textarea, plus CSS-Chevron (der native Pfeil ist auf dunklem Grund
   unsichtbar). NUR Optik, produktgenau gescopt auf `postid-155`; #350, andere APF-Gruppen,
   andere Produkte sowie Warenkorb/Checkout bleiben unberührt. Das geöffnete native
   Options-Menü ist browser-/OS-abhängig nur begrenzt stylbar (siehe option{}) — kein
   JS-Dropdown. */
body.single-product.postid-155 .wapf-field-group select {
	width: 100%; background-color: var(--fp-bg); color: var(--fp-ink);
	border: 1px solid var(--fp-border); border-radius: 10px;
	padding: 0.8rem 2.4rem 0.8rem 0.9rem; /* rechts Platz für den Chevron */
	font-family: 'Outfit', sans-serif; font-size: 1rem; line-height: 1.3; cursor: pointer;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 0.95rem center; background-size: 0.75rem;
	transition: border-color 0.15s, background-color 0.15s;
}
body.single-product.postid-155 .wapf-field-group select:hover { border-color: rgba(255,255,255,0.25); }
body.single-product.postid-155 .wapf-field-group select:focus,
body.single-product.postid-155 .wapf-field-group select:focus-visible { border-color: var(--fp-primary); outline: none; }
/* natives Options-Menü dunkel, soweit der Browser es respektiert (Chromium/Firefox) */
body.single-product.postid-155 .wapf-field-group select option { background-color: var(--fp-surface); color: var(--fp-ink); }
/* gleichmäßiger Abstand zwischen den 3 Zutaten-Feldern (wie die Extras-Liste) */
body.single-product.postid-155 .wapf-field-group .wapf-field-container + .wapf-field-container { margin-top: 0.85rem; }

/* APF Live-Total → prominent (wie das Popup-Total) */
body.single-product .wapf-product-totals {
	background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 10px; padding: 0.85rem 1rem; margin: 0.5rem 0 1.1rem;
}
body.single-product .wapf-product-totals .wapf--inner > div { display: flex; justify-content: space-between; align-items: baseline; color: var(--fp-ink-muted); font-size: 0.95rem; padding: 0.1rem 0; }
body.single-product .wapf-grand-total { color: var(--fp-primary) !important; font-size: 1.3rem; font-weight: 700; }

/* Required-Marker amber */
body.single-product .wapf-required, body.single-product .wapf-field-label .wapf-required,
body.single-product .single-product .required, body.single-product abbr.required { color: var(--fp-primary) !important; }

/* Menge → dunkles, größeres Feld */
body.single-product .quantity { display: inline-flex; align-items: center; margin: 0 0 0.85rem; }
body.single-product .quantity input.qty {
	width: 5rem; background: var(--fp-bg); border: 1px solid var(--fp-border); color: var(--fp-ink);
	border-radius: 10px; padding: 0.7rem; font-size: 1.1rem; text-align: center; height: auto;
}

/* Add-to-cart → Falken-Gelb + roter Offset-Schatten (Signatur), volle Breite */
body.single-product .single_add_to_cart_button {
	display: block; width: 100%; background: var(--fp-primary) !important; color: #111 !important; border: 0 !important;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
	border-radius: 12px; padding: 0.95rem 1.5rem; font-size: 1.25rem; cursor: pointer;
	box-shadow: 4px 4px 0 var(--fp-red); transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
}
body.single-product .single_add_to_cart_button:hover { filter: brightness(1.04); }
body.single-product .single_add_to_cart_button:active { box-shadow: none; transform: translate(4px, 4px); }
body.single-product .woocommerce-variation-add-to-cart { margin-top: 1rem; }

/* Beschreibung / Tabs → dunkel, lesbar */
body.single-product .wp-block-woocommerce-product-details { margin-top: 3rem; color: var(--fp-ink-muted); }
body.single-product .wp-block-woocommerce-product-details h2,
body.single-product .wp-block-woocommerce-product-details h3,
body.single-product .woocommerce-tabs h2 { font-family: 'Anton', sans-serif; text-transform: uppercase; color: var(--fp-ink); }

/* Meta → subtil */
body.single-product .wp-block-woocommerce-product-meta, body.single-product .product_meta {
	color: var(--fp-ink-muted); font-size: 0.85rem; margin-top: 1.75rem; border-top: 1px solid var(--fp-border); padding-top: 1rem;
}
body.single-product .wp-block-woocommerce-product-meta a, body.single-product .product_meta a { color: var(--fp-primary); }

/* Related products */
body.single-product .wc-block-related-products > h2, body.single-product .related.products > h2 {
	font-family: 'Anton', sans-serif; text-transform: uppercase; color: var(--fp-ink);
}

/* --- Varianten-Cards (JS-Progressive-Enhancement: Select → große Größen-Cards). Das echte
   WooCommerce-Select bleibt im DOM (visuell versteckt) als Quelle; Cards spiegeln es nur. --- */
body.single-product .variations.fp-var-enhanced td.value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }
body.single-product .variations.fp-var-enhanced th.label { margin-bottom: 0.6rem; }
body.single-product .variations.fp-var-enhanced .reset_variations { display: none; }
body.single-product .fp-var-cards { display: flex; flex-direction: column; gap: 0.6rem; margin: 0 0 1.25rem; }
body.single-product .fp-var-card {
	display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left; font: inherit;
	background: var(--fp-surface); border: 2px solid var(--fp-border); border-radius: 12px;
	padding: 0.9rem 1.1rem; cursor: pointer; color: var(--fp-ink-muted);
	transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
body.single-product .fp-var-card:hover { border-color: rgba(255,255,255,0.25); }
body.single-product .fp-var-card__dot { width: 1.3rem; height: 1.3rem; border: 2px solid var(--fp-border); border-radius: 999px; flex-shrink: 0; box-sizing: border-box; }
body.single-product .fp-var-card__label { flex: 1; font-weight: 600; color: var(--fp-ink); }
body.single-product .fp-var-card__price { font-family: 'Anton', sans-serif; font-size: 1.1rem; color: var(--fp-ink); white-space: nowrap; }
body.single-product .fp-var-card.is-selected {
	border-color: var(--fp-primary); background: rgba(255,193,7,0.10); color: var(--fp-ink);
	box-shadow: 0 0 0 1px var(--fp-primary), 0 6px 20px rgba(255,193,7,0.08);
}
body.single-product .fp-var-card.is-selected .fp-var-card__dot { background: var(--fp-primary); border-color: var(--fp-primary); box-shadow: inset 0 0 0 4px var(--fp-surface); }
body.single-product .fp-var-card.is-selected .fp-var-card__price { color: var(--fp-primary); }
body.single-product .fp-var-card:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }

/* --- APF-Accordions (JS-Progressive-Enhancement). Required-Gruppen bleiben offen (HTML5-
   Validierung braucht das Pflichtfeld fokussierbar); optionale klappen ein mit „N gewählt". --- */
body.single-product .wapf-field-group.fp-acc { padding: 0; overflow: hidden; }
body.single-product .fp-acc-head {
	display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; font: inherit;
	background: transparent; border: 0; cursor: pointer; padding: 1.1rem 1.2rem; color: var(--fp-ink);
}
body.single-product .fp-acc-head--static { cursor: default; }
body.single-product .fp-acc-title { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.05rem; color: var(--fp-ink); flex: 1; letter-spacing: 0.01em; }
body.single-product .fp-acc-count { color: var(--fp-primary); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
body.single-product .fp-acc-status { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fp-ink-muted); }
body.single-product .fp-acc--req .fp-acc-status { color: var(--fp-primary); }
body.single-product .fp-acc-chev { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--fp-ink-muted); border-bottom: 2px solid var(--fp-ink-muted); transform: rotate(-45deg); transition: transform 0.2s; flex-shrink: 0; }
body.single-product .fp-acc:not(.is-collapsed) .fp-acc-chev { transform: rotate(45deg); }
body.single-product .fp-acc--req .fp-acc-chev { display: none; }
body.single-product .fp-acc .wapf-field-row { padding: 0 1.2rem 1.2rem; }
body.single-product .fp-acc.is-collapsed .wapf-field-row { display: none; }

/* --- Lange APF-Optionslisten (z.B. „Extra-Zutaten" #350, 32 Optionen): interner Scroll
   wie im React-DishModal — ~6 Optionen sichtbar, danach intern scrollbar. Touch-Scroll auf
   Mobile, kein H-Scroll, Checkboxen bleiben normal klickbar. Kurze Listen scrollen nicht. --- */
body.single-product .fp-acc .wapf-checkboxes,
body.single-product .fp-acc .wapf-radios {
	max-height: 22rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--fp-border) transparent;
}
body.single-product .fp-acc .wapf-checkboxes::-webkit-scrollbar,
body.single-product .fp-acc .wapf-radios::-webkit-scrollbar { width: 8px; }
body.single-product .fp-acc .wapf-checkboxes::-webkit-scrollbar-thumb,
body.single-product .fp-acc .wapf-radios::-webkit-scrollbar-thumb { background: var(--fp-border); border-radius: 999px; }
body.single-product .fp-acc .wapf-checkboxes::-webkit-scrollbar-thumb:hover,
body.single-product .fp-acc .wapf-radios::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* --- Reihenfolge: „Spezialwunsch" (#359) NACH den Optionsgruppen (z.B. Extra-Zutaten #350),
   wie im React-DishModal. Rein visuell über Flex-order — DOM/Submit-Reihenfolge unverändert. --- */
body.single-product .wapf-wrapper { display: flex; flex-direction: column; }
body.single-product .wapf-wrapper .wapf-field-group[data-group="359"] { order: 100; }

/* === Header: hide the injected WooCommerce mini-cart icon ===
   The big square #fp-cart-btn opens the same WooCommerce drawer, so the small
   injected mini-cart icon is a duplicate. Hidden visually; the block stays in the
   DOM (the drawer is portaled to <body>) so the bag icon/bottom-bar can still open it. */
.fp-header .wc-block-mini-cart { display: none !important; }

/* === Cart-state badges: count on the desktop bag-icon and the mobile bottom-bar,
   subtotal mirrored onto the bottom-bar label. Only visible when cart is non-empty.
   Badges are position:absolute so they never shift the header/bottom-bar layout. === */
#fp-cart-btn { position: relative; }
.fp-bottom-bar__cart { position: relative; }
.fp-cart-badge,
.fp-bottom-bar__badge {
	min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.7rem; font-weight: 800; line-height: 1; letter-spacing: 0;
	border-radius: 999px; box-sizing: border-box; pointer-events: none;
}
.fp-cart-badge[hidden],
.fp-bottom-bar__badge[hidden] { display: none; }
/* desktop: yellow badge floating at the top-right of the dark square icon (unchanged) */
.fp-cart-badge {
	position: absolute; top: 0.1rem; right: 0.1rem;
	background: var(--fp-primary); color: #111;
	box-shadow: 0 0 0 2px var(--fp-surface);
}
/* mobile: dark count badge sitting inline, directly right of the cart icon */
.fp-bottom-bar__badge {
	background: #111; color: #fff;
}

/* === Shop archive /shop/ + Produktkategorien — Falken menu, derived from the React/Vite
   Speisekarte (src/pages/Speisekarte.tsx: MenuCard + category pills). Pure CSS, scoped to
   the product archives only (post-type-archive-product + tax-product_cat) so the single-
   product page (incl. its related-products grid) stays exactly as built separately.
   WooCommerce products + product_cat terms remain the only data source. The category pills
   are PHP-rendered from real terms (functions.php render_block filter) — only restyled here.
   Adopted from React: dark surface cards, framed image area, Anton title (hover amber),
   amber price, CTA button, rounded-full Anton pills (active = amber + glow). NOT adopted:
   view-mode toggle, mobile category bottom-sheet, Framer Motion, external hero image,
   fake menu data, product badges (no such product data — documented gap). === */

/* category navigation head + pills (React Speisekarte pills) */
.fp-shop-head { text-align: center; margin: 0 0 1.5rem; }
.fp-shop-head__title { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: var(--fp-ink); }
.fp-shop-head__sub { margin: 0.6rem auto 0; max-width: 38rem; color: var(--fp-ink-muted); font-size: 1.0625rem; }
.fp-shop-head::before {
	content: "🔥 Frisch aus dem Ofen"; display: inline-flex; align-items: center;
	margin: 0 0 1rem; padding: 0.4rem 0.9rem; border-radius: 999px;
	background: rgba(255,193,7,0.10); border: 1px solid rgba(255,193,7,0.25); color: var(--fp-primary);
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.fp-shop-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 0 2rem; }
/* Toolbar: category bar (left) + view-toggle (right) in ONE flex row (React/Vite parity). Sticky +
   backdrop live on the toolbar (moved off the inner .fp-shop-cats/.fp-shop-mobile, see media blocks). */
.fp-shop-toolbar { display: flex; align-items: center; gap: 1rem; }
.fp-shop-cat {
	display: inline-block; padding: 0.6rem 1.3rem; border: 2px solid var(--fp-border); border-radius: 999px;
	font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.05rem; line-height: 1; letter-spacing: 0.02em;
	text-transform: uppercase; text-decoration: none; color: var(--fp-ink); background: var(--fp-surface);
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; white-space: nowrap;
}
.fp-shop-cat:hover, .fp-shop-cat:focus-visible { border-color: rgba(255,255,255,0.3); }
.fp-shop-cat.is-active { background: var(--fp-primary); border-color: var(--fp-primary); color: #0d0d0d; box-shadow: 0 0 15px rgba(255,193,7,0.4); }
/* Secondary sub-category pills (Getränke children) — SECOND tier (kleiner via padding/font), aber
   GLEICHE Box-Oberfläche wie die Hauptkategorie-Pills (.fp-shop-cat): dunkle Surface-Füllung,
   2px-Border, 999px-Radius, gleicher Hover (Border hellt auf) + gleicher Active-Look (solides Primary).
   Vorher: background:transparent + 1px-Border → wirkte „hohl/glasig", optisch anders als Haupt-Pills. */
.fp-shop-subcats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: -1.25rem 0 2rem; }
.fp-shop-subcat {
	display: inline-block; padding: 0.4rem 1rem; border: 2px solid var(--fp-border); border-radius: 999px;
	font-weight: 700; font-size: 0.82rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
	color: var(--fp-ink-muted); background: var(--fp-surface); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; white-space: nowrap;
}
.fp-shop-subcat:hover, .fp-shop-subcat:focus-visible { border-color: rgba(255,255,255,0.3); color: var(--fp-ink); }
.fp-shop-subcat.is-active { background: var(--fp-primary); border-color: var(--fp-primary); color: #0d0d0d; box-shadow: 0 0 15px rgba(255,193,7,0.4); }
/* ── Stufe-2 progressive category navigation (Interactivity-Router, assets/js/fp-shop-nav.js) ──
   Soft-dim the product grid only while a router navigation is in flight (the class is added after
   ~140ms so fast swaps don't flicker). The router swaps the region atomically — the old grid stays
   visible (dimmed) until the new one is ready, so there is no collapse / CLS. */
.wp-block-woocommerce-product-collection { transition: opacity 0.2s ease; }
.wp-block-woocommerce-product-collection.fp-grid-busy { opacity: 0.45; pointer-events: none; }
/* head / drinks sub-nav toggled out of their context by the JS sync */
.fp-shop-head[hidden], .fp-shop-subcats[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-collection { transition: none; }
	.fp-shop-cat, .fp-shop-subcat { transition: none; }
}
/* On the shop page the visible hero is the "Speisekarte" head above. Keep the real archive H1
   ("Shop") in the DOM/a11y tree (screen-reader-only) for SEO + heading structure rather than
   removing it with display:none. */
body.woocommerce-shop .wp-block-query-title {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* category-archive hero: the term title as a Falken heading + the term description */
body.tax-product_cat .wp-block-query-title { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 0.95; text-align: center; margin: 0 0 0.5rem; color: var(--fp-ink); }
body.tax-product_cat .term-description { text-align: center; color: var(--fp-ink-muted); max-width: 40rem; margin: 0 auto 1.5rem; }

/* ════ Sticky category navigation (React/Vite Speisekarte feeling) ════
   Desktop: the pill bar sticks just under the fixed header (top follows the live header height via
   --fp-header-h, set by fp-shop-nav.js). Mobile: a compact sticky trigger ("PIZZA ▼") opens a
   bottom-sheet that reuses the same links. Router/flow untouched; no-JS fallback = the plain pill row. */

/* Breakpoint-correct DEFAULTS for the sticky-stack vars so the bars land right on the very first
   paint and even with JS off (fp-shop-nav.js overrides these with live measurements once it runs).
   --fp-header-h = fixed-header height, --fp-catbar-h = main category bar height. */
:root { --fp-header-h: 130px; --fp-catbar-h: 68px; }
@media (max-width: 1023px) { :root { --fp-header-h: 90px; --fp-catbar-h: 66px; } }

/* Desktop ≥1024: sticky toolbar = pills (left, horizontal-scroll) + view-toggle (right) */
@media (min-width: 1024px) {
	.fp-shop-toolbar {
		position: sticky; top: var(--fp-header-h, 130px); z-index: 60;
		/* komplette sichtbare Gruppe (Pills + Liste/Grid) als Block mittig — wie der Header.
		   justify-content: center + flex:0 0 auto je Teil → natürlicher Gap dazwischen, Gesamtgruppe zentriert. */
		display: flex; justify-content: center; align-items: center; gap: 1.25rem;
		margin: 0 0 1.5rem; padding: 0.85rem 0;
		background: rgba(13,13,13,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		box-shadow: 0 10px 30px rgba(0,0,0,0.45);  /* graue 1px-Linie (border-bottom) entfernt — dunkle Box + Schatten bleiben */
	}
	.fp-shop-toolbar > .fp-shop-cats { flex: 0 0 auto; justify-content: center; min-width: 0; margin: 0; flex-wrap: nowrap; }
	.fp-shop-toolbar > .fp-shop-viewtoggle { flex: 0 0 auto; }
	.fp-shop-toolbar > .fp-shop-cats::-webkit-scrollbar { display: none; }
	/* drinks sub-bar: sticky DIRECTLY below the main bar (header + main-bar height); the negative
	   top margin cancels the main bar's bottom margin so the two are flush in flow AND when stuck. */
	body.tax-product_cat .fp-shop-subcats {
		position: sticky; top: calc(var(--fp-header-h, 130px) + var(--fp-catbar-h, 64px)); z-index: 59;
		margin: -1.5rem 0 1.5rem; padding: 0.6rem 0;  /* horizontales Padding 0 → Sub-Pills fluchten pixelgenau mit der Grid-Kante */
		background: rgba(13,13,13,0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		box-shadow: 0 12px 24px rgba(0,0,0,0.4);  /* graue 1px-Linie (border-bottom) entfernt — dunkle Box + Schatten bleiben */
	}
	.fp-shop-mobile, .fp-shop-sheet, .fp-shop-submobile { display: none !important; }
}

/* ── Getränke: Haupt-Bar + Sub-Bar als EINE zusammenhängende Einheit ─────────────────────────────
   Analyse: Haupt-Bar (.fp-shop-toolbar) und Sub-Bar (.fp-shop-subcats bzw. mobil .fp-shop-submobile)
   sind flush gestapelte Geschwister in <main> mit IDENTISCHEM Glass-Background (negativer top-margin
   der Sub-Bar hebt den bottom-margin der Haupt-Bar auf → 0px Lücke). Die einzige sichtbare „Trennung"
   ist der nach unten geworfene box-shadow der HAUPT-Bar, der als Naht/Doppelschatten auf die Sub-Bar
   fällt. Fix ohne neuen Wrapper: sobald die Sub-Bar aktiv ist, nehmen wir der Haupt-Bar diesen Schatten
   → beide Bars verschmelzen optisch zu EINER Box; der einzige verbleibende Schatten kommt unten von der
   Sub-Bar (= Unterkante der Gesamteinheit). :has() greift live mit dem [hidden]-Toggle des Router-JS;
   auf normalen Kategorien (Pizza → subcats/submobile [hidden]) matcht nichts → Haupt-Bar behält Schatten. */
main:has(> .fp-shop-subcats:not([hidden])) .fp-shop-toolbar,
main:has(> .fp-shop-submobile:not([hidden])) .fp-shop-toolbar { box-shadow: none; }

/* Mobile: die Sub-Bar (.fp-shop-submobile) hat selbst keinen Schatten → sie bekommt jetzt den unteren
   Schatten der Gesamteinheit, damit die verschmolzene Box unten abhebt wie zuvor die Haupt-Bar allein. */
@media (max-width: 1023px) {
	main:has(> .fp-shop-submobile:not([hidden])) .fp-shop-submobile { box-shadow: 0 8px 24px rgba(0,0,0,0.45); }
}

/* Mobile ≤1023: compact sticky trigger + sheet (only when JS enhanced); else the pill row stays */
.fp-shop-mobile, .fp-shop-submobile { display: none; }
@media (max-width: 1023px) {
	body.fp-shop-enhanced .fp-shop-cats { display: none; }
	body.fp-shop-enhanced .fp-shop-mobile { display: block; }
	/* mobile: replace the drinks chip row with a dedicated second-level trigger + sheet */
	body.fp-shop-enhanced .fp-shop-subcats { display: none; }
	body.fp-shop-enhanced .fp-shop-submobile:not([hidden]) { display: block; }
	/* sub-trigger: sticky DIRECTLY below the main trigger; negative top margin cancels the main
	   trigger's bottom margin so the two stack flush in flow AND when stuck. */
	.fp-shop-submobile {
		position: sticky; top: calc(var(--fp-header-h, 90px) + var(--fp-catbar-h, 60px)); z-index: 59;
		margin: -1.25rem 0 1.25rem; padding: 0.5rem 0 0;
		background: rgba(13,13,13,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		/* graue 1px-Linie (border-bottom) auf Mobile entfernt — dunkle Box + Backdrop bleiben */
	}
	.fp-shop-trigger--sub {
		font-size: 0.92rem; padding: 0.65rem 1.15rem;
		/* erbt die solide Surface-LT-Füllung vom Basis-.fp-shop-trigger (kein eigener background mehr —
		   das frühere background:transparent war ohnehin tote, überschriebene Regel). */
		border-color: var(--fp-border); color: var(--fp-ink-muted);
	}
	.fp-shop-trigger--sub .fp-shop-trigger__chev { border-color: var(--fp-ink-muted); }
	.fp-shop-toolbar {
		position: sticky; top: var(--fp-header-h, 90px); z-index: 60;
		margin: 0 0 1.25rem; padding: 0.6rem 0;
		background: rgba(13,13,13,0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		box-shadow: 0 8px 24px rgba(0,0,0,0.45);  /* graue 1px-Linie (border-bottom) auf Mobile entfernt — dunkle Box + Schatten bleiben */
		gap: 0.75rem;
	}
	.fp-shop-toolbar > .fp-shop-mobile { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
	.fp-shop-trigger {
		width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
		/* Surface-LT (#222) statt Surface (#191) NUR für die großen Mobile-Trigger: eine vollflächige Box
		   in #191 auf dem fast-schwarzen #0D0D0D-Seitengrund wirkt „hohl/transparent". #222 (offizielles
		   Token, dunkle Surface) gibt der großen Box klare Präsenz — solider schwarzer Box-Look wie die
		   Desktop-Pills. Gilt für Haupt- UND Sub-Trigger (dieser Basis-Selector greift bei beiden). */
		background: var(--fp-surface-lt); border: 2px solid var(--fp-border); border-radius: 999px;
		color: var(--fp-ink); font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
		font-size: 1.05rem; line-height: 1; padding: 0.8rem 1.3rem; cursor: pointer;
	}
	.fp-shop-trigger:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
	.fp-shop-trigger__chev {
		width: 0.6rem; height: 0.6rem; flex-shrink: 0; margin-top: -0.2rem;
		border-right: 2px solid var(--fp-ink-muted); border-bottom: 2px solid var(--fp-ink-muted);
		transform: rotate(45deg); transition: transform 0.2s ease;
	}
	.fp-shop-trigger[aria-expanded="true"] .fp-shop-trigger__chev { transform: rotate(-135deg); margin-top: 0.15rem; }
}

/* Bottom sheet (mobile) */
.fp-shop-sheet { position: fixed; inset: 0; z-index: 9500; }
.fp-shop-sheet[hidden] { display: none; }
.fp-shop-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s ease; }
.fp-shop-sheet.is-open .fp-shop-sheet__backdrop { opacity: 1; }
.fp-shop-sheet__panel {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; display: flex; flex-direction: column;
	background: var(--fp-surface); border-top: 1px solid var(--fp-border); border-radius: 1.25rem 1.25rem 0 0;
	box-shadow: 0 -20px 50px rgba(0,0,0,0.6);
	transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.fp-shop-sheet.is-open .fp-shop-sheet__panel { transform: translateY(0); }
.fp-shop-sheet__bar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--fp-border); flex-shrink: 0; }
.fp-shop-sheet__title { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.02em; color: var(--fp-ink); }
.fp-shop-sheet__close { background: rgba(255,255,255,0.06); border: 0; color: var(--fp-ink); width: 2.25rem; height: 2.25rem; border-radius: 999px; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.fp-shop-sheet__close:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
.fp-shop-sheet__list { overflow-y: auto; padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.55rem; }
/* sheet buttons — main cats AND drinks sub-cats share one big-tappable Anton style */
.fp-shop-sheet__list .fp-shop-cat,
.fp-shop-sheet__list .fp-shop-subcat {
	display: block; width: 100%; white-space: normal; text-align: left;
	padding: 1rem 1.25rem; border-radius: 0.9rem;
	font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: 0.02em;
	text-transform: uppercase; color: var(--fp-ink); background: var(--fp-surface); border: 2px solid var(--fp-border);
}
.fp-shop-sheet__list .fp-shop-subcat.is-active {
	background: var(--fp-primary); border-color: var(--fp-primary); color: #0d0d0d; box-shadow: 0 0 15px rgba(255,193,7,0.4);
}
body.fp-sheet-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.fp-shop-sheet__panel, .fp-shop-sheet__backdrop, .fp-shop-trigger__chev { transition: none; }
}

/* breadcrumb → subtle */
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-breadcrumb { color: var(--fp-ink-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; }
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-breadcrumb a { color: var(--fp-ink-muted); text-decoration: none; }
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-breadcrumb a:hover { color: var(--fp-primary); }

/* result count + ordering bar */
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-result-count { color: var(--fp-ink-muted); font-size: 0.9rem; margin: 0; }
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-ordering select,
body:is(.post-type-archive-product, .tax-product_cat) select.orderby {
	background: var(--fp-surface-lt); color: var(--fp-ink); border: 1px solid var(--fp-border); border-radius: 8px;
	padding: 0.5rem 0.9rem; font-size: 0.9rem; cursor: pointer;
}
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-ordering select:focus { border-color: var(--fp-primary); outline: none; }

/* --- product grid --- */
body:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none;
	align-items: stretch;  /* Equal-Height: Karten strecken sich auf Reihenhöhe; feste Content-Slots (s. u.) machen sie global gleich hoch */
}
@media (max-width: 1023px) { body:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }
@media (max-width: 480px)  { body:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { gap: 0.8rem; } }

/* ── View-Toggle (Liste/Grid) — Konzept aus React/Vite (Speisekarte.tsx: viewMode large|compact).
   OHNE Body-Klasse bleibt das responsive Default-Grid oben (Desktop 3 / Mobile 2) EXAKT erhalten.
   Eine explizite Wahl setzt body.fp-view-list / .fp-view-grid und schaltet NUR die Spaltenzahl —
   Karten, Bilder, Aspect-Ratio, Preise unverändert. „Liste"=React large (3/1), „Grid"=React compact (4/2). ── */
body.fp-view-list:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* Desktop Liste = 3 */
body.fp-view-grid:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* Desktop Grid  = 4 */
@media (max-width: 1023px) {
	body.fp-view-list:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { grid-template-columns: 1fr; }                       /* Mobile Liste = 1 */
	body.fp-view-grid:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Mobile Grid  = 2 */
}

/* Toggle-Control: nur mit JS sichtbar (sonst greift das responsive Default-Grid). React-Parity:
   Pill-Buttons, aktiv = primary/schwarz, inaktiv = surface/gedämpft; mobil nur Icons. */
.fp-shop-viewtoggle { display: none; }
body.fp-shop-enhanced .fp-shop-toolbar .fp-shop-viewtoggle { display: flex; gap: 0.5rem; align-items: center; flex: 0 0 auto; margin: 0; }
.fp-shop-view {
	display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; position: relative;
	padding: 0.5rem 0.95rem; border-radius: 999px; border: 2px solid var(--fp-border);
	background: var(--fp-surface); color: var(--fp-ink-muted);
	font-family: "Anton", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.82rem; line-height: 1;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.fp-shop-view:hover { color: var(--fp-ink); }
.fp-shop-view svg { width: 1.15em; height: 1.15em; }
.fp-shop-view.is-active { background: var(--fp-primary); color: #000; border-color: var(--fp-primary); }
.fp-shop-view:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
@media (max-width: 1023px) {
	.fp-shop-view { padding: 0.55rem; }            /* mobil kompakt, nur Icons (wie React) */
	.fp-shop-view__label { display: none; }        /* a11y bleibt über aria-label */
}

/* --- product card (React MenuCard) --- */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product {
	display: flex; flex-direction: column; background: var(--fp-surface); border: 1px solid var(--fp-border);
	border-radius: 16px; overflow: hidden; margin: 0; padding: 0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product:hover {
	border-color: rgba(255,193,7,0.5); box-shadow: 0 8px 30px rgba(0,0,0,0.6); transform: translateY(-2px);
}
/* image area: fixed 4:3 frame, dark; real images cover, the WooCommerce placeholder shows faint + centered */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-image {
	margin: 0; aspect-ratio: 4 / 3; background: var(--fp-bg); overflow: hidden; position: relative;  /* volles Produktbild wie zuvor (kein Fixed-Height-Crop) */
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-image a {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-image img {
	width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.05); }
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product img.woocommerce-placeholder {
	width: 42%; height: auto; object-fit: contain; opacity: 0.13; transform: none !important;
}
/* title */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product > .wp-block-post-title {
	margin: 0; padding: 0.8rem 1.1rem 0; text-align: left;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product > .wp-block-post-title a {
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fp-ink);
	font-size: 1.35rem; line-height: 1.05; text-decoration: none; transition: color 0.2s ease;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product:hover > .wp-block-post-title a { color: var(--fp-primary); }
/* price */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-price {
	padding: 0.35rem 1.1rem 0; text-align: left; display: block;
}
/* Woo-Block-Margins normalisieren: die inline 1rem auf den Preis-/Summary-Wrappern straffen → engerer Cluster */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wp-block-woocommerce-product-price { margin-bottom: 0.4rem !important; }
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-price .amount {
	color: var(--fp-primary); font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 0.01em;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-price > span:not(.amount):not(.screen-reader-text) { color: var(--fp-ink-muted); }
/* CTA button (Select options / In den Warenkorb) */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button {
	margin: auto 0 0; padding: 0.7rem 1.1rem 0.85rem; display: block;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button { margin: 0; }
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; box-sizing: border-box; margin: 0;
	background: var(--fp-primary); color: #0d0d0d; font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
	font-size: 0.92rem; padding: 0.6rem 1rem; border-radius: 8px; border: 0; text-decoration: none;
	box-shadow: 3px 3px 0 var(--fp-red); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--fp-red); }
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button__link:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--fp-red); }
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .added_to_cart { display: block; text-align: center; margin-top: 0.5rem; color: var(--fp-primary); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
/* CTA: Trennlinie über dem Button (inset durch das Wrapper-Padding) + Pfeil im Button (React MenuCard-Footer, lucide ArrowRight als Maske → nimmt die Button-Textfarbe an) */
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button::before {
	content: ""; display: block; height: 1px; background: var(--fp-border); margin: 0 0 0.7rem;
}
body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button__link::after {
	content: ""; width: 1.05em; height: 1.05em; flex-shrink: 0; background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Desktop ≥1024: Equal-Height via feste Content-Slots (wie Mobile). Titel + Beschreibung je
   fester 2-Zeilen-Slot; fehlt die Beschreibung (kein .fp-product-summary-Element → Button folgt
   direkt auf den Preis), wird der Slot per :has-Reserve unter dem Preis trotzdem freigehalten →
   ALLE Karten gleich hoch. Bild (4:3) unangetastet. Clamp NUR Archiv/Kategorie/Suche — Popup
   (body.fp-embed) und Single-Produktseite bleiben mit voller Beschreibung. ── */
@media (min-width: 1024px) {
	/* Titel: fester 2-Zeilen-Slot */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product > .wp-block-post-title a {
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.1em;
	}
	/* Beschreibung vorhanden: auf 2 Zeilen clampen + 2-Zeilen-Slot (Clamp auf das <p>, da Text dort liegt) */
	/* Fester 2-Zeilen-Slot als Box-Höhe (border-box) + overflow:hidden = harter Clamp, unabhängig vom
	   -webkit-box (das WC-Block-Layout setzt das <p> auf flow-root). 2.8rem = padding-top 0.5rem + 2 Zeilen. */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .fp-product-summary {
		box-sizing: border-box; min-height: 2.8rem; max-height: 2.8rem; overflow: hidden;
	}
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .fp-product-summary p {
		margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	/* Beschreibung fehlt: Button folgt direkt auf den Preis → gleichen Slot reservieren.
	   4.25rem (68px) = empirisch der Preis→Button-Abstand einer beschriebenen Karte. */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wp-block-woocommerce-product-price:has(+ .wc-block-components-product-button) { margin-bottom: 4.25rem !important; }
}

/* ── Mobile / 2-Spalten (≤1023): GLEICH HOHE, kompakte Karten via feste Content-Slots (Best Practice
   für uniforme Produkt-Grids). Titel + Beschreibung haben feste 2-Zeilen-Slots mit enger line-height
   → alle Karten identisch hoch OHNE Leerraum zwischen Beschreibung und Button. Der „Verschnitt" bei
   kurzem Text ist nur die leere 2. Zeile im Slot (~1 Zeile), bewusst gegen gleiche Höhe getauscht.
   Desktop (≥1024) unverändert. Bild bleibt 4:3 (unangetastet, kein Crop, keine feste Höhe). ── */
@media (max-width: 1023px) {
	/* gleiche Höhe pro Reihe; Karte = Flex-Column, Button unten konsistent */
	body:is(.post-type-archive-product, .tax-product_cat) ul.wc-block-product-template { align-items: stretch; }
	/* Titel: fester 2-Zeilen-Slot, eng */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product > .wp-block-post-title { padding-top: 0.4rem; }
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product > .wp-block-post-title a {
		display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
		line-height: 1.05; min-height: 2.1em;
	}
	/* Preis: 1 Zeile, eng */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wp-block-woocommerce-product-price { margin-bottom: 0.2rem !important; }
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-price { padding-top: 0.15rem; }
	/* Beschreibung fehlt (mobil): Reserve unter dem Preis = Preis→Button-Abstand einer beschriebenen
	   Karte (jetzt 1-Zeilen-Beschreibung), damit Karten ohne Beschreibung (z. B. Getränke) gleich hoch
	   bleiben. Wert an den neuen 1-Zeilen-Slot angepasst (empirisch, s. QA). */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wp-block-woocommerce-product-price:has(+ .wc-block-components-product-button) { margin-bottom: 2.5rem !important; }
	/* Variante B: Beschreibung mobil auf festen 1-Zeilen-Slot (statt 2) → kürzere Karte, Equal-Height
	   bleibt. Clamp auf das <p> (dort liegt der Text). 1.35rem = 1 Zeile (16.9px) + padding-top 0.25rem. */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .fp-product-summary {
		margin-bottom: 0.15rem !important; padding-top: 0.25rem; line-height: 1.3; box-sizing: border-box; min-height: 1.35rem; max-height: 1.35rem; overflow: hidden;
	}
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .fp-product-summary p {
		margin: 0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
	}
	/* Footer/Button kompakt (Variante B): mt-auto hält den Button unten. Divider (::before) + Pfeil
	   (::after) mobil AUS → Label „Wählen & bestellen" passt einzeilig (vorher ~3-Zeilen-Umbruch, weil
	   Label + Pfeil auf der 173px-Karte nicht in 1 Zeile passten). Link mobil display:block statt flex
	   (Flex bläht die Zeilenbox auf) + white-space:nowrap → garantiert 1 Zeile. Font bleibt beim
	   Theme-Small-Preset (13px, has-small-font-size; passt einzeilig in die ~123px Link-Innenbreite).
	   Gut klickbar über Padding 0.42rem (~45px hoch). Divider/Pfeil auf Desktop (≥1024) unverändert. */
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button { margin-top: auto; padding: 0.25rem 0.8rem 0.45rem; }
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button::before { display: none; }
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button__link::after { display: none; }
	body:is(.post-type-archive-product, .tax-product_cat) li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
		display: block; text-align: center;  /* statt flex: der Pfeil ist mobil aus → block macht den Button-Link kompakt (Flex bläht die Zeilenbox auf) */
		line-height: 1.2; letter-spacing: 0.02em; white-space: nowrap; padding: 0.42rem 0.7rem;
	}
}

/* pagination */
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination ul,
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; list-style: none; margin: 2.5rem 0 0; padding: 0; }
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination a,
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination span,
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination a,
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
	border: 1px solid var(--fp-border); border-radius: 8px; color: var(--fp-ink); background: var(--fp-surface); text-decoration: none; font-weight: 700;
}
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination a:hover,
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination a:hover { border-color: var(--fp-primary); color: var(--fp-primary); }
body:is(.post-type-archive-product, .tax-product_cat) .woocommerce-pagination .current,
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination .current { background: var(--fp-primary); border-color: var(--fp-primary); color: #0d0d0d; }

/* L3a — „Weitere Produkte laden"-Button: Nummern + Vorherige nur OPTISCH ausblenden (bleiben im DOM
   → crawlbar/SEO + No-JS via Next-Kette), „Nächste Seite" (Label „Weitere Produkte laden") als großen
   CTA stylen. Router/Interactivity + echte /page/-URLs bleiben unangetastet. */
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination-previous,
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination-numbers { display: none; }
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination a.wp-block-query-pagination-next {
	min-width: auto; height: auto; padding: 0.9rem 2.2rem; gap: 0.5rem;
	background: var(--fp-primary); color: #0d0d0d; border: 0; border-radius: 10px;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem;
	box-shadow: 3px 3px 0 var(--fp-red); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination a.wp-block-query-pagination-next:hover {
	transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--fp-red); color: #0d0d0d;
}
/* Lade-State während fetch (fp-load-more.js): dimmen + sperren, kein Layout-Shift */
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination a.wp-block-query-pagination-next.is-loading {
	opacity: 0.6; pointer-events: none; cursor: progress; transform: none; box-shadow: 3px 3px 0 var(--fp-red);
}
/* Letzte Seite erreicht (alle Produkte geladen): Pagination ausblenden – Knoten bleibt für den
   Interactivity-Router-Morph (Kategorie-Wechsel) erhalten, nur optisch weg (kein Gap). */
body:is(.post-type-archive-product, .tax-product_cat) .wp-block-query-pagination.fp-lm-done { display: none; }

/* mobile: bottom clearance for the fixed bottom-bar + horizontal-scroll pills */
@media (max-width: 639px) {
	body:is(.post-type-archive-product, .tax-product_cat) main { padding-bottom: 9rem; }
	.fp-shop-cats { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding-bottom: 0.3rem; }
	.fp-shop-cats::-webkit-scrollbar { display: none; }
	.fp-shop-subcats { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; padding-bottom: 0.3rem; }
	.fp-shop-subcats::-webkit-scrollbar { display: none; }
	.fp-shop-cat { font-size: 0.95rem; padding: 0.5rem 1.05rem; }
}

/* === Animations === */
@keyframes fp-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.5; transform: scale(0.85); }
}

@keyframes fp-fadein-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* === Hero entrance motion — translated from React Framer Motion (Home.tsx), CSS-only.
   `backwards` fill = hidden before/during, reverts to natural state after (no lingering transform → design stays pixel-identical). Runs once on load (React uses `animate`, not whileInView). === */
@keyframes fp-hero-up    { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fp-hero-scale { from { opacity: 0; transform: scale(0.95); }      to { opacity: 1; transform: scale(1); } }
@keyframes fp-hero-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
/* Hero content group: React initial{opacity:0,y:30} → animate, duration 0.6 easeOut */
.fp-hero__content { animation: fp-hero-up 0.6s ease-out backwards; }
/* Hero visual group: React initial{opacity:0,scale:0.95} → duration 0.8 delay 0.1 easeOut */
.fp-hero__visual { animation: fp-hero-scale 0.8s ease-out 0.1s backwards; }
/* Floating cards: React initial{opacity:0,x:50} → duration 0.5, staggered delays 0.2/0.3/0.4 */
.fp-info-card { animation: fp-hero-right 0.5s ease-out backwards; }
.fp-info-card:nth-child(1) { animation-delay: 0.2s; }
.fp-info-card:nth-child(2) { animation-delay: 0.3s; }
.fp-info-card:nth-child(3) { animation-delay: 0.4s; }

/* Scroll-reveal: final state = visible by default (CSS) */
.fp-reveal {
	opacity: 1;
	transform: translateY(0);
}

/* JS adds .fp-reveal--hidden initially, then removes it with transition */
.fp-reveal--hidden {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* === Mobile Bottom Bar ===
 * React: MobileBottomBar.tsx
 * fixed left-1/2 -translate-x-1/2 w-[calc(100%-2rem)] max-w-[400px]
 * bottom: calc(1.5rem + env(safe-area-inset-bottom))
 * bg-[#18181b]/95 backdrop-blur-xl rounded-[1.5rem] h-[72px]
 * shadow-[0_10px_40px_rgba(0,0,0,0.8)] border border-white/10
 */
.fp-bottom-bar {
	display: none; /* hidden by default — shown only on mobile */
}
@media (max-width: 767px) {
	.fp-bottom-bar {
		display: flex;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
		width: calc(100% - 2rem);
		max-width: 400px;
		z-index: 9000; /* above content, below mobile menu overlay */
		background: rgba(24, 24, 27, 0.95);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 1.5rem; /* rounded-[1.5rem] */
		border: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
		height: 72px;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.5rem;
		overflow: visible;
	}
	.fp-bottom-bar__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: rgba(255, 255, 255, 0.5);
		transition: color 0.2s;
		text-decoration: none;
		border-radius: 0.75rem;
		min-height: 44px;
	}
	.fp-bottom-bar__item:hover { color: #fff; }
	.fp-bottom-bar__icon {
		width: 1.5rem;
		height: 1.5rem;
		margin-bottom: 0.25rem;
	}
	.fp-bottom-bar__label {
		font-size: 0.625rem; /* 10px */
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		line-height: 1;
	}
	/* Center dominant cart button */
	.fp-bottom-bar__center {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: -2rem; /* React: -mt-8 = lift above bar */
	}
	.fp-bottom-bar__cart {
		background: var(--fp-primary);
		border: 6px solid var(--fp-bg);
		min-width: 130px;
		height: 76px;
		border-radius: 1.5rem; /* rounded-3xl */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		padding: 0 1rem;
		box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
		cursor: pointer;
		transition: transform 0.15s;
		min-height: 44px;
		color: #000;
	}
	.fp-bottom-bar__cart:active { transform: scale(0.95); }
	/* Top row inside the cart button: icon + count badge side by side ([bag] [3]).
	   When empty the badge is hidden, so this is just the centered icon as before. */
	.fp-bottom-bar__cart-top {
		display: flex; align-items: center; justify-content: center; gap: 0.3rem;
	}
	.fp-bottom-bar__cart svg {
		width: 1.5rem;
		height: 1.5rem;
		stroke: #000;
	}
	.fp-bottom-bar__cart-label {
		font-size: 0.6875rem; /* 11px */
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: #000;
		line-height: 1;
		white-space: nowrap;
	}
}

/* === WooCommerce Warenkorb /warenkorb/ — Falken cart, styled after the React CartModal
   (src/components/layout/CartModal.tsx) but as a NORMAL classic-cart page, NOT a popup.
   Pure CSS, scoped to body.woocommerce-cart. WooCommerce keeps ALL cart logic: line items,
   quantity inputs, remove links, coupons, totals, nonces, the /kasse/ checkout button.
   Adopted from the popup: dark frame, surface item-cards (name + APF meta + line total),
   quantity control, à-unit-price, the big yellow checkout CTA with the red brutalist
   offset shadow, the dark totals summary card and a Falken empty state. NOT adopted
   (popup-specific): overlay/backdrop, bottom-sheet, drag-handle, close-X, modal/spring
   animations, body-scroll-lock, edit-via-DishModal. === */

/* bottom clearance for the fixed mobile bottom-bar (top clearance already via .woocommerce main) */
@media (max-width: 639px) {
	body.woocommerce-cart main { padding-bottom: 9rem; }
}

/* Cart header: page title "Warenkorb" → Falken heading with an amber bag accent (like the popup header) */
body.woocommerce-cart .wp-block-post-title {
	display: flex; align-items: center; gap: 0.75rem;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
	font-size: clamp(2rem, 5vw, 3rem); line-height: 0.95; margin: 0 0 1.5rem; color: var(--fp-ink);
}
body.woocommerce-cart .wp-block-post-title::before {
	content: ""; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
	background-color: rgba(255,193,7,0.10);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC107' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 1.5rem;
}

/* Two-column desktop layout: items (left) + sticky totals (right). Scoped to the cart's own
   .woocommerce wrapper inside the post content (NOT the separate store-notices .woocommerce). */
body.woocommerce-cart .entry-content > .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	grid-template-areas: "notices notices" "items totals";
	gap: 1.5rem; align-items: start;
}
body.woocommerce-cart .woocommerce-notices-wrapper { grid-area: notices; }
body.woocommerce-cart .woocommerce-cart-form { grid-area: items; min-width: 0; width: auto; max-width: none; float: none; margin: 0; }
body.woocommerce-cart .cart-collaterals { grid-area: totals; width: auto; max-width: none; float: none; margin: 0; }
@media (max-width: 859px) {
	body.woocommerce-cart .entry-content > .woocommerce {
		grid-template-columns: 1fr; grid-template-areas: "notices" "items" "totals";
	}
}

/* --- the cart table → a vertical list of dark Falken cards (no boring table) --- */
body.woocommerce-cart table.cart.shop_table { display: block; border: 0; background: transparent; margin: 0; }
body.woocommerce-cart table.cart thead { display: none; }                       /* drop the column headers */
body.woocommerce-cart table.cart tbody { display: flex; flex-direction: column; gap: 1rem; }
body.woocommerce-cart table.cart td::before { display: none !important; }       /* kill WooCommerce responsive data-title labels */

/* each line item = a Falken card. 4-col grid: thumb | name(+APF meta) | à-price | line-total/remove. */
body.woocommerce-cart tr.cart_item {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto auto;
	grid-template-areas:
		"thumb name     name  subtotal"
		"thumb divider  divider divider"
		"thumb quantity price remove";
	column-gap: 1rem; row-gap: 0.7rem; align-items: center;
	background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 16px;
	padding: 1rem 1.1rem;
}
body.woocommerce-cart tr.cart_item td { border: 0; padding: 0; margin: 0; }
body.woocommerce-cart tr.cart_item::after { content: ""; grid-area: divider; height: 1px; width: 100%; background: var(--fp-border); }

/* thumbnail in a framed dark tile */
body.woocommerce-cart .product-thumbnail { grid-area: thumb; align-self: start; width: 4.5rem; }
body.woocommerce-cart .product-thumbnail a, body.woocommerce-cart .product-thumbnail img {
	display: block; width: 4.5rem; height: 4.5rem; border-radius: 10px;
}
body.woocommerce-cart .product-thumbnail img { object-fit: cover; border: 1px solid var(--fp-border); background: var(--fp-bg); }

/* product name + APF/variation meta */
body.woocommerce-cart .product-name { grid-area: name; align-self: start; min-width: 0; }
body.woocommerce-cart .product-name > a {
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
	color: var(--fp-ink); font-size: 1.15rem; line-height: 1.05; text-decoration: none; display: inline-block;
}
body.woocommerce-cart .product-name > a:hover { color: var(--fp-primary); }
body.woocommerce-cart .product-name dl.variation { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--fp-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.5; text-align: left; }
/* WooCommerce floats .variation dt (float:left; width:…) and right-aligns dd — override hard so
   each "Label: value" reads as one clean left-aligned line on every viewport. */
body.woocommerce-cart .product-name dl.variation dt { display: inline !important; float: none !important; width: auto !important; clear: none !important; font-weight: 700; margin: 0 !important; text-align: left !important; }
body.woocommerce-cart .product-name dl.variation dd { display: inline !important; float: none !important; width: auto !important; margin: 0 0 0 0.3rem !important; text-align: left !important; }
body.woocommerce-cart .product-name dl.variation dd p { display: inline; margin: 0; }
body.woocommerce-cart .product-name dl.variation dd::after { content: "\A"; white-space: pre; }  /* break after each label:value */

/* line total (price × qty), bold, top-right */
body.woocommerce-cart .product-subtotal { grid-area: subtotal; justify-self: end; align-self: start; font-weight: 700; font-size: 1.05rem; color: var(--fp-ink); white-space: nowrap; }
body.woocommerce-cart .product-subtotal .woocommerce-Price-amount { font-weight: 700; }

/* unit price → small muted "à CHF x" under the name divider */
body.woocommerce-cart .product-price { grid-area: price; justify-self: start; font-size: 0.78rem; color: var(--fp-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; align-self: center; }
body.woocommerce-cart .product-price::before { content: "à "; }

/* quantity — native WooCommerce number input, styled as a clean tappable control */
body.woocommerce-cart .product-quantity { grid-area: quantity; }
body.woocommerce-cart .product-quantity .quantity { display: inline-flex; align-items: center; margin: 0; }
body.woocommerce-cart .product-quantity input.qty {
	width: 4.25rem; height: 2.6rem; text-align: center; box-sizing: border-box;
	background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 8px;
	color: var(--fp-ink); font-weight: 700; font-size: 1rem;
}
body.woocommerce-cart .product-quantity input.qty:focus { border-color: var(--fp-primary); outline: none; }

/* remove "×" → clean square button, hover red (popup trash accent) */
body.woocommerce-cart .product-remove { grid-area: remove; justify-self: end; }
body.woocommerce-cart .product-remove a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem; border-radius: 8px;
	background: rgba(255,255,255,0.04); border: 1px solid var(--fp-border);
	color: var(--fp-ink-muted) !important; font-size: 1.3rem; line-height: 1; text-decoration: none;
	transition: color 0.15s, background 0.15s, border-color 0.15s;
}
body.woocommerce-cart .product-remove a.remove:hover { color: #fff !important; background: var(--fp-red); border-color: var(--fp-red); }

/* coupon + update-cart row → its own card */
body.woocommerce-cart td.actions {
	display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
	background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 16px; padding: 1rem 1.1rem;
}
body.woocommerce-cart .coupon { display: flex; gap: 0.5rem; flex: 1 1 16rem; min-width: 0; margin: 0; }
body.woocommerce-cart .coupon #coupon_code {
	flex: 1 1 auto; min-width: 0; box-sizing: border-box;
	background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 8px; color: var(--fp-ink); padding: 0.65rem 0.85rem;
}
body.woocommerce-cart .coupon #coupon_code:focus { border-color: var(--fp-primary); outline: none; }
body.woocommerce-cart td.actions .button {
	background: var(--fp-surface-lt); color: var(--fp-ink); border: 1px solid var(--fp-border); border-radius: 8px;
	padding: 0.65rem 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
body.woocommerce-cart td.actions .button:hover:not([disabled]) { border-color: var(--fp-primary); color: var(--fp-primary); }
body.woocommerce-cart td.actions button[name="update_cart"][disabled] { opacity: 0.5; cursor: default; }
body.woocommerce-cart td.actions button[name="update_cart"] { margin-left: auto; }

/* --- totals → dark summary card (sticky on desktop) --- */
/* width/float need the .cart-collaterals parent to out-specify WooCommerce's
   .woocommerce .cart-collaterals .cart_totals { width:48%; float:right } */
body.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; float: none; }
body.woocommerce-cart .cart_totals {
	background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 16px; padding: 1.5rem;
	position: sticky; top: 9rem;
}
body.woocommerce-cart .cart_totals > h2 { font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.4rem; margin: 0 0 1rem; color: var(--fp-ink); }
body.woocommerce-cart .cart_totals table, body.woocommerce-cart .cart_totals tbody { display: block; width: 100%; border: 0; margin: 0; }
body.woocommerce-cart .cart_totals table tr { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--fp-border); }
body.woocommerce-cart .cart_totals table th, body.woocommerce-cart .cart_totals table td { border: 0; padding: 0; background: transparent; }
body.woocommerce-cart .cart_totals table th { color: var(--fp-ink-muted); font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.85rem; }
body.woocommerce-cart .cart_totals table td { color: var(--fp-ink); text-align: right; }
body.woocommerce-cart .cart_totals table th::before, body.woocommerce-cart .cart_totals table td::before { display: none !important; }
/* shipping row carries methods + address calculator → stack it full-width instead of squashing into a value column */
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals { flex-direction: column; align-items: stretch; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals th { margin-bottom: 0.6rem; }
body.woocommerce-cart .cart_totals .woocommerce-shipping-totals td { font-size: 0.9rem; text-align: left; color: var(--fp-ink); }
body.woocommerce-cart .cart_totals #shipping_method { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
body.woocommerce-cart .cart_totals #shipping_method li { display: flex; align-items: center; gap: 0.5rem; }
body.woocommerce-cart .cart_totals #shipping_method label { color: var(--fp-ink); margin: 0; }
body.woocommerce-cart .cart_totals .shipping-calculator-button { color: var(--fp-primary); font-weight: 600; }
body.woocommerce-cart .cart_totals .shipping-calculator-form { margin-top: 0.6rem; }
body.woocommerce-cart .cart_totals .shipping-calculator-form p { margin: 0 0 0.5rem; }
body.woocommerce-cart .cart_totals .shipping-calculator-form input,
body.woocommerce-cart .cart_totals .shipping-calculator-form select,
body.woocommerce-cart .cart_totals .shipping-calculator-form .select2-container .select2-selection {
	width: 100%; box-sizing: border-box; background: var(--fp-bg); border: 1px solid var(--fp-border); color: var(--fp-ink); border-radius: 8px; padding: 0.5rem 0.7rem; min-height: 2.4rem;
}
/* "Liefergebiet prüfen": toggle as a pin link, PLZ prominent, country de-emphasized (CH preset) */
body.woocommerce-cart .cart_totals .shipping-calculator-button {
	display: inline-flex; align-items: center; gap: 0.35rem; margin: 0.2rem 0 0;
	color: var(--fp-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; text-decoration: none;
}
body.woocommerce-cart .cart_totals .shipping-calculator-button::before { content: "\1F4CD"; } /* 📍 */
body.woocommerce-cart .cart_totals #calc_shipping_country_field { opacity: 0.55; }
body.woocommerce-cart .cart_totals .shipping-calculator-form label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fp-ink-muted); margin: 0 0 0.25rem; }
body.woocommerce-cart .cart_totals #calc_shipping_postcode_field input { font-size: 1.1rem; font-weight: 700; height: 2.8rem; letter-spacing: 0.06em; }
body.woocommerce-cart .cart_totals #calc_shipping_postcode_field input:focus { border-color: var(--fp-primary); outline: none; }
body.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"] {
	width: 100%; box-sizing: border-box; background: var(--fp-primary); color: #0d0d0d;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem;
	border: 0; border-radius: 8px; padding: 0.7rem 1rem; box-shadow: 3px 3px 0 var(--fp-red); cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.woocommerce-cart .cart_totals .shipping-calculator-form button[name="calc_shipping"]:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--fp-red); }

/* help text + dynamic min-order feedback (rendered by functions.php after the calculator) */
body.woocommerce-cart .fp-liefer { margin: 0.9rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--fp-border); display: flex; flex-direction: column; gap: 0.5rem; }
body.woocommerce-cart .fp-liefer__intro { margin: 0; color: var(--fp-ink-muted); font-size: 0.82rem; line-height: 1.45; }
body.woocommerce-cart .fp-liefer__note { margin: 0; color: var(--fp-ink-muted); font-size: 0.72rem; font-style: italic; }
body.woocommerce-cart .fp-liefer__result { margin: 0; padding: 0.7rem 0.85rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.45; background: var(--fp-bg); border: 1px solid var(--fp-border); }
body.woocommerce-cart .fp-liefer__result strong { color: var(--fp-ink); }
body.woocommerce-cart .fp-liefer__result .amount { color: inherit; font-weight: 700; white-space: nowrap; }
body.woocommerce-cart .fp-liefer__result::before { margin-right: 0.4rem; }
body.woocommerce-cart .fp-liefer--ok { border-left: 3px solid #34c759; }
body.woocommerce-cart .fp-liefer--ok::before { content: "\2705"; }   /* ✅ */
body.woocommerce-cart .fp-liefer--warn { border-left: 3px solid var(--fp-primary); }
body.woocommerce-cart .fp-liefer--warn::before { content: "\26A0\FE0F"; } /* ⚠️ */
body.woocommerce-cart .fp-liefer--no { border-left: 3px solid var(--fp-red); }
body.woocommerce-cart .fp-liefer--no::before { content: "\2139\FE0F"; }   /* ℹ️ */
body.woocommerce-cart .cart_totals .order-total { border-bottom: 0; padding-top: 0.9rem; }
body.woocommerce-cart .cart_totals .order-total th { color: var(--fp-ink); font-size: 1rem; }
body.woocommerce-cart .cart_totals .order-total td,
body.woocommerce-cart .cart_totals .order-total .amount { color: var(--fp-primary); font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.7rem; }

/* checkout CTA → big yellow Falken button with the red brutalist offset shadow + arrow */
body.woocommerce-cart .wc-proceed-to-checkout { padding: 1.25rem 0 0; margin: 0; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; box-sizing: border-box;
	background: var(--fp-primary); color: #0d0d0d !important;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.3rem;
	padding: 1rem 1.25rem; border-radius: 10px; border: 0; text-decoration: none;
	box-shadow: 4px 4px 0 var(--fp-red); transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button::after { content: "\2192"; font-size: 1.1em; line-height: 1; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: var(--fp-primary); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--fp-red); }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fp-red); }

/* "Zur Speisekarte" continue-shopping link (injected by main.js on the filled cart) */
body.woocommerce-cart .fp-cart-continue {
	display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
	color: var(--fp-ink-muted); text-decoration: none; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
}
body.woocommerce-cart .fp-cart-continue::before { content: "\2190"; }
body.woocommerce-cart .fp-cart-continue:hover { color: var(--fp-primary); }

/* WooCommerce cart notices (item removed / cart updated / coupon) → dark Falken style */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error {
	background: var(--fp-surface); color: var(--fp-ink);
	border: 1px solid var(--fp-border); border-left: 3px solid var(--fp-primary); border-radius: 10px;
	padding: 0.9rem 1.1rem;
}
body.woocommerce-cart .woocommerce-error { border-left-color: var(--fp-red); }
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-info::before { color: var(--fp-primary); }
body.woocommerce-cart .woocommerce-message a:not(.button),
body.woocommerce-cart .woocommerce-info a:not(.button) { color: var(--fp-primary); }
body.woocommerce-cart .woocommerce-message a.button,
body.woocommerce-cart .woocommerce-info a.button {
	background: var(--fp-surface-lt); color: var(--fp-ink); border: 1px solid var(--fp-border); border-radius: 8px;
	padding: 0.4rem 0.9rem; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em;
}
body.woocommerce-cart .woocommerce-message a.button:hover,
body.woocommerce-cart .woocommerce-info a.button:hover { border-color: var(--fp-primary); color: var(--fp-primary); }

/* --- empty state → Falken style --- */
/* empty state: don't let the 2-col items/totals grid split the message and the button — span both full width */
body.woocommerce-cart .wc-empty-cart-message,
body.woocommerce-cart .cart-empty,
body.woocommerce-cart .return-to-shop { grid-column: 1 / -1; }
body.woocommerce-cart .cart-empty, body.woocommerce-cart .wc-empty-cart-message {
	text-align: center; font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.02em;
	font-size: 1.9rem; color: var(--fp-ink); background: transparent; border: 0; padding: 2.5rem 0 0.5rem;
}
body.woocommerce-cart .cart-empty::before,
body.woocommerce-cart .wc-empty-cart-message::before {
	content: ""; display: block; width: 5.5rem; height: 5.5rem; margin: 0 auto 1.25rem; border-radius: 999px;
	background-color: var(--fp-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 2.4rem;
}
/* the empty message is rendered inside a blue block info-notice — strip the blue, hide the (i) icon */
body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner {
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	color: var(--fp-ink); justify-content: center; padding: 0; margin: 0; min-height: 0;
}
body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner > svg { display: none !important; }
body.woocommerce-cart .wc-empty-cart-message .wc-block-components-notice-banner__content { margin: 0; font-size: 1.9rem; line-height: 1; }
body.woocommerce-cart .return-to-shop { text-align: center; margin: 1.5rem 0 0; }
body.woocommerce-cart .return-to-shop a.button {
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--fp-primary); color: #0d0d0d !important;
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.25rem;
	padding: 0.9rem 2rem; border-radius: 10px; border: 0; text-decoration: none;
	box-shadow: 4px 4px 0 var(--fp-red); transition: transform 0.15s, box-shadow 0.15s;
}
body.woocommerce-cart .return-to-shop a.button:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--fp-red); }

/* --- Mobile (<768px): WooCommerce's shop_table_responsive CSS right-aligns tds, hides the
   thumbnail and hides the totals th labels — all with higher specificity. Re-assert a clean
   Falken card here. Selectors carry extra classes to out-specify WooCommerce's defaults. --- */
@media (max-width: 767px) {
	body.woocommerce-cart table.cart.shop_table tr.cart_item {
		grid-template-columns: 3.25rem minmax(0, 1fr) auto;
		grid-template-areas:
			"thumb name     subtotal"
			"thumb divider  divider"
			"thumb quantity remove";
		column-gap: 0.85rem;
	}
	body.woocommerce-cart table.cart.shop_table tr.cart_item td { text-align: left !important; }
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-subtotal { text-align: right !important; justify-self: end; }
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-thumbnail { display: block; }
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-thumbnail,
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-thumbnail a,
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-thumbnail img { width: 3.25rem; height: 3.25rem; }
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-price { display: none; }   /* line total is enough on mobile */
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-quantity { justify-self: start; }
	body.woocommerce-cart table.cart.shop_table tr.cart_item .product-remove { justify-self: end; }
	/* totals: re-show the th labels WooCommerce hides on mobile */
	body.woocommerce-cart .cart_totals table.shop_table tbody th { display: block; }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
	/* Disable decorative animations and motion transforms */
	.fp-reveal--hidden {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	/* Keep color transitions, disable translate animations */
	.fp-btn-primary .wp-element-button,
	.fp-btn-secondary .wp-element-button,
	.fp-btn-phone .wp-element-button,
	.fp-btn-dark .wp-element-button {
		transition: background 0.1s, color 0.1s, border-color 0.1s !important;
	}
	.fp-btn-primary .wp-element-button:hover,
	.fp-btn-secondary .wp-element-button:hover,
	.fp-btn-phone .wp-element-button:hover,
	.fp-btn-dark .wp-element-button:hover {
		transform: none !important;
	}
	.fp-mobile-menu { transition: none !important; }
	@keyframes fp-pulse { from, to { opacity: 1; transform: none; } }
	@keyframes fp-fadein-up { from, to { opacity: 1; transform: none; } }
	/* Disable hero entrance animations → content shows instantly in its natural state */
	.fp-hero__content, .fp-hero__visual, .fp-info-card { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   WooCommerce Mini-Cart → Falken bottom-sheet (React/Vite CartModal feeling)
   Block-native-first: the dark CONTENTS colour comes from the Mini-Cart block attribute
   (contentsBackgroundColor); the inner texts (subtotal note, button labels) are rendered
   DYNAMICALLY by Woo's Store-/Interactivity-API, so they are NOT static template-part
   content — a parts/mini-cart.html override would only mirror Woo's block tree without
   controlling those strings. Therefore the drawer SHELL + the skin + the scoped text
   swap are done here in CSS, everything scoped to `.wc-block-mini-cart__drawer` so it
   never leaks to /warenkorb/, /kasse/ or any other block. NO cart logic, NO Store-API,
   NO template override, NO JS. !important only where Woo's block CSS forces it.
   ⚠ Depends on Woo-internal classes (.wc-block-mini-cart__drawer, --is-hidden,
   --with-slide-out); pin the WooCommerce version and re-check after Woo updates.
   ⚠ The bottom-sheet overrides Woo's slide animation, which can affect Woo's
   animation-driven close → must pass a real-browser close test before shipping.
   ════════════════════════════════════════════════════════════════════════════════ */

/* Overlay → dark + blur (scoped to the mini-cart drawer only) */
.wc-block-components-drawer__screen-overlay:has(.wc-block-mini-cart__drawer) {
	background: rgba(13, 13, 13, 0.8) !important;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Drawer → bottom-sheet. Base = CLOSED (Woo removes `.wc-block-components-drawer` on close). */
.wc-block-mini-cart__drawer {
	position: fixed !important;
	inset: auto 0 0 0 !important;
	width: 100% !important; max-width: 100% !important;
	height: auto !important; max-height: 92vh !important;
	border-radius: 1.25rem 1.25rem 0 0 !important;
	background: var(--fp-bg) !important;
	box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.7) !important;
	border-top: 1px solid var(--fp-border) !important;
	transform: translateY(100%);
	transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.wc-block-mini-cart__drawer.wc-block-components-drawer {
	transform: translateY(0);
	animation: fp-cart-up 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fp-cart-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (min-width: 768px) {
	.wc-block-mini-cart__drawer {
		left: 50% !important; right: auto !important;
		width: min(672px, 100%) !important; max-width: 672px !important; max-height: 85vh !important;
		transform: translateX(-50%) translateY(100%);
	}
	.wc-block-mini-cart__drawer.wc-block-components-drawer {
		transform: translateX(-50%) translateY(0);
		animation: fp-cart-up-c 0.34s cubic-bezier(0.22, 1, 0.36, 1);
	}
	@keyframes fp-cart-up-c {
		from { transform: translateX(-50%) translateY(100%); }
		to   { transform: translateX(-50%) translateY(0); }
	}
}

/* Inner shell: constrain height + flex so items scroll and the footer stays put */
.wc-block-mini-cart__drawer .wc-block-components-drawer__content { height: auto !important; max-height: 92vh; display: flex; flex-direction: column; }
@media (min-width: 768px) { .wc-block-mini-cart__drawer .wc-block-components-drawer__content { max-height: 85vh; } }
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-contents { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--fp-bg) !important; }
/* :not([hidden]) so our display never overrides Woo's empty/filled toggle (data-wp-bind--hidden) */
.wc-block-mini-cart__drawer .wp-block-woocommerce-filled-mini-cart-contents-block:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__items { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer { flex-shrink: 0; }

/* Title — Anton headline */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fp-ink); font-size: clamp(1.4rem, 4vw, 1.9rem); }
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-title-items-counter-block { font-family: 'Outfit', sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--fp-ink-muted); font-size: 0.8rem; }

/* Close button → round dark */
.wc-block-mini-cart__drawer .wc-block-components-drawer__close { background: rgba(255, 255, 255, 0.06); border-radius: 999px; color: var(--fp-ink); width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close:hover { background: rgba(255, 255, 255, 0.12); }
.wc-block-mini-cart__drawer .wc-block-components-drawer__close svg { fill: currentColor; }

/* Item rows — dark, Falken (structure/table kept intact; colours + type only) */
.wc-block-mini-cart__drawer .wc-block-cart-items__row { border-bottom: 1px solid var(--fp-border); }
.wc-block-mini-cart__drawer .wc-block-components-product-name { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fp-ink); }
.wc-block-mini-cart__drawer .wc-block-components-product-metadata { color: var(--fp-ink-muted); }
/* APF item_data rows (Spezialwunsch/Extras via the Store-API bridge) render as product-details —
   Woo sets no colour on these, so force a legible muted tone on the dark sheet. */
.wc-block-mini-cart__drawer .wc-block-components-product-details,
.wc-block-mini-cart__drawer .wc-block-components-product-details__name,
.wc-block-mini-cart__drawer .wc-block-components-product-details__value { color: var(--fp-ink-muted); }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img { border-radius: var(--fp-radius); }
.wc-block-mini-cart__drawer .wc-block-components-product-price__value,
.wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-formatted-money-amount { color: var(--fp-ink); font-weight: 700; }

/* Quantity selector — skin only, never touch the input/button structure (Store API) */
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector { background: var(--fp-bg); border: 1px solid var(--fp-border); border-radius: 8px; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__input { color: var(--fp-ink); background: transparent; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button { color: var(--fp-ink-muted); transition: color 0.2s ease; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector__button:hover { color: var(--fp-ink); }

/* Remove — clean, red on hover (behaviour untouched) */
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link { color: var(--fp-ink-muted); transition: color 0.2s ease; }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link:hover { color: var(--fp-red); }
.wc-block-mini-cart__drawer .wc-block-cart-item__remove-link svg { fill: currentColor; }

/* Footer — sticky, dark, safe-area; subtotal + brand CTAs */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer { border-top: 1px solid var(--fp-border); background: var(--fp-bg); padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__label { color: var(--fp-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 700; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 1.6rem; color: var(--fp-ink); }
/* SCOPED shipping-text replacement — mini-cart drawer ONLY (never /warenkorb/ or /kasse/).
   The string is dynamic (Store-API render) so it can't be edited as block content → CSS swap.
   A11y note: the replacement text is pseudo-content (::after) and is read inconsistently by
   screen readers; accepted for V1 because the requirement is to scope strictly to the mini-cart. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item__description { font-size: 0 !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item__description::after { content: "Endbetrag wird an der Kasse final bestätigt."; display: block; font-size: 0.78rem !important; color: var(--fp-ink-muted); margin-top: 0.25rem; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions { display: flex; gap: 0.75rem; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart { background: transparent !important; color: var(--fp-ink) !important; border: 2px solid var(--fp-border) !important; border-radius: var(--fp-radius) !important; font-family: 'Anton', sans-serif; text-transform: uppercase; box-shadow: none !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover { border-color: rgba(255, 255, 255, 0.3) !important; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout { background: var(--fp-primary) !important; color: #0d0d0d !important; border: 0 !important; border-radius: var(--fp-radius) !important; font-family: 'Anton', sans-serif; text-transform: uppercase; box-shadow: var(--fp-shadow-red) !important; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover { transform: translateY(-1px); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:active { transform: translateY(0); box-shadow: none !important; }

/* Empty state — Falken style (:not([hidden]) so it stays hidden when the cart has items) */
.wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.75rem; padding: 2.5rem 1.5rem; color: var(--fp-ink); }
.wc-block-mini-cart__drawer .wp-block-woocommerce-empty-mini-cart-contents-block p { color: var(--fp-ink-muted); }
/* Empty-State CTA „Speisekarte ansehen": gelb kommt aus theme.json (.wp-element-button) —
   hier nur an die React/Checkout-CTA angleichen (Anton + roter Offset-Shadow + Hover-Lift). */
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button {
	font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
	border-radius: var(--fp-radius); box-shadow: var(--fp-shadow-red);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:hover { transform: translateY(-1px); }
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button:active { transform: translateY(0); box-shadow: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wc-block-mini-cart__drawer, .wc-block-mini-cart__drawer.wc-block-components-drawer { transition: none !important; animation: none !important; }
}

/* ===== WooCommerce Produktkarten — nur Getränke: Bild vollständig zeigen =========
   Problem: Das Produktbild-Block-<img> trägt inline `object-fit:cover`. Damit wird
   das quadratische (transparente) Getränkebild in der ~4:3-Medienfläche der Karte
   oben/unten beschnitten -> hohe Flaschen/Dosen wirken zu gross / werden geclippt.
   Fix (NUR Anzeige, NUR Getränke-Karten): contain statt cover + Innenabstand,
   zentriert. Kartenstruktur/-höhe, CTA, Titel/Preis-Bereich und alle Food-/übrigen
   Karten bleiben unverändert. `!important` ist nötig, da object-fit inline gesetzt ist.
   Gescopt über die WooCommerce-Kategorie-Klassen am Karten-<li>. */
.wc-block-product.product_cat-getraenke .wc-block-components-product-image img,
.wc-block-product.product_cat-alkoholfreie-getraenke .wc-block-components-product-image img,
.wc-block-product.product_cat-bier-smirnoff .wc-block-components-product-image img,
.wc-block-product.product_cat-spirituosen .wc-block-components-product-image img,
.wc-block-product.product_cat-wein .wc-block-components-product-image img {
	object-fit: contain !important;
	padding: 8% 10%;
	box-sizing: border-box;
}

/* Produktkarten-Kurzbeschreibung (Phase 2/3): nativer woocommerce/product-summary-Block.
   Links-ausgerichtet wie Titel/Preis der Karte (React MenuCard text-white/50), gleiches
   horizontales Padding (1.1rem), max. 2 Zeilen für gleichmäßige Kartenhöhe. Nur im Produkt-Grid. */
.wc-block-product .fp-product-summary {
	padding: 0.5rem 1.1rem 0;
	margin-bottom: 0.3rem !important;  /* Woo-Block-Margin (1rem) normalisieren → enger Beschreibung→Divider/Button */
	text-align: left;
	color: var(--fp-ink-muted);
	font-size: 0.85rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ===== PHASE 6 SPIKE — iframe-Produkt-Popup (isoliert, ein Block = rückbaubar) ===== */
/* (a) Schlanke Produktansicht IM iframe: Site-Chrome aus, Produkt-Content bleibt echt */
body.fp-embed .fp-header,
body.fp-embed .fp-footer,
body.fp-embed .fp-bottom-bar,
body.fp-embed .fp-mobile-menu,
body.fp-embed .wc-block-mini-cart,
body.fp-embed .woocommerce-breadcrumb,
body.fp-embed .wp-block-breadcrumbs { display: none !important; }  /* Block-Breadcrumb: leer, aber margin-bottom:1.25rem kollabiert sonst bis zum <body> und drückt den Hero 20px nach unten */
body.fp-embed .wp-site-blocks { padding-top: 0; }  /* Hero edge-to-edge bis an den Modal-/iframe-Top (React-Parity, kein schwarzer Rand oben) */

/* (b) Parent-Popup (Dialog + iframe) */
html.fp-pp-open { overflow: hidden; }
.fp-pp[hidden] { display: none; }
.fp-pp { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: flex-end; justify-content: center; } /* über fixiertem Header/Bottom-Bar (z-index 9000) */
/* React-Parity: Overlay #0D0D0D @90% + blur 12px (bg-background-deep/90 backdrop-blur-md) */
.fp-pp__backdrop { position: absolute; inset: 0; background: rgba(13, 13, 13, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fp-pp-fade 0.25s ease; }
/* React-Parity: max-w-2xl (672px), bg-surface (#191919), shadow 0 -20px 50px */
.fp-pp__sheet { position: relative; width: 100%; max-width: 672px; height: 100dvh; background: var(--fp-surface); border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.8); overflow: hidden; animation: fp-pp-up 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
@media (min-width: 768px) {
	.fp-pp { align-items: center; }
	/* React-Parity: max-h-[85dvh], rounded-2xl (16px), border white/10 */
	.fp-pp__sheet { height: 85dvh; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); }
}
.fp-pp__frame { width: 100%; height: 100%; border: 0; background: var(--fp-surface); opacity: 0; transition: opacity 0.25s ease; }
.fp-pp.is-loaded .fp-pp__frame { opacity: 1; }
/* React-Parity: 40px, rounded-full, bg-black/40 + blur + border white/10, top/right 16px */
.fp-pp__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fp-pp__close:hover { background: rgba(0, 0, 0, 0.6); }
.fp-pp__spinner { position: absolute; top: 50%; left: 50%; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--fp-primary); border-radius: 999px; animation: fp-pp-spin 0.8s linear infinite; }
.fp-pp.is-loaded .fp-pp__spinner { display: none; }
@keyframes fp-pp-fade { from { opacity: 0; } }
@keyframes fp-pp-up { from { transform: translateY(100%); } }
@keyframes fp-pp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.fp-pp__backdrop, .fp-pp__sheet { animation: none; }
	.fp-pp__spinner { animation-duration: 1.6s; }
}

/* PHASE 6g — React/Vite-Parity der Popup-Produktansicht (body.fp-embed): edge-to-edge Hero +
   Gradient + Titel-Overlap + Sticky Add-to-Cart-Bar. Sheet ≤672px → diese ≤782px-Query greift
   im Popup auf Desktop UND Mobile. Reines Layout (kein JS, keine Logik). NUR im iframe-Popup. */
@media (max-width: 782px) {
	/* (1) Kein Header-Freiraum oben; unten Platz für die fixe Add-to-Cart-Bar. */
	body.fp-embed main.wp-block-group.has-global-padding {
		padding-top: 0 !important;
		padding-bottom: 112px !important;
	}
	/* (2) Hero edge-to-edge: Galerie-Karte entrahmen + aus dem Seiten-Padding ausbrechen (full-bleed). */
	body.fp-embed .wp-block-woocommerce-product-image-gallery,
	body.fp-embed .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery {
		background: none !important; border: 0 !important; padding: 0 !important;
		border-radius: 0 !important; max-width: none !important; max-height: none !important;
	}
	body.fp-embed .wp-block-woocommerce-product-image-gallery {
		margin: 0 calc(-1 * var(--wp--style--root--padding-right, 16px)) 0 calc(-1 * var(--wp--style--root--padding-left, 16px)) !important;
		width: auto !important; position: relative;
	}
	body.fp-embed .woocommerce-product-gallery { margin: 0 !important; }
	/* (3) Hero-Höhe wie React: 240px mobil (288px im Desktop-Popup, siehe min-width unten). */
	body.fp-embed .woocommerce-product-gallery__wrapper {
		width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important;
	}
	body.fp-embed .woocommerce-product-gallery__image {
		width: 100% !important; height: 240px !important; margin: 0 !important;
		overflow: hidden; border-radius: 0;
	}
	body.fp-embed .woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; cursor: default; }
	/* Popup: Zoom/Lupe komplett deaktivieren — Galerie ist reine Hero-Anzeige. pointer-events:none auf
	   die ganze Galerie blockt ECHTE Klicks (auch an Photoswipe delegierte) zuverlässig; Trigger weg.
	   Close-Button liegt im Parent (über dem iframe) und bleibt klickbar. */
	body.fp-embed .woocommerce-product-gallery { pointer-events: none; }
	body.fp-embed .woocommerce-product-gallery__trigger { display: none !important; }
	body.fp-embed .woocommerce-product-gallery__image img {
		width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important;
		object-fit: cover !important; object-position: center center !important;
	}
	/* Getränke (Flaschen/Dosen): vollständig sichtbar statt Hero-Crop. cover schneidet die hohe/
	   quadratische Flasche in der breit-flachen Hero-Box oben/unten ab → NUR für die Getränke-
	   Kategorien auf contain (ganze Flasche/Dose, zentriert, kein Crop, dunkler BG/Gradient bleibt).
	   Food/Pizza/Kebab bleiben cover. WC-body_class legt alle Klassen auf <body> → chained-Selector
	   (body.fp-embed.product_cat-…), Spezifität 0,3,2 > die Cover-Regel (0,2,2) → gewinnt. */
	body.fp-embed.product_cat-getraenke .woocommerce-product-gallery__image img,
	body.fp-embed.product_cat-alkoholfreie-getraenke .woocommerce-product-gallery__image img,
	body.fp-embed.product_cat-bier-smirnoff .woocommerce-product-gallery__image img,
	body.fp-embed.product_cat-wein .woocommerce-product-gallery__image img,
	body.fp-embed.product_cat-spirituosen .woocommerce-product-gallery__image img {
		object-fit: contain !important;
	}
	/* (4) Dunkler Gradient unten über dem Hero (from #0D0D0D → transparent). */
	body.fp-embed .woocommerce-product-gallery::after {
		content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
		background: linear-gradient(to top, var(--fp-bg) 0%, rgba(13, 13, 13, 0.35) 45%, transparent 100%);
		pointer-events: none; z-index: 1;
	}
	/* (5) Titel/Preis überlappen den Hero-Boden (React: -mt-10) + größerer Titel, hellere Beschreibung. */
	body.fp-embed .wp-block-columns.alignwide > .wp-block-column:nth-child(2) {
		margin-top: -2.25rem; position: relative; z-index: 2;
	}
	body.fp-embed .wp-block-post-title, body.fp-embed .product_title {
		font-size: 2.25rem !important; line-height: 1 !important; letter-spacing: -0.03em !important;
	}
	body.fp-embed .woocommerce-product-details__short-description,
	body.fp-embed .wp-block-post-excerpt { color: rgba(255, 255, 255, 0.7) !important; }
	/* (6) Sticky Add-to-Cart-Bar (React: surface/95 + blur, gelber Button mit rotem Offset). */
	body.fp-embed .wp-block-add-to-cart-form { position: relative; }
	body.fp-embed .wp-block-add-to-cart-form::after {
		content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 88px;
		background: rgba(25, 25, 25, 0.95); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
		border-top: 1px solid var(--fp-border); z-index: 40; pointer-events: none;
	}
	body.fp-embed .single_add_to_cart_button {
		position: fixed !important; left: 16px; right: auto; bottom: 18px;
		width: calc(100% - 32px) !important; box-sizing: border-box;
		z-index: 41; margin: 0 !important;
	}
	/* (7) Variable + APF: WC-Block-Add-to-Cart-Form rendert als 4-Spalten-Grid → zwingt die
	   Karten in schmale Zellen. Im Popup auf einspaltigen Block-Flow zwingen (volle Breite,
	   React-Look). Rein visuell — Felder, Validierung und Add-to-Cart bleiben unverändert. */
	body.fp-embed form.cart, body.fp-embed .variations_form { display: block !important; }
	body.fp-embed .wapf-wrapper { width: 100% !important; }
	body.fp-embed .woocommerce-variation-add-to-cart { display: block !important; width: 100% !important; }
	body.fp-embed .quantity { float: none !important; }
}
/* Hero 288px + Titel 48px im breiteren Desktop-Popup (Sheet ~672px ≥ 641px), wie React sm:. */
@media (min-width: 641px) and (max-width: 782px) {
	body.fp-embed .woocommerce-product-gallery__image { height: 288px !important; }
	body.fp-embed .wp-block-post-title, body.fp-embed .product_title { font-size: 3rem !important; }
}