/* =============================================================================
   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 */
	/* Menu-item van de pagina waar je staat (zie layout.css). Het merkroze, zoals
	   gevraagd: dat is de kleur van de shop en die hoort hier terug te komen.
	   Wat je ervan mag verwachten: op wit is dit 1,60:1 (gemeten), dus het is een
	   zachte hint en geen sterke markering — op een fel scherm of bij tegenlicht is
	   het verschil met de zwarte buuritems klein. Steviger nodig? Deze regel op
	   #a55850 zetten (zelfde tint, donkerder, 5,11:1). */
	--hinke-pink-actief: var(--hinke-pink);
	/* Licht roze vlak voor meldingen en lege staten: het merkroze op 25% over wit
	   (255−(255−239)·0,25 = 251 · 240 · 239). Zo blijft het herkenbaar roze en blijft
	   tekst van --hinke-body erop ruim leesbaar (7,7:1 gemeten). */
	--hinke-pink-zacht: #fbf0ef;
	/* Veldrand op de accountpagina's. Mimoda gebruikt daar een WARME lijn (#e0cfcf) in
	   plaats van neutraal grijs; omgerekend is dat hun roze op tint 0°, verzadiging 21%,
	   helderheid 85%. Dit is dezelfde behandeling met de tint van Hinke (6°):
	   hsl(6, 21%, 85%) = #e0d1cf. Iets warmer dan --hinke-line (#d9d9d9) en daarmee
	   zichtbaar van de shop, zonder een tweede grijs te introduceren. */
	--hinke-line-roze: #e0d1cf;

	/* Copenhagen Collection: eigen kleur voor dat ene menu-item, door de klant
	   opgegeven (#005293). Staat als token zodat de kleur op één plek staat als
	   de collectie straks ook elders opduikt (banner, kaart, badge).
	   De collectie heette eerst Stockholm; de kleur is niet gewijzigd. */
	--hinke-copenhagen: #005293;
	--hinke-gold: #d3bb6c;   /* CTA's, copyright */
	/* Hover op een gouden CTA: het goud x 0,85. Uniform vermenigvuldigd, zodat de
	   kleur donkerder wordt zonder van tint te verschuiven. De witte letter loopt
	   mee: 1,89:1 in rust, 2,62:1 hierop. */
	--hinke-gold-donker: #b39f5c;
	--hinke-badge: #ec827e;  /* winkelwagen-teller */
	--hinke-heart: #d2544f;  /* USP-hartje topbalk */
	--hinke-sale: #d2544f;   /* sale-badge, afgeprijsde prijs, verlanglijst-hartje */
	--hinke-line: #d9d9d9;   /* scheidingslijnen (het sorteervak is nu goud) */
	/* Focusring: de lijn om alles wat je aanklikt of aantikt (zie 3c voor de
	   afweging en de contrastwaarden). Twee waarden, want de ene ondergrond is
	   wit en de andere roze of goud. Eigen tokens en geen verwijzing naar
	   --hinke-badge / --hinke-sale, die dezelfde hex hebben: verandert de
	   winkelwagen-teller of het sale-roze ooit, dan hoort de focusring niet
	   ongemerkt mee te veranderen. */
	--hinke-focus: #ec827e;          /* op wit en op de lichte band */
	--hinke-focus-op-kleur: #d2544f; /* op roze, goud, donkere tegels, foto's */
	/* "Gratis verzending gehaald" — het enige groen in de huisstijl (Figma 2197:1627).
	   Stond eerst alleen op de winkelwagen als lokale variabele; nu een token, want de
	   afrekenpagina gebruikt hem ook en twee keer dezelfde hex is één te veel. */
	--hinke-free: #93c47d;
	--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;
}

/* -----------------------------------------------------------------------------
   3b. Vinkjes — leeg een gewoon vakje, aangevinkt de kleur van de shop

   Twee standen, en dat is met opzet:
     leeg        wit vakje met een haarlijn (--hinke-line) — een gewoon, neutraal
                 vinkvakje, zoals de bezoeker overal kent;
     aangevinkt  gevuld met de 1e kleur van de shop (#efc2bd) en een wit vinkteken.

   Eerder stond het vakje in élke stand roze. Dat leest als "al aangevinkt": een
   gevuld vakje is precies het signaal dat er iets gekozen is, dus een leeg-maar-roze
   vakje geeft de verkeerde hint. Nu doet de kleur wat kleur hoort te doen — hij
   markeert de keuze.

   Het vinkteken is WIT, op verzoek. Dat is een zachte combinatie: wit op #efc2bd
   komt op 1,6:1 uit (gemeten), waar 3:1 de norm is voor zulke tekens. Op een fel
   scherm zie je het goed, bij tegenlicht of op een gedimd scherm valt het weg. Moet
   het steviger, dan zijn er twee wegen die de roze kleur intact laten: de vulling
   donkerder maken (#a55850 met wit = 5,1:1) of het vinkteken donkergrijs (#4e4e4e
   op roze = 4,8:1).

   Het teken zit in de data-URI's van de losse componenten (pages/checkout.css) en
   kan daarom niet uit een variabele komen — de kleur staat daar dus per icoon.
   -------------------------------------------------------------------------- */

