/* ==========================================================================
   Sterrenbeelden — hoofdstijlen
   Alle maten en kleuren zijn 1-op-1 overgenomen uit het redesign.
   Kleuren zijn tokens zodat ze via de Customizer aan te passen zijn.
   ========================================================================== */

/* Fonts (zelf gehost, latin-subset; variabele fonts dekken alle gewichten) */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Sterrenbeelden Symbols";
	font-style: normal;
	font-weight: 100 900;
	font-display: block;
	src: url("../fonts/noto-sans-symbols-zodiac.woff2") format("woff2");
	unicode-range: U+2609, U+263D-2653, U+FE0E;
}

/* Tokens --------------------------------------------------------------- */
:root {
	--sb-navy: #14183a;
	--sb-night: #0e1230;
	--sb-gold: #e4c27a;
	--sb-gold-light: #f3dda8;
	--sb-gold-dark: #c9a65a;
	--sb-link: #7a5a12;
	--sb-link-hover: #4f3a08;
	--sb-cream: #fbf9f4;
	--sb-cream-2: #f6efdf;
	--sb-white: #ffffff;
	--sb-border: #e8e0cf;
	--sb-border-gold: #d9c99f;
	--sb-border-soft: #efe8d8;
	--sb-field-border: #d6cdba;
	--sb-text: #24203a;
	--sb-text-2: #3c3752;
	--sb-text-3: #4a4560;
	--sb-muted: #5e5872;
	--sb-strike: #6e6880;
	--sb-on-dark: #ede7da;
	--sb-on-dark-2: #cfc6de;
	--sb-on-dark-3: #b7b1c8;
	--sb-heading-on-dark: #f7f0e1;
	--sb-badge-soft: #f3e3b8;
	--sb-green: #2e6b47;
	--sb-red: #a1442b;
	--sb-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--sb-font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sb-font-symbols: "Sterrenbeelden Symbols", "Noto Sans Symbols", "Segoe UI Symbol", "Apple Symbols", sans-serif;
	--sb-container: 1320px;
	--sb-shadow-card: 0 6px 18px rgba(20, 24, 58, 0.08);
	--sb-shadow-cta: 0 12px 32px rgba(20, 24, 58, 0.18);
}

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

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

body {
	margin: 0;
	background: var(--sb-cream);
	color: var(--sb-text);
	font-family: var(--sb-font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--sb-link); }
a:hover { color: var(--sb-link-hover); }

:focus-visible { outline: 2px solid var(--sb-gold-dark); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { color: var(--sb-navy); }

p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
	background: var(--sb-white); clip: auto !important; clip-path: none; color: var(--sb-navy);
	display: block; font-size: 15px; font-weight: 600; height: auto; left: 8px; padding: 14px 20px;
	text-decoration: none; top: 8px; width: auto; z-index: 100000; border-radius: 12px;
}

.sb-glyph { font-family: var(--sb-font-symbols); font-variant-emoji: text; }
.sb-serif { font-family: var(--sb-font-serif); }

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-size: 13.5px; color: var(--sb-muted); }

/* Header --------------------------------------------------------------- */
.sb-header { position: relative; background: var(--sb-night); z-index: 5; }
.sb-header__stars { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; pointer-events: none; }
.sb-header__inner {
	position: relative; max-width: var(--sb-container); margin: 0 auto; padding: 22px 24px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.sb-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sb-on-dark); }
.sb-brand:hover { color: var(--sb-on-dark); }
.sb-brand__name { font-family: var(--sb-font-serif); font-size: 28px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.6; }
.sb-brand__suffix { color: var(--sb-gold); }
.sb-brand .custom-logo { display: block; max-height: 52px; width: auto; }

.sb-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-nav li { position: relative; }
.sb-nav a { display: block; color: var(--sb-on-dark); text-decoration: none; padding: 12px 14px; font-size: 15px; line-height: 1.6; }
.sb-nav a:hover,
.sb-nav .current-menu-item > a,
.sb-nav .current_page_item > a,
.sb-nav .current-menu-ancestor > a,
.sb-nav .current_page_parent > a { color: var(--sb-gold); }
.sb-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 220px; display: none; flex-direction: column; align-items: stretch;
	background: var(--sb-night); border: 1px solid rgba(228, 194, 122, 0.25); border-radius: 12px; padding: 6px; gap: 0;
	box-shadow: 0 12px 24px rgba(14, 18, 48, 0.35);
}
.sb-nav li:hover > .sub-menu,
.sb-nav li:focus-within > .sub-menu { display: flex; }

