/*
Theme Name: Mascota Vital
Theme URI: https://mascota-vital.local/
Author: Mascota Vital
Author URI: https://mascota-vital.local/
Description: Individuelles FSE-Block-Theme fuer den Mascota Vital WooCommerce-Shop. Warme Terrakotta-Palette, Nunito & Poppins, komplett im Site-Editor bearbeitbar.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mascotavital
Tags: e-commerce, block-patterns, full-site-editing, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, wide-blocks
*/

/*
 * Diese Datei ist fuer ein Block-Theme absichtlich schlank. Praesentation kommt
 * aus theme.json, den Templates und den Patterns. Nur wenige Dinge, die sich in
 * theme.json (noch) nicht sauber ausdruecken lassen, stehen hier.
 */

/* Kein horizontaler Scroll (u. a. wegen des ausgeblendeten Mini-Warenkorb-Panels). */
html {
	overflow-x: hidden;
}

/* Kopf, Inhalt und Fuss ohne Zwischenabstand aneinander. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Kopfbereich
 * ------------------------------------------------------------------------- */

/* Wurzel-Gruppe spannt die volle Viewport-Breite, ohne Aussenabstand. */
.mv-header {
	width: 100%;
	padding: 0;
	background: var(--wp--preset--color--base);
}
.mv-header.is-layout-flow > * {
	margin-block: 0;
}

/* Ankuendigungsleiste: randlos, volle Breite, kompakt. */
.mv-announcement {
	width: 100%;
	column-gap: 0;
	row-gap: 4px;
	line-height: 1.3;
}
.mv-announcement > .wp-block-paragraph {
	margin: 0;
	padding: 0 28px;
	position: relative;
}
.mv-announcement > .wp-block-paragraph + .wp-block-paragraph::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 1em;
	width: 1px;
	transform: translateY(-50%);
	background: #5a5654;
}

/* Mobil: die 3 Ankuendigungstexte brauchen nebeneinander zu viel Platz und
   brechen haesslich um. Reines CSS-Keyframe-Crossfade statt JS/Karussell-
   Bibliothek – kein zusaetzlicher Request, keine Laufzeitkosten, nur eine
   @keyframes-Regel: alle 3 liegen uebereinander (position:absolute) und
   blenden sich reihum ein/aus, je ein Drittel der 12s-Schleife sichtbar. */
@media (max-width: 949.98px) {
	.mv-announcement {
		position: relative;
		min-height: 2.6em;
	}
	.mv-announcement > .wp-block-paragraph {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		animation: mv-announce-fade 12s infinite;
	}
	.mv-announcement > .wp-block-paragraph + .wp-block-paragraph::before {
		display: none;
	}
	.mv-announcement > .wp-block-paragraph:nth-child(1) {
		animation-delay: 0s;
	}
	.mv-announcement > .wp-block-paragraph:nth-child(2) {
		animation-delay: 4s;
	}
	.mv-announcement > .wp-block-paragraph:nth-child(3) {
		animation-delay: 8s;
	}
	@keyframes mv-announce-fade {
		0%,
		4% {
			opacity: 0;
		}
		8%,
		29% {
			opacity: 1;
		}
		33%,
		100% {
			opacity: 0;
		}
	}
	@media (prefers-reduced-motion: reduce) {
		.mv-announcement > .wp-block-paragraph {
			animation: none;
			opacity: 0;
		}
		.mv-announcement > .wp-block-paragraph:first-child {
			opacity: 1;
			position: relative;
		}
	}
}

/* Haupt-Kopfzeile: bei 1600px begrenzt, zentriert, mit Seitenrand. */
.mv-header-main {
	box-sizing: border-box;
	max-width: 1600px;
	margin-inline: auto;
	width: 100%;
	padding-inline: clamp(16px, 3vw, 32px);
	padding-block: 6px;
}
/* Logo/Suche/Aktionen/Nav sind alle direkte Flex-Kinder von .mv-header-main
   (Nav liegt seit der mobilen Neuanordnung NICHT mehr als Geschwister-Block
   danach, sondern im selben Flex-Container – siehe header.html). Reihenfolge
   per "order" statt Dokumentreihenfolge, damit sie sich zwischen Desktop und
   Mobil unterscheiden kann, ohne den Navigation-Block technisch zu verschieben. */
.mv-header-main .mv-logo {
	order: 1;
}
.mv-header-main .mv-search {
	order: 2;
}
.mv-header-main .mv-header-actions {
	order: 3;
}
/* Die Navigations-Klasse landet auf <nav> UND auf der inneren <ul>.
   Breite/Linie/Aussenabstand daher nur auf das <nav> setzen, nicht auf
   ".mv-nav" allgemein. "flex:1 0 100%" erzwingt auf Desktop weiterhin eine
   eigene volle Zeile unterhalb von Logo/Suche/Aktionen (optisch identisch
   zum fruaheren Aufbau mit zwei Geschwister-Bloecken). */
