/*
Theme Name:   Früchtegarten Shop
Theme URI:    https://fruechtegarten.de/shop/
Description:  Child-Theme von Twenty Twenty-Five in den Hausfarben des
              Früchtegartens am Edersee. Farben, Schriften und Formen
              stammen aus dem Gestaltungssystem von fruechtegarten.de.
Author:       Früchtegarten am Edersee
Template:     twentytwentyfive
Version:      3.3
Text Domain:  fruechtegarten-shop
*/

/* ===================================================================
   Farben und Formen als Variablen

   Dieselben Werte wie auf der Hauptseite. Sie stehen hier zusätzlich
   zu theme.json, weil WooCommerce eigene Bausteine mitbringt, die
   nicht über theme.json gestaltet werden können.
   =================================================================== */

:root {
	--fg-berry:      #6E1B32;
	--fg-berry-dark: #571526;
	--fg-ink:        #2B1D24;
	--fg-paper:      #F5EEE3;
	--fg-sand:       #E7DCC9;
	--fg-white:      #FFFFFF;
	--fg-pill:       100px;
}

/* ===================================================================
   Seitenhintergrund

   WordPress schreibt seine globalen Stile als :root :where(body) in
   den Seitenkopf. Ein einfaches body reicht deshalb nicht aus – die
   Regel muss um eine Stufe spezifischer sein. Daher :root body.
   =================================================================== */

:root body,
:root .wp-site-blocks,
:root .wp-site-blocks > main {
	background-color: var(--fg-paper);
}

/* Kopf- und Fußbereich sitzen auf demselben Ton */
:root .wp-block-template-part {
	background-color: transparent;
}

/* ===================================================================
   WooCommerce-Schaltflächen

   WooCommerce liefert klassische Schaltflächen, keine Blöcke. Die
   Pillenform und die Hausfarbe müssen deshalb hier gesetzt werden.
   =================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.wc-block-components-button {
	background-color: var(--fg-berry);
	color:            var(--fg-paper);
	border:           none;
	border-radius:    var(--fg-pill);
	padding:          0.75em 1.75em;
	font-weight:      600;
	letter-spacing:   0.01em;
	transition:       background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.wc-block-components-button:hover {
	background-color: var(--fg-berry-dark);
	color:            var(--fg-paper);
}

/* Sichtbarer Tastaturfokus – wichtig für Bedienbarkeit ohne Maus */
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.wc-block-components-button:focus-visible {
	outline:        2px solid var(--fg-ink);
	outline-offset: 2px;
}

/* ===================================================================
   Hinweise, Meldungen und Formularfelder
   =================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--fg-berry);
	background-color: var(--fg-white);
	border-radius:    8px;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--fg-berry);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border:        1px solid var(--fg-sand);
	border-radius: 8px;
	padding:       0.6em 0.8em;
	background:    var(--fg-white);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--fg-berry);
	outline:      none;
}

/* ===================================================================
   Preise und Grundpreis

   Der Grundpreis je Liter oder Kilogramm ist bei Lebensmitteln
   Pflicht. Er soll lesbar bleiben, aber dem Verkaufspreis nicht
   die Aufmerksamkeit nehmen.
   =================================================================== */

.woocommerce .price,
.woocommerce ul.products li.product .price {
	color:       var(--fg-berry);
	font-weight: 600;
}

.wc-gzd-additional-info,
.woocommerce .wc-gzd-additional-info {
	font-size: 0.85em;
	opacity:   0.8;
	margin:    0.3em 0 0;
}

/* Dieselbe Zurückhaltung für die Blockfassung auf der Produktseite.
   Germanized liefert Grundpreis, Füllmenge, Steuer- und Versandhinweis
   sowie die Lieferzeit als eigene Blöcke mit eigenen Klassen – die
   Regel oben greift dort nicht. */

.wp-block-woocommerce-gzd-product-unit-price,
.wp-block-woocommerce-gzd-product-unit-product,
.wp-block-woocommerce-gzd-product-tax-info,
.wp-block-woocommerce-gzd-product-shipping-costs-info,
.wp-block-woocommerce-gzd-product-delivery-time {
	line-height: 1.5;
	opacity:     0.8;
}

