/*!
 * Schoolspullen24 — design tokens + @font-face
 *
 * In het block-theme leverde theme.json automatisch de --wp--preset--*
 * variabelen + @font-face declaraties. In dit classic theme doen we dat
 * zelf, met dezelfde namen, zodat de bestaande sp24-extras.css (3169
 * regels, ~426 var()-references) zonder aanpassing blijft werken.
 *
 * Volgorde van laden:
 *   1. sp24-tokens.css   ← dit bestand
 *   2. sp24-extras.css
 *
 * Eén plek om kleur / typografie / spacing / shadows aan te passen.
 */

/* ─── @font-face — self-hosted, latin subset, WOFF2 ────────────────── */

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/sora-400.woff2") format("woff2");
}
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/sora-500.woff2") format("woff2");
}
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/sora-700.woff2") format("woff2");
}
@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/sora-800.woff2") format("woff2");
}
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/geist-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "Geist Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/geist-mono-500.woff2") format("woff2");
}

/* ─── Design tokens — `:root` ──────────────────────────────────────── */

:root {
	/* Colors — 18 tokens, exact dezelfde palette als oude theme.json */
	--wp--preset--color--paper:          #ffffff;
	--wp--preset--color--paper-2:        #fbf6ea;
	--wp--preset--color--paper-3:        #f4ecd8;
	--wp--preset--color--taupe:          #d9cdb0;
	--wp--preset--color--taupe-soft:     #ece2c8;
	--wp--preset--color--taupe-ink:      #8a7d63;
	--wp--preset--color--ink:            #1a1a1f;
	--wp--preset--color--ink-soft:       #4a4a52;
	--wp--preset--color--primary:        #7eacb8;
	--wp--preset--color--primary-ink:    #4f7d89;
	--wp--preset--color--primary-tint:   #e7eff2;
	--wp--preset--color--primary-tint-2: #d3e2e6;
	--wp--preset--color--accent:         #2b6b5a;
	--wp--preset--color--accent-ink:     #1c4a3e;
	--wp--preset--color--accent-tint:    #e3ece9;
	--wp--preset--color--success:        #2b6b5a;
	--wp--preset--color--warning:        #c98a1f;
	--wp--preset--color--error:          #b04a3e;

	/* Font families */
	--wp--preset--font-family--sora:       "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--wp--preset--font-family--geist-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Font sizes — fluid via clamp() voor h2/h1/display/display-xl, vast voor de rest */
	--wp--preset--font-size--eyebrow:    11px;
	--wp--preset--font-size--counter:    12px;
	--wp--preset--font-size--small:      13px;
	--wp--preset--font-size--counter-lg: 14px;
	--wp--preset--font-size--body:       15px;
	--wp--preset--font-size--h4:         16px;
	--wp--preset--font-size--body-lg:    clamp(15px, 1.0625rem, 17px);
	--wp--preset--font-size--h3:         clamp(18px, 1.25rem, 20px);
	--wp--preset--font-size--h2:         clamp(24px, 2.5vw + 12px, 30px);
	--wp--preset--font-size--h1:         clamp(32px, 4vw + 12px, 44px);
	--wp--preset--font-size--display:    clamp(40px, 5vw + 16px, 60px);
	--wp--preset--font-size--display-xl: clamp(48px, 8vw + 12px, 92px);

	/* Spacing — 13 steps */
	--wp--preset--spacing--1:  4px;
	--wp--preset--spacing--2:  8px;
	--wp--preset--spacing--3:  12px;
	--wp--preset--spacing--4:  16px;
	--wp--preset--spacing--5:  20px;
	--wp--preset--spacing--6:  24px;
	--wp--preset--spacing--7:  32px;
	--wp--preset--spacing--8:  40px;
	--wp--preset--spacing--9:  48px;
	--wp--preset--spacing--10: 64px;
	--wp--preset--spacing--11: 80px;
	--wp--preset--spacing--12: 96px;
	--wp--preset--spacing--13: 120px;

	/* Shadows */
	--wp--preset--shadow--sp1: 0 1px 0 rgba(34,28,18,.04), 0 2px 6px rgba(34,28,18,.05);
	--wp--preset--shadow--sp2: 0 2px 0 rgba(34,28,18,.04), 0 14px 32px rgba(34,28,18,.08);

	/* Custom radius tokens (in oude theme.json onder settings.custom.radius) */
	--wp--custom--radius--sm:   4px;
	--wp--custom--radius--base: 10px;
	--wp--custom--radius--card: 14px;
	--wp--custom--radius--lg:   18px;
	--wp--custom--radius--xl:   28px;
	--wp--custom--radius--pill: 999px;
	--wp--custom--ruled:        28px;

	/* Layout container widths */
	--wp--style--global--content-size: 720px;
	--wp--style--global--wide-size:    1280px;
}

