/**
 * FLAVOR Substitute - Landingpage Styles
 *
 * Theme-unabhängiges Styling für Vergleichs-Landingpages.
 * Kompatibel mit: BeTheme, WoodMart, Avada, Flatsome, Standard WooCommerce.
 *
 * @package FlavorSubst
 * @since   2.3.0
 */

/* ==========================================================================
   CSS RESET FÜR THEME-UNABHÄNGIGKEIT
   Überschreibt Theme-spezifische Styles innerhalb unserer Komponenten.
   ========================================================================== */

.flavorsubst-lp-hero,
.flavorsubst-lp-section,
.flavorsubst-lp-teaser,
.flavorsubst-lp-unavailable-badge,
.flavorsubst-lp-comparison-table,
.flavorsubst-lp-faq-list,
.flavorsubst-lp-reviews-grid {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.flavorsubst-lp-hero *,
.flavorsubst-lp-section *,
.flavorsubst-lp-teaser *,
.flavorsubst-lp-unavailable-badge *,
.flavorsubst-lp-comparison-table *,
.flavorsubst-lp-faq-list *,
.flavorsubst-lp-reviews-grid * {
	box-sizing: border-box;
}

/* Reset für Links innerhalb unserer Komponenten */
.flavorsubst-landingpage a:not(.button):not(.btn) {
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.flavorsubst-landingpage a:not(.button):not(.btn):hover {
	text-decoration: underline;
}

/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root {
	--flavorsubst-lp-primary: #2563eb;
	--flavorsubst-lp-primary-hover: #1d4ed8;
	--flavorsubst-lp-primary-light: #dbeafe;
	--flavorsubst-lp-success: #16a34a;
	--flavorsubst-lp-success-light: #dcfce7;
	--flavorsubst-lp-warning: #f59e0b;
	--flavorsubst-lp-danger: #dc2626;
	--flavorsubst-lp-danger-light: #fee2e2;
	--flavorsubst-lp-gray-50: #f9fafb;
	--flavorsubst-lp-gray-100: #f3f4f6;
	--flavorsubst-lp-gray-200: #e5e7eb;
	--flavorsubst-lp-gray-300: #d1d5db;
	--flavorsubst-lp-gray-500: #6b7280;
	--flavorsubst-lp-gray-700: #374151;
	--flavorsubst-lp-gray-900: #111827;
	--flavorsubst-lp-radius: 8px;
	--flavorsubst-lp-radius-sm: 4px;
	--flavorsubst-lp-radius-lg: 12px;
	--flavorsubst-lp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--flavorsubst-lp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--flavorsubst-lp-transition: 0.2s ease;
}

/* ==========================================================================
   BODY CLASS - Landingpage aktiv
   ========================================================================== */

body.flavorsubst-lp-active .summary.entry-summary {
	position: relative;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.flavorsubst-lp-hero {
	background: linear-gradient(135deg, var(--flavorsubst-lp-primary) 0%, #7c3aed 100%);
	color: #fff !important;
	padding: 2.5rem 2rem;
	margin: 0 0 2rem 0;
	border-radius: var(--flavorsubst-lp-radius-lg);
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* Subtiler Hintergrund-Effekt */
.flavorsubst-lp-hero::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 100%;
	height: 200%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
	pointer-events: none;
}

.flavorsubst-lp-hero-content {
	position: relative;
	z-index: 1;
}

.flavorsubst-lp-hero-badges {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.flavorsubst-lp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 9999px;
	font-size: 0.8125rem;
	font-weight: 500;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff !important;
}

.flavorsubst-lp-badge .dashicons {
	font-size: 1rem;
	width: 1rem;
	height: 1rem;
	line-height: 1;
}

.flavorsubst-lp-hero-headline {
	font-size: clamp(1.375rem, 4vw, 2rem) !important;
	font-weight: 700 !important;
	margin: 0 0 0.625rem 0 !important;
	padding: 0 !important;
	line-height: 1.25 !important;
	color: #fff !important;
	text-transform: none !important;
	letter-spacing: -0.01em;
}

.flavorsubst-lp-hero-subheadline {
	font-size: 1rem !important;
	font-weight: 400 !important;
	opacity: 0.9;
	margin: 0 auto 1.5rem auto !important;
	padding: 0 !important;
	max-width: 550px;
	color: #fff !important;
	line-height: 1.5 !important;
}

.flavorsubst-lp-hero-cta {
	display: flex;
	justify-content: center;
	gap: 0.875rem;
	flex-wrap: wrap;
}

/* ==========================================================================
   BUTTONS - Theme-unabhängig
   ========================================================================== */

.flavorsubst-lp-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	padding: 0.75rem 1.5rem !important;
	border-radius: var(--flavorsubst-lp-radius) !important;
	font-weight: 600 !important;
	font-size: 0.9375rem !important;
	text-decoration: none !important;
	transition: all var(--flavorsubst-lp-transition) !important;
	cursor: pointer !important;
	border: none !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	white-space: nowrap !important;
}

.flavorsubst-lp-btn .dashicons {
	font-size: 1.125rem;
	width: 1.125rem;
	height: 1.125rem;
	line-height: 1;
}

/* Primary Button in Hero */
.flavorsubst-lp-hero .flavorsubst-lp-btn-primary {
	background: #fff !important;
	color: var(--flavorsubst-lp-primary) !important;
}

.flavorsubst-lp-hero .flavorsubst-lp-btn-primary:hover,
.flavorsubst-lp-hero .flavorsubst-lp-btn-primary:focus {
	background: var(--flavorsubst-lp-gray-100) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	color: var(--flavorsubst-lp-primary) !important;
	text-decoration: none !important;
}

/* Secondary Button in Hero */
.flavorsubst-lp-hero .flavorsubst-lp-btn-secondary {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.flavorsubst-lp-hero .flavorsubst-lp-btn-secondary:hover,
.flavorsubst-lp-hero .flavorsubst-lp-btn-secondary:focus {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #fff !important;
	text-decoration: none !important;
}

/* Primary Button außerhalb Hero */
.flavorsubst-lp-section .flavorsubst-lp-btn-primary {
	background: var(--flavorsubst-lp-primary) !important;
	color: #fff !important;
}

.flavorsubst-lp-section .flavorsubst-lp-btn-primary:hover,
.flavorsubst-lp-section .flavorsubst-lp-btn-primary:focus {
	background: var(--flavorsubst-lp-primary-hover) !important;
	color: #fff !important;
	text-decoration: none !important;
	transform: translateY(-1px);
}

/* Secondary Button außerhalb Hero */
.flavorsubst-lp-section .flavorsubst-lp-btn-secondary {
	background: transparent !important;
	color: var(--flavorsubst-lp-primary) !important;
	border: 1px solid var(--flavorsubst-lp-primary) !important;
}

.flavorsubst-lp-section .flavorsubst-lp-btn-secondary:hover,
.flavorsubst-lp-section .flavorsubst-lp-btn-secondary:focus {
	background: var(--flavorsubst-lp-gray-50) !important;
	color: var(--flavorsubst-lp-primary) !important;
	text-decoration: none !important;
}

.flavorsubst-lp-btn-small {
	padding: 0.5rem 1rem !important;
	font-size: 0.8125rem !important;
}

.flavorsubst-lp-btn-large {
	padding: 1rem 2rem !important;
	font-size: 1.0625rem !important;
}

.flavorsubst-lp-btn-disabled {
	display: inline-block !important;
	padding: 0.5rem 1rem !important;
	background: var(--flavorsubst-lp-gray-200) !important;
	color: var(--flavorsubst-lp-gray-500) !important;
	border-radius: var(--flavorsubst-lp-radius) !important;
	font-size: 0.8125rem !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   UNAVAILABLE SECTION - CONVERSION OPTIMIERT
   Klare Kommunikation in 3 Schritten:
   1. Problem erkennen (Status Banner)
   2. Lösung bieten (Solution Banner)
   3. Handeln (CTA Section)
   ========================================================================== */

.flavorsubst-lp-unavailable-section {
	margin: 1.5rem 0 2rem 0 !important;
}

/* Status Banner - Problem klar kommunizieren */
.flavorsubst-lp-status-banner {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	padding: 1rem 1.25rem !important;
	background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
	border: 1px solid #fecaca !important;
	border-left: 4px solid var(--flavorsubst-lp-danger) !important;
	border-radius: var(--flavorsubst-lp-radius) !important;
	margin-bottom: 1rem !important;
}

.flavorsubst-lp-status-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.flavorsubst-lp-status-content {
	flex: 1;
}

.flavorsubst-lp-status-badge {
	display: inline-block !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	color: var(--flavorsubst-lp-danger) !important;
	margin-bottom: 0.25rem !important;
}

.flavorsubst-lp-status-desc {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.875rem !important;
	color: #991b1b !important;
	line-height: 1.4 !important;
}

/* Solution Banner - Lösung präsentieren */
.flavorsubst-lp-solution-banner {
	display: flex !important;
	align-items: flex-start !important;
	gap: 1rem !important;
	padding: 1.25rem 1.5rem !important;
	background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
	border: 1px solid #a7f3d0 !important;
	border-left: 4px solid var(--flavorsubst-lp-success) !important;
	border-radius: var(--flavorsubst-lp-radius) !important;
	margin-bottom: 1rem !important;
}

.flavorsubst-lp-solution-icon {
	font-size: 1.5rem;
	line-height: 1;
	flex-shrink: 0;
}

.flavorsubst-lp-solution-content {
	flex: 1;
}

.flavorsubst-lp-solution-text {
	margin: 0 0 1rem 0 !important;
	padding: 0 !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #065f46 !important;
	line-height: 1.4 !important;
}

/* Recommendation Box */
.flavorsubst-lp-recommendation {
	background: #fff !important;
	border: 1px solid #a7f3d0 !important;
	border-radius: var(--flavorsubst-lp-radius) !important;
	padding: 1rem !important;
}

.flavorsubst-lp-recommendation-label {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: #047857 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin-bottom: 0.5rem !important;
}

.flavorsubst-lp-recommendation-product {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

/* Thumbnail Image */
.flavorsubst-lp-recommendation-image {
	flex-shrink: 0;
	width: 70px;
	height: 70px;
	border-radius: var(--flavorsubst-lp-radius-sm);
	overflow: hidden;
	border: 1px solid #e5e7eb;
}

.flavorsubst-lp-recommendation-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.2s ease;
}

.flavorsubst-lp-recommendation-image:hover img {
	transform: scale(1.05);
}

/* Info Container */
.flavorsubst-lp-recommendation-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.flavorsubst-lp-recommendation-link {
	text-decoration: none !important;
}

.flavorsubst-lp-recommendation-name {
	font-weight: 600 !important;
	font-size: 1rem !important;
	color: #065f46 !important;
}

.flavorsubst-lp-recommendation-link:hover .flavorsubst-lp-recommendation-name {
	color: #047857 !important;
	text-decoration: underline !important;
}

.flavorsubst-lp-recommendation-price {
	font-weight: 700 !important;
	font-size: 1.125rem !important;
	color: #047857 !important;
}

.flavorsubst-lp-recommendation-price .woocommerce-Price-amount {
	color: inherit !important;
	font-weight: inherit !important;
}

/* Trust Signals */
.flavorsubst-lp-trust-signals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.flavorsubst-lp-trust-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.25rem !important;
	padding: 0.25rem 0.625rem !important;
	border-radius: 9999px !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
}

.flavorsubst-lp-trust-savings {
	background: #fef3c7 !important;
	color: #92400e !important;
}

.flavorsubst-lp-trust-rating {
	background: #fef3c7 !important;
	color: #92400e !important;
}

.flavorsubst-lp-trust-stock {
	background: #dcfce7 !important;
	color: #166534 !important;
}

/* CTA Section */
.flavorsubst-lp-cta-section {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.flavorsubst-lp-btn-cta {
	flex: 1;
	min-width: 200px;
	justify-content: center !important;
	font-size: 1rem !important;
	padding: 0.875rem 1.5rem !important;
}

.flavorsubst-lp-cta-section .flavorsubst-lp-btn-secondary {
	flex: 0 1 auto;
}

/* Permanent Notice */
.flavorsubst-lp-permanent-notice {
	margin: 0.5rem 0 0 0 !important;
	padding: 0.75rem !important;
	background: #fef3c7 !important;
	border-radius: var(--flavorsubst-lp-radius-sm) !important;
	font-size: 0.8125rem !important;
	color: #92400e !important;
	line-height: 1.4 !important;
}

.flavorsubst-lp-permanent-notice small {
	font-size: inherit !important;
}

/* ==========================================================================
   ALTERNATIVE CTA (ersetzt Warenkorb-Button)
   ========================================================================== */

.flavorsubst-lp-alternative-cta {
	margin: 1.5rem 0 !important;
	text-align: left;
}

.flavorsubst-lp-alternative-cta .flavorsubst-lp-btn-large {
	display: inline-flex !important;
	margin-bottom: 0.5rem;
}

.flavorsubst-lp-cta-hint {
	font-size: 0.8125rem !important;
	color: var(--flavorsubst-lp-gray-500) !important;
	margin: 0 !important;
}

/* Durchgestrichener Preis für nicht verfügbares Produkt */
.flavorsubst-lp-price-unavailable {
	opacity: 0.6;
	text-decoration: line-through !important;
}

/* ==========================================================================
   MAIN LANDINGPAGE CONTENT (vor den Tabs)
   ========================================================================== */

.flavorsubst-lp-main-content {
	clear: both;
	margin: 2rem 0 !important;
	padding-top: 2rem !important;
	border-top: 2px solid var(--flavorsubst-lp-gray-200) !important;
}

/* ==========================================================================
   ALTERNATIVES GRID (Produktkarten)
   ========================================================================== */

.flavorsubst-lp-alternatives {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
}

.flavorsubst-lp-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.flavorsubst-lp-product-card {
	background: #fff !important;
	border: 1px solid var(--flavorsubst-lp-gray-200) !important;
	border-radius: var(--flavorsubst-lp-radius-lg) !important;
	overflow: hidden;
	transition: transform var(--flavorsubst-lp-transition), box-shadow var(--flavorsubst-lp-transition) !important;
	position: relative;
}

.flavorsubst-lp-product-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--flavorsubst-lp-shadow-lg) !important;
}

.flavorsubst-lp-product-card.flavorsubst-lp-product-best {
	border-color: var(--flavorsubst-lp-success) !important;
	border-width: 2px !important;
}

.flavorsubst-lp-product-badge-best {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--flavorsubst-lp-success) !important;
	color: #fff !important;
	padding: 0.25rem 0.75rem !important;
	border-radius: 9999px !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	z-index: 1;
}

.flavorsubst-lp-product-image {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--flavorsubst-lp-gray-50);
}

.flavorsubst-lp-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transition: transform 0.3s ease !important;
}

