/* =============================================================================
   Hinke. Trendstore — header & footer.

   1:1 met Figma (file NVT61IBlNbt4LyTpo3CVlI, canvas 1920px):
     header  "Component 2" node 2194:573  — 1920×150
     footer  "Component 3" node 2195:285  — 1920×508

   Elke px-waarde hieronder komt uit de design-data (get_metadata /
   get_design_context), niet uit een screenshot. Coördinaten in commentaar zijn
   absoluut op het 1920-canvas.
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */

/*
 * De header blijft bovenaan staan. `sticky` en niet `fixed`: zo houdt hij zijn
 * plek in de pagina en hoeft er niets gecompenseerd te worden met een marge —
 * bij `fixed` valt de eerste 150px van elke pagina onder de header.
 *
 * Zodra je voorbij de topbalk scrollt schuift die erboven weg (motion.css §7:
 * `.is-stuck`), zodat alleen de witte balk met logo, menu en iconen overblijft.
 * Dat gebeurt met een transform en niet door de topbalk in te klappen: een
 * transform verandert de hoogte in de pagina niet, dus verspringt de inhoud niet.
 */
.hinke-header {
	position: sticky;
	top: 0;
	background: var(--hinke-white);
	/* Onder de core-lagen blijven: popup 1000, wishlist-modal 1001,
	   preloader/toast 99999. */
	z-index: 900;
}

/*
 * Ankerlinks (de inhoudsopgave op infopagina's, elke #hash) moeten niet ónder de
 * header landen. `scroll-padding-top` op het scrollende element regelt dat voor
 * álle sprongen in één keer. De hoogte van de balk meet hinke.js §9 op
 * (--hinke-bar-h); 110px is de ontwerpmaat als terugval.
 */
html {
	scroll-padding-top: calc(var(--hinke-bar-h, 110px) + 16px);
}

/* -----------------------------------------------------------------------------
   Topbalk — y 0…40, #efc2bd, gecentreerde USP-slider
   Ontwerp: hartje 15×15 op x=809 + tekst x=833…1111 (samen gecentreerd op 960)
   -------------------------------------------------------------------------- */

.hinke-topbar {
	height: 40px;
	background: var(--hinke-pink);
	overflow: hidden;
}

.hinke-topbar__inner {
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Alle USP's liggen op elkaar (grid-stack) zodat wisselen niet verspringt. */
.hinke-topbar__list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-topbar__item {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px; /* 833 − (809 + 15) */
	font-family: var(--hinke-font-body);
	font-weight: 600; /* Outfit SemiBold */
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-white);
	white-space: nowrap;
	/* Slides liggen op elkaar; de actieve schuift in van rechts, de vorige
	   schuift naar links weg. De topbalk heeft overflow:hidden, dus er piept
	   niets buiten de balk. */
	opacity: 0;
	visibility: hidden;
	transform: translateX(28px);
	transition: opacity .5s ease, transform .5s ease;
}

.hinke-topbar__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.hinke-topbar__item.is-leaving {
	opacity: 0;
	visibility: visible;
	transform: translateX(-28px);
}

/* Wie beweging heeft uitgezet, krijgt een rustige fade zonder verschuiving. */
@media (prefers-reduced-motion: reduce) {
	.hinke-topbar__item {
		transform: none;
		transition: opacity .25s linear;
	}
	.hinke-topbar__item.is-leaving {
		transform: none;
	}
}

.hinke-topbar__icon {
	flex: 0 0 auto;
	display: block;
	width: 15px;
	height: 15px;
}

/* -----------------------------------------------------------------------------
   Hoofdbalk — y 40…150 (110px), #fff
   -------------------------------------------------------------------------- */

.hinke-header__bar {
	background: var(--hinke-white);
}

.hinke-header__inner {
	/* Breder dan de footer: logo op x=181, acties tot x=1742. */
	--hinke-container-max: 1560px;
	position: relative;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Logo — 93×93 rond, x=181 y=49 (verticaal gecentreerd in de balk) */
.hinke-header__logo {
	flex: 0 0 auto;
	display: block;
	width: 93px;
	height: 93px;
	line-height: 0;
}

.hinke-header__logo img {
	width: 93px;
	height: 93px;
	border-radius: 100px;
	object-fit: cover;
	display: block;
}

/* Menu — gecentreerd op het canvas (960), niet op de resterende ruimte.
   top: 47px = y=87 op het canvas, gerekend vanaf de bovenkant van de balk (40). */
.hinke-nav {
	position: absolute;
	top: 47px;
	left: 50%;
	transform: translateX(-50%);
	/*
	 * Boven het zoekpaneel, want de uitklap van Kleding hangt eroverheen.
	 *
	 * WAT ER MIS GING: met het zoekveld open viel het submenu ONDER de zoekbalk.
	 * Op het overlappende vlak (gemeten 200×80px) raakte een klik het zoekveld en
	 * niet de menulink.
	 *
	 * WAAROM DE z-index: 20 OP HET SUBMENU DAAR NIETS AAN DEED: `transform` op deze
	 * <nav> maakt er een eigen stapellaag van. Alles binnen het menu wordt daarin
	 * geordend, en de nav zelf deed als geheel mee op "auto" — dus vergeleek de
	 * browser de nav met het zoekformulier, niet het submenu. Dat formulier heeft
	 * óók een transform (voor het openschuiven), staat daarmee in dezelfde laag, en
	 * komt LÁTER in de HTML. Bij gelijke stand wint de laatste.
	 *
	 * 20 en niet 10: het mobiele paneel verderop in dit bestand staat op 10, en dit
	 * hoort daar boven te blijven als beide ooit tegelijk zichtbaar zijn.
	 */
	z-index: 20;
}

.hinke-nav__menu {
	display: flex;
	align-items: center;
	gap: 32px; /* gemeten tussenruimte in het ontwerp */
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-nav__menu > li {
	position: relative;
}

.hinke-nav__menu > li > a {
	display: block;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	text-transform: uppercase;
	color: var(--hinke-ink);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Aanraakdoel van de menu-items op 24px (WCAG 2.5.8, niveau AA).
 *
 * De link is 18px hoog — dat is de regelhoogte van 14px hoofdletters, en die maat
 * is het ontwerp. Hem echt hoger maken zou de balk van 150px herschikken, dus
 * hetzelfde middel als bij de hamburger: een onzichtbaar vlak dat 3px boven en
 * onder uitsteekt (18+6=24). Alleen verticaal, want links en rechts liggen de
 * buuritems en die mogen elkaars vlak niet overlappen — dan tik je de verkeerde.
 *
 * Gemeten met elementFromPoint, niet met de vakmaat: een pseudo-element valt
 * buiten getBoundingClientRect, dus alleen een echte hit-test laat zien wat een
 * vinger of muis werkelijk raakt.
 */
.hinke-nav__menu > li > a::after {
	content: '';
	position: absolute;
	top: -3px;
	right: 0;
	bottom: -3px;
	left: 0;
}

.hinke-nav__menu > li > a {
	position: relative;
}

/*
 * GEEN grijze flits bij het aantikken — in het uitklapmenu op een telefoon, de
 * hamburger die het opent en de submenu-regels erin.
 *
 * iOS Safari legt bij een tik een doorschijnend zwart vlak over het aangetikte element.
 * Op de accordeon van de productpagina was dat gemeten rgb(226,226,226) over de hele
 * rij, één frame lang; in het menu is het hetzelfde vlak, en over een menuregel van
 * 44px valt dat net zo op. Op verzoek van de eigenaar ook hier weg.
 *
 * `touch-action: manipulation` hoort erbij: geen dubbeltik-zoom op een menuregel, dus
 * één tik doet ook echt in één keer wat hij moet doen.
 *
 * WAT DIT KOST: op een aanraakscherm is die flits de enige bevestiging tussen tik en
 * paginawissel. Voor een menuregel is dat te overzien — er kom je meteen na op een
 * andere pagina — maar het is een echte terugkoppeling minder. Wil je er iets in de
 * plaats: een `:active`-kleur op de regel (roze, zoals de pagina waar je staat) is de
 * plek. De focusring voor toetsenbordgebruik staat los en blijft (§14).
 */
.hinke-nav__menu a,
.hinke-header__burger {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.hinke-nav__menu > li > a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Het item van de pagina waar je nu staat: roze én onderstreept.
 *
 * Alle vijf de classes staan erbij omdat WordPress ze door elkaar gebruikt:
 * `current-menu-item` bij een gewoon menu-item, `current_page_item` bij een
 * pagina-item, en de -ancestor/-parent-varianten wanneer je in een onderliggende
 * categorie of subpagina zit. Het zelfgebouwde fallback-menu (functions.php)
 * gebruikt met opzet dezelfde `current-menu-item`, zodat dit één regel blijft.
 *
 * Alleen kleur, geen streep eronder (zo gevraagd), en die kleur is het merkroze
 * (--hinke-pink-actief in main.css, met de contrastmeting erbij). Het is dus een
 * zachte hint; wie de markering steviger wil hebben verandert die ene token en
 * niet deze regel.
 *
 * De onderstreping bij :hover blijft wél staan: dat is de reactie op de muis en
 * geen paginastand, dus die twee bijten elkaar niet.
 */
.hinke-nav__menu > li.current-menu-item > a,
.hinke-nav__menu > li.current-menu-ancestor > a,
.hinke-nav__menu > li.current-menu-parent > a,
.hinke-nav__menu > li.current_page_item > a,
.hinke-nav__menu > li.current_page_ancestor > a {
	color: var(--hinke-pink-actief);
}

/*
 * "Copenhagen Collection" — eigen kleur (#005293, opgave van de klant).
 *
 * Ook wanneer je ÓP die categorie staat blijft hij blauw: de kleur is hier de
 * identiteit van de collectie, en er dan roze van maken leest als een fout. De
 * tweede selector is daarvoor: die is specifieker (0,4,1) dan de actieve-staat
 * hierboven (0,3,1), dus deze regel wint ongeacht de volgorde in dit bestand.
 * De onderstreping bij hover blijft staan — dat is de muisreactie, niet de kleur.
 *
 * VET, zodat de collectie eruit springt. De rest van de balk staat op 400; dit item
 * krijgt 700, dezelfde dikte die de rest van de shop voor nadruk gebruikt.
 *
 * Het item wordt er 5px breder van (175 → 180px). De balk is gecentreerd, dus de
 * rechterkant van de rij schuift daarvan 2px op. Boven 1360px is dat ruim binnen de
 * ruimte tot de icoonrij (38px over op 1440). Tussen 1201 en ~1310px overlappen de
 * laatste menu-items al met de iconen — gemeten óók met gewicht 400 (–80px op 1201px),
 * dus dat zit niet in deze regel maar in de breedte van de balk zelf.
 *
 * Deze twee regels gelden ook in het uitklapmenu op telefoon en tablet: dat is
 * hetzelfde menu (één wp_nav_menu in header.php), dus daar is de collectie net zo
 * blauw en net zo vet als in de balk.
 */
.hinke-nav__menu > li.hinke-menu--copenhagen > a,
.hinke-nav__menu > li.hinke-menu--copenhagen.current-menu-item > a {
	font-weight: 700;
	color: var(--hinke-copenhagen);
}

/* In het submenu staat de tekst op een witte kaart; zelfde markering. */
.hinke-nav__menu .sub-menu li.current-menu-item > a,
.hinke-nav__menu .sub-menu li.current_page_item > a {
	color: var(--hinke-pink-actief);
}

/* Submenu's staan niet in het ontwerp — nette, merk-eigen default. */
.hinke-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 200px;
	margin: 0;
	padding: 12px 0;
	list-style: none;
	background: var(--hinke-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}

/*
 * Openklappen op focus geldt altijd (toetsenbord én een tap die de link focust);
 * de hover-variant alleen waar een muis is. Op een aanraakscherm bestaat :hover
 * niet betrouwbaar: hij blijft na een tap "hangen" tot je ergens anders tikt.
 *
 * Let op: onder 1200px staat het submenu hieronder al statisch en altijd open
 * (zie de mobiele header-regels), dus op telefoon en tablet is dit geen route
 * naar verborgen inhoud. Boven 1200px op een aanraakscherm is `:focus-within` de
 * enige weg; het hoofdmenu van deze shop heeft nu 0 submenu's, dus dat raakt
 * vandaag niets. Zodra er wél een submenu komt, hoort daar een tap-om-te-openen
 * knop bij in plaats van een hover.
 */
.hinke-nav__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

@media (hover: hover) {
	.hinke-nav__menu > li:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
	}
}

.hinke-nav__menu .sub-menu a {
	display: block;
	padding: 8px 20px;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-ink);
	text-decoration: none;
	white-space: nowrap;
}

.hinke-nav__menu .sub-menu a:hover {
	background: var(--hinke-pink);
	color: var(--hinke-white);
}

/* -----------------------------------------------------------------------------
   Acties — icoon boven label, onderlijnen op y=99, labels op y=106
   Ontwerp-centra: zoeken 1512,5 · verlanglijstje 1578,5 · log in 1645,5 · cart 1707
   Drijvende kracht is de ruimte tussen de labelvlakken: ±12px.
   -------------------------------------------------------------------------- */

/*
 * De vier acties. De tussenruimte van 12px komt uit het ontwerp (gemeten tussen de
 * labels op canvas 1920: 10, 14 en 13px), en op die breedte blijft die staan — zie
 * de media query verderop, waar hij ruimer wordt zodra de balk krimpt. Reden: de
 * kolommen zijn zo breed als hun label, dus die 12px is ook de afstand tussen twee
 * woorden van 9px. Zodra de balk smaller wordt staat het hele blok tegen het menu
 * aan en lezen "VERLANGLIJSTJE ACCOUNT WINKELWAGEN" als één streep tekst.
 */
/*
 * Het groepje LINKS in de balk: hamburger + zoeken (header.php).
 *
 * Op mobiel is dat de linkerkolom van de balk. Op desktop hoort de loep bij de vier
 * acties rechts, en dat is precies wat hier gebeurt: `margin-left: auto` duwt dit
 * groepje tegen het actieblok aan en de rechtermarge is dezelfde tussenruimte als
 * tussen de acties onderling (12px; 20px onder 1740 — zie de media-query verderop).
 * De hamburger zit hierin maar staat op desktop op `display: none`, dus dit groepje is
 * daar precies zo breed als de loep. Uitlijning en de 2px marge zijn overgenomen van
 * .hinke-header__actions, zodat icoon en label op dezelfde ontwerplijn staan.
 */
.hinke-header__tools {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-top: 2px;
	margin-left: auto;
	margin-right: 12px;
	/* Dit groepje staat in header.php vóór het logo (op mobiel is het de linkerkolom).
	   Op desktop hoort het rechts, dus draaien we de rij hier om: logo eerst, dan de
	   loep, dan de andere acties. */
	order: 1;
}

.hinke-header__actions {
	order: 2;
}

.hinke-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	/* Het blok staat in het ontwerp 1px onder het midden van de balk
	   (iconen y=75, labels y=106) — deze marge zet dat exact goed. */
	margin-top: 2px;
}

.hinke-header__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px; /* 106 − 99 */
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--hinke-ink);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* 24px hoog + flex-end → alle iconen staan met hun onderkant op één lijn,
   ook al zijn ze 24, 21, 24 en 23px hoog. */