nav.mv-nav {
	order: 4;
	flex: 1 0 100%;
	padding-top: 14px;
	padding-bottom: 10px;
	row-gap: 8px;
	min-height: 0;
	border-top: 1px solid var(--wp--preset--color--cream-border);
}
nav.mv-nav.wp-block-navigation {
	--navigation-layout-padding: 0;
}
.mv-nav .wp-block-navigation__responsive-container:not(.is-menu-open),
ul.mv-nav.wp-block-navigation__container {
	padding: 0;
	margin: 0;
	min-height: 0;
	border: 0;
}
.mv-nav .wp-block-navigation-item__content {
	padding-block: 0;
}

/* Suchfeld: mittig, kompakt, nur moderat breit (Vorlage ~420–520px). */
.mv-header-main .mv-search {
	flex: 0 1 520px;
	max-width: 520px;
	margin: 0 16px;
}
.mv-header-main .mv-search .wp-block-search__inside-wrapper {
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
}
.mv-header-main .mv-search .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	color: #fff;
	margin: 0;
	border: 0;
	padding: 0 18px;
	border-radius: 0;
}
.mv-header-main .mv-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-hover);
}
.mv-header-main .mv-search .wp-block-search__input {
	border: 0;
	padding: 7px 14px;
	font-size: 0.875rem;
	min-height: 0;
}
.mv-header-main .mv-search .wp-block-search__button.has-icon {
	padding: 0 13px;
	min-width: 0;
	min-height: 0;
}
.mv-header-main .mv-search .wp-block-search__button svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

/* Aktionen rechts: Warenkorb-Preis + Icons. */
.mv-header-actions {
	flex-shrink: 0;
}
.mv-header-actions .wc-block-mini-cart__button {
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	gap: 8px;
}
.mv-header-actions .wc-block-mini-cart__amount {
	font-weight: 700;
}
/* Die Klasse heisst "wc-block-customer-account__link"/"__visual", nicht
   einfach "wc-block-customer-account" – mit dem falschen Namen traf diese
   Regel nie, das Icon blieb in der globalen Link-Farbe (Terrakotta) haengen. */
.mv-header-actions .wc-block-customer-account__link,
.mv-header-actions .wc-block-customer-account__visual {
	color: var(--wp--preset--color--contrast);
}

/* Logo-Hoehe wie in der Vorlage. */
.mv-header-main .mv-logo img {
	height: 34px;
	width: auto;
}

/* Navigation: nur Oberkante, Hover-Farbe. */
.mv-nav.wp-block-navigation .wp-block-navigation-item__content:hover,
.mv-nav.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--primary-hover);
}

/* WordPress' Navigation-Block zeigt das Hamburger-Icon standardmaessig nur
   unter 600px (Core-CSS: wp-includes/blocks/navigation/style.css). Zwischen
   600px und dem Punkt, an dem die Eintraege tatsaechlich noch in eine Zeile
   passen (~780px bei diesem Menü-Text/Schriftgroesse), bricht die Zeile
   haesslich um statt aufs Icon umzuschalten. Hamburger-Schwelle auf 950px
   angehoben, damit dieser Zwischenbereich wegfaellt. */
