/* Schoenenreus — listing. Tokens komen uit sr-tokens.css.
   Typografie/kleur met !important tegen thema-conflicten; layout zonder. */

.sr-listing {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px 24px;
}

.sr-listing * {
	box-sizing: border-box;
}

/* Koraal-getinte header band (breadcrumb + titel + count-pill + actieve filter chips) */
.sr-listing__head {
	background: var(--sr-coral-tint);
	padding: 22px 24px 18px;
	border-radius: var(--sr-radius);
	margin: 16px 0 0;
}

.sr-crumbs {
	font-size: 0.78rem !important;
	color: rgba(74, 27, 12, 0.7) !important;
	margin: 0 0 8px;
	font-family: var(--sr-font-body) !important;
}

.sr-crumbs a {
	color: rgba(74, 27, 12, 0.7) !important;
	text-decoration: none !important;
}

.sr-crumbs a:hover {
	text-decoration: underline !important;
}

.sr-head__row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.sr-head__icon {
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: var(--sr-mint);
	color: var(--sr-mint-text) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.sr-head__icon svg {
	width: 20px;
	height: 20px;
}

.sr-head__icon--cobalt { background: var(--sr-cobalt); color: var(--sr-white) !important; }
.sr-head__icon--yellow { background: var(--sr-yellow); color: var(--sr-yellow-text) !important; }
.sr-head__icon--purple { background: var(--sr-purple); color: var(--sr-white) !important; }

.sr-listing__title {
	margin: 0;
	font-size: 1.75rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}

.sr-count {
	display: inline-block;
	background: var(--sr-white);
	color: var(--sr-coral) !important;
	font-family: var(--sr-font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 500 !important;
	padding: 4px 12px;
	border-radius: var(--sr-radius-pill);
	box-shadow: inset 0 0 0 1px var(--sr-coral);
}

/* Actieve-filter chips bovenin de header band (koraal, met × om te verwijderen) */
.sr-active {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: 0.8rem;
}

.sr-active__label {
	font-size: 0.78rem !important;
	color: rgba(74, 27, 12, 0.7) !important;
	font-family: var(--sr-font-body) !important;
	margin-right: 2px;
}

.sr-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--sr-coral);
	color: var(--sr-white) !important;
	font-family: var(--sr-font-body) !important;
	font-size: 0.74rem !important;
	font-weight: 500 !important;
	padding: 4px 9px 4px 11px;
	border-radius: var(--sr-radius-pill);
	text-decoration: none !important;
	line-height: 1.2 !important;
}

.sr-chip:hover {
	filter: brightness(0.96);
}

.sr-chip__x {
	display: inline-flex;
	width: 12px;
	height: 12px;
}

.sr-chip__x svg {
	width: 12px;
	height: 12px;
}

.sr-reset-link {
	margin-left: 8px;
	font-size: 0.78rem !important;
	color: rgba(74, 27, 12, 0.7) !important;
	text-decoration: underline !important;
	font-family: var(--sr-font-body) !important;
}

/* Sub-bar: stats + sortering, vlak onder de header band */
.sr-subbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0 18px;
	flex-wrap: wrap;
}

.sr-subbar__stats {
	font-size: 0.8rem !important;
	color: var(--sr-muted) !important;
	font-family: var(--sr-font-body) !important;
}

.sr-subbar__sort label {
	font-size: 0.8rem !important;
	color: var(--sr-muted) !important;
	margin-right: 6px;
}

.sr-subbar__sort select {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-sm);
	padding: 6px 10px;
	font-family: var(--sr-font-body) !important;
	font-size: 0.8rem !important;
	color: var(--sr-ink) !important;
	cursor: pointer;
}

/* Layout: sidebar + main */
.sr-listing__layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 28px;
	align-items: start;
}

@media (max-width: 820px) {
	.sr-listing__layout {
		grid-template-columns: 1fr;
	}
}

/* Filter-sidebar */
.sr-filters {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	padding: 18px;
	font-size: 0.88rem !important;
	position: sticky;
	top: 16px;
}

.sr-filters__title {
	font-family: var(--sr-font-head) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	color: var(--sr-ink) !important;
	margin-bottom: 14px;
}

