/**
 * Kategorie-Slider (.catalog-top-categories) auf der Shop-Seite: NUR noch
 * kosmetische Titel-Korrekturen (vollständig, umbruchfähig statt
 * abgeschnitten).
 *
 * WICHTIG -- Lehre aus einer längeren Fehlersuche (Juli 2026): Alle früheren
 * Eingriffe in die Swiper-Mechanik dieses Widgets (eigene Swiper-Instanz per
 * JS, overflow:hidden auf dem Wrapper, Pfeile per JS verschieben,
 * translateZ-GPU-Hacks) haben die Probleme VERURSACHT statt behoben:
 * Das Elementor-Widget initialisiert seinen Swiper SELBST (über Elementors
 * Frontend-Hooks, später als DOMContentLoaded), und das Parent-Theme bringt
 * in base.css bereits Platzhalter-Regeln mit
 * (.swiper:not(.swiper-initialized)[data-desktop='N'] .swiper-slide),
 * die die Slides schon VOR der Initialisierung korrekt dimensionieren.
 * Unsere frühere JS-Initialisierung erzeugte eine ZWEITE, konkurrierende
 * Swiper-Instanz auf demselben Element -- Folgen: weiße Fläche beim Wischen
 * auf Mobile, kurz überdimensional aufblitzende Kacheln, inkonsistente
 * Zustände (per Live-Logging bestätigt: sichtbarer Transform bewegte sich,
 * während die eigene Instanz translate=0 meldete). Mit reinem Parent-Theme
 * traten die Fehler nie auf. Also: Finger weg von der Swiper-Mechanik
 * dieses Widgets.
 */

/* Titel vollständig, umbruchfähig und zentriert darstellen */
.catalog-top-categories__title,
.catalog-top-categories__text {
	height: auto;
	min-height: 0;
	max-width: 100%;
	white-space: normal;
	overflow: visible;
	text-overflow: unset;
	text-align: left;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	font-size: 16px;
	line-height: 1.3;
}

@media (max-width: 1024px) {
	.catalog-top-categories__title,
	.catalog-top-categories__text {
		font-size: 14px;
	}
}

@media (max-width: 576px) {
	.catalog-top-categories__title,
	.catalog-top-categories__text {
		font-size: 13px;
	}
}

/*
 * Lücke im Parent-Theme schließen: base.css definiert Pre-Init-Platzhalter
 * (.swiper:not(.swiper-initialized)[data-desktop='N'] .swiper-slide) nur für
 * N=2..10 -- das Widget ist hier aber auf "Slides to Show: 11" konfiguriert
 * (data-desktop="11"). Ohne diese Regel rendert eine Slide vor der
 * Swiper-Initialisierung (bzw. wenn sie ausbleibt, z.B. Kategorie-Seiten
 * mit nur 1 Unterkategorie) in voller Containerbreite -- durch gz-ratio
 * quadratisch aufgeblasen zur "Riesenkachel". Exakt das Muster/die Formel
 * der Parent-Regeln, nur für 11 und 12 ergänzt.
 */
@media (min-width: 1025px) {
	.swiper:not(.swiper-initialized)[data-desktop='11'] .swiper-slide,
	.swiper:not(.swiper-initialized)[data-desktop='11'] li.product {
		width: calc( 9.09% - ( ( var(--gz-swiper-items-space) * ( 11 - 1 ) ) / 11 ));
		margin-inline-end: var(--gz-swiper-items-space);
	}
	.swiper:not(.swiper-initialized)[data-desktop='12'] .swiper-slide,
	.swiper:not(.swiper-initialized)[data-desktop='12'] li.product {
		width: calc( 8.33% - ( ( var(--gz-swiper-items-space) * ( 12 - 1 ) ) / 12 ));
		margin-inline-end: var(--gz-swiper-items-space);
	}
}