/* ─── Globale resets / base — wat eerder via theme.json "styles" liep ─── */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sora);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

img, svg, video { max-width: 100%; height: auto; }

a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
}
a:hover,
a:focus {
	color: var(--wp--preset--color--accent);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--sora);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 0.5em;
}
h1 { font-size: var(--wp--preset--font-size--h1); letter-spacing: -0.025em; line-height: 1.05; }
h2 { font-size: var(--wp--preset--font-size--h2); letter-spacing: -0.02em;  line-height: 1.15; }
h3 { font-size: var(--wp--preset--font-size--h3); letter-spacing: -0.01em;  line-height: 1.3;  }
h4 { font-size: var(--wp--preset--font-size--h4); letter-spacing: -0.005em; line-height: 1.35; }
h5 { font-size: var(--wp--preset--font-size--body-lg); line-height: 1.4; }
h6 { font-size: var(--wp--preset--font-size--body);    line-height: 1.4; }

p, ul, ol { margin: 0 0 1em; }

/* Default core button (block-editor in post content) */
.wp-element-button,
.wp-block-button__link {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 14px 22px;
	font-family: var(--wp--preset--font-family--sora);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body);
	letter-spacing: -0.005em;
	line-height: 1;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}

/* Heeft-classes voor block-editor compatibility — generieke generator zodat
   blocks die kleur kiezen via .has-{slug}-color en .has-{slug}-background-color
   in post-content blijven werken zonder dat WP zelf de classes genereert. */
.has-paper-color          { color: var(--wp--preset--color--paper); }
.has-paper-2-color        { color: var(--wp--preset--color--paper-2); }
.has-paper-3-color        { color: var(--wp--preset--color--paper-3); }
.has-taupe-color          { color: var(--wp--preset--color--taupe); }
.has-taupe-soft-color     { color: var(--wp--preset--color--taupe-soft); }
.has-taupe-ink-color      { color: var(--wp--preset--color--taupe-ink); }
.has-ink-color            { color: var(--wp--preset--color--ink); }
.has-ink-soft-color       { color: var(--wp--preset--color--ink-soft); }
.has-primary-color        { color: var(--wp--preset--color--primary); }
.has-primary-ink-color    { color: var(--wp--preset--color--primary-ink); }
.has-primary-tint-color   { color: var(--wp--preset--color--primary-tint); }
.has-primary-tint-2-color { color: var(--wp--preset--color--primary-tint-2); }
.has-accent-color         { color: var(--wp--preset--color--accent); }
.has-accent-ink-color     { color: var(--wp--preset--color--accent-ink); }
.has-accent-tint-color    { color: var(--wp--preset--color--accent-tint); }
.has-success-color        { color: var(--wp--preset--color--success); }
.has-warning-color        { color: var(--wp--preset--color--warning); }
.has-error-color          { color: var(--wp--preset--color--error); }