.sb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	text-decoration: none; border-radius: 999px; font-weight: 600; line-height: 1.6;
	border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.sb-btn--gold { background: var(--sb-gold); color: var(--sb-navy); }
.sb-btn--gold:hover { background: var(--sb-gold-light); color: var(--sb-navy); }
.sb-btn--navy { background: var(--sb-navy); color: var(--sb-gold-light); }
.sb-btn--navy:hover { background: var(--sb-night); color: var(--sb-gold-light); }
.sb-btn--header { margin-left: 8px; padding: 11px 20px; font-size: 15px; }
.sb-btn--block { display: flex; width: 100%; min-height: 50px; font-size: 16px; }
.sb-btn--pill { min-height: 50px; padding: 0 26px; font-size: 16px; }

/* Mobiele balk */
.sb-mbar { display: none; align-items: center; gap: 10px; }
.sb-mbar__cta { padding: 10px 16px; font-size: 14px; }
.sb-mmenu summary { list-style: none; }
.sb-mmenu summary::-webkit-details-marker { display: none; }
.sb-mmenu__toggle {
	width: 44px; height: 44px; border: 1px solid rgba(228, 194, 122, 0.5); border-radius: 12px;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sb-mmenu__panel {
	position: absolute; left: 0; right: 0; top: 100%; background: var(--sb-night);
	border-top: 1px solid rgba(228, 194, 122, 0.25); padding: 4px 16px 18px;
	display: flex; flex-direction: column; box-shadow: 0 12px 24px rgba(14, 18, 48, 0.35);
}
.sb-mmenu__panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sb-mmenu__panel .sub-menu { padding-left: 16px; }
.sb-mmenu__panel a:not(.sb-btn) {
	display: block; color: var(--sb-on-dark); text-decoration: none; padding: 13px 4px; font-size: 16px;
	border-bottom: 1px solid rgba(228, 194, 122, 0.15);
}
.sb-mmenu__panel .current-menu-item > a { color: var(--sb-gold); }
.sb-mmenu__panel .sb-btn { margin-top: 14px; min-height: 48px; }

/* Layout --------------------------------------------------------------- */
.sb-layout {
	max-width: var(--sb-container); margin: 0 auto; padding: 28px 24px 72px;
	display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start;
}
.sb-layout--front { padding-top: 36px; }
.sb-side { flex: 1 1 260px; max-width: 290px; min-width: 0; }
.sb-main { flex: 999 1 520px; min-width: 0; }
.sb-aside { flex: 1 1 300px; max-width: 350px; min-width: 0; }
.sb-layout--wide .sb-main { flex-basis: 100%; }
.sb-narrow { max-width: 880px; margin: 0 auto; padding: 48px 24px 72px; }
.sb-full { width: 100%; }

/* Kaarten (algemeen) */
.sb-card { background: var(--sb-white); border: 1px solid var(--sb-border); }
a.sb-card { text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
a.sb-card:hover { border-color: var(--sb-gold-dark); }
a.sb-card--lift:hover { box-shadow: var(--sb-shadow-card); }

/* Sterrenbeelden-zijbalk ----------------------------------------------- */
.sb-signs-side { border-radius: 18px; padding: 20px 12px; }
.sb-signs-side__title { margin: 0 10px 4px; font-family: var(--sb-font-serif); font-size: 26px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-signs-side__intro { margin: 0 10px 14px; font-size: 13px; color: var(--sb-muted); }
.sb-signnav { display: flex; flex-direction: column; gap: 2px; }
.sb-signlink {
	display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; min-height: 44px;
	background: transparent; text-decoration: none;
}
.sb-signlink:hover { background: var(--sb-cream-2); }
.sb-signlink.is-now { background: var(--sb-cream-2); }
.sb-signlink.is-active { background: var(--sb-cream-2); box-shadow: inset 3px 0 0 var(--sb-gold-dark); }
.sb-signlink__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sb-signlink__name { font-weight: 600; font-size: 16px; color: var(--sb-navy); line-height: 1.25; }
.sb-signlink__dates { font-size: 12.5px; color: var(--sb-muted); line-height: 1.3; }

.sb-disc {
	flex: none; border-radius: 50%; background: var(--sb-navy); color: var(--sb-gold);
	display: flex; align-items: center; justify-content: center; line-height: 1;
}
.sb-disc--30 { width: 30px; height: 30px; font-size: 16px; }
.sb-disc--34 { width: 34px; height: 34px; font-size: 16px; }
.sb-disc--38 { width: 38px; height: 38px; font-size: 18px; }
.sb-disc--40 { width: 40px; height: 40px; font-size: 19px; }
.sb-disc--48 { width: 48px; height: 48px; font-size: 24px; }

.sb-badge-now {
	font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--sb-navy); background: var(--sb-gold); border-radius: 999px; padding: 2px 8px; line-height: 1.6;
}

/* Typografie-elementen ------------------------------------------------- */
.sb-eyebrow { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sb-link); }
.sb-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-link); font-weight: 600; }
.sb-h1 { margin: 0; font-family: var(--sb-font-serif); font-size: 60px; line-height: 1.05; font-weight: 600; color: var(--sb-navy); }
.sb-h1--56 { font-size: 56px; }
.sb-h1--52 { font-size: 52px; }
.sb-subtitle { margin: 10px 0 28px; font-family: var(--sb-font-serif); font-style: italic; font-weight: 500; font-size: 26px; color: var(--sb-text-3); line-height: 1.6; }
.sb-lead { margin: 8px 0 20px; font-size: 17px; color: var(--sb-text-2); }
.sb-section-title { margin: 0 0 16px; font-family: var(--sb-font-serif); font-size: 34px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }

.sb-breadcrumbs { font-size: 13.5px; color: var(--sb-muted); margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.sb-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.sb-breadcrumbs li { display: flex; gap: 8px; }
.sb-breadcrumbs li + li::before { content: "/"; }

/* Sterrenbeelden-raster (home) ----------------------------------------- */
.sb-signgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sb-signcard {
	border-radius: 16px; padding: 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.sb-signcard:hover { box-shadow: var(--sb-shadow-card); }
.sb-signcard__name { font-family: var(--sb-font-serif); font-size: 22px; font-weight: 600; color: var(--sb-navy); line-height: 1.15; margin-top: 4px; }
.sb-signcard__dates { font-size: 13px; color: var(--sb-muted); line-height: 1.6; }
.sb-signcard__element { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-link); line-height: 1.6; }

/* Andere sterrenbeelden (compact) */
.sb-othergrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sb-othercard { border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-height: 44px; }
.sb-othercard__text { display: flex; flex-direction: column; min-width: 0; }
.sb-othercard__name { font-weight: 600; color: var(--sb-navy); line-height: 1.25; }
.sb-othercard__dates { font-size: 12.5px; color: var(--sb-muted); }

/* Mini-tegels (bedankpagina) */
.sb-minigrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sb-minicard { border-radius: 14px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 44px; }
.sb-minicard__name { font-weight: 600; font-size: 14px; color: var(--sb-navy); }

/* Inhoud / prose -------------------------------------------------------- */
.sb-article { max-width: 760px; }
.sb-article--home { margin-top: 48px; }
.sb-prose > :first-child { margin-top: 0; }
.sb-prose p { margin: 0 0 28px; }
.sb-prose h2 { margin: 0 0 12px; font-family: var(--sb-font-serif); font-size: 38px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-prose h3 { margin: 0 0 8px; font-family: var(--sb-font-serif); font-size: 26px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-prose h4 { margin: 0 0 8px; font-size: 17px; color: var(--sb-navy); }
.sb-prose ul, .sb-prose ol { margin: 0 0 28px; padding-left: 20px; }
.sb-prose li + li { margin-top: 4px; }
.sb-prose blockquote { margin: 0 0 28px; padding: 4px 0 4px 20px; border-left: 3px solid var(--sb-gold); font-family: var(--sb-font-serif); font-size: 22px; font-style: italic; color: var(--sb-text-3); }
.sb-prose img { border-radius: 16px; }
.sb-prose figure { margin: 0 0 28px; }
.sb-prose hr { border: 0; border-top: 1px solid var(--sb-border); margin: 32px 0; }
.sb-prose--page h2 { font-size: 38px; }
.sb-prose--page > p:first-of-type { font-size: 17px; }
.sb-prose--post p { margin: 0 0 18px; }
.sb-prose--post h2 { margin: 28px 0 8px; font-size: 34px; }
.sb-prose--post h2:first-child { margin-top: 0; }
.sb-prose--post h3 { font-size: 26px; margin-top: 22px; }
.sb-prose--post > p.sb-lead-p { font-size: 18.5px; color: var(--sb-text); }
.sb-prose--sign p { margin: 0 0 32px; }
.sb-prose--sign h2 { margin: 0 0 10px; font-size: 36px; }

/* Tabellen in content */
.sb-prose table,
.sb-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 420px; }
.sb-prose .wp-block-table,
.sb-table-wrap {
	overflow-x: auto; background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 16px; margin: 0 0 18px;
}
.sb-prose .wp-block-table table { margin: 0; }
.sb-prose table:not(.wp-block-table table) { background: var(--sb-white); }
.sb-prose thead tr,
.sb-table thead tr { background: var(--sb-cream-2); text-align: left; }
.sb-prose th, .sb-table th { padding: 12px 18px; color: var(--sb-navy); text-align: left; border: 0; }
.sb-prose td, .sb-table td { padding: 10px 18px; color: var(--sb-text-2); border: 0; border-top: 1px solid var(--sb-border-soft); }
.sb-prose td:first-child, .sb-table td:first-child { font-weight: 600; color: var(--sb-navy); }
.sb-prose .wp-block-table thead { border-bottom: 0; }
.sb-prose .wp-block-table figcaption { padding: 10px 18px; }

/* Pill-navigatie */
.sb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-pill { text-decoration: none; border: 1px solid var(--sb-border-gold); border-radius: 999px; padding: 8px 16px; font-size: 14px; line-height: 1.6; }
.sb-pills--cats { margin-bottom: 26px; }
.sb-pills--cats .sb-pill { padding: 8px 17px; }
.sb-pill.is-active { background: var(--sb-navy); color: var(--sb-gold-light); border-color: var(--sb-navy); padding: 9px 18px; font-weight: 500; border: 0; }

/* Chips met tekens */
.sb-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.sb-chip {
	display: flex; align-items: center; gap: 10px; text-decoration: none; background: var(--sb-white);
	border: 1px solid var(--sb-border); border-radius: 999px; padding: 6px 16px 6px 6px; color: var(--sb-navy); font-weight: 500; line-height: 1.6;
}
.sb-chip:hover { border-color: var(--sb-gold-dark); color: var(--sb-navy); }
.sb-chips--sm { gap: 8px; margin: 0 0 28px; }
.sb-chips--sm .sb-chip { gap: 8px; padding: 5px 14px 5px 5px; font-weight: 400; }

/* CTA-kaart (rechterkolom) --------------------------------------------- */
.sb-cta {
	background: var(--sb-navy); border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column;
	gap: 18px; align-items: stretch; box-shadow: var(--sb-shadow-cta);
}
.sb-cta__intro { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; }
.sb-cta__badge {
	align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--sb-navy); background: var(--sb-gold); border-radius: 999px; padding: 4px 12px; line-height: 1.6;
}
.sb-cta__title { margin: 0; font-family: var(--sb-font-serif); font-size: 34px; line-height: 1.08; font-weight: 600; color: var(--sb-heading-on-dark); }
.sb-cta__text { margin: 0; font-size: 15px; color: var(--sb-on-dark-2); }
.sb-cta__img { flex: 1 1 240px; display: flex; justify-content: center; }
.sb-cta__img svg { max-width: 100%; height: auto; }
.sb-cta__body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 14px; }
.sb-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--sb-on-dark); }
.sb-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.sb-checklist svg { flex: none; margin-top: 4px; }
.sb-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sb-price s { font-size: 18px; color: var(--sb-on-dark-3); }
.sb-price__now { font-family: var(--sb-font-serif); font-size: 40px; line-height: 1; font-weight: 700; color: var(--sb-gold-light); }
.sb-price__note { font-size: 13px; color: var(--sb-on-dark-2); }