/* 24px hoog + flex-end: alle iconen staan met hun onderkant op één lijn, ook al
   zijn ze 20, 21, 24 en 23px hoog. Let op bij het vervangen van een icoon: de
   vakmaat van deze SVG's zegt niets over hoe groot ze eruitzien, want de een is
   krap om het tekentje gesneden en de ander heeft lucht in zijn vak. Vergelijk
   dus de inkt en niet de width/height (zie de toelichting in header.php bij het
   zoekicoon). */
/* De iconen zijn nu alle vier 24×24 (inline SVG, zie header.php), dus hoeven ze
   niet meer met hun onderkant op één lijn gedwongen te worden — `center` en
   `flex-end` geven hier hetzelfde resultaat, en `center` beschrijft de bedoeling
   beter. De toelichting hierboven over verschillende icoonhoogtes gold voor de
   oude <img>-exports van 21×20, 21×21, 25×24 en 24×23. */
.hinke-header__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 24px;
}

/* Eén plek voor de maat van alle header-iconen. De lijndikte staat in de SVG zelf
   (stroke-width 1,7) omdat die met het tekentje meehoort, niet met de plaatsing. */
.hinke-header__ico {
	display: block;
	width: 24px;
	height: 24px;
}

.hinke-header__icon img {
	display: block;
}

/*
 * Het zoekicoon op een HELE pixelhoogte zetten.
 *
 * Gemeten stond het op 21 × 20,156 in plaats van 21 × 20. Oorzaak is een
 * samenloop: main.css zet globaal `img { height: auto }` (voor responsieve
 * beelden), en dat overrult het height-attribuut uit header.php. De hoogte volgt
 * dan de verhouding uit het bestand, en de viewBox van search.svg is
 * 21,3126 × 20,4595 — gebroken, want het is een Figma-export. 21 × 20,4595/21,3126
 * = 20,156.
 *
 * Met een gebroken hoogte valt elke horizontale rand tussen twee pixels en wordt
 * een lijn van 1px twee halve grijze lijnen. De andere drie iconen hebben een hele
 * viewBox en staan dus al goed; alleen deze had de correctie nodig.
 *
 * De SVG heeft `preserveAspectRatio="none"`, dus hij vult 21×20 exact — precies de
 * maat die header.php bij dit icoon beschrijft. Geen witruimte, geen vervorming die
 * je ziet (0,3px over de hele breedte).
 */
.hinke-header__icon img[src*="search"] {
	width: 21px;
	height: 20px;
}

.hinke-header__label {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 9px;
	line-height: 11px;
	text-transform: uppercase;
	color: var(--hinke-ink);
	white-space: nowrap;
}

.hinke-header__action:hover .hinke-header__label {
	text-decoration: underline;
}

/* Winkelwagen-teller uit de core (.sellabees-cart-count).
   Ontwerp: cirkel 12×12 op x=1707 y=76 = 12px rechts van, en gelijk met de
   bovenkant van, het 24×23 tasje. De core-CSS geeft hem een pill-vorm en
   verbergt hem bij 0 — beide overschrijven we, want het ontwerp toont de "0". */
.hinke-header__action--cart .sellabees-cart-count {
	position: absolute;
	top: 1px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--hinke-badge);
	color: var(--hinke-ink);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 8px;
	line-height: 1;
}

.hinke-header__action--cart .sellabees-cart-count.is-empty {
	display: inline-flex;
}

/*
 * Verlanglijst-teller op het hartje (.sellabees-wish-count uit de core).
 *
 * Zelfde bolletje als op het mandje — zelfde maat, zelfde kleur, zelfde plek ten
 * opzichte van het icoon — want het betekent hetzelfde: "hier staat iets van jou in".
 * Het hartje is 24 breed en loopt aan de bovenkant iets rond, dus het bolletje staat
 * 1px hoger en 1px verder naar rechts dan bij het tasje; daarmee valt het net buiten
 * de bocht in plaats van erin.
 *
 * Eén verschil met het mandje: bij LEEG is dit bolletje weg. Het ontwerp toont bij het
 * tasje bewust een "0" (dat is een vaste plek in de balk), maar een verlanglijstje
 * zonder inhoud hoort er niet met een 0 bij te staan — dat is de vraag "wat mis ik?"
 * zonder reden. De core zet daarvoor `is-empty`, en die laten we hier zijn werk doen.
 */
.hinke-header__action--wish .sellabees-wish-count {
	position: absolute;
	top: 0;
	left: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	background: var(--hinke-badge);
	color: var(--hinke-ink);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 8px;
	line-height: 1;
}

.hinke-header__action--wish .sellabees-wish-count.is-empty {
	display: none;
}

/*
 * De "1" een haartje naar links, zodat hij midden in het bolletje staat.
 *
 * WAT ER MIS WAS (gemeten op een telefoon, 390px bij 3x, uitsnede uitgelezen per pixel)
 * Het bolletje is 12px en het cijfer stond netjes gecentreerd volgens de browser — en
 * tOch leunde de "1" zichtbaar naar rechts. Verticaal klopte het: 3,14px boven, 3,00
 * onder.
 *
 * WAAROM
 * Niet de centrering, maar het cijfer zelf. Kumbh Sans heeft PROPORTIONELE cijfers: de
 * "1" heeft een letterbreedte van 0,376em terwijl de 0, 2 en 8 op 0,58em zitten. De
 * browser centreert die LETTERBREEDTE, en binnen dat smalle vak zit de vorm niet
 * symmetrisch: het vlaggetje steekt links uit, de dikke staande streep staat rechts.
 * Gemeten bij een letter van 8px, ten opzichte van het midden van het rondje:
 *
 *     de vorm als geheel (kader)   0,22px LINKS
 *     het zwaartepunt van de inkt  0,28px rechts
 *     de staande streep            0,43px rechts
 *
 * Het oog leest een "1" op zijn zwaartepunt — de dikke streep weegt zwaarder dan het
 * dunne vlaggetje. Vandaar dat het rechts leek te staan terwijl het kader links stond.
 *
 * WAT DEZE REGEL DOET
 * Het zwaartepunt naar het midden schuiven: 0,28px naar links. Het vakje is
 * `border-box` met een vaste breedte, dus padding knijpt de inhoud samen en schuift de
 * gecentreerde regel op met de helft: 0,56px = 0,07em bij 8px. In em, zodat het
 * meebeweegt als de teller ooit een andere maat krijgt.
 *
 * Daarna staat de staande streep 0,15px van het midden (was 0,43px) en het kader 0,50px
 * links. Verder komen we niet: bij deze vorm kan niet alle drie tegelijk kloppen. Wil je
 * liever de VORM precies gecentreerd, dan is het `padding-left: .056em` in plaats van
 * deze regel — dan staat het kader midden en leunt de streep 0,65px naar rechts.
 *
 * WAAROM GEEN TABELCIJFERS
 * `font-variant-numeric: tabular-nums` lost dit normaal netjes op: dan is elk cijfer
 * even breed en staat de "1" gecentreerd in zijn vak. Gemeten in de pagina verandert die
 * eigenschap hier niets — de tnum-feature zit niet in het gehoste subset van Kumbh Sans.
 * Wordt dat subset ooit opnieuw gemaakt met die feature erin, dan kan deze regel weg.
 *
 * ALLEEN BIJ EEN ENKELE 1. De andere cijfers zijn symmetrisch (0 en 8 staan 0,02px
 * scheef, dat is niets) en bij "12" of "10" valt het weg tegen het tweede cijfer. De
 * core zet het aantal als `data-count` in de HTML; daar kunnen we dus precies op mikken
 * zonder aan de core te komen. Geldt voor beide bolletjes in de balk: mandje én hartje.
 *
 * WAT JE HIERVAN MERKT, EN WAAR NIET
 * Een halve pixel kan alleen renderen als er beeldpixels voor zijn. Op een telefoon
 * (3 beeldpixels per CSS-pixel) haalt deze correctie het zwaartepunt van 0,28px naar
 * 0,01px van het midden — gemeten. Op een gewoon desktopscherm valt de verschuiving
 * grotendeels weg in de afronding (daar gemeten: van 0,28 naar 0,23px). Dat is geen
 * fout: waar het niet past doet het niets, en niets wordt er slechter van. De klacht
 * kwam van een telefoon, en dat is precies waar het wel telt.
 */
.hinke-header__action--cart .sellabees-cart-count[data-count="1"],
.hinke-header__action--wish .sellabees-wish-count[data-count="1"] {
	padding-right: .07em;
}

/*
 * En op de iPhone en iPad een vaste regelhoogte, want daar staat het cijfer verticaal
 * niet goed.
 *
 * OVERGENOMEN VAN MIMODA, waar dit al een tijd goed staat op Apple. Daar staat exact
 * deze regel: `line-height: 11px` op de tellers, achter dezelfde twee voorwaarden.
 * Hun bolletje is 14px met dezelfde letter van 8px, dus de waarde is één op één over te
 * nemen; hier zit hij in een bolletje van 12px en 11px past daar nog in.
 *
 * WAT ER AAN DE HAND IS
 * De regel hierboven zet `line-height: 1`, dus een regelvak van 8px. De letter zelf is
 * hoger dan dat: Kumbh Sans heeft een stijgende plus dalende hoogte van 1,24em = 9,92px.
 * Het regelvak is dus KLEINER dan de letter die erin staat (negatieve "half-leading").
 * Volgens de rekenregels van CSS maakt dat niets uit — een gecentreerd regelvak zet de
 * basislijn op dezelfde plek, wat de regelhoogte ook is — en in Chrome is dat ook zo
 * (hier nagemeten: 3,14px boven de inkt, 3,00 onder). WebKit rekent dat geval anders af,
 * en dan schuift het cijfer omhoog of omlaag. Een regelhoogte die RUIMER is dan de letter
 * haalt die negatieve waarde weg, en daarmee het verschil.
 *
 * WAAROM DEZE TWEE VOORWAARDEN
 * `-webkit-touch-callout` bestaat alleen in WebKit op iOS — dat is de gangbare manier om
 * precies die browser te raken zonder op een merknaam te sturen. De mediaquery erbij
 * beperkt het tot aanraakschermen. Chrome, Firefox en de Mac blijven dus zoals ze waren,
 * en die staan hier goed.
 *
 * NIET ZELF TE METEN VANAF HIER: er is op deze machine geen Safari. De waarde komt van
 * een shop waar het op Apple goed staat; controleer hem op je telefoon.
 */