:root {
	--hinke-check-bg: var(--hinke-pink); /* 1e kleur van de shop, ná aanvinken */
	--hinke-check-mark: var(--hinke-white);
	--hinke-check-rand: var(--hinke-line); /* het lege vakje */
}

/*
 * Vinkjes die de browser zelf tekent (onthoud-mij bij inloggen, adresformulieren,
 * reactieformulier). `accent-color` alleen was hier niet genoeg: de browser kiest bij
 * een lichte vulling zélf een donker vinkteken, en dan zou het ene vinkje in de
 * winkel wit zijn en het andere donker. Daarom tekenen we het vakje hier zelf, met
 * hetzelfde teken als op de afrekenpagina.
 *
 * Alleen kleur en teken staan hier; de MAAT laten we op wat de browser gaf, zodat een
 * vinkje niet ineens ergens uit verhouding staat. Een component dat een eigen maat
 * wil, zet die zelf (zie de 23×23 op de afrekenpagina).
 *
 * Radio's blijven hier met opzet buiten — dat zijn de betaalmethodes, met hun eigen
 * opmaak.
 */
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	/*
	 * DE MAAT HOORT HIER, en dat was de ontbrekende regel.
	 *
	 * `appearance: none` haalt óók de ingebouwde maat van het vakje weg. Een
	 * checkbox heeft geen inhoud, dus zonder eigen breedte/hoogte klapt hij in tot
	 * alleen zijn randen — gemeten 2×2px in de inlog-popup, een roze stipje. Op de
	 * plekken waar het wél goed stond (afrekenen, filters) kwam dat doordat de
	 * component-CSS daar zelf een maat zet; overal daarbuiten viel het vakje weg.
	 *
	 * 16px is de gangbare maat voor een vinkvakje en zit dicht bij wat de browser
	 * zelf aanhoudt (13px), dus bestaande uitlijningen schuiven er niet merkbaar
	 * van. Componenten die een andere maat willen, overschrijven dit gewoon — die
	 * regels zijn specifieker.
	 *
	 * `flex: none` erbij: in een flexrij (zoals "Ingelogd blijven") zou het vakje
	 * anders meekrimpen met de beschikbare ruimte.
	 */
	flex: none;
	width: 16px;
	height: 16px;
	border: 1px solid var(--hinke-check-rand);
	border-radius: 0;
	background: var(--hinke-white) no-repeat center / 62% 62%;
	accent-color: var(--hinke-check-bg); /* terugval als appearance niet pakt */
	cursor: pointer;
}

input[type="checkbox"]:checked {
	border-color: var(--hinke-check-bg);
	background-color: var(--hinke-check-bg);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.6 7.4 5.2 11 12.4 3.4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}