@media (min-width: 600px) and (max-width: 949.98px) {
	.mv-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.mv-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* Mobile Kopfzeile: Logo + Aktionen (Mini-Cart/Konto) teilen sich eine Zeile,
   darunter Burger-Icon + (schmalere) Suche in einer zweiten Zeile – statt vier
   gestapelten Zeilen (Logo / Suche / Aktionen / Burger) wie im Flow-Default.
   header.html buendelt dafuer Logo+Aktionen in ".mv-header-row-top" und
   Nav+Suche in ".mv-header-row-bottom" (zwei echte wp:group-Wrapper).
   Auf Desktop sind beide "display:contents" (verschwinden spurlos aus dem
   Layoutbaum, Kinder werden direkt zu Flex-Items von .mv-header-main – exakt
   der fruehere flache Aufbau, per "order" sortiert, siehe unten).
   Auf Mobil werden beide zu eigenen, UNABHAENGIGEN Flex-Zeilen. Das ist der
   Punkt: eine vorherige Variante nutzte ein einzelnes 2x2-CSS-Grid ueber
   beide Zeilen – das zwingt Logo und Burger-Icon (beide in Spalte 1) dazu,
   sich dieselbe Spaltenbreite zu teilen. Reicht der Platz nicht für Logo UND
   Burger gemeinsam, schrumpft die Spalte Richtung Burger-Icon-Groesse, und
   das Logo-<img> (nur "width:auto") wird mitgequetscht (vom Nutzer per
   DevTools nachgewiesen: 48×10px statt 150×34px). Getrennte Flex-Zeilen
   haben keine gemeinsame Spalten-Breitenberechnung – Logo bekommt seine
   volle natuerliche Breite, unabhaengig davon, wie klein das Burger-Icon
   darunter ist. */
.mv-header-row-top,
.mv-header-row-bottom {
	display: contents !important;
}
@media (max-width: 949.98px) {
	/* Gutenberg druckt fuer den Flex-"layout"-Support dieser Gruppen eigene
	   Inline-<style>-Regeln mit derselben Spezifitaet wie unsere Regel hier,
	   die im Dokument nach unserem style.css stehen und ohne !important
	   gewinnen wuerden (gleiche Masche wie beim alten Grid-Versuch). */
	.mv-header-main {
		display: flex !important;
		flex-direction: column;
		row-gap: 10px;
	}
	.mv-header-row-top,
	.mv-header-row-bottom {
		display: flex !important;
		align-items: center;
		width: 100%;
	}
	.mv-header-row-top {
		justify-content: space-between;
	}
	.mv-header-row-bottom {
		/* Gleicher Wert wie .mv-header-main's eigenes padding-inline, damit der
		   Abstand Burger→Suche optisch genauso gross ist wie Rand→Burger links
		   (und Suche→Rand rechts, da sie den Rest der Zeile ausfuellt). */
		gap: clamp(16px, 3vw, 32px);
	}
	nav.mv-nav {
		/* "order:4" aus der Desktop-Regel oben gilt sonst auch hier weiter (CSS
		   setzt Eigenschaften zwischen Breakpoints nicht automatisch zurueck)
		   und wuerde den Burger trotz DOM-Reihenfolge vor der Suche ans Ende
		   der Zeile sortieren. Zurueck auf die natuerliche Quellreihenfolge. */
		order: 0;
		flex: 0 0 auto;
		padding: 0;
		border-top: 0;
	}
	.mv-header-main .mv-search {
		order: 0;
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		margin: 0;
	}
}

/* Mobiles Menü-Overlay (aufgeklapptes Hamburger-Menü): standardmaessig hat
   WordPress' Core-Navigation-Block hier KEIN seitliches Padding (unsere
   eigene Regel "ul.mv-nav.wp-block-navigation__container{padding:0}" oben
   setzt es zusaetzlich explizit auf 0) – Menüpunkte und Schliessen-Icon
   stossen direkt an den Bildschirmrand. Seitliches Padding ergaenzen und das
   Logo per reinem CSS (::before + content:url(), kein JS) oben ueber die
   Menüpunkte setzen. */
.wp-block-navigation__responsive-container-content {
	padding-left: clamp(16px, 4vw, 32px) !important;
	padding-right: clamp(16px, 4vw, 32px) !important;
	box-sizing: border-box;
}
.wp-block-navigation__responsive-container.is-menu-open ul.mv-nav.wp-block-navigation__container::before {
	content: url("/wp-content/themes/mascotavital/assets/images/logo.svg");
	display: block;
	width: 140px;
	height: auto;
	margin: 0 0 32px;
}

/* ---------------------------------------------------------------------------
 * Fussbereich
 * ------------------------------------------------------------------------- */

.is-style-mv-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.is-style-mv-linklist li {
	margin: 0 0 10px;
}

/* Logo-Badge im Footer nur so breit wie das Logo. */
footer .wp-block-image.wp-block-image {
	width: fit-content;
}

/* Kontaktzeilen (Adresse, E-Mail, Telefon) mit Icon. */
.mv-contact-row {
	color: var(--wp--preset--color--footer-text);
	align-items: flex-start;
}
.mv-contact-row svg {
	flex-shrink: 0;
	margin-top: 1px;
}
.mv-contact-row p {
	margin: 0;
	line-height: 1.4;
}

/* Versandpartner / Bezahlmöglichkeiten: Badges. */
.mv-ship-pay .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}
.mv-badge,
.mv-badge-mc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 0 10px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.mv-badge-dhl {
	background: #ffcc00;
	color: #d40511;
}
.mv-badge-paypal {
	background: #ffffff;
	color: #003087;
}
.mv-badge-paypal-accent {
	color: #009cde;
}
.mv-badge-visa {
	background: #1a1f71;
	color: #ffffff;
	font-style: italic;
}
.mv-badge-amex {
	background: #2e77bc;
	color: #ffffff;
}
.mv-badge-mc {
	width: 42px;
	padding: 0 6px;
	position: relative;
}
.mv-badge-mc-circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
}
.mv-badge-mc-red {
	background: #eb001b;
	margin-right: -8px;
}
.mv-badge-mc-orange {
	background: #f79e1b;
	mix-blend-mode: normal;
	opacity: 0.9;
}