.flavorsubst-lp-product-card:hover .flavorsubst-lp-product-image img {
	transform: scale(1.05);
}

.flavorsubst-lp-product-info {
	padding: 1.25rem !important;
}

.flavorsubst-lp-product-title {
	font-size: 1rem !important;
	font-weight: 600 !important;
	margin: 0 0 0.5rem 0 !important;
	line-height: 1.3 !important;
}

.flavorsubst-lp-product-title a {
	color: var(--flavorsubst-lp-gray-900) !important;
	text-decoration: none !important;
}

.flavorsubst-lp-product-title a:hover {
	color: var(--flavorsubst-lp-primary) !important;
}

.flavorsubst-lp-product-rating {
	margin-bottom: 0.5rem;
}

.flavorsubst-lp-product-rating .star-rating {
	font-size: 0.875rem;
}

.flavorsubst-lp-product-price {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--flavorsubst-lp-gray-900) !important;
	margin-bottom: 0.5rem !important;
}

.flavorsubst-lp-product-price .woocommerce-Price-amount {
	color: inherit !important;
	font-weight: inherit !important;
}

.flavorsubst-lp-product-stock {
	margin-bottom: 1rem;
}

.flavorsubst-lp-stock-available {
	color: var(--flavorsubst-lp-success) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
}

