/* 30-header.css
 * Generated from the active LibertyRoots Code Snippets export.
 * Each block keeps the original snippet ID for safe comparison and future cleanup.
 */

/* ============================================================
 * Original Snippet ID 217: Enfold/Wordpress • Header Desktop (Überall General) • CSS Snippet
 * Desktop Menü und Header (3D Design und Newmorphism etc.) für: - Header Schatten - Mega Menü 3D - Normales Menü - SVG-Logo Anpassung überall - Menü Border-Button - Header Button Farbe (Mobil Menü, Wahrenkorb Symbol etc.) - Outline Menü Button Farbe (Desktop Menü) - Warenkorb überall - Warenkorbsymbol zur sicherheit in den vordergrund - Produkt Filter auf Shopseite dauerhaft als frei schwebendes Element (Desktop)
 * ============================================================ */
/* Desktop Menü und Header (3D Design und Newmorphism etc.) */
	
	/* Header Schatten */
	#header_meta {
	    		box-shadow: var(--fullwidth-element-3d);
		-webkit-box-shadow: var(--fullwidth-element-3d);
		   -moz-box-shadow: var(--fullwidth-element-3d);
	}
	
	#header_main {
	    		box-shadow: var(--fullwidth-element-3d-frei);
		-webkit-box-shadow: var(--fullwidth-element-3d-frei);
		   -moz-box-shadow: var(--fullwidth-element-3d-frei);
	}
	
	
	/* Mega Menü 3D */
	.menu-item > div:nth-child(2) > ul:nth-child(1) {
	    		box-shadow: var(--element-3d-frei) !important;
		-webkit-box-shadow: var(--element-3d-frei) !important;
		   -moz-box-shadow: var(--element-3d-frei) !important;
			
		border-radius: 0 0 1em 1em;
		background: linear-gradient( 
			rgba(0, 0, 0, 0.2) 0%, 
			rgba(0, 0, 0, 0.1) 3px, 
			rgba(0, 0, 0, 0) 6px);
	}
	
	#header.av_minimal_header .avia_mega_div {
	    		box-shadow: var(--element-3d-frei) !important;
		-webkit-box-shadow: var(--element-3d-frei) !important;
		   -moz-box-shadow: var(--element-3d-frei) !important;
			
		border-radius: 0 0 1em 1em;
		border-top-style: none;
	}
	
	
	/* Normales Menü */
	#menu-item-22097 > ul:nth-child(2) {
	    		box-shadow: var(--element-3d-frei) !important;
		-webkit-box-shadow: var(--element-3d-frei) !important;
		   -moz-box-shadow: var(--element-3d-frei) !important;
		
 		border-radius: 0 0 1em 1em;
	}
	
	#menu-item-22097 > ul:nth-child(2) > li:nth-child(n) > a:nth-child(1) {
 		border: none;
		background: transparent;
	}
	
	#menu-item-14610 > ul:nth-child(2) > li:nth-child(n) > a:nth-child(1) {
		background: transparent;
 		border: none;
	}
	
	#menu-item-14610 > ul:nth-child(2) {
		border-radius: 0 0 1em 1em;
		
	    		box-shadow: var(--element-3d-frei) !important;
		-webkit-box-shadow: var(--element-3d-frei) !important;
		   -moz-box-shadow: var(--element-3d-frei) !important;
	}
	
	#menu-item-22097 > ul:nth-child(2) > li:nth-child(1) > a:nth-child(1) {
		background: linear-gradient( 
			rgba(0, 0, 0, 0.2) 0%, 
			rgba(0, 0, 0, 0.1) 3px, 
			rgba(0, 0, 0, 0) 6px);
	}
	#menu-item-14610 > ul:nth-child(2) > li:nth-child(1) > a:nth-child(1) {
		background: linear-gradient( 
			rgba(0, 0, 0, 0.2) 0%, 
			rgba(0, 0, 0, 0.1) 3px, 
			rgba(0, 0, 0, 0) 6px);
	}
	
	
	/* Mein Konto Menü Desktop */
	#top .sub_menu li ul {
	    		box-shadow: var(--element-3d-frei) !important;
		-webkit-box-shadow: var(--element-3d-frei) !important;
		   -moz-box-shadow: var(--element-3d-frei) !important;
		
		border: none !important;
    	border-radius: 0 0 1em 1em !important;
	}
	
	.header_color .sub_menu li ul a {
    	background-color: transparent !important;
		border: none !important;
	}
	
	.header_color .sub_menu ul li {
   		background-color: transparent !important;
		border: none !important;
	}
	
	.sub_menu>ul>li>a {
    	padding: 9px 0;
	}
	

	/* SVG-Logo Anpassung überall */
	body.wp-night-mode-on #path1619-3-5,
	body.wp-night-mode-on #path375-0 {
		fill: var(--black) !important;
	}
	
	body.wp-night-mode-on #path1615-2-7,
	body.wp-night-mode-on #path359-1 {
		fill: var(--gelb-hell) !important;
	}
	
	#layer2 {
		opacity: 0;
	}
	
	.logo{
		padding: 0; width: 200px;
	}
	
