/* ==========================================================================
   TB Side-Slide Menu – Mobile Pro-Shop Polish
   --------------------------------------------------------------------------
   BeTheme rendert das Mobile-Burger-Menu als `#Side_slide.dark` mit dunklem
   Hintergrund (rgb 25 25 25). Das passt nicht zum hellen Brand-Look des
   restlichen Shops.

   Pro-Shop-Patterns (Apple, Allbirds, Zalando, …):
   - Weißer Hintergrund, dunkler Text
   - Größere Touch-Targets (16 px font, 16 px Padding vertikal)
   - Item-Trennlinien als dünne hellgraue Borders (statt dunkle Schatten)
   - Submenu-Indicator als dezenter Chevron `›` (statt klobiges `+`)
   - Social-Icons als kleine helle Kreise am unteren Rand
   - Hover/Active-States in der Markenblau-Tönung

   Site-wide geladen (siehe class-menu-styling.php) — wirkt überall wo
   das Side-Slide-Menu erscheint, nicht nur Homepage.
   ========================================================================== */

@media (max-width: 767px) {

	/* Container — überschreibt BeTheme's `.dark`-Variante mit höherer
	   Spezifität durch den `body`-Prefix.

	   ⚠️  Width NICHT ändern: BeTheme nutzt `left: -250px` zum Verstecken
	       im closed-state. Eine breitere Width ohne `left`-Anpassung würde
	       das Menu links ins Viewport ragen lassen und den Hamburger-Toggle
	       verdecken. Daher Geometrie unangetastet, nur Style. */
	body #Side_slide.dark,
	body #Side_slide {
		background: #ffffff !important;
		color: #0f1216 !important;
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.12) !important;
		overflow-y: auto !important;
	}

	/* Close-X */
	#Side_slide .close-wrapper {
		padding: 8px 12px !important;
		border-bottom: 1px solid #f0f1f3 !important;
	}

	#Side_slide .close,
	#Side_slide .close i {
		color: #0f1216 !important;
	}

	/* Extras-Zeile (enthielt Search/Wishlist/Cart-Icons) komplett raus —
	   Search ist im Page-Builder versteckt, Wishlist/Cart sind hier sowieso
	   0×0. Die Zeile war damit nur leerer Whitespace mit Border-Bottom. */
	#Side_slide .extras {
		display: none !important;
	}

	/* Menu-Wrapper voll breit */
	#Side_slide .menu_wrapper {
		width: 100% !important;
		padding: 8px 0 !important;
	}

	#Side_slide nav#menu {
		width: 100% !important;
	}

	/* Menu-Items: Touch-friendly, modern */
	#Side_slide ul#menu-main-menu,
	#Side_slide ul.menu {
		width: 100% !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
	}

	#Side_slide ul#menu-main-menu > li,
	#Side_slide ul.menu > li {
		width: 100% !important;
		border-bottom: 1px solid #f3f4f6 !important;
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		background: transparent !important;
	}

	#Side_slide ul#menu-main-menu > li > a,
	#Side_slide ul.menu > li > a {
		flex: 1 !important;
		padding: 16px 20px !important;
		color: #0f1216 !important;
		font-size: 16px !important;
		font-weight: 500 !important;
		text-decoration: none !important;
		height: auto !important;
		line-height: 1.4 !important;
		background: transparent !important;
	}

	#Side_slide ul#menu-main-menu > li:hover > a,
	#Side_slide ul#menu-main-menu > li.current-menu-item > a {
		color: #0089f7 !important;
	}

	/* Submenu-Toggle: war BeTheme `+` → eleganterer Chevron */
	#Side_slide ul.menu .menu-toggle {
		width: 44px !important;
		height: 44px !important;
		color: #9aa1ad !important;
		background: transparent !important;
		margin-right: 6px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
	}

	#Side_slide ul.menu .menu-toggle::before {
		content: "›" !important;
		font-size: 28px !important;
		line-height: 1 !important;
		font-weight: 300 !important;
		transition: transform .2s ease;
	}

	/* BeTheme's eigenen `+`/`-` Icons ausblenden */
	#Side_slide ul.menu .menu-toggle::after,
	#Side_slide ul.menu .menu-toggle i {
		display: none !important;
	}

	/* Bei geöffnetem Submenu Chevron nach unten drehen */
	#Side_slide ul.menu .menu-toggle.active::before {
		transform: rotate(90deg);
	}

	/* Submenus (Megamenu) ===========================================
	   3 Hierarchie-Level für die Mobile-Accordion-Optik:
	   - Level 1 (Produkte)         — Top-Items, oben gestylt
	   - Level 2 (Bekleidung, …)    — bold dark, leicht eingerückt
	   - Level 3 (T-Shirts, Poloshirts, …) — kleiner, grau, mehr indent

	   Hintergrund leicht abgesetzt (`#fafbfc`) damit Untermenüs als
	   "drawer" erkennbar sind, ohne dunkel zu wirken. */

	/* WICHTIG: kein `display: block` setzen — BeTheme togglet die Sichtbarkeit
	   via `.hover`-Klasse aufm parent <li> (default `display: none`, beim
	   Klick fügt JS `.hover` hinzu → submenu wird sichtbar). Würden wir hier
	   `display: block !important` schreiben, wäre das Submenu permanent offen. */
	#Side_slide ul.sub-menu,
	#Side_slide ul.mfn-megamenu {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #fafbfc !important;
		border-top: 1px solid #f0f1f3 !important;
		position: static !important;
		left: auto !important;
		top: auto !important;
	}

	/* Level-2 LIs: Untergruppen (Bekleidung, Accessoires, …) */
	#Side_slide ul.sub-menu > li {
		flex-basis: 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		border-bottom: 1px solid #f0f1f3 !important;
		background: transparent !important;
	}

	#Side_slide ul.sub-menu > li:last-child {
		border-bottom: none !important;
	}

	#Side_slide ul.sub-menu > li > a {
		flex: 1 !important;
		padding: 12px 20px 12px 32px !important;
		color: #0f1216 !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.4 !important;
		background: transparent !important;
		text-decoration: none !important;
	}

	/* Level-3: verschachtelte Sub-Sub-Menus (T-Shirts, Poloshirts, …) */
	#Side_slide ul.sub-menu ul.sub-menu,
	#Side_slide ul.mfn-megamenu ul.sub-menu {
		background: transparent !important;
		border-top: none !important;
	}

	#Side_slide ul.sub-menu ul.sub-menu > li {
		border-bottom: 1px solid #f3f4f6 !important;
	}

	#Side_slide ul.sub-menu ul.sub-menu > li > a {
		padding: 10px 20px 10px 44px !important;
		font-size: 13px !important;
		font-weight: 400 !important;
		color: #5a6270 !important;
	}

	#Side_slide ul.sub-menu > li > a:hover,
	#Side_slide ul.sub-menu ul.sub-menu > li > a:hover {
		color: #0089f7 !important;
		background: rgba(0, 137, 247, 0.04) !important;
	}

	/* Submenu-Toggles (Chevron-Buttons) auf Level 2 — etwas kleiner */
	#Side_slide ul.sub-menu .menu-toggle {
		width: 40px !important;
		height: 40px !important;
		color: #9aa1ad !important;
		background: transparent !important;
		margin-right: 4px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
	}

	#Side_slide ul.sub-menu .menu-toggle::before {
		content: "›" !important;
		font-size: 24px !important;
		line-height: 1 !important;
		font-weight: 300 !important;
		transition: transform .2s ease;
	}

	#Side_slide ul.sub-menu .menu-toggle::after,
	#Side_slide ul.sub-menu .menu-toggle i {
		display: none !important;
	}

	#Side_slide ul.sub-menu .menu-toggle.active::before {
		transform: rotate(90deg);
	}

	/* Social-Icons unten — kleine helle Kreise */
	#Side_slide ul.social {
		list-style: none !important;
		display: flex !important;
		gap: 10px !important;
		padding: 18px 20px !important;
		margin: 12px 0 0 !important;
		border-top: 1px solid #f0f1f3 !important;
		background: transparent !important;
		width: 100% !important;
		box-sizing: border-box !important;
		justify-content: flex-start !important;
	}

	#Side_slide ul.social li {
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
	}

	#Side_slide ul.social li a {
		width: 38px !important;
		height: 38px !important;
		border-radius: 50% !important;
		background: #f6f8fb !important;
		color: #5a6270 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		transition: all .15s ease;
	}

	#Side_slide ul.social li a:hover,
	#Side_slide ul.social li a:hover i {
		background: rgba(0, 137, 247, 0.10) !important;
		color: #0089f7 !important;
	}

	#Side_slide ul.social li a i {
		color: inherit !important;
	}
}