.flavorsubst-lp-product-actions {
	margin-top: auto;
}

.flavorsubst-lp-product-actions .flavorsubst-lp-btn {
	width: 100%;
}

/* ==========================================================================
   SECTIONS (allgemein)
   ========================================================================== */

.flavorsubst-lp-section {
	margin: 2.5rem 0 !important;
	padding: 2rem !important;
	background: #fff !important;
	border-radius: var(--flavorsubst-lp-radius-lg) !important;
	box-shadow: var(--flavorsubst-lp-shadow) !important;
	border: 1px solid var(--flavorsubst-lp-gray-200) !important;
}

.flavorsubst-lp-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 0.625rem !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: var(--flavorsubst-lp-gray-900) !important;
	margin: 0 0 1.5rem 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border: none !important;
}

.flavorsubst-lp-section-title .dashicons {
	color: var(--flavorsubst-lp-primary);
	font-size: 1.375rem;
	width: 1.375rem;
	height: 1.375rem;
	line-height: 1;
}

/* ==========================================================================
   COMPARISON TABLE
   ========================================================================== */

.flavorsubst-lp-comparison-wrapper {
	overflow-x: auto;
	margin: 0 -0.5rem;
	padding: 0 0.5rem;
	-webkit-overflow-scrolling: touch;
}

