/* ── Produktdetailseiten final (Claus' Übergabe vom 22.10.2026, Abschnitte 01–14) ──
   Nur die dort geänderten Punkte; Werte aus seinen Vorschau-Blöcken, Selektoren auf das echte Markup der
   WooCommerce-Galerie (Flexslider) gesetzt. Wird nach den übrigen Teilen geladen. Pfeile, Überblenden und
   Vorschaubild-Folgen: temana-core module/produktseite-galerie.php und assets/produktseite/galerie.js. */

/* 01 Galerie: erstes Vorschaubild ganz links (bei fünf Bildern stand die Reihe mittig und schnitt das erste an);
   ohne Polster darunter wie in Claus' Vorschau. */
.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	justify-content: flex-start !important; padding-bottom: 0;
}
.woocommerce.single-product div.product div.images .flex-control-thumbs img { cursor: pointer; }
.woocommerce.single-product div.product div.images .flex-control-thumbs img:focus-visible {
	outline: 3px solid #79A039; outline-offset: -3px;
}

/* 01 Galerie: zwei dezente Pfeile auf dem großen Bild (vor/zurück, zyklisch). */
/* Beim Überblenden liegen die Bilder übereinander im Wrapper; er umschließt sie und trägt die Pfeile. */
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper { position: relative; display: flow-root; }
/* Große Bildfläche quadratisch, das Bild (höchstens 600 px) darin mittig – wie Claus' Vorschau; Hochformate springen
   beim Wechsel nicht in der Höhe. Nur das Bild im Link – das Zoom-Bild (img.zoomImg) behält seine Größe. */
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
	display: flex !important; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
}
/* Kadence macht ab dem zweiten Bild Vorschaukacheln daraus (65 px hoch, 31 px nach oben gerückt), solange kein
   .flex-viewport da ist – beim Überblenden gibt es keinen. Folge: nach dem Bildwechsel nur ein Streifen, und die Streifen
   lagen über der Brotkrume (Klick auf „Shop“ öffnete das Bild). Jedes Bild bekommt dieselbe Bildfläche wie das erste. */
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) {
	height: auto; margin-top: 0;
}
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.woocommerce.single-product div.product div.images .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image > a > img {
	display: block; width: 100%; height: 100%; max-width: 600px; max-height: 600px; margin: 0 auto; object-fit: contain;
}
.woocommerce.single-product div.product div.images .temana-galerie-navigation { position: static; }
.woocommerce.single-product div.product div.images .temana-galerie-pfeil {
	position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
	width: 42px; height: 42px; min-height: 0; padding: 0; margin: 0;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(43, 114, 61, .2); border-radius: 50%;
	background: rgba(255, 252, 247, .94); color: #2B723D; box-shadow: 0 2px 10px rgba(20, 54, 27, .09);
	cursor: pointer; line-height: 1; transition: background-color .15s, border-color .15s;
}
.woocommerce.single-product div.product div.images .temana-galerie-pfeil svg {
	width: 19px; height: 19px; fill: none; stroke: currentColor;
	stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
}
.woocommerce.single-product div.product div.images .temana-galerie-pfeil--zurueck { left: 12px; }
.woocommerce.single-product div.product div.images .temana-galerie-pfeil--weiter { right: 12px; }
.woocommerce.single-product div.product div.images .temana-galerie-pfeil:hover {
	background: #EEF6EE; border-color: #79A039; color: #2B723D;
}
.woocommerce.single-product div.product div.images .temana-galerie-pfeil:focus-visible {
	outline: 3px solid #79A039; outline-offset: 3px;
}
@media (max-width: 760px) {
	.woocommerce.single-product div.product div.images .temana-galerie-pfeil { width: 36px; height: 36px; }
	.woocommerce.single-product div.product div.images .temana-galerie-pfeil svg { width: 17px; height: 17px; }
	.woocommerce.single-product div.product div.images .temana-galerie-pfeil--zurueck { left: 8px; }
	.woocommerce.single-product div.product div.images .temana-galerie-pfeil--weiter { right: 8px; }
}

/* 03 Produktvorteile: für alle Produkte höchstens fünf Symbole in einer Reihe (Michael 25.10.2026), zwischen zwei
   feinen Linien. Fünf Spalten gelten für jede Anzahl 1–5: gleiche Symbolgröße überall, nichts wird aufgefüllt, eine
   kürzere Reihe steht linksbündig; mobil (bis 767 px) seitlich wischen. */