@supports (-webkit-touch-callout: none) {
	@media (hover: none) and (pointer: coarse) {
		.hinke-header__action--cart .sellabees-cart-count,
		.hinke-header__action--wish .sellabees-wish-count {
			line-height: 11px;
		}
	}
}

/*
 * Meer lucht tussen de acties zodra de balk niet meer de volle ontwerpbreedte heeft.
 *
 * Op 1920 staat de container op zijn maximum van 1560px en klopt de 12px uit het
 * ontwerp: het blok heeft dan ruimte om zich heen. Daaronder schuift alles naar
 * elkaar toe en worden de labels één streep tekst — 12px is bij een letter van 9px
 * maar 1,3 regel breed. 20px maakt er drie leesbare groepjes van en blijft ruim
 * onder de afstand waarop een label bij het verkeerde icoon lijkt te horen (de
 * afstand icoon→eigen label is 7px).
 *
 * WAAROM 20 EN NIET MEER: bij 1201px — de smalste breedte waar de labels én het
 * gecentreerde menu naast elkaar staan — eindigt het menu op x=891 en begint het
 * actieblok op 926. Drie tussenruimtes van 24px zouden het blok tot 890 opschuiven
 * en dus tegen het menu duwen; met 20px blijft er 11px tussen.
 */
@media (max-width: 1740px) {
	.hinke-header__actions {
		gap: 20px;
	}
	/* De loep staat hier nog naast de andere acties, dus dezelfde tussenruimte. */
	.hinke-header__tools {
		margin-right: 20px;
	}
}

/* -----------------------------------------------------------------------------
   Zoekpaneel — het ontwerp heeft alleen de knop "Zoeken"; dit paneel klapt
   daaronder uit (merk-eigen invulling, geen ontwerp-afwijking in de balk zelf).
   -------------------------------------------------------------------------- */

.hinke-search-panel {
	border-top: 1px solid var(--hinke-pink);
	background: var(--hinke-white);
}

.hinke-search-panel[hidden] {
	display: none;
}

.hinke-search {
	display: flex;
	gap: 11px;
	padding: 18px 0;
}

.hinke-search__field {
	flex: 1 1 auto;
	/* Een <input> heeft een intrinsieke minimumbreedte (±217px) en `min-width:auto`
	   laat flex hem daar niet onder krimpen. Zonder deze regel werd het formulier
	   op 360px 359px breed en rekte het de layout-viewport op tot 383px. */
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--hinke-pink);
	border-radius: 0;
	background: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-size: 14px;
	color: var(--hinke-ink);
}

/* Zelfde reden als bij het nieuwsbriefveld: op touch minstens 16px, anders zoomt
   iOS Safari in zodra het zoekveld focus krijgt — en dat gebeurt hier meteen,
   want het paneel zet de focus zelf in het veld bij openen. */
@media (max-width: 900px), (pointer: coarse) {
	.hinke-search__field {
		font-size: 16px;
	}
}

/* =============================================================================
   INLOG-POPUP VAN DE CORE (inc/account-auth.php — markup en gedrag zitten daar)

   Deze popup hangt in `wp_footer` en staat dus op ÉLKE pagina in de DOM, buiten
   .hinke-page__body. De opmaak hieronder stond eerder in pages/account.css met
   `.woocommerce-account` ervoor — en dat bestand laadt alleen op /mijn-account/.
   Overal elders viel de popup dus terug op de standaardopmaak van de core, mét de
   drie problemen die hieronder juist worden opgelost. Vandaar layout.css, dat
   altijd laadt, en zonder pagina-scope.

   Gemeten in de core-opmaak (sellabees-shops-core.css):
     - velden 14px   → iOS Safari zoomt bij focus in
     - kruisje 30×30 → onder de 44×44 die je met een vinger nodig hebt
     - het vak heeft geen maximale hoogte: met het toetsenbord open (visuele
       viewport ±400px) valt de onderkant weg zonder te kunnen scrollen
   Alleen opmaak; openen, Escape en de AJAX blijven van de core.
   ========================================================================== */

.sellabees-login-popup {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* `margin: auto` centreert zolang er ruimte is, maar knijpt — anders dan
   `align-items: center` — de bovenkant niet weg zodra het vak te hoog wordt. */
.sellabees-login-popup .sellabees-popup__box {
	margin: auto 0;
}

/*
 * Titel en knop van de inlog-popup in de sitefont.
 *
 * De core zet beide op de kopletter (DM Serif Display): de titel "Inloggen" op 600
 * en het knoplabel op 400 uppercase. Dat wijkt af van hoe de rest van de shop
 * kopjes zet — de sectiekoppen op de afrekenpagina ("CONTACTGEGEVENS",
 * .hinke-co-sec__title) staan in Outfit 700 uppercase, en checkout.css zegt daar
 * letterlijk bij: "main.css zet koppen op DM Serif". De popup volgde die
 * uitzondering niet en viel daarmee uit de toon, pal naast die koppen.
 *
 * Gewicht 700 voor beide, gelijk aan die referentie. De MATEN blijven zoals ze zijn
 * (22px titel, 15px knop): alleen de letter verandert, dus er verschuift niets in de
 * hoogte van het paneel.
 *
 * Alleen de INLOG-popup. Andere popups met `.sellabees-popup__title` (o.a. het
 * maatkeuze-venster van het verlanglijstje) blijven op de kopletter staan — dat is
 * niet gevraagd, en dan zou één regel hier stil vier vensters veranderen.
 */
.sellabees-login-popup .sellabees-popup__title,
.sellabees-login-popup .sellabees-login__btn {
	font-family: var(--hinke-font-body);
	font-weight: 700;
}

.sellabees-login-popup .sellabees-login__field input,
.sellabees-login-popup .sellabees-login__remember input {
	font-size: 16px;
}

.sellabees-login-popup .sellabees-login__field input {
	min-height: 46px;
}

.sellabees-login-popup .sellabees-popup__close {
	top: 6px;
	right: 6px;
	width: 44px;
	height: 44px;
	font-size: 24px;
}

/* Raakvlak van "Ingelogd blijven" en "Wachtwoord vergeten?" op 44px. */
.sellabees-login-popup .sellabees-login__remember,
.sellabees-login-popup .sellabees-login__lost {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Foutmelding stond op 13px; 14px leest op een telefoon merkbaar beter. */
.sellabees-login-popup .sellabees-login__msg {
	font-size: 14px;
	line-height: 20px;
}

@media (max-width: 600px) {

	.sellabees-login-popup {
		padding: 16px;
	}

	.sellabees-login-popup .sellabees-popup__box {
		padding: 44px 18px 22px;
	}
}

.hinke-search__field::placeholder {
	color: var(--hinke-muted);
	opacity: 1;
}

.hinke-search__field:focus {
	outline: none;
	border-color: var(--hinke-gold);
}

.hinke-search__submit {
	flex: 0 0 auto;
	height: 44px;
	padding: 0 32px;
	border: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	cursor: pointer;
}

/* Hamburger — niet in het ontwerp (desktop-only); nodig onder 1200px. */
/* 26×18 in plaats van 32×24: naast een logo van 64px en iconen van 24px was de
   hamburger het grootste element in de mobiele balk, en dat klopte niet met de
   rust die de rest van de header heeft. De middelste lijn is korter (16 tegen 26)
   — dat maakt het een tekentje in plaats van drie standaardstreepjes, én de
   buitenste twee blijven even lang zodat ze bij openen een symmetrisch kruis
   vormen. De beweging staat in motion.css. */
.hinke-header__burger {
	display: none;
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/*
 * Aanraakdoel 44x44 (WCAG 2.5.8) zonder de balk te herschikken.
 *
 * De drie streepjes zijn samen 32x24 en dat is te klein om betrouwbaar te raken.
 * De knop zelf groter maken zou het logo en de acties opzij schuiven, dus leggen
 * we er een onzichtbaar vlak over dat 6px naar links/rechts en 10px naar
 * boven/onder uitsteekt: 32+12=44 breed, 24+20=44 hoog. Links van de knop zit
 * alleen de gutter en rechts 16px lucht tot het logo, dus dit vlak overlapt geen
 * ander aanraakdoel.
 */
.hinke-header__burger::after {
	content: '';
	position: absolute;
	top: -13px;
	right: -9px;
	bottom: -13px;
	left: -9px;
}

/*
 * De drie lijnen liggen absoluut op 0, 8 en 16 (2px hoog, 6px ertussen = 18).
 * Absoluut en niet in de normale flow, want bij openen moeten de buitenste twee
 * naar het midden toe kunnen draaien zonder dat de andere meeschuiven.
 */
.hinke-header__burger span {
	position: absolute;
	left: 0;
	display: block;
	width: 26px;
	height: 2px;
	background: var(--hinke-ink);
	border-radius: 2px;
}

.hinke-header__burger span:nth-child(1) {
	top: 0;
}

/* De korte middelste lijn: rechts uitgelijnd, zodat het tekentje niet symmetrisch
   is en er ontworpen uitziet in plaats van gegenereerd. */
.hinke-header__burger span:nth-child(2) {
	top: 8px;
	left: auto;
	right: 0;
	width: 16px;
}

.hinke-header__burger span:nth-child(3) {
	top: 16px;
}

/*
 * Open: de buitenste twee lijnen draaien naar een kruis, de korte schuift naar
 * rechts weg. 8px is precies de afstand van elke buitenlijn naar het midden van
 * de 18px hoge knop, dus komen ze exact op elkaar te liggen.
 *
 * Aangehangen aan `aria-expanded` en niet aan een eigen class: dat is dezelfde
 * toestand, staat al in de markup, en zo kan de vorm niet uit de pas lopen met
 * wat een schermlezer voorleest.
 */
.hinke-header__burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.hinke-header__burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: translateX(10px);
}

.hinke-header__burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* =============================================================================
   CATEGORIEKAARTEN (gedeeld)
   4 full-bleed kaarten van ~461×524 met 25px ertussen; foto met een vlakke wash
   van rgba(0,0,0,.2), gecentreerde titel op 237px van de kaarttop, en rechtsonder
   — strak tegen de hoek — een vierkante "Bekijk"-knop van 112×44.

   Staat hier en niet in pages/home.css omdat de 404-pagina exact dezelfde tegels
   gebruikt (ontwerp 2197:2640) en home.css daar niet wordt ingeladen. De
   verticale ruimte erboven verschilt per pagina en blijft dus paginaspecifiek.
   ========================================================================== */

.hinke-cats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-cats__card {
	position: relative;
	display: block;
	height: 524px;
	overflow: hidden;
	text-decoration: none;
}

.hinke-cats__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hinke-cats__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2);
}

.hinke-cats__title {
	position: absolute;
	top: 237px;
	left: 0;
	right: 0;
	z-index: 2;
	padding: 0 16px;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 30px;
	line-height: normal;
	color: var(--hinke-white);
	text-align: center;
}

.hinke-cats__btn {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 112px;
	height: 44px;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: normal;
	text-transform: uppercase;
}

/* Achter het hover-hek, zoals alle decoratieve hovers in dit thema (zie de
   toelichting in assets/css/motion.css §2). Zonder hek bleef de "Bekijk"-knop na
   een tap op een telefoon goud staan tot je iets anders aanraakte. Er gaat geen
   inhoud achter verloren: die knop is altijd zichtbaar, alleen zijn kleur wisselt. */
@media (hover: hover) {
	.hinke-cats__card:hover .hinke-cats__btn {
		background: var(--hinke-gold);
	}
}

/* Het Figma-export is een NEERWAARTSE chevron (10 × 5,7); −90° wijst rechts. */
.hinke-cats__chevron {
	width: 10px;
	height: 6px;
	flex: 0 0 auto;
	transform: rotate(-90deg);
	background: currentColor;
	-webkit-mask: url('../img/icons/chevron.svg') no-repeat center / contain;
	mask: url('../img/icons/chevron.svg') no-repeat center / contain;
}

@media (max-width: 1360px) {
	.hinke-cats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hinke-cats__card {
		height: clamp(320px, 38vw, 524px);
	}
	.hinke-cats__title {
		top: 45%;
		font-size: clamp(22px, 2.4vw, 30px);
	}
}