/* Der Grundpreis ist die zentrale Pflichtangabe nach PAngV und darf
   eine Spur kräftiger stehen als die übrigen Hinweise. */

.wp-block-woocommerce-gzd-product-unit-price {
	opacity: 0.95;
}

/* Germanized markiert Blöcke ohne Inhalt selbst. Ohne diese Regel
   entstehen bei Produkten ohne Füllmenge oder Pfand leere Lücken. */

.wp-block-woocommerce-gzd-product-is-empty {
	display: none !important;
}

/* ===================================================================
   Produktseite: Pflichtangaben

   Reihenfolge auf der Seite: Preis, Grundpreis, Füllmenge, Steuer-
   und Versandhinweis, Lieferzeit. Aufgebaut in single-product.html.
   =================================================================== */

/* Steuer- und Versandhinweis stehen nebeneinander in einer Zeile,
   so wie es im Handel üblich ist: "inkl. MwSt. zzgl. Versandkosten" */

.fg-legal-info {
	align-items: baseline;
}

.fg-legal-info > * {
	margin: 0;
}

/* Der Link zur Versandseite in der Hausfarbe */

.wp-block-woocommerce-gzd-product-shipping-costs-info a {
	color:                 var(--fg-berry);
	text-underline-offset: 0.15em;
}

/* Ein kleiner Punkt vor der Lieferzeit, damit sie sich von den
   übrigen Hinweisen abhebt. Er sitzt auf dem inneren Element,
   sonst würde er in einer eigenen Zeile landen. */

.wc-gzd-block-components-product-delivery-time::before {
	content:        "";
	display:        inline-block;
	width:          0.5em;
	height:         0.5em;
	margin-right:   0.5em;
	border-radius:  50%;
	background:     var(--fg-berry);
	vertical-align: 0.1em;
}

/* Zutaten und Nährwerte stehen in der Beschreibung unterhalb der
   Produktangaben. Die Tabellen sollen dort ebenso lesbar sein wie
   in den Rechtstexten. */

.wp-block-woocommerce-product-details table {
	border-collapse: collapse;
	margin:          1.2em 0;
}

.wp-block-woocommerce-product-details th,
.wp-block-woocommerce-product-details td {
	border:     1px solid var(--fg-sand);
	padding:    0.5em 0.9em;
	text-align: left;
}

.wp-block-woocommerce-product-details th {
	background:  var(--fg-white);
	font-weight: 600;
}

/* Artikelnummer und Kategorie stehen nebeneinander. Beide Blöcke
   bringen unterschiedliche Innenabstände mit, dadurch saßen sie
   nicht auf einer Linie. Gemeinsame Grundlinie, keine Abstände. */

.wp-block-woocommerce-product-meta .wp-block-group {
	align-items: baseline;
}

.wp-block-woocommerce-product-meta .wp-block-woocommerce-product-sku,
.wp-block-woocommerce-product-meta .wp-block-post-terms {
	margin: 0;
}


/* ===================================================================
   Produktkacheln auf gleiche Höhe bringen

   Bei "Ähnliche Produkte" und auf den Kategorieseiten sind die
   Produktnamen unterschiedlich lang – ein- oder zweizeilig. Ohne
   Streckung rutschen Preis und Schaltfläche entsprechend mit.
   Jede Kachel wird deshalb zur Spalte, Preis und Schaltfläche
   werden an den unteren Rand geschoben.
   =================================================================== */

/* WooCommerce lädt seine eigenen Blockstile nach dieser Datei. Ohne
   das vorangestellte :root gewinnen sie. Dasselbe Vorgehen wie beim
   Seitenhintergrund und im Kopfbereich weiter oben. */

:root .wc-block-product-template {
	align-items: stretch;
}

:root .wc-block-product-template > li.wc-block-product {
	display:        flex;
	flex-direction: column;
	align-self:     stretch;
}

