/*
 * 04, shop: filterkolom links, productgrid rechts.
 *
 * Clean en rustig. Geen lijntjes om afgeronde vlakken, en geen schaduwen:
 * op deze site maken we het onderscheid met vulling. Focus is de enige
 * uitzondering, die krijgt een outline, anders is met het toetsenbord niet
 * te zien waar je bent.
 */

.swipe-shop {
	--swipe-shop-kolom: 260px;
	--swipe-shop-gat: 48px;

	/*
	 * De twee kleuren van de footer. Ze komen uit de Elementor-kit, dus als
	 * Tim daar iets wijzigt loopt het hier mee. De vaste kleur erachter is
	 * alleen een terugval.
	 */
	--swipe-groen: var(--e-global-color-primary, #2B3319);
	--swipe-goud: var(--e-global-color-text, #F0E7C6);

	color: var(--swipe-tekst, #111);
}

/* ------------------------------------------------------------------ */
/* De kop: titel, aantal en beschrijving                               */
/* ------------------------------------------------------------------ */

.swipe-shop__kop {
	margin-bottom: 28px;
}

.swipe-shop__titel {
	margin: 0 0 10px;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 400;
	line-height: 1.1;
}

.swipe-shop__kop .swipe-shop__telling {
	margin: 0 0 12px;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
}

.swipe-shop__intro {
	max-width: 46ch;
}

.swipe-shop__tekst {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
}

.swipe-shop__intro.is-open .swipe-shop__tekst {
	display: block;
	-webkit-line-clamp: unset;
}

.swipe-shop__tekst p {
	margin: 0 0 10px;
}

.swipe-shop__tekst p:last-child {
	margin-bottom: 0;
}

.swipe-shop__meer {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Show Filter                                                         */
/* ------------------------------------------------------------------ */

.swipe-shop__filterknop {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
	padding: 6px 2px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 15px;
	color: inherit;
	cursor: pointer;
}

.swipe-shop__filterknop:hover .swipe-shop__filterlabel {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.swipe-shop__filtericoon {
	display: flex;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* De indeling: filter links, grid rechts                              */
/* ------------------------------------------------------------------ */

/*
 * Dicht staat het grid over de volle breedte. Gaat de filter open, dan
 * schuift er een kolom van 260 px voor, en het grid vult wat overblijft.
 */
.swipe-shop__lijf {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--swipe-shop-gat);
	align-items: start;
}

.swipe-shop.is-filter-open .swipe-shop__lijf {
	grid-template-columns: var(--swipe-shop-kolom) minmax(0, 1fr);
}

.swipe-shop__kolom {
	display: none;
}

.swipe-shop.is-filter-open .swipe-shop__kolom {
	display: block;
}

/* ------------------------------------------------------------------ */
/* De filterkolom                                                      */
/* ------------------------------------------------------------------ */

.swipe-shop__kolom {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Alleen op mobiel: de kop, de voet en het donkere scherm van het paneel */
.swipe-shop__paneelkop,
.swipe-shop__paneelvoet,
.swipe-shop__scherm {
	display: none;
}

.swipe-filter + .swipe-filter {
	margin-top: 4px;
}

.swipe-filter__titel {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.swipe-filter__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 2px;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	text-align: left;
}

.swipe-filter__kop:hover {
	opacity: 0.65;
}

.swipe-filter__pijl {
	position: relative;
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
}

.swipe-filter__pijl::before,
.swipe-filter__pijl::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 1px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.swipe-filter__pijl::after {
	transform: rotate(90deg);
}

.swipe-filter.is-open .swipe-filter__pijl::after {
	transform: rotate(0deg);
	opacity: 0;
}

.swipe-filter__lijst {
	padding: 0 2px 16px;
}

/* input ervoor, anders wint de rand die het thema op elk zoekveld zet */
input.swipe-filter__zoek {
	width: 100%;
	margin-bottom: 10px;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: var(--swipe-vlak, #f4f2ed);
	font-size: 14px;
	color: inherit;
	box-shadow: none;
}

.swipe-filter__zoek:focus {
	outline: 2px solid rgba(17, 17, 17, 0.35);
	outline-offset: 1px;
}

.swipe-filter__optie {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.35;
}

.swipe-filter__optie:hover .swipe-filter__naam {
	opacity: 0.65;
}

.swipe-filter__vink {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: 3px;
	/*
	 * Leeg is het een leeg hokje met een dun zwart lijntje. Aangevinkt wordt
	 * het het groen van de footer met een goud vinkje erin, dezelfde twee
	 * kleuren als de koppen daar.
	 */
	border: 1px solid var(--swipe-tekst, #111);
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.swipe-filter__optie:hover .swipe-filter__vink {
	background: rgba(43, 51, 25, 0.08);
}

.swipe-filter__vink:checked {
	background: var(--swipe-groen, #2B3319);
	border-color: var(--swipe-groen, #2B3319);
}

.swipe-filter__optie:hover .swipe-filter__vink:checked {
	background: var(--swipe-groen, #2B3319);
}

.swipe-filter__vink:checked::after {
	content: "";
	display: block;
	width: 4px;
	height: 8px;
	margin: 1px auto 0;
	border: solid var(--swipe-goud, #F0E7C6);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.swipe-filter__vink:focus-visible {
	outline: 2px solid rgba(17, 17, 17, 0.5);
	outline-offset: 2px;
}

.swipe-filter__naam {
	flex: 1 1 auto;
	min-width: 0;
}

.swipe-filter__optie.is-actief .swipe-filter__naam {
	font-weight: 500;
}

.swipe-filter__aantal {
	flex: 0 0 auto;
	font-size: 13px;
	opacity: 0.45;
	font-variant-numeric: tabular-nums;
}

/* Subcategorieën staan iets ingesprongen onder hun hoofdcategorie */
.swipe-filter__sub {
	margin-left: 26px;
}

.swipe-filter__sub .swipe-filter__optie {
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Prijs                                                               */
/* ------------------------------------------------------------------ */

.swipe-prijs {
	padding-top: 6px;
}

.swipe-prijs__balk {
	position: relative;
	height: 24px;
}

.swipe-prijs__balk::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 0;
	right: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--swipe-vlak, #f4f2ed);
}

.swipe-prijs__vulling {
	position: absolute;
	top: 11px;
	height: 3px;
	border-radius: 3px;
	background: var(--swipe-tekst, #111);
	opacity: 0.75;
}

.swipe-prijs__schuif {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.swipe-prijs__schuif:focus {
	outline: none;
}

/* De twee knoppen zijn zwart, dan steken ze af tegen de lichte balk. */
.swipe-prijs__schuif::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--swipe-tekst, #111);
	cursor: grab;
	pointer-events: auto;
}

.swipe-prijs__schuif::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--swipe-tekst, #111);
	cursor: grab;
	pointer-events: auto;
}

.swipe-prijs__schuif:focus-visible::-webkit-slider-thumb {
	outline: 2px solid rgba(17, 17, 17, 0.5);
	outline-offset: 2px;
}

.swipe-prijs__schuif:focus-visible::-moz-range-thumb {
	outline: 2px solid rgba(17, 17, 17, 0.5);
	outline-offset: 2px;
}

.swipe-prijs__schuif::-moz-range-track {
	background: none;
}

.swipe-prijs__velden {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.swipe-prijs__veld {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--swipe-vlak, #f4f2ed);
}

.swipe-prijs__munt {
	font-size: 14px;
	opacity: 0.55;
}

/* Ook hier input ervoor: het thema geeft elk getalveld een rand, een
   afronding en een flinke binnenmarge. */
input.swipe-prijs__invoer {
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 14px;
	color: inherit;
	box-shadow: none;
	-moz-appearance: textfield;
}

.swipe-prijs__invoer::-webkit-outer-spin-button,
.swipe-prijs__invoer::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.swipe-prijs__invoer:focus {
	outline: none;
}

.swipe-prijs__tot {
	font-size: 13px;
	opacity: 0.5;
}

/* ------------------------------------------------------------------ */
/* Boven het grid                                                      */
/* ------------------------------------------------------------------ */

.swipe-shop__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 32px;
}

.swipe-shop__telling {
	margin: 0;
	font-size: 14px;
	opacity: 0.55;
}

.swipe-shop__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
}

.swipe-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--swipe-label, #E6E9E0);
	font-size: 13px;
	line-height: 1;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.swipe-label:hover {
	background: #d8ddcf;
}

.swipe-label__kruis {
	position: relative;
	width: 9px;
	height: 9px;
	opacity: 0.55;
}

.swipe-label__kruis::before,
.swipe-label__kruis::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 9px;
	height: 1px;
	background: currentColor;
}

.swipe-label__kruis::before {
	transform: rotate(45deg);
}

.swipe-label__kruis::after {
	transform: rotate(-45deg);
}

.swipe-shop__leegmaken {
	padding: 7px 4px;
	border: 0;
	background: none;
	font-size: 13px;
	color: inherit;
	opacity: 0.55;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.swipe-shop__leegmaken:hover {
	opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Het grid                                                            */
/* ------------------------------------------------------------------ */

.swipe-shop__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 40px 24px;
	margin-top: 24px;
}

.swipe-shop__inhoud.is-bezig {
	opacity: 0.45;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.swipe-shop__leeg {
	margin-top: 40px;
	padding: 48px 24px;
	border-radius: 12px;
	background: var(--swipe-vlak, #f4f2ed);
	text-align: center;
}

.swipe-shop__leeg p {
	margin: 0 0 12px;
	font-size: 16px;
}

/* Paginering */
.swipe-shop__paginas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 48px;
}

.swipe-shop__pagina {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 8px;
	background: none;
	font-size: 14px;
	color: inherit;
	cursor: pointer;
}

.swipe-shop__pagina:hover {
	background: var(--swipe-vlak, #f4f2ed);
}

.swipe-shop__pagina.is-actief {
	background: var(--swipe-tekst, #111);
	color: #fff;
}

/* ------------------------------------------------------------------ */
/* Mobiel: de filters in een paneel                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* Hier is de filter geen kolom maar een paneel, dus het grid houdt
	   altijd de volle breedte. */
	.swipe-shop.is-filter-open .swipe-shop__lijf {
		grid-template-columns: minmax(0, 1fr);
	}

	.swipe-shop__scherm {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(0, 0, 0, 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0.25s ease;
	}

	/* Ook met de filter "open" blijft dit een paneel dat over de pagina
	   schuift, dus allebei de standen krijgen dezelfde opmaak. */
	.swipe-shop__kolom,
	.swipe-shop.is-filter-open .swipe-shop__kolom {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		width: min(360px, 88vw);
		max-height: none;
		padding: 0;
		background: #fff;
		transform: translateX(-100%);
		transition: transform 0.28s ease;
		overflow: hidden;
	}

	.swipe-shop.is-paneel-open .swipe-shop__scherm {
		opacity: 1;
		visibility: visible;
	}

	.swipe-shop.is-paneel-open .swipe-shop__kolom {
		transform: translateX(0);
	}

	.swipe-shop__paneelkop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex: 0 0 auto;
		padding: 18px 20px;
		font-size: 13px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.swipe-shop__sluiten {
		position: relative;
		width: 32px;
		height: 32px;
		border: 0;
		border-radius: 50%;
		background: var(--swipe-vlak, #f4f2ed);
		cursor: pointer;
	}

	.swipe-shop__sluiten::before,
	.swipe-shop__sluiten::after {
		content: "";
		position: absolute;
		top: 15px;
		left: 9px;
		width: 14px;
		height: 1.5px;
		background: currentColor;
	}

	.swipe-shop__sluiten::before {
		transform: rotate(45deg);
	}

	.swipe-shop__sluiten::after {
		transform: rotate(-45deg);
	}

	.swipe-shop__filters {
		flex: 1 1 auto;
		overflow-y: auto;
		padding: 0 20px;
		overscroll-behavior: contain;
	}

	/* De voet krijgt een eigen vulling, zo scheidt hij zonder schaduw van de
	   lijst die eronderdoor scrollt. */
	.swipe-shop__paneelvoet {
		display: block;
		flex: 0 0 auto;
		padding: 16px 20px;
		background: var(--swipe-vlak, #f4f2ed);
	}

	.swipe-shop__tonen {
		width: 100%;
		padding: 14px;
		border: 0;
		border-radius: 999px;
		background: var(--swipe-tekst, #111);
		color: #fff;
		font-size: 15px;
		cursor: pointer;
	}

	.swipe-shop__grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 32px 16px;
	}
}

@media (max-width: 480px) {
	.swipe-shop__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 12px;
	}
}

/* Het paneel mag de pagina eronder niet laten meescrollen */
body.swipe-shop-vast {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Het roze van Hello Elementor uit onze knoppen houden                */
/* ------------------------------------------------------------------ */

/*
 * hello-elementor/assets/css/reset.css zet op elke knop een roze rand en
 * roze tekst, en op button:hover en button:focus een roze vlak (#c36) met
 * witte tekst. Een gewone klasse wint dat wel, maar alleen voor de staat
 * die je opschrijft: zet je bij hover alleen een doorzichtigheid, dan komt
 * het roze vlak er alsnog onder. Daarom staat hier van elke knop de kleur
 * in alle vier de staten. Zelfde aanpak als bij het wishlist-hartje in
 * 06-wishlist.css.
 *
 * Dit blok staat expres onderaan, zodat het van de regels hierboven wint.
 */

/* Knoppen zonder eigen vlak */
.swipe-shop button.swipe-shop__filterknop,
.swipe-shop button.swipe-shop__filterknop:hover,
.swipe-shop button.swipe-shop__filterknop:focus,
.swipe-shop button.swipe-shop__filterknop:active,
.swipe-shop button.swipe-shop__meer,
.swipe-shop button.swipe-shop__meer:hover,
.swipe-shop button.swipe-shop__meer:focus,
.swipe-shop button.swipe-shop__meer:active,
.swipe-shop button.swipe-filter__kop,
.swipe-shop button.swipe-filter__kop:hover,
.swipe-shop button.swipe-filter__kop:focus,
.swipe-shop button.swipe-filter__kop:active,
.swipe-shop button.swipe-shop__leegmaken,
.swipe-shop button.swipe-shop__leegmaken:hover,
.swipe-shop button.swipe-shop__leegmaken:focus,
.swipe-shop button.swipe-shop__leegmaken:active {
	background: none;
	border: 0;
	color: inherit;
}

/* De labels boven het grid */
.swipe-shop button.swipe-label,
.swipe-shop button.swipe-label:focus,
.swipe-shop button.swipe-label:active {
	background: var(--swipe-label, #E6E9E0);
	border: 0;
	color: inherit;
}

.swipe-shop button.swipe-label:hover {
	background: #d8ddcf;
	color: inherit;
}

/* Paginanummers */
.swipe-shop button.swipe-shop__pagina,
.swipe-shop button.swipe-shop__pagina:focus,
.swipe-shop button.swipe-shop__pagina:active {
	background: none;
	border: 0;
	color: inherit;
}

.swipe-shop button.swipe-shop__pagina:hover {
	background: var(--swipe-vlak, #f4f2ed);
	color: inherit;
}

.swipe-shop button.swipe-shop__pagina.is-actief,
.swipe-shop button.swipe-shop__pagina.is-actief:hover,
.swipe-shop button.swipe-shop__pagina.is-actief:focus,
.swipe-shop button.swipe-shop__pagina.is-actief:active {
	background: var(--swipe-tekst, #111);
	color: #fff;
}

/* Mobiel: het kruisje in het paneel */
.swipe-shop button.swipe-shop__sluiten,
.swipe-shop button.swipe-shop__sluiten:focus,
.swipe-shop button.swipe-shop__sluiten:active {
	background: var(--swipe-vlak, #f4f2ed);
	border: 0;
	color: inherit;
}

.swipe-shop button.swipe-shop__sluiten:hover {
	background: #e7e3da;
	color: inherit;
}

/* Mobiel: Show products */
.swipe-shop button.swipe-shop__tonen,
.swipe-shop button.swipe-shop__tonen:hover,
.swipe-shop button.swipe-shop__tonen:focus,
.swipe-shop button.swipe-shop__tonen:active {
	background: var(--swipe-tekst, #111);
	border: 0;
	color: #fff;
}

/* Vangnet: sommige thema's kennen deze klasse van WordPress niet */
.swipe-shop .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}