/* Social-Icons in der Copyright-Zeile. */
.mv-social-row {
	width: 100%;
}
.mv-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid #45423d;
	color: var(--wp--preset--color--footer-text);
}
.mv-social-icon:hover {
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------------------------
 * Shop / WooCommerce
 * ------------------------------------------------------------------------- */

/* Mobil: Sortieren + alle Filter-Kaertchen (".mv-shop-filters", die linke
   280px-Spalte) standardmaessig ausgeblendet, per Checkbox-Hack (kein JS)
   ueber einen Button einblendbar. Checkbox + Label liegen als Geschwister
   VOR dem ".wp-block-columns" im Template (templates/archive-product.html),
   daher funktioniert ":checked ~ .wp-block-columns .mv-shop-filters" rein in
   CSS. */
.mv-filter-toggle-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mv-filter-toggle-label {
	display: none;
}
@media (max-width: 949.98px) {
	.mv-filter-toggle-label {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 12px 16px;
		margin-bottom: var(--wp--preset--spacing--30);
		border: 1px solid #ddd;
		border-radius: 4px;
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		font-weight: 700;
		font-size: 0.875rem;
		cursor: pointer;
	}
	.mv-filter-toggle-label-hide {
		display: none;
	}
	.mv-filter-toggle-checkbox:checked ~ .mv-filter-toggle-label .mv-filter-toggle-label-show {
		display: none;
	}
	.mv-filter-toggle-checkbox:checked ~ .mv-filter-toggle-label .mv-filter-toggle-label-hide {
		display: inline;
	}
	.mv-shop-filters {
		display: none;
	}
	.mv-filter-toggle-checkbox:checked ~ .wp-block-columns .mv-shop-filters {
		display: block;
	}
	/* Zweites Label (gleiche Checkbox, zweiter <label for="...">) am Ende der
	   Filter-Spalte – liegt INNERHALB von .mv-shop-filters, ist also schon
	   automatisch mit-ausgeblendet, wenn die Spalte zu ist; kein eigenes
	   display:none noetig. Erspart das Zurueckscrollen zum oberen Button. */
	.mv-filter-toggle-label-bottom {
		margin-top: var(--wp--preset--spacing--20);
		margin-bottom: 0;
	}
}

/* Sortier-/Ergebnis-Zeile kompakt. */
.wc-block-catalog-sorting,
.woocommerce-result-count,
.wp-block-woocommerce-product-results-count,
.wc-block-product-sorting,
.wc-block-catalog-sorting select {
	font-size: var(--wp--preset--font-size--small);
}

/* Sortier-Dropdown im Sidebar-Kaertchen volle Breite.
   WooCommerce setzt .woocommerce-ordering per Alt-CSS auf float:right –
   dadurch kollabiert der Wrapper und ueberdeckende Elemente blockieren
   die Klicks. Hier zuruecksetzen. */
.wp-block-woocommerce-catalog-sorting {
	display: block;
}
.wp-block-woocommerce-catalog-sorting form.woocommerce-ordering,
.mv-filters-card form.woocommerce-ordering,
.wp-block-column form.woocommerce-ordering {
	float: none;
	margin: 0;
	width: 100%;
}
.wp-block-woocommerce-catalog-sorting select,
.wp-block-woocommerce-catalog-sorting select.orderby {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px 14px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	cursor: pointer;
}

/* Ergebnis-Anzahl klein unter dem Sortier-Dropdown. */
.mv-results-count,
.mv-results-count .woocommerce-result-count,
.mv-results-count .wc-block-product-results-count {
	margin: 6px 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

/* Hinweis "Kein Filter gewählt." – ausblenden sobald Filter aktiv sind. */
.mv-no-filter {
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}
.wp-block-group:has(.wc-block-active-filters__list li) .mv-no-filter,
.wp-block-group:has(.wc-block-active-filters .wc-block-components-chip) .mv-no-filter {
	display: none;
}

/* Filter-Karten im Shop-Sidebar (erste Spalte der Produkt-Archiv-Columns). */

/* Kategorie-Liste: keine Unterstreichung, gleichmaessiger Zeilenabstand
   auch bei verschachtelten (Unter-)Kategorien.
   DOM je Eintrag: <li> > <a>Name</a> + <span class="...-count"> + <ul> (Kinder) –
   Name/Zaehler stehen also als Geschwister von <a>, nicht darin. */
.wp-block-column:first-child .wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wc-block-product-categories-list-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	margin: 0 0 8px;
}
.wc-block-product-categories-list-item:last-child {
	margin-bottom: 0;
}
.wc-block-product-categories-list-item > a {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wc-block-product-categories-list-item > a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.wc-block-product-categories-list-item-count {
	flex: 0 0 auto;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted);
}
.wc-block-product-categories-list-item > ul {
	flex: 0 0 100%;
	list-style: none;
	margin: 8px 0 0;
	padding-left: 16px;
}

/* Attribut-Filter-Karten (Fleischsorte, Snack fuer, Kaustaerke, Geeignet fuer):
   rendern als Checkbox-Liste (wc-block-components-checkbox). Ueberschrift an
   die Karten-Optik angleichen, Abstaende zwischen den Zeilen vereinheitlichen. */
.wc-block-attribute-filter__title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 1.125rem;
}
.wc-block-attribute-filter-list.wc-block-checkbox-list {
	margin: 0;
}
.wc-block-attribute-filter-list .wc-block-checkbox-list__checkbox {
	margin: 0 0 10px;
	font-size: 0.9375rem;
}
.wc-block-attribute-filter-list li:last-child .wc-block-checkbox-list__checkbox {
	margin-bottom: 0;
}
.wc-block-attribute-filter-list .wc-block-components-checkbox__label {
	color: var(--wp--preset--color--contrast);
}
.wc-block-attribute-filter-list .wc-filter-element-label-list-count {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

/* Leere Attribut-Filter-Kaertchen ausblenden: wenn fuer die aktuell
   angezeigten Produkte keine Auspraegung dieses Attributs vorkommt, raeumt
   der Block sich nach dem Laden komplett leer (keine Ueberschrift, keine
   Liste) – dann die ganze Karte verstecken statt eine leere weisse Box zu
   zeigen. Waehrend des Ladens (is-loading-Platzhalter) bleibt sie sichtbar. */
.wp-block-column:first-child
	.wp-block-group:has(.wp-block-woocommerce-attribute-filter:empty) {
	display: none;
}

/* Ladeplatzhalter der Filter dezent halten. */
.wp-block-woocommerce-active-filters.is-loading,
.wp-block-woocommerce-stock-filter.is-loading,
.wp-block-woocommerce-price-filter.is-loading {
	min-height: 1.5rem;
}

/* Produktkarten im Raster. */
.wp-block-woocommerce-product-collection .wc-block-product-template__responsive,
.wp-block-woocommerce-product-template {
	gap: var(--wp--preset--spacing--40);
}
.wp-block-woocommerce-product-collection li.wc-block-product,
.wp-block-woocommerce-product-template li.product {
	background: #fff;
	border-radius: 4px;
	padding: 20px;
}
.wp-block-woocommerce-product-collection li.wc-block-product img,
.wp-block-woocommerce-product-template li.product img {
	border-radius: 4px;
}

/* "Jetzt bestellen"-Button als Umriss (Design-Stil). */
.wp-block-woocommerce-product-button.is-style-outline a.button,
.wp-block-woocommerce-product-button.is-style-outline button {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 2px;
	font-weight: 700;
	width: 100%;
	padding: 12px;
}
.wp-block-woocommerce-product-button.is-style-outline a.button:hover,
.wp-block-woocommerce-product-button.is-style-outline button:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* Sale-Badge im Terrakotta-Look wie im Entwurf. */
.wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 2px;
	font-weight: 700;
	text-transform: none;
}