@media (max-width: 720px) {
	.hinke-cats__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* =============================================================================
   PRODUCTKAART (gedeeld)
   Beeld 314×526 · titel +12 · prijs +4 · maten +7 — uit het ontwerp.
   Staat hier en niet in pages/home.css omdat dezelfde kaart ook op de
   productpagina wordt gebruikt ("Shop the look") en in de winkelwagen-crosssell,
   waar home.css niet wordt ingeladen.
   ========================================================================== */

.hinke-card__link {
	display: block;
	text-decoration: none;
}

.hinke-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 314 / 526;
	overflow: hidden;
	background: var(--hinke-pink);
}

.hinke-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hinke-card__name {
	display: block;
	margin-top: 12px;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--hinke-body);
}

.hinke-card__price {
	display: block;
	margin-top: 4px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-muted);
}

.hinke-card__price del {
	font-size: 11px;
	margin-right: 10px;
	text-decoration: line-through;
}

.hinke-card__price ins {
	color: var(--hinke-sale);
	text-decoration: none;
}

/* Maat-swatches uit de core, 27×27 vierkant met 4px ertussen. */
.hinke-card .sellabees-loop-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 7px;
	justify-content: flex-start;
}

/*
 * `width: auto` met een minimum in plaats van een vaste 27px: een maatlabel als
 * "One Size" brak anders over twee regels en liep links en rechts buiten het roze
 * vlak (gemeten scrollWidth 38 tegen width 32). Cijfers en XS…XL blijven met
 * min-width vierkant, alleen een lang label groeit mee. pages/shop.css doet het
 * op dezelfde manier, dus de twee rasters lopen gelijk.
 */
.hinke-card .sellabees-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 27px;
	height: 27px;
	padding: 0 6px;
	white-space: nowrap;
	border: 0;
	border-radius: 0;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 12px;
	line-height: 1;
	text-transform: uppercase;
}

.hinke-card .sellabees-size.is-unavailable {
	text-decoration: line-through;
	opacity: .5;
}

/*
 * Hover op een klikbare maat: GOUD, de kleur van de knoppen.
 *
 * De core maakt een maat met `[data-url]` (variabel product: klikken selecteert die
 * maat op de productpagina) bij hover WIT. Op een witte kaart werd het blokje daarmee
 * een gat in de matenrij: het leek uitgeschakeld in plaats van actief. Hier wordt het
 * blokje het goud van de CTA-knoppen (--hinke-gold), zodat hover overal in de shop
 * hetzelfde betekent: dit kun je aanklikken.
 *
 * De letter blijft WIT, net als op de knoppen — een expliciete keuze van de eigenaar
 * voor één consequente knopstijl in de hele shop.
 *
 * WEET WAT DIT KOST: wit op goud is 1,89:1. Dat haalt WCAG 1.4.3 (4,5:1 voor tekst
 * van deze grootte) niet, en de maat is bij hover dus slecht te lezen. Donkergrijs op
 * hetzelfde goud zou 4,40:1 zijn. Verander dit niet "even" terug zonder de eigenaar:
 * de afweging is gemaakt, niet vergeten.
 *
 * De inset-lijn die hier stond kan weg: die moest het blokje vorm geven toen het wit
 * op wit werd, en een gevuld goud vlak heeft die hulp niet nodig.
 *
 * De ruststand heeft hetzelfde patroon: wit op roze is 1,60:1. Ook dat is huisstijl.
 *
 * Eén regel voor beide plekken waar deze blokjes staan — de productkaart (carrousels,
 * "Shop the look", winkelwagen-crosssell) en het winkelraster. layout.css laadt op
 * elke pagina, dus hij kan nergens missen; pages/shop.css doet alleen de maatvoering.
 */
.hinke-card .sellabees-size[data-url]:hover,
.hinke-card .sellabees-size[data-url]:focus-visible,
.sellabees-shop__main .sellabees-size[data-url]:hover,
.sellabees-shop__main .sellabees-size[data-url]:focus-visible {
	background: var(--hinke-gold);
	color: var(--hinke-white);
}

/* =============================================================================
   LOOKBOOK + NIEUWSBRIEF-BANNER (gedeeld)

   Deze twee blokken staan niet alleen op de voorpagina: page.php zet ze onder
   elke info-/contentpagina, de productpagina gebruikt de lookbook-rij en de
   bedanktpagina beide. pages/home.css laadt daar niet, dus hoorden ze hier.
   (Zelfde les als bij de productkaart en de categorie-tegels.)
   ========================================================================== */


/* =============================================================================
   5. LOOKBOOK — "Stay up to date" y 3746 · 4 beelden y 3861…4385
   Eigen containerbreedte: 1710px (x=105…1815)
   ========================================================================== */

/* De "Style it up"-kaarten eindigen op 3684 (prijs, géén maten); kop start 3746. */
.hinke-lookbook {
	padding-top: 62px;
}

.hinke-lookbook__intro {
	width: min(100% - (2 * var(--hinke-gutter)), 1710px);
	margin-inline: auto;
	text-align: center;
}

.hinke-lookbook__heading {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 50px;
	line-height: 52px;
	color: var(--hinke-pink);
}

/* Subtekst op y=3808 → 10px onder de kop. */
.hinke-lookbook__text {
	margin: 10px auto 0;
	max-width: 872px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--hinke-ink);
}

/* De netwerknamen in de subtekst zijn links. In Figma (tekstnode 2026:139) staan
   "Facebook" en "Instagram" in het goud #d3bb6c zonder onderstreping, de rest van
   de regel is donker. Onderstreping pas bij hover/focus, net als de footerlinks. */
.hinke-lookbook__social-link {
	color: var(--hinke-gold);
	text-decoration: none;
}

.hinke-lookbook__social-link:hover,
.hinke-lookbook__social-link:focus-visible {
	text-decoration: underline;
}

/*
 * Op een aanraakscherm bestaat hover niet, dus bleven "TikTok / Facebook /
 * Instagram" gewoon gouden tekst zonder enige aanwijzing dat het links zijn.
 * Daar staat de onderstreping dus altijd aan; op desktop blijft het beeld zoals
 * het ontwerp het tekent (goud, zonder streep, streep pas bij hover/focus).
 *
 * `padding-block` maakt van een aanraakvlak van 20px hoog er 44 (WCAG 2.5.8).
 * Op een inline-element telt die padding niet mee voor de regelhoogte, dus de
 * tekst eromheen blijft precies staan waar hij stond.
 */
@media (hover: none) {
	.hinke-lookbook__social-link {
		text-decoration: underline;
		padding-block: 12px;
	}
}

/* 4 beelden van ~410×524 met 22px ertussen, op y=3861 → 27px onder de subtekst. */
.hinke-lookbook__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	width: min(100% - (2 * var(--hinke-gutter)), 1710px);
	margin: 27px auto 0;
	padding: 0;
	list-style: none;
}

.hinke-lookbook__item {
	aspect-ratio: 410 / 524;
	overflow: hidden;
	background: var(--hinke-pink);
}

.hinke-lookbook__item a,
.hinke-lookbook__item img {
	display: block;
	width: 100%;
	height: 100%;
}

.hinke-lookbook__item img {
	object-fit: cover;
}

/* =============================================================================
   6. NIEUWSBRIEF-BANNER — Figma "Component 4", 1920×394 op y=4454
   ========================================================================== */

.hinke-promo {
	margin-top: 69px; /* 4454 − 4385 */
	min-height: 394px;
	/* Lichtgrijze band (#f5f5f5), dezelfde als de "Shop the look"-band op de
	   productpagina. De knop krijgt het roze dat de band eerst had. */
	background: var(--hinke-band);
}

.hinke-promo__inner {
	/* velden+knop zijn samen 1098 breed (x=411…1509) */
	width: min(100% - (2 * var(--hinke-gutter)), 1098px);
	margin-inline: auto;
	padding: 52px 0 53px; /* icoon op y=52 */
	text-align: center;
}

/* Icoon: hartje 59×51 met de witte envelop 23×23 er gecentreerd op. */
.hinke-promo__icon {
	position: relative;
	display: block;
	width: 59px;
	height: 51px;
	margin: 0 auto;
}

.hinke-promo__heart {
	display: block;
	width: 59px;
	height: 51px;
}

.hinke-promo__mail {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 23px;
	height: 23px;
}

/* Kop op y=111 → 8px onder het icoon (52 + 51 = 103). */
.hinke-promo__heading {
	margin: 8px 0 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 48px;
	/* Was wit toen de band roze was; op lichtgrijs is roze de leesbare variant —
	   net als de koppen op de andere #f5f5f5-band. */
	color: var(--hinke-pink);
}

/* Tekst op y=167 → 8px onder de kop; 1005 breed, gecentreerd. */
.hinke-promo__text {
	margin: 8px auto 0;
	max-width: 1005px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--hinke-body);
}

/* Velden op y=236 → 17px onder de tekst. 537 + 23 + 538 = 1098. */
.hinke-promo__form {
	margin-top: 17px;
}

.hinke-promo__fields {
	display: grid;
	grid-template-columns: 537fr 538fr;
	gap: 23px;
}

.hinke-promo__field {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--hinke-ink);
}

.hinke-promo__field::placeholder {
	color: var(--hinke-muted);
	opacity: 1;
}

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

/* Knop op y=297 → 17px onder de velden, volle 1098 breed.
   Roze: de kleur die de band zelf eerst had. */
.hinke-promo__btn {
	display: block;
	width: 100%;
	height: 44px;
	margin-top: 17px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 16px;
	line-height: 44px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.hinke-promo__btn:hover {
	filter: brightness(.95);
}

.hinke-promo .sellabees-news-msg:empty {
	display: none;
}

.hinke-promo .sellabees-news-msg {
	margin-top: 12px;
	font-family: var(--hinke-font-body);
	font-size: 14px;
	color: var(--hinke-body);
}



/* =============================================================================
   FOOTER
   ========================================================================== */

.hinke-footer__main {
	background: var(--hinke-pink);
}

/* Kolomrasters uit het ontwerp, binnen de 1320px-container:
     kolom 1  x=300  → track 453px (tekst zelf 424px breed)
     kolom 2  x=753  → track 300px
     kolom 3  x=1053 → track 254px
     kolom 4  x=1307 → track 313px          453+300+254+313 = 1320 */
.hinke-footer__grid {
	display: grid;
	grid-template-columns: 453px 300px 254px 313px;
	/* Onderste element is de knop (eindigt op y=374); vlak is 446 hoog. */
	padding-bottom: 72px;
}

/* Elke kolom start op zijn eigen hoogte, precies zoals ontworpen. */
.hinke-footer__col--shop {
	padding-top: 69px;
}
.hinke-footer__col--service,
.hinke-footer__col--about {
	padding-top: 116px;
}
.hinke-footer__col--newsletter {
	padding-top: 125px;
}

/* --- Kop-stijl -------------------------------------------------------------- */

.hinke-footer__heading {
	margin: 0;
	font-family: var(--hinke-font-heading);
	font-weight: 400;
	font-size: 25px;
	line-height: 34px;
	color: var(--hinke-white);
}

/* "Klantenservice" en "Over" staan in een 52px regelvak (y=116…168). */
.hinke-footer__col--service .hinke-footer__heading,
.hinke-footer__col--about .hinke-footer__heading {
	line-height: 52px;
}

/* --- Kolom 1: de winkel ---------------------------------------------------- */

/* Illustratie: vak 152×158 (y=69) waarin de tekening op 161×201 staat met een
   offset van −9px / −22px — exact de crop uit het ontwerp. */
.hinke-footer__shop-image {
	position: relative;
	width: 152px;
	height: 158px;
	overflow: hidden;
}

.hinke-footer__shop-image img {
	position: absolute;
	left: -9px;
	top: -22px;
	width: 161px;
	height: 201px;
	max-width: none;
}

.hinke-footer__heading--shop {
	margin-top: 13px; /* 240 − 227 */
	max-width: 424px;
}

.hinke-footer__shop-text {
	margin: 6px 0 0; /* 280 − 274 */
	max-width: 424px;
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: var(--hinke-white);
}

/* In het ontwerp staat de link als 4e regel van dezelfde tekst, ná een lege
   regel — vandaar 19px (één regelhoogte) afstand. */
/* 19px hoog → 24px aanraakvlak, zelfde truc als bij de menu-items. Onder deze
   link staat niets meer in de kolom, dus 2,5px boven en onder overlapt niets. */
.hinke-footer__shop-link::after {
	content: '';
	position: absolute;
	top: -2.5px;
	right: 0;
	bottom: -2.5px;
	left: 0;
}

.hinke-footer__shop-link {
	position: relative;
	display: inline-block;
	margin-top: 19px;
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 14px;
	line-height: 19px;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-skip-ink: none;
	text-underline-position: from-font;
	color: var(--hinke-white);
}

/* --- Kolommen 2 & 3: links ------------------------------------------------- */

.hinke-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hinke-footer__links a {
	display: block;
	font-family: var(--hinke-font-body);
	font-weight: 500; /* Outfit Medium */
	font-size: 14px;
	line-height: 29px;
	color: var(--hinke-white);
	text-decoration: none;
}

/*
 * Hover op een footerlink: het goud van de winkel, geen streep.
 *
 * De onderstreping deed twee dingen tegelijk fout: ze week af van de rest van de shop
 * (daar betekent hover een kleurwissel) en ze verschoof de regel optisch, omdat de
 * streep binnen de 29px regelhoogte valt. Nu loopt de letter van wit naar
 * --hinke-gold — dezelfde kleur als de AANMELDEN-knop die er in dezelfde footer naast
 * staat, dus hover leest als "dit is de knopkleur, hier kun je klikken". De overgang
 * staat al klaar in motion.css §1 (color, 200ms), dus dit loopt over.
 *
 * WEET WAT DIT KOST: goud op het footerroze is 1,31:1 gemeten. Voor een rustkleur zou
 * dat te weinig zijn, maar de ruststand is wit (3,4:1) en dit is alleen de hover van
 * de link waar je op staat. Wil de eigenaar het steviger, dan is --hinke-gold-donker
 * (1,81:1) één token verderop. Zelfde afweging als bij de matenblokjes hierboven.
 *
 * Achter `@media (hover: hover)`, zodat een gouden letter na een tik op mobiel niet
 * blijft hangen; de onderstreping bij toetsenbordfocus staat los in §14 en blijft.
 */
@media (hover: hover) {
	.hinke-footer__links a:hover,
	.hinke-footer__shop-link:hover {
		color: var(--hinke-gold);
	}
}

/* --- Socials — 31×31, 10px ertussen, y=317 -------------------------------- */

.hinke-footer__socials {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 0; /* 317 − 313 */
	padding: 0;
	list-style: none;
}

.hinke-footer__social img {
	display: block;
	width: 31px;
	height: 31px;
}

.hinke-footer__social a {
	display: block;
	line-height: 0;
}

.hinke-footer__social a:hover {
	opacity: .8;
}

/* --- Kolom 4: nieuwsbrief -------------------------------------------------- */

.hinke-footer__newsletter-text {
	margin: 9px 0 0; /* 168 − 159 */
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: var(--hinke-white);
}

.hinke-newsletter {
	margin-top: 14px; /* 220 − 206 */
}

/* Velden en knop: 313×44, 11px ertussen (y=220 / 275 / 330). */
.hinke-newsletter__field {
	display: block;
	width: 100%;
	height: 44px;
	margin-bottom: 11px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--hinke-ink);
}