.flavorsubst-lp-comparison-table {
	width: 100%;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	font-size: 0.875rem !important;
	min-width: 550px;
	background: #fff !important;
}

.flavorsubst-lp-comparison-table th,
.flavorsubst-lp-comparison-table td {
	padding: 0.875rem 0.75rem !important;
	text-align: center !important;
	border: none !important;
	border-bottom: 1px solid var(--flavorsubst-lp-gray-200) !important;
	vertical-align: middle !important;
}

.flavorsubst-lp-comparison-header-criteria,
.flavorsubst-lp-comparison-criteria {
	text-align: left !important;
	font-weight: 600 !important;
	color: var(--flavorsubst-lp-gray-700) !important;
	background: var(--flavorsubst-lp-gray-50) !important;
	width: 140px !important;
	min-width: 140px !important;
}

.flavorsubst-lp-comparison-header-product {
	min-width: 160px;
	vertical-align: top !important;
	padding-top: 1.25rem !important;
}

.flavorsubst-lp-comparison-header-product.flavorsubst-lp-original {
	background: var(--flavorsubst-lp-danger-light) !important;
	opacity: 0.8;
}

.flavorsubst-lp-comparison-header-product.flavorsubst-lp-alternative {
	background: var(--flavorsubst-lp-success-light) !important;
}