@media only screen and (min-width: 768px) {
	.custom-class-logo svg,
	.custom-class-logo .avia-img-svg-logo > a > img,
	.custom-class-logo .alternate .avia-img-svg-logo {
		padding: 20px 0;
	}
}
	
	
	/* Menü Border-Button */
	#top .av-menu-button > a .avia-menu-text {
		padding: 12px;
		border: none;
		border-radius: var(--radius-button);
		transition: var(--uebergang-button);
		
	    		box-shadow: var(--button-3d);
		-webkit-box-shadow: var(--button-3d);
		   -moz-box-shadow: var(--button-3d);
	}
	#top .av-menu-button > a .avia-menu-text:hover {
	    		box-shadow: var(--button-3d-hover);
		-webkit-box-shadow: var(--button-3d-hover);
		   -moz-box-shadow: var(--button-3d-hover);
	}
	
	
	/* ============================================================
	 * Header Button Farben
	 * Quelle: Original Snippet ID 217.
	 *
	 * Senior-Regel:
	 * Standardzustand = dunkle Buttons.
	 * body.wp-night-mode-on = helle Buttons.
	 *
	 * Wichtig:
	 * Burger und Filter bleiben auf dem ursprünglichen Selector-Niveau.
	 * Der Warenkorb bekommt hier bewusst keinen #top-Präfix, damit
	 * Enfolds body#top die Light-Mode-Regeln nicht überstimmt.
	 * ============================================================ */
	.berocket_ajax_filters_sidebar_toggle,
	#rmp_menu_trigger-21841,
	.cart_dropdown_link {
		background-color: var(--dark-menu-button) !important;
	}

	.berocket_ajax_filters_sidebar_toggle:active,
	.berocket_ajax_filters_sidebar_toggle:hover,
	.berocket_ajax_filters_sidebar_toggle:focus,
	#rmp_menu_trigger-21841:active,
	#rmp_menu_trigger-21841:hover,
	#rmp_menu_trigger-21841:focus,
	.cart_dropdown_link:active,
	.cart_dropdown_link:hover,
	.cart_dropdown_link:focus {
		background-color: var(--dark-menu-button-hover) !important;
	}

	body.wp-night-mode-on .berocket_ajax_filters_sidebar_toggle,
	body.wp-night-mode-on #rmp_menu_trigger-21841,
	body.wp-night-mode-on .cart_dropdown_link {
		background-color: var(--light-menu-button) !important;
	}

	body.wp-night-mode-on .berocket_ajax_filters_sidebar_toggle:active,
	body.wp-night-mode-on .berocket_ajax_filters_sidebar_toggle:hover,
	body.wp-night-mode-on .berocket_ajax_filters_sidebar_toggle:focus,
	body.wp-night-mode-on #rmp_menu_trigger-21841:active,
	body.wp-night-mode-on #rmp_menu_trigger-21841:hover,
	body.wp-night-mode-on #rmp_menu_trigger-21841:focus,
	body.wp-night-mode-on .cart_dropdown_link:active,
	body.wp-night-mode-on .cart_dropdown_link:hover,
	body.wp-night-mode-on .cart_dropdown_link:focus {
		background-color: var(--light-menu-button-hover) !important;
	}

	
	/* Outline Menü Button Farbe (Desktop Menü) */
	#menu-item-22097 > a:nth-child(1) > span:nth-child(2) {
		background-color: var(--dark-menu-button) !important;
	}
	
	#menu-item-22097 > a:nth-child(1) > span:nth-child(2):active, 
	#menu-item-22097 > a:nth-child(1) > span:nth-child(2):hover {
		background-color: var(--dark-menu-button-hover) !important;
	}
	
	body.wp-night-mode-on #menu-item-22097 > a:nth-child(1) > span:nth-child(2) {
		background-color: var(--light-menu-button) !important;
	}
	
	body.wp-night-mode-on #menu-item-22097 > a:nth-child(1) > span:nth-child(2):active, 
	body.wp-night-mode-on #menu-item-22097 > a:nth-child(1) > span:nth-child(2):hover {
		background-color: var(--light-menu-button-hover) !important;
	}
	
	
	/* Warenkorb überall */
	.cart_dropdown {		
		border: none;
		height: 48px;
		line-height: 48px;
		width: 58px;
		margin: -24px -10px 0 0;
	}
	
	.cart_dropdown [data-av_icon]:before {
		margin-left: -10px;
		line-height: 48px;
		margin-bottom: -3px;
		transition: none !important;
	}
	
	
	#top .av-cart-counter {
		margin-left: -5px;
		transition: none !important;
	}
	
	.cart_dropdown_link {		
		border-radius: var(--radius-button);
		transition: var(--uebergang-button);
		
	    		box-shadow: var(--button-3d);
		-webkit-box-shadow: var(--button-3d);
		   -moz-box-shadow: var(--button-3d);
	}
	
	.cart_dropdown {		
		transition: var(--uebergang-button);
	}
	
	.cart_dropdown_link:hover {
		box-shadow: var(--button-3d-hover);
	}
	
	
	/* Warenkorbsymbol zur sicherheit in den vordergrund */
	.responsive #top .cart_dropdown {
		z-index:2
	}
	
	
	/* Produkt Filter auf Shopseite dauerhaft als frei schwebendes Element (Desktop) */
	.custom-class-filter{
		position: fixed;
		top: 135px;
		width: 190px !important;
		z-index: 9999999;
		border-radius: var(--radius-button);
		margin-left: 15px;
		border: none !important;
		transition: var(--uebergang-button);
		
			    box-shadow: var(--button-3d-frei);
		-webkit-box-shadow: var(--button-3d-frei);
		   -moz-box-shadow: var(--button-3d-frei);
	}
	
	.custom-class-filter:hover{
				box-shadow: var(--button-3d-frei-hover)!important;
		-webkit-box-shadow: var(--button-3d-frei-hover)!important;
		   -moz-box-shadow: var(--button-3d-frei-hover)!important;
	}
	
	.custom-class-filterD{
		width: 100% !important;
		height: 100%;
	}
	
	.custom-class-filterD, .custom-class-filter{
		height: 40px;
	}