/*
 * Op een aanraakscherm minstens 16px, anders zoomt iOS Safari bij focus in op het
 * veld en schuift de hele pagina scheef — met een footer die je daarna moet
 * terugvegen. Het ontwerp tekent 14px, dus dat blijft staan zolang er een fijne
 * aanwijzer is. Alleen de lettergrootte gaat omhoog; de veldhoogte van 44px en de
 * rest van de opmaak blijven gelijk, dus er verschuift niets.
 */
@media (max-width: 900px), (pointer: coarse) {
	.hinke-newsletter__field {
		font-size: 16px;
	}
}

.hinke-newsletter__field::placeholder {
	color: var(--hinke-muted);
	opacity: 1;
}

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

.hinke-newsletter__btn {
	display: block;
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 44px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
}

.hinke-newsletter__btn:hover {
	filter: brightness(.95);
}

.hinke-newsletter__btn[disabled] {
	opacity: .6;
	cursor: default;
}

/* Terugkoppeling van de core-JS (.sellabees-news-msg wordt door de core gevuld).
   Leeg mag hij géén ruimte innemen — anders wordt het roze vlak 10px te hoog. */
.hinke-newsletter .sellabees-news-msg:empty {
	display: none;
}

.hinke-newsletter .sellabees-news-msg {
	margin-top: 10px;
	font-family: var(--hinke-font-body);
	font-size: 13px;
	line-height: 18px;
	color: var(--hinke-white);
}

.hinke-newsletter .sellabees-news-msg.is-error {
	font-weight: 600;
}

/* --- Onderbalk — y 446…508 (62px), wit ------------------------------------ */

.hinke-footer__bottom {
	height: 62px;
	background: var(--hinke-white);
	display: flex;
	align-items: center;
}

.hinke-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.hinke-footer__copyright {
	margin: 0;
	font-family: var(--hinke-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-gold);
}

/*
 * Regel 2 van het copyright is een link naar de bouwer (adres instelbaar onder
 * Site-instellingen → Footer → Onderbalk).
 *
 * In rust ziet hij er precies uit als de regel erboven: dezelfde gouden letter, geen
 * streep. Het ontwerp tekent daar geen link en de onderbalk moet één rustig regeltje
 * blijven. Bij hover gaat hij naar het donkerder goud — hetzelfde goud dat elke gouden
 * knop in de shop bij hover krijgt. Gouden hover zoals in de roze footer kan hier niet:
 * de letter IS al goud, dus dan zou er niets gebeuren.
 *
 * De focusring is zwart in plaats van het witte ringetje van de roze footer: deze balk
 * is wit, daar zou wit onzichtbaar zijn. Zie §14.
 */
.hinke-footer__credit {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.hinke-footer__credit:hover {
		color: var(--hinke-gold-donker);
	}
}

.hinke-footer__payment {
	flex: 0 0 auto;
	line-height: 0;
}

.hinke-footer__payment img {
	display: block;
	width: 71px;
	height: 27px;
}

/* =============================================================================
   RESPONSIVE
   Het ontwerp is alleen op 1920 geleverd; hieronder degradeert de layout netjes
   zonder de desktopwaarden aan te tasten.
   ========================================================================== */

/* Footer: 4 → 2 kolommen. */
@media (max-width: 1360px) {
	.hinke-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
		row-gap: 48px;
		padding-top: 64px;
		padding-bottom: 56px;
	}
	.hinke-footer__col--shop,
	.hinke-footer__col--service,
	.hinke-footer__col--about,
	.hinke-footer__col--newsletter {
		padding-top: 0;
	}
	.hinke-footer__col--service .hinke-footer__heading,
	.hinke-footer__col--about .hinke-footer__heading {
		line-height: 34px;
		margin-bottom: 12px;
	}
}

/* Header: menu onder de balk, hamburger aan. */
@media (max-width: 1200px) {
	/*
	 * DRIE KOLOMMEN: hamburger + loep links, logo in het midden, account +
	 * verlanglijstje + mandje rechts. Dat is de indeling van My Jewellery, op verzoek
	 * overgenomen — het logo staat daarmee midden in de balk in plaats van links naast
	 * de hamburger, en de loep hoort bij het openen van dingen (menu, zoeken) in plaats
	 * van bij "jouw" iconen rechts.
	 *
	 * `1fr auto 1fr` en niet flexbox met marges: twee gelijke buitenkolommen zetten het
	 * logo écht in het midden van de balk, niet in het midden van de ruimte die
	 * overblijft (de linkergroep is 2 iconen, de rechter 3 — met auto-marges zou het
	 * logo daardoor ±30px links van het midden landen).
	 *
	 * En als het niet past, schuift het netjes op: 1fr krimpt niet onder de inhoud, dus
	 * op 360px wordt de rechterkolom zo breed als zijn drie iconen (132) en de linker de
	 * rest — het logo staat dan een paar pixels links van het midden in plaats van
	 * bovenop de iconen. Gemeten: 390px dood in het midden, 360px 4px ernaast.
	 *
	 * Het menu (.hinke-nav) staat hieronder absoluut en is dus geen kolom.
	 */
	.hinke-header__inner {
		height: 88px;
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 0;
	}
	.hinke-header__tools {
		/* grid-row expliciet: de order-waarden uit de desktopregels gelden hier ook, en
		   die zetten dit groepje ná het logo in de plaatsingsvolgorde. Zonder vaste rij
		   begint het raster dan een tweede rij (gemeten: 64px + 44px hoog) en stonden de
		   iconen ónder het logo in plaats van ernaast. */
		grid-row: 1;
		grid-column: 1;
		justify-self: start;
		align-items: center;
		gap: 12px;
		/* De marges hierboven zetten dit groepje op desktop tegen het actieblok aan;
		   hier is het de linkerkolom, dus terug naar nul. */
		margin: 0;
	}
	.hinke-header__burger {
		display: block;
	}
	.hinke-header__logo {
		grid-row: 1;
		grid-column: 2;
		width: 64px;
		height: 64px;
	}
	.hinke-header__logo img {
		width: 64px;
		height: 64px;
	}
	.hinke-header__actions {
		grid-row: 1;
		grid-column: 3;
		justify-self: end;
		align-items: center;
		margin-top: 0;
	}
	.hinke-nav {
		position: absolute;
		top: 100%;
		/*
		 * Van rand tot rand. De positioneringscontext is `.hinke-header__inner`
		 * (die staat op position: relative), dus `left/right: 0` liet het paneel
		 * precies binnen de container vallen en bleef de pagina in de 24px gutters
		 * links en rechts zichtbaar — met de schaduw op die binnenranden zag het
		 * uit als een half zwevend blok boven de hero-foto.
		 *
		 * Onder 1200px is de container altijd `100% - 2 × gutter`, dus 24px naar
		 * buiten trekken komt exact op de schermranden uit. De zijruimte gaat naar
		 * de padding, zodat de links op dezelfde lijn blijven als het logo.
		 */
		left: calc(-1 * var(--hinke-gutter));
		right: calc(-1 * var(--hinke-gutter));
		transform: none;
		z-index: 10;
		display: none;
		padding: 8px var(--hinke-gutter) 20px;
		background: var(--hinke-white);
		box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
	}
	.hinke-nav.is-open {
		display: block;
	}
	.hinke-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		/* Niet meekrimpen in de kolom: bij een lang menu moet het paneel scrollen,
		   niet de regels platdrukken. */
		flex: 0 0 auto;
	}
	/* 12 + 18 regelhoogte + 12 = 42px; met min-height komt elke menuregel op de
	   44px die een aanraakdoel nodig heeft (WCAG 2.5.8). */
	.hinke-nav__menu > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 12px 0;
	}
	.hinke-nav__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		padding: 0 0 0 16px;
	}

	/*
	 * Hier stond §10b: het verlanglijstje als regel onderaan het uitklapmenu, met een
	 * regel die het hartje in de balk verborg. Beide zijn eruit — het hartje staat nu op
	 * elke breedte in de balk (met zijn teller), dus één plek in plaats van twee.
	 */
}

@media (max-width: 720px) {
	.hinke-topbar__item {
		gap: 7px;
		font-size: 12px;
		white-space: normal;
		text-align: center;
	}
	.hinke-footer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.hinke-footer__bottom {
		height: auto;
		padding: 18px 0;
	}
	.hinke-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	/* Labels bij de iconen zijn op klein formaat overbodig; iconen blijven.
	   De tussenruimte staat hier niet meer: zonder labels zetten de aanraakdoelen in
	   §10d het blok op `gap: 0` (vier keer 44px, exact naast elkaar), en die regel
	   staat later in dit bestand. Een waarde hier was dus dode code die suggereerde
	   dat er 16px tussen zat. */
	.hinke-header__label {
		display: none;
	}
}

/* Responsive voor de twee gedeelde blokken hierboven. Deze regels staan ook in
   pages/home.css, daar gegroepeerd met homepage-only selectors — vandaar hier een
   losse set met dezelfde waarden, zodat ze ook op de info-, product- en
   bedanktpagina's werken. */
@media (max-width: 1360px) {
	.hinke-lookbook__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hinke-lookbook__heading {
		font-size: clamp(30px, 3.4vw, 50px);
		line-height: 1.15;
	}
	.hinke-promo__heading {
		font-size: clamp(26px, 3vw, 40px);
		line-height: 1.25;
	}
}

@media (max-width: 720px) {
	/*
	 * Twee kolommen, geen één. Op één kolom werden de vier lookbook-beelden van
	 * 342×437 onder elkaar gezet en was het raster op 390px 2008px hoog — dat is
	 * voor een social-rij een eindeloze reeks. Twee naast elkaar komt op ±440px.
	 */
	.hinke-lookbook__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.hinke-promo__fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 11px;
	}
}

/* =============================================================================
   BLOK-KNOP (gedeeld)

   Gebruikt door de blokken `knop`, `cta` en `tekst_media`. Stond eerder identiek
   in alle drie hun CSS-bestanden, omdat blok-CSS per blok wordt ingeladen en elk
   bestand dus compleet moest zijn. Eén bron is beter te onderhouden, en layout.css
   laadt altijd — dus staat hij hier.

   Maten uit Figma: minimaal 276 breed met 28px zijruimte, zodat een label van
   220px ("Navigeer naar de winkel") exact op 276×44 uitkomt en een langer label
   meegroeit. Goud #d3bb6c met Outfit Bold 16 wit uppercase.
   ========================================================================== */

