/* only screen and (max-width: 1580px) */

/* header adjustments */
#header > .wrapper > .top > .column.rating  {
	padding-left: 30px;
}

#main section.module.promotion  .wrapper .content .flex-row,
#main section.module.eco .wrapper .content .flex-row {
	column-gap: 105px;
}

/* header adjustments */
#header > .wrapper > .top, #header > .wrapper > .content {
	gap: 20px;
}

/* header adjustments */
#header > .wrapper > .top .rating {
	gap: 20px;
}

/* breadcrumb adjustments */
#breadcrumb {
	left: 30px;
}

/* decrease gap betwen columns */ 
#search-result .wrapper > .content > .column.product-boxes > ul > li {
	gap: 15px;
}

/* decrease gap betwen columns */ 
#search-result .wrapper > .content > .column.product-boxes > ul {
	column-gap: 15px;
}

/* main */
#main section {
	padding: 55px 0 55px 0;
}

/* used for "cutout" category images (fixed to bottom) */
section.category-description.cutout .flex-row > .flex-column:last-child {
	margin-bottom: -55px;
}

#main section > .wrapper > .container.columns {
	column-count: initial;
	text-align: initial;
}

#main section > .wrapper > .container > h1:not(.no-indent), 
#main section > .wrapper > .container > .h1:not(.no-indent),
#main section > .wrapper > .container > h2:not(.no-indent), 
#main section > .wrapper > .container > .h2:not(.no-indent) {
	padding-left: 30px;
}

#main ul.display-grid.category > li .heading {
	margin-left: 30px;
	margin-right: 30px;
}

ul.display-grid  > li .color-preview {
	gap: 8px;
}

.collapsible > ul.collapsible-nav > li.menu-item a {
	scroll-margin-top: 114px;
}

#main section.logo-tool-promoter #overlay-control-panel {
	left: 100px;
}

#main section.module .wrapper {
	min-height: auto;
}

/* css rules for max-width: 1500px and below */
@media only screen and (max-width: 1500px) {
	
	#header > .wrapper > .top, #header > .wrapper > .content {
		grid-template-columns: auto 1fr auto;
	}
	
	/* hide icon labels */
	#header > .wrapper .icons button > .label {
		display: none;
	}
	
	/* display tooltips when icon labels are hidden */
	.ui-tooltip.ui-header-icon-tooltip {
		visibility: visible;
	}
	
	#header > .wrapper .icons [data-count]::before {
		top: 13px;
		right: 0px;
	}
	
	#header > .wrapper .icons .btn-cart .material-icons[data-quantity]::after {
		top: 13px;
		left: 15px;
	}
	
	#header > .wrapper .icons button {
		padding-left: 8px;
		padding-right: 8px;
		padding-bottom: 0;
	}
	
	#header .links-wrapper ul > li a, #header .links-wrapper ul > li button {
		padding: 0 7px;
	}
}

/* css rules for max-width: 1450px and below */
@media only screen and (max-width: 1450px) {
	
	/* reduce line-clamp */
	@supports (-webkit-line-clamp: 4) {
		.line-clamp {
			-webkit-line-clamp: 5;
			line-clamp: 5;
		}

		.line-clamp.has-usp {
			-webkit-line-clamp: 2;
			line-clamp: 2;
		}
	}
}

/* module layout changes in medium resolutions */
@media only screen and (max-width: 1200px) {

	#header .links-wrapper,
	#header .search-bar .btn-close {
		display: none;
	}

	#header .search-wrapper {
		display: block;
	}

	#search .search-bar input[type="search"] {
		padding-left: 32px;
	}

	.wrapper.margins, 
	#footer .footer-address {
		margin: 0 60px;
	}

	#main section.module.promotion  .wrapper,
	#main section.module.eco  .wrapper {
		padding-left: 60px;
		padding-right: 60px;
	}

	#main ul.display-grid.category {
		margin-left: 0;
		margin-right: 0;
	}
	
	#main section.module:not(.promotion) .wrapper h1,
	#main section.module:not(.promotion) .wrapper h2, 
	#main section.module:not(.promotion) .wrapper h3,
	#main section.module:not(.promotion) .wrapper .h1, 
	#main section.module:not(.promotion) .wrapper .h2, 
	#main section.module:not(.promotion) .wrapper .h3 {
		text-align: center;
	}
	
	#main section.module {
		max-width: 100vw;
	}
	
	#main section.module.logo-tool-promoter .wrapper .content .flex-row > .flex-column {
		padding-right: 0;
	}
	
	#main section.module .wrapper .content {
		padding-bottom: 35px;
	}
	
	#main section.module.promotion .wrapper .content {
		padding-bottom: 0;
	}
	
	#main section.module .wrapper .content .flex-row {
		flex-direction: column;
	}
	
	#main section.module:not(.promotion) .wrapper .content .flex-column {
		display: block;
		max-width: 100% !important;
	}

	#main section:not(#product) .overlay-wrapper .ui-overlay-editor {
		width: 100%;
		height: auto;
	}
	
	#main section.module .wrapper .content .flex-column + div.flex-column {
		padding-top: 50px;
		padding-left: 0;
	}
	
	#main section.module.promotion .wrapper > .container .promotion {
		position: static;
		margin-left: -10%;
		bottom: inherit;
		max-width: inherit;
	}

	#main section.module .wrapper br {
		display: none;
	}
	
	#main section.module .wrapper .btn {
		margin-top: 0;
		margin: 0 auto;
		display: block;
	}

	/* reset these values */
	#main section.logo-tool-promoter .overlay-wrapper {
		min-height: unset;
		width: 100%;
		margin-left: unset;
	}

	#main section.logo-tool-promoter .overlay-wrapper .ui-overlay-editor {
		min-width: unset;
	}

	#main section.logo-tool-promoter .wrapper .overlay-thumbnails,
	#main section.logo-tool-promoter .wrapper .overlay-color-selection {
		max-width: unset;
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.sm-hidden {
		display: none;
	}

	.lg-hidden {
		display: block;
	}
}

