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

/* Verlanglijstje onderaan het uitklapmenu: alleen onder 1200px, want daarboven
   staat het als icoon in de balk (zie §10b en header.php). */
.hinke-nav__extra {
	display: none;
}

.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;
}

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

/* 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.
 */
.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). */
.hinke-header__icon {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 24px;
}

.hinke-header__icon img {
	display: block;
}

.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;
}

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

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

.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.
 *
 * De core geeft een maat met `[data-url]` (variabel product: klikken selecteert die
 * maat op de productpagina) bij hover een WITTE achtergrond met zijn eigen donkere
 * letter. In deze huisstijl is het blokje roze met een WITTE letter — dus werd het
 * blokje bij hover wit op wit en verdween de maat gewoon uit beeld.
 *
 * Wit blijft, want dat is de bedoeling van de core: het blokje licht op. De letter
 * gaat mee naar de bodykleur (7,5:1 op wit) en er komt een roze lijn om het vlak,
 * zodat het blokje zijn vorm houdt. Die lijn is een `inset box-shadow` en geen
 * `border`: het blokje is 27×27 zonder rand, en een rand erbij zou de letter 1px
 * laten verspringen.
 *
 * 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-white);
	color: var(--hinke-body);
	box-shadow: inset 0 0 0 1px var(--hinke-pink);
}

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

.hinke-footer__links a:hover {
	text-decoration: underline;
}

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

.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) {
	.hinke-header__inner {
		height: 88px;
		gap: 16px;
		justify-content: flex-start;
	}
	.hinke-header__burger {
		display: block;
		order: 1;
	}
	.hinke-header__logo {
		order: 2;
		width: 64px;
		height: 64px;
	}
	.hinke-header__logo img {
		width: 64px;
		height: 64px;
	}
	.hinke-header__actions {
		order: 3;
		margin-left: auto;
	}
	.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;
	}

	/* -------------------------------------------------------------------------
	   10b. Verlanglijstje onderaan het uitklapmenu

	   In de balk is het een icoon (vanaf 1200px); hier wordt het een gewone regel
	   onder een scheidingslijn, in de taal van het menu erboven maar niet in
	   kapitalen — het is geen categorie maar "jouw lijstje". `margin-top: auto`
	   duwt het blok naar de onderkant van het paneel (dat is kolom-flexbox, zie de
	   regel hierboven), dus staat het altijd onderaan het scherm, ook bij een kort
	   menu. 44px hoog voor een aanraakdoel (WCAG 2.5.8).
	   ---------------------------------------------------------------------- */

	.hinke-nav__extra {
		display: flex;
		flex-direction: column;
		margin-top: auto;
		padding-top: 12px;
		border-top: 1px solid var(--hinke-line);
	}

	.hinke-nav__extra-link {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		padding: 12px 0;
		font-family: var(--hinke-font-body);
		font-weight: 400;
		font-size: 14px;
		line-height: 18px;
		color: var(--hinke-ink);
		text-decoration: none;
	}

	.hinke-nav__extra-link:hover,
	.hinke-nav__extra-link:focus-visible {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.hinke-nav__extra-icon {
		flex: 0 0 auto;
		display: block;
		width: 21px;
		height: 21px;
		object-fit: contain;
	}

	/* Het hartje in de balk zou hiermee dubbel staan; zoeken, account en de
	   winkelwagen (met zijn teller) blijven daar wél. */
	.hinke-header__action--wish {
		display: none;
	}
}

@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;
}

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

/* -----------------------------------------------------------------------------
   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,
.hinke-blkbtn:focus-visible {
	outline: 2px solid var(--hinke-ink);
	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-white);
	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.
   En sinds de hover/focus het blokje zelf wit maakt (zie de regel hierboven bij de
   productkaart) zou er helemaal niets meer te zien zijn. De bodykleur werkt op beide
   ondergronden: 8:1 op wit, en donker tegen het roze van een blokje in rust. */
.hinke-card .sellabees-size:focus-visible {
	outline: 2px solid var(--hinke-body);
	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;
	}
}