.hinke-blkbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 276px;
	/* 11 + 20 + 11 + 2×1px rand = 44 hoog; 27 + 1px rand = 28 zijruimte. */
	padding: 11px 27px;
	border: 1px solid transparent;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.hinke-blkbtn:hover {
	filter: brightness(.95);
}

.hinke-blkbtn--roze {
	background: var(--hinke-pink);
	border-color: var(--hinke-pink);
}

/* Alleen-rand-variant: geen ontwerpreferentie in Figma, afgeleid van de gouden knop. */
.hinke-blkbtn--outline {
	background: transparent;
	border-color: var(--hinke-gold);
	color: var(--hinke-gold);
}

.hinke-blkbtn--outline:hover {
	background: var(--hinke-gold);
	color: var(--hinke-white);
	filter: none;
}

/*
 * Volle breedte alleen op telefoonformaat.
 *
 * Stond eerder op ≤900px, maar dan werd de knop op een tablet van 768px 720×44
 * (en 720×53 in de grote maat van het retourformulier) terwijl het ontwerp
 * 276×44 tekent — over de volle breedte leest het niet meer als knop.
 *
 * De grens ligt op 600px: daarboven past de ontwerpmaat van 276px ruim en blijft
 * de knop dus gewoon zijn eigen breedte. Daaronder is volle breedte juist de
 * bedoeling: het is de gangbare vorm voor een CTA op een telefoon, en het is
 * bovendien nodig, want onder ±324px viewport is de container smaller dan de
 * 276px min-width en zou de knop uitsteken.
 */
@media (max-width: 600px) {
	.hinke-blkbtn {
		min-width: 0;
		width: 100%;
		padding: 11px 24px;
	}
}

/* =============================================================================
   9. WINKELWAGEN-MELDING (core-toast) — ontwerp 2217:6895

   Paneel 495×79 rechtsboven, wit, met een gouden ronde badge van 36×36 met een
   WIT tasje erin, en de tekst "Emily jacket | S is toegevoegd aan je
   winkelwagen!".

   Deze opmaak stond eerder in pages/product.css. Fout, want de melding
   verschijnt óók als je vanaf een categoriepagina toevoegt en dat bestand laadt
   daar niet. Vandaar layout.css, dat altijd laadt.
   ========================================================================== */

.sellabees-toast {
	top: 25px;
	right: 19px;
	bottom: auto;
	left: auto;
	width: 495px;
	max-width: calc(100vw - 38px);
	min-height: 79px;
	display: flex;
	align-items: center;
	gap: 17px;
	padding: 0 26px;
	border-radius: 0;
	background: var(--hinke-white);
	color: var(--hinke-ink);
	box-shadow: 1px 1px 13px 1px rgba(0, 0, 0, .25);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
}

/*
 * De positie is instelbaar (Site-instellingen -> Winkelwagen-melding) en staat nu
 * op "Rechtsboven". Bij de twee GECENTREERDE standen zet de core `left: 50%` met
 * `transform: translate(-50%, ...)`. Mijn `left: auto` hierboven overschrijft die
 * left -- de melding houdt dan de -50%-verschuiving zonder bijbehorende left en
 * schuift half het scherm uit (op 360px tot x=-157). Daarom zetten we left/right
 * voor die twee standen terug; de transform van de core klopt dan weer.
 */
.sellabees-toast--top-center,
.sellabees-toast--bottom-center {
	left: 50%;
	right: auto;
}

.sellabees-toast__icon {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	background: var(--hinke-gold);
	color: var(--hinke-white);
}

/*
 * Het tasje wit krijgen. icons/bag.svg heeft `fill="black"` ÓP de <path>, en een
 * presentatie-attribuut op het element zelf gaat vóór een geërfde kleur — via
 * een <img> is die dus niet om te kleuren (precies de val waar het
 * verlanglijst-hartje ook in liep). Een mask kijkt alleen naar de vorm, niet
 * naar de kleur, dus verbergen we de <img> die de core plaatst en tekenen we het
 * tasje als gemaskeerd vlak in currentColor.
 */
.sellabees-toast__icon img {
	visibility: hidden;
}

.sellabees-toast__icon::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 17px; /* 24×23 op schaal, past in de 36px-cirkel */
	background: currentColor;
	-webkit-mask: url('../img/icons/bag.svg') no-repeat center / contain;
	mask: url('../img/icons/bag.svg') no-repeat center / contain;
}

/*
 * Hartje bij de VERLANGLIJST-melding ("Toegevoegd aan je verlanglijstje").
 *
 * De winkelwagen-melding hierboven krijgt zijn badge uit de markup: de core zet daar
 * een `.sellabees-toast__icon` met een <img> in. De verlanglijst-melding wordt door
 * een ánder script gebouwd (core: assets/js/wishlist.js) en dat maakt een kale div
 * met alleen tekst — geen icoonslot, en de config die dat script meekrijgt is niet
 * filterbaar. Zonder de core aan te passen is CSS dus de enige weg.
 *
 * HOE DE TWEE TE ONDERSCHEIDEN ZIJN: de winkelwagen- en de notice-melding zetten hun
 * tekst in een `.sellabees-toast__text`; de verlanglijst-melding heeft dat kind niet.
 * `:not(:has(…))` pakt daarmee precies die ene, en raakt de andere twee niet — ook
 * niet als ze op dezelfde plek in beeld komen.
 *
 * Zelfde badge als bij het tasje: 36px goud rondje, 18px tekentje in het midden, en
 * de `gap: 17px` van de melding zorgt zelf voor de ruimte naar de tekst.
 *
 * WAAROM HET HARTJE HIER IN DE REGEL STAAT EN NIET ALS icons/heart.svg
 * Bij het tasje kan het met een mask omdat daar twee elementen zijn: de cirkel is de
 * <div> van de core, het tasje het ::after daarin. Hier is er maar één laag, en een
 * mask op die laag snijdt de cirkel net zo hard weg als de rest. Als
 * achtergrondafbeelding is heart.svg dan weer niet wit te krijgen — dat bestand heeft
 * `fill="black"` ÓP de <path>, en dat gaat vóór elke geërfde kleur. Dus staat het
 * pad hier letterlijk, met wit als vulling: exact hetzelfde hartje als in
 * icons/heart.svg (viewBox 21×21), alleen in de goede kleur.
 *
 * ZONDER JS-WIJZIGING blijft dit puur presentatie: verandert de core ooit en komt er
 * een echt icoonslot in die melding, dan valt deze regel weg door de `:has`-conditie
 * en neemt de badge uit de markup het over.
 */
.sellabees-toast:not(:has(.sellabees-toast__text))::before {
	content: '';
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath fill='%23ffffff' d='M10.5 20.7833C10.201 20.7833 9.91278 20.675 9.68816 20.4782C8.83981 19.7364 8.0219 19.0393 7.30029 18.4244L7.2966 18.4212C5.18094 16.6182 3.35398 15.0613 2.08282 13.5275C0.661856 11.8129 0 10.1871 0 8.41112C0 6.68558 0.591681 5.09366 1.66594 3.9284C2.75301 2.74936 4.24463 2.1 5.8665 2.1C7.07871 2.1 8.18885 2.48324 9.16601 3.23898C9.65916 3.62046 10.1062 4.08734 10.5 4.63191C10.894 4.08734 11.3408 3.62046 11.8341 3.23898C12.8113 2.48324 13.9214 2.1 15.1336 2.1C16.7553 2.1 18.2471 2.74936 19.3342 3.9284C20.4084 5.09366 21 6.68558 21 8.41112C21 10.1871 20.3383 11.8129 18.9173 13.5273C17.6461 15.0613 15.8193 16.6181 13.704 18.4209C12.9811 19.0367 12.1619 19.735 11.3116 20.4785C11.0872 20.675 10.7988 20.7833 10.5 20.7833ZM5.8665 3.33015C4.5923 3.33015 3.42175 3.83868 2.5702 4.76217C1.70599 5.6996 1.22999 6.99544 1.22999 8.41112C1.22999 9.90482 1.78514 11.2407 3.02986 12.7426C4.23293 14.1943 6.0224 15.7193 8.09432 17.485L8.09817 17.4882C8.82251 18.1055 9.64362 18.8054 10.4982 19.5526C11.3579 18.8039 12.1803 18.103 12.9061 17.4847C14.9779 15.719 16.7672 14.1943 17.9703 12.7426C19.2148 11.2407 19.77 9.90482 19.77 8.41112C19.77 6.99544 19.294 5.6996 18.4298 4.76217C17.5784 3.83868 16.4077 3.33015 15.1336 3.33015C14.2002 3.33015 13.3432 3.62687 12.5865 4.21198C11.9121 4.73365 11.4424 5.39311 11.167 5.85453C11.0253 6.09181 10.776 6.23345 10.5 6.23345C10.2239 6.23345 9.97463 6.09181 9.833 5.85453C9.55774 5.39311 9.08799 4.73365 8.41347 4.21198C7.65677 3.62687 6.79977 3.33015 5.8665 3.33015Z'/%3E%3C/svg%3E")
			no-repeat center / 18px 18px,
		var(--hinke-gold);
}

/* =============================================================================
   10. MOBIEL EN TABLET — 360 / 390 / 414 / 768 / 1024

   Er is GEEN mobiel ontwerp: het Figma-bestand (NVT61IBlNbt4LyTpo3CVlI) bestaat
   uit één frame "Home" van 1920×5602 en bevat geen enkel frame smaller dan 1920,
   geen 404 en geen winkelwagen-melding. Alles hieronder is dus een vertaling van
   de desktopregels, geen ontwerpmaat. Waar ik een maat kies, staat erbij waarom.

   Uitgangspunt: de maten uit het ontwerp blijven op desktop exact staan. Op smalle
   schermen verandert alleen wat moet — en aanraakdoelen vergroten we het liefst
   met een onzichtbaar vlak, zodat het beeld hetzelfde blijft als in het ontwerp.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   10a. Topbalk: laat de balk meegroeien in plaats van de USP afkappen

   Onder 720px staat `white-space: normal` (zie boven), dus een langere USP mag
   afbreken. De balk had een harde `height: 40px` met `overflow: hidden`: een USP
   van twee regels (36px) paste net, drie regels (54px) werd afgekapt. Met
   min-height groeit de balk mee.

   De hoogte blijft stabiel terwijl de slider rouleert, omdat alle USP's in
   dezelfde grid-cel liggen (`grid-area: 1 / 1`): de rijhoogte is die van de
   langste USP en verandert niet bij het wisselen. `overflow: hidden` blijft nodig
   voor de horizontale in-/uitschuif van de slides.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.hinke-topbar,
	.hinke-topbar__inner {
		height: auto;
		min-height: 40px;
	}

	/* Zijruimte zodat een lange USP niet tegen de schermrand plakt. */
	.hinke-topbar__inner {
		padding: 6px var(--hinke-gutter);
	}
}

/* -----------------------------------------------------------------------------
   10b. Zoekpaneel op smalle schermen

   Met `min-width: 0` op het veld (zie boven) past het formulier weer, maar de
   knop van 130,5px liet op 360px nog maar 170px voor het invoerveld over. Iets
   minder zijruimte en 14px tekst houdt de knop leesbaar en het veld bruikbaar.
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.hinke-search {
		gap: 8px;
	}

	.hinke-search__submit {
		padding: 0 16px;
		font-size: 14px;
	}
}

/* -----------------------------------------------------------------------------
   10c. Mobiel menu: achtergrond op slot + lange menu's scrollbaar

   hinke.js zet `hinke-menu-open` op <html> en onthoudt de scrollpositie in
   `body.style.top`. `position: fixed` op de body (in plaats van alleen
   `overflow: hidden`) is de variant die ook op iOS Safari echt vastzet.
   -------------------------------------------------------------------------- */

html.hinke-menu-open {
	overflow: hidden;
}