.has-paper-background-color          { background-color: var(--wp--preset--color--paper); }
.has-paper-2-background-color        { background-color: var(--wp--preset--color--paper-2); }
.has-paper-3-background-color        { background-color: var(--wp--preset--color--paper-3); }
.has-taupe-background-color          { background-color: var(--wp--preset--color--taupe); }
.has-taupe-soft-background-color     { background-color: var(--wp--preset--color--taupe-soft); }
.has-taupe-ink-background-color      { background-color: var(--wp--preset--color--taupe-ink); }
.has-ink-background-color            { background-color: var(--wp--preset--color--ink); }
.has-ink-soft-background-color       { background-color: var(--wp--preset--color--ink-soft); }
.has-primary-background-color        { background-color: var(--wp--preset--color--primary); }
.has-primary-ink-background-color    { background-color: var(--wp--preset--color--primary-ink); }
.has-primary-tint-background-color   { background-color: var(--wp--preset--color--primary-tint); }
.has-primary-tint-2-background-color { background-color: var(--wp--preset--color--primary-tint-2); }
.has-accent-background-color         { background-color: var(--wp--preset--color--accent); }
.has-accent-ink-background-color     { background-color: var(--wp--preset--color--accent-ink); }
.has-accent-tint-background-color    { background-color: var(--wp--preset--color--accent-tint); }
.has-success-background-color        { background-color: var(--wp--preset--color--success); }
.has-warning-background-color        { background-color: var(--wp--preset--color--warning); }
.has-error-background-color          { background-color: var(--wp--preset--color--error); }

/* Font-size has-* classes — voor block-editor in post content */
.has-eyebrow-font-size    { font-size: var(--wp--preset--font-size--eyebrow); }
.has-small-font-size      { font-size: var(--wp--preset--font-size--small); }
.has-body-font-size       { font-size: var(--wp--preset--font-size--body); }
.has-body-lg-font-size    { font-size: var(--wp--preset--font-size--body-lg); }
.has-h4-font-size         { font-size: var(--wp--preset--font-size--h4); }
.has-h3-font-size         { font-size: var(--wp--preset--font-size--h3); }
.has-h2-font-size         { font-size: var(--wp--preset--font-size--h2); }
.has-h1-font-size         { font-size: var(--wp--preset--font-size--h1); }
.has-display-font-size    { font-size: var(--wp--preset--font-size--display); }
.has-display-xl-font-size { font-size: var(--wp--preset--font-size--display-xl); }

/* ╔══════ Classic-theme overrides ══════════════════════════════════════
   sp24-extras.css verwacht block-theme wrappers (.wp-block-post-template,
   .wp-block-woocommerce-product-collection). Onze classic PHP-includes
   rendereren die niet. Onderstaande regels herstellen de grids zonder
   sp24-extras.css aan te raken.
   ════════════════════════════════════════════════════════════════════ */

/* Tips & verhalen grid — 3 koloms desktop, 1 kolom < 900px */
.sp24-tips-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
@media (max-width: 900px) {
	.sp24-tips-grid { grid-template-columns: 1fr; }
}

/* Bento pakketten-grid — WC [products] shortcode rendert <ul class="products"> */
.sp24-bento__grid ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 1100px) {
	.sp24-bento__grid ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.sp24-bento__grid ul.products { grid-template-columns: 1fr; }
}

/* Tip-card fallback (geen featured image) — kleinere placeholder */
.sp24-tip-card__cover:not(:has(img)) {
	aspect-ratio: 3 / 2;
	min-height: 0;
}
.sp24-tip-card__cover.sp24-photo-slot.sp24-photo-slot--1-5x1 {
	/* aspect-ratio uit sp24-extras.css blijft 1.5/1 — maar binnen grid-kolom dus niet meer page-wide */
}

/* Reviews-grid — 4 koloms desktop, 2 < 1100, 1 < 700 */
.sp24-reviews-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1280px;
	margin: 0 auto;
}
@media (max-width: 1100px) {
	.sp24-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.sp24-reviews-grid { grid-template-columns: 1fr; }
}

/* Pakketten "no products" fallback */
.sp24-bento__empty {
	max-width: 1280px;
	margin: 0 auto;
	padding: 48px 24px;
	text-align: center;
	background: var(--wp--preset--color--paper);
	border: 1px dashed var(--wp--preset--color--taupe-soft);
	border-radius: 14px;
}
.sp24-bento__empty p {
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 16px;
}