/* ============================================================
 * Original Snippet ID 62: Enfold/Wordpress • Header Mobil (an App angelehnt) • CSS Snippet
 * Den Header bzw. die Logoarea am Handy "sticky" an den oberen Bildschirmrand anheften Mobiles Menü und Header (3D Design und Newmorphism etc.) - Header Höhe auf kleineren Bildschirmen anpassen - Mobiles Menü in den Vordergrund Breite festlegen CUSTOM CLASS CSS FÜR HEADER ANIMATION BEIM SCROLLEN - Logo anpassungen - Header Meta ausblenden - Logo als Button darstellen - Mobiles Menü dauerhaft als frei schwebendes Element - Wahrenkorb dauerhaft als frei schwebendes Element - Wahrenkorb Symbol - Prod
 * ============================================================ */
/* Mobiles Menü und Header (3D Design und Newmorphism etc.) */
	
	/* Header Höhe auf kleineren Bildschirmen anpassen */
@media only screen and (max-width: 989px) and (min-width: 768px) {
	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu .av-main-nav > li > a,
	.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
    	height: 80px !important;
		line-height: 80px !important;
	}
	
	.single-product .template-shop {
		padding-top: 30px;
	}
	
	.title_container {
		position: relative;
		padding-top: 5px;
	}
	
	#top .title_container .container { 
		padding-top: 10px;
    	padding-bottom: 10px;
    	min-height: 51px;
    	padding-bottom: 0px;
	}
}
	
	
	/* Mobiles Menü in den Vordergrund Breite festlegen */
	.rmp-container {
		z-index: 100001;
	}
	
	button.rmp_menu_trigger {
		z-index: 1000002;
	}
	
	#rmp_menu_trigger-21841 {
		right: 50px;
	 	border-radius: var(--radius-button);
		transition: var(--uebergang-button);
		
	    		box-shadow: var(--button-3d);
		-webkit-box-shadow: var(--button-3d);
		   -moz-box-shadow: var(--button-3d);
	}
	
	#rmp_menu_trigger-21841:hover {
	    		box-shadow: var(--button-3d-hover);
		-webkit-box-shadow: var(--button-3d-hover);
		   -moz-box-shadow: var(--button-3d-hover);
	}
	
	
	