/* Alle Produktbilder auf dasselbe Quadrat. Die Aufnahmen haben sehr
   unterschiedliche Maße – ohne feste Form beginnt schon der Titel
   auf jeder Kachel woanders. */

:root .wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit:   contain;
	width:        100%;
	height:       auto;
	background:   var(--fg-white);
}

/* Preis und Schaltfläche an den unteren Rand. Ob der Produktname
   ein- oder zweizeilig ist, spielt damit keine Rolle mehr. */

:root .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-price {
	margin-top: auto;
}

:root .wc-block-product-template > li.wc-block-product .wp-block-woocommerce-product-button {
	margin-top:    0.5rem;
	margin-bottom: 0;
}


/* ===================================================================
   Reiter unterhalb der Produktangaben

   Beschreibung, Zusätzliche Informationen und Rezensionen werden
   zunächst alle ausgeliefert und erst von JavaScript ein- und
   ausgeblendet. Bis das greift, blitzen sie kurz gemeinsam auf.
   Alle bis auf den ersten werden deshalb schon vorher versteckt.
   JavaScript setzt später eigene Angaben direkt am Element und
   überstimmt diese Regel – bleibt es aus, ist immerhin die
   Beschreibung sichtbar.
   =================================================================== */

:root .wp-block-woocommerce-product-details .wc-tab ~ .wc-tab {
	display: none;
}


/* ===================================================================
   Abstand vor "Ähnliche Produkte"

   Der Abschnitt schließt sonst unmittelbar an die Reiter an und
   wirkt wie ein Teil davon. Etwas Luft macht deutlich, dass hier
   ein neuer Bereich beginnt. Der Selektor greift nur auf der
   Produktseite, weil das Raster dort direkt auf die Reiter folgt.
   =================================================================== */

:root .wp-block-woocommerce-product-details + .wp-block-woocommerce-product-collection {
	margin-top:    4rem;
	margin-bottom: 3rem;
}

/* Auch zwischen Überschrift und Kacheln etwas mehr Raum */

:root .wp-block-woocommerce-product-details + .wp-block-woocommerce-product-collection > .wp-block-heading {
	margin-bottom: 1.5rem;
}

@media (max-width: 781px) {
	:root .wp-block-woocommerce-product-details + .wp-block-woocommerce-product-collection {
		margin-top: 2.5rem;
	}
}

/* ===================================================================
   Germanized: Pflicht-Checkboxen im Bestellvorgang

   Diese müssen gut lesbar sein – sie sind Teil der rechtlich
   erforderlichen Information vor der Bestellung.
   =================================================================== */

.woocommerce-checkout .wc-gzd-checkbox-placeholder,
.woocommerce-checkout .legal-checkbox {
	background:    var(--fg-white);
	border:        1px solid var(--fg-sand);
	border-radius: 8px;
	padding:       1em;
	margin-bottom: 1em;
}

/* ===================================================================
   Rechtstexte lesbarer machen

   Impressum, AGB, Widerrufsbelehrung und Datenschutz bestehen aus
   viel Fließtext. Etwas mehr Luft zwischen den Abschnitten macht
   sie deutlich zugänglicher.
   =================================================================== */

.page .entry-content h2 {
	margin-top:    2.2em;
	margin-bottom: 0.6em;
}

.page .entry-content h3 {
	margin-top:    1.6em;
	margin-bottom: 0.4em;
}

.page .entry-content p {
	margin-bottom: 1em;
	max-width:     68ch;
}

.page .entry-content table {
	border-collapse: collapse;
	margin:          1.5em 0;
}

.page .entry-content th,
.page .entry-content td {
	border:     1px solid var(--fg-sand);
	padding:    0.6em 1em;
	text-align: left;
}

.page .entry-content th {
	background: var(--fg-white);
}


/* ===================================================================
   Kategoriekacheln auf der Shop-Startseite

   Sechs feste Kacheln, von Hand aufgebaut in archive-product.html.
   =================================================================== */

:root .fg-kat-raster {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1.75rem;
}