/* css rules for max-width: 1115px and below */
@media only screen and (max-width: 1115px) {	

	body.category section:not(.module) h1, 
	body.category section:not(.module).h1,
	body.category.inspiration .category-description h1, 
	body.category.inspiration .category-description .h1 {
		font-size: 28px;
		font-weight: 800;
		margin-top: 45px;
		margin-bottom: 10px;
	}

	#header > .wrapper > .top .usp {
		visibility: hidden;
		overflow: hidden;
		width: 0;
	}

	#header > .wrapper > .top > .column.links {
		padding-right: 46px;
	}

	#footer > .section .wrapper.columns.first .container,
	#footer > .section .wrapper.columns.last .container  {
		gap: 10px;
	}

	#footer > .section .wrapper.columns.last .container figure > img {
		max-height: 50px;
	}

	#footer > .section .wrapper.columns.first .container .img-container > img {
		max-height: 20px;
	}

	#footer > .section li.menu-item > a {
		font-size: 18px;
	}

	/* reset */
	section.category-description.cutout .flex-row > .flex-column:last-child {
		flex-direction: column;
		position: relative;
		padding-top: 10px;
	}
	
	section.category-description .flex-row > .flex-column + .flex-column {
		padding-left: 0;
	}
	
	section.category-description .flex-row > .flex-column img {
		margin: 0 auto;
	}
	
	ul.display-grid.category {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 5px;
	}
	
	ul.display-grid.product,
	ul.display-grid.module	{
		grid-template-columns: 1fr;
	}
	
	ul.display-grid.product.divider {
		grid-template-columns: 1fr 1fr;
	}
	
	ul.display-grid.product.divider > li {
		padding: 25px 0 25px 0;
	}
	
	ul.display-grid.product.divider > li:nth-child(1n) {
		padding-left: 0;
		padding-right: 10px;
	}
	
	ul.display-grid.product.divider > li:nth-child(2n) {
		padding-left: 10px;
		padding-right: 0;
	}
	
	ul.display-grid.product.divider > li:nth-last-child(-n+4) {
		border-bottom: 1px solid var(--border-color) !important;
	}
	
	ul.display-grid.product.divider > li:nth-child(2n+1):nth-last-child(-n+2),
	ul.display-grid.product.divider > li:nth-child(2n+1):nth-last-child(-n+2) ~ li {
		border-color: transparent !important;
	}

	ul.display-grid.product > li a {
		white-space: initial;
	}

	ul.display-grid.category > li {
		border-radius: 0;
		transition: transform .1s linear;
		background-color: var(--menu-background-color);
	}

	ul.display-grid.category > li:hover {
		background-color: var(--menu-background-color);
	}
}

@media only screen and (max-width: 1500px) {
	ul.navigation.columns {
		column-count: 5;
		column-gap: 0;
	}
}

@media only screen and (max-width: 1300px) {
	ul.navigation.columns {
		column-count: 4;
		column-gap: 0;
	}
}

@media only screen and (max-width: 992px) {
	
	section.category-description .flex-row {
		flex-direction: column;
	}
	
	ul.navigation.columns {
		column-count: 2;
		column-gap: 0;
	}
	
	ul.sitemap > li > ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 600px) {
	ul.navigation.columns {
		column-count: 1;
		column-gap: 0;
	}
}

#footer > .section .wrapper.navigation-links > .container {
	max-width: 100vw;
	padding: 0 150px;
}