.sr-filters__row {
	margin-bottom: 18px;
}

.sr-filters__row:last-child {
	margin-bottom: 0;
}

.sr-filters__label {
	display: block;
	font-family: var(--sr-font-head) !important;
	font-weight: 600 !important;
	font-size: 0.72rem !important;
	color: var(--sr-muted) !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 9px;
}

/* Chips (merk/soort/gender) — verborgen checkbox + zichtbare pill */
.sr-fchips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.sr-fchip {
	display: inline-flex;
	cursor: pointer;
}

.sr-fchip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.sr-fchip__txt {
	display: inline-block;
	padding: 5px 11px;
	border-radius: var(--sr-radius-pill);
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	font-family: var(--sr-font-body) !important;
	font-size: 0.78rem !important;
	color: var(--sr-ink) !important;
	line-height: 1.2 !important;
	transition: background .12s, border-color .12s, color .12s;
}

.sr-fchip:hover .sr-fchip__txt {
	border-color: var(--sr-coral);
}

.sr-fchip input:checked + .sr-fchip__txt {
	background: var(--sr-coral);
	border-color: var(--sr-coral);
	color: var(--sr-white) !important;
	font-weight: 500 !important;
}

.sr-fchip input:focus-visible + .sr-fchip__txt {
	outline: 2px solid var(--sr-coral);
	outline-offset: 2px;
}

/* Maat — chip-grid (vaste kolommen, gelijke vierkante chips) */
.sr-fgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
}

.sr-fgrid .sr-fchip {
	display: block;
}

.sr-fgrid .sr-fchip__txt {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 4px 6px;
	border-radius: var(--sr-radius-sm);
	text-align: center;
	white-space: nowrap;
	font-size: 0.72rem !important;
	line-height: 1.1 !important;
}

/* Kleur — swatches (gekleurde rondjes, koraal-ring bij selectie) */
.sr-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sr-swatch {
	display: inline-flex;
	cursor: pointer;
}

.sr-swatch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.sr-swatch__dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-block;
	box-shadow: inset 0 0 0 1px rgba(35, 32, 38, 0.12);
	transition: box-shadow .12s, transform .12s;
}

.sr-swatch__dot--light {
	box-shadow: inset 0 0 0 1px var(--sr-line);
}

.sr-swatch__dot--multi {
	background: conic-gradient(#FF6A4D, #FFC53D, #1FC4A0, #3D6CF0, #8A5CF0, #E86BA8, #FF6A4D);
}

.sr-swatch:hover .sr-swatch__dot {
	transform: scale(1.08);
}

.sr-swatch input:checked + .sr-swatch__dot {
	box-shadow: 0 0 0 2px var(--sr-coral);
}

.sr-swatch input:focus-visible + .sr-swatch__dot {
	box-shadow: 0 0 0 2px var(--sr-coral), 0 0 0 4px rgba(255, 106, 77, 0.3);
}

/* Prijs — min/max met €-prefix */
.sr-price-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.sr-price-cur {
	color: var(--sr-muted) !important;
	font-size: 0.85rem !important;
}

.sr-price-sep {
	color: var(--sr-muted) !important;
}

.sr-filters input[type="number"] {
	width: 100%;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-sm);
	font-family: var(--sr-font-body) !important;
	font-size: 0.82rem !important;
}

/* Acties onderaan de filter-kaart */
.sr-filters__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 4px;
}

.sr-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sr-coral);
	color: var(--sr-white) !important;
	border: 0;
	border-radius: var(--sr-radius-sm);
	padding: 9px 16px;
	font-family: var(--sr-font-head) !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none !important;
	font-size: 0.85rem !important;
}

.sr-btn:hover {
	filter: brightness(0.96);
}

/* Productgrid */
.sr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 14px;
}

.sr-card {
	display: flex;
	flex-direction: column;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius);
	overflow: hidden;
	text-decoration: none !important;
	color: var(--sr-ink) !important;
	transition: border-color .15s, transform .15s, box-shadow .15s;
	position: relative;
}

.sr-card:hover {
	border-color: var(--sr-coral);
	box-shadow: var(--sr-shadow);
	transform: translateY(-2px);
}

