/* KIT Webshop-Link */

:root {
	--kit-wsl-color: #4ba3d3;
	--kit-wsl-hover: #009de0;
	--kit-wsl-line: #dcdcdc;
}

.kit-wsl-icon {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
}

/* Child-Theme färbt alle Links in #main beim Hover blau – hier gegensteuern. */
#main a.kit-wsl-badge,
#main a.kit-wsl-badge:hover,
#main a.kit-wsl-badge span,
#main a.kit-wsl-badge span:hover,
#main a.kit-wsl-sidebar-btn,
#main a.kit-wsl-sidebar-btn:hover,
#main a.kit-wsl-sidebar-btn span,
#main a.kit-wsl-sidebar-btn span:hover {
	color: #fff !important;
}

/* Eigener Produkt-Link (a.product-shop-url) dient nur als Datenquelle. */
.product-shop-link a.product-shop-url {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * Produkt-Badges
 * ---------------------------------------------------------------------- */

.product-shop-link {
	position: relative;
}

.kit-wsl-badge {
	box-sizing: border-box;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	--kit-wsl-bg: var(--kit-wsl-color);
	color: #fff;
	background: var(--kit-wsl-bg);
	text-decoration: none !important;
	z-index: 2;
}

.kit-wsl-badge:hover,
.kit-wsl-badge:focus-visible {
	--kit-wsl-bg: var(--kit-wsl-hover);
}

.kit-wsl-badge:focus-visible {
	outline: 2px solid var(--kit-wsl-hover);
	outline-offset: 2px;
}

/* Variante 1: Fähnchen, hängt rechts oben an der Trennlinie.
   top/right misst das JS an der vorangehenden Trennlinie (vc_separator) aus. */
.kit-wsl-badge-flag {
	position: absolute;
	top: var(--kit-wsl-top, 0);
	right: var(--kit-wsl-right, 0);
	width: 38px;
	height: 40px;
	font-size: 20px;
	border-radius: 0 0 4px 4px;
}

/* Variante 2: freistehendes Icon mit abgeschnittener Ecke.
   Ecke per Verlauf statt clip-path – clip-path würde auch den Tooltip abschneiden. */
.kit-wsl-badge-icon {
	position: absolute;
	top: 14px;
	right: var(--kit-wsl-right, 0);
	width: 38px;
	height: 38px;
	font-size: 20px;
	border-radius: 4px;
	background: linear-gradient(225deg, transparent 7px, var(--kit-wsl-bg) 7.5px);
}

/* Platz für Fähnchen / Icon, damit der Text nicht darunter läuft */
.kit-wsl-style-flag > .wpb_column:last-of-type > .vc_column-inner,
.kit-wsl-style-icon > .wpb_column:last-of-type > .vc_column-inner {
	padding-right: 52px;
}

/* Mobil stehen Bild und Text untereinander: Platz neben dem Bild statt neben dem Text */
@media (max-width: 767px) {
	.kit-wsl-style-flag > .wpb_column:last-of-type > .vc_column-inner,
	.kit-wsl-style-icon > .wpb_column:last-of-type > .vc_column-inner {
		padding-right: 15px;
	}

	.kit-wsl-style-flag > .wpb_column:first-of-type > .vc_column-inner,
	.kit-wsl-style-icon > .wpb_column:first-of-type > .vc_column-inner {
		padding-right: 56px;
		padding-left: 56px;
	}
}

/* Variante 3: Balken mit Text über dem Produkttext */
.kit-wsl-badge-bar {
	display: flex;
	gap: 10px;
	width: 100%;
	margin: 0 0 14px;
	padding: 8px 14px;
	font-size: 16px;
	line-height: 1.3;
	border-radius: 2px;
}

.kit-wsl-badge-bar .kit-wsl-icon-cart {
	font-size: 20px;
}

.kit-wsl-badge-bar .kit-wsl-label {
	margin-left: auto;
}

.kit-wsl-badge-bar .kit-wsl-icon-arrow {
	font-size: 18px;
}

/* Mouse-Over-Erklärung */
.kit-wsl-badge[data-kit-wsl-tip]::after {
	content: attr(data-kit-wsl-tip);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: max-content;
	max-width: 260px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	color: #fff;
	background: #222;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	pointer-events: none;
	z-index: 10;
}

.kit-wsl-badge[data-kit-wsl-tip]:hover::after,
.kit-wsl-badge[data-kit-wsl-tip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* -------------------------------------------------------------------------
 * Hauptnavigation
 * ---------------------------------------------------------------------- */

.kit-wsl-pill {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	padding: 3px 12px 3px 9px;
	border: 1px solid currentColor;
	border-radius: 999px;
	line-height: 1.3;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.kit-wsl-menu-item .kit-wsl-pill {
	font-size: 0.82em;
}

.kit-wsl-pill .kit-wsl-icon {
	font-size: 0.95em;
}

.kit-wsl-menu-item > a:hover .kit-wsl-pill {
	color: var(--kit-wsl-hover);
}

/* Header hat feste Breite: Abstände verdichten, damit der Webshop-Punkt in die Zeile passt.
   Wird nur ausgegeben, wenn „Menüabstände verdichten“ aktiv ist (Klasse am body). */
.kit-wsl-compact-nav .main-nav:has(> .kit-wsl-menu-item) > li > a {
	margin-left: var(--kit-wsl-nav-gap, 4px);
	margin-right: var(--kit-wsl-nav-gap, 4px);
}

/* -------------------------------------------------------------------------
 * Sidebar (Bellows-Menü)
 * ---------------------------------------------------------------------- */

.bellows .bellows-nav .kit-wsl-has-btn {
	--kit-wsl-indent: calc(var(--bellows-sub-item-padding-h, 20px) + var(--bellows-indent, 20px) * (var(--kit-wsl-level, 2) - var(--bellows-indent-level-offset, 1)));
	position: relative;
}

/* Linien- und Button-Position misst das JS an den Chevrons aus (--kit-wsl-line-x, --kit-wsl-btn-x),
   weil das Sidebar-Menü per Custom-CSS mit festen Offsets verschoben ist. */

/* Vertikale Linie entlang des geöffneten Bereichs … */
.bellows .bellows-nav .kit-wsl-has-btn::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: var(--kit-wsl-line-bottom, 21px);
	left: var(--kit-wsl-line-x, calc(var(--kit-wsl-indent) - 28px));
	width: 3px;
	background: var(--kit-wsl-line);
}

.bellows .bellows-nav li.bellows-menu-item.kit-wsl-sidebar-item {
	position: relative;
	padding: 10px 0 6px var(--kit-wsl-btn-x, calc(var(--kit-wsl-indent) - 6px));
}

/* … mit Abzweig zum Button */
.bellows .bellows-nav li.bellows-menu-item.kit-wsl-sidebar-item::before {
	content: "";
	position: absolute;
	bottom: var(--kit-wsl-line-bottom, 21px);
	left: var(--kit-wsl-line-x, calc(var(--kit-wsl-indent) - 28px));
	width: calc(var(--kit-wsl-btn-x, calc(var(--kit-wsl-indent) - 6px)) - var(--kit-wsl-line-x, calc(var(--kit-wsl-indent) - 28px)));
	height: 3px;
	background: var(--kit-wsl-line);
}

.kit-wsl-sidebar-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	background: var(--kit-wsl-color);
	border-radius: 999px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.kit-wsl-sidebar-btn:hover,
.kit-wsl-sidebar-btn:focus-visible {
	background: var(--kit-wsl-hover);
}

/* -------------------------------------------------------------------------
 * Einstellungsseite (Vorschau)
 * ---------------------------------------------------------------------- */

.kit-wsl-admin .kit-wsl-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 8px;
}

.kit-wsl-admin .kit-wsl-choice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 300px;
	padding: 12px;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	cursor: pointer;
}

.kit-wsl-admin .kit-wsl-choice:has(input:checked) {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

.kit-wsl-admin .kit-wsl-preview {
	display: block;
	margin-top: 10px;
	padding: 0 0 10px;
	border-top: 1px solid #999;
	min-height: 120px;
}

.kit-wsl-admin .kit-wsl-preview.kit-wsl-style-bar {
	padding-top: 10px;
}

.kit-wsl-admin .kit-wsl-preview-title {
	display: block;
	margin: 18px 52px 8px 0;
	font-weight: 600;
}

.kit-wsl-admin .kit-wsl-style-bar .kit-wsl-preview-title {
	margin-top: 0;
}

.kit-wsl-admin .kit-wsl-preview-line {
	display: block;
	height: 8px;
	margin: 0 52px 6px 0;
	background: #e6e6e6;
	border-radius: 4px;
}

.kit-wsl-admin .kit-wsl-preview-line.short {
	width: 60%;
}