/* Aktiver Filter-/Kategorie-Link im Shop-Sidebar. */
.wp-block-mv-filter-active a {
	color: var(--wp--preset--color--primary);
	font-weight: 800;
}

/* ---------------------------------------------------------------------------
 * Startseite
 * ------------------------------------------------------------------------- */

/* Aktuelle Angebote: breiterer Bereich, groessere Produktkarten (4er-Raster). */
.mv-sale-grid .wc-block-product-template,
.mv-sale-grid .wc-block-product-template__responsive {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}
.mv-sale-grid li.wc-block-product {
	padding: 20px;
	width: auto !important;
	max-width: none !important;
}
.mv-sale-grid .wc-block-components-product-image img,
.mv-sale-grid li.wc-block-product img {
	border-radius: 6px;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.mv-sale-grid .wp-block-post-title,
.mv-sale-grid .wc-block-components-product-price {
	font-size: 1.0625rem;
}
@media (max-width: 1100px) {
	.mv-sale-grid .wc-block-product-template,
	.mv-sale-grid .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.mv-sale-grid .wc-block-product-template,
	.mv-sale-grid .wc-block-product-template__responsive {
		grid-template-columns: 1fr;
	}
}

/* Produktsortiment: grosse, runde Bilder – responsiv. */
.mv-sortiment-cols {
	flex-wrap: wrap;
}
.mv-sortiment-cols > .wp-block-column {
	flex: 1 1 260px;
}
.mv-sortiment-cols .wp-block-image img {
	width: min(256px, 62vw);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Kundenstimmen als Endlos-Laufband (von rechts nach links). */
.mv-testimonials-viewport {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.mv-testimonial-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: max-content;
	animation: mv-marquee 70s linear infinite;
}
.mv-testimonials:hover .mv-testimonial-track,
.mv-testimonial-track:focus-within {
	animation-play-state: paused;
}
.mv-testimonial-card {
	flex: 0 0 clamp(280px, 30vw, 360px);
	box-sizing: border-box;
	margin-right: 2rem;
	align-self: stretch;
}
@keyframes mv-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.mv-testimonial-track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		gap: 2rem;
	}
	.mv-testimonial-card {
		flex-basis: clamp(260px, 30%, 400px);
		flex-grow: 1;
		margin-right: 0;
	}
	/* Bei reduzierter Bewegung reicht ein Satz Karten. */
	.mv-testimonial-card:nth-child(n + 7) { display: none; }
}