html.hinke-menu-open body {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

/*
 * Zolang het menu open staat, staat de body op `fixed` met een negatieve `top` —
 * er wordt dan niets meer gescrold, en dus heeft `position: sticky` niets om zich
 * aan vast te houden: de header (met het open menu erin) zou naar zijn plek in de
 * pagina terugvallen en boven het scherm verdwijnen zodra je het menu opent na
 * wat scrollen. Voor die duur zetten we hem daarom hard vast.
 */
html.hinke-menu-open .hinke-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

@media (max-width: 1200px) {
	/*
	 * Het menu vult het scherm tot onderaan — niet alleen de hoogte van zijn links.
	 *
	 * `dvh` en niet `vh`: op een telefoon rekent `vh` met het scherm ZONDER de
	 * adresbalk, dus met `100vh` liep het paneel onder de browserbalk door en was de
	 * onderste regel niet te raken. `dvh` volgt de balk die in- en uitschuift. De
	 * `vh`-regel blijft als terugval voor browsers die `dvh` nog niet kennen.
	 *
	 * De hoogtes komen uit de variabelen die hinke.js §9 opmeet: het paneel begint
	 * onder de balk, en zodra de header is meegeschoven (`.is-stuck`, de topbalk is
	 * dan weggeschoven) begint het 40px hoger — dan mag het dus 40px hoger zijn.
	 *
	 * Kolom-flexbox, zodat het blok met verlanglijstje en account met `margin-top:
	 * auto` echt onderaan het scherm komt te staan in plaats van onder de laatste
	 * menuregel. `overscroll-behavior` voorkomt dat de veeg doorslaat naar de pagina.
	 */
	.hinke-nav.is-open {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--hinke-topbar-h, 40px) - var(--hinke-bar-h, 88px));
		height: calc(100dvh - var(--hinke-topbar-h, 40px) - var(--hinke-bar-h, 88px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.hinke-header.is-stuck .hinke-nav.is-open {
		height: calc(100vh - var(--hinke-bar-h, 88px));
		height: calc(100dvh - var(--hinke-bar-h, 88px));
	}
}

/* -----------------------------------------------------------------------------
   10d. Aanraakdoelen in de header — 44×44 (WCAG 2.5.8)

   Gemeten op 360px: de vier acties waren 25×24, 21×24, 25×24 en 24×24, want
   onder 720px valt het label weg en blijft alleen het icoon over.

   Hier vergroten we de knop wél echt (geen onzichtbaar vlak): vier doelen naast
   elkaar met 16px ertussen zouden bij overlappende vlakken op elkaars gebied
   komen, en dan landt een tik op de verkeerde knop. Met `min-width: 44px` en
   `gap: 0` liggen de doelen exact naast elkaar: 4 × 44 = 176px. Dat past —
   op 360px is de container 312px en burger + logo nemen 32 + 16 + 64 = 112px, dus
   112 + 176 = 288 ≤ 312.

   `(hover: none)` staat erbij zodat ook een groot aanraakscherm (tablet in
   liggende stand, boven 1200px) fatsoenlijke doelen krijgt.

   LET OP — de twee helften hieronder staan met opzet in APARTE media queries.
   Het doel van 44×44 geldt op elk aanraakscherm, ongeacht breedte. Het dichtschuiven
   van het blok (`gap: 0`, midden uitlijnen) hoort er alleen bij als de labels wég
   zijn, en dat is puur een kwestie van breedte (onder 720px).

   Stonden ze samen onder `(max-width: 720px), (hover: none)` — zoals eerst — dan
   kreeg een breed aanraakscherm `gap: 0` mét zichtbare labels, en plakten
   "VERLANGLIJSTJE", "ACCOUNT" en "WINKELWAGEN" aan elkaar. Dat is precies wat de
   device toolbar van Chrome laat zien: die emuleert een aanraakscherm, dus matcht
   `(hover: none)` ook op 1596px breed. Het raakt echter net zo goed een echte
   touch-laptop of tablet in liggende stand.
   -------------------------------------------------------------------------- */

/* Het aanraakdoel: op elk aanraakscherm, elke breedte. */
@media (max-width: 720px), (hover: none) {
	.hinke-header__action {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}
}

/* Het dichtgeschoven blok: alleen waar de labels weg zijn. */
@media (max-width: 720px) {
	.hinke-header__actions {
		/* Was flex-end + 2px marge om de labels op de ontwerplijn te zetten; zonder
		   labels is midden uitlijnen juist. */
		align-items: center;
		gap: 0;
		margin-top: 0;
	}

	/*
	 * De drie iconen rechts wat dichter op elkaar.
	 *
	 * Ze stonden 44px hart-op-hart: het aanraakdoel is 44 breed en ze liggen tegen
	 * elkaar aan (`gap: 0` hierboven), dus tussen twee tekentjes van 24px zat 20px lucht.
	 * Dat las als drie losse dingen in plaats van één groepje. My Jewellery, waar deze
	 * balk op gebaseerd is, houdt 36px aan — gemeten op hun eigen pagina: iconen op
	 * x=292, 328 en 364. Die 36 nemen we hier over, dus 12px tussen de tekentjes.
	 *
	 * WAT DIT KOST: het doel wordt 36×44 in plaats van 44×44. Ruim boven de 24×24 die
	 * WCAG 2.5.8 vraagt, maar niet meer de 44×44 van 2.5.5 (AAA). De doelen liggen nog
	 * steeds exact naast elkaar zonder overlap, dus een tik landt nooit op de verkeerde
	 * knop. Terugdraaien = deze regel weghalen.
	 *
	 * Alleen de drie in het actieblok: de loep zit links bij de hamburger en heeft daar
	 * ruimte genoeg.
	 */
	.hinke-header__actions .hinke-header__action {
		min-width: 36px;
	}
}

/* -----------------------------------------------------------------------------
   10e. Aanraakdoelen in de footer

   Gemeten op 360px: de 11 links waren 312×29, de maps-link 191,6×19 en de drie
   socials 31×31 — alle drie te laag om betrouwbaar te raken.

   De links krijgen 44px hoogte (de tekst blijft op 29px regelhoogte staan, dus
   het beeld verandert nauwelijks; de kolom wordt wel langer). De socials worden
   44×44 vakken met het icoon van 31×31 gecentreerd: het icoon houdt zijn
   ontwerpmaat, alleen het raakvlak groeit. `gap: 0` houdt de vakken naast elkaar
   zonder overlap; de zichtbare ruimte tussen de iconen wordt daarmee 13px in
   plaats van de 10px uit het ontwerp — dat verschil van 3px weegt niet op tegen
   een icoon dat je niet kunt raken.
   -------------------------------------------------------------------------- */

@media (max-width: 900px), (hover: none) {
	.hinke-footer__links a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.hinke-footer__shop-link {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		/* 19px marge + een 44px vak zou 12,5px extra lucht geven; 7px houdt de
		   optische afstand tot de tekst gelijk aan het ontwerp. */
		margin-top: 7px;
	}

	.hinke-footer__socials {
		gap: 0;
	}

	.hinke-footer__social a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}
}

/* -----------------------------------------------------------------------------
   10f. Maat-swatches op de productkaart

   `.sellabees-size` komt uit de core en is op de kaart 27×27 met 4px ertussen.
   Ze zijn wél aanklikbaar (de core zet `role="link"` + `tabindex="0"` +
   `data-url`), dus ze zijn een aanraakdoel.

   27+4 = 31px hart-op-hart: een raakvlak van 44px zou 13px over de buur heen
   liggen en dan kies je de verkeerde maat. Daarom op smalle schermen 32×32 met
   12px ertussen: 32 + 12 = 44 hart-op-hart, precies aansluitend zonder overlap,
   met een raakvlak van 44×44 via het onzichtbare vlak hieronder. Het chipje zelf
   groeit dus maar 5px; de 27px uit het ontwerp is afgestemd op een kaart van
   314px breed, terwijl de kaart op 360px zelf maar 252px is.
   -------------------------------------------------------------------------- */

/*
 * De selector staat bewust op drie klassen (`.hinke-card .sellabees-loop-sizes
 * .sellabees-size`). pages/home.css zet voor de carrousel `.hinke-carousel
 * .sellabees-size { width: 27px }` — even specifiek als een selector met twee
 * klassen, maar dat bestand laadt ná layout.css en zou dus winnen. Met de
 * wrapper erbij is deze regel specifieker en houdt hij het op de kaart, ongeacht
 * de laadvolgorde.
 */
@media (max-width: 900px), (hover: none) {
	.hinke-card .sellabees-loop-sizes {
		gap: 12px;
	}

	.hinke-card .sellabees-loop-sizes .sellabees-size {
		position: relative;
		width: auto;
		min-width: 32px;
		height: 32px;
	}

	.hinke-card .sellabees-loop-sizes .sellabees-size::after {
		content: '';
		position: absolute;
		/* 32 + 2×6 = 44 in beide richtingen. */
		inset: -6px;
	}
}

/* -----------------------------------------------------------------------------
   10g. Zichtbare focus

   De browser-eigen ring (`outline: auto 1px`) is dun en op de roze footer bijna
   niet te zien. Alleen `:focus-visible`, dus een muisklik of tik geeft geen ring —
   alleen toetsenbordgebruik.

   Zwart op wit haalt ruim de 3:1 die WCAG 1.4.11 voor een focusindicator vraagt;
   op het roze footervlak en op de donkere categorietegels is wit de leesbare
   variant (goud #d3bb6c zou op beide te weinig contrast geven).
   -------------------------------------------------------------------------- */

.hinke-header__burger:focus-visible,
.hinke-header__action:focus-visible,
.hinke-nav__menu a:focus-visible,
.hinke-search__field:focus-visible,
.hinke-search__submit:focus-visible,
.hinke-card__link:focus-visible,
.hinke-lookbook__item a:focus-visible,
.hinke-promo__btn:focus-visible,
.hinke-404__cta:focus-visible,
/* De credit-link staat in de WITTE onderbalk, dus hier de zwarte ring en niet de
   witte van de roze footer hieronder. */
.hinke-footer__credit:focus-visible,
.hinke-blkbtn:focus-visible {
	outline: 2px solid var(--hinke-focus);
	outline-offset: 2px;
}

.hinke-footer__links a:focus-visible,
.hinke-footer__shop-link:focus-visible,
.hinke-footer__social a:focus-visible,
.hinke-newsletter__field:focus-visible,
.hinke-newsletter__btn:focus-visible,
.hinke-cats__card:focus-visible,
.hinke-topbar a:focus-visible {
	outline: 2px solid var(--hinke-focus-op-kleur);
	outline-offset: 2px;
}

/* Het raakvlak van 10f steekt buiten het chipje uit, dus de ring komt om het chipje
   zelf.

   De ring was wit ("valt op tegen het roze blokje"), maar met `outline-offset: 2px`
   ligt hij niet óp het blokje: hij ligt eromheen, op de witte kaart. Wit op wit dus.
   De bodykleur werkt op alle ondergronden die hier voorkomen: 8:1 op de witte kaart,
   en donker tegen zowel het roze van een blokje in rust als het goud bij focus. */
.hinke-card .sellabees-size:focus-visible {
	outline: 2px solid var(--hinke-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   10h. Winkelwagen-melding op smalle schermen

   Hij past al binnen het scherm: `max-width: calc(100vw - 38px)` maakt hem op
   360px 322px breed (x=19…341). Wat nog niet goed ging is de hoogte: het paneel
   heeft `padding: 0 26px`, dus geen ruimte boven en onder. Bij een lange
   productnaam (op 360px al drie regels) groeit het paneel voorbij de 79px en
   plakt de tekst tegen de rand. Verticale ruimte erbij; de 79px minimum uit het
   ontwerp blijft staan, dus een korte melding ziet er hetzelfde uit.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.sellabees-toast {
		padding: 14px 20px;
		gap: 13px;
	}
}

/* =============================================================================
   Wachtwoordsterkte-meter — de "sterk"-stand in het merkroze

   WooCommerce kleurt die balk lichtgroen (#c1e1b9 met rand #83c373). Dat is de
   enige plek in de shop waar groen opduikt dat niks met de huisstijl te maken
   heeft, en het valt op naast het roze eromheen. Nu het merkroze, met de dieper
   roze --hinke-badge als rand — dezelfde opbouw als WooCommerce aanhoudt: een
   lichte vulling met een iets sterkere randkleur.

   ALLEEN DE "STERK"-STAND. De andere drie standen blijven zoals ze zijn:
     short  rood    #f1adad
     bad    oranje  #fbc5a9
     good   geel    #ffe399
   Die kleuren zijn de functie van de meter — ze zeggen "dit wachtwoord is nog
   niet goed genoeg". Zou alles roze worden, dan is er niets meer te lezen aan de
   balk en kun je hem net zo goed weghalen.

   De letter gaat mee naar --hinke-body: het gedempte grijs dat de meter in het
   account krijgt (pages/account.css) haalt op dit roze te weinig contrast. Grijs
   #4e4e4e op #efc2bd is 5,2:1.

   Hier en niet in pages/account.css, omdat de meter ook buiten het account
   verschijnt: op de afrekenpagina bij "Account aanmaken" en op het formulier voor
   een nieuw wachtwoord (/mijn-account/lost-password/).
   ========================================================================== */

.woocommerce .woocommerce-password-strength.strong,
.woocommerce-page .woocommerce-password-strength.strong {
	background-color: var(--hinke-pink);
	border-color: var(--hinke-badge);
	color: var(--hinke-body);
}

/* =============================================================================
   MELDINGEN VAN WOOCOMMERCE — één opmaak voor de hele shop

   Deze stonden op DRIE plekken apart en waren daardoor niet hetzelfde:

     account      16px/24, 3px roze rand links, grijze band
     winkelwagen  14px/20, géén rand, grijze band
     coupon       14px/19, geen rand, transparant
     rest         niets — winkel, product en infopagina's kregen de standaard
                  opmaak van WooCommerce (paarse rand, eigen icoontje)

   Nu één regel hier, in de laag die op élke pagina laadt. De selectors beginnen met
   `body` en niet met `.woocommerce`: die class staat niet op een gewone pagina (waar
   een melding óók kan verschijnen), en `body .woocommerce-info` is (0,1,1) — net
   boven de (0,1,0) van WooCommerce' eigen stylesheet, ongeacht laadvolgorde. Zelfde vorm overal, met
   de eerste kleur van de shop als markering links.

   DE KLEUR ZEGT WAT VOOR MELDING HET IS:
     bericht/info  --hinke-pink   (het merkroze)
     fout          --hinke-sale   (het rood dat de shop ook voor sale gebruikt)
   Een foutmelding in dezelfde kleur als een bevestiging zou het verschil wegpoetsen
   op de plek waar het het meest uitmaakt — bij een mislukte betaling.

   `::before` uit: WooCommerce zet daar zijn eigen icoontje in (een vinkje, een i,
   een uitroepteken) met een eigen kleur. Het ontwerp heeft die niet.

   UITZONDERING: de meldingen ín het couponblok op de afrekenpagina
   (`.hinke-co-coupon`) blijven transparant en zonder rand — dat zijn regels tekst
   direct onder het invoerveld, geen losstaand meldingsblok. Die regel is (0,3,0) en
   wint dus van deze.
   ========================================================================== */

/* VORM ALS BIJ MIMODA, KLEUREN VAN HINKE (zo gevraagd, 13-08).
   Daar staat een melding op een licht getint vlak met een 3px accentrand bovenaan,
   het icoon van WooCommerce in die accentkleur en 4px ronding. Hier hetzelfde, maar
   met het roze van de shop en — bij een fout — het rood dat de shop ook voor sale
   gebruikt. Mimoda houdt bij een fout dezelfde tint aan; dat doen we hier ook, zodat
   het één component blijft en niet twee.

   Het icoon komt terug: die werd hier eerder weggezet (`content: none`) omdat het
   ontwerp geen icoontjes had. Het is de icoonfont van WooCommerce (een vinkje bij een
   bevestiging, een i bij informatie, een uitroepteken bij een fout), dus het klopt per
   type zonder eigen beeld. De positie zetten we zelf, zodat we niet afhankelijk zijn
   van de `em`-waarden van WooCommerce bij een andere tekstgrootte. */
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	position: relative;
	margin: 0 0 24px;
	padding: 15px 20px 15px 52px; /* 52 = 20 links + 20 icoon + 12 lucht */
	border: 0;
	border-top: 3px solid var(--hinke-pink);
	border-radius: 4px;
	background: var(--hinke-pink-zacht);
	list-style: none;
	font-family: var(--hinke-font-body);
	font-size: 14px;
	line-height: 22px;
	color: var(--hinke-body);
}

body .woocommerce-error {
	border-top-color: var(--hinke-sale);
}

/*
 * HET ICOON: EIGEN SVG, NIET DE ICOONFONT VAN WOOCOMMERCE.
 *
 * Waarom niet die font: WooCommerce zet op alle drie de soorten `content: "\e028"` en
 * overschrijft dat daarna per soort — een vinkje (\e015) bij een bevestiging en een
 * uitroepteken (\e016) bij een fout. Voor `info` ontbreekt die override, en \e028 zit
 * niet in de font: dat gaf het lege vierkantje van een missende glyph in de melding
 * over het tijdelijke wachtwoord. Het alternatief uit dezelfde font (\e007) bleek een
 * plus-in-cirkel, en "plus" leest als toevoegen, niet als informatie.
 *
 * Drie kleine SVG's als masker lossen dat op: de vorm komt hieruit, de kleur uit
 * `background` (roze, of rood bij een fout). Zelfde truc als bij de icoontjes elders
 * in dit thema, en de meldingen zijn er niet meer van afhankelijk of WooCommerce zijn
 * font of glyph-nummers verandert.
 *
 * VERTICAAL GECENTREERD, niet op een vaste `top`. Daar stond eerst 15px, gelijk aan de
 * vulling — dat klopt bij een melding van één regel, maar niet zodra er een knop in
 * staat ("tijdelijk wachtwoord … Opnieuw verzenden"): die maakt het blok ruim 56px hoog
 * en het icoon bleef bovenaan hangen. Met 50% + translateY volgt het icoon elke hoogte,
 * ook bij een melding van twee of drie regels tekst. De 1,5px van de bovenrand wordt
 * meegerekend, zodat het midden het optische midden van het blok is.
 */
body .woocommerce-message::before,
body .woocommerce-info::before,
body .woocommerce-error::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(50% + 1.5px);
	left: 20px;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: var(--hinke-pink);
	-webkit-mask: no-repeat center / 20px 20px var(--hinke-melding-icoon);
	mask: no-repeat center / 20px 20px var(--hinke-melding-icoon);
}

