/*
 * Produktseite v13 – Welle 2 (12.10.2026), Plugin temana-core module/produktseite-*.php.
 * Grundlage: Master v13 (Claus 07.10.) §2–§9, Gesamtübergabe 11.10. §5–§13.
 * Farben aus temana.css (:root). Hellgrün als größere Fläche nur für „Das Wichtigste" (§5.1/§13);
 * Rechtliches und Hinweise neutral (Warmgrau/Weiß). Mobil ≤ 600 px eigenständig.
 */

/* ── Galerie (Master v13 §2.1, Referenz `.hero`/`.gallery-main`/`.thumbs`) ───── */
/* Galerie ca. 55 %, Kaufbereich ca. 45 % – ab 1000 px wie die Referenz; darunter bleibt Kadence
   (ab 720 px je 48 %, schmaler untereinander). Die Galerie darf flexibel bleiben (§2.1). */
@media (min-width:1000px){
	/* !important: Kadence setzt die 48 % auch über `.woocommerce #content …` */
	.woocommerce div.product div.images.woocommerce-product-gallery{width:53% !important}
	.woocommerce div.product div.summary.entry-summary{width:42% !important}
}
/* Hauptbild 1:1 (ganz sichtbar, nichts beschnitten); Vorschaubilder direkt darunter in vier Spalten statt
   über das Bild geschoben. Nur das Bild im Link – das Zoom-Bild daneben behält seine Größe. */