/* ---------------------------------------------------------------------------
 * Einzelprodukt – alternative Ansicht (templates/single-product-alt.html)
 * ------------------------------------------------------------------------- */

/* Produktbild: quadratische weisse Karte. */
.mv-pdp-image-card .wc-block-components-product-image-gallery,
.mv-pdp-image-card .woocommerce-product-gallery {
	max-width: 100%;
}
.mv-pdp-image-card .wc-block-components-product-image-gallery__image img,
.mv-pdp-image-card .woocommerce-product-gallery__image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 4px;
}
.mv-pdp-image-card .wc-block-components-product-image-gallery__thumbnail,
.mv-pdp-image-card .flex-control-thumbs {
	margin-top: var(--wp--preset--spacing--20);
}

/* Artikelnummer + "Merken" Kopfzeile. */
.mv-pdp-alt .wc-block-components-product-sku__value,
.mv-pdp-alt .wc-block-components-product-sku {
	color: var(--wp--preset--color--muted);
}
.mv-pdp-wish {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	cursor: default;
}

/* "Summe"-Kaertchen mit Preis und Bestell-Button. */
.mv-pdp-summary .wc-block-components-product-price,
.mv-pdp-summary .woocommerce-Price-amount {
	color: var(--wp--preset--color--primary);
}
/* Preis-Zeile wie die Größe-Zeile (Variations-Tabelle) aufgebaut: Label fix
   links, Wert-Spalte nimmt den Rest ein und darf schrumpfen/umbrechen statt
   bei schmaler Karte ueber den rechten Rand hinauszuragen. */
.mv-pdp-summary .mv-price-row {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start !important;
	gap: 14px;
}
.mv-pdp-summary .mv-price-row > p {
	flex: 0 0 auto;
	margin: 0;
}
.mv-pdp-summary .mv-price-row > .wp-block-woocommerce-product-price {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	overflow-wrap: break-word;
}
/* Tabelle wird zur Flex-Zeile "umfunktioniert" statt auf table-vertical-align
   zu vertrauen – das zentrierte "Größe" nur ungefaehr (abhaengig von
   Zeilenhoehen-Metriken), nie exakt auf Hoehe der Select-Box. */
.mv-pdp-add-to-cart .variations,
.mv-pdp-add-to-cart .variations tbody,
.mv-pdp-add-to-cart .variations tr {
	display: block;
	width: 100%;
}
.mv-pdp-add-to-cart .variations tr {
	display: flex;
	align-items: center;
	gap: 14px;
	/* Reicht Platz fuer das absolut positionierte "Zurücksetzen" darunter
	   (siehe td.value/a.reset_variations weiter unten) – sonst ueberlappt der
	   Link den Einzelpreis, der nach Variantenwahl direkt danach erscheint. */
	margin-bottom: 44px;
}
.mv-pdp-add-to-cart .variations th.label {
	display: block;
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
	text-align: left;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0;
	margin: 0;
}
/* "Zurücksetzen" NICHT per flex-direction:column unter die Select-Box
   stapeln: das macht die td hoeher, sobald der Link erscheint, wodurch
   align-items:center auf der <tr> "Größe" gegen die groessere Gesamthoehe
   statt gegen die Select-Box zentriert (Label sitzt dann sichtbar tiefer,
   sobald eine Variante gewaehlt ist). Stattdessen td.value als normalen
   Block behandeln (Hoehe = nur die Select-Box) und den Link absolut darunter
   plazieren, damit die Zeilenhoehe immer gleich bleibt. */
.mv-pdp-add-to-cart .variations td.value {
	display: block;
	position: relative;
	flex: 1 1 auto;
	padding: 0;
}
.mv-pdp-add-to-cart .variations a.reset_variations {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 6px;
	white-space: nowrap;
}
/* WooCommerce's ".woocommerce div.product form.cart .variations select" hat
   tatsaechlich 4 Klassen (.woocommerce, .product, .cart, .variations) gegen
   unsere 3 – ein reiner Spezifitaets-Wettlauf verliert hier IMMER wieder
   einzelne Eigenschaften (margin-right, background-size), egal wie die
   eigene Selector-Kette erweitert wird. Deshalb bewusst !important, genau
   wie bei den Tabs: wir ersetzen WCs eigene Select-Optik komplett. Zeile wie
   die Preiszeile zweispaltig: Label links, Wert-Spalte nimmt den Rest ein
   (rechte Kante wie beim Preisbetrag darueber) – die Select-Box selbst
   bleibt aber kompakt und haengt sich rechtsbuendig in diese Spalte. */