:root .fg-kat-kachel {
	background:    var(--fg-white);
	border-radius: 12px;
	overflow:      hidden;
	box-shadow:    0 1px 3px rgba(43, 29, 36, 0.06);
	transition:    transform 0.2s ease, box-shadow 0.2s ease;
	display:       flex;
	flex-direction: column;
}

:root .fg-kat-kachel:hover {
	transform:  translateY(-3px);
	box-shadow: 0 6px 18px rgba(43, 29, 36, 0.12);
}

:root .fg-kat-kachel .wp-block-image {
	margin: 0;
}

:root .fg-kat-kachel .wp-block-image img {
	display:      block;
	width:        100%;
	aspect-ratio: 3 / 2;
	object-fit:   cover;
}

:root .fg-kat-kachel .fg-kat-name {
	margin:  1.1rem 1.2rem 0.35rem;
}

.fg-kat-kachel .fg-kat-name a {
	color:           var(--fg-berry);
	text-decoration: none;
}

.fg-kat-kachel .fg-kat-name a:hover {
	text-decoration: underline;
}

:root .fg-kat-kachel .fg-kat-text {
	margin:    0 1.2rem 0.9rem;
	color:     #685C5D;
	flex:      1 1 auto;
}

:root .fg-kat-kachel .fg-kat-mehr {
	margin: 0 1.2rem 1.2rem;
}

.fg-kat-kachel .fg-kat-mehr a {
	color:           var(--fg-berry);
	text-decoration: none;
	font-weight:     600;
}

.fg-kat-kachel .fg-kat-mehr a:hover {
	text-decoration: underline;
}


/* ===================================================================
   Produktkacheln auf den Kategorieseiten
   =================================================================== */

.wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit:   contain;
	background:   var(--fg-white);
}

/* Preis und Schaltfläche mittig unter dem Titel */
.wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-button {
	margin-top: 0.5rem;
}

.wp-block-woocommerce-product-button .wp-block-button__link,
.wp-block-woocommerce-product-button .add_to_cart_button {
	width:      100%;
	text-align: center;
}

/* Germanized-Zusatzangaben (MwSt., Versand, Lieferzeit, Grundpreis) */
.wc-gzd-additional-info {
	text-align: center;
	line-height: 1.5;
}


/* ===================================================================
   Sortierung und Trefferanzahl
   =================================================================== */

.wp-block-woocommerce-catalog-sorting select {
	border:        1px solid var(--fg-sand);
	border-radius: var(--fg-pill);
	padding:       0.45em 2.2em 0.45em 1em;
	background:    var(--fg-white);
	color:         var(--fg-ink);
}

.wp-block-woocommerce-product-results-count {
	color: #6E5D5A;
}


/* ===================================================================
   Brotkrümel-Navigation
   =================================================================== */

.wc-block-breadcrumbs {
	color: #6E5D5A;
}

.wc-block-breadcrumbs a {
	color: var(--fg-berry);
}


/* ===================================================================
   Kopfbereich: Logo und Schriftzug
   =================================================================== */

.fg-wordmark,
.fg-wordmark-sub {
	margin: 0;
}

/* Auf der Hauptseite steht die Wortmarke in der Textfarbe, nicht in
   Beerenrot: .brand-title { color: var(--ink) }. Dieselbe Farbe hier,
   damit der Kopfbereich in beiden Fällen gleich aussieht. */

.fg-wordmark a {
	color:           var(--fg-ink);
	text-decoration: none;
	font-size:       1rem;
	letter-spacing:  0.01em;
	white-space:     nowrap;
}

.fg-wordmark a:hover {
	text-decoration: underline;
}

.fg-wordmark-sub {
	color:          #6E5D5A;
	font-size:      0.72rem;
	font-weight:    500;
	letter-spacing: 0.02em;
	white-space:    nowrap;
}

/* Das Logo wird auf der Hauptseite über die Höhe bemessen, nicht über
   die Breite: .logo-img { height: 52px; width: auto }. Dieselbe Angabe
   hier, damit beide Seiten dasselbe Logo in derselben Größe zeigen.
   Die Bilddatei ist höher als breit – eine Breitenangabe ergäbe
   zwangsläufig eine andere Größe. */