.flavorsubst-lp-comparison-value.flavorsubst-lp-original {
	background: var(--flavorsubst-lp-danger-light) !important;
	opacity: 0.8;
}

.flavorsubst-lp-comparison-value.flavorsubst-lp-alternative {
	background: #f0fdf4 !important;
}

/* Product Badges */
.flavorsubst-lp-product-badge-oos,
.flavorsubst-lp-product-badge-available {
	display: inline-block !important;
	padding: 0.25rem 0.625rem !important;
	border-radius: 9999px !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.025em !important;
	margin-bottom: 0.625rem !important;
	line-height: 1.3 !important;
}

.flavorsubst-lp-product-badge-oos {
	background: #fee2e2 !important;
	color: var(--flavorsubst-lp-danger) !important;
}

.flavorsubst-lp-product-badge-available {
	background: #dcfce7 !important;
	color: var(--flavorsubst-lp-success) !important;
}

.flavorsubst-lp-product-thumb {
	margin-bottom: 0.5rem;
}

.flavorsubst-lp-product-thumb img {
	width: 100px !important;
	height: 100px !important;
	object-fit: cover !important;
	border-radius: var(--flavorsubst-lp-radius-sm) !important;
	border: 1px solid var(--flavorsubst-lp-gray-200) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flavorsubst-lp-product-thumb-link {
	display: block;
}

.flavorsubst-lp-product-thumb-link:hover img {
	transform: scale(1.05);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.flavorsubst-lp-product-name {
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	color: var(--flavorsubst-lp-gray-900) !important;
	line-height: 1.3 !important;
}

.flavorsubst-lp-product-name a {
	color: var(--flavorsubst-lp-primary) !important;
	text-decoration: none !important;
}

.flavorsubst-lp-product-name a:hover {
	text-decoration: underline !important;
}

/* Check/Cross Icons */
.flavorsubst-lp-check {
	color: var(--flavorsubst-lp-success) !important;
	font-size: 1.25rem !important;
	font-weight: bold !important;
}

.flavorsubst-lp-cross {
	color: var(--flavorsubst-lp-gray-300) !important;
	font-size: 1.25rem !important;
}

/* Stock Status */
.flavorsubst-lp-stock-in {
	color: var(--flavorsubst-lp-success) !important;
	font-weight: 600 !important;
}

.flavorsubst-lp-stock-out {
	color: var(--flavorsubst-lp-danger) !important;
	font-weight: 600 !important;
}

.flavorsubst-lp-comparison-actions td {
	padding-top: 1.25rem !important;
	border-bottom: none !important;
}

/* Preis in Tabelle */
.flavorsubst-lp-comparison-value .woocommerce-Price-amount,
.flavorsubst-lp-comparison-value .amount {
	font-weight: 600 !important;
}

.flavorsubst-lp-comparison-value del {
	opacity: 0.5;
	font-size: 0.85em;
}

/* Comparison Summary */
.flavorsubst-lp-comparison-summary {
	margin-top: 1.5rem !important;
	padding-top: 1.25rem !important;
	border-top: 1px solid var(--flavorsubst-lp-gray-200) !important;
}

.flavorsubst-lp-comparison-summary h3 {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: var(--flavorsubst-lp-gray-700) !important;
	margin: 0 0 1rem 0 !important;
	padding: 0 !important;
	text-transform: none !important;
}

.flavorsubst-lp-summary-cards {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.flavorsubst-lp-summary-card {
	flex: 1;
	min-width: 180px;
	padding: 1rem;
	background: var(--flavorsubst-lp-gray-50);
	border-radius: var(--flavorsubst-lp-radius);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	border: 1px solid var(--flavorsubst-lp-gray-200);
}

.flavorsubst-lp-summary-icon {
	font-size: 1.375rem;
	line-height: 1;
}

.flavorsubst-lp-summary-label {
	font-size: 0.6875rem;
	color: var(--flavorsubst-lp-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
}

.flavorsubst-lp-summary-value {
	font-weight: 600 !important;
	color: var(--flavorsubst-lp-gray-900) !important;
	text-decoration: none !important;
	font-size: 0.9375rem !important;
}

.flavorsubst-lp-summary-value:hover {
	color: var(--flavorsubst-lp-primary) !important;
}

.flavorsubst-lp-summary-rating {
	color: var(--flavorsubst-lp-gray-500) !important;
	font-weight: normal !important;
	font-size: 0.8125rem;
}

/* ==========================================================================
   CONCLUSION SECTION
   ========================================================================== */

.flavorsubst-lp-conclusion {
	text-align: center !important;
	background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
	border-color: #bfdbfe !important;
}

.flavorsubst-lp-conclusion-icon {
	margin-bottom: 0.75rem;
}

.flavorsubst-lp-conclusion-icon .dashicons {
	font-size: 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--flavorsubst-lp-success);
}

.flavorsubst-lp-conclusion .flavorsubst-lp-section-title {
	justify-content: center !important;
}

.flavorsubst-lp-conclusion-text {
	font-size: 1rem !important;
	color: var(--flavorsubst-lp-gray-700) !important;
	max-width: 550px;
	margin: 0 auto 1.25rem auto !important;
	line-height: 1.6 !important;
}

.flavorsubst-lp-conclusion-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
}

.flavorsubst-lp-conclusion-product {
	font-size: 0.8125rem;
	color: var(--flavorsubst-lp-gray-500);
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */

.flavorsubst-lp-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.flavorsubst-lp-faq-item {
	border: 1px solid var(--flavorsubst-lp-gray-200) !important;
	border-radius: var(--flavorsubst-lp-radius) !important;
	overflow: hidden;
	background: #fff !important;
}

.flavorsubst-lp-faq-question {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	padding: 1rem 1.125rem !important;
	background: var(--flavorsubst-lp-gray-50) !important;
	border: none !important;
	cursor: pointer !important;
	text-align: left !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: var(--flavorsubst-lp-gray-900) !important;
	transition: background var(--flavorsubst-lp-transition) !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.flavorsubst-lp-faq-question:hover {
	background: var(--flavorsubst-lp-gray-100) !important;
}

.flavorsubst-lp-faq-question[aria-expanded="true"] {
	background: var(--flavorsubst-lp-gray-100) !important;
}

.flavorsubst-lp-faq-question-text {
	flex: 1;
	padding-right: 1rem;
}

.flavorsubst-lp-faq-toggle .dashicons {
	font-size: 1.125rem;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--flavorsubst-lp-gray-500);
	transition: transform var(--flavorsubst-lp-transition);
	line-height: 1;
}

.flavorsubst-lp-faq-question[aria-expanded="true"] .flavorsubst-lp-faq-toggle .dashicons {
	transform: rotate(45deg);
}

.flavorsubst-lp-faq-answer {
	padding: 1rem 1.125rem !important;
	background: #fff !important;
	border-top: 1px solid var(--flavorsubst-lp-gray-200) !important;
}

.flavorsubst-lp-faq-answer p {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--flavorsubst-lp-gray-700) !important;
	line-height: 1.6 !important;
	font-size: 0.9375rem !important;
}

/* ==========================================================================
   SOCIAL PROOF SECTION
   ========================================================================== */

.flavorsubst-lp-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}

.flavorsubst-lp-review-card {
	padding: 1.25rem;
	background: var(--flavorsubst-lp-gray-50);
	border-radius: var(--flavorsubst-lp-radius);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	align-items: center;
	text-align: center;
	border: 1px solid var(--flavorsubst-lp-gray-200);
	transition: transform var(--flavorsubst-lp-transition), box-shadow var(--flavorsubst-lp-transition);
}

.flavorsubst-lp-review-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--flavorsubst-lp-shadow);
}

