:root
{
	--main-color: #1584C3;
	--navbar-hl-color: #0D9DF0;
	--header-font-color: white;

	--font-light-primary-color: white;
	--font-light-primary-shadow: 
            0 6px 14px rgba(0,0,0,0.6),
            -1px -1px 0 rgba(0,0,0,0.8),
            1px -1px 0 rgba(0,0,0,0.8),
            -1px 1px 0 rgba(0,0,0,0.8),
            1px 1px 0 rgba(0,0,0,0.8);
	--font-light-primary-shadow-small: 
			0 2px 5px rgba(0,0,0,0.5);
	--image-shadow-large: 0 0 20px rgba(0,0,0,0.5);
	--background-color-dark-1: #1E262F;
	--font-family: 'Clash Display', system-ui, sans-serif;
	--layout-margin-1: 5vw;
	--layout-margin-2: 5vw;
	--topbar-height: 16vh; /* do głównego szablonu */

	--page-bg-image: url(https://api.nowastrona.elstar.com.pl/Media/150A2290.png);
	--page-bg-gradient: linear-gradient(
		to bottom,
		rgba(31, 43, 60, 0.8) 0vh,
		rgba(55, 78, 90, 0.9) 15vh,
		rgba(255, 255, 255, 1) 50vh
	);

	--navbar-hf-color: #0D9DF0;

	--topnav-group-item-title-font: 500 round(1.1rem, 1px) 'Clash Display', system-ui, sans-serif;
	--topnav-group-header-title-font: 600 round(1.6rem, 1px) 'Clash Display', system-ui, sans-serif;
    --topnav-group-expanded-header-title-font: 500 round(1.1rem, 1px) 'Clash Display', system-ui, sans-serif;
    --topnav-group-expanded-header-hover-title-font: 500 round(1.1rem, 1px) 'Clash Display', system-ui, sans-serif;

	--font-filter-header: 600 round(0.7rem, 1px) var(--font-family); /* originalnie 0.8rem */
	--font-tile-big-1-header-h1: 600 round(4rem, 1px) var(--font-family); /* originalnie 5rem */
	--font-tile-big-1-header-h2: 400 round(3rem, 1px) var(--font-family); /* originalnie 5rem */
	--font-tile-big-1-footer: 300 round(1.3rem, 1px) var(--font-family);
	--font-tiles-1-label: 600 round(1.5rem, 1px) var(--font-family); /* originalnie 2rem */
	--font-home-relations-footer: 500 round(0.8rem, 1px) var(--font-family);
	--font-home-relations-footer-hover: 500 round(0.9rem, 1px) var(--font-family);
	--font-home-offer-h2: 400 round(3rem, 1px) var(--font-family);
	--font-home-delivery-h2: 400 round(2.1rem, 1px) var(--font-family);
	--font-home-products-h3: 600 round(2.2rem, 1px) var(--font-family);
	--font-home-delivery-ul: 500 round(1.5rem, 1px) var(--font-family); /* originalnie 1.2rem */
	--font-home-products-arrow: 900 round(3rem, 1px) var(--font-family);
	/* --font-home-products-main: 600 1.9rem var(--font-family); */
	--font-columns-2ml-h2: 600 round(4.3rem, 1px) var(--font-family);
	--font-columns-2ml-div: 400 round(1.4rem, 1px) var(--font-family);
	--font-b2b-button: initial round(1rem, 1px) var(--font-family);

	--font-page-search-category-label: 600 round(2.0rem, 1px) var(--font-family); /* originalnie 3.6rem */
	--font-page-search-category-label-second: 500 round(1.0rem, 1px) var(--font-family); /* originalnie 2.1rem */
	--font-page-search-breadcrumb: 400 round(1.1rem, 1px) var(--font-family);

	--font-articles-md-th: 600 round(1rem, 1px) var(--font-family);
	--font-articles-md-td: 400 round(1rem, 1px) var(--font-family); /* originalnie 1.1rem */
	--font-articles-md-details-group-h4: 600 round(0.8rem, 1px) var(--font-family); /* originalnie 0.6rem */
	--font-articles-md-details-group-div: 400 round(0.9rem, 1px) var(--font-family);
	--topbar-base-size: 1vh;
}
html
{
	font-size: 1vw;
}
body
{
	background-image: var(--page-bg-gradient), var(--page-bg-image);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	background-attachment: fixed;
}
.GlobalNavbarWrapper
{
	background-image: var(--page-bg-gradient), var(--page-bg-image);
	background-color: transparent;
	background-size: 100% auto;
	background-position: top center;
	box-shadow: none;
	top: 0 !important;
}
.GlobalNavbarContainer
{
	margin: 0;
	/* width: 50vw; */
	max-width: initial;
	padding-top: 1vh;
	padding-left: calc(var(--layout-margin-1) + var(--layout-margin-2));
	padding-right: calc(var(--layout-margin-1) + var(--layout-margin-2));
	height: var(--topbar-height);
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	grid-template-areas: "logo controls" "logo menu";
	> :nth-child(1)
	{
		grid-area: logo;
		min-width: 11rem;
	}
	> :nth-child(2) { display: none; }
	> :nth-child(3) { grid-area: menu; }
	> :nth-child(4) { grid-area: controls; justify-self: end; }
	.MenusNavbarControlsContainer
	{
		display: flex;
		gap: 1em;
		height: calc(var(--topbar-base-size) * 6);
		justify-content: flex-end;
	}
	.MenusNavbarDesktopNavigationListContainer
	{
		height: 9vh;
	}
	.MenusNavbarDesktopNavigationListList
	{
		display: flex;
		justify-content: flex-end;
		max-width: none;
		/* font-size: 0.9rem; */
	}
	.MenusNavbarControlsSection
	{
		align-items: center;
	}
}
.search-layout-2.GlobalPageSearchContainer
{
	background-color: white;
	margin: 0 var(--layout-margin-1);
	padding: 0 var(--layout-margin-2);
}
.search-layout-2 .FilterWrapperContainer .FilterWrapperHeader
{
	display: flex;
	justify-content: end;
	
	.FilterWrapperHeaderName
	{
		order: 2;
		text-transform: uppercase;
		font: var(--font-filter-header);
		color: black;
		opacity: 1;
		cursor: initial;
		letter-spacing: 2px;

		:after { content: ':' }
		strong { display: none; }
	}
	.FilterWrapperHeaderClearIcon
	{
		color: red;
		display: initial;
		order: 1;
		visibility: hidden;
	}
	.fa-chevron-right
	{
		display: none;
	}
}
.search-layout-2 .FilterWrapperHeaderSuffix
{
	display: none;
}
.search-layout-2 .FilterWrapperContainer.HasSelection
{
	.FilterWrapperHeaderClearIcon
	{
		visibility: visible;
	}
}
.search-layout-2 .GlobalFilterContainerControls
{
	display: none;
}
/* .MenusNavbarLogoImage
{
	position: absolute;
} */
/* .GlobalLayoutContainer
{
} */
.GlobalLayoutContent
{
	width: initial;
	margin-top: var(--topbar-height); /* do głównego szablonu */
}
.MenusNavbarDesktopNavigationListSubmenu
{
    left: var(--layout-margin-1);
    right: var(--layout-margin-1);
	top: var(--topbar-height); /* do głównego szablonu */
}
.HomePageSectionContainer
{
	max-width: 100vw; /* do głównego szablonu - nadpisać */
}
.HomePageSectionContainerTitle
{
	display: none;
}
.LandingPageTinySectionContainer
{
	margin: 0;
	padding: 0;
	max-width: 100vw; /* do głównego szablonu - nadpisać */
}
.elstar-1
{
	margin-left: var(--layout-margin-1);
	margin-right: calc(var(--layout-margin-1) + var(--layout-margin-2));
	margin-bottom: -10vh;
	background: transparent !important;
	position: relative;

	.tile-big-1
	{
		position: relative;
		z-index: 100;
	}
	footer
	{
		display: flex;
		justify-content: space-between;

		> :nth-child(2)
		{
			display: flex;
			align-items: center;
			gap: 1em;
			text-transform: uppercase;
			font: var(--font-home-relations-footer);
			letter-spacing: 0.4em;
			text-wrap-mode: nowrap;
			transition: font-size 0.3s ease, cursor 0.3s ease;
			

			&:hover
			{
				cursor: pointer;
				font: var(--font-home-relations-footer-hover);
			}
		}
	}
}
.HomePageSectionContainer[data-id="2"]
{
	margin-top: -10vh !important;
	background-image: url(https://api.nowastrona.elstar.com.pl/Media/D6A3DFB9.png);
}
.elstar-2
{
	position: relative;
	padding-top: 20vh;
	padding-bottom: 10vh;
	padding-left: calc(var(--layout-margin-1) + var(--layout-margin-2));
	padding-right: calc(var(--layout-margin-1) + var(--layout-margin-2));

	header
	{
		display: flex;
		justify-content: space-around;
		align-items: center;
		h2
		{
			padding: 2rem 0;
			font: var(--font-home-offer-h2);
			/* color: var(--font-light-primary-color); */
			/* text-shadow: var(--font-light-primary-shadow); */
			margin: 0;
		}
		> div
		{
			font-size: 1rem;
			font-weight: 500;
			color: #97A4A7;
		}
	}
	.elstar-home-red-rectangle
	{
		position: absolute;
		width: calc(3 * var(--layout-margin-2));
		height: calc(3 * var(--layout-margin-2));
		background-color: #CE3520;
		top: calc(-1 * var(--layout-margin-2));
		right: var(--layout-margin-1);
		z-index: 1;
	}
}
.elstar-3
{
	padding-top: 10vh;
	padding-bottom: 10vh;
	background-color: #E9F3F9;
	padding-left: calc(var(--layout-margin-1) + var(--layout-margin-2));
	padding-right: calc(var(--layout-margin-1) + var(--layout-margin-2));
	header
	{
		display: flex;
		margin-bottom: 5vh;

		h2
		{
			padding: 2rem 0;
			font: var(--font-home-delivery-h2);
			/* color: var(--font-light-primary-color); */
			/* text-shadow: var(--font-light-primary-shadow); */
			margin: 0;
			
			b
			{
				color: #CE3520;
				font-weight: 600;
			}
		}
	}
	ul
	{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 1em;
		list-style: none;
		padding: 0;
		margin: 0;
		font: var(--font-home-delivery-ul);
		color: #202831;

		li
		{
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			background: 
				linear-gradient(
					to right,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 1) 100%
				);
			padding: 1em 1em; /* oryginalnie 2em 1em */
			border-top: 1px solid #D0DBDF;
			border-bottom: 1px solid #D0DBDF;
			transition: background-color 0.3s ease, font-weight 0.3s ease;

			> span
			{
				margin-left: 1em;
				color: #1584C3;
			}
			&:hover
			{
				background-color: white;
				font-weight: 600;
			}
		}
	}
}
.elstar-home-logistics
{
	padding-top: 10vh;
	padding-bottom: 10vh;
	background-color: #434E5D;
	color: white;
	padding-left: calc(var(--layout-margin-1) + var(--layout-margin-2));
	padding-right: calc(var(--layout-margin-1) + var(--layout-margin-2));

	h2
	{
		text-shadow: var(--font-light-primary-shadow);
	}
}
.elstar-home-products
{
	padding-top: 10vh;
	padding-bottom: 10vh;
	background-color: #E9F3F9;
	padding-left: calc(var(--layout-margin-1) + var(--layout-margin-2));
	padding-right: calc(var(--layout-margin-1) + var(--layout-margin-2));
	background-image: url(https://api.nowastrona.elstar.com.pl/Media/95435594.png);
	background-position: top right;
	background-repeat: no-repeat;

	header
	{
		margin-bottom: 5vh;
		display: flex;

		h3
		{
			font: var(--font-home-products-h3);
			margin-right: -10vw;
		}
		p
		{
			display: flex;
			align-items: end;
			font-size: 1.4rem;
			color: #616B79;
			padding: 0 2vw;
			padding-top: 2vw;
		}
	}
	main
	{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		background-image: url(https://api.nowastrona.elstar.com.pl/Media/800FECBB.png);
		background-size: cover; /* albo 100% auto; zależy od efektu */
		background-position: center;
		background-color: #E9F3F9;
		color: white;

		.tile
		{
			border: 0.7rem solid #E9F3F9;
		}
		.tile:hover
		{
			transition: transform 0.3s ease;
			transform: scale(1.05);
			/* border: 0; */
		}
		.tile-inner
		{
			display: grid;
			grid-template-columns: 7rem minmax(0, 1fr) 7rem;
			cursor: pointer;
			flex-direction: row;
			align-items: center;
			/* transition: transform 0.3s ease;
        	transform-origin: center;
        	will-change: transform; */
			height: 100%;
			padding: 2em;

			> :nth-child(1)
			{
				/* flex: 0; */
				img
				{
					width: 4rem;
					height: auto;
					object-fit: contain;
				}
			}
			> :nth-child(2)
			{
				overflow: hidden;
				word-wrap: normal;
				font-size: 1.4rem;
			}
			> :nth-child(3)
			{
				font: var(--font-home-products-arrow);
				color: #CE3520;
			}
		}
	}
}
.elstar-columns-2ml
{
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 4rem;

	> div
	{
		display: flex;
		flex-direction: column;

		> *
		{
			flex: 1;
		}
		h2
		{
			margin: 0;
			font: var(--font-columns-2ml-h2);
		}
		> div
		{
			display: flex;
			flex-direction: column;
			gap: 2em;
			font: var(--font-columns-2ml-div);
		}
	}
	img
	{
		box-shadow: var(--image-shadow-large);
	}
}
.elstar-circle-arrow
{
	display: inline-flex;
	background-color: #CE3520;
	box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
	width: 2em;
	height: 2em;
	border-radius: 50%;
	text-shadow: none;
	justify-content: center;
	align-items: center;
	font-size: 2em;
}
.tiles-1
{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
	> div
	{
		/* padding: 2rem; */
		display: flex;
		flex-direction: column;
		gap: 1rem;
		justify-content: space-between;
		
		picture
		{
			width: 100%;
			background-color: white;
			aspect-ratio: 1 / 1;
			display: flex;
			img
			{
				/* width: 100%;
				height: 60%;
				object-fit: contain;
				margin: auto; */
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
				display: block;
			}
		}
		label
		{
			font: var(--font-tiles-1-label);
		}
		a
		{
			font-size: 1rem;
			color: #1584C3;
			
			&:hover
			{
				color: #0D9DF0;
			}
		}
	}
}
.tile-big-1
{
	padding: 4rem;
	padding-left: var(--layout-margin-2);
	color: var(--font-light-primary-color);
	background-color: var(--background-color-dark-1);

	header
	{
        position: relative;
		min-height: 18rem;
		h1
		{
			padding-top: 2rem;
			/* font-size: 5rem; */
			/* font-size: clamp(3rem, 4.9vw, 9rem); */
			font: var(--font-tile-big-1-header-h1);
			text-shadow: var(--font-light-primary-shadow);
			margin: 0;
            position: relative;
            z-index: 2;
			/* -webkit-text-stroke: 2px rgba(0,0,0,0.8); */
		}
		h2
		{
			font: var(--font-tile-big-1-header-h2);
			text-shadow: var(--font-light-primary-shadow);
			margin: 0;
            position: relative;
            z-index: 2;
			/* -webkit-text-stroke: 1px rgba(0,0,0,0.8); */
		}
		img
		{
            position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			box-shadow: var(--image-shadow-large);
			height: 100%;
		}
	}
	hr
	{
		margin: 2rem 0;
	}
	footer
	{
		display: flex;
		font: var(--font-tile-big-1-footer);
		text-shadow: var(--font-light-primary-shadow);
		
		> :nth-child(1)
		{
			max-width: 40vw;
		}
	}
}

.title
{
	transition:
		font-weight var(--topnav-animation-time) ease,
		font-size var(--topnav-animation-time) ease;
}
.topnav-group-item
{
	transition:
		background var(--topnav-animation-time) ease,
		color var(--topnav-animation-time) ease;
	/* max-height: initial;
	height: initial; */
}
/* .topnav-group-item-title
{
	height: initial;
} */

.InputsTagCloudItem
{
	background-color: white;
	border: 1px solid #D0DBDF;
	border-radius: 0.8rem;
}
.InputsTagCloudButton
{
	background-color: initial;
	opacity: 1;
	/* padding: 0.2em 1.5em; originalnie */
	padding: 0.1em 0.5em;
}
.InputsTagCloudButton .InputsTagCloudButtonLabel
{
	font-size: 0.9rem;
	font-weight: 500;
	color: black;
	opacity: initial;
}
.InputsTagCloudButton.disabled
{
	opacity: .1;
}
.InputsTagCloudCountLabel
{
	display: inline;
	font-size: 0.7rem;
}
.InputsTagCloudItem:has(> .InputsTagCloudButton.InputsTagCloudButton-Selected)
{
	background-color: #1584C3;
	.InputsTagCloudButtonLabel
	{
		color: white;
	}
	.InputsTagCloudCountLabel
	{
		color: white;
	}
}

.LanguagePickerPickerControl:focus .LanguagePickerPickerControlInner
{
	color: #0D9DF0;
	text-decoration: none;
}
.LanguagePickerPickerLabelText
{
	display: none;
	font-size: 0.6rem;
}
.LanguagePickerPickerControlInner
{
	color: white;
	opacity: 1;
	border: none;
	width: 0;
	
	img
	{
		display: none !important;
	}
}
.search-layout-2.GlobalPageSearchContainer
{
	.GlobalPageSearchCategoryLabelContainer
	{
		position: relative;
		padding: round(0.5rem, 1px) 0;
		padding-top: round(2rem, 1px);
		margin-left: -2vw;
		
		.GlobalPageSearchCategoryLabel
		{
			padding-left: 10px;
			font: var(--font-page-search-category-label);
			margin: 0;
		}
		.GlobalPageSearchCategoryLabelSecond
		{
			padding-left: 10px;
			font: var(--font-page-search-category-label-second);
			color: #CE3520;
		}
		img
		{
			border: 1px solid red;
			position: absolute;
			right: 10px;
			top: 0 !important;
			right: 0 !important;
			width: 10rem !important;
			height: 10rem !important;
		}
	}
	.MaterialElementsBreadcrumbsContainer
	{
		margin: 0;
		margin-left: -2vw;
		
		.MuiBreadcrumbs-ol
		{
			display: flex;
			align-items: stretch;
		}
		.MuiBreadcrumbs-li,
		.PrivateBreadcrumbCollapsed-root-1,
		.MuiButtonBase-root
		{
			display: block;
			font: var(--font-page-search-breadcrumb);
			margin: 0;
			padding: round(0.75em, 1px) round(1.5em, 1px); /* oryginalnie 1em calc(2vw + 10px) */
			border-right: 1px solid #D0DBDF;
			background-color: #FBFEFF;
			&:hover
			{
				background-color: #E6F1F5;
			}
		}
		.MuiBreadcrumbs-li:has(>.GlobalBreadcrumbsLinkContainer-Current)
		{
			background-color: #F2F8FA;
		}
		.MuiBreadcrumbs-separator
		{
			display: none;
		}
		.GlobalBreadcrumbsLinkContainer
		{
			opacity: 1;
		}
		.GlobalBreadcrumbsLinkContainer-Current
		{
			font-weight: 500;
		}
		.arrow-icon
		{
			margin-left: 1em;
		}
		.MuiTypography-body1
		{
			font-family: var(--font-family);
			font-weight: 500;
		}
	}
	.GlobalPageSearchInner
	{
		margin: 0 -2vw;
		width: calc(100% + 4vw);

		.GlobalPageSearchFilters
		{
			/* margin: 0 -2vw; */
			padding: 0;
			
			.GlobalFilterContainerContainer
			{
				margin: 0;
			}
			.GlobalFilterContainerFilters
			{
				gap: 0.5rem 0.5rem; /* oryginalnie 1rem 1rem */
				background-color: #F2F8FA;
				padding: 1rem 1rem; /* oryginalnie 2rem calc(2vw + 10px) */
			}
			.FilterWrapperSelectedValuesList
			{
				display: none;
			}
		}
		.GlobalPageSearchResults
		{
			/* margin: 0 -2vw; */
			margin: 3rem 0;
			padding: 0;
			
			.GlobalPageSearchResultsHeader
			{
				display: none;
			}
		}
	}
}

/* pierwszy poziom menu */

.MenusNavbarListItemContainer
{
	height: 3.2rem;
	overflow: visible;
    display: inline-block;
}
.MenusNavbarListItemContainer > .MenusNavbarListItemLabel
{
	font-size: 1.3rem;
	font-weight: 450;
	transition: transform 0.3s ease;
}
.MenusNavbarListItemContainer:hover > .MenusNavbarListItemLabel
{
	transform: scale(1.05);
}
.InputsTagCloudContainer
{
    width: 100%;
    display: flex;
    flex-direction: row;
}
.b2bButton
{
	color: white;
	&:visited { color: white; }
	font: var(--font-b2b-button);
	letter-spacing: 0.25rem;
	text-transform: uppercase;
	text-decoration: none;
	background: linear-gradient(to right, #1584C3, #0062B2);
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	display: inline-block;
	transition: 
		background 0.3s ease,
		transform 0.3s ease;
}
.b2bButton:hover
{
	background: linear-gradient(to right, #0D9DF0, #005A9E);
	transform: scale(1.05);
}
.MenusNavbarControlsSection:has(>.ButtonFavouritesContainer),
.MenusNavbarControlsSection:has(>.CartPreviewContainer),
.SettingsPickerContainer
{
	display: none;
}
.ButtonSearchSearchIcon::after
{
	font-size: 1.3rem;
}
.MenusNavbarControlsSection:has(>.LanguagePickerContainer)
{
	width: 2em;

	.LanguagePickerPickerControlInner
	{
		padding: 0;
		font-size: 1.3rem;
		font-weight: 400;
	}
}

.ComponentsFooterContainer
{
	display: none;
}
.ComponentsFooterMenuContainerBottom
{
	background-color: #192638;
	padding-left: calc(var(--layout-margin-1) + var(--layout-margin-2));
	padding-right: calc(var(--layout-margin-1) + var(--layout-margin-2));

	.elstarFooter
	{
		display: grid;
		grid-template-columns: 1fr 3fr;
	}
	.elstarFooterSide
	{
		padding-right: 4em;
		h2
		{
			color: white;
			font-size: 1.5rem;
			font-weight: 400;
		}
		h3
		{
			color: white;
			font-size: 0.9rem;
			font-weight: 400;
		}
		div
		{
			color: #5C6E88;
			font-size: 0.8rem;
		}
		h4
		{
			color: white;
			font-size: 0.8rem;
			letter-spacing: 0.1em;
			font-weight: 400;
		}
	}
	.elstarFooterColumns
	{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

		h3
		{
			color: #1584C3;
			font-size: 0.9rem;
			font-weight: 400;
		}
		ul
		{
			display: flex;
			flex-direction: column;
			gap: 1em;
			color: white;
			font-size: 0.9rem;
			font-weight: 200;
			list-style: none;
			padding: 0;
			padding-top: 1em;
		}
		a
		{
			text-decoration: none;

			&:hover
			{
				font-weight: 400;
			}
		}
	}
}
.InputsSearchInputInner
{
	color: black;
}
.InputsSearchContainer-Open
{
	background: white;
}
.InputsSearchInput-Open .InputsSearchInputCloseIcon::after,
.InputsSearchInput-Open .InputsSearchInputSearchIcon::after
{
	color: gray;
}
.LanguagePickerPickerWrapper
{
	min-width: 10vw;
}
.MenusNavbarDesktopNavigationListList > li
{
	height: 100%;
}
.MenusNavbarDesktopNavigationListList .MenusNavbarDesktopNavigationListItem
{
	height: 100%;
	padding-top: 1rem;
}
.MenusNavbarDesktopNavigationListList .MenusNavbarDesktopNavigationListItem:has(> * > .MenusNavbarListItemLabel-Highlight)
{
	border-bottom: 0.4em solid #1584C3;
	background:
		radial-gradient(
            ellipse 80% 100% at center bottom,
            rgba(21, 132, 195, 0.7) 0%,
            rgba(21, 132, 195, 0) 70%
		);
}
.CategoryMenuPosition
{
	height: 100%;
}
/* .topnav-group-container
{
	position: absolute;
	left: 30vw;
	width: 100%;
	max-width: 50vw;
	box-sizing: border-box;
} */
.CookiesAgreementsButton
{
	background: #1584C3;
}
.ProductPageHeaderInnerTopWrapper,
.GlobalProductPageToolbar .MaterialElementsBreadcrumbsContainer
{
	display: none;
}
.ProductToolbarContainer
{
	background: rgba(255, 255, 255, 0.5);
	/* backdrop-filter: blur(10px); */
	padding: 0 1rem;
}

.search-layout-2.GlobalPageSearchContainer .MuiBreadcrumbs-li:not(:last-child)
{
	background-color: #FBFEFF !important;
}

/* mobile */

.GlobalNavbarMobileContainer
{
	background-color: white;
	margin: 0;
	padding: 0 1em;
	justify-content: space-around;
}

.GlobalNavbarMobileIconButton i
{
	color: black;
}

.GlobalNavbarMobileIconButton:has(>.fa-shopping-bag),
.GlobalNavbarMobileIconButton:has(>.fa-user)
{
	display: none;
}

@media (max-width: 900px)
{
	html
	{
		font-size: 2.5vw;
	}
	.elstar-1
	{
		margin-left: var(--layout-margin-1);
		margin-right: var(--layout-margin-1);
	}
	
	.elstar-2
	{
		padding-top: 10vh;

		.tiles-1
		{
			grid-template-columns: 1fr;
			gap: 1.25rem;

			> div
			{
				align-items: center;
				text-align: center;

				label
				{
					font-size: 2rem;
				}
				a
				{
					font-size: 2rem;
				}
			}
		}
		header
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;

			h2
			{
				font-size: 2.5rem;
			}
			> div
			{
				display: none;
			}
		}
  	}

	.elstar-3
	{
		padding: 5vh 10vw;

		ul
		{
			grid-template-columns: 1fr;
			font-size: 1.6rem;

			li
			{
				padding: 1.5em;
			}
		}
	}

	.elstar-home-logistics
	{
		padding: 5vh 10vw;
	}

	.elstar-home-products
	{
		padding: 5vh 10vw;

		header
		{
			flex-direction: column;
			h3
			{
				margin: 0;
				font-size: 36px;
			}
			p
			{
				font-size: 1.6rem;
				margin-top: 1.5rem;
			}
		}
		main
		{
			grid-template-columns: 1fr;
			font-size: 1.3rem;

			.tile
			{
				border: 1em solid #E9F3F9;
			}
			.tile-inner
			{
				flex-direction: column;

				img
				{
					width: 100%;
				}
				> :nth-child(3)
				{
					display: none;
				}
			}
		}
	}

	.elstar-columns-2ml
	{
		grid-template-columns: 1fr;
		gap: 2rem;

		> div
		{
			display: contents;

			h2
			{
				font-size: 4rem;
			}
			div
			{
				font-size: 1.6rem;
			}
		}
		img
		{
			margin-top: 3rem;
			max-width: 100%;
			height: auto;
		}
	}

	.HomePageSectionContainer[data-id="3"]
	{
		margin-top: 0 !important;
	}

	.GlobalNavbarContainer
	{
		padding-left: calc(var(--layout-margin-1));
		padding-right: calc(var(--layout-margin-1));
	}

	.ButtonMobileLanguageContainer
	{
		top: 0;
		grid-area: controls !important;
		padding: 1rem 0;
	}

	.tile-big-1
	{
		padding: 1rem 2rem;

		header
		{
			min-height: auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			h1 { font-size: 4rem; }
			h2 { font-size: 2.4rem; }
			img
			{
				margin-top: 1.5rem;
				align-self: flex-end;
				width: 60%;
				max-width: 260px;
			}
		}
		footer
		{
			flex-direction: column;
			gap: 1.5rem;
			font-size: 1.6rem;

			> :nth-child(1) { max-width: 100%; }
		}
	}
	
	.search-layout-2.GlobalPageSearchContainer
	{
		padding: 0rem 1rem;

		.GlobalPageSearchCategoryLabelContainer
		{
			display: none;

			.GlobalPageSearchCategoryLabel
			{
				font-size: 40px;
			}
			.GlobalPageSearchCategoryLabelSecond
			{
				font-size: 1.3rem;
			}
		}
		.MaterialElementsBreadcrumbsContainer 
		{
			.MuiBreadcrumbs-ol
			{
				:not(:last-child)
				{
					display: none;
				}
			}
			.MuiBreadcrumbs-li
			{
				padding-left: 3rem;
				font-size: 1.3rem;
			}
		}
	}

	.search-layout-2.GlobalPageSearchContainer 
	{
		margin: 0;
		padding: 0;

		.GlobalPageSearchInner
		{
			margin: 0;
			width: 100%;

			.GlobalPageSearchFilters
			{
				min-width: initial;

				.GlobalFilterContainerContainer
				{
					padding: 0;
				}
				.GlobalFilterContainerFilters
				{
					grid-template-columns: 1fr;
					padding: 1rem;

					.FilterWrapperContainer
					{
						.FilterWrapperHeader
						{
							justify-content: left;
						}
						.FilterWrapperHeaderName
						{
							font-size: 1.2rem;
							flex: 1;

							span
							{
								display: inline-flex;
								justify-content: space-between;
								flex: 1;
								&:after { content: '➤'; }
							}
						}
						.FilterWrapperContent
						{
							display: none;
						}
					}
					
					.FilterWrapperContainer.IsExpanded
					{
						.FilterWrapperContent
						{
							display: block;
							margin-top: 1rem;
						}
						.FilterWrapperHeaderName
						{
							span
							{
								&:after { transform: rotate(90deg); }
							}
						}
					}
				}
			}
		}
		.InputsTagCloudContainer
		{
			padding: 0;
		}
		.InputsTagCloudButton .InputsTagCloudButtonLabel
		{
			font-size: 1.6rem;
			height: 100%;
		}
	}
	
	table.articles-md
	{
		max-width: 100%;

		thead
		{
			th
			{
				display: none;
				font-size: 1.2rem;
			}
			th:nth-child(1),
			th:nth-last-child(1),
			th:nth-last-child(2)
			{
				display: table-cell;
			}
		}
		.article-md-row
		{
			td
			{
				display: none;
			}
			td:nth-child(1),
			td:nth-last-child(1),
			td:nth-last-child(2)
			{
				display: table-cell;
			}
			td:nth-child(1)
			{
				max-width: 40vw;
			}
		}
		.article-md-details-container
		{
			width: 100%;
			max-width: 100%;
			grid-template-columns: auto 0 1fr;

			.article-md-details-group 
			{
				> h4
				{
					font-size: 0.8rem;
				}
				> div
				{
					font-size: 1.2rem;
				}
			}
		}
		.article-md-details-image
		{
			min-height: 40vw;
			padding: 0;
		}
	}
}

/* do projektu */

.MenusNavbarDesktopNavigationListList li.ContainerMenuPosition .MenusNavbarDesktopNavigationListSubmenu
{
	margin-left: 0;
	margin-right: 0;
}

.topnav-group-header
{
    .controls
	{
		a:hover
		{
			color: var(--navbar-hl-color);
		}
	}
}
@keyframes article-md-details-expand-y
{
    from
	{
        max-height: 0;
        opacity: 0;
    }
    to
	{
        max-height: 100vh;
        opacity: 1;
    }
}
table.articles-md thead
{
	background-color: #FBFEFF;
}
table.articles-md th
{
	padding: 0.5em 1em; /* oryginalnie 0 1em */
	font: var(--font-articles-md-th);
}
table.articles-md td
{
	font: var(--font-articles-md-td);
	padding: round(0.5em, 1px) round(1em, 1px);
}
.articles-md-wrapper
{
	overflow-x: auto;
}
.article-md-details-container
{
	max-width: calc(100vw - (var(--layout-margin-1) + var(--layout-margin-2)) * 2);
	transform-origin: top;
    animation: article-md-details-expand-y 0.25s ease-out;
	align-items: center;
}
.article-md-details-group
{
	border-bottom: 1px solid #D0DBDF;

	> h4
	{
		margin: 0;
		font: var(--font-articles-md-details-group-h4);
	}
	> div
	{
		font: var(--font-articles-md-details-group-div);
	}
	> *
	{
		display: flex;
		align-items: center;
		min-height: round(1.5rem, 1px);
		height: 100%;
		background-color: white;
	}
}
.article-md-details-fields
{
	background-color: #D0DBDF;
	gap: 1px 0;

	hr
	{
		display: none;
	}
}
.article-md-details-image
{
	min-height: 0.5vh;
}
.article-md-details-image img
{
	max-height: 20vh;
}
.article-md-details-container > div > .article-md-details-fields
{
	display: flex;
	background-color: transparent;
	gap: 2em;
	justify-content: center;
}
.article-md-details-container > div > .article-md-details-fields .article-md-details-group
{
	display: inline-flex;
	gap: 0.5em;
	border: 0;
	div
	{
		display: contents; 
	}
}
.article-md-details-container > div > .article-md-details-fields .article-md-details-group h4::after
{
	content: ':';
}
.quantity-value
{
	width: 100%;
	justify-content: center;
}
.quantity-label
{
	display: none;
	margin-right: 0.5em;
}
.article-md-row svg.fa-link
{
	margin: 0 0.5em;
	width: 0.75em;
	height: 0.75em;
	color: #1584C3;
	opacity: 0.6;

	&:hover
	{
		opacity: 1;
	}
}
.quantity-value
{
	display: inline-flex;
	align-items: center;

	.quantity-icon
	{
		display: inline-block;
		color: transparent;
		border-radius: 50%;
		width: 0.8em;
		height: 0.8em;
		overflow: hidden;
	}
	&.available .quantity-icon
	{
		background-color: #70B740;
	}
	&.empty .quantity-icon
	{
		background-color: #CE3520;
	}
}