/**
 * reve-base.css -- merk-niveau: :root-tokens + generieke componenten (.btn / .card / .badge).
 * Bron: Elementor global kit, live uitgelezen op reve.gregoir.com (designs/homepage-redesign.html,
 * designs/about-us-redesign.html, designs/category-redesign.html).
 * Regel: komt iets op meer dan één pagina voor, dan hoort het hier, niet in reve-pages.css
 * of een per-pagina <style>.
 */

@font-face {
	font-family: 'Bosque';
	/* Zelf-gehost in het theme (was: absolute URL naar reve.gregoir.com -- cross-origin
	   afhankelijkheid van de productiesite, brak zodra die het bestand verplaatst). woff2
	   (52 KB) met .ttf als terugval voor oudere browsers. functions.php preloadt het woff2. */
	src: url('../fonts/BOSQUE.woff2') format('woff2'),
	     url('../fonts/BOSQUE.ttf') format('truetype');
	font-weight: 400;
	/* optional i.p.v. swap: Bosque draagt de grote h1/h2-koppen (--f-display). Met swap rendert
	   de kop eerst in de fallback-serif en springt de tekst -- en de hele layout eronder --
	   opnieuw zodra Bosque binnenkomt (de "shifting" op de homepage-hero). optional houdt de
	   fallback definitief als het font niet binnen ~100 ms klaar is; met de preload in
	   functions.php haalt het die venstertijd nu wél, dus de koppen tonen in Bosque zonder shift. */
	font-display: optional;
}

:root {
	--c-primary: #303030;
	--c-black: #0A0A0A;
	--c-secondary: #CAC3B4;
	--c-text: #000000;
	--c-white: #FFFFFF;
	--c-grey-bg: #F5F5F5;
	--c-grey-mid: #ABABAB;
	--c-grey-line: #CFCFCF;
	--c-error: #AD0000;
	--c-success: #067C15;
	--c-info: #1C69D4;
	--c-info-hover: #0653B6;
	--c-veil: #231F1A33;
	--c-label: #5C5C5C;

	--f-display: 'Bosque', ui-serif, Georgia, 'Times New Roman', serif;
	--f-head: 'Jost', ui-sans-serif, -apple-system, sans-serif;
	--f-body: 'Inter', ui-sans-serif, -apple-system, sans-serif;

	--gap: clamp(20px, 4vw, 56px);
	--wrap: 1360px;
	--sec: clamp(64px, 7vw, 96px);
}

/* ---------- reset, zelfde op elke pagina in de designs ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--c-white); color: var(--c-text); font: 400 18px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; }
h2 { font-family: var(--f-display); font-size: clamp(28px, 3.4vw, 42px); line-height: 1.15; font-weight: 400; }
h3 { font-family: var(--f-head); font-size: 19px; line-height: 1.3; font-weight: 400; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Generieke kicker-label -- elke pagina had 'm ergens anders genest (.section-hd .kick,
   .pin .kick, ...), maar de about-us-hero gebruikt 'm los, dus als component naar hier
   getild i.p.v. nog een vijfde plek-specifieke scope toe te voegen. */
.kick { font: 500 12.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-label); margin: 0 0 12px; }
.dark .kick { color: var(--c-secondary); }

/* Skip-link: buiten beeld tot hij focus krijgt (toetsenbordgebruiker, tab vanaf de adresbalk).
   Zonder deze regel is het een gewoon blokelement bovenaan de body, dat de sticky header
   naar beneden duwt -- precies het gerapporteerde gat boven de balk. */
.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--c-primary); color: #fff; padding: 14px 22px; font: 600 14px/1 var(--f-body); text-decoration: none; }
.skip:focus { left: 0; }

/* ---------- .btn -- zie designs/about-us-redesign.html ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 16px 26px; font: 600 13.5px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase;
	text-decoration: none; cursor: pointer; border: 1px solid var(--c-black);
	transition: background .15s, color .15s;
}
.btn-1 { background: var(--c-black); color: #fff; }
.btn-1:hover { background: #000; }
.btn-2 { background: transparent; color: var(--c-black); }
.btn-2:hover { background: var(--c-grey-bg); }
.btn-light { border-color: #fff; background: #fff; color: var(--c-black); }
.btn-light:hover { background: var(--c-secondary); border-color: var(--c-secondary); }
.btn-ghost { border-color: #fff; background: transparent; color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
/* Elke .btn over de volle breedte op mobiel (klantvraag 2026-09-02) -- behalve de sticky
   "Add to cart"-balk op de productpagina, die heeft z'n eigen layout (.stickybuy .btn-buy,
   geen .btn-klasse). Zelfde breekpunt als .actions .pair in reve-pages.css. */
@media (max-width: 600px) {
	.btn { width: 100%; }
}

/* ---------- .card -- zie designs/category-redesign.html, de productkaart ---------- */
.card { text-decoration: none; display: flex; flex-direction: column; }
.card .ph { aspect-ratio: 4/3; background: var(--c-grey-bg); overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.card:hover .ph img { transform: scale(1.045); }
.card .brand { font: 500 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--c-label); margin-top: 13px; }
.card .nm { font: 400 16.5px/1.3 var(--f-head); color: var(--c-primary); margin-top: 5px; }
.card .dim { font: 400 13px/1.3 var(--f-body); color: var(--c-label); margin-top: 4px; }
.card .pr { margin-top: 8px; font: 600 16px/1.2 var(--f-body); color: var(--c-primary); display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.card .pr del { color: var(--c-error); font-weight: 400; font-size: 14.5px; text-decoration: line-through; }
.card .pr .vat { font-weight: 400; font-size: 12.5px; color: var(--c-label); }
.card .cta {
	margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px;
	border: 1px solid var(--c-black); background: #fff; color: var(--c-black);
	font: 600 12px/1 var(--f-body); letter-spacing: .05em; text-transform: uppercase; transition: background .15s, color .15s;
}
.card:hover .cta { background: var(--c-black); color: #fff; }

/* ---------- .badge -- nieuw, geen bestaand designbestand had dit patroon ---------- */
.badge {
	display: inline-flex; align-items: center; padding: 4px 10px;
	font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase;
	background: var(--c-grey-bg); color: var(--c-primary);
}
.badge-sale { background: var(--c-error); color: #fff; }
.badge-new { background: var(--c-black); color: #fff; }