.sb-infocard { margin-top: 20px; border-radius: 18px; padding: 22px; }
.sb-infocard__title { margin: 0 0 6px; font-family: var(--sb-font-serif); font-size: 24px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-infocard__text { margin: 0 0 12px; font-size: 14.5px; color: var(--sb-text-3); }
.sb-infocard__link { font-weight: 600; font-size: 15px; }
.sb-infocard ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.sb-infocard--popular .sb-infocard__title { margin-bottom: 12px; }

/* CTA-banner (in content) ---------------------------------------------- */
.sb-banner {
	background: var(--sb-navy); color: var(--sb-on-dark); border-radius: 20px; padding: 26px 28px;
	display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin: 0 0 32px;
}
.sb-banner__body { flex: 1 1 320px; min-width: 0; }
.sb-banner .sb-banner__title { margin: 0 0 6px; font-family: var(--sb-font-serif); font-size: 28px; font-weight: 600; color: var(--sb-heading-on-dark); line-height: 1.6; }
.sb-banner .sb-banner__text { margin: 0; font-size: 15px; color: var(--sb-on-dark-2); }
.sb-banner__text s { color: var(--sb-on-dark-3); }
.sb-banner__text strong { color: var(--sb-gold-light); }
.sb-banner .sb-btn { min-height: 50px; padding: 0 26px; font-size: 16px; }
.sb-banner--post { padding: 24px 26px; gap: 18px; margin: 0 0 30px; }
.sb-banner--post .sb-banner__body { flex-basis: 300px; }
.sb-banner.sb-banner--post .sb-banner__title { margin: 0 0 4px; font-size: 26px; line-height: 1.15; }
.sb-banner--post .sb-btn { padding: 0 24px; }
.sb-banner--compact { gap: 18px; margin-bottom: 40px; }
.sb-banner.sb-banner--compact .sb-banner__title { margin: 0 0 4px; line-height: 1.15; }
.sb-banner--compact .sb-btn { padding: 0 24px; font-size: inherit; }

/* Blogoverzicht -------------------------------------------------------- */
.sb-featured { display: flex; flex-wrap: wrap; border-radius: 20px; overflow: hidden; margin-bottom: 22px; }
.sb-featured__media { flex: 1 1 260px; min-height: 240px; background: var(--sb-navy); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-featured__media img,
.sb-postcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sb-featured__body { flex: 1.3 1 300px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.sb-featured__title { font-family: var(--sb-font-serif); font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--sb-navy); }
.sb-featured__excerpt { font-size: 15.5px; color: var(--sb-text-2); }
.sb-meta-small { font-size: 13.5px; color: var(--sb-muted); }

.sb-postgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.sb-postcard { border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.sb-postcard__media { height: 150px; background: var(--sb-navy); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-postcard__icon { position: relative; font-size: 46px; color: var(--sb-gold); line-height: 1; }
.sb-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sb-postcard__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sb-postcard__title { font-family: var(--sb-font-serif); font-size: 24px; line-height: 1.15; font-weight: 600; color: var(--sb-navy); }
.sb-postcard__excerpt { font-size: 14.5px; color: var(--sb-text-2); }
.sb-postcard__meta { font-size: 13px; color: var(--sb-muted); margin-top: auto; padding-top: 6px; }

.sb-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.sb-pagination .page-numbers {
	width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	text-decoration: none; border: 1px solid var(--sb-border-gold);
}
.sb-pagination .page-numbers.current { background: var(--sb-navy); color: var(--sb-gold-light); font-weight: 600; border-color: var(--sb-navy); }
.sb-pagination .page-numbers.dots { border: 0; width: auto; }
.sb-pagination .page-numbers.prev,
.sb-pagination .page-numbers.next { width: auto; padding: 0 18px; border-radius: 999px; }

.sb-empty { padding: 28px; border-radius: 18px; }

/* Blogbericht ---------------------------------------------------------- */
.sb-post-header .sb-kicker { font-size: 12.5px; text-decoration: none; }
.sb-spacer { height: 20px; }
.sb-post-title { margin: 6px 0 12px; font-family: var(--sb-font-serif); font-size: 52px; line-height: 1.05; font-weight: 600; color: var(--sb-navy); }
.sb-post-meta { margin: 0 0 18px; font-size: 14px; color: var(--sb-muted); }
.sb-hero { height: 300px; border-radius: 20px; background: var(--sb-navy); position: relative; overflow: hidden; margin-bottom: 26px; }
.sb-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-toc { border-radius: 16px; padding: 18px 22px; margin: 8px 0 30px; }
.sb-toc__title { margin: 0 0 8px !important; font-weight: 600; color: var(--sb-navy); }
.sb-toc ol { margin: 0 !important; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.sb-toc li + li { margin-top: 0 !important; }
.sb-after-article { margin: 18px 0 0; }

.sb-related-section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--sb-border); }
.sb-related-section .sb-section-title { margin-bottom: 14px; font-size: 30px; }
.sb-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-relcard { border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.sb-relcard .sb-kicker { font-size: 11.5px; }
.sb-relcard__title { font-family: var(--sb-font-serif); font-size: 21px; font-weight: 600; color: var(--sb-navy); line-height: 1.2; }

/* Sterrenbeeld-detail -------------------------------------------------- */
.sb-signhero { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; border-radius: 22px; padding: 28px; }
.sb-signhero__glyph {
	width: 132px; height: 132px; flex: none; border-radius: 50%; background: var(--sb-navy);
	box-shadow: inset 0 0 0 6px var(--sb-navy), inset 0 0 0 7px var(--sb-gold);
	display: flex; align-items: center; justify-content: center; font-size: 66px; color: var(--sb-gold); line-height: 1;
}
.sb-signhero__body { flex: 1 1 320px; min-width: 0; }
.sb-signhero .sb-eyebrow { margin-bottom: 4px; }
.sb-signhero .sb-h1 { margin-bottom: 8px; font-size: 56px; }
.sb-signhero__intro { margin: 0; font-size: 17px; color: var(--sb-text-2); }
.sb-breadcrumbs--sign { margin-bottom: 18px; }

.sb-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sb-fact { border-radius: 14px; padding: 14px 16px; }
.sb-fact__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-muted); }
.sb-fact__value { font-family: var(--sb-font-serif); font-size: 22px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-pills--anchors { margin-top: 28px; }
.sb-article--sign { margin-top: 32px; }

.sb-twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.sb-trait { border-radius: 16px; padding: 18px 20px; }
.sb-trait h3 { margin: 0 0 8px; font-family: var(--sb-font-sans); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6; }
.sb-trait--good h3 { color: var(--sb-green); }
.sb-trait--bad h3 { color: var(--sb-red); }
.sb-trait ul { margin: 0; padding-left: 18px; }
.sb-trait li + li { margin-top: 0; }
.sb-sign-matches-intro { margin: 0 0 16px !important; }
.sb-others { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sb-border); }
.sb-others .sb-section-title { font-size: 32px; }

/* Product (horoscoop) -------------------------------------------------- */
.sb-product { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.sb-product__visual { display: flex; flex-direction: column; gap: 14px; }
.sb-pimg { position: relative; aspect-ratio: 1 / 1; background: var(--sb-navy); border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.sb-pimg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-pimg__chart { position: relative; width: 78%; height: auto; }
.sb-pimg__badge {
	position: absolute; top: 18px; left: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--sb-navy); background: var(--sb-gold); border-radius: 999px; padding: 5px 13px; line-height: 1.6;
}
.sb-usps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sb-usp { display: flex; align-items: center; gap: 8px; background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--sb-navy); line-height: 1.6; }
.sb-pform { border-radius: 22px; padding: 28px; }
.sb-pform .sb-eyebrow { margin-bottom: 4px; letter-spacing: 0.16em; }
.sb-pform__title { margin: 0 0 10px; font-family: var(--sb-font-serif); font-size: 44px; line-height: 1.05; font-weight: 600; color: var(--sb-navy); }
.sb-pprice { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sb-pprice s { font-size: 19px; color: var(--sb-strike); }
.sb-pprice__now { font-family: var(--sb-font-serif); font-size: 44px; line-height: 1; font-weight: 700; color: var(--sb-navy); }
.sb-pprice__tag { font-size: 13px; font-weight: 600; color: var(--sb-navy); background: var(--sb-badge-soft); border-radius: 999px; padding: 3px 10px; line-height: 1.6; }
.sb-pform__intro { margin: 0 0 20px; font-size: 15px; color: var(--sb-text-3); }
.sb-pform__intro p { margin: 0; }
.sb-form { display: flex; flex-direction: column; gap: 14px; }
.sb-formrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sb-fieldwrap { display: flex; flex-direction: column; gap: 5px; }
.sb-label { font-size: 14px; font-weight: 500; color: var(--sb-navy); line-height: 1.6; }
.sb-label .sb-req { color: var(--sb-red); }
.sb-label .sb-opt { font-weight: 400; color: var(--sb-muted); }
.sb-field {
	width: 100%; min-height: 46px; border: 1px solid var(--sb-field-border); border-radius: 10px; padding: 10px 12px;
	font: inherit; font-size: 15.5px; color: var(--sb-navy); background: var(--sb-white); line-height: 1.6;
}
.sb-field:focus { outline: 2px solid var(--sb-gold-dark); outline-offset: 1px; border-color: var(--sb-gold-dark); }
.sb-field[aria-invalid="true"] { border-color: var(--sb-red); }
.sb-form__hint { margin: -4px 0 0; font-size: 13px; color: var(--sb-muted); }
.sb-form__submit { min-height: 54px; margin-top: 6px; font-size: 17px; width: 100%; }
.sb-form__privacy { margin: 0; font-size: 13px; color: var(--sb-muted); text-align: center; }

.sb-section { margin-top: 44px; }
.sb-section--text { max-width: 760px; }
.sb-section--text h2 { margin: 0 0 10px; font-family: var(--sb-font-serif); font-size: 34px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-section--text h3 { margin: 0 0 8px; font-family: var(--sb-font-serif); font-size: 26px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-section--text p { margin: 0 0 22px; }
.sb-section--text p:last-child { margin-bottom: 0; }

.sb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-step { border-radius: 18px; padding: 20px; }
.sb-step__num {
	display: flex; width: 40px; height: 40px; border-radius: 50%; background: var(--sb-navy); color: var(--sb-gold);
	align-items: center; justify-content: center; font-family: var(--sb-font-serif); font-size: 22px; font-weight: 700; margin-bottom: 10px; line-height: 1;
}
.sb-step__title { margin: 0 0 4px; font-size: 17px; color: var(--sb-navy); line-height: 1.6; }
.sb-step__text { margin: 0; font-size: 14.5px; color: var(--sb-text-3); }

.sb-faq { display: flex; flex-direction: column; gap: 10px; }
.sb-faq details { background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 14px; padding: 14px 18px; }
.sb-faq summary { font-weight: 600; color: var(--sb-navy); cursor: pointer; min-height: 24px; }
.sb-faq details p { margin: 8px 0 0; color: var(--sb-text-2); }
.sb-section--faq .sb-section-title { margin-bottom: 14px; }

/* Bedankpagina --------------------------------------------------------- */
.sb-thanks__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 32px; }
.sb-thanks__head .sb-eyebrow { margin: 6px 0 0; }
.sb-thanks__lead { margin: 0; font-size: 18px; color: var(--sb-text-2); max-width: 560px; }
.sb-order { border-radius: 20px; padding: 24px 28px; margin-bottom: 28px; }
.sb-order__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.sb-order__title { margin: 0; font-family: var(--sb-font-serif); font-size: 28px; font-weight: 600; color: var(--sb-navy); line-height: 1.6; }
.sb-order__num { font-size: 14px; color: var(--sb-muted); }
.sb-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 15px; }
.sb-sum__label { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-muted); }
.sb-sum__value { color: var(--sb-navy); font-weight: 500; }
.sb-order__item + .sb-order__item { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--sb-border-soft); }
.sb-order__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--sb-border-soft); margin-top: 18px; padding-top: 14px; }
.sb-order__total-label { font-weight: 600; color: var(--sb-navy); }
.sb-order__total-price { display: flex; gap: 10px; align-items: baseline; }
.sb-order__total-price s { color: var(--sb-strike); font-size: 15px; }
.sb-order__total-now { font-family: var(--sb-font-serif); font-size: 30px; font-weight: 700; color: var(--sb-navy); line-height: 1.6; }
.sb-thanks__section { margin-bottom: 28px; }
.sb-thanks__section .sb-section-title { font-size: 30px; margin-bottom: 14px; }
.sb-thanks__note { margin: 14px 0 0; font-size: 14px; color: var(--sb-muted); }
.sb-thanks__more { margin: 18px 0 0; }
.sb-thanks__more a, .sb-link-strong { font-weight: 600; }
.sb-notice { border-radius: 16px; padding: 18px 22px; margin-bottom: 24px; }
.sb-notice--error { border-color: var(--sb-red); }