/* CUSTOM CLASS CSS FÜR HEADER ANIMATION BEIM SCROLLEN */
	
	/* Logo anpassungen */
	.custom-class-logo{
		padding: 22px 0;
		left: -13px !important;
		width: 100px;
	}

	
@media only screen and (max-width: 767px) {
	
	/* Header Meta ausblenden */
	#header_meta {
		display: none;
	}
	
	
	/* Logo als Button darstellen */
	body.wp-night-mode-on .custom-class-logo{
		background-color: var(--light-menu-button)
	}
	
	body.wp-night-mode-on .custom-class-logo:hover{
		background-color: var(--light-menu-button-hover)
	}
	
	#header_main {
		height: 80px !important;
	}
	
	.custom-class-logo{
		left: 5px !important;
   		position: fixed !important;
   		padding: 0;
   		max-height: 48px;
		max-width: 68px;
   		background-color: var(--dark-menu-button);
   		top: 17px !important;
   		border-radius: var(--radius-button);
		transition: var(--uebergang-button);

			    box-shadow: var(--button-3d-frei);
		-webkit-box-shadow: var(--button-3d-frei);
		   -moz-box-shadow: var(--button-3d-frei);
	}
	
	.custom-class-logo:hover{
		background-color: var(--dark-menu-button-hover);
		
				box-shadow: var(--button-3d-frei-hover);
		-webkit-box-shadow: var(--button-3d-frei-hover);
		   -moz-box-shadow: var(--button-3d-frei-hover);
	}
	
	
	/* Mobiles Menü dauerhaft als frei schwebendes Element */		
	.custom-class-menu{
		transition: var(--uebergang-button) !important;
		right: 60px !important;
		border-radius: var(--radius-button) !important;
		
			    box-shadow: var(--button-3d-frei) !important;
		-webkit-box-shadow: var(--button-3d-frei) !important;
		   -moz-box-shadow: var(--button-3d-frei) !important;
	}
	
	.custom-class-menu:hover{
				box-shadow: var(--button-3d-frei-hover)!important;
		-webkit-box-shadow: var(--button-3d-frei-hover)!important;
		   -moz-box-shadow: var(--button-3d-frei-hover)!important;
	}
	
	
	/* Wahrenkorb dauerhaft als frei schwebendes Element */	
		
	.custom-class-card{
		right: 5px !important;
		line-height: 48px;
		border-radius: var(--radius-button);
		border: none;
		top: 16px !important;
		height: 48px;
		width: 48px !important;
		transition: var(--uebergang-button);
		margin: -23px 0 0 0 !important;
	}
	
	.custom-class-cardK [data-av_icon]:before {
		line-height: 48px;
		margin-left: 0 !important;
		margin-bottom: -3px;
	}
		
	#top .custom-class-cardK .av-cart-counter {
		margin-left: 0;
	}
	
	.custom-class-cardK{
		border-radius: var(--radius-button);
		
			    box-shadow: var(--button-3d-frei) !important;
		-webkit-box-shadow: var(--button-3d-frei) !important;
		   -moz-box-shadow: var(--button-3d-frei) !important;
	}
	
	.custom-class-cardK:hover{
				box-shadow: var(--button-3d-frei-hover)!important;
		-webkit-box-shadow: var(--button-3d-frei-hover)!important;
		   -moz-box-shadow: var(--button-3d-frei-hover)!important;
	}
	
	
	/* Wahrenkorb Symbol */
	.responsive #top .cart_dropdown {
		margin-top: 0 !important;
    	position: fixed;
		top: 16px;
	}
	
	
	/* Produkt Filter dauerhaft als frei schwebendes Element (Mobil) */
	.custom-class-filter :not(a) {
			display: none;
	}
	
	.custom-class-filter{
		position: fixed;
		top: 16px !important;
		z-index: 9999999 !important;
		right: 115px;
		max-width: 130px;
		border: none !important;
		height: 48px !important;
		line-height: 48px !important;
		padding-left: 10px;}
	}