.sr-card__status {
	position: absolute;
	top: 9px;
	left: 9px;
	z-index: 1;
}

.sr-card__img {
	height: 200px;
	padding: 10%;
	background: var(--sr-surface-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	margin: 8px 8px 0;
	overflow: hidden;
}

.sr-card__img img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.sr-card__body {
	padding: 10px 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.sr-card__brand {
	font-size: 0.72rem !important;
	color: var(--sr-muted) !important;
	line-height: 1.2 !important;
}

.sr-card__title {
	margin: 0;
	font-family: var(--sr-font-head) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

.sr-card__priceline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.sr-card__price {
	font-family: var(--sr-font-head) !important;
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
}

.sr-card__from {
	display: block;
	font-size: 0.7rem !important;
	font-weight: 400 !important;
	color: var(--sr-muted) !important;
	margin-bottom: 1px;
	line-height: 1 !important;
}

.sr-card__tomax {
	display: block;
	font-size: 0.7rem !important;
	color: var(--sr-muted) !important;
	font-weight: 400 !important;
	margin-top: 2px;
	line-height: 1 !important;
}

.sr-card__was {
	display: block;
	font-size: 0.75rem !important;
	color: var(--sr-muted) !important;
	font-weight: 400 !important;
	text-decoration: line-through;
	margin-top: 2px;
	line-height: 1 !important;
}

.sr-card__sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin-top: 4px;
}

.sr-card__sizes .sr-size-chip {
	background: var(--sr-bg);
	border: 1px solid var(--sr-line);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: 0.68rem !important;
	color: var(--sr-muted) !important;
	font-family: var(--sr-font-body) !important;
}

/* Paginatie */
.sr-pagination {
	margin-top: 28px;
	display: flex;
	justify-content: center;
}

.sr-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0;
	margin: 0;
}

.sr-pagination a,
.sr-pagination span {
	display: inline-block;
	padding: 6px 12px;
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-sm);
	text-decoration: none !important;
	color: var(--sr-ink) !important;
	font-family: var(--sr-font-body) !important;
	font-size: 0.85rem !important;
}

.sr-pagination a:hover {
	border-color: var(--sr-coral);
	color: var(--sr-coral) !important;
}

.sr-pagination .current {
	background: var(--sr-coral);
	color: var(--sr-white) !important;
	border-color: var(--sr-coral);
	font-weight: 500 !important;
}

/* Lege resultaten */
.sr-empty {
	background: var(--sr-white);
	border: 1px solid var(--sr-line);
	border-radius: var(--sr-radius-lg);
	padding: 40px 24px 32px;
	text-align: center;
}

.sr-empty__mascot {
	height: 132px;
	width: auto;
	margin-bottom: 10px;
}

.sr-empty__icon {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--sr-mint-tint);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	color: #0F6E56 !important;
}

.sr-empty__icon svg {
	width: 36px;
	height: 36px;
}

.sr-empty h2 {
	font-family: var(--sr-font-head) !important;
	font-size: 1.15rem !important;
	font-weight: 600 !important;
	margin: 0 0 8px !important;
	color: var(--sr-ink) !important;
	letter-spacing: -0.01em !important;
}

.sr-empty p {
	font-size: 0.88rem !important;
	color: var(--sr-muted) !important;
	margin: 0 auto 16px !important;
	max-width: 400px;
	line-height: 1.55 !important;
}

.sr-empty strong {
	color: var(--sr-ink) !important;
}

/* Mobile */
@media (max-width: 600px) {
	.sr-listing__head {
		padding: 16px 18px 14px;
		border-radius: var(--sr-radius);
	}

	.sr-listing__title {
		font-size: 1.4rem !important;
	}

	.sr-head__icon {
		width: 28px;
		height: 28px;
		border-radius: 9px;
	}

	.sr-head__icon svg {
		width: 16px;
		height: 16px;
	}

	.sr-subbar {
		padding: 12px 4px 16px;
	}

	.sr-filters {
		position: static;
	}

	.sr-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.sr-card__img {
		height: 140px;
		margin: 6px 6px 0;
	}

	.sr-fgrid {
		grid-template-columns: repeat(5, 1fr);
	}

	.sr-card__body {
		padding: 8px 10px 12px;
	}
}

