/* Tuingigant — design tokens (de huisstijl op één plek).
   ~70% neutraal, ~30% kleur; tuin-groen leidt, koraal is de tegenhanger
   op conversiepunten (koopknoppen, sale).

   Let op: de variabele heet historisch --sr-coral maar draagt nu het
   PRIMAIRE groen; zo kleurt de hele bestaande opmaak in één keer om.
   Het echte koraal leeft door als --sr-accent. */

:root {
	/* Basis (warm-neutraal met een groene ondertoon) */
	--sr-bg: #F8FAF6;
	--sr-white: #FFFFFF;
	--sr-ink: #20281F;
	--sr-muted: #66705F;
	--sr-line: #E5EAE0;
	--sr-surface-soft: #EEF3EA;

	/* Primair: tuin-groen (via de historische --sr-coral-slot) */
	--sr-coral: #2E7D4E;
	--sr-yellow: #FFC53D;
	--sr-mint: #1FC4A0;
	--sr-purple: #7C9A4E; /* olijf — vervangt paars in de confetti */
	--sr-cobalt: #3D6CF0;

	/* Tegenhanger: het Schoenenreus-koraal als accent */
	--sr-accent: #FF6A4D;
	--sr-accent-tint: #FFE4DC;
	--sr-accent-text: #4A1B0C;

	/* 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: #E7F2EA;
	--sr-coral-text: #16432A;
	--sr-mint-tint: #E1F5EE;
	--sr-mint-text: #04342C;
	--sr-yellow-tint: #FFF1D1;
	--sr-yellow-text: #412402;
	--sr-purple-tint: #EFF4E6;
	--sr-purple-text: #33421C;
	--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 {
	/* Korting = het koraal-accent: knalt op de groene huisstijl. */
	background: var(--sr-accent);
	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 {
	/* Primaire koopknop = het koraal-accent (de tegenhanger van het groen). */
	background: var(--sr-accent);
	color: var(--sr-white) !important;
	border-color: var(--sr-accent);
	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);
}