/* =============================================================
   Snuffle Pets — statische pagina's
   (klantenservice, verlanglijst, merken, snuffel-club)
   Bouwt voort op de tokens en componenten uit main.css.
   Mobile-first, desktop vanaf 768px.
   ============================================================= */

/* ---------- Gedeelde pagina-hero (zacht merkvlak) ---------- */

.sc-pagehero {
	background: var(--sc-brand-light);
	border-radius: var(--sc-radius-m);
	padding: 32px 20px;
	text-align: center;
	margin: 14px 0 32px;
}
.sc-pagehero h1 { margin-bottom: 8px; }
.sc-pagehero p { max-width: 620px; margin: 0 auto; }
.sc-pagehero__intro { max-width: 620px; margin: 0 auto; }
.sc-pagehero__intro p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
	.sc-pagehero { padding: 48px 40px; margin: 20px 0 40px; }
}

/* ---------- Klantenservice: onderwerp-tegels ---------- */

.sc-topicgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.sc-topicgrid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.sc-topictile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 104px;
	height: 100%;
	padding: 20px 12px;
	background: var(--sc-bg);
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-m);
	font-weight: 700;
	text-align: center;
	transition: border-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
}
.sc-topictile .sc-icon { color: var(--sc-brand); }
.sc-topictile:hover {
	border-color: var(--sc-brand);
	color: var(--sc-brand);
	box-shadow: var(--sc-shadow-soft);
}

/* Ankers onder de sticky header laten uitkomen */
.sc-servicefaq, .sc-contactblock { scroll-margin-top: 130px; }

.sc-servicefaq { max-width: 860px; margin: 0 auto 48px; }
.sc-servicefaq h2 { margin-top: 3rem; }

/* Contactblok */
.sc-contactblock {
	background: var(--sc-bg-light);
	border-radius: var(--sc-radius-m);
	padding: 32px 20px;
	text-align: center;
}
.sc-contactblock h2 { margin-bottom: 6px; }
.sc-contactblock > p { color: var(--sc-text-muted); margin-bottom: 20px; }
.sc-contactblock__rows {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.sc-contactblock__rows li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.5rem;
	font-weight: 600;
}
.sc-contactblock__rows .sc-icon { color: var(--sc-brand); }
.sc-contactblock__rows a:hover { color: var(--sc-brand); text-decoration: underline; }
.sc-contactblock .sc-socials { border-bottom: 0; padding-bottom: 0; }

@media (min-width: 768px) {
	.sc-contactblock { padding: 40px; }
	.sc-contactblock__rows { flex-direction: row; justify-content: center; gap: 36px; }
}

/* ---------- Verlanglijst ---------- */

.sc-wishlistbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}
.sc-wishlistbar__count { color: var(--sc-text-muted); }
.sc-wishlistbar__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	font-family: var(--sc-font-body);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--sc-text-muted);
}
.sc-wishlistbar__clear:hover { color: var(--sc-error); }

.sc-wishlistgrid { margin-bottom: 48px; }
.sc-wishlistgrid .sc-wishlist__loading {
	grid-column: 1 / -1;
	margin: 0;
	padding: 40px 0;
	text-align: center;
	color: var(--sc-text-muted);
}
.sc-wishlistgrid .sc-card.is-removing {
	opacity: 0;
	transform: scale(.96);
	transition: opacity .25s ease-out, transform .25s ease-out;
}

/* ---------- Merken ---------- */

.sc-brandgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 0 0 48px;
}
@media (min-width: 768px) {
	.sc-brandgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 992px) {
	.sc-brandgrid { grid-template-columns: repeat(4, 1fr); }
}

/* Grote variant van de bestaande merktegel (main.css) */
.sc-brandtile--lg { padding: 28px 16px; font-size: 1.6rem; }
.sc-brandtile--lg .sc-brandtile__logo { width: 88px; height: 88px; font-size: 3.4rem; }
.sc-brandtile__count { font-size: 1.2rem; font-weight: 400; color: var(--sc-text-muted); }

/* ---------- Snuffle Club ---------- */

.sc-clubhero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	background: var(--sc-brand);
	color: #fff;
	border-radius: var(--sc-radius-m);
	padding: 44px 20px;
	text-align: center;
	margin: 14px 0 48px;
}
.sc-clubhero .sc-icon { color: var(--sc-accent); }
.sc-clubhero h1 { color: #fff; margin: 6px 0 4px; }
.sc-clubhero p { max-width: 520px; margin: 0 0 18px; opacity: .92; }

@media (min-width: 768px) {
	.sc-clubhero { padding: 56px 40px; }
}

.sc-clubpage section { margin: 0 0 48px; }
.sc-clubpage section > h2 { text-align: center; margin-bottom: 24px; }

/* Voordelen-grid */
.sc-clubperks { display: grid; gap: 14px; }
@media (min-width: 768px) {
	.sc-clubperks { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.sc-clubperk {
	border: 1px solid var(--sc-border);
	border-radius: var(--sc-radius-m);
	padding: 26px 20px;
	text-align: center;
}
.sc-clubperk__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--sc-brand-light);
	color: var(--sc-brand);
	margin-bottom: 12px;
}
.sc-clubperk h3 { margin-bottom: 6px; }
.sc-clubperk p { margin: 0; color: var(--sc-text-muted); }

/* 3-stappenblok */
.sc-clubsteps {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.sc-clubsteps { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.sc-clubstep {
	background: var(--sc-bg-light);
	border-radius: var(--sc-radius-m);
	padding: 24px 20px;
	text-align: center;
}
.sc-clubstep__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sc-accent);
	color: var(--sc-text);
	font-weight: 900;
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.sc-clubstep h3 { margin-bottom: 6px; }
.sc-clubstep p { margin: 0; color: var(--sc-text-muted); }

/* Besparing-highlight */
.sc-clubmath {
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--sc-success-bg);
	border-radius: var(--sc-radius-m);
	padding: 28px 20px;
}
.sc-clubmath h2 { text-align: left; margin-bottom: 10px; }
.sc-clubmath__text p { margin: 0; }
.sc-clubmath__text strong { color: var(--sc-success); }
.sc-clubmath__sum {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	text-align: center;
}
.sc-clubmath__amount {
	font-family: var(--sc-font-heading);
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 1;
	color: var(--sc-success);
}
.sc-clubmath__label { font-size: 1.2rem; color: var(--sc-text-muted); }

@media (min-width: 768px) {
	.sc-clubmath { flex-direction: row; align-items: center; padding: 36px 40px; }
	.sc-clubmath__text { flex: 1; }
	.sc-clubmath__sum { min-width: 220px; }
}

.sc-clubfaq { max-width: 860px; margin: 0 auto 48px; }

/* Afsluitende CTA-band */
.sc-clubcta {
	background: var(--sc-brand);
	color: #fff;
	border-radius: var(--sc-radius-m);
	padding: 36px 20px;
	text-align: center;
	margin-bottom: 48px;
}
.sc-clubcta h2 { color: #fff; margin-bottom: 6px; }
.sc-clubcta p { opacity: .92; margin-bottom: 18px; }