/* CR-3D Shop-weit (Shop-Grid, Kategorien, Aehnliche Produkte, Cross-Sells, ueberall
   wo WooCommerce-Loop-Items gerendert werden) - im Unterschied zu single-product-
   redesign.css, das NUR auf der Produktseite selbst laedt. */

/* Mobile Grid-Spalten: Basistheme hat fuer die Produktkarten-Wrapper (.col-lg-3
   .col-md-3 .col-sm-3 .col-xs-cus-12, siehe content-products.php) unterhalb von 768px
   (Bootstrap-sm-Grenze) KEIN Breiten-/Float-Rule fuer .col-xs-cus-12 definiert (nur
   eine einzelne @media(max-width:480px)-Regel in css/style.css) - dadurch stapeln
   die Karten dort einfach als normale Bloecke (= 1 Spalte) uebereinander. Hier
   stattdessen bewusst 2 Spalten von 767px runter bis 300px, erst darunter 1 Spalte.
   :nth-child(2n+1) statt der PHP-seitigen "first"/"last"-Klassen fuer den Zeilenumbruch,
   da die von der urspruenglichen 4er-Spaltenzahl ausgehen, nicht von 2. */
@media (max-width: 767px) {
	.products-grid {
		width: 92%;
		margin-left: auto;
		margin-right: auto;
		float: none;
	}
	.products-grid .row-products > [class*="col-"] {
		width: 50%;
		float: left;
		clear: none;
	}
	.rtl .products-grid .row-products > [class*="col-"] {
		float: right;
	}
	.products-grid .row-products > [class*="col-"]:nth-child(2n+1) {
		clear: left;
	}
	.rtl .products-grid .row-products > [class*="col-"]:nth-child(2n+1) {
		clear: right;
	}
}
@media (max-width: 300px) {
	.products-grid .row-products > [class*="col-"] {
		width: 100%;
		float: none;
		clear: both;
	}
}

/* Kategorie-Titel (H1, siehe woocommerce.php) in Good Times, analog zu den
   "Aehnliche Produkte"-Ueberschriften weiter unten. */
.page-title {
	font-family: 'Good Times', sans-serif !important;
	font-size: 32px !important;
	font-weight: 900 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #1a1d20 !important;
	margin: 0 !important;
}

/* Volle-Breite-Titelleiste (Teal) oberhalb von Sidebar+Content (siehe woocommerce.php) -
   aussen ohne Breitenbegrenzung ueber die gesamte Seite (auch ueber den Bereich, in dem
   spaeter die Sidebar links steht), innen per .container auf die normale Seitenbreite
   zentriert wie bei der Breadcrumb-Leiste direkt darueber. */
.cr3d-archive-title-band {
	background: #07737a;
	margin-top: 15px;
}
.cr3d-archive-title-band .page-title {
	padding: 22px 0;
	color: #fff !important;
}

/* Kategorie-Beschreibungstext (woocommerce_archive_description) steht VOR den
   Produkten, direkt unter der Toolbar (Filter/Suche/Pro-Seite) - siehe
   inc/vendors/woocommerce/functions.php. Dezente eigene Typo statt Standard-h1/p,
   damit er sich vom Seitentitel-Banner abhebt und nicht wie eine zweite Ueberschrift
   wirkt. */
.woocommerce-products-header,
.category-banner {
	margin-top: 20px;
	margin-bottom: 20px;
}
.term-description {
	max-width: 760px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e2e5e8;
	/* Verhindert, dass der Abschnitt bei sehr kurzem Text oder fehlender Ueberschrift
	   optisch zusammenfaellt - Rand/Abstand bleiben dann trotzdem konsistent. */
	min-height: 65px;
	box-sizing: border-box;
}
/* Ueberschrift wieder sichtbar - aber als h2 statt h1 (siehe cr3d_downgrade_term_description_heading()
   in functions.php, wandelt <h1> im Beschreibungstext serverseitig in <h2> um): ein <h1> pro
   Seite ist Best Practice, der eigentliche Seitentitel ("FILAMENTE"-Banner) ist bereits ein h1. */