/*
 * Responsive Menu repair for Enfold Avia icons.
 *
 * The Responsive Menu plugin can move Enfold icon elements into the mobile menu
 * while leaving generated Avia CSS behind as visible text and stripping the
 * data-av_icon attributes. The JavaScript in assets/js/header.js copies the
 * original Enfold icon code from the untouched desktop/footer markup back into
 * the mobile menu. These rules then render that original Entypo icon via the
 * same Enfold icon font instead of replacing it with plain Unicode symbols.
 */
.rmp-container .dark-mode-button-mit-icons .dark-mode-icon,
.rmp-container .dark-mode-button-mit-icons .light-mode-icon,
.rmp-container .dark-mode-button-mit-icons-center .dark-mode-icon,
.rmp-container .dark-mode-button-mit-icons-center .light-mode-icon,
.rmp-container .dark-mode-button-mit-icons-sidebar .dark-mode-icon,
.rmp-container .dark-mode-button-mit-icons-sidebar .light-mode-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    height: 20px;
    color: #ffd500;
    border-color: #ffd500;
}

.rmp-container .dark-mode-button-mit-icons .av-icon-char,
.rmp-container .dark-mode-button-mit-icons-center .av-icon-char,
.rmp-container .dark-mode-button-mit-icons-sidebar .av-icon-char {
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
}

.rmp-container .dark-mode-button-mit-icons .av-icon-char::before,
.rmp-container .dark-mode-button-mit-icons-center .av-icon-char::before,
.rmp-container .dark-mode-button-mit-icons-sidebar .av-icon-char::before {
    content: attr(data-av_icon);
    display: block;
    width: 20px;
    height: 20px;
    font-family: "entypo-fontello";
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 20px;
    speak: never;
    color: #ffd500;
    text-align: center;
}

.rmp-container .dark-mode-button-mit-icons br,
.rmp-container .dark-mode-button-mit-icons-center br,
.rmp-container .dark-mode-button-mit-icons-sidebar br {
    display: none;
}

/* ============================================================
 * LibertyRoots v5 hotfix: Responsive Menu tablet alignment
 *
 * Purpose:
 * The original Enfold icons are restored in the mobile menu, but the tablet
 * breakpoint around 768 to 989 px can let the Responsive Menu trigger or the
 * Dark Mode switch inherit plugin/theme spacing that pushes the button down.
 * These rules normalize only the affected mobile menu controls and keep the
 * original Enfold icon rendering from v4.
 * ============================================================ */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    #rmp_menu_trigger-21841,
    button#rmp_menu_trigger-21841,
    .rmp_menu_trigger#rmp_menu_trigger-21841 {
        top: 16px !important;
        right: 50px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 48px !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    #rmp_menu_trigger-21841.custom-class-menu {
        top: 16px !important;
        right: 60px !important;
    }

    .rmp-container .dark-mode-button-mit-icons,
    .rmp-container .dark-mode-button-mit-icons-center,
    .rmp-container .dark-mode-button-mit-icons-sidebar {
        align-items: center !important;
        line-height: 1 !important;
    }

    .rmp-container .wpnm-button {
        margin-top: 2px !important;
        margin-bottom: 0 !important;
    }
}

