/* Chocolaterie Fleur — gedeelde basis (reset, typografie, container, knoppen).
   Sectie-stylesheets bouwen hierop voort. Tokens staan in fonts.css :root. */

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

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

body {
	margin: 0;
	font-family: var(--fleur-font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--fleur-aubergine);
	/* Basiskleur van de site = grijs (#f5f5f5). Was #fff, waardoor kieren zoals de
	   marge boven de footer als een witte band doorschemerden i.p.v. het paginagrijs. */
	background: var(--fleur-cream);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
	font-family: var(--fleur-font-serif);
	font-weight: 400;
	line-height: 1.15;
	color: var(--fleur-aubergine);
	margin: 0 0 .5em;
}
h1 { font-size: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--fleur-pink); }

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

/* Gedeelde contentbreedte (gebruik deze i.p.v. eigen breedtes te definiëren). */
.sellabees-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 24px;
}

#site-main { min-height: 40vh; }

/* Mobiel-only regelafbreking: <br class="br-m"> breekt alleen ≤981px, is
   onzichtbaar op desktop/liggende tablet. Gebruikt in koppen/labels. */
.br-m { display: none; }
@media (max-width: 981px) { .br-m { display: inline; } }

/* Mobiele oneindige-slider: viewport (clipt de doorschuivende baan) + dots.
   theme.js wrapt het raster hierin en injecteert de dots — ALLEEN ≤981px. Op
   desktop/liggende tablet bestaat de viewport niet (JS breekt 'm af) en zijn de
   dots verborgen → daar blijven de gewone rasters ongemoeid. */
.fleur-islider-viewport { display: contents; }
.fleur-slider-dots { display: none; }
@media (max-width: 981px) {
	.fleur-islider-viewport { display: block; overflow: hidden; width: 100%; }
	.fleur-slider-dots {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		margin-top: 22px;
	}
	.fleur-slider-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(76, 61, 69, .22);
		cursor: pointer;
		transition: background .2s ease, width .2s ease;
	}
	.fleur-slider-dot.is-active { width: 22px; border-radius: 100px; background: var(--fleur-pink); }
}

/* ---- Laadscherm (preloader) responsive. De core-stijl 'nested-squares' toont de
   sitenaam als wordmark met grote letter-spacing; "CHOCOLATERIE FLEUR" loopt daardoor
   op smalle schermen buiten beeld (horizontale overflow). Deze child-override laadt ná
   de core-CSS en schaalt het laadscherm terug op mobiel. Strikt ≤981px → desktop en
   liggende tablet (≥982px) blijven exact zoals ze zijn. ---- */
@media (max-width: 981px) {
	.sellabees-preloader { overflow: hidden; }
	.sellabees-preloader__inner { max-width: 92vw; }
	.sellabees-preloader--nested-squares .sb-ns__word,
	.sellabees-preloader--maze-draw .mz__brand,
	.sellabees-preloader--wordmark-sheen .sb-ws__word {
		max-width: 92vw;
		text-align: center;
		white-space: normal;
		word-break: break-word;
	}
}
@media (max-width: 600px) {
	.sellabees-preloader--nested-squares .sb-ns { gap: 1.1rem; }
	.sellabees-preloader--nested-squares .sb-ns__stack { transform: scale(.8); }
	.sellabees-preloader--nested-squares .sb-ns__word {
		font-size: 1.25rem;
		letter-spacing: .2em;
		text-indent: .2em;
	}
	.sellabees-preloader--maze-draw .mz__brand,
	.sellabees-preloader--wordmark-sheen .sb-ws__word { font-size: 1.4rem; letter-spacing: .12em; }
	.sellabees-preloader__bar { width: 70vw; max-width: 220px; }
}

/* Merk-knoppen (basis). Secties kunnen varianten toevoegen. */
.button,
.wp-element-button,
.single_add_to_cart_button,
.sellabees-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--fleur-font-sans);
	font-weight: 700;
	font-size: 14px; /* Figma-knoptekst = 14px (was 15px → oogde te groot) */
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	padding: 14px 26px;
	border: 0;
	border-radius: 100px;
	background: var(--fleur-pink);
	color: #fff;
	/* Vloeiende hover: ook achtergrond/tekst/rand mee-faden (niet alleen filter),
	   anders "klikken" ghost-/outline-knoppen abrupt om. */
	transition: background-color .25s ease, color .25s ease, border-color .25s ease,
		box-shadow .25s ease, filter .25s ease, transform .25s ease;
}
/* Hover: knop komt subtiel omhoog (lift) met zachte schaduw. Vloeiend via de
   transform/box-shadow die in de transitie hierboven op .button staan. */
.button:hover,
.wp-element-button:hover,
.single_add_to_cart_button:hover,
.sellabees-btn:hover {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(76, 61, 69, .22);
}

.sellabees-btn--outline {
	background: transparent;
	color: var(--fleur-aubergine);
	border: 1.5px solid var(--fleur-aubergine);
}
.sellabees-btn--outline:hover { background: var(--fleur-aubergine); color: #fff; filter: none; }

/* Toegankelijk verbergen (screenreader-only). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}