/* ---------------------------------------------------------------------
 * Hover / interactie — premium-gevoel (zachte transities, koraal-accent)
 * ------------------------------------------------------------------- */

/* Productkaart: subtiele foto-inzoom bovenop de bestaande lift */
.sr-card__img img {
	transition: transform .25s ease;
}

.sr-card:hover .sr-card__img img {
	transform: scale(1.04);
}

/* Sorteer-dropdown */
.sr-subbar__sort select {
	transition: border-color .15s;
	cursor: pointer;
}

.sr-subbar__sort select:hover {
	border-color: var(--sr-coral);
}

/* Reset/wissen-links */
.sr-reset-link {
	transition: color .15s;
}

.sr-reset-link:hover {
	color: var(--sr-coral) !important;
}

@media (hover: none) {
	.sr-card:hover {
		transform: none;
		box-shadow: none;
	}
	.sr-card:hover .sr-card__img img {
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Reset tegen thema-/Elementor-bleed op onze eigen form-controls.
 * Elementor/themes stylen vaak input/select/button site-breed; deze regels
 * houden onze filters en de hero-zoekbalk strak en consistent.
 * ------------------------------------------------------------------- */
.sr-filters input,
.sr-filters select,
.sr-filters button,
.sr-subbar__sort select,
.sr-hero__search input,
.sr-hero__search button {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	line-height: 1.2 !important;
	font-family: var(--sr-font-body) !important;
}

.sr-hero__search input {
	border: 0 !important;
	background: transparent !important;
}

.sr-filters input[type="number"] {
	background: var(--sr-white) !important;
}

/* Webkit search-velden: verwijder de eigen clear/decoration-knopjes. */
.sr-filters input[type="search"]::-webkit-search-decoration,
.sr-filters input[type="search"]::-webkit-search-cancel-button,
.sr-hero__search input[type="search"]::-webkit-search-decoration,
.sr-hero__search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.sr-filters input:focus,
.sr-filters select:focus,
.sr-subbar__sort select:focus,
.sr-hero__search input:focus {
	outline: none !important;
	box-shadow: none !important;
}

.sr-filters input:focus-visible,
.sr-subbar__sort select:focus-visible {
	outline: 2px solid var(--sr-coral) !important;
	outline-offset: 1px;
}

/* Eigen chevron terug op de sorteer-select (appearance:none haalt 'm weg). */
.sr-subbar__sort select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6770' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 14px !important;
	padding-right: 30px !important;
}

/* ---------------------------------------------------------------------
 * Merk-filter: "+ N meer merken"-uitklap.
 * ------------------------------------------------------------------- */
.sr-fmore {
	margin-top: 8px;
}

.sr-fmore__toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-family: var(--sr-font-body) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: var(--sr-coral) !important;
	padding: 4px 2px;
	user-select: none;
}

.sr-fmore__toggle::-webkit-details-marker {
	display: none;
}

.sr-fmore__toggle:hover {
	text-decoration: underline;
}

.sr-fmore[open] .sr-fmore__toggle {
	margin-bottom: 8px;
}

.sr-fmore__chips {
	margin-top: 4px;
}

/* ---------------------------------------------------------------------
 * Productkaart-afbeelding: vaste hoogte op desktop voor nette uitlijning.
 * ------------------------------------------------------------------- */
@media (min-width: 861px) {
	.sr-card__img img {
		height: 180px;
	}
}

/* ---------------------------------------------------------------------
 * Merken-overzicht (/merken/) — alfabetisch.
 * ------------------------------------------------------------------- */
.sr-brands-index__intro {
	margin: 8px 0 0;
	color: var(--sr-muted);
	font-size: 0.95rem;
	line-height: 1.5;
	max-width: 60ch;
}

.sr-brands-az {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 4px 0 8px;
}

.sr-brands-az__letter {
	font-family: var(--sr-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--sr-coral);
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--sr-line);
}

.sr-brandchip__n {
	color: var(--sr-muted);
	font-size: 0.78em;
	margin-left: 5px;
}