/* Mobile bottom-nav: vanilla `sp24-extras.css` show-rule is class-gated; deze
   moet zichtbaar zijn < 900px ongeacht JS-toestand */
@media (max-width: 900px) {
	.sp24-mobile-bottom-nav { display: flex; }
	body { padding-bottom: 64px; }
}
@media (min-width: 901px) {
	.sp24-mobile-bottom-nav { display: none; }
}

/* Skip-link */
.sp24-skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 9999;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	padding: 12px 16px;
	border-radius: 6px;
	font-weight: 500;
	clip: auto;
	width: auto;
	height: auto;
}

/* ── Header-fixes ─────────────────────────────────────────────────────
   1) Custom-logo capseren — te grote uploads breken anders de layout.
   2) Header__main meer top-padding — voorkomt dat logo-graphics over de
      trust-strip "steken" (visuele overlap bij logo's met illustratie
      bovenin de PNG, zoals het Schoolspullen24-logo met cart-icon).
   ──────────────────────────────────────────────────────────────────── */
.custom-logo {
	max-height: 56px;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}
.sp24-header__main {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}
.sp24-header__row {
	min-height: 56px;
}

/* ── Section-head fix — BELANGRIJKSTE: max-width + auto-center, anders
   loopt H2 tot rand van het scherm. Plus align-items: start zodat de
   subtitel BOVENAAN naast de H2 staat, niet onderaan. ──────────────── */
.sp24-section-head,
.sp24-section-head--with-cta {
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	align-items: start !important;
}
.sp24-section-head__title {
	max-width: 720px;
}
.sp24-section-head__title h2,
.sp24-section-head__title h1 {
	margin: 0;
}
.sp24-section-head__body,
.sp24-section-head__cta {
	align-self: start !important;
}
.sp24-section-head__body p {
	margin: 0;
}
/* CTA-knop in section-head__cta houden we wel rechtsuitgelijnd */
.sp24-section-head__cta {
	justify-content: flex-end;
}

/* ── Section-padding tweaks — alle homepage-secties strakker ──────────
   Het oude block-theme liet WP via theme.json spacing presets vullen.
   In classic-theme moeten we dat direct doen.
   ──────────────────────────────────────────────────────────────────── */