.woocommerce div.product .summary .temana-produktvorteile {
	display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; list-style: none !important;
	gap: 8px !important; padding: 13px 0 12px !important; margin: 17px 0 15px !important;
	border-top: 1px solid #E7E3DB !important; border-bottom: 1px solid #E7E3DB !important;
	background: transparent !important; align-items: start; overflow: visible;
}
.woocommerce div.product .summary .temana-produktvorteile li {
	min-width: 0; display: flex; flex-direction: column; align-items: center;
	gap: 5px; margin: 0 !important; padding: 0; text-align: center;
}
.woocommerce div.product .summary .temana-produktvorteile img {
	width: 70px !important; height: 70px !important; max-width: 100% !important; object-fit: contain; mix-blend-mode: multiply;
}
.woocommerce div.product .summary .temana-produktvorteile span {
	font-family: 'Poppins', sans-serif !important; font-weight: 400 !important; font-size: 11.6px !important;
	line-height: 1.35 !important; color: #465047 !important; overflow-wrap: normal !important; hyphens: auto;
}
@media (max-width: 767px) {
	.woocommerce div.product .summary .temana-produktvorteile {
		display: flex !important; grid-template-columns: none !important; gap: 10px !important;
		overflow-x: auto !important; overflow-y: hidden !important; max-width: 100% !important;
		scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
		padding-bottom: 14px !important; scrollbar-color: #B6C8B5 transparent; scrollbar-width: thin;
	}
	.woocommerce div.product .summary .temana-produktvorteile li {
		flex: 0 0 111px !important; width: 111px !important; scroll-snap-align: start;
	}
	.woocommerce div.product .summary .temana-produktvorteile span {
		font-size: 12px !important; line-height: 1.35 !important;
	}
}

/* 05 Packungsgrößen: die gewählte Kachel bleibt in jedem Zustand (Hover, Fokus, Klick) hellgrün mit dunkler Schrift. */
.temana-varianten button.temana-variante.is-aktiv,
.temana-varianten button.temana-variante.is-aktiv:hover,
.temana-varianten button.temana-variante.is-aktiv:focus,
.temana-varianten button.temana-variante.is-aktiv:focus-visible,
.temana-varianten button.temana-variante.is-aktiv:active,
.temana-varianten button.temana-variante[aria-pressed="true"] {
	color: #26332c !important; -webkit-text-fill-color: #26332c !important;
	background-color: #EEF5E8 !important; border-color: #2B723D !important;
}
.temana-varianten button.temana-variante.is-aktiv *,
.temana-varianten button.temana-variante[aria-pressed="true"] * {
	color: #26332c !important; -webkit-text-fill-color: #26332c !important;
}

/* 07 Menge und Warenkorb: sichtbarer Tastaturfokus. */
.woocommerce div.product form.cart .temana-menge .temana-menge__knopf:focus-visible,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible,
.woocommerce div.product form.cart input.qty:focus-visible {
	outline: 2px solid #2B723D !important; outline-offset: 2px !important;
}

/* 08 Zahlarten: die sieben Original-Logos ohne eigenen Rahmen (die SVGs bringen ihre Karte selbst mit) – Desktop in einer
   Reihe, mobil vier und drei mittig darunter. Ohne Überschrift seit Claus' Zahlungsarten-Übergabe 24.10. (Abschnitt 3). */
