/**
 * Stylesheet der WooCommerce-Produktseite.
 *
 * Wird nur auf einzelnen Produktseiten geladen,
 * siehe inc/woocommerce/product.php.
 */


/* =========================================================
   Breadcrumbs

   Avada faerbt Breadcrumbs global in --awb-color8 (Beige
   #e2c39a) - auf Weiss kaum lesbar (Kontrast ca. 1,7 : 1).
   Auf Produktseiten gruen: Links Oliv, aktuelle Seite
   Dunkelgruen. Es werden nur die Variablen des Avada-
   Breadcrumb-Elements ueberschrieben; die globale Avada-
   Einstellung und andere Seiten bleiben unveraendert.
   .single-product hebt die Spezifitaet ueber Avadas
   .fusion-breadcrumbs.
   ========================================================= */

.single-product .fusion-breadcrumbs {
	--awb-text-color: var(--awb-color5, #74763b);
	--awb-text-hover-color: var(--awb-custom_color_5, #5e602f);
	--awb-current-page-color: var(--awb-custom_color_5, #5e602f);
	--awb-separator-color: var(--awb-color5, #74763b);
	color: var(--awb-color5, #74763b);
}

.single-product .fusion-breadcrumbs a {
	text-decoration: none;
	text-underline-offset: 3px;
}

.single-product .fusion-breadcrumbs a:hover {
	text-decoration: underline;
}

.single-product .fusion-breadcrumbs a:focus-visible {
	outline: 2px solid var(--awb-color5, #74763b);
	outline-offset: 2px;
	border-radius: 2px;
}


/* =========================================================
   Produkt-Tabs: wischbare Leiste auf Tablet und Smartphone

   Avada laesst die WooCommerce-Tabs umbrechen; auf dem
   Smartphone stehen sie dadurch als lange Liste untereinander
   (gemessen: 8 Zeilen, rund 400 px), bevor der Inhalt kommt.

   Bis 1024 px (Avada-Tablet-Grenze) werden sie zu einer
   einzeiligen Leiste, die man seitlich wischt - wie die
   Kategorie-Leiste in Liefer-Apps. Aktiver Tab: dunkelgruene
   Pille, die uebrigen hell. Ein Verlauf am rechten Rand zeigt,
   dass es weitergeht. product-tabs.js schiebt den gewaehlten
   Tab in die Mitte der Leiste.

   Die Tabs selbst bekommen kein display, damit der von
   Germanized ausgeblendete Tab "Produktsicherheit"
   (style="display:none") ausgeblendet bleibt.

   Spezifitaet: Avada faerbt ueber
   .fusion-body .fusion-woo-tabs-tb .wc-tabs > li.active > a
   (0,5,2); die Regeln hier liegen darueber. Die Rahmen der
   Links setzt Avada mit !important auf transparent - das
   bleibt so und stoert nicht.
   ========================================================= */

@media only screen and (max-width: 1024px) {

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		margin: 0 0 18px;
		padding: 3px 36px 6px 3px; /* rechts Platz fuer den Verlauf, oben/links fuer den Fokusrahmen */
		overflow-x: auto;
		overflow-y: hidden;
		border: 0;
		list-style: none;
		scroll-snap-type: x proximity;
		scroll-padding-inline: 16px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
		/* weicher Auslauf rechts: "hier geht es weiter" */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	}

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs::-webkit-scrollbar {
		display: none;
	}

	/* WooCommerce haengt Clearfix und Trennlinie an die Liste */
	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs::before,
	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs::after {
		content: none;
	}

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li,
	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li.active {
		flex: 0 0 auto;
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		scroll-snap-align: start;
	}

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li > a {
		display: flex;
		align-items: center;
		min-height: 40px; /* Tippflaeche */
		padding: 0 16px;
		border-radius: 999px;
		background-color: #f2e8da;
		color: var(--awb-color3, #51453e);
		font-size: 15px;
		line-height: 1.2;
		white-space: nowrap;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li > a:hover {
		background-color: #eadbc6;
		color: var(--awb-color3, #51453e);
	}

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li.active > a,
	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li.active > a:hover {
		background-color: var(--awb-custom_color_5, #5e602f);
		color: #fff;
	}

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li > a:focus-visible {
		outline: 2px solid var(--awb-color5, #74763b);
		outline-offset: 2px;
	}

	/* Avadas Pfeil am aktiven Tab passt nicht zur Pille */
	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs .arrow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.fusion-body .fusion-woo-tabs-tb .woocommerce-tabs ul.wc-tabs > li > a {
		transition: none;
	}
}