.sp24-hero,
.sp24-usp-strip,
.sp24-hoe-werkt,
.sp24-bento,
.sp24-social-proof,
.sp24-zakelijk,
.sp24-tips,
.sp24-faq-teaser,
.sp24-newsletter,
.sp24-cta-banner {
	padding-top: 80px;
	padding-bottom: 80px;
	padding-left: 32px;
	padding-right: 32px;
}
@media (max-width: 900px) {
	.sp24-hero,
	.sp24-usp-strip,
	.sp24-hoe-werkt,
	.sp24-bento,
	.sp24-social-proof,
	.sp24-zakelijk,
	.sp24-tips,
	.sp24-faq-teaser,
	.sp24-newsletter,
	.sp24-cta-banner {
		padding-top: 56px;
		padding-bottom: 56px;
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* USP-strip is een dunne strook, niet een volledige sectie */
.sp24-usp-strip {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

/* Hoe-werkt-het cards iets compacter zodat ze niet als enorme blokken ogen */
.sp24-howto-card__photo {
	aspect-ratio: 1.4 / 1;
	max-height: 280px;
}
.sp24-howto-grid {
	margin-top: 8px;
}
.sp24-howto-cta {
	margin-top: 40px;
}

/* Trust-strip: forceer turquoise achtergrond + witte tekst — sp24-extras kan
   has-primary-background-color overrulen door cascade. !important wint. */
.sp24-trust-strip {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--paper) !important;
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	min-height: 36px;
	font-size: 13px;
	font-weight: 500;
}
.sp24-trust-strip a,
.sp24-trust-strip__phone {
	color: var(--wp--preset--color--paper) !important;
	text-decoration: none;
}
.sp24-trust-strip__inner {
	padding-left: 32px !important;
	padding-right: 32px !important;
	max-width: 1280px;
	margin: 0 auto;
}
.sp24-trust-strip__phone {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.sp24-trust-strip__phone-label {
	opacity: 0.9;
}

/* ── Failsafes tegen vreemde zwart-strepen + horizontale scroll ────── */
html { background: var(--wp--preset--color--paper); }
html, body { overflow-x: hidden; }

.wp-site-blocks { background: var(--wp--preset--color--paper); }

/* Header wrapper: ALIGNFULL maar zonder padding van block-theme cascade */
.sp24-header.alignfull,
header.sp24-header {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ── Header row — flex met menu inline, search/account/cart rechts ─── */
.sp24-header__row {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 8px 32px;
	grid-template-columns: none !important; /* override grid uit sp24-extras */
}
.sp24-header__brand {
	flex-shrink: 0;
}
.sp24-header__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.sp24-nav {
	flex-shrink: 0;
}
.sp24-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	align-items: center;
}
.sp24-nav__list a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}
.sp24-nav__list a:hover,
.sp24-nav__list a:focus,
.sp24-nav__list .current-menu-item > a {
	color: var(--wp--preset--color--accent);
}
.sp24-header__actions {
	display: flex !important;
	align-items: center;
	gap: 12px;
	margin-left: auto !important;
	flex-shrink: 0;
}

/* ── Search-pill — beige fill, icoon links, transparante input ─────── */
.sp24-search--pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--paper-2);
	border: 1px solid var(--wp--preset--color--taupe-soft);
	border-radius: 999px;
	padding: 8px 16px;
	min-width: 260px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sp24-search--pill:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(126, 172, 184, 0.25);
}
.sp24-search--pill .sp24-search__icon {
	width: 18px;
	height: 18px;
	color: var(--wp--preset--color--taupe-ink);
	flex-shrink: 0;
}
.sp24-search--pill .sp24-search__input {
	flex: 1;
	border: 0;
	background: transparent;
	outline: 0;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 14px;
	color: var(--wp--preset--color--ink);
	padding: 4px 0;
	min-width: 0;
}
.sp24-search--pill .sp24-search__input::placeholder {
	color: var(--wp--preset--color--taupe-ink);
}

/* Account icon-button */
.sp24-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background 0.2s ease;
}
.sp24-iconbtn:hover,
.sp24-iconbtn:focus {
	background: var(--wp--preset--color--paper-2);
}
.sp24-iconbtn svg { width: 22px; height: 22px; }

/* ── Cart-pill — zwarte pill met prijs + count badge ──────────────── */
.sp24-cart-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	border-radius: 999px;
	padding: 8px 14px 8px 16px;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--sora);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.2s ease;
}
.sp24-cart-pill:hover,
.sp24-cart-pill:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--paper);
}
.sp24-cart-pill__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.sp24-cart-pill__total {
	white-space: nowrap;
}
.sp24-cart-pill__total .woocommerce-Price-amount,
.sp24-cart-pill__total .amount {
	color: inherit;
}
.sp24-cart-pill__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
.sp24-cart-pill__count:empty {
	display: none;
}
.sp24-cart-pill__total:empty {
	display: none;
}

/* Empty-state — alleen icoon, rond, smaller padding */
.sp24-cart-pill--empty {
	padding: 10px;
	gap: 0;
	width: 40px;
	height: 40px;
	justify-content: center;
}
.sp24-cart-pill--empty .sp24-cart-pill__icon {
	width: 20px;
	height: 20px;
}

/* Hamburger — alleen mobile */
.sp24-hamburger {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 8px;
	color: var(--wp--preset--color--ink);
}
.sp24-hamburger__close { display: none; }

/* ── Responsive header — mobile collapse < 1100px ──────────────────── */
@media (max-width: 1100px) {
	.sp24-nav { display: none; }
	.sp24-search--pill { min-width: 200px; }
	.sp24-cart-pill__total { display: none; }
}
@media (max-width: 900px) {
	.sp24-hamburger { display: inline-flex; }
	.sp24-search--pill { display: none; }
	.sp24-iconbtn--account { display: none; }
	.sp24-header__row { padding: 8px 16px; gap: 12px; }
}