.mv-pdp-alt .mv-pdp-add-to-cart .variations select {
	display: block !important;
	width: 160px !important;
	min-width: 0 !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	border: 1px solid #ddd !important;
	border-radius: 4px !important;
	padding: 10px 36px 10px 14px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center !important;
	background-size: 14px !important;
	font-family: var(--wp--preset--font-family--body);
}
.mv-pdp-add-to-cart .quantity {
	display: inline-flex;
	align-items: stretch;
	width: fit-content;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	box-sizing: border-box;
}
.mv-pdp-add-to-cart .quantity .qty {
	height: 48px;
	border: none;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-radius: 0;
	margin: 0;
	width: 54px;
	box-sizing: border-box;
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	-moz-appearance: textfield;
}
.mv-pdp-add-to-cart .quantity .qty::-webkit-inner-spin-button,
.mv-pdp-add-to-cart .quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* +/- Schrittweite (per JS vor/nach dem Mengenfeld eingefuegt). */
.mv-pdp-add-to-cart .mv-qty-btn {
	flex: 0 0 auto;
	width: 44px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	margin: 0;
	box-sizing: border-box;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 1.25rem;
	line-height: 1;
	font-family: var(--wp--preset--font-family--body);
	cursor: pointer;
}
.mv-pdp-add-to-cart .mv-qty-btn:hover {
	background: var(--wp--preset--color--cream-light);
}
.mv-pdp-add-to-cart .single_add_to_cart_button,
.mv-pdp-add-to-cart button.single_add_to_cart_button {
	background: var(--wp--preset--color--primary);
	color: #fff;
	border: 0;
	border-radius: 2px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 14px 24px;
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
	cursor: pointer;
}
.mv-pdp-add-to-cart .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--primary-hover);
}
/* Der Einzelpreis, den WC nach Variantenwahl ueber dem Mengenfeld einblendet
   (".woocommerce-variation .woocommerce-variation-price"), ist standardmaessig
   linksbuendig – rechtsbuendig stellen, damit er in der gleichen Flucht wie
   Preis-Range/Select/Button steht. */
.mv-pdp-add-to-cart .woocommerce-variation-price {
	text-align: right;
	margin-bottom: var(--wp--preset--spacing--20);
}
/* Menge + Button stehen NICHT direkt in form.cart, sondern in
   form.cart > div.single_variation_wrap > div.woocommerce-variation-add-to-cart
   (".variations_button") – frueher wurde faelschlich form.cart selbst zum
   Flex-Container gemacht, was wirkungslos blieb, da Button/Menge keine
   direkten Kinder davon sind. Dieser Container bekommt jetzt das Flex-Layout:
   Button waechst (flex-grow) bis zur rechten Kante, und wenn der verfuegbare
   Platz nicht reicht, rutscht er dank flex-wrap vollbreit in die naechste
   Zeile unter die Mengen-Box statt das Layout zu sprengen. */
/* Das WC-Block "add-to-cart-form" liefert sein eigenes, inline in <head>
   eingebundenes CSS mit "display:grid" fuer form.cart/.variations_button
   (grid-template-columns:min-content auto auto + grid-auto-flow:column) –
   erzeugt bei unserer Struktur eine leere ~64px-Spalte rechts in jeder Zeile
   (von Nutzer in DevTools entdeckt, siehe Screenshot mit den rot
   durchgestrichenen Bereichen). Gleiche Spezifitaet wie unsere Regel, daher
   !important statt auf Ladereihenfolge zu vertrauen. Wir brauchen WCs Grid
   nicht, da Tabelle/Mengenfeld/Button bereits eigenes Flex-Layout haben. */
.mv-pdp-add-to-cart form.cart {
	display: block !important;
}
.mv-pdp-add-to-cart .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}
.mv-pdp-add-to-cart .woocommerce-variation-add-to-cart .quantity {
	flex: 0 0 auto;
}
.mv-pdp-add-to-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1 1 160px;
	width: auto;
	margin-top: 0;
}
/* Einfache Produkte (ohne Varianten) haben KEIN .woocommerce-variation-
   add-to-cart drumherum – .quantity und .single_add_to_cart_button liegen
   dort direkt als Kinder in form.cart (bestaetigt per curl), landen also
   nicht in der obigen Regel und blieben beim form.cart{display:block}
   untereinander statt nebeneinander stehen. ":has()" unterscheidet die
   beiden Faelle, ohne die variablen-Produkte-Regel oben anzufassen. */
.mv-pdp-add-to-cart form.cart:has(> .single_add_to_cart_button) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--wp--preset--spacing--20);
}
.mv-pdp-add-to-cart form.cart:has(> .single_add_to_cart_button) > .quantity {
	flex: 0 0 auto;
}
.mv-pdp-add-to-cart form.cart:has(> .single_add_to_cart_button) > .single_add_to_cart_button {
	flex: 1 1 160px;
	width: auto;
	margin-top: 0;
}