:root .fg-logo img {
	height: 52px;
	width:  auto;
}

:root .fg-footer-logo img {
	height: 44px;
	width:  auto;
}

.fg-shop-nav a {
	text-decoration: none;
	color:           var(--fg-ink);
}

/* Die Farbe braucht :root und muss zusätzlich die Beschriftung im
   Inneren ansprechen. WordPress setzt für Navigationspunkte eine
   eigene Regel auf das Element .wp-block-navigation-item__content,
   die nach dieser Datei geladen wird und bei gleicher Spezifität
   gewinnt. Die Unterstreichung kam durch, die Farbe nicht. */

:root .fg-shop-nav a:hover,
:root .fg-shop-nav a:focus-visible,
:root .fg-shop-nav .current-menu-item a,
:root .fg-shop-nav .wp-block-navigation-item__content:hover,
:root .fg-shop-nav .wp-block-navigation-item__content:focus-visible,
:root .fg-shop-nav .wp-block-navigation-item__content:hover
	.wp-block-navigation-item__label,
:root .fg-shop-nav .wp-block-navigation-item__content:focus-visible
	.wp-block-navigation-item__label {
	color:           var(--fg-berry);
	text-decoration: underline;
}

/* Auch das Pfeilsymbol neben "Shop" mitfärben */

:root .fg-shop-nav .wp-block-navigation-item:hover
	.wp-block-navigation__submenu-icon {
	color: var(--fg-berry);
}

/* Der Punkt "Shop" bleibt dauerhaft hervorgehoben – im Shop befindet
   man sich immer in diesem Bereich. WordPress erkennt das bei frei
   eingetragenen Adressen nicht selbst, deshalb von Hand gesetzt. */

:root .fg-shop-nav .fg-nav-current > a,
:root .fg-shop-nav .fg-nav-current > a .wp-block-navigation-item__label {
	color:       var(--fg-berry);
	font-weight: 600;
}

/* Aufklappmenü mit den Kategorien */

:root .fg-shop-nav .wp-block-navigation__submenu-container {
	background:    var(--fg-white);
	border:        1px solid var(--fg-sand);
	border-radius: 8px;
	padding:       0.4rem 0;
	min-width:     14rem;
	box-shadow:    0 6px 20px rgba(43, 29, 36, 0.12);
}

:root .fg-shop-nav .wp-block-navigation__submenu-container
	.wp-block-navigation-item__content {
	padding: 0.45rem 1rem;
}

:root .fg-shop-nav .wp-block-navigation__submenu-container
	.wp-block-navigation-item:hover {
	background: color-mix(in srgb, var(--fg-berry) 7%, transparent);
}

/* Im Aufklappmenü keine Unterstreichung – die Zeile hebt sich schon
   durch die Hinterlegung ab. */

:root .fg-shop-nav .wp-block-navigation__submenu-container a:hover {
	text-decoration: none;
}

/* Im mobilen Überlagerungsmenü klappt WordPress die Untermenüs
   ohnehin aus. Der weiße Kasten mit Rahmen und Schatten sieht dort
   aus wie ein aufgesetztes Fenster – deshalb alles zurücknehmen und
   die Kategorien als eingerückte Liste zeigen. */

:root .fg-shop-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	background:    transparent;
	border:        none;
	border-radius: 0;
	box-shadow:    none;
	min-width:     0;
	padding:       0;
}

:root .fg-shop-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-left: 1.25rem;
}

:root .fg-shop-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
	background: transparent;
}


/* ===================================================================
   Handy und Tablet
   =================================================================== */

@media (max-width: 900px) {
	:root .fg-kat-raster {
		grid-template-columns: repeat(2, 1fr);
		gap:                   1.25rem;
	}
}

@media (max-width: 600px) {
	:root .fg-kat-raster {
		grid-template-columns: 1fr;
	}

	.fg-wordmark a {
		font-size: 0.92rem;
	}
}