.term-description h2 {
	margin: 20px 0 8px !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: #1a1d20 !important;
}
.term-description h2 strong,
.term-description h2 span {
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
}
.term-description p {
	/* Abstand nach oben bewusst NUR hier auf dem Text, nicht auf ".term-description"
	   selbst - ein margin-top auf dem Container verschiebt sonst die Toolbar
	   (Filter/Suche/Pro-Seite-Button) mit nach unten. Greift nur, wenn keine
	   Ueberschrift vorangeht (h2 bringt bereits eigenen margin-bottom mit). */
	margin: 12px 0 0 !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	color: #6b7280;
}
.term-description h2 + p {
	margin-top: 0 !important;
}

/* Grundpreis (Germanized .price-unit) nur auf der Produktseite nach Variantenwahl
   zeigen (siehe single-product-redesign.css) - ueberall sonst (Grid/Kategorie/
   Aehnliche Produkte) IMMER weg, da dort ohnehin nie eine Variante gewaehlt wird
   und germanized dort stattdessen eine wenig aussagekraeftige Von-Bis-Spanne zeigt. */
.price-unit {
	display: none !important;
}

/* "ab"-Praefix vor Von-Bis-Preisen (variable Produkte ohne gewaehlte Variante):
   klein/dezent vor dem eigentlichen Preis, analog zur Produktseite. */
.cr3d-ab-prefix {
	font-size: 0.6em;
	font-weight: 400;
	color: #6b7280;
	margin-right: 2px;
	text-transform: lowercase;
}

/* Germanized Sale-Price-Label ("Neuer Preis:") - rein visuelles Label-Feature,
   nicht Teil des eigentlichen Preises, hier ungewuenscht -> weg. */
.wc-gzd-sale-price-label,
.wc-gzd-sale-price-regular-label {
	display: none !important;
}

/* Angebots-Preis (der tatsaechliche, nicht durchgestrichene Preis) deutlich fetter,
   damit er gegenueber dem Streichpreis staerker heraussticht. */
.price ins,
.price ins .amount,
.single-product.woocommerce div.product p.price ins {
	font-weight: 800 !important;
	text-decoration: none;
}

/* "Angebot!"-Badge: eigenes SVG-Banner (roter Falt-Banner mit Zipfel unten
   links) statt runder roter Standard-Blase. Ragt oben und links etwas ueber
   die Bildkante hinaus. Prozentuale Breite/Position, damit es auf grossen
   Produktseiten-Bildern und kleinen Grid-Thumbnails gleichermassen passt. */
.onsale {
	position: absolute !important;
	top: -8% !important;
	left: -4% !important;
	z-index: 5 !important;
	width: 52% !important;
	aspect-ratio: 209 / 78;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	background: url( "images/banner-angebot-rot.svg" ) no-repeat left top / contain !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	overflow: visible;
	transform: none !important;
	pointer-events: none;
}

/* Kategorie-/Shop-Uebersicht (Grid): .onsale-Basiswerte oben treffen bereits
   diesen Fall (Grid nutzt .products-grid > ... > .product-block), explizit
   nochmal benannt fuer Klarheit/Wartbarkeit. */
.products-grid .onsale,
.row-products .onsale {
	top: -8% !important;
	left: -4% !important;
}

/* Hauptfoto auf der Produktseite selbst (.product-info ist NUR dort, nicht im
   Loop/Grid und nicht in Karussells). */
.product-info .onsale {
	top: -3% !important;
	left: -0.5% !important;
}

/* "Aehnliche Produkte"/"Weitere Artikel"-Karussells (Owl-Carousel-Widgets) -
   kleinere Bilder, daher eigene Groesse/Position. */
.owl-carousel .onsale,
.product-carousel-item .onsale {
	top: 92.0634921% !important;
	left: -1.852% !important;
	width: 25.214% !important;
	aspect-ratio: 209 / 78;
	height: auto !important;
}

/* "Aehnliche Produkte"/"Auch beliebt..."-Widgets (Owl-Carousel): Redesign 1. Pass -
   moderne Karten statt der alten flachen/randlosen Optik, Ueberschrift in Good Times
   (wie der Seitentitel in der Breadcrumb-Leiste) statt Standard-Montserrat. */
.products-collection h3.widget-title,
.products-collection h2 {
	font-family: 'Good Times', sans-serif !important;
	font-size: 32px !important;
	font-weight: 900 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #1a1d20 !important;
	text-align: center;
	margin: 0 0 28px !important;
	position: relative;
}
.products-collection h3.widget-title span {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
.products-collection h3.widget-title:after,
.products-collection h2:after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: #07737a;
	margin: 14px auto 0;
	border-radius: 2px;
}

