:root {
	--imsf-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .elementor-heading-title,
body button,
body input,
body select,
body textarea,
body :where(div, span, a, p, li, label, td, th, strong, em, h1, h2, h3, h4, h5, h6):not([class*='icon']):not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.dashicons) {
	font-family: var(--imsf-font);
}

/* Smart Slider ustawia font selektorami z ID, stad !important tylko dla jego klas. */
body [class*='n2-font-'],
body [class*='n2-style-'],
body [class*='n2-style-'] :where(div, span, a, p):not([class*='icon']),
body .n2-ss-slider :where(div, span, a, p, h1, h2, h3, h4):not([class*='icon']) {
	font-family: var(--imsf-font) !important;
}

/* Desktop: plywajacy koszyk (Woo Fly Cart) 200 px od gory przy prawej krawedzi (nie zaslania przycisku do gory), o 30% mniejszy (80 -> 56 px). */
@media (min-width: 783px) {
	#woofc-count.woofc-count,
	#woofc-count.woofc-count:hover {
		top: 200px !important;
		right: 40px !important;
		bottom: auto !important;
		left: auto !important;
		width: 56px !important;
		height: 56px !important;
		padding: 0 !important;
		line-height: 56px !important;
	}

	#woofc-count.woofc-count i {
		font-size: 17px;
		line-height: 56px;
	}

	#woofc-count.woofc-count .woofc-count-number {
		top: -17px;
		right: -17px;
		width: 35px;
		height: 35px;
		font-size: 11px;
		line-height: 35px;
	}
}

/* Mobile i tablet: plywajacy koszyk ukryty (koszyk jest w naglowku). */
@media (max-width: 1024px) {
	#woofc-count.woofc-count {
		display: none !important;
	}
}

/* Rozwijane menu ElementsKit w naglowku wystaje za prawa krawedz i daje poziomy scroll calej strony;
   clip (nie hidden) nie tworzy kontenera przewijania, wiec position: sticky dalej dziala. */
html,
body {
	overflow-x: clip;
}


/* Tablet (hamburger): pasek informacji w jednej linii, "Versandkostenfrei" bez lamania slowa. */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-6222 .elementor-element-d305abf .elementor-container {
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}

	.elementor-6222 .elementor-element-d305abf .elementor-column {
		width: auto;
		flex: 0 1 auto;
	}

	.elementor-6222 .elementor-element-d305abf .elementor-widget-container,
	.elementor-6222 .elementor-element-d305abf p {
		font-size: 0.6875rem;
		white-space: nowrap;
	}

	.elementor-6222 .elementor-element-206f620 .elementor-column {
		width: auto;
		flex: 1 1 0;
	}

	.elementor-6222 .elementor-element-51317ee * {
		white-space: nowrap;
		word-break: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	.elementor-6222 .elementor-element-51317ee img {
		max-width: 56px;
		height: auto;
	}

	.elementor-6222 .elementor-element-51317ee .elementor-widget-container,
	.elementor-6222 .elementor-element-51317ee p {
		font-size: 0.75rem;
	}
}

/* Mobile: logo w naglowku zajmuje wolne miejsce (hamburger i koszyk po prawej) niezaleznie od kolejnosci ladowania CSS Elementora. */
@media (max-width: 767px) {
	body .elementor-6222 .elementor-widget-wrap .elementor-element.elementor-element-0754a86 {
		max-width: 100%;
		width: auto;
		--container-widget-width: auto;
		--container-widget-flex-grow: 1;
	}
}

/* Mobile/tablet: rzad logo/koszyk/hamburger nie wciaga tresci pod naglowek (Elementor ma tam margines -22px). */
@media (max-width: 1024px) {
  body .elementor-6222 .elementor-element.elementor-element-6880a63 { margin-top: 0; margin-bottom: 0; }
}