/* Matchtool ------------------------------------------------------------ */
.sb-match { border-radius: 20px; padding: 24px 26px; }
.sb-match__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.sb-match__plus { font-family: var(--sb-font-serif); font-size: 32px; color: var(--sb-gold-dark); padding-bottom: 2px; }
.sb-match__result { margin-top: 18px; border-radius: 16px; background: var(--sb-cream-2); padding: 18px 20px; }
.sb-match__result[hidden] { display: none; }
.sb-match__score { font-family: var(--sb-font-serif); font-size: 28px; font-weight: 600; color: var(--sb-navy); line-height: 1.2; margin: 0 0 6px; }
.sb-match__text { margin: 0; color: var(--sb-text-2); }

/* 404 / zoeken */
.sb-search { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
.sb-search .sb-field { flex: 1 1 240px; }
.sb-search .sb-btn { padding: 0 24px; min-height: 46px; }

/* Reacties */
.sb-comments { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--sb-border); max-width: 760px; }
.sb-comments .comment-list { list-style: none; padding: 0; margin: 0 0 28px; }
.sb-comments .comment-body { background: var(--sb-white); border: 1px solid var(--sb-border); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
.sb-comments .children { list-style: none; padding-left: 24px; }
.sb-comments input:not([type="checkbox"]):not([type="submit"]),
.sb-comments textarea { width: 100%; border: 1px solid var(--sb-field-border); border-radius: 10px; padding: 10px 12px; background: var(--sb-white); }
.sb-comments .submit { background: var(--sb-navy); color: var(--sb-gold-light); border: 0; border-radius: 999px; padding: 12px 24px; font-weight: 600; cursor: pointer; }

/* Footer --------------------------------------------------------------- */
.sb-footer { background: var(--sb-night); color: var(--sb-on-dark); }
.sb-footer__inner { max-width: var(--sb-container); margin: 0 auto; padding: 40px 24px; display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.sb-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.sb-footer__name { font-family: var(--sb-font-serif); font-size: 22px; font-weight: 600; line-height: 1.6; }
.sb-footer__copy, .sb-footer__meta { font-size: 13px; color: var(--sb-on-dark-3); }
.sb-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.sb-footer__nav a { color: var(--sb-gold); }
.sb-footer__nav a:hover { color: var(--sb-gold-light); }

/* WordPress-blokken die vaak in content staan */
.wp-block-button__link { background: var(--sb-gold); color: var(--sb-navy); border-radius: 999px; font-weight: 600; padding: 12px 24px; text-decoration: none; }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; border: 1px solid var(--sb-border-gold); color: var(--sb-link); }
.wp-block-separator { border: 0; border-top: 1px solid var(--sb-border); }

/* Elementor: laat secties in de main-kolom netjes aansluiten */
.sb-main .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
.sb-full .elementor { width: 100%; }

/* Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
	.sb-aside { order: -1; max-width: none; flex-basis: 100%; }
	.sb-cta { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 1100px) {
	.sb-product { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
	.sb-nav { display: none; }
	.sb-mbar { display: flex; }
}
@media (max-width: 860px) {
	.sb-side { max-width: none; flex-basis: 100%; order: 3; }
	.sb-signgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-facts, .sb-othergrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-twocol, .sb-postgrid, .sb-related, .sb-steps, .sb-formrow, .sb-sum { grid-template-columns: minmax(0, 1fr); }
	.sb-minigrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sb-h1, .sb-signhero .sb-h1 { font-size: 40px; }
	.sb-post-title, .sb-thanks .sb-h1 { font-size: 38px; }
	.sb-pform__title { font-size: 36px; }
	.sb-brand__name { font-size: 22px; }
	.sb-layout { padding: 20px 16px 48px; gap: 24px; }
	.sb-narrow { padding: 32px 16px 48px; }
	.sb-signnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sb-pform { padding: 20px; }
	.sb-match__row { grid-template-columns: minmax(0, 1fr); }
	.sb-match__plus { display: none; }
	.sb-layout--front .sb-side { display: none; }
}
@media (max-width: 600px) {
	.sb-cta__img { flex-basis: auto; }
	.sb-cta__img svg { width: 150px; height: 150px; }
	.sb-pimg { aspect-ratio: auto; height: 240px; }
	.sb-pimg__chart { width: 200px; }
}
@media (max-width: 420px) {
	.sb-mbar__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media print {
	.sb-header, .sb-footer, .sb-side, .sb-aside, .sb-banner { display: none !important; }
	body { background: #fff; }
}

.sb-infocard-wrap .sb-infocard { margin-top: 0; }