.woocommerce div.product div.images .woocommerce-product-gallery__image > a > img{aspect-ratio:1/1; object-fit:contain; background:#fff}
.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs{position:static; left:auto; transform:none;
	display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; width:100%; max-width:none; margin:14px 0 0; padding:0; background:none}
.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li{width:auto; height:auto; margin:0; padding:0; background:none}
.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img{display:block; width:100%; height:auto;
	aspect-ratio:1/1; object-fit:cover; opacity:1; background:#fff; border:1px solid var(--temana-linie); border-radius:10px}
.woocommerce.single-product div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img.flex-active{border:2px solid var(--temana-gruen)}

/* ── Kaufbereich ─────────────────────────────────────────────────────────────── */
.temana-produktmarke{font-size:14px}

/* Menge −/+ und Knopf (Master v13 Z. 11, Referenz `.buyrow`/`.stepper`): beide 52 px hoch, Radius 8 px,
   der grüne Knopf bleibt das stärkste Element. Knöpfe setzt kauf.js ein. */
.woocommerce div.product form.cart div.quantity.temana-menge{display:grid; grid-template-columns:44px 52px 44px; height:52px; margin:0 12px 0 0;
	border:1px solid var(--temana-linie); border-radius:8px; background:#fff; overflow:hidden}
.woocommerce div.product form.cart .temana-menge .qty{width:52px; height:100%; margin:0; padding:0; border:0; border-left:1px solid var(--temana-linie);
	border-right:1px solid var(--temana-linie); border-radius:0; box-shadow:none; background:#fff; text-align:center; font-size:16px; -moz-appearance:textfield}
.temana-menge .qty::-webkit-inner-spin-button, .temana-menge .qty::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
.temana-menge__knopf{display:flex; align-items:center; justify-content:center; min-height:0; padding:0; border:0; border-radius:0; background:#fff;
	font:inherit; font-size:22px; line-height:1; color:var(--temana-gruen); cursor:pointer}
.temana-menge__knopf:hover{background:#F4F8F2}
.temana-menge__knopf:focus-visible{outline:2px solid var(--temana-gruen); outline-offset:-2px}
.woocommerce div.product form.cart .single_add_to_cart_button{min-height:52px}
/* Handy: Menge und Knopf in einer Zeile wie in der Referenz (`.btn{flex:1}`), der Knopf füllt den Rest. */
@media (max-width:600px) and (min-width:360px){
	.woocommerce div.product form.cart .temana-menge ~ .single_add_to_cart_button{width:calc(100% - 154px); padding-inline:12px}
}

/* Produktvorteile (Symbole 01–38): gleiche Größe, Text im Bild ab ca. 112 px lesbar (09b Z. 3).
   multiply: die WebP haben weißen Grund, auf Warmweiß stünden sonst hellere Quadrate (09b Z. 4). */
.temana-produktvorteile{list-style:none; margin:14px 0 4px; padding:12px 0; border-top:1px solid var(--temana-linie);
	border-bottom:1px solid var(--temana-linie); display:grid; grid-template-columns:repeat(auto-fill,112px); gap:10px; justify-content:start}
.temana-produktvorteile li{margin:0}
.temana-produktvorteile img{display:block; width:112px; height:112px; mix-blend-mode:multiply}

/* „Das Wichtigste auf einen Blick": einzige hellgrüne Fläche, keine kräftige Kontur, kein Schatten (§2.4). */
.temana-wichtigste{margin:16px 0 18px; padding:16px 20px; background:#EEF6EE; border:1px solid #D8E8D7; border-radius:12px}
.temana-wichtigste h2{margin:0 0 8px; font-size:15px; font-weight:600; letter-spacing:.01em}
.temana-wichtigste ul{margin:0; padding-left:20px}
.temana-wichtigste li{margin:4px 0; font-size:15.5px; line-height:1.5}

/* Varianten: zwei Spalten, lange Texte brechen in der Kachel um (09 Z. 8). */
.temana-varianten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.temana-variante{white-space:normal; text-align:center; line-height:1.3}

/* Preiszeile (§3.1): „inkl. 10 % MwSt. · zzgl. Versandkosten" klein unter dem Preis. */
.temana-preiszeile{margin:16px 0 4px}
.woocommerce div.product .temana-preiszeile p.price{margin:0}
.temana-preiszeile__hinweis{margin:4px 0 12px; font-size:14px; line-height:1.45; color:var(--temana-text-sekundaer)}
.temana-preiszeile__hinweis a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.temana-preiszeile__hinweis a:hover{color:var(--temana-gruen)}
/* Germanized-Zeile nur, falls sie trotz has_action() stehen bleibt (live prüfen) – sonst doppelt. */
.summary:has(.temana-preiszeile__hinweis) .legal-price-info,
.summary:has(.temana-preiszeile__hinweis) > .wc-gzd-additional-info{display:none}

/* Lieferstatus (§3.2): Punkt immer Grün; „Lagernd" ganze Zeile Grün (temana.css), „Bestellbar" Rest dunkel. */
.temana-lieferstatus__punkt{display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%;
	background:var(--temana-gruen); vertical-align:.08em}
.temana-lieferstatus__status{font-weight:700}

/* Versandfortschritt (§3.3): eigener ruhiger Container, 20–24 px Abstand zum Knopf, Off-White, feine Kontur. */
.temana-versandstand{margin:22px 0 0; padding:15px 16px; background:#F8F6F1; border:1px solid #ECE8DF; border-radius:12px}
.temana-versandstand__kopf{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 16px; margin-bottom:9px}
.temana-versandstand__satz{margin:0; font-size:14.5px; font-weight:600; color:var(--temana-text)}
.temana-versandstand__grenze{margin:0; font-size:13.5px; color:var(--temana-text-sekundaer)}
.temana-versandstand.ist-erreicht .temana-versandstand__satz{color:var(--temana-gruen)}
.temana-versandstand.ist-erreicht .temana-versandstand__grenze{display:none}
.temana-versandstand__balken{height:6px; border-radius:99px; background:rgba(34,39,34,.10); overflow:hidden}
.temana-versandstand__balken i{display:block; height:100%; background:var(--temana-gruen); border-radius:inherit; transition:width .3s ease}
@media (prefers-reduced-motion:reduce){.temana-versandstand__balken i{transition:none}}

/* Vier Kaufvorteile (§4.1): Desktop 2 × 2, Weißraum, keine Mittellinie, keine Box; mobil untereinander. */
.temana-kaufvorteile{list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 26px}
.temana-kaufvorteile li{display:flex; align-items:center; gap:12px; margin:0}
.temana-kaufvorteile img{flex:0 0 auto; width:44px; height:44px}
.temana-kaufvorteile b{display:block; font-size:15px; font-weight:600; line-height:1.3; color:var(--temana-text)}
.temana-kaufvorteile span{display:block; font-size:14px; line-height:1.4; color:var(--temana-text-sekundaer)}

/* Frage zu diesem Produkt? (§4.2): ruhige Textlinks, keine Hauptknöpfe. */
.temana-produkthilfe{margin:20px 0 0; padding:14px 0 0; border-top:1px solid var(--temana-linie)}
.temana-produkthilfe__titel{margin:0 0 2px; font-size:15px; font-weight:600; color:var(--temana-text)}
.temana-produkthilfe__links{display:flex; flex-wrap:wrap; gap:0 22px; margin:0}
.temana-produkthilfe__links a{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:15px; font-weight:500;
	color:var(--temana-gruen); text-decoration:none}
.temana-produkthilfe__links a:hover{text-decoration:underline}

/* Artikelnummer + TeMana-Kategorie (§4.3): einzeilig, dezent, feine Linie, keine Box. */
.woocommerce div.product .temana-produktmeta{margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--temana-linie);
	font-size:14px; line-height:1.5; color:var(--temana-text-sekundaer)}
.temana-produktmeta .sku{color:#4f574f; font-weight:500}
.temana-produktmeta a{color:var(--temana-gruen); font-weight:500; text-decoration:none}
.temana-produktmeta a:hover{text-decoration:underline}
.temana-produktmeta__sku:has(.sku:empty),
.temana-produktmeta__sku:has(.sku:empty) + .temana-produktmeta__trenner{display:none}

/* ── Rechtliche Produktinformationen (Gesamtübergabe §8) ─────────────────────── */
/* div.: die Rechtsseiten tragen dieselbe Klasse am <body> (module/rechtsseiten.php) – ohne Elementnamen bekam deren Kopf 14 px Rand + 1 px Linie oben */
div.temana-recht{margin-top:14px; border-top:1px solid var(--temana-linie)}
.temana-recht__titel{margin:0; padding:14px 0 4px; font-size:13px; font-weight:600; color:#626962}
.temana-recht__teil{border-bottom:1px solid var(--temana-linie)}
.temana-recht__teil > summary{display:flex; align-items:center; gap:10px 14px; min-height:44px; padding:10px 0; list-style:none;
	cursor:pointer; font-size:14px; font-weight:500; color:var(--temana-text)}
.temana-recht__teil > summary::-webkit-details-marker{display:none}
.temana-recht__teil > summary::after{content:""; flex:0 0 auto; width:8px; height:8px; border-right:1.6px solid var(--temana-gruen);
	border-bottom:1.6px solid var(--temana-gruen); transform:rotate(45deg) translateY(-2px); transition:transform .2s ease}
.temana-recht__teil[open] > summary{color:var(--temana-gruen)}
.temana-recht__teil[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.temana-recht__teil > summary:focus-visible{outline:2px solid var(--temana-gruen); outline-offset:2px}
.temana-recht__teil > summary > span:first-child{flex:1 1 auto}
.temana-recht__rechts{display:flex; align-items:center; gap:6px}
.temana-recht__ghs{display:block; width:26px; height:26px}
.temana-recht__ghs--gross{width:60px; height:60px}
.temana-recht__signalwort{font-size:13px; font-weight:700; color:#454d45}
.temana-recht__inhalt{padding:2px 0 18px; font-size:14px; line-height:1.5; color:#454d45}
.temana-recht__inhalt p{margin:0 0 10px}
.temana-recht__kopf{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 14px}
.temana-recht__kopf p{margin:0}
.temana-recht__spalten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 28px}
.temana-recht__kicker{margin:0 0 6px !important; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--temana-gruen)}
.temana-recht__saetze{margin:0; padding-left:18px}
.temana-recht__saetze li{margin:6px 0}
/* Offizielle EU-Mitteilung: vollständig, unbeschnitten, ungefärbt (§8.3). */
.temana-recht__gewaehrleistung{display:block; width:100%; max-width:100%; height:auto}
.temana-recht__inhalt .temana-gewaehrleistung__link{margin:8px 0 0; font-size:14px}
.temana-recht__ghs{background:#fff}

/* ── Unter dem Produktkopf ───────────────────────────────────────────────────── */
.temana-trusted-shops--produktseite{clear:both; margin-block:clamp(24px,3vw,36px)}

/* Details nach Bedarf (§6): ein weißer Bereich, feine Kontur, Radius 14 px. Ohne Skript alles offen. */
.temana-pblock.temana-info{max-width:none}
.temana-info__kicker{margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--temana-gruen)}
.temana-info__reiter{background:var(--temana-weiss); border:1px solid var(--temana-linie); border-radius:14px; overflow:hidden}
.temana-info__kopf{margin:0; border-top:1px solid var(--temana-linie); font-size:16px}
.temana-info__kopf:first-child{border-top:0}
.temana-info__kopf button{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:56px;
	padding:16px 20px; border:0; background:none; font:inherit; font-weight:600; color:var(--temana-text); text-align:left; cursor:pointer}
.temana-info__kopf button:hover{color:var(--temana-gruen)}
.temana-info__kopf button:focus-visible{outline:2px solid var(--temana-gruen); outline-offset:-2px}
.temana-info__reiter.ist-bereit .temana-info__kopf button::after{content:""; flex:0 0 auto; width:9px; height:9px;
	border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg); transition:transform .2s ease}
.temana-info__kopf.ist-offen button{color:var(--temana-gruen)}
.temana-info__reiter.ist-bereit .temana-info__kopf.ist-offen button::after{transform:rotate(-135deg)}
.temana-info__panel{padding:4px 20px 24px; font-size:16px}
.temana-info__panel[hidden]{display:none}
.temana-info__panel > :first-child{margin-top:0}
.temana-info__panel .temana-pflicht{margin:0}
.temana-info__pflichtsaetze{margin:14px 0 0; padding-left:20px}
.temana-info__pflichtsaetze li{margin:5px 0}
.temana-hinweisflaeche{margin:16px 0 0; padding:14px 16px; background:#F8F6F1; border:1px solid #ECE8DF; border-radius:10px; font-size:15px}
.temana-info__panel .temana-zubereitung__werte{margin:0 0 6px; padding:14px 16px; background:#F8F6F1; border-radius:10px}
.temana-info__panel .temana-wissenskarten, .temana-info__panel .temana-spalten{margin-top:6px}

@media (min-width:900px){
	/* Registerkarten: Köpfe in einer Reihe (Flex-Reihenfolge), darunter genau ein offener Bereich. */
	.temana-info__reiter.ist-bereit{display:flex; flex-wrap:wrap}
	.temana-info__reiter.ist-bereit > .temana-info__kopf{order:0; flex:1 1 auto; border-top:0; border-bottom:1px solid var(--temana-linie); font-size:14.5px}
	.temana-info__reiter.ist-bereit > .temana-info__panel{order:1; flex:0 0 100%; padding:34px 38px 38px}
	.temana-info__reiter.ist-bereit .temana-info__kopf button{position:relative; justify-content:center; min-height:64px; padding:16px 14px;
		font-weight:500; color:#4d544d; text-align:center; line-height:1.35}
	.temana-info__reiter.ist-bereit .temana-info__kopf button::after{content:none}
	.temana-info__reiter.ist-bereit .temana-info__kopf.ist-offen button{font-weight:600; color:var(--temana-gruen)}
	.temana-info__reiter.ist-bereit .temana-info__kopf.ist-offen button::before{content:""; position:absolute; left:16px; right:16px; bottom:-1px;
		height:3px; border-radius:3px 3px 0 0; background:var(--temana-gruen)}
}

/* Nährstofftabelle primär, mobil horizontal scrollbar; %NRV-Balken nur zusätzlich, darunter (§7). */
.temana-tabelle-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.temana-naehrstoffe__tabelle{max-width:none; min-width:420px}
.temana-naehrstoffe__tabelle thead th{padding:8px 12px 8px 0; font-size:12.5px; font-weight:600; color:var(--temana-text-sekundaer); border-bottom:1px solid var(--temana-linie)}
.temana-naehrstoffe__tabelle td{text-align:right; padding-left:12px; font-variant-numeric:tabular-nums}
.temana-naehrstoffe__tabelle thead th:not(:first-child){text-align:right}
.temana-nrv-balken{margin:22px 0 0; padding:18px 20px; background:#F8F6F1; border:1px solid #ECE8DF; border-radius:12px}
.temana-nrv-balken__titel{margin:0 0 10px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--temana-gruen)}
.temana-nrv-balken ul{list-style:none; margin:0; padding:0}
.temana-nrv-balken li{display:grid; grid-template-columns:1fr auto; gap:4px 12px; margin:0 0 12px; font-size:14px}
.temana-nrv-balken__wert{font-weight:600; color:var(--temana-gruen); font-variant-numeric:tabular-nums}
.temana-nrv-balken__spur{grid-column:1 / -1; height:10px; border-radius:99px; background:#e8ece6; overflow:hidden}
.temana-nrv-balken__spur i{display:block; height:100%; border-radius:inherit; background:var(--temana-gruen)}

/* Wer hinter TeMana Natura steht (§7.2): weiße Karte mit Foto. */
.temana-pblock.temana-vertrauen{max-width:none; display:grid; grid-template-columns:200px minmax(0,1fr); gap:36px; align-items:center;
	padding:32px 38px; background:var(--temana-weiss); border:1px solid var(--temana-linie); border-radius:14px}
section.temana-pblock.temana-vertrauen{padding:32px 38px}
.temana-vertrauen--ohne-foto{grid-template-columns:1fr}
.temana-vertrauen__foto{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:14px}
.temana-vertrauen__text h2{margin:0 0 14px}
.temana-vertrauen__text p{margin:0 0 12px; color:#454d45}
.temana-vertrauen__link a{font-weight:600; color:var(--temana-gruen); text-decoration:none}
.temana-vertrauen__link a:hover{text-decoration:underline}

/* Passende Produkte (§8.3): höchstens drei Karten, kein Slider. */
.temana-pblock.temana-passende{max-width:none}
.temana-passende__liste{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:18px}
.temana-passende__karte{display:grid; grid-template-columns:104px minmax(0,1fr); gap:16px; align-items:center; padding:16px;
	background:var(--temana-warmweiss); border:1px solid var(--temana-linie); border-radius:12px}
.temana-passende__bild img{display:block; width:104px; height:104px; object-fit:cover; border-radius:10px}
.temana-passende__marke{margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--temana-gruen)}
.temana-passende__karte h3{margin:0 0 6px; font-size:17px; line-height:1.3}
.temana-passende__karte h3 a{color:var(--temana-text); text-decoration:none}
.temana-passende__mehr{margin:0}
.temana-passende__mehr a{font-size:14px; font-weight:600; color:var(--temana-gruen); text-decoration:none}

/* Abschlussberatung (§8.4): zwei Aktionen nebeneinander, die zweite als Outline. */
.temana-pblock--beratung .wp-block-buttons{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}

/* ── Mobil ───────────────────────────────────────────────────────────────────── */
@media (max-width:600px){
	/* Produktvorteile: 3 je Reihe, bei genau vier 2 × 2 (§5.1). */
	.temana-produktvorteile{grid-template-columns:repeat(3,minmax(0,1fr))}
	.temana-produktvorteile--4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.temana-produktvorteile img{width:100%; height:auto; max-width:160px}
	.temana-varianten{grid-template-columns:1fr}
	.temana-kaufvorteile{grid-template-columns:1fr; gap:14px}
	.temana-recht__spalten{grid-template-columns:1fr; gap:14px}
	.temana-recht__teil > summary{flex-wrap:wrap}
	.woocommerce div.product .temana-produktmeta{display:grid; gap:2px}
	.temana-produktmeta__trenner{display:none}
	.temana-info__panel{padding:2px 16px 20px; font-size:15.5px}
	.temana-info__kopf button{padding:15px 16px}
	.temana-pblock.temana-vertrauen, section.temana-pblock.temana-vertrauen{grid-template-columns:1fr; gap:20px; padding:24px}
	.temana-vertrauen__bild{max-width:150px}
	.temana-passende__karte{grid-template-columns:88px minmax(0,1fr); padding:14px}
	.temana-passende__bild img{width:88px; height:88px}
}