/* Mobile: okruszki w jednej linii, przewijane poziomo. */
@media (max-width: 782px) {
  body .woocommerce-breadcrumb {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overflow-wrap: normal;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body .woocommerce-breadcrumb::-webkit-scrollbar { display: none; }
}

/* Ikona koszyka w naglowku o 4 px wieksza (Fly Cart daje 14 px). */
body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner i {
	font-size: 18px;
}

/* Desktop: megamenu i podmenu po najechaniu takze w trybie "click" ElementsKit (szablon 6222 na RC ma
   ekit-nav-dropdown-click, produkcja ekit-nav-dropdown-hover - zachowanie jak na produkcji). */
@media (min-width: 1025px) {
	.elementskit-navbar-nav-default.ekit-nav-dropdown-click .elementskit-megamenu-has:hover > .elementskit-megamenu-panel,
	.elementskit-navbar-nav-default.ekit-nav-dropdown-click .elementskit-dropdown-has:hover > .elementskit-submenu-panel {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* Gorny pasek: "Anmelden" i koszyk zawsze obok siebie, takze <=1024 px (ElementsKit zmienia tam menu na pionowy blok,
 * a kolumna zwezala sie do szerokosci jednego wyrazu). */
body .elementor-6222 ul#menu-serch-header {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	width: auto !important;
}

body .elementor-6222 ul#menu-serch-header > li {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	width: auto !important;
}

/* Menu konta w gornym pasku: awatar + "Kundenbereich", rozwijana lista (otwarcie: hover, focus, klik/dotyk). */
body .elementor-6222 li.imsf-header-login {
	position: relative;
	display: flex !important;
	align-items: center;
	align-self: center;
	height: auto;
}

body .elementor-6222 .imsf-account-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.25rem 0.5rem;
	border: 0;
	background: transparent;
	line-height: 1.2;
	color: inherit;
	font: inherit;
	font-size: 15.52px;
	font-weight: 400;
	cursor: pointer;
}

body .elementor-6222 .imsf-account-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 999;
	display: none;
	min-width: 14rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

body .elementor-6222 li.imsf-header-login:hover > .imsf-account-menu,
body .elementor-6222 li.imsf-header-login:focus-within > .imsf-account-menu,
body .elementor-6222 li.imsf-header-login.is-open > .imsf-account-menu {
	display: block;
}

body .elementor-6222 .imsf-account-menu li {
	display: block;
	width: auto;
}

body .elementor-6222 .imsf-account-menu a {
	display: block;
	padding: 0.5rem 1rem;
	color: #222;
	font-size: 15.52px;
	white-space: nowrap;
}

body .elementor-6222 .imsf-account-menu a:hover,
body .elementor-6222 .imsf-account-menu a:focus {
	background: rgba(0, 0, 0, 0.05);
}

/* Lista menu konta ma wchodzic na menu glowne pod paskiem: ElementsKit daje obu kontenerom nav z-index 1000,
 * wiec nizszy w DOM (menu glowne) przykrywalby liste. */
body .elementor-6222 nav.elementskit-menu-container:has(.imsf-header-login:hover, .imsf-header-login:focus-within, .imsf-header-login.is-open) {
	z-index: 1100;
}

/* Licznik koszyka: zaokraglony prostokat rosnacy wraz z liczba cyfr (wtyczka daje stale kolko 16 px). */
body .woofc-menu-item .woofc-menu-item-inner:after,
body .woofc-cart-link .woofc-cart-link-inner:after {
	box-sizing: border-box;
	width: auto;
	min-width: 16px;
	padding: 0 5px;
	white-space: nowrap;
}

/* Gorny pasek: jeden rozmiar, kroj i grubosc (13 px desktop, 12 px mobile) dla tekstow, kontaktu, konta, wylogowania i sumy koszyka. */
body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) p,
body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) a,
body .elementor-6222 .imsf-account-toggle,
body .elementor-6222 .imsf-account-menu a,
body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal,
body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal * {
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4;
}

@media (max-width: 782px) {
	body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) p,
	body .elementor-6222 :is(.elementor-element-01b8137, .elementor-element-6d306f4, .elementor-element-c0c75f3) a,
	body .elementor-6222 .imsf-account-toggle,
	body .elementor-6222 .imsf-account-menu a,
	body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal,
	body .elementor-6222 .woofc-menu-item .woofc-menu-item-inner-subtotal * {
		font-size: 12px !important;
	}
}

/* Menu konta na telefonie: przycisk stoi przy lewej krawedzi ekranu, a lista byla kotwiczona do prawej (right: 0)
 * i wychodzila poza ekran. Na waskich ekranach kotwiczymy ja do lewej i ograniczamy szerokosc do okna. */
@media (max-width: 782px) {
	body .elementor-6222 .imsf-account-menu {
		right: auto;
		left: 0;
		min-width: 12rem;
		max-width: calc(100vw - 1rem);
	}
}

/* ElementsKit na tablecie i telefonie daje liscie menu overflow: auto i wysokosc paska (40 px) - to ucinalo
 * rozwijane menu konta do cienkiego paska. Przy liscie konta overflow zostaje widoczny. */
@media (max-width: 1024px) {
	body .elementor-6222 ul.elementskit-navbar-nav:has(.imsf-header-login) {
		overflow: visible !important;
	}
}