/* Informatie — een i in een cirkel. */
body .woocommerce-info::before {
	--hinke-melding-icoon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Ccircle cx='10' cy='5.9' r='1.15' fill='%23000'/%3E%3Crect x='9' y='8.6' width='2' height='6.2' rx='1' fill='%23000'/%3E%3C/svg%3E");
}

/* Gelukt — een vinkje in een cirkel. */
body .woocommerce-message::before {
	--hinke-melding-icoon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Cpath d='M6.2 10.4l2.7 2.7 5-5.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Fout — een uitroepteken in een cirkel, in het rood van de shop. Dezelfde markering
   als de bovenrand, zodat een fout niet dezelfde melding lijkt als een bevestiging. */
body .woocommerce-error::before {
	--hinke-melding-icoon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.4' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3Crect x='9' y='5' width='2' height='6.6' rx='1' fill='%23000'/%3E%3Ccircle cx='10' cy='14.2' r='1.15' fill='%23000'/%3E%3C/svg%3E");
	background: var(--hinke-sale);
}

/* -----------------------------------------------------------------------------
   Melding MET een knop erin — o.a. "tijdelijk wachtwoord … Opnieuw verzenden"

   WooCommerce 11 zet die knop als EERSTE kind, met de tekst erachter, en floatt hem
   naar rechts; de tekst begint dan bovenaan terwijl de knop de blokhoogte bepaalt.
   Met een flexrij staan ze op één middenlijn.

   `row-reverse` omdat de knop vóór de tekst in de HTML staat en dat hier niet met
   `order` omgedraaid kan worden: de tekst is een los tekstknooppunt zonder element,
   en zo'n anoniem flexitem is met geen enkele selector te bereiken.

   `:has(> .button)` houdt dit bij meldingen mét knop — zonder die voorwaarde zou een
   gewone melding (één tekstknooppunt) door `row-reverse` naar rechts schuiven.
   -------------------------------------------------------------------------- */

body .woocommerce-message:has(> .button),
body .woocommerce-info:has(> .button) {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

/* De knop in een melding: goud met witte letter, bij hover donkerder goud zoals de
   andere CTA's. Kleiner dan een gewone knop (36 i.p.v. 53 hoog) — het is een
   hulpactie binnen een melding, geen hoofdknop van de pagina. De transition komt
   uit motion.css §1. */
body .woocommerce-info .button.wc-forward,
body .woocommerce-message .button.wc-forward {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

body .woocommerce-info .button.wc-forward:hover,
body .woocommerce-info .button.wc-forward:focus-visible,
body .woocommerce-message .button.wc-forward:hover,
body .woocommerce-message .button.wc-forward:focus-visible {
	background: var(--hinke-gold-donker);
	color: var(--hinke-white);
}

/* -----------------------------------------------------------------------------
   11. Keuzevenster van het verlanglijstje — maten, kleuren en knop uit de huisstijl

   De core levert dit venster (inc/wishlist.php) met neutrale opmaak: maten als witte
   vakjes met een grijze rand, kleuren als 36px-bolletjes en een knop in het
   accentkleur. Daarmee ziet het venster er anders uit dan de rest van de winkel,
   terwijl het precies dezelfde keuze vraagt als de productpagina.

   Hier krijgt het daarom de bekende vormen:
     maten    42×42 roze met witte letter (Kumbh Sans 17px), gekozen = zwarte ring —
              identiek aan .hinke-swatch op de productpagina;
     kleuren  43×43 rond met dezelfde ring;
     knop     de gouden CTA van de winkel: 53px hoog, Outfit 800/14 in kapitalen,
              hover naar het donkerder goud (--hinke-gold-donker).

   De maten van de core-CSS worden hier overschreven, dus staat elke regel op minstens
   twee classes; de core zet zijn eigen opmaak op één class.

   De beweging (openen van het venster, hover op de swatches) staat in motion.css.
   -------------------------------------------------------------------------- */

.sellabees-wish-modal .sellabees-wish-modal__box {
	max-width: 620px;
	padding: 34px 40px 40px;
	border-radius: 0;
}

.sellabees-wish-modal .sellabees-wish-modal__name {
	font-family: var(--hinke-font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var(--hinke-body);
}

.sellabees-wish-modal .sellabees-wish-modal__price {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--hinke-body);
}

.sellabees-wish-modal .sellabees-wish-modal__label {
	font-family: var(--hinke-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--hinke-body);
}

/* --- Maten: exact de swatch van de productpagina ------------------------- */

.sellabees-wish-modal .sellabees-wish-modal__group--size .sellabees-wish-modal__options {
	gap: 6px; /* zelfde tussenruimte als .hinke-swatches */
}

.sellabees-wish-modal .sellabees-wish-modal__opt--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* min-width i.p.v. width: "One size" is langer dan 42px en mag meegroeien,
	   net als op de productpagina. */
	min-width: 42px;
	width: auto;
	height: 42px;
	padding: 0 6px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-pink);
	color: var(--hinke-white);
	font-family: var(--hinke-font-ui);
	font-weight: 400;
	font-size: 17px;
	line-height: 1;
	text-transform: uppercase;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.sellabees-wish-modal .sellabees-wish-modal__opt--text.is-selected {
	border-color: transparent;
	outline: 2px solid var(--hinke-ink);
	outline-offset: 0;
}

/* --- Kleuren: 43×43 rond, gekozen = zwarte ring op afstand --------------- */

.sellabees-wish-modal .sellabees-wish-modal__group--color .sellabees-wish-modal__options {
	gap: 10px;
}

.sellabees-wish-modal .sellabees-wish-modal__opt--color {
	width: 43px;
	height: 43px;
	border: 0;
	border-radius: 100px;
	box-shadow: none;
}

/* Lichte kleuren (wit, crème) vallen weg op wit → haarlijn eromheen, zoals in de
   filterkolom en op de productpagina. box-sizing houdt de cirkel op 43px. */
.sellabees-wish-modal .sellabees-wish-modal__opt--color[title*="it"],
.sellabees-wish-modal .sellabees-wish-modal__opt--color[title*="rème"],
.sellabees-wish-modal .sellabees-wish-modal__opt--color[title*="cru"] {
	box-sizing: border-box;
	border: 1px solid var(--hinke-line);
}

.sellabees-wish-modal .sellabees-wish-modal__opt--color.is-selected {
	box-shadow: 0 0 0 2px var(--hinke-ink);
}

/* --- Knop: de gouden CTA van de winkel ----------------------------------- */

.sellabees-wish-modal .sellabees-wish-modal__add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 53px;
	margin-top: 12px;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background: var(--hinke-gold);
	color: var(--hinke-white);
	font-family: var(--hinke-font-body);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

/* Hover alleen waar een aanwijzer is: op een aanraakscherm blijft :hover na een tik
   hangen, en dan zou de knop in de donkere stand blijven staan. */
@media (hover: hover) {
	.sellabees-wish-modal .sellabees-wish-modal__add:hover {
		background: var(--hinke-gold-donker);
	}
}

.sellabees-wish-modal .sellabees-wish-modal__add:focus-visible {
	outline: 2px solid var(--hinke-focus);
	outline-offset: 2px;
}

/* --- Sluitkruisje ------------------------------------------------------- */

.sellabees-wish-modal .sellabees-wish-modal__close {
	color: var(--hinke-body);
}

@media (max-width: 600px) {
	.sellabees-wish-modal .sellabees-wish-modal__box {
		padding: 28px 20px 24px;
	}
}