/* Produktdetails als Tabs – Karteikarten-Look wie im Original: eckige,
   umrandete Reiter, der aktive verschmilzt nahtlos mit der Inhaltsbox.
   WooCommerce's eigenes (nicht-minimales) Tab-CSS ist sehr spezifisch
   (".woocommerce div.product .woocommerce-tabs ul.tabs li" etc., inkl.
   dekorativer ::before/::after-Eckausschnitte) – die !important-Overrides
   hier sind noetig, weil ein reiner Spezifitaets-Wettlauf gegen diese
   Default-Regeln sonst immer wieder einzelne Eigenschaften durchrutschen
   laesst (siehe mascotavital-theme Gotcha-Notizen). */
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none !important;
	margin: 0 0 -1px !important;
	padding: 0 !important;
	overflow: visible !important;
}
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs::before {
	content: none !important;
}
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs li {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	display: block !important;
	z-index: 2;
}
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs li::before,
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs li::after {
	content: none !important;
}
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
	display: block !important;
	padding: 14px 22px !important;
	border: 1px solid #ddd !important;
	border-radius: 10px 10px 0 0 !important;
	background: var(--wp--preset--color--cream-light) !important;
	color: var(--wp--preset--color--muted) !important;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	text-shadow: none !important;
}
.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs li.active a {
	background: var(--wp--preset--color--base) !important;
	border-color: #ddd !important;
	border-bottom-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.mv-pdp-alt .wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid #ddd !important;
	border-radius: 0 16px 16px 16px !important;
	padding: var(--wp--preset--spacing--50) !important;
	margin: 0 !important;
}
/* Mobil sind die Reiter-Texte (v.a. "Zusätzliche Informationen") zu breit
   fuer eine Zeile und brechen in mehrere Zeilen um, mit viel Leerraum durch
   das grosszuegige Desktop-Padding. Etwas kompakter machen, wie vom Nutzer
   vorgeschlagen – verhindert zwar nicht in jedem Fall den Umbruch, macht ihn
   aber deutlich weniger ausladend. */
@media (max-width: 600px) {
	.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs {
		gap: 6px !important;
	}
	.mv-pdp-alt .wp-block-woocommerce-product-details ul.tabs.wc-tabs li a {
		padding: 10px 14px !important;
		font-size: 0.6875rem !important;
		letter-spacing: 0.01em !important;
	}
	.mv-pdp-alt .wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
		padding: var(--wp--preset--spacing--40) !important;
	}
}
/* WooCommerce wiederholt den Tab-Titel als <h2> im Panel-Inhalt
   (z.B. "Beschreibung" nochmal ueber dem Text) – die Reiter selbst
   zeigen den Titel schon, daher ausblenden. */
.mv-pdp-alt .wp-block-woocommerce-product-details .woocommerce-Tabs-panel > h2,
.mv-pdp-alt .wp-block-woocommerce-product-details .woocommerce-Tabs-panel .woocommerce-Reviews-title {
	display: none;
}

/* "Ähnliche Produkte": zentrierte Ueberschrift, Karten wie im Shop. */
.mv-pdp-related h2 {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.mv-related-grid .wc-block-product-template,
.mv-related-grid .wc-block-product-template__responsive {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
}
.mv-related-grid li.wc-block-product {
	background: #fff;
	border-radius: 4px;
	padding: 18px;
	width: auto !important;
	max-width: none !important;
}
@media (max-width: 900px) {
	.mv-related-grid .wc-block-product-template,
	.mv-related-grid .wc-block-product-template__responsive {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 480px) {
	.mv-related-grid .wc-block-product-template,
	.mv-related-grid .wc-block-product-template__responsive {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
 * Hero: zwei Produkte rechts (templates/front-page.html, patterns/hero.php)
 * ------------------------------------------------------------------------- */

.mv-hero-row {
	width: 100%;
}
.mv-hero-text {
	flex: 1 1 420px;
}
.mv-hero-products-col {
	flex: 1 1 300px;
	max-width: 420px;
	width: 100%;
}
.mv-hero-products .wc-block-product-template,
.mv-hero-products .wc-block-product-template__responsive {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--20);
}
.mv-hero-products li.wc-block-product {
	background: rgba(255, 255, 255, 0.94);
	border-radius: 6px;
	padding: 14px;
}
.mv-hero-products li.wc-block-product img {
	border-radius: 4px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.mv-hero-products .wp-block-post-title {
	font-size: 0.8125rem;
}
.mv-hero-products .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
}
.mv-hero-products .wc-block-components-product-price {
	color: var(--wp--preset--color--primary);
	font-size: 0.875rem;
}
/* Unter ~400px rechte Spalte volle Breite, Karten untereinander statt nebeneinander. */
@media (max-width: 400px) {
	.mv-hero-products-col {
		max-width: none;
	}
	.mv-hero-products .wc-block-product-template,
	.mv-hero-products .wc-block-product-template__responsive {
		grid-template-columns: 1fr;
		max-width: 280px;
	}
}