.product-carousel-item {
	padding: 6px 10px;
	box-sizing: border-box;
}
.product-carousel-item .product-block {
	background: #fff;
	border: 1px solid #e2e5e8;
	border-radius: 10px;
	/* overflow bewusst NICHT hidden: das "Angebot!"-Badge darf ueber den Kartenrand
	   hinausragen (siehe figure.image/a unten fuer das eigentliche Bild-Clipping). */
	overflow: visible;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.product-carousel-item .product-block:hover {
	box-shadow: 0 10px 24px rgba(26, 29, 32, 0.1);
	border-color: #d7dbdf;
	transform: translateY(-3px);
}
.product-carousel-item .product-block figure.image {
	margin: 0;
	/* visible statt hidden: das "Angebot!"-Badge soll unten zur Haelfte auf dem
	   Bild und zur Haelfte auf der Caption-Flaeche sitzen - .product-block selbst
	   schneidet die abgerundeten Ecken der Karte weiterhin sauber ab. */
	overflow: visible;
	background: #f7f8f9;
	position: relative;
	height: 0 !important;
	padding-top: 100% !important;
}
.product-carousel-item .product-block figure.image a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 9px 9px 0 0;
}
.product-carousel-item .product-block figure.image img {
	display: block;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain;
	transform: scale(1.05);
	transition: transform .35s ease;
}
.product-carousel-item .product-block:hover figure.image img {
	transform: scale(1.11);
}
.product-carousel-item .product-block .caption {
	padding: 16px 18px 20px;
}
.product-carousel-item .product-block .name {
	margin: 0 0 8px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	/* Feste Hoehe (2 Zeilen, laengere Titel werden abgeschnitten): ohne das
	   ragten 3-zeilige Titel (z.B. "ASA-X Fiber20 Anthrazitgrau") die Karte
	   sichtbar hoeher als die Nachbarkarten in derselben Reihe. */
	height: calc(1.35em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-carousel-item .product-block .name a {
	color: #1a1d20;
	text-decoration: none;
	transition: color .15s ease;
}
.product-carousel-item .product-block .name a:hover {
	color: #07737a;
}
.product-carousel-item .product-block .rating {
	margin-bottom: 8px;
}
.product-carousel-item .product-block .price {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: #07737a;
}

/* Karussell-Pfeile: dezente runde Buttons statt der alten kantigen Standard-Optik.
   Basistheme positioniert .carousel-control absolut/vertikal zentriert relativ zum
   naechsten position:relative-Vorfahren - das war bisher versehentlich der GESAMTE
   Widget-Container (inkl. Ueberschrift), wodurch die Pfeile weit unterhalb der
   Bilder landeten. Hier wird .widget-content selbst zum Bezugsrahmen gemacht, damit
   die Pfeile exakt auf Hoehe der Produktkarten-Reihe zentriert sind, und die Pfeile
   sind (auf Wunsch) permanent sichtbar statt nur bei Hover. Selector deckt sowohl
   related.php (mit .background-Wrapper) als auch up-sells.php/cross-sells.php (ohne)
   ab, analog zum Ueberschriften-Fix oben. */
.products-collection .widget-content {
	position: relative;
	/* Seitliche Reserve fuer die Pfeile: die Kartenreihe fuellte vorher die
	   gesamte Breite bis zum Rand, wodurch die absolut positionierten Pfeile
	   (siehe .carousel-control unten) auf der ersten/letzten Karte lagen und
	   Titeltext verdeckten. Hier wird die Reihe eingerueckt und die Pfeile
	   sitzen in der so freigewordenen Randspalte, ausserhalb jeder Karte. */
	padding: 0 44px;
	box-sizing: border-box;
}
.products-collection .carousel-controls {
	opacity: 1 !important;
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
.products-collection .carousel-controls .carousel-control {
	pointer-events: auto;
	opacity: 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	line-height: normal !important;
	font-size: 16px !important;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	border: none;
	border-radius: 50%;
	box-shadow: 0 6px 18px rgba(26, 29, 32, 0.14);
	color: #1a1d20;
	top: 50% !important;
	margin-top: -22px !important;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.products-collection .carousel-controls .carousel-control.left {
	left: 0 !important;
	right: auto !important;
}
.products-collection .carousel-controls .carousel-control.right {
	right: 0 !important;
	left: auto !important;
}
.products-collection .carousel-controls .carousel-control:hover {
	background: #07737a;
	color: #fff;
	box-shadow: 0 8px 22px rgba(7, 115, 122, 0.35);
	transform: scale(1.08);
}
.products-collection .carousel-controls .carousel-control:active {
	transform: scale(0.96);
}
.products-collection .carousel-controls .carousel-control .fa {
	font-size: 15px;
	transition: transform .2s ease;
}
.products-collection .carousel-controls .carousel-control.left .fa {
	margin-right: 1px;
}
.products-collection .carousel-controls .carousel-control.right .fa {
	margin-left: 1px;
}

/* Bullet-/Punkt-Indikatoren (owl.carousel.js rendert .owl-pagination > .owl-page
   automatisch, wenn data-pagination="true" gesetzt ist - siehe related.php,
   up-sells.php, cross-sells.php). */
/* Basistheme blendet .owl-controls (Wrapper um .owl-pagination) generell per
   "display:none !important" aus (css/style.css, .owl-carousel-play .owl-controls) -
   das muss hier gezielt wieder eingeblendet werden, sonst bleiben die Bullets
   trotz aktivierter data-pagination unsichtbar. */
.products-collection .owl-controls {
	display: block !important;
}
.products-collection .owl-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
}
.products-collection .owl-pagination .owl-page {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d7dbdf;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.products-collection .owl-pagination .owl-page span {
	display: none;
}
.products-collection .owl-pagination .owl-page:hover {
	background: #a7acb1;
}
.products-collection .owl-pagination .owl-page.active {
	/* Basistheme (css/style.css: .owl-controls .owl-page.active) verschiebt den
	   aktiven Punkt per position:relative;top:4px - dadurch "schielten" die Punkte,
	   der aktive stand sichtbar tiefer als der Rest. Hier zurueckgesetzt. */
	top: 0 !important;
	background: #07737a;
	transform: scale(1.25);
}

/* "Artikel pro Seite"-Dropdown (siehe functions.php: cr3d_woocommerce_per_page_dropdown)
   direkt neben der bereits vorhandenen Sortier-Dropdown (.woocommerce-ordering) rechts
   ueber dem Grid - beide floaten rechts, hier nur Abstand zwischen ihnen. */
.products-top-wrap .cr3d-per-page-ordering {
	margin-left: 10px;
}
.rtl .products-top-wrap .cr3d-per-page-ordering {
	margin-left: 0;
	margin-right: 10px;
}
.cr3d-per-page-select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	box-sizing: border-box;
	height: 40px !important;
	padding: 0 32px 0 14px !important;
	border: 1px solid #e2e5e8 !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2307737a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #1a1d20;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.rtl .cr3d-per-page-select {
	padding: 0 14px 0 32px !important;
	background-position: left 12px center !important;
}
.cr3d-per-page-select:hover {
	border-color: #07737a !important;
}
.cr3d-per-page-select:focus {
	outline: none !important;
	border-color: #07737a !important;
	box-shadow: 0 0 0 3px rgba(7, 115, 122, 0.15) !important;
}

/* Lupen-Icon oben rechts (Shop-/Kategorie-Uebersicht, siehe functions.php:
   cr3d_woocommerce_top_search_toggle()) ersetzt die Produktsuche im Sidebar-Widget auf
   diesen Seiten - Klick faehrt das Suchfeld nach links aus (Interaktion in
   shop-global.js). Floatet wie die Sortier-/Pro-Seite-Dropdowns rechts, DOM-Position
   nach der Pro-Seite-Dropdown -> steht optisch links davon. */
.products-top-wrap .cr3d-top-search {
	position: relative;
	float: right;
	margin-top: 10px;
	margin-right: 10px;
}
.rtl .products-top-wrap .cr3d-top-search {
	margin-right: 0;
	margin-left: 10px;
}
.cr3d-top-search-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #07737a;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(7, 115, 122, 0.25);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cr3d-top-search-toggle:hover {
	background: #08878f;
	box-shadow: 0 4px 12px rgba(7, 115, 122, 0.35);
}
.cr3d-top-search.is-open .cr3d-top-search-toggle {
	background: #065c62;
	transform: scale(0.96);
}
/* Panel rechtsbuendig am Icon verankert (right: 0), waechst per Breiten-Transition nach
   links aus - width:0 + overflow:hidden statt display:none, damit die Transition greift. */
.cr3d-top-search-panel {
	position: absolute;
	top: 0;
	right: 48px;
	width: 0;
	height: 40px;
	overflow: hidden;
	opacity: 0;
	transition: width .3s ease, opacity .2s ease;
}
.rtl .cr3d-top-search-panel {
	right: auto;
	left: 48px;
}
.cr3d-top-search.is-open .cr3d-top-search-panel {
	width: 240px;
	opacity: 1;
}
/* FiboSearch-Formular (siehe functions.php: cr3d_woocommerce_top_search_toggle(),
   nutzt \DgoraWcas\Shortcode::getForm() statt des einfachen WC-Kernformulars) an die
   240px-Panelbreite und 40px-Hoehe des Icon-Buttons angleichen. Plugin-eigene CSS-
   Regeln sind teils recht spezifisch/mit !important, daher hier ebenfalls !important
   wo noetig, um innerhalb des schmalen Panels sicher zu greifen. */
.cr3d-top-search-panel .dgwt-wcas-search-wrapp {
	width: 240px !important;
}
.cr3d-top-search-panel .dgwt-wcas-sf-wrapp {
	display: flex;
	align-items: center;
	width: 240px;
	height: 40px;
}
.cr3d-top-search-panel .dgwt-wcas-search-input {
	box-sizing: border-box !important;
	width: 100% !important;
	height: 40px !important;
	padding: 0 14px 0 36px !important;
	border: 1px solid #e2e5e8 !important;
	border-radius: 20px !important;
	font-family: 'Montserrat', sans-serif !important;
	font-size: 13px !important;
	color: #1a1d20 !important;
	background: #fff !important;
}
.cr3d-top-search-panel .dgwt-wcas-search-input:focus {
	outline: none;
	border-color: #07737a !important;
	box-shadow: 0 0 0 3px rgba(7, 115, 122, 0.15);
}
.cr3d-top-search-panel .dgwt-wcas-ico-magnifier {
	left: 12px !important;
	right: auto !important;
	color: #07737a !important;
}
.cr3d-top-search-panel .dgwt-wcas-ico-magnifier path {
	fill: #07737a !important;
}
.cr3d-top-search-panel .dgwt-wcas-preloader {
	right: 12px !important;
}

/* Bisherige Produktsuche im Sidebar-Widget (tatsaechlich ein Custom-HTML-Widget mit dem
   FiboSearch/dgwt-wcas-Suchfeld, nicht das WooCommerce-Kernwidget) nur auf Shop-/
   Kategorie-Uebersichten ausblenden (dort jetzt durch das Lupen-Icon oben ersetzt) - auf
   anderen Seiten mit demselben Widget (falls vorhanden) unveraendert sichtbar lassen. */
.tax-product_cat .sidebar .widget:has(.dgwt-wcas-search-wrapp),
.tax-product_tag .sidebar .widget:has(.dgwt-wcas-search-wrapp),
.post-type-archive-product .sidebar .widget:has(.dgwt-wcas-search-wrapp) {
	display: none;
}

/* Kategorie-/Shop-Grid (.products-grid, im Unterschied zu den Karussells oben): Bildflaeche
   pro Karte einheitlich quadratisch (feste Breite/Hoehe relativ zur Spalte, kein Cropping)
   mit transparentem statt grauem Hintergrund, Bild komplett eingepasst (object-fit: contain)
   und mittig zentriert - damit Titel/Preis unabhaengig vom Bildformat (Hoch-/Querformat/
   quadratisch) immer auf derselben Hoehe stehen. */
.products-grid .product-block figure.image {
	margin: 0 0 15px;
	/* visible statt hidden: das "Angebot!"-Badge (.onsale, siehe oben) ragt bewusst
	   ueber die Bildkante hinaus - geclippt wird stattdessen im Bild-Link (a) selbst. */
	overflow: visible;
	background: transparent;
	position: relative;
	height: 0 !important;
	padding-top: 100% !important;
}
.products-grid .product-block figure.image a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.products-grid .product-block figure.image img {
	display: block;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%);
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: contain;
	object-position: center center;
}

/* Mobile Topbar (< 992px, topbar-mobile.php): Such-/Warenkorb-Icon oeffnen ihr Panel im
   Theme per reinem CSS ":hover" - auf Touch-Geraeten gibt es das nicht zuverlaessig
   (siehe shop-global.js, Klick-Toggle "cr3d-active-open"). Hier dieselbe Sichtbarkeit
   wie ":hover" auch bei gesetzter Klasse erzwingen. */
.topbar-mobile .active-mobile.cr3d-active-open {
	background-color: rgba(0, 0, 0, .15);
}
.topbar-mobile .active-mobile.cr3d-active-open .active-content {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	left: auto !important;
	right: 0 !important;
}
/* Auf Touch-Geraeten bleibt ":hover" nach dem Tap haengen - beim zweiten Klick (Panel
   zuklappen, "cr3d-active-open" entfernt) griff dann kurzzeitig wieder die alte
   Basistheme-Regel ".active-mobile:hover .active-content { left:0; right:auto }"
   (siehe css/style.css), wodurch das Panel sichtbar auf die linke, meist ausserhalb
   des Viewports liegende Seite sprang. Die ":hover"-Positionierung hier fuer die
   Topbar komplett deaktivieren - das JS (setPanelOpen in shop-global.js) steuert
   Sichtbarkeit/Position bereits vollstaendig ueber die Klasse + Inline-Styles. */
.topbar-mobile .active-mobile:hover .active-content {
	left: -10000px !important;
	right: auto !important;
}
.topbar-mobile .active-mobile.cr3d-active-open:hover .active-content {
	left: auto !important;
	right: 0 !important;
}

/* Mobiler Such-Button (topbar-mobile.php, ".active-mobile.search-popup"): Basistheme
   setzt fuer ALLE ".active-mobile"-Buttons per ":hover{background-color:#3ccc81
   !important}" (css/style.css) ein knalliges Mintgruen - auf Touch-Geraeten bleibt
   der ":hover"-Zustand nach dem Tap haengen, siehe Screenshot/Nutzer-Feedback. Hier
   mit hoeherer Spezifitaet + eigenem "!important" durch die Site-Teal-Farbe ersetzt
   und der Button zu einem klar erkennbaren, hellen Quadrat auf dem teal Topbar-
   Hintergrund umgestaltet (angelehnt an ".cr3d-top-search-toggle" auf den
   Shop-Seiten, hier aber hell statt teal, da der Topbar-Hintergrund selbst schon
   teal ist). */
.topbar-mobile .active-mobile.search-popup {
	background-color: rgba(255, 255, 255, .14) !important;
	border-radius: 10px;
	transition: background-color .15s ease;
}
.topbar-mobile .active-mobile.search-popup:hover,
.topbar-mobile .active-mobile.search-popup.cr3d-active-open {
	background-color: #fff !important;
}
.topbar-mobile .active-mobile.search-popup .fa {
	color: #fff;
	transition: color .15s ease;
}
.topbar-mobile .active-mobile.search-popup:hover .fa,
.topbar-mobile .active-mobile.search-popup.cr3d-active-open .fa {
	color: #07737a;
}

/* Aufklapp-Panel des mobilen Such-Buttons (enthaelt das FiboSearch-Formular, siehe
   workspace_fnc_categories_searchform()) - statt des Basistheme-Cremetons (#f8f6f0)
   eine cleane weisse Karte mit Schatten/Radius, konsistent zu den anderen Panels
   (".cr3d-top-search-panel", ".dgwt-wcas-suggestions-wrapp"). */
.topbar-mobile .active-mobile.search-popup .active-content {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	padding: 16px;
	min-width: 260px;
	margin-top: 8px;
}
.topbar-mobile .active-mobile.search-popup .active-content .dgwt-wcas-search-wrapp {
	width: 100% !important;
}
.topbar-mobile .active-mobile.search-popup .active-content .dgwt-wcas-search-input {
	font-family: 'Montserrat', sans-serif !important;
	background: #fff !important;
	border: 1px solid #e2e5e8 !important;
	border-radius: 20px !important;
	padding: 10px 40px 10px 16px !important;
	font-size: 14px !important;
}
.topbar-mobile .active-mobile.search-popup .active-content .dgwt-wcas-search-input:focus {
	border-color: #07737a !important;
	box-shadow: 0 0 0 3px rgba(7, 115, 122, .15) !important;
	outline: none;
}
.topbar-mobile .active-mobile.search-popup .active-content .dgwt-wcas-search-submit {
	left: auto !important;
	right: 10px !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
}
.topbar-mobile .active-mobile.search-popup .active-content .dgwt-wcas-ico-magnifier path {
	fill: #07737a !important;
}

/* ==========================================================================
   CR-3D Mobile Kategorie-Schublade (<1000px): die Kategorie-/Filter-Sidebar wird zum
   von links einfahrenden Off-Canvas-Panel statt Platz vor den Produkten wegzunehmen -
   Toggle-Button + Overlay-Markup kommt aus cr3d_woocommerce_category_toggle() in
   functions.php, Aufklapp-Verhalten aus shop-global.js. Die Sidebar-Wrapper-Zelle
   (Geschwister von "#main-content" in woocommerce.php/.row) wird per :has() erkannt,
   ohne sidebar.php selbst anfassen zu muessen. */
.cr3d-categories-toggle {
	display: none;
}
.cr3d-categories-overlay {
	display: none;
}
@media (max-width: 999.98px) {
	/* Linker Rand von Toolbar + Produkt-Grid: Basistheme-Standard (15px) wirkt auf
	   schmalen Breiten (Sidebar als Off-Canvas-Panel ausgeblendet) zu knapp - hier auf
	   27px vergroessert. Betrifft "#main-content" direkt, da sowohl ".products-top-wrap"
	   als auch das Produkt-Grid ihren linken Abstand von dessen padding-left erben. */
	#main-content {
		padding-left: 27px;
	}
	/* Kategorien-Button steht (Prioritaet 20) VOR der Pro-Seite-Dropdown/Such-Icon
	   (Prioritaet 21/22) im DOM, die beide "float:right" nutzen - ein normaler Block-
	   Button wuerde dadurch in eine eigene Zeile umbrechen statt vertikal mit ihnen
	   auf einer Hoehe zu sitzen. ".products-top-wrap" hier zum Flex-Container, dann
	   ignorieren die Kinder "float" automatisch und werden per align-items zentriert. */
	.products-top-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
	}
	/* ".products-top-wrap" umschliesst strukturell nicht nur die Toolbar-Buttons
	   (Kategorien/Suche/Pro-Seite), sondern auch das komplette Produkt-Grid darunter
	   (".woocommerce" ist ein direktes Kind, kein Geschwister-Element) - als Flex-Item
	   wurde das Grid dadurch neben statt unter die Buttons gequetscht (riesiger
	   Abstand zum linken Rand). Erzwingt eine eigene volle Zeile nach der Toolbar. */
	.products-top-wrap > .woocommerce {
		flex: 1 0 100%;
		order: 99;
	}
	.cr3d-categories-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 16px;
		margin-top: 10px;
		margin-right: 8px;
		border: none;
		border-radius: 20px;
		background: #07737a;
		color: #fff;
		font-family: 'Montserrat', sans-serif;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		transition: background .15s ease;
	}
	.cr3d-categories-toggle:hover,
	.cr3d-categories-toggle:focus {
		background: #055a5f;
	}
	.cr3d-categories-toggle .fa {
		font-size: 14px;
	}

	#main-container .row > div:has(> aside.sidebar) {
		position: fixed;
		top: 0;
		left: 0;
		width: 300px;
		max-width: 84vw;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		background: #fff;
		z-index: 10050;
		float: none;
		padding: 24px 18px 60px;
		box-shadow: 4px 0 30px rgba(0, 0, 0, .2);
		transform: translateX(-100%);
		transition: transform .3s ease;
	}
	.rtl #main-container .row > div:has(> aside.sidebar) {
		left: auto;
		right: 0;
		box-shadow: -4px 0 30px rgba(0, 0, 0, .2);
		transform: translateX(100%);
	}
	body.cr3d-categories-open #main-container .row > div:has(> aside.sidebar) {
		transform: translateX(0);
	}

	.cr3d-categories-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(26, 29, 32, .5);
		z-index: 10040;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility 0s linear .3s;
	}
	body.cr3d-categories-open .cr3d-categories-overlay {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s ease;
	}
	body.cr3d-categories-open {
		overflow: hidden;
	}
}