.flavorsubst-lp-review-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
}

.flavorsubst-lp-review-product img {
	width: 50px !important;
	height: 50px !important;
	object-fit: cover !important;
	border-radius: var(--flavorsubst-lp-radius-sm) !important;
	border: 1px solid var(--flavorsubst-lp-gray-200) !important;
}

.flavorsubst-lp-review-product-name {
	font-weight: 600 !important;
	font-size: 0.8125rem !important;
	color: var(--flavorsubst-lp-gray-900) !important;
	line-height: 1.3 !important;
}

.flavorsubst-lp-review-rating {
	font-size: 1.125rem;
	line-height: 1;
}

.flavorsubst-lp-review-score {
	font-weight: 700 !important;
	color: var(--flavorsubst-lp-gray-700) !important;
	margin-left: 0.25rem;
	font-size: 0.9375rem;
}

.flavorsubst-lp-review-count {
	font-size: 0.75rem;
	color: var(--flavorsubst-lp-gray-500);
}

/* ==========================================================================
   THEME-SPEZIFISCHE OVERRIDES
   ========================================================================== */

/* BeTheme */
body.flavor-flavor .flavorsubst-lp-section,
body.flavor .flavorsubst-lp-section,
.mfn-builder .flavorsubst-lp-section {
	max-width: 100% !important;
}

