/**
 * FF Pack Selector.
 *
 * Farben kommen aus der Freche-Freunde-Palette (#5CA711 Titelgrün,
 * #007F3E CTA-Grün) und liegen als Custom Properties auf .ff-pack —
 * damit lassen sie sich in Bricks oder im Child-Theme mit einer Zeile
 * überschreiben, ohne dieses Stylesheet anzufassen.
 */

.ff-pack {
	--ff-green: #5ca711;
	--ff-green-dark: #007f3e;
	--ff-green-tint: #f2f9e8;
	--ff-grey-bg: #f5f5f3;
	--ff-grey-border: #e6e6e2;
	--ff-grey-hover: #efefeb;
	--ff-text: #2b2b2b;
	--ff-text-muted: #7a7a75;
	--ff-radius: 14px;
	--ff-radius-pill: 55px;
}

.ff-pack__cards {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin-bottom: 1.5rem;
}

/* Nativer Woo-Select: für Screenreader und Woo-JS vorhanden, visuell weg.
   Kein display:none — das würde Woos Sichtbarkeitsprüfungen stören. */
.ff-pack__native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

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

.ff-pack__card {
	display: flex;
	flex-direction: column;
	align-items: stretch; /* explizit: sonst hängt die Ausrichtung des Mengenfelds vom Zufall ab */
	padding: 1.125rem 1.25rem;
	background-color: var(--ff-grey-bg);
	border: 2px solid var(--ff-grey-border);
	border-radius: var(--ff-radius);
	cursor: pointer;
	position: relative;
	transition:
		border-color 0.18s ease,
		background-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

/* Unsichtbares Klick-Overlay über der ganzen Karte.
   Alles, was darüber liegen soll (Mengenfeld), bekommt z-index 2. */
.ff-pack__hit {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: 0;
	cursor: pointer;
	border-radius: inherit;
}

.ff-pack__main {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.ff-pack__card:hover {
	background-color: var(--ff-grey-hover);
	border-color: #d2d2cc;
	transform: translateY(-1px);
}

/* Aktiv: grün, angehoben, deutlich vor den anderen.
   Unterscheidet sich zusätzlich über Schatten und Schriftfarbe — nicht
   allein über die Farbe. */
.ff-pack__card.is-active {
	background-color: var(--ff-green-tint);
	border-color: var(--ff-green);
	box-shadow: 0 4px 14px rgba(92, 167, 17, 0.28);
	transform: translateY(-1px);
}

.ff-pack__card.is-active:hover {
	background-color: var(--ff-green-tint);
	border-color: var(--ff-green);
}

/* Fokusring nur für Tastaturbedienung.
   :focus-within hätte den Ring auch nach jedem Mausklick gezeigt —
   :focus-visible unterscheidet zwischen Maus und Tastatur. */
.ff-pack__card:has(.ff-pack__radio:focus-visible) {
	outline: 3px solid var(--ff-green-dark);
	outline-offset: 2px;
}

.ff-pack__card.is-out-of-stock,
.ff-pack__card.is-unavailable {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Radio bleibt im DOM (Tastatur + Screenreader), ist aber unsichtbar. */
.ff-pack__radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

/* --------------------------------------------------------------- Textteil */

.ff-pack__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	flex: 1 1 auto;
	min-width: 0;
}

.ff-pack__title {
	font-weight: 700;
	line-height: 1.25;
	color: var(--ff-text-muted);
	transition: color 0.18s ease;
}

.ff-pack__card.is-active .ff-pack__title {
	color: var(--ff-green-dark);
}

.ff-pack__subtitle {
	font-size: 0.8125em;
	line-height: 1.3;
	color: var(--ff-text-muted);
}

.ff-pack__card.is-active .ff-pack__subtitle {
	color: var(--ff-text);
}

.ff-pack__stock {
	font-size: 0.75em;
	color: var(--ff-text-muted);
}

/* --------------------------------------------------------------- Preisteil */

.ff-pack__prices {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
	flex: 0 0 auto;
	text-align: right;
}

.ff-pack__price {
	font-weight: 700;
	font-size: 1.0625em;
	color: var(--ff-text-muted);
	line-height: 1.2;
	transition: color 0.18s ease;
}

.ff-pack__card.is-active .ff-pack__price {
	color: var(--ff-green-dark);
}

.ff-pack__reference {
	color: var(--ff-text-muted);
	font-size: 0.8125em;
	opacity: 0.75;
}

.ff-pack__reference-note {
	font-size: 0.75em;
	line-height: 1.3;
	color: var(--ff-text-muted);
}

/* Ersparnis als Badge — das ist das Verkaufsargument und bleibt auch auf
   der inaktiven Karte farbig. Genau das gibt den grauen Karten Leben. */
.ff-pack__saving {
	display: inline-block;
	background-color: var(--ff-green);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	padding: 0.3125em 0.75em;
	border-radius: var(--ff-radius-pill);
	white-space: nowrap;
}

.ff-pack__card.is-active .ff-pack__saving {
	background-color: var(--ff-green-dark);
}

/* ------------------------------------------------- Menge in der Karte */

/* Der Slot existiert auf jeder Karte, damit das JS beim Wechsel ein Ziel hat —
   sichtbar ist er nur auf der aktiven. */
.ff-pack__qty-slot {
	display: none;
}

/* Flex, nicht block: Themes geben .quantity oft ein flex-basis (hier
   flex: 0 0 120px). Als Block-Kind greift das nicht und das Feld fällt auf
   Inhaltsbreite zusammen. */
.ff-pack__card.is-active .ff-pack__qty-slot {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2; /* über dem Klick-Overlay, sonst schluckt das Label den Stepper */
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid rgba(92, 167, 17, 0.25);
}

.ff-pack__qty-slot .quantity {
	margin: 0;
	min-width: 7.5rem; /* Fallback, falls das Theme keine Breite mitgibt. */
}

/* ------------------------------------------------------------- Warenkorb */

/* Woo braucht den Container, wir blenden ihn nur aus. */
.ff-pack__variation-hidden {
	display: none !important;
}

.ff-pack__cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.ff-pack__cart .quantity {
	flex: 0 0 auto;
}

.ff-pack__cart .single_add_to_cart_button {
	flex: 1 1 auto;
}

/* Woo deaktiviert den Button, solange keine Variante gewählt ist.
   Das darf das Layout nicht springen lassen. */
.ff-pack__cart .single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ Mobil */

@media (max-width: 480px) {
	.ff-pack__card {
		padding: 0.875rem 1rem;
	}

	.ff-pack__main {
		gap: 0.75rem;
	}

	.ff-pack__prices {
		gap: 0.1875rem;
	}

	.ff-pack__saving {
		font-size: 0.6875em;
	}
}

/* Wer Animationen abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
	.ff-pack__card {
		transition: none;
	}

	.ff-pack__card:hover,
	.ff-pack__card.is-active {
		transform: none;
	}
}