/* Tablet/Desktop: zorg dat hamburger ALTIJD verborgen blijft als nav zichtbaar is */
@media (min-width: 901px) {
	.sp24-hamburger { display: none; }
}

/* ╔══════════════════════════════════════════════════════════════════════
   Universal container + section utilities — gebruikt door classic-theme
   templates (page.php, single.php, woocommerce/*) waar geen specifieke
   .sp24-section-head wrapper is.
   ════════════════════════════════════════════════════════════════════ */
.sp24-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 32px;
	padding-right: 32px;
	width: 100%;
	box-sizing: border-box;
}
.sp24-section {
	padding-top: 80px;
	padding-bottom: 80px;
}
.sp24-main {
	min-height: 50vh;
}
@media (max-width: 900px) {
	.sp24-container { padding-left: 20px; padding-right: 20px; }
	.sp24-section { padding-top: 56px; padding-bottom: 56px; }
}

/* WC pages (shop, cart, checkout, my-account) — page-header styling */
.sp24-page-header {
	max-width: 1280px;
	margin: 0 auto 32px;
}
.sp24-page-header h1 {
	margin: 0;
}
.sp24-page-header__desc {
	margin-top: 12px;
	color: var(--wp--preset--color--ink-soft);
}

/* ╔══════════════════════════════════════════════════════════════════════
   B2B / Zakelijk-blok — donkere achtergrond, lichte tekst
   .has-taupe-soft-color werd overruled door body's default ink-color
   omdat WP block-stylesheets niet auto-load op classic themes.
   ════════════════════════════════════════════════════════════════════ */
.sp24-zakelijk {
	color: var(--wp--preset--color--paper);
}
.sp24-zakelijk h1,
.sp24-zakelijk h2,
.sp24-zakelijk h3,
.sp24-zakelijk h4 {
	color: var(--wp--preset--color--paper);
}
.sp24-zakelijk p {
	color: var(--wp--preset--color--taupe-soft);
}
.sp24-zakelijk a {
	color: var(--wp--preset--color--paper);
}
.sp24-zakelijk .sp24-eyebrow {
	color: var(--wp--preset--color--primary-tint);
}
.sp24-zakelijk .sp24-checklist span,
.sp24-zakelijk .sp24-checklist--on-dark span {
	color: var(--wp--preset--color--paper);
}

/* Forceer .has-taupe-soft-color werking op de body-tekst (specificity) */
.sp24-zakelijk p.has-taupe-soft-color {
	color: var(--wp--preset--color--taupe-soft) !important;
}

/* ╔══════════════════════════════════════════════════════════════════════
   Footer — meer ademruimte aan de bovenkant zodat logo's/teksten niet
   tegen de CTA-banner aanplakken.
   ════════════════════════════════════════════════════════════════════ */
.sp24-footer.alignfull,
footer.sp24-footer {
	padding-top: 80px !important;
	padding-bottom: 32px !important;
	padding-left: 32px !important;
	padding-right: 32px !important;
}
.sp24-footer__top {
	padding-top: 16px;
}
@media (max-width: 900px) {
	.sp24-footer.alignfull,
	footer.sp24-footer {
		padding-top: 56px !important;
		padding-bottom: 24px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* CTA-banner staat boven de footer — meer bottom-padding op de banner-sectie
   en padding-top op de footer = totaal genoeg ademruimte. */
.sp24-cta-banner {
	padding-bottom: 80px !important;
}
@media (max-width: 900px) {
	.sp24-cta-banner { padding-bottom: 56px !important; }
}

/* ╔══════════════════════════════════════════════════════════════════════
   Tips-grid — meer ademruimte tussen section-head en cards
   ════════════════════════════════════════════════════════════════════ */
.sp24-tips .sp24-section-head {
	margin-bottom: 40px !important;
}
.sp24-tips-grid {
	margin-top: 0;
}