/* ==========================================================================
   Shop filters sidebar
   --------------------------------------------------------------------------
   Loaded after shop.css on product overviews only (shop, categories, tags,
   brands). Places the filters in a left sidebar on desktop and shows the
   products 3 per row. Mobile (<= 992px) keeps the off-canvas filters from
   shop.css untouched.
   ========================================================================== */

@media (min-width: 993px) {

	/* Grid
	   ====================================================================== */

	.filter_grid {
		display: grid;
		grid-template-columns: 270px minmax(0, 1fr);
		gap: 40px;
		width: calc(100% - 75px);
		margin: 0 auto;
		padding-top: 30px;
		align-items: start;
	}

	.filter_grid > .shop > .container {
		padding: 0;
		max-width: none;
	}

	/* Sidebar
	   ====================================================================== */

	.filter_grid .filters {
		position: sticky;
		top: 20px;
		width: auto;
		max-height: calc(100vh - 40px);
		overflow-y: auto;
		z-index: 2;
	}

	.filter_grid .filters .filters__container {
		width: 100%;
		border-bottom: 0;
	}

	.filter_grid .filters .filters__container > .container {
		padding: 0;
		max-width: none;
	}

	/* Filter groups: vertical accordion (toggled in shop-filters.js) */

	.filter_grid .filters form ul {
		display: block;
	}

	.filter_grid .filters form ul > li {
		width: 100%;
		height: auto;
		padding: 15px 0;
		text-align: left;
		cursor: default;
		border: 0;
		border-bottom: 1px solid var(--color-4);
	}

	.filter_grid .filters form ul > li:first-child {
		border-left: 0;
	}

	.filter_grid .filters h4 {
		display: block;
		padding-right: 20px;
		cursor: pointer;
	}

	.filter_grid .filters h4:after {
		right: 0;
	}

	.filter_grid .filters ul ul {
		display: none;
		position: static;
		width: auto;
		padding: 10px 0 0;
		border: 0;
		background: none;
	}

	.filter_grid .filters .open-filter > ul {
		display: block;
	}

	.filter_grid .filters ul ul li {
		width: auto;
		padding: 0 0 8px;
		border: 0;
	}

	.filter_grid .filters ul ul li label {
		cursor: pointer;
	}

	/* Sizes: two columns, existing max-height + scroll from shop.css remains */

	.filter_grid .searchandfilter .sf-field-taxonomy-pa_maat ul {
		columns: 2;
		column-gap: 10px;
	}

	.filter_grid .searchandfilter .sf-field-taxonomy-pa_maat ul li {
		max-width: none;
		break-inside: avoid;
	}

	/* Sorting
	   ====================================================================== */

	.filter_grid .filters .filters__sort {
		position: static;
		border-bottom: 1px solid var(--color-4);
	}

	.filter_grid .filters .filters__sort > a {
		display: none;
	}

	.filter_grid .sort__title {
		display: block;
	}

	.filter_grid .filters .filters__sort .filters__sort-options {
		display: block;
		position: static;
		width: auto;
		border: 0;
		background: none;
	}

	.filter_grid .filters .filters__sort .filters__sort-options ul {
		padding: 0 0 15px;
	}

}

/* Products: 3 per row
   ========================================================================== */

@media (min-width: 768px) {

	.filter_grid ul.products.columns-3 li {
		width: calc(33.333333% - 14px);
		margin-right: 21px;
	}

	.filter_grid ul.products.columns-3 li:nth-child(3n) {
		margin-right: 0;
	}

}