@media only screen and (max-width: 989px) {
    .rmp-container .dark-mode-button-mit-icons .dark-mode-icon,
    .rmp-container .dark-mode-button-mit-icons .light-mode-icon,
    .rmp-container .dark-mode-button-mit-icons-center .dark-mode-icon,
    .rmp-container .dark-mode-button-mit-icons-center .light-mode-icon,
    .rmp-container .dark-mode-button-mit-icons-sidebar .dark-mode-icon,
    .rmp-container .dark-mode-button-mit-icons-sidebar .light-mode-icon {
        flex: 0 0 20px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .rmp-container .dark-mode-button-mit-icons .av-icon-char,
    .rmp-container .dark-mode-button-mit-icons-center .av-icon-char,
    .rmp-container .dark-mode-button-mit-icons-sidebar .av-icon-char,
    .rmp-container .dark-mode-button-mit-icons .av-icon-char::before,
    .rmp-container .dark-mode-button-mit-icons-center .av-icon-char::before,
    .rmp-container .dark-mode-button-mit-icons-sidebar .av-icon-char::before {
        font-size: 20px !important;
        line-height: 20px !important;
    }
}


/* Desktop scroll logo parity and left alignment.
 * Moved from the former legacy parity layer into the header module.
 * Keeps the normal and scroll-state logo on the same left visual origin.
 */
@media only screen and (min-width: 768px) {
    #top .logo {
        width: 200px !important;
        max-width: 200px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    #top .logo.custom-class-logo {
        width: 200px !important;
        max-width: 200px !important;
        left: -60px !important;
        padding: 0 !important;
        text-align: left !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #top .logo.custom-class-logo a,
    #top .logo.custom-class-logo .avia-img-svg-logo,
    #top .logo.custom-class-logo .avia-img-svg-logo > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 200px !important;
        max-width: 200px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    #top .logo.custom-class-logo svg,
    #top .logo.custom-class-logo img,
    #top .logo.custom-class-logo .avia-img-svg-logo > a > img,
    #top .logo.custom-class-logo .alternate .avia-img-svg-logo {
        width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
        padding: 20px 0 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        transform: translateX(0) !important;
        transform-origin: left center !important;
        object-position: left center !important;
    }
}


/* Header mini cart dropdown parity.
 * Moved from the former legacy parity layer into the header module.
 */
#top .cart_dropdown .dropdown_widget {
    right: 20px !important;
    filter: var(--element-drop-shadow-frei) !important;
}

#top .custom-class-card .dropdown_widget {
    right: 7px !important;
}

#top .cart_dropdown .dropdown_widget .widget_shopping_cart_content,
#top .widget_shopping_cart_content {
    border-style: none !important;
    border-radius: var(--radius-element-klein) !important;
}

#top .woocommerce-mini-cart__buttons {
    padding: 0 !important;
}

#top .woocommerce-mini-cart__buttons a.wc-forward:nth-child(1) {
    padding-top: 15px !important;
    padding-left: 9px !important;
    padding-right: 0 !important;
    width: 46% !important;
    color: #ffffff !important;
}

#top .woocommerce-mini-cart__buttons a.button:nth-child(2) {
    background-color: var(--green) !important;
    padding-top: 15px !important;
    margin-top: 0 !important;
    padding-bottom: 15px !important;
    width: 50% !important;
    color: #fffffe !important;
}

#top .woocommerce-mini-cart__buttons a.button:nth-child(2):hover {
    background-color: var(--green-hover) !important;
}

/* ============================================================
 * Floating mobile header controls final normalization
 * Scope: mobile menu trigger and mini cart button only.
 * ============================================================ */
@media only screen and (max-width: 989px) {
    #rmp_menu_trigger-21841,
    button#rmp_menu_trigger-21841,
    .rmp_menu_trigger#rmp_menu_trigger-21841 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 48px !important;
        border: 0 !important;
        border-radius: var(--radius-button) !important;
        background-clip: padding-box !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        box-shadow: var(--button-3d-frei) !important;
        -webkit-box-shadow: var(--button-3d-frei) !important;
        -moz-box-shadow: var(--button-3d-frei) !important;
        transition: var(--uebergang-button) !important;
    }

    #rmp_menu_trigger-21841:hover,
    #rmp_menu_trigger-21841:focus,
    #rmp_menu_trigger-21841:active {
        box-shadow: var(--button-3d-frei-hover) !important;
        -webkit-box-shadow: var(--button-3d-frei-hover) !important;
        -moz-box-shadow: var(--button-3d-frei-hover) !important;
        outline: none !important;
    }

    #rmp_menu_trigger-21841 *,
    #rmp_menu_trigger-21841 *::before,
    #rmp_menu_trigger-21841 *::after {
        box-sizing: border-box !important;
    }

    #rmp_menu_trigger-21841 .rmp-trigger-box {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, -50%) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        line-height: 1 !important;
    }

    #top .cart_dropdown_link,
    #top .custom-class-cardK,
    #top .custom-class-card,
    .responsive #top .cart_dropdown .dropdown_widget_cart,
    .responsive #top .cart_dropdown {
        border-radius: var(--radius-button) !important;
    }

    #top .cart_dropdown_link {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        line-height: 48px !important;
        padding: 0 !important;
        overflow: visible !important;
        background-clip: padding-box !important;
        box-shadow: var(--button-3d-frei) !important;
        -webkit-box-shadow: var(--button-3d-frei) !important;
        -moz-box-shadow: var(--button-3d-frei) !important;
    }
}