/* ===================================================================
   Mobiles Menü (Overlay)

   Das Overlay erbt sonst die Ausrichtung der Desktop-Navigation und
   schiebt die Einträge über den rechten Bildschirmrand hinaus.
   =================================================================== */

:root .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--fg-paper);
	padding:          5rem 1.5rem 2rem;
}

:root .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	width:           100%;
	align-items:     flex-start;
	justify-content: flex-start;
}

:root .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	width:           100%;
	align-items:     flex-start;
	justify-content: flex-start;
	gap:             0.25rem;
}

:root .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item {
	width: 100%;
}

:root .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	display:       block;
	width:         100%;
	padding:       0.85rem 0;
	font-size:     1.15rem;
	color:         var(--fg-ink);
	border-bottom: 1px solid var(--fg-sand);
}

/* Schließen-Schaltfläche gut erreichbar */
:root .wp-block-navigation__responsive-container-close {
	color:   var(--fg-berry);
	padding: 0.5rem;
}


/* ===================================================================
   Kopfbereich auf schmalen Bildschirmen

   Logo, Schriftzug, Menü-Schaltfläche, Konto und Warenkorb müssen
   nebeneinander passen, ohne den Bereich zu sprengen.
   =================================================================== */

@media (max-width: 782px) {
	/* Die Hauptseite blendet die Unterzeile auf dem Handy nicht aus,
	   sondern verkleinert sie: .brand-sub { font-size: .66rem }. */

	:root .fg-wordmark-sub {
		font-size: 0.66rem;
	}

	:root .fg-wordmark a {
		font-size:   1rem;
		line-height: 1.25;
	}

	:root .wp-block-navigation__responsive-container-open {
		padding: 0.4rem;
	}
}

@media (max-width: 420px) {
	:root .fg-wordmark a {
		font-size: 0.9rem;
	}
}


/* ===================================================================
   Kopfbereich auf dem Handy kompakt halten

   Logo, Schriftzug, Menü-Schaltfläche und Warenkorb sollen in einer
   Zeile bleiben, statt umzubrechen.
   =================================================================== */

@media (max-width: 782px) {
	:root header .wp-block-group.alignwide {
		flex-wrap: nowrap;
		gap:       0.5rem;
	}

	:root .fg-logo img {
		height: 38px;
		width:  auto;
	}

	:root .fg-logo {
		flex-shrink: 0;
	}

	:root .fg-wordmark a {
		font-size:   0.95rem;
		line-height: 1.2;
	}
}

@media (max-width: 400px) {
	:root .fg-wordmark a {
		font-size: 0.85rem;
	}

	:root .fg-logo img {
		height: 32px;
		width:  auto;
	}
}


/* ===================================================================
   Kacheln auf gleiche Höhe bringen

   Die Beschreibungen sind unterschiedlich lang. Ohne Streckung
   enden die Kacheln auf verschiedenen Höhen.
   =================================================================== */

:root .fg-kat-raster {
	align-items: stretch;
}

:root .fg-kat-raster > .fg-kat-kachel {
	height:     100%;
	margin-top: 0;
	margin-bottom: 0;
}

:root .fg-kat-kachel .wp-block-image img {
	height:       auto;
	aspect-ratio: 3 / 2;
	object-fit:   cover;
}


/* ===================================================================
   Navigationszeile mittig ausrichten

   Bricht die Zeile um, saß das Menü bisher linksbündig am Rand.
   Zentriert wirkt es ausgewogener.
   =================================================================== */

:root header .wp-block-group.alignwide > .wp-block-group:last-child {
	flex:            1 1 auto;
	justify-content: center;
}

:root header .fg-shop-nav {
	justify-content: center;
}

@media (max-width: 782px) {
	:root header .wp-block-group.alignwide > .wp-block-group:last-child {
		flex:            0 0 auto;
		justify-content: flex-end;
	}
}


/* ===================================================================
   Kachelbilder auf feste Höhe zwingen

   Die Quelldateien haben unterschiedliche Maße. Eine feste Höhe mit
   Beschnitt ist zuverlässiger als ein Seitenverhältnis.
   =================================================================== */