.woocommerce.single-product div.product .summary p.temana-zahlungslogos__titel {
	margin: 12px 0 0 !important; padding: 0 !important; font-family: Poppins, sans-serif;
	font-size: 12px; font-weight: 500; line-height: 1.5; color: #667067; text-align: center;
}
.woocommerce.single-product div.product .summary ul.temana-zahlungslogos--produkt {
	display: flex !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important;
	list-style: none !important; padding: 0 !important; margin: 14px 0 20px !important; max-width: 100% !important;
	width: 100%; gap: 6px !important;
}
.woocommerce.single-product div.product .summary ul.temana-zahlungslogos--produkt > li {
	display: block !important; flex: 1 1 0 !important; min-width: 0 !important; max-width: 73px !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background: none !important; box-shadow: none !important; line-height: 0 !important;
}
.woocommerce.single-product div.product .summary ul.temana-zahlungslogos--produkt > li > img {
	display: block !important; width: clamp(32px, 70%, 52px) !important; height: auto !important; margin-inline: auto !important;
	max-width: 100% !important; aspect-ratio: 144 / 100; object-fit: contain;
	border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
@media (max-width: 760px) {
	.woocommerce.single-product div.product .summary p.temana-zahlungslogos__titel { margin-top: 10px !important; font-size: 11.5px; }
	.woocommerce.single-product div.product .summary ul.temana-zahlungslogos--produkt {
		flex-wrap: wrap !important; justify-content: center !important; gap: 7px !important;
	}
	.woocommerce.single-product div.product .summary ul.temana-zahlungslogos--produkt > li {
		flex: 0 0 calc((100% - 21px) / 4) !important; max-width: 74px !important;
	}
	.woocommerce.single-product div.product .summary ul.temana-zahlungslogos--produkt > li > img { width: clamp(44px, 66%, 50px) !important; }
}

/* 08 Versandstand: die beiden Textzeilen untereinander, 4 px Abstand (Desktop und mobil). */
.temana-versandstand .temana-versandstand__kopf {
	display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start;
	gap: 4px; margin-bottom: 12px;
}
.temana-versandstand .temana-versandstand__kopf > .temana-versandstand__satz,
.temana-versandstand .temana-versandstand__kopf > .temana-versandstand__grenze { margin: 0 !important; padding: 0; }

/* 09 Artikelnummer und TeMana-Kategorie: untereinander, Bezeichnung halbfett, ohne Trennzeichen. */
.woocommerce div.product div.temana-produktmeta {
	display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 4px;
	font-family: Poppins, sans-serif; font-size: 15px; line-height: 1.65; color: #4f574f; margin-top: 16px;
}
.woocommerce div.product div.temana-produktmeta > span {
	display: block; width: 100%; font-size: inherit; font-weight: 400; overflow-wrap: anywhere;
}
.woocommerce div.product div.temana-produktmeta .temana-produktmeta__label { font-size: inherit; font-weight: 500; color: #465147; }
.woocommerce div.product div.temana-produktmeta .sku,
.woocommerce div.product div.temana-produktmeta .temana-produktmeta__wert,
.woocommerce div.product div.temana-produktmeta .temana-produktmeta__wert a {
	font-family: inherit; font-size: inherit; font-weight: 400; color: #4f574f;
}
.woocommerce div.product div.temana-produktmeta .temana-produktmeta__trenner { display: none !important; }

/* Kopf (Claus' Nachkorrektur nach Abschnitt 14): Serviceleiste ab 1025 px in genau einer Zeile; zwischen 1025 und
   1199 px statt eines abgeschnittenen Suchtexts die Lupe der Tablet-Ansicht (Teil 12, §13.1). */
@media (min-width: 1025px) {
	.temana-servicebar__in { flex-wrap: nowrap !important; gap: 20px; }
	.temana-servicebar__zusagen { flex: 0 0 auto; white-space: nowrap; }
	.temana-servicebar__wege { flex: 1 1 auto; min-width: 0; width: auto; justify-content: flex-end; }
	.temana-servicebar__wege .temana-kopfsuche { flex: 1 1 315px; min-width: 0; max-width: 384px; width: auto; }
	.temana-servicebar__wege .temana-kopfsuche input { min-width: 0; width: 100%; white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1199px) {
	.temana-servicebar__wege .temana-kopfsuche {
		position: relative; flex: 0 0 44px; width: 44px; min-width: 44px; min-height: 44px;
		margin-right: auto; padding: 0; justify-content: center;
		background: none; border: 0; color: #fff; border-radius: 8px;
	}
	.temana-servicebar__wege .temana-kopfsuche:focus-within { background: rgba(255, 255, 255, .16); outline: 2px solid #fff; outline-offset: 0; }
	.temana-servicebar__wege .temana-kopfsuche .temana-ikon { width: 22px; height: 22px; opacity: 1; color: #fff; }
	.temana-servicebar__wege .temana-kopfsuche input {
		position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 44px; opacity: 0; cursor: pointer;
	}
}