/* =============================================================================
   Hinke. Trendstore — huisstijl: webfonts, tokens en base.
   Alle waarden komen uit Figma (file NVT61IBlNbt4LyTpo3CVlI).
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Webfonts — lokaal gehost (latin subset, statische per-gewicht faces)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Outfit';
	src: url('../fonts/Outfit-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('../fonts/Outfit-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('../fonts/Outfit-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('../fonts/Outfit-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Outfit';
	src: url('../fonts/Outfit-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'DM Serif Display';
	src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Kumbh Sans';
	src: url('../fonts/KumbhSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Kumbh Sans';
	src: url('../fonts/KumbhSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* -----------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	/* --- Huisstijl Hinke -------------------------------------------------- */
	--hinke-pink: #efc2bd;   /* topbalk + footer-vlak */
	--hinke-gold: #d3bb6c;   /* CTA's, copyright */
	--hinke-badge: #ec827e;  /* winkelwagen-teller */
	--hinke-heart: #d2544f;  /* USP-hartje topbalk */
	--hinke-sale: #d2544f;   /* sale-badge, afgeprijsde prijs, verlanglijst-hartje */
	--hinke-line: #d9d9d9;   /* scheidingslijnen, sorteervak */
	--hinke-band: #f5f5f5;   /* lichte band, o.a. "Shop the look" */
	--hinke-ink: #000000;
	--hinke-body: #4e4e4e;   /* bodytekst + producttitels */
	--hinke-muted: #868686;  /* placeholders + prijzen */
	--hinke-white: #ffffff;

	--hinke-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--hinke-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	--hinke-font-ui: 'Kumbh Sans', 'Outfit', sans-serif;

	/* Containerbreedtes uit het ontwerp (canvas 1920):
	   header  logo x=181 … acties tot x=1742  → 1560
	   footer  kolom 1 x=300 … kolom 4 tot 1620 → 1320 */
	--hinke-container-max: 1320px;
	--hinke-gutter: 24px;

	/* --- Beweging (zie assets/css/motion.css) ------------------------------
	   Drie duren en één curve, zodat alles op de site in hetzelfde tempo
	   beweegt: -snel voor hover/indrukken, -mid voor uitklappen en beelden,
	   -traag voor het inkomen bij scrollen. De curve is een rustige ease-out:
	   snel op gang, zacht uit — nooit een stuiter. */
	--hinke-ease: cubic-bezier(.22, .61, .36, 1);
	--hinke-dur-snel: 180ms;
	--hinke-dur-mid: 320ms;
	--hinke-dur-traag: 620ms;
	--hinke-reveal-shift: 18px; /* afstand die een blok bij scrollen omhoog komt */

	/* --- Tokens die de CORE uitleest (SELLABEES-CORE.md §5) ---------------- */
	/* Merk-accent: sale-badge, cart-teller, toast-icoon, review-sterren. */
	--sellabees-accent: var(--hinke-gold);
	/* Historische naam van het accent: inlog-popup, cart-e-mail, wishlist-modal. */
	--sellabees-red: var(--hinke-gold);
	/* Secundair accent (preloader-goud). */
	--sellabees-yellow: var(--hinke-pink);
	--sellabees-ink: var(--hinke-ink);
	--sellabees-font-heading: var(--hinke-font-heading);
	/* Winkelwagen-melding: in het ontwerp een wit paneel met zwarte tekst en
	   een gouden ronde icoonbadge — zie assets/css/pages/product.css. */
	--sellabees-toast-bg: var(--hinke-white);
	--sellabees-toast-color: var(--hinke-ink);
	/* Maat-swatches in de productloop: in het ontwerp gevuld roze zonder rand
	   (27×27, witte tekst) — zie assets/css/pages/home.css. */
	--sellabees-size-bg: var(--hinke-pink);
	--sellabees-size-border: var(--hinke-pink);
	/* Laadscherm. */
	--sellabees-preloader-bg: var(--hinke-white);
	--sellabees-preloader-accent: var(--hinke-pink);
	--sellabees-preloader-accent2: var(--hinke-gold);
}

/* -----------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

/*
 * Wat `hidden` heeft, blijft weg.
 *
 * De browser geeft `[hidden]` een `display: none`, maar dat komt uit de
 * browserstijl en daar wint ÉLKE eigen `display`-regel van. Dat is hier al twee
 * keer misgegaan: het knopje "Laad minder" (dat de server met `hidden` rendert en
 * de JS pas aanzet als er echt iets bijgeladen is) stond zichtbaar op elke
 * categoriepagina, ook bij zeven producten, omdat er verderop een
 * `display: inline-block` op stond. Datzelfde risico geldt voor "+ meer" bij de
 * filters, het zoekpaneel en de inlog-popup — die worden allemaal met `hidden`
 * aan- en uitgezet.
 *
 * Vandaar hier één regel met `!important`. Dat is precies het geval waarvoor die
 * bestaat: een `display` in een component mag nooit per ongeluk winnen van "dit
 * element hoort er niet te zijn". Wie een element toch wil laten zien, haalt het
 * attribuut weg — dat is ook wat de JS doet.
 */
[hidden] {
	display: none !important;
}

body {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--hinke-ink);
	background: var(--hinke-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hinke-font-heading);
	font-weight: 400;
}

/* -----------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */

/* Zichtbaar voor screenreaders, onzichtbaar op het scherm (WP-conventie). */
.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;
	width: 1px;
	word-wrap: normal !important;
}

.hinke-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1002;
	padding: 12px 20px;
	background: var(--hinke-white);
	color: var(--hinke-ink);
	font-size: 14px;
	text-decoration: none;
}
.hinke-skip-link:focus {
	left: 0;
	outline: 2px solid var(--hinke-ink);
}

/* Container: exact 1320px op het ontwerpcanvas, daaronder met gutters. */
.hinke-container {
	width: min(100% - (2 * var(--hinke-gutter)), var(--hinke-container-max));
	margin-inline: auto;
}