:root .fg-kat-kachel .wp-block-image {
	height:   210px;
	overflow: hidden;
	margin:   0;
}

:root .fg-kat-kachel .wp-block-image a {
	display: block;
	height:  100%;
}

:root .fg-kat-kachel .wp-block-image img {
	width:        100%;
	height:       100%;
	aspect-ratio: auto;
	object-fit:   cover;
	object-position: center;
}

@media (max-width: 600px) {
	:root .fg-kat-kachel .wp-block-image {
		height: 180px;
	}
}


/* ===================================================================
   Konto-Symbol im Kopfbereich ausblenden

   Es gibt keine Kundenkonten im Shop. Der Block wird von anderer
   Stelle eingefügt, deshalb hier ausgeblendet.
   =================================================================== */

:root header .wp-block-woocommerce-customer-account {
	display: none;
}


/* ===================================================================
   Kategoriezeile auf den Kategorieseiten

   Wer in einer Kategorie stöbert, soll ohne Umweg über das Menü in
   eine andere wechseln können. Die Zeile steht zwischen Titel und
   Ergebniszahl, die aktuelle Kategorie ist hervorgehoben.
   =================================================================== */

:root .fg-kat-nav {
	display:        flex;
	flex-wrap:      wrap;
	justify-content: center;
	gap:            0.5rem;
	margin:         0;
}

:root .fg-kat-nav a {
	display:         inline-block;
	padding:         0.45rem 1.05rem;
	border:          1px solid var(--fg-sand);
	border-radius:   var(--fg-pill);
	background:      var(--fg-white);
	color:           var(--fg-ink);
	text-decoration: none;
	line-height:     1.3;
}

:root .fg-kat-nav a:hover,
:root .fg-kat-nav a:focus-visible {
	border-color: var(--fg-berry);
	color:        var(--fg-berry);
}

/* Die aktuelle Kategorie erkennt WordPress über eine Klasse am
   body-Element, etwa body.term-fruchtweine. Damit lässt sich der
   passende Eintrag hervorheben, ohne dass PHP nötig wäre. */

body.term-fruchtweine .fg-kat-nav a[href$="/fruchtweine/"],
body.term-fruchtlikoere .fg-kat-nav a[href$="/fruchtlikoere/"],
body.term-fruchtgluehweine .fg-kat-nav a[href$="/fruchtgluehweine/"],
body.term-perlwein-secco .fg-kat-nav a[href$="/perlwein-secco/"],
body.term-saefte-sirup .fg-kat-nav a[href$="/saefte-sirup/"],
body.term-fruchtaufstriche .fg-kat-nav a[href$="/fruchtaufstriche/"] {
	background:   var(--fg-berry);
	border-color: var(--fg-berry);
	color:        var(--fg-white);
	font-weight:  600;
}

@media (max-width: 600px) {
	:root .fg-kat-nav a {
		padding: 0.4rem 0.8rem;
	}
}

/* ===================================================================
   Warenkorb-Symbol in der Kopfzeile
   =================================================================== */

/* Der Rahmen um das Symbol erscheint nicht beim Anklicken, sondern
   beim Schließen der Warenkorb-Leiste: Der Fokus springt dann auf
   die Schaltfläche zurück. Das ist richtig so – wer ohne Maus
   bedient, muss erkennen können, wo er gelandet ist.

   Deshalb wird der Rahmen hier nicht entfernt, sondern an die
   Seite angepasst: Beerenrot statt Browser-Blau, abgerundet statt
   eckig. Ohne Fokus ist nichts davon sichtbar. */

.wc-block-mini-cart__button {
	border-radius: 8px;
}

.wc-block-mini-cart__button:focus-visible {
	outline:        2px solid var(--fg-berry);
	outline-offset: 3px;
}

/* Nach einem reinen Mausklick ohne Tastatur bleibt die Schaltfläche
   unmarkiert. Browser regeln das über :focus-visible bereits selbst;
   diese Regel fängt ältere Fassungen ab, die noch :focus verwenden. */

.wc-block-mini-cart__button:focus:not(:focus-visible) {
	outline: none;
}