/* Schoenenreus — design tokens (de huisstijl op één plek).
   ~70% neutraal, ~30% kleur; koraal leidt. */

:root {
	/* Basis */
	--sr-bg: #FBFAF7;
	--sr-white: #FFFFFF;
	--sr-ink: #232026;
	--sr-muted: #6B6770;
	--sr-line: #ECEAE3;
	--sr-surface-soft: #F1EFE8;

	/* Accenten (multicolor confetti); koraal is primair */
	--sr-coral: #FF6A4D;
	--sr-yellow: #FFC53D;
	--sr-mint: #1FC4A0;
	--sr-purple: #8A5CF0;
	--sr-cobalt: #3D6CF0;

	/* Tinted varianten — voor gekleurde stat-cards, headers en accent-vlakken.
	   Tekst-kleur die er goed op leest = sr-<kleur>-text (donkerste shade). */
	--sr-coral-tint: #FFE4DC;
	--sr-coral-text: #4A1B0C;
	--sr-mint-tint: #E1F5EE;
	--sr-mint-text: #04342C;
	--sr-yellow-tint: #FFF1D1;
	--sr-yellow-text: #412402;
	--sr-purple-tint: #EEEDFE;
	--sr-purple-text: #26215C;
	--sr-cobalt-tint: #E6F1FB;
	--sr-cobalt-text: #042C53;

	/* Vorm */
	--sr-radius: 14px;
	--sr-radius-sm: 10px;
	--sr-radius-lg: 16px;
	--sr-radius-pill: 999px;
	--sr-shadow: 0 6px 20px rgba(35, 32, 38, 0.08);

	/* Typografie */
	--sr-font-head: "Poppins", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sr-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Body + koppen op onze pagina's (typografie -> !important tegen thema-conflicten) */
.sr-listing,
.sr-pdp {
	font-family: var(--sr-font-body) !important;
	color: var(--sr-ink) !important;
}

.sr-listing__title,
.sr-pdp__title,
.sr-pdp h2,
.sr-listing h2,
.sr-filters__label,
.sr-section-title {
	font-family: var(--sr-font-head) !important;
	letter-spacing: -0.01em !important;
}

/* "X shops"-badge */
.sr-badge {
	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.78rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 4px 11px;
	border-radius: var(--sr-radius-pill);
	white-space: nowrap;
}

.sr-badge svg {
	width: 13px;
	height: 13px;
	flex: none;
}

.sr-badge--outline {
	background: var(--sr-white);
	color: var(--sr-coral) !important;
	box-shadow: inset 0 0 0 1px var(--sr-coral);
}

/* Status-badges (op productkaarten, naast de X shops-badge) */
.sr-status {
	display: inline-flex;
	align-items: center;
	font-family: var(--sr-font-body) !important;
	font-size: 0.72rem !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	padding: 3px 9px;
	border-radius: var(--sr-radius-pill);
	white-space: nowrap;
}

.sr-status--sale {
	background: var(--sr-coral);
	color: var(--sr-white) !important;
}

.sr-status--tip {
	background: var(--sr-mint);
	color: var(--sr-mint-text) !important;
}

.sr-status--last {
	background: var(--sr-yellow);
	color: var(--sr-yellow-text) !important;
}

/* Gedeelde knoppen/CTA's */
.sr-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--sr-white);
	color: var(--sr-ink) !important;
	font-family: var(--sr-font-body) !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	border: 1px solid var(--sr-ink);
	border-radius: var(--sr-radius-sm);
	padding: 8px 14px;
	cursor: pointer;
	font-size: 0.88rem !important;
	transition: border-color .15s, color .15s, background .15s, transform .15s;
}

.sr-cta:not(.sr-cta--primary):hover {
	border-color: var(--sr-coral);
	color: var(--sr-coral) !important;
	background: var(--sr-coral-tint);
}

.sr-cta--primary {
	background: var(--sr-coral);
	color: var(--sr-white) !important;
	border-color: var(--sr-coral);
	padding: 11px 20px;
	font-family: var(--sr-font-head) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	border-radius: 12px;
}

.sr-cta--primary:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
}