/* ------------------------------------------------------------
 * Responsive Menu trigger icon, final canonical implementation.
 * ------------------------------------------------------------
 * The current plugin markup uses .responsive-menu-pro-inner inside
 * .rmp-trigger-box. This block centers the actual icon in closed and open
 * states without changing the surrounding button surface or cart button.
 */
@media only screen and (max-width: 989px) {
    #rmp_menu_trigger-21841 .rmp-trigger-box {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        display: block !important;
        width: 26px !important;
        min-width: 26px !important;
        max-width: 26px !important;
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, -50%) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        line-height: 1 !important;
        overflow: visible !important;
    }

    #rmp_menu_trigger-21841 .responsive-menu-pro-inner,
    #rmp_menu_trigger-21841 .responsive-menu-pro-inner::before,
    #rmp_menu_trigger-21841 .responsive-menu-pro-inner::after {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        width: 26px !important;
        height: 4px !important;
        border-radius: 999px !important;
        background-color: var(--gelb) !important;
        transform-origin: center center !important;
        opacity: 1 !important;
    }

    #rmp_menu_trigger-21841 .responsive-menu-pro-inner {
        top: 50% !important;
        margin: -2px 0 0 0 !important;
        transform: none !important;
    }

    #rmp_menu_trigger-21841 .responsive-menu-pro-inner::before {
        content: "" !important;
        top: -9px !important;
        transform: none !important;
    }

    #rmp_menu_trigger-21841 .responsive-menu-pro-inner::after {
        content: "" !important;
        top: 9px !important;
        bottom: auto !important;
        transform: none !important;
    }

    #rmp_menu_trigger-21841.is-active .responsive-menu-pro-inner,
    #rmp_menu_trigger-21841.rmp-menu-trigger-active .responsive-menu-pro-inner,
    #rmp_menu_trigger-21841[aria-expanded="true"] .responsive-menu-pro-inner {
        top: 50% !important;
        margin-top: -2px !important;
        transform: rotate(45deg) !important;
        background-color: var(--rot) !important;
    }

    #rmp_menu_trigger-21841.is-active .responsive-menu-pro-inner::before,
    #rmp_menu_trigger-21841.rmp-menu-trigger-active .responsive-menu-pro-inner::before,
    #rmp_menu_trigger-21841[aria-expanded="true"] .responsive-menu-pro-inner::before {
        top: 0 !important;
        opacity: 0 !important;
        transform: none !important;
        background-color: var(--rot) !important;
    }

    #rmp_menu_trigger-21841.is-active .responsive-menu-pro-inner::after,
    #rmp_menu_trigger-21841.rmp-menu-trigger-active .responsive-menu-pro-inner::after,
    #rmp_menu_trigger-21841[aria-expanded="true"] .responsive-menu-pro-inner::after {
        top: 0 !important;
        bottom: auto !important;
        transform: rotate(-90deg) !important;
        background-color: var(--rot) !important;
    }
}

/* ============================================================
 * v35: Responsive Menu Trigger canonical breakpoint and radius
 *
 * Senior scope:
 * - Do not touch menu logic, contact icons, cart, cookie banner or JS.
 * - The Responsive Menu trigger is a mobile-only control.
 * - Desktop and tablet start at 768px in the original snippets.
 * - Radius uses the global LibertyRoots button token, same as scroll top.
 * ============================================================ */
@media only screen and (min-width: 768px) {
    #rmp_menu_trigger-21841,
    button#rmp_menu_trigger-21841,
    .rmp_menu_trigger#rmp_menu_trigger-21841 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media only screen and (max-width: 767px) {
    #rmp_menu_trigger-21841,
    button#rmp_menu_trigger-21841,
    .rmp_menu_trigger#rmp_menu_trigger-21841 {
        border-radius: var(--radius-button) !important;
        -webkit-border-radius: var(--radius-button) !important;
        background-clip: padding-box !important;
        overflow: hidden !important;
    }

    #rmp_menu_trigger-21841 .rmp-trigger-box {
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        overflow: visible !important;
    }
}