input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--hinke-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   3c. Focusring — nooit meer het blauw van de browser

   WAT ER MIS WAS
   Alles wat je aanklikt of aantikt en de aandacht krijgt (een <select>, een link,
   een knop, een invoerveld) kreeg van de browser zelf een lijn eromheen. Op een
   Mac en op de iPhone is die lijn blauw — de systeemkleur van Apple — en dat is de
   enige plek in de winkel waar blauw opduikt dat niets met het merk te maken heeft.
   Op de sorteerkeuze in de winkel viel dat het meest op.

   WAT HET NU DOET
   Eén regel voor de hele webshop: die lijn is nu roze. Hij verdwijnt niet, en dat
   is met opzet — wie met het toetsenbord door de pagina loopt (Tab) heeft dit als
   enige aanwijzing waar hij is. Weghalen zou de winkel voor die bezoekers
   onbruikbaar maken; hem in de huisstijl zetten lost het op zonder dat verlies.

   `:focus-visible` en niet `:focus`: de browser laat de ring dan alleen zien
   wanneer hij nodig is (toetsenbord, en bij keuzelijsten ook bij de muis) en niet
   bij elke klik op een knop.

   WELK ROZE — TWEE WAARDEN, BEIDE UIT HET PALET
   Niet de #efc2bd van de topbalk: die komt op wit uit op 1,60:1 en dan zie je de
   ring gewoon niet meer. Vandaar twee tokens, gekozen op de ondergrond waar de
   ring op ligt (gemeten contrast):

                          wit    lichte band   roze #efc2bd   goud
     --hinke-focus        2,61   2,39          1,63           1,38   (#ec827e)
     --hinke-focus-op-
       kleur              4,10   3,76          2,56           2,17   (#d2544f)

   `--hinke-focus` is het roze van de winkelwagen-teller en staat op alles wat op
   wit of op de lichte band ligt — het overgrote deel van de winkel.
   `--hinke-focus-op-kleur` is het diepere sale-roze en staat op de roze footer, de
   roze topbalk, de gouden inlogbalk, de donkere categorietegels en op foto's.

   Op die gekleurde vlakken stond eerst een WITTE ring. Dat is niet alleen minder
   huisstijl, het was ook slechter te zien: wit op het footer-roze is 1,60:1, het
   diepere roze 2,56:1.

   WAT DIT KOST
   Op wit was de ring eerst zwart (21:1). Roze is 2,61:1 — nog steeds duidelijk
   zichtbaar en meer dan het goud dat het thema op formulieren gebruikte (1,89:1),
   maar onder de 3:1 die WCAG 1.4.11 voor een focusindicator vraagt. Dat is een
   bewuste keuze voor de huisstijl. Wil je die 3:1 alsnog, dan is het één regel:
   zet --hinke-focus op #d2544f, dezelfde waarde als de variant eronder.

   De ring ligt 2px BUITEN het element (behalve waar dat niet past, zoals in de
   gouden inlogbalk). Dat is niet cosmetisch: daardoor ligt hij op de achtergrond
   van de pagina en niet op de knop zelf, en dus is het contrast met die
   achtergrond wat telt — ook bij een gouden knop.

   WAT HIER BUITEN VALT
   Ringen die een KEUZE aangeven en geen focus: het zwarte kader om een gekozen
   maat of kleur (pages/shop.css, pages/product.css) en om de gekozen maat in het
   verlanglijst-venster. Dat is de markering "dit heb je aangeklikt" en die moet
   ánders zijn dan de focusring, anders zijn de twee niet te onderscheiden.
   -------------------------------------------------------------------------- */


:focus-visible {
	outline: 2px solid var(--hinke-focus);
	outline-offset: 2px;
}

/*
 * En dezelfde ring bij een MUISKLIK of TIK op een veld of keuzelijst.
 *
 * `:focus-visible` hierboven dekt het toetsenbord. Bij tekstvelden en keuzelijsten
 * tekenen browsers hun ring ook bij een klik — en dat is precies waar het blauw van
 * Apple opdook. Zonder deze regel valt het per browser anders uit; hiermee is die
 * lijn altijd de onze, waar hij ook vandaan zou komen.
 *
 * NIET bij knoppen en niet bij vinkjes of radio's: daar laat de browser bij een klik
 * met opzet niets zien, en een ring die na elke klik blijft staan is precies de ruis
 * die `:focus-visible` bedoeld is om te voorkomen.
 *
 * `:where()` om de uitzonderingen, zodat deze regel op (0,1,1) blijft. Dat is met
 * opzet zo laag: elk onderdeel met een eigen focusopmaak — het zoekveld met zijn
 * gouden rand, de velden op de afrekenpagina, het contactformulier — is specifieker
 * en houdt dus zijn eigen behandeling. Dit is de terugval, niet de baas.
 */
select:focus,
textarea:focus,
input:where(:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"])):focus {
	outline: 2px solid var(--hinke-focus);
	outline-offset: 2px;
}

/*
 * Het blauw dat de browser ZELF in besturingselementen zet: het vinkje in een
 * vakje, het bolletje in een radio, en in een deel van de browsers ook de
 * gemarkeerde regel in een open keuzelijst. `accent-color` is de enige knop die we
 * daarvoor hebben.
 *
 * Voor de keuzelijst is het een duwtje en geen garantie: die lijst tekent het
 * besturingssysteem buiten de pagina om (zie de toelichting bij de sorteerkeuze in
 * pages/shop.css). Browsers die het negeren houden hun eigen markering; de lijn
 * ERÓM is wél van ons.
 */
:root {
	accent-color: var(--hinke-pink);
}

/*
 * Tekst die je met de muis selecteert kreeg ook het blauw van de browser. Zelfde
 * gedachte, zelfde huisstijl: het roze van de topbalk met de inkt van de body
 * erop (13,1:1, dus goed te lezen terwijl je sleept).
 */
::selection {
	background: var(--hinke-pink);
	color: var(--hinke-ink);
}

/* -----------------------------------------------------------------------------
   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-focus);
}

/* 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;
}