body.flavor-flavor .flavorsubst-lp-hero h1,
body.flavor .flavorsubst-lp-hero h1 {
	font-size: clamp(1.375rem, 4vw, 2rem) !important;
	color: #fff !important;
}

/* WoodMart */
.woodmart-ajax-content .flavorsubst-lp-section,
.wd-shop-content .flavorsubst-lp-section {
	box-shadow: var(--flavorsubst-lp-shadow) !important;
}

body.woodmart-main .flavorsubst-lp-btn {
	text-transform: none !important;
}

/* Avada / Fusion Builder */
body.fusion-body .flavorsubst-lp-section,
.fusion-fullwidth .flavorsubst-lp-section {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body.fusion-body .flavorsubst-lp-btn {
	letter-spacing: 0 !important;
}

/* Flatsome */
body.flavor-flavor .flavorsubst-lp-section,
.fl-module .flavorsubst-lp-section {
	width: 100% !important;
}

body.flavor-flavor .flavorsubst-lp-hero-headline,
body.flavor-flavor .flavorsubst-lp-section-title {
	text-transform: none !important;
}

/* Astra */
body.flavor-flavor .flavorsubst-lp-btn,
body.flavor-flavor-theme .flavorsubst-lp-btn {
	padding: 0.75rem 1.5rem !important;
}

/* OceanWP */
body.flavor-flavor .flavorsubst-lp-hero-headline {
	letter-spacing: 0 !important;
}

/* WooCommerce Standard - Storefront etc. */
.woocommerce .flavorsubst-lp-section {
	clear: both;
}

.woocommerce .flavorsubst-lp-btn.button {
	background: var(--flavorsubst-lp-primary) !important;
	color: #fff !important;
}

/* ==========================================================================
   STICKY COMPARISON HEADER
   ========================================================================== */

.flavorsubst-lp-thead-sticky {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   RESPONSIVE STYLES
   ========================================================================== */

@media (max-width: 992px) {
	.flavorsubst-lp-hero {
		padding: 2rem 1.5rem;
		border-radius: var(--flavorsubst-lp-radius);
	}

	.flavorsubst-lp-section {
		padding: 1.5rem !important;
		margin: 2rem 0 !important;
	}
}

@media (max-width: 768px) {
	.flavorsubst-lp-hero {
		padding: 1.5rem 1.25rem;
		margin: 0 0 1.5rem 0;
	}

	.flavorsubst-lp-hero-headline {
		font-size: 1.25rem !important;
	}

	.flavorsubst-lp-hero-subheadline {
		font-size: 0.9375rem !important;
	}

	.flavorsubst-lp-hero-cta {
		flex-direction: column;
		gap: 0.625rem;
	}

	.flavorsubst-lp-hero .flavorsubst-lp-btn {
		width: 100% !important;
	}

	.flavorsubst-lp-section {
		padding: 1.25rem !important;
		margin: 1.5rem 0 !important;
		border-radius: var(--flavorsubst-lp-radius) !important;
	}

	.flavorsubst-lp-section-title {
		font-size: 1.125rem !important;
	}

	.flavorsubst-lp-comparison-table {
		font-size: 0.8125rem !important;
	}

	.flavorsubst-lp-comparison-table th,
	.flavorsubst-lp-comparison-table td {
		padding: 0.625rem 0.5rem !important;
	}

	.flavorsubst-lp-comparison-header-criteria,
	.flavorsubst-lp-comparison-criteria {
		width: 100px !important;
		min-width: 100px !important;
		font-size: 0.75rem !important;
	}

	.flavorsubst-lp-product-thumb img {
		width: 50px !important;
		height: 50px !important;
	}

	.flavorsubst-lp-product-name {
		font-size: 0.75rem !important;
	}

	.flavorsubst-lp-summary-cards {
		flex-direction: column;
		gap: 0.75rem;
	}

	.flavorsubst-lp-reviews-grid {
		grid-template-columns: 1fr;
		gap: 0.875rem;
	}
}

@media (max-width: 480px) {
	.flavorsubst-lp-hero {
		padding: 1.25rem 1rem;
	}

	.flavorsubst-lp-hero-headline {
		font-size: 1.125rem !important;
	}

	.flavorsubst-lp-section {
		padding: 1rem !important;
	}

	.flavorsubst-lp-faq-question {
		padding: 0.875rem 1rem !important;
		font-size: 0.875rem !important;
	}

	.flavorsubst-lp-faq-answer {
		padding: 0.875rem 1rem !important;
	}

	.flavorsubst-lp-btn {
		padding: 0.625rem 1.125rem !important;
		font-size: 0.875rem !important;
	}
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
	.flavorsubst-lp-hero {
		background: none !important;
		color: #000 !important;
		padding: 1rem 0 !important;
		border: 1px solid #ccc !important;
	}

	.flavorsubst-lp-hero-headline,
	.flavorsubst-lp-hero-subheadline {
		color: #000 !important;
	}

	.flavorsubst-lp-btn,
	.flavorsubst-lp-hero-cta {
		display: none !important;
	}

	.flavorsubst-lp-section {
		box-shadow: none !important;
		border: 1px solid #ccc !important;
		page-break-inside: avoid;
	}

	.flavorsubst-lp-comparison-table {
		font-size: 10pt !important;
	}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.flavorsubst-lp-btn:focus-visible,
.flavorsubst-lp-faq-question:focus-visible {
	outline: 2px solid var(--flavorsubst-lp-primary) !important;
	outline-offset: 2px !important;
}

/* ==========================================================================
   LAST KNOWN PRICE (am Ende nach den Tabs)
   ========================================================================== */

.flavorsubst-lp-last-price {
	margin: 2rem 0 !important;
	padding: 1rem 1.5rem !important;
	background: var(--flavorsubst-lp-gray-100) !important;
	border-left: 3px solid var(--flavorsubst-lp-gray-300) !important;
	border-radius: 0 var(--flavorsubst-lp-radius-sm) var(--flavorsubst-lp-radius-sm) 0 !important;
}

.flavorsubst-lp-last-price-text {
	margin: 0 !important;
	font-size: 0.875rem !important;
	color: var(--flavorsubst-lp-gray-500) !important;
}

.flavorsubst-lp-last-price-text del {
	color: var(--flavorsubst-lp-gray-400) !important;
	margin-left: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.flavorsubst-lp-btn,
	.flavorsubst-lp-review-card,
	.flavorsubst-lp-faq-toggle .dashicons {
		transition: none !important;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.flavorsubst-lp-section {
		border-width: 2px !important;
	}

	.flavorsubst-lp-btn {
		border: 2px solid currentColor !important;
	}
}