/* Botek Variantentabelle */
.botek-vtab {
	--botek-vtab-hintergrund: #fff;               /* Hintergrund der fixierten Kopfzeile: an das Theme anpassen */
	--botek-vtab-linie: rgba(128, 128, 128, .28);
	--botek-vtab-hover: rgba(128, 128, 128, .08);
	--botek-vtab-auswahl: rgba(255, 129, 20, .25);      /* Hintergrund der ausgewählten Zeile */
	--botek-vtab-auswahl-linie: rgb(255, 129, 20);      /* Balken links an der ausgewählten Zeile */
	--botek-vtab-bildgroesse: 3em;
	margin: 1.5em 0;
}

/* Standard-Auswahllisten von WooCommerce ausblenden, wenn die Tabelle die Auswahl übernimmt */
.botek-vtab-verbunden table.variations {
	display: none;
}

/* ---------- Filter ---------- */
.botek-vtab-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .75em 1em;
	margin-bottom: .75em;
}
.botek-vtab-feld {
	display: flex;
	flex-direction: column;
	gap: .3em;
	margin: 0;
	min-width: 9em;
}
.botek-vtab-feld-suche {
	flex: 1 1 12em;
}
.botek-vtab-feld-name {
	font-size: .875em;
	font-weight: 600;
}
/* Höhere Spezifität, damit Theme-Regeln (z. B. .woocommerce div.product select) die Schrift nicht überschreiben */
.botek-vtab .botek-vtab-filter .botek-vtab-feld select,
.botek-vtab .botek-vtab-filter .botek-vtab-feld input {
	font: inherit;
	font-size: inherit;
	margin: 0;
	width: 100%;
}
.botek-vtab-zuruecksetzen {
	font: inherit;
	cursor: pointer;
}
.botek-vtab-zuruecksetzen:disabled {
	cursor: default;
	opacity: .45;
}
.botek-vtab-zaehler {
	font-size: .875em;
	margin: 0 0 .5em;
	opacity: .75;
}

/* ---------- Tabelle ---------- */
.botek-vtab-scroll {
	max-height: 70vh;
	overflow: auto;
	border: 1px solid var(--botek-vtab-linie);
}
.botek-vtab-tabelle {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.botek-vtab-tabelle th,
.botek-vtab-tabelle td {
	padding: .45em .9em;
	text-align: left;
	vertical-align: middle;
	border: 0;
	border-bottom: 1px solid var(--botek-vtab-linie);
	white-space: nowrap;
}
.botek-vtab-tabelle thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 0;
	background: var(--botek-vtab-hintergrund);
	box-shadow: inset 0 -2px 0 var(--botek-vtab-linie);
}
.botek-vtab-tabelle thead button {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: .4em;
	width: 100%;
	padding: .65em .9em;
	font-weight: 600;
	cursor: pointer;
}
.botek-vtab-tabelle thead button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}
.botek-vtab-pfeil::after {
	content: "\2195";
	opacity: .35;
	font-size: .85em;
}
.botek-vtab-tabelle th[aria-sort="ascending"] .botek-vtab-pfeil::after {
	content: "\25B2";
	opacity: 1;
}
.botek-vtab-tabelle th[aria-sort="descending"] .botek-vtab-pfeil::after {
	content: "\25BC";
	opacity: 1;
}

/* ---------- Auswahl und Bild ---------- */
.botek-vtab-tabelle tbody tr {
	cursor: pointer;
}
.botek-vtab-tabelle tbody tr:hover {
	background: var(--botek-vtab-hover);
}
.botek-vtab-tabelle tbody tr.ist-ausgewaehlt {
	background: var(--botek-vtab-auswahl);
	box-shadow: inset 4px 0 0 var(--botek-vtab-auswahl-linie);
}
.botek-vtab-tabelle tbody tr:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}
.botek-vtab-tabelle tr[hidden] {
	display: none;
}
.botek-vtab-spalte-bild {
	width: 1%;
	padding-top: .3em !important;
	padding-bottom: .3em !important;
}
.botek-vtab-bild {
	display: block;
	width: var(--botek-vtab-bildgroesse);
	height: var(--botek-vtab-bildgroesse);
	max-width: none;
	object-fit: cover;
	object-position: left center;   /* Bildanfang zeigen statt der Mitte */
	border-radius: 2px;
}
.botek-vtab-sku {
	font-weight: 600;
}
.botek-vtab-nein {
	opacity: .6;
}
.botek-vtab-leer,
.botek-vtab-aktion {
	margin: .75em 0 0;
}

@media (max-width: 600px) {
	.botek-vtab-feld {
		flex: 1 1 calc(50% - 1em);
	}
	.botek-vtab-tabelle th,
	.botek-vtab-tabelle td {
		padding-left: .6em;
		padding-right: .6em;
	}
}

/* ---------- Passendes Zubehör ---------- */
/* Ausgeblendete Karten und Abschnitt auch dann verbergen, wenn das Theme display setzt */
.botek-zubehoer[hidden],
.botek-zubehoer li.product[hidden] {
	display: none !important;
}
/* Abstand des automatisch eingesetzten Zubehörs vor den Reitern */
.botek-zubehoer-kopie {
	clear: both;
	margin: 2em 0;
}

/* ---------- Produktseite: Titel und Artikelnummer ---------- */
.botek-ausgeblendet {
	display: none !important;
}
.botek-sku-zeile {
	margin: .75em 0;
	font-weight: 600;
}

/* Kein Abstand über der Variantenbeschreibung: Der Text beginnt auf Höhe des Produktbilds,
   wie die Kurzbeschreibung beim Elternprodukt. */
form.botek-produktformular,
form.botek-produktformular .single_variation_wrap,
form.botek-produktformular .woocommerce-variation,
form.botek-produktformular .woocommerce-variation-description {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
form.botek-produktformular .woocommerce-variation-description > :first-child {
	margin-top: 0 !important;
}
/* Restlichen Abstand über dem Variantenblock ausgleichen (Avada). Gilt nur für den Block von
   WooCommerce direkt im Formular, nicht für den von Avada in der Tabelle der Auswahllisten. */
form.botek-produktformular > .single_variation_wrap {
	margin-top: -30px !important;
}

/* Text der Variantenbeschreibung in 20 px. Die Überschrift <h3> behält die Schriftgröße des Themes. */
form.botek-produktformular .woocommerce-variation-description,
form.botek-produktformular .woocommerce-variation-description p,
form.botek-produktformular .woocommerce-variation-description li,
form.botek-produktformular .woocommerce-variation-description td,
form.botek-produktformular .woocommerce-variation-description th,
form.botek-produktformular .woocommerce-variation-description dt,
form.botek-produktformular .woocommerce-variation-description dd {
	font-size: 20px;
}

/* ---------- Bild „Lagerprogramm“ in der Produktgalerie ---------- */
.botek-lager-traeger {
	position: relative;
}
.woocommerce-product-gallery__image .botek-lager-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	width: 33.333%;       /* ein Drittel der Bildbreite, passt sich der Bildschirmgröße an */
	height: auto;
	max-width: none;
	margin: 0;
	z-index: 5000;
	pointer-events: none; /* Klicks gehen weiter an Lightbox und Zoom */
}