/*
Theme Name: Black Friday Supersale
Description: Zwart-geel dealthema voor blackfridaysupersale.nl. Werkt samen met de plugin BFSS Deals.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: bfss
*/

/* ---------- Font (lokaal, geen Google-verbinding) ---------- */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	src: url(assets/fonts/archivo-latin-standard-normal.woff2) format('woff2-variations'), url(assets/fonts/archivo-latin-standard-normal.woff2) format('woff2');
}

/* ---------- Tokens ---------- */
:root {
	--ink: #0E0E0E;
	--paper: #F4F2EE;
	--white: #FFFFFF;
	--yellow: #FFD60A;
	--yellow-hover: #F0C800;
	--line: #E2DED5;
	--line-strong: #D6D1C6;
	--muted: #5C574D;
	--text: #3D3A33;
	--on-dark: #CFCBC2;
	--ph: #EFECE6;
	--ph-text: #8A847A;
	--radius: 14px;
	--wrap: 1280px;
	--gutter: 32px;
	--display: 'Archivo', system-ui, sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--display);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: #5A4A00; }
h1, h2, h3 { margin: 0; }
button, input, select { font: inherit; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; left: 16px; top: 16px; z-index: 1000; width: auto; height: auto; clip: auto;
	background: var(--yellow); color: var(--ink); padding: 12px 16px; border-radius: 8px; font-weight: 800;
}
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.display { font-weight: 900; font-stretch: 70%; line-height: 1; letter-spacing: -0.005em; }

/* ---------- Topbalk ---------- */
.topbar { background: var(--ink); color: var(--paper); font-size: 13px; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.topbar__date { font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.topbar__disclosure { color: var(--on-dark); }
.topbar__disclosure a { color: var(--yellow); }

/* ---------- Header ---------- */
.site-header { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__main { font-weight: 900; font-stretch: 70%; font-size: 30px; letter-spacing: -0.01em; line-height: 1; }
.logo__tag { font-weight: 800; font-stretch: 70%; font-size: 18px; background: var(--yellow); padding: 3px 8px 2px; border-radius: 4px; line-height: 1; }
.logo img { max-height: 44px; width: auto; }

form.search { flex: 1 1 320px; display: flex; min-width: 0; }
form.search input[type="search"] {
	flex: 1; min-width: 0; height: 46px; border: 2px solid var(--ink); border-right: 0;
	border-radius: 8px 0 0 8px; padding: 0 16px; font-size: 16px; background: var(--white); color: var(--ink);
}
form.search button {
	width: 52px; height: 46px; border: 0; border-radius: 0 8px 8px 0; background: var(--ink); color: var(--white);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.btn-outline {
	height: 46px; padding: 0 20px; display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--ink);
	border-radius: 8px; font-weight: 700; text-decoration: none; color: var(--ink); background: transparent;
}
.btn-outline:hover { background: var(--ink); color: var(--white); }
.menu-toggle { display: none; }

.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 28px; font-weight: 600; font-size: 15px; }
.main-nav a { display: block; padding: 12px 0; text-decoration: none; border-bottom: 3px solid transparent; }
.main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a, .main-nav a:hover { border-bottom-color: var(--yellow); color: var(--ink); }
.main-nav .sub-menu { display: none; }

/* ---------- Knoppen ---------- */
.btn-deal {
	height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--yellow); color: var(--ink); border-radius: 10px; font-weight: 800; text-decoration: none; padding: 0 18px; text-align: center;
}
.btn-deal:hover { background: var(--yellow-hover); color: var(--ink); }
.btn-dark {
	display: inline-flex; justify-content: center; align-items: center; height: 52px; padding: 0 24px;
	background: var(--ink); color: var(--white); border-radius: 10px; font-weight: 800; text-decoration: none; border: 0; cursor: pointer;
}
.btn-dark:hover { background: #2A2A2A; color: var(--white); }
.btn-ghost {
	height: 52px; width: 100%; border: 2px solid var(--ink); border-radius: 10px; background: transparent;
	font-weight: 800; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none;
}

/* ---------- Hero ---------- */
.hero { background: var(--ink); color: var(--paper); position: relative; z-index: 99; overflow-x: clip; isolation: isolate; } /* geen overflow-y: de zoeksuggesties mogen onder de hero uitsteken, en boven de volgende blokken (kop heeft z-index 100) */
.hero--img::before {
	content: ''; position: absolute; inset: 0; z-index: -2;
	background: var(--ink) var(--hero-img) right center / cover no-repeat;
}
/* Donkere verloop links zodat de tekst leesbaar blijft; rechts komt de foto door. */
.hero--img::after {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(14,14,14,.97) 0%, rgba(14,14,14,.9) 34%, rgba(14,14,14,.5) 68%, rgba(14,14,14,.3) 100%),
		linear-gradient(0deg, rgba(14,14,14,.75) 0%, rgba(14,14,14,0) 35%);
}
.hero .wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
.hero__main { flex: 999 1 560px; min-width: 0; }
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: var(--yellow); text-transform: uppercase; }
.hero h1 { margin: 16px 0 20px; font-weight: 900; font-stretch: 68%; font-size: clamp(50px, 7vw, 92px); line-height: 0.92; letter-spacing: -0.01em; }
.hero__lead { margin: 0 0 32px; font-size: 20px; line-height: 1.5; color: var(--on-dark); max-width: 620px; }
.hero-search { display: flex; max-width: 640px; position: relative; }
.hero-search input { flex: 1; min-width: 0; height: 60px; border: 0; border-radius: 10px 0 0 10px; padding: 0 20px; font-size: 18px; }
.hero-search button { height: 60px; padding: 0 28px; border: 0; border-radius: 0 10px 10px 0; background: var(--yellow); color: var(--ink); font-weight: 800; font-size: 17px; cursor: pointer; }
.chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 9px 16px; border: 1px solid #4A4740; border-radius: 999px; color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 600; }
.chip:hover { border-color: var(--yellow); color: var(--yellow); }

.countdown-card { flex: 1 1 340px; background: var(--yellow); color: var(--ink); border-radius: 16px; padding: 32px; }
.countdown-card__title { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.countdown { margin: 18px 0 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.countdown[hidden] { display: none; }
.countdown-card.is-live .countdown-card__title { font-weight: 900; font-stretch: 70%; font-size: 48px; line-height: 1; letter-spacing: 0; text-transform: none; margin-bottom: 14px; }
.countdown__cell { background: var(--ink); color: var(--yellow); border-radius: 10px; padding: 14px 0; text-align: center; }
.countdown__num { font-weight: 900; font-stretch: 70%; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__unit { font-size: 13px; color: var(--paper); margin-top: 4px; }
.countdown-card p { margin: 0 0 20px; font-size: 16px; line-height: 1.45; }
.countdown-card .btn-dark { display: flex; }

/* ---------- USP-strip ---------- */
.usps { background: var(--white); border-bottom: 1px solid var(--line); }
.usps .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 32px; padding-top: 22px; padding-bottom: 22px; }
.usp { display: flex; gap: 12px; align-items: center; font-weight: 600; font-size: 15px; }
.usp__icon { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--ink); color: var(--yellow); display: flex; align-items: center; justify-content: center; }

/* ---------- Secties ---------- */
.section { padding-top: 56px; padding-bottom: 24px; }
.section--first { padding-top: 72px; }
.section__head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.section__title { font-weight: 400; font-stretch: 70%; font-size: 36px; line-height: 1; text-transform: uppercase; }
.section__sub { margin: 8px 0 0; color: var(--muted); font-size: 16px; }
.section__link { font-weight: 700; font-size: 16px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.tab {
	height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer;
	background: var(--white); color: var(--ink); border: 2px solid var(--line-strong);
}
.tab[aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- Dealkaart ---------- */
/* Zwaai van het kaartje aan het pinnetje: gedempte slinger (veer), heen en weer en dan stil. Oudere browsers zonder linear() houden de korte zwaai. */
:root { --swing: linear(0, 0.057, 0.206, 0.413, 0.646, 0.873, 1.071, 1.224, 1.323, 1.368, 1.365, 1.322, 1.252, 1.168, 1.081, 1.002, 0.938, 0.892, 0.867, 0.862, 0.872, 0.895, 0.924, 0.957, 0.988, 1.014, 1.034, 1.046, 1.051, 1.05, 1.043, 1.033, 1.021, 1.009, 0.998, 0.99, 0.984, 0.981, 0.981, 0.983, 1); }
.deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.deal-card { position: relative; display: flex; flex-direction: column; transform-origin: calc(100% - 25px) 25px; transition: transform 0.35s cubic-bezier(.3,1.6,.5,1), filter 0.25s; filter: drop-shadow(0 1px 2px rgba(14, 14, 14, 0.10)) drop-shadow(0 6px 12px rgba(14, 14, 14, 0.07)); }
.deal-card:hover { transform: rotate(-1.2deg); filter: drop-shadow(0 2px 3px rgba(14, 14, 14, 0.12)) drop-shadow(0 12px 20px rgba(14, 14, 14, 0.12)); }
@media (prefers-reduced-motion: reduce) { .deal-card, .deal-card::after { transition: none; } .deal-card:hover, .deal-card:hover::after { transform: none; } }
.deal-card__face { position: relative; flex: 1; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 0; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
/* Gele onderstrook met de prijs en de zwarte knop */
.deal-card__stub { margin: auto -18px 0; padding: 16px 18px 18px; background: var(--yellow); display: flex; flex-direction: column; gap: 10px; }
.deal-card__stub .price-old, .deal-card__stub .deal-meta, .deal-card__stub .price-missing { color: var(--ink); opacity: 0.75; }
.deal-card__stub .price-ref { background: rgba(14, 14, 14, 0.08); color: var(--ink); }
.deal-card__stub .btn-deal { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
/* Kaartje met ponsgaatje rechtsboven en een omgekrulde hoek rechtsonder */
.deal-card__face {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
	-webkit-mask: radial-gradient(circle 7px at calc(100% - 25px) 25px, transparent 6.5px, #000 7px);
	mask: radial-gradient(circle 7px at calc(100% - 25px) 25px, transparent 6.5px, #000 7px);
}
.deal-card::before { /* ring om het gaatje */
	content: ""; position: absolute; z-index: 3; top: 14px; right: 14px; width: 22px; height: 22px; pointer-events: none;
	background: radial-gradient(circle, transparent 7px, var(--line-strong) 7.5px, var(--line-strong) 9px, transparent 9.5px);
}
.deal-card__stub { position: relative; }
/* Zwart kunststof labelpinnetje (zoals aan kleding) door het ponsgaatje; 150% groot en steekt boven de kaart uit */
.deal-card::after {
	content: ""; position: absolute; z-index: 5; top: -17px; right: -17px; width: 84px; height: 84px; pointer-events: none;
	background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -6 56 56'><defs><clipPath id='h'><circle cx='22' cy='22' r='6.6'/></clipPath></defs><g clip-path='url(%23h)'><rect x='13.5' y='24.8' width='16' height='4.6' rx='2.3' transform='rotate(36 21.5 27)' fill='%230E0E0E'/></g><path d='M31 6C33 14 27 19 22.2 22.2S15.5 25.6 16.2 29' fill='none' stroke='%230E0E0E' stroke-width='1.7' stroke-linecap='round'/><rect x='23' y='3.5' width='16' height='5' rx='2.5' transform='rotate(36 31 6)' fill='%230E0E0E'/><rect x='25.5' y='4.5' width='9.5' height='1.1' rx='0.55' transform='rotate(36 31 6)' fill='%23555'/></svg>") center / contain no-repeat;
	filter: drop-shadow(0 1px 1px rgba(14, 14, 14, 0.35));
	transition: transform 0.35s cubic-bezier(.3,1.6,.5,1);
}
.deal-card:hover::after { transform: rotate(1.2deg); } /* tegenbeweging: het pinnetje blijft staan terwijl het kaartje eromheen zwaait */
@supports (transition-timing-function: linear(0, 1)) { /* kaartje en pinnetje met dezelfde curve, zodat het pinnetje stil blijft staan */
	.deal-card { transition: transform 1.1s var(--swing), filter 0.25s; }
	.deal-card::after { transition: transform 1.1s var(--swing); }
}
.deal-card__stub::before { /* zachte schaduw van de omgeslagen hoek op het kaartje */
	content: ""; position: absolute; z-index: 2; right: 0; bottom: 0; width: 22px; height: 22px; pointer-events: none;
	background: linear-gradient(135deg, #000 50%, transparent 50%);
	opacity: 0.28; filter: blur(2.5px); transform: translate(-2px, -2px); border-top-left-radius: var(--radius);
}
.deal-card__stub::after { /* de omgeslagen hoek: achterkant van het papier */
	content: ""; position: absolute; z-index: 3; right: 0; bottom: 0; width: 22px; height: 22px; pointer-events: none;
	background: linear-gradient(135deg, #FFF3B0 0%, #FFE97F 45%, #F0CA14 49%, #D9B300 50%);
	clip-path: polygon(0 0, 100% 0, 0 100%); border-top-left-radius: var(--radius);
}
.deal-card__top { padding-right: 28px; }
/* Hele kaartje klikbaar: een onzichtbare link over de kaart (de knop blijft voor toetsenbord en screenreaders) */
.deal-card__link { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
/* Muis-over: knop blijft zwart met gele tekst en gele strik; er komt een gouden rand met gloed omheen (plus het goudstof onderaan dit bestand) */
.deal-card__stub .btn-deal { transition: box-shadow .35s ease; }
.deal-card:hover .deal-card__stub .btn-deal,
.deal-card .deal-card__stub .btn-deal:focus-visible { background: var(--ink); color: var(--yellow); box-shadow: 0 0 0 1.5px #C8901A, 0 0 12px 3px rgba(214, 150, 10, .5), inset 0 0 16px rgba(255, 200, 60, .22); }
.deal-card:has(.btn-deal:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: var(--radius); }

.deal-card[hidden] { display: none; }
.deal-card__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.deal-card__shop { font-weight: 800; font-size: 15px; }
.badge-pct { background: var(--ink); color: var(--yellow); font-weight: 900; font-stretch: 75%; font-size: 20px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.deal-card__img { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--ph); display: flex; align-items: center; justify-content: center; color: var(--ph-text); font-size: 14px; overflow: hidden; }
img.is-wide { object-fit: contain !important; } /* brede foto's (bijv. tv's) helemaal tonen, niet bijsnijden */
.deal-card__img img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.deal-card__cat { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.deal-card__title { margin-top: -6px; font-size: 18px; line-height: 1.3; font-weight: 700; }
.deal-card__title a { text-decoration: none; }
.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price { font-weight: 900; font-stretch: 75%; font-size: 34px; line-height: 1; }
.price-old { color: var(--muted); text-decoration: line-through; font-size: 15px; }
.price-ref { font-size: 14px; color: var(--text); background: var(--paper); border-radius: 8px; padding: 8px 10px; }
.deal-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }

.price-missing { font-size: 15px; color: var(--muted); }

/* ---------- Winkels ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.shop-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; position: relative; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; }
.shop-card__link { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; color: inherit; text-decoration: none; }
.shop-card__link:hover { color: inherit; }
.shop-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.shop-card__link:focus-visible { outline: none; }
.shop-card__link:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-card__actions { position: relative; z-index: 1; margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.shop-card__btn { display: block; padding: 9px 12px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 700; font-size: 14px; line-height: 1.2; text-align: center; text-decoration: none; box-shadow: inset 0 0 0 2px var(--ink); }
.shop-card__btn:hover, .shop-card__btn:focus-visible { background: var(--white); color: var(--ink); }
.shop-card__btn--outline { background: var(--white); color: var(--ink); }
.shop-card__btn--outline:hover, .shop-card__btn--outline:focus-visible { background: var(--ink); color: var(--white); }
.shop-card__site { font-size: 13px; line-height: 1.2; text-align: center; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.shop-card__site:hover, .shop-card__site:focus-visible { color: var(--ink); }
/* Populaire winkels: twee regels, de rest klapt uit (alleen vanaf tablet; op mobiel scrolt de rij zijwaarts) */
.shop-more { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.shop-more::before, .shop-more::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.shop-more[hidden] { display: none; }
.shop-more__btn { height: 44px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; background: var(--white); color: var(--ink); border: 2px solid var(--line-strong); }
.shop-more__btn:hover, .shop-more__btn:focus-visible { border-color: var(--ink); }
.shop-more__chev { display: inline-block; transition: transform .2s; }
.shop-more__btn[aria-expanded="true"] .shop-more__chev { transform: rotate(180deg); }
@media (min-width: 768px) {
	.shop-grid[data-collapsible] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shop-grid[data-collapsible].is-collapsed .shop-card:nth-child(n + 7) { display: none; }
}
@media (min-width: 1100px) {
	.shop-grid[data-collapsible] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.shop-grid[data-collapsible].is-collapsed .shop-card:nth-child(n + 7) { display: flex; }
	.shop-grid[data-collapsible].is-collapsed .shop-card:nth-child(n + 11) { display: none; }
}
@media (max-width: 767px) { .shop-more { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .shop-more__chev { transition: none; } }
.shop-promo-line { margin: 18px 0 0; font-weight: 800; font-size: 18px; }
.shop-promo-line span { font-weight: 400; color: var(--muted); font-size: 15px; }

.shop-card:hover { border-color: var(--ink); color: var(--ink); }
.shop-card__logo { width: 192px; max-width: 100%; aspect-ratio: 1; flex: none; padding: 16px; box-sizing: border-box; border-radius: 12px; background: var(--ph); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ph-text); overflow: hidden; }
.shop-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.shop-card__logo.has-img { background: var(--white); }
.shop-card__name { font-weight: 800; font-size: 17px; }
.shop-card__status { font-size: 14px; color: var(--muted); }

/* ---------- Categorieën ---------- */
.cat-layout { display: grid; gap: 16px; }
.cat-figure { margin: 0; display: flex; justify-content: center; }
.cat-figure img { display: block; width: 100%; max-width: 420px; height: auto; max-height: 300px; object-fit: contain; }
@media (min-width: 1000px) {
	.cat-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
	.cat-layout .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); order: 1; }
	.cat-figure { order: 2; position: relative; overflow: hidden; border-radius: var(--radius); }
	.cat-figure img { position: absolute; inset: 0; max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
}
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cat-card { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 24px; min-height: 120px; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.cat-card:hover { color: var(--paper); outline: 3px solid var(--yellow); outline-offset: -3px; }
.cat-card__name { font-weight: 600; font-stretch: 72%; font-size: 27px; line-height: 1.05; text-transform: lowercase; letter-spacing: 0.01em; }
.cat-card__sub { font-size: 14px; color: var(--on-dark); }
.cat-card__sub span { color: var(--yellow); }

/* ---------- Kalender ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cal-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.cal-item--hl { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.cal-item__date { font-weight: 900; font-stretch: 70%; font-size: 40px; line-height: 1; }
.cal-item__name { font-weight: 800; font-size: 18px; margin-top: 10px; }
.cal-item__note { font-size: 14px; margin-top: 6px; color: var(--muted); }
.cal-item--hl .cal-item__note { color: var(--paper); }

/* ---------- Deal-alert ---------- */
.alert-box { background: var(--yellow); border-radius: 20px; padding: 48px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.alert-box__text { flex: 1 1 420px; }
.alert-box h2 { font-weight: 900; font-stretch: 70%; font-size: clamp(40px, 5vw, 56px); line-height: 0.95; }
.alert-box p { margin: 12px 0 0; font-size: 18px; line-height: 1.45; max-width: 520px; }
.alert-form { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.alert-form label { font-weight: 700; font-size: 15px; }
.alert-form__row { display: flex; gap: 10px; flex-wrap: wrap; }
.alert-form input[type="email"] { flex: 1 1 240px; height: 56px; border: 2px solid var(--ink); border-radius: 10px; padding: 0 16px; font-size: 17px; background: var(--white); }
.alert-form .btn-dark { height: 56px; font-size: 17px; }
.alert-form small { font-size: 14px; }
.admin-hint { background: var(--white); border: 2px dashed var(--ink); border-radius: 10px; padding: 12px 14px; font-size: 14px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: flex; flex-wrap: wrap; gap: 48px; padding-bottom: 80px; }
.faq-intro { flex: 1 1 360px; }
.faq-intro p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--text); }
.faq-list { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.faq-item summary { font-weight: 800; font-size: 18px; cursor: pointer; }
.faq-item p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--text); }

/* ---------- Categoriepagina ---------- */
.crumbs { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; padding-top: 28px; }
.crumbs a { color: var(--muted); }
.crumbs span[aria-current] { color: var(--ink); font-weight: 600; }
.page-head { display: block; }
.page-head__img { margin: 24px 0 0; }
.page-head__img img { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.page-head__img--tall img { width: auto; max-width: 100%; max-height: 340px; }
@media (min-width: 900px) {
	.page-head.has-img { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: 40px; align-items: center; }
	.page-head__img { margin: 0; }
	.page-head__img img { max-width: none; }
	.page-head__img--tall img { max-width: 100%; max-height: 480px; margin: 0 auto; }
}
.page-title { margin: 18px 0 12px; font-weight: 900; font-stretch: 68%; font-size: clamp(44px, 6vw, 76px); line-height: 0.95; }
.page-title--caps { text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(34px, calc(6vw - 10px), 66px); }
.page-title--caps strong { font-weight: 900; }
.page-title--caps .t-light { font-weight: 400; }
.page-intro { margin: 0; max-width: 760px; font-size: 18px; line-height: 1.55; color: var(--text); }
.page-intro p { margin: 0 0 10px; }
.page-meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--muted); }
.page-meta strong { color: var(--ink); }
.jump { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.jump a { padding: 10px 16px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; }
.jump a:first-child { background: var(--ink); color: var(--white); border-color: var(--ink); }

.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.pick { background: var(--white); border: 2px solid var(--ink); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pick__label { align-self: flex-start; background: var(--yellow); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; padding: 5px 10px; border-radius: 6px; text-transform: uppercase; }
.pick__img { aspect-ratio: 1 / 1; border-radius: 10px; background: var(--ph); display: flex; align-items: center; justify-content: center; color: var(--ph-text); font-size: 14px; overflow: hidden; }
.pick__img img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.pick h3 { font-size: 21px; line-height: 1.25; }
.pick__why { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.pick__why p { margin: 0; }
.pick .price { font-size: 36px; }

.listing { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.filters { flex: 1 1 260px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.filters fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.filters legend { font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.filters label { display: flex; gap: 10px; align-items: center; font-size: 15px; min-height: 28px; cursor: pointer; }
.filters input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--ink); }
.filters__real { font-weight: 700; }
.filters__n { opacity: 0.72; font-size: 0.9em; } /* contrast minimaal 4,5:1 */
.filters__reset { display: inline-block; margin-top: 4px; font-size: 14px; font-weight: 700; }
.results { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sort { display: flex; gap: 10px; align-items: center; }
.sort label { font-size: 15px; font-weight: 600; }
.sort select { height: 44px; border: 2px solid var(--line-strong); border-radius: 8px; padding: 0 12px; font-size: 15px; background: var(--white); }

.deal-row { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.deal-row[hidden] { display: none; }
.deal-row { position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.deal-row__link { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); cursor: pointer; }
.deal-row:hover { border-color: var(--ink); box-shadow: 0 6px 18px rgba(14, 14, 14, 0.08); }
.deal-row:hover .btn-deal { background: var(--yellow-hover); }
.deal-row:has(.btn-deal:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.deal-row__img { flex: none; width: 150px; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--ph); display: flex; align-items: center; justify-content: center; color: var(--ph-text); font-size: 13px; overflow: hidden; }
.deal-row__img img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
.deal-row__body { flex: 999 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.deal-row__shop { font-size: 14px; font-weight: 800; }
.deal-row__cat { font-weight: 400; color: var(--muted); }
.deal-row h3 { font-size: 18px; line-height: 1.3; }
.deal-row h3 a { text-decoration: none; }
.specs { display: flex; flex-wrap: wrap; gap: 6px; }
.spec { font-size: 13px; padding: 3px 8px; border-radius: 4px; background: var(--paper); color: var(--text); }
.deal-row__meta { font-size: 13px; color: var(--muted); }
.deal-row__buy { flex: 1 1 220px; display: flex; flex-direction: column; gap: 8px; }
.deal-row .badge-pct { font-size: 18px; padding: 2px 8px; }
.deal-row .price { font-size: 30px; }
.deal-row .btn-deal { height: 46px; }
.no-results { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }

.table-box { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 16px; }
.compare th { text-align: left; padding: 16px 20px; border-bottom: 2px solid var(--ink); }
.compare td { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.compare td:last-child { text-align: right; padding-top: 12px; padding-bottom: 12px; }
.compare .btn-deal { display: inline-flex; height: 44px; }

.prose { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; font-size: 17px; line-height: 1.65; color: var(--text); }
.prose h2 { font-weight: 900; font-stretch: 72%; font-size: 34px; line-height: 1.05; color: var(--ink); margin: 28px 0 10px; }
.prose h3 { font-size: 21px; color: var(--ink); margin: 22px 0 8px; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--ink); }
.prose ul, .prose ol { padding-left: 22px; }

.related { display: flex; flex-wrap: wrap; gap: 10px; }
.related a { padding: 10px 16px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 15px; }

/* ---------- Pagina / blog ---------- */
.content-narrow { max-width: 820px; }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line-strong); border-radius: 8px; background: var(--white); text-decoration: none; font-weight: 700; }
.pagination .current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.az-letter { font-weight: 900; font-stretch: 70%; font-size: 40px; margin: 28px 0 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); margin-top: 24px; }
.site-footer .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 32px; }
.site-footer .logo__main { color: var(--paper); font-size: 26px; }
.site-footer .logo__tag { color: var(--ink); font-size: 15px; }
.site-footer p { font-size: 14px; line-height: 1.6; margin: 14px 0 0; }
.footer-col h2 { color: var(--paper); font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-col a { color: var(--on-dark); }
.footer-col a:hover { color: var(--yellow); }
.site-footer .footer-legal { grid-column: 1 / -1; margin: 0; border-top: 1px solid #2E2C28; padding-top: 20px; padding-bottom: 32px; font-size: 13px; line-height: 1.6; }

/* ---------- Mobiele balk ---------- */
.mobile-bar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	:root { --gutter: 20px; }
	.hero .wrap { padding-top: 40px; padding-bottom: 48px; gap: 28px; }
	.hero--img::before { background-image: var(--hero-img-m, var(--hero-img)); background-position: center top; }
	.hero--img::after { background: linear-gradient(180deg, rgba(14,14,14,.6) 0%, rgba(14,14,14,.86) 45%, rgba(14,14,14,.97) 100%); }
	.hero__lead { font-size: 17px; margin-bottom: 22px; }
	.countdown-card { padding: 24px; }
	.countdown__num { font-size: 40px; }
	.alert-box { padding: 28px; }
}
@media (max-width: 767px) {
	:root { --gutter: 16px; }
	.topbar__date { display: none; }
	.topbar { font-size: 12px; }
	.site-header__row { gap: 12px; padding-top: 12px; padding-bottom: 12px; }
	.logo__main { font-size: 24px; }
	.logo__tag { font-size: 14px; }
	.site-header__row .btn-outline { display: none; }
	.menu-toggle {
		display: inline-flex; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent;
		align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
	}
	.site-header__row form.search { order: 3; flex-basis: 100%; }
	.main-nav { display: none; border-top: 1px solid var(--line); }
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; gap: 0; }
	.main-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
	.hero-search input, .hero-search button { height: 52px; }
	.hero-search button { padding: 0 16px; }
	.chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.chip { flex: none; white-space: nowrap; }
	.section { padding-top: 36px; }
	.deal-grid { grid-template-columns: 1fr; }
	.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.cat-card { padding: 16px 14px; min-height: 84px; }
	.cat-card__name { font-size: 22px; }
	.cat-card__sub { font-size: 12.5px; line-height: 1.35; }
	.cat-card { min-height: 104px; }
	.shop-grid { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 4px; }
	.shop-card { flex: none; width: 180px; padding: 14px; }
	.shop-card__btn { font-size: 13px; padding: 8px 8px; }
	.deal-row__img { width: 104px; height: 104px; }
	.prose { padding: 20px; }
	.mobile-bar {
		display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 50; background: var(--white);
		border-top: 1px solid var(--line); padding: 10px 16px;
	}
	.mobile-bar a { flex: 1; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-weight: 800; text-decoration: none; font-size: 15px; }
	.mobile-bar .is-dark { background: var(--ink); color: var(--white); }
	.mobile-bar .is-yellow { background: var(--yellow); color: var(--ink); }
}
/* Desktop: vijf kaartjes naast elkaar */
@media (min-width: 1100px) {
	.deal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
	.deal-grid .deal-card__face { padding: 14px 14px 0; gap: 10px; }
	.deal-grid .deal-card__top { padding-right: 24px; }
	.deal-grid .deal-card__shop { font-size: 14px; }
	.deal-grid .badge-pct { font-size: 17px; padding: 2px 7px; }
	.deal-grid .deal-card__cat { font-size: 12px; }
	.deal-grid .deal-card__title { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.deal-grid .deal-card__stub { margin: auto -14px 0; padding: 14px; gap: 8px; }
	.deal-grid .price { font-size: 28px; }
	.deal-grid .price-old { font-size: 14px; }
	.deal-grid .price-ref { font-size: 12px; padding: 6px 8px; }
	.deal-grid .deal-meta { font-size: 12px; flex-direction: column; gap: 2px; }
	.deal-grid .deal-card .btn-deal { height: 44px; padding: 0 8px; font-size: 14px; }
}
/* Tablet: drie of vier naast elkaar */
@media (min-width: 768px) and (max-width: 1099px) {
	.deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}

/* ---------- Zoeksuggesties ---------- */
form.search { position: relative; }
.hero-search .search-suggest { color: var(--ink); text-align: left; }
.search-suggest { position: absolute; z-index: 80; top: calc(100% + 8px); left: 0; right: 0; min-width: min(420px, 100vw - 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 14px 36px rgba(14, 14, 14, 0.2); padding: 8px; max-height: min(70vh, 580px); overflow: auto; }
.search-suggest[hidden] { display: none; }
.search-suggest__h { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; padding: 10px 10px 4px; }
.search-suggest__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.search-suggest__item:hover, .search-suggest__item.is-active, .search-suggest__chip.is-active, .search-suggest__all.is-active { background: var(--paper); }
.search-suggest__thumb { flex: none; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 800; }
.search-suggest__thumb img { width: 100%; height: 100%; object-fit: contain; }
.search-suggest__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.search-suggest__title { font-weight: 700; font-size: 15px; line-height: 1.25; }
.search-suggest__title--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-suggest__meta { font-size: 13px; opacity: 0.75; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-suggest .badge-pct { font-size: 15px; padding: 1px 6px; opacity: 1; }
.search-suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 8px; }
.search-suggest__chip { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none; }
.search-suggest__chip:hover { background: var(--paper); }
.search-suggest__all { display: block; margin-top: 6px; padding: 12px 10px; border-top: 1px solid var(--line); font-weight: 800; color: var(--ink); text-decoration: none; border-radius: 0 0 10px 10px; }
.search-suggest__all:hover { background: var(--paper); }
/* Laadstatus van de suggesties */
.search-suggest.is-dim .search-suggest__item, .search-suggest.is-dim .search-suggest__chips { opacity: 0.45; transition: opacity 0.15s; }
.search-suggest__status { display: flex; align-items: center; gap: 10px; padding: 10px 10px 6px; font-size: 14px; font-weight: 700; opacity: 0.75; }
.search-suggest__spinner { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--ink); animation: bfss-spin 0.7s linear infinite; }
.search-suggest__skel { pointer-events: none; }
.search-suggest__skel .search-suggest__thumb, .search-suggest__line { background: linear-gradient(90deg, var(--paper) 25%, var(--line) 50%, var(--paper) 75%); background-size: 200% 100%; animation: bfss-shimmer 1.2s ease-in-out infinite; border-color: transparent; }
.search-suggest__skel .search-suggest__text { flex: 1; gap: 8px; }
.search-suggest__line { display: block; height: 12px; border-radius: 6px; width: 78%; }
.search-suggest__line--s { width: 40%; }
@keyframes bfss-spin { to { transform: rotate(360deg); } }
@keyframes bfss-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .search-suggest__spinner { animation-duration: 2s; } .search-suggest__skel .search-suggest__thumb, .search-suggest__line { animation: none; } }
@media (max-width: 640px) { .search-suggest { min-width: 0; } }

/* Weergave-schakelaar: lijst of tegels op categorie- en winkelpagina's */
.section__tools { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.view-toggle { display: inline-flex; border: 2px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--white); }
.view-toggle button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.view-toggle button + button { border-left: 2px solid var(--line-strong); }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.view-toggle button:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.view-toggle button[aria-pressed="true"]:focus-visible { outline-color: var(--yellow); }
.deal-list { display: flex; flex-direction: column; gap: 14px; }
.results .deal-grid { display: none; }
.results[data-view="tiles"] .deal-grid { display: grid; }
.results[data-view="tiles"] .deal-list { display: none; }
.deal-card[hidden] { display: none; }
@media (min-width: 1100px) {
	.results .deal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.view-toggle button span { display: none; }
	.view-toggle button { padding: 0 12px; }
}

.jump--subs { margin: 18px 0 0; }
.jump--subs a:first-child { background: var(--white); color: inherit; border-color: var(--line-strong); }
.jump--subs a[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- Voorkeuren (wizard en "Voor jou") ---------- */
[data-prefs] [hidden], [data-foryou][hidden], [data-foryou] [hidden] { display: none !important; }
.prefs { background: var(--white); border-bottom: 1px solid var(--line); }
.prefs__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 14px 0; min-height: 76px; }
.prefs__bar-text { font-size: 16px; color: var(--text); }
.prefs__bar-text strong { color: var(--ink); font-weight: 800; margin-right: 6px; }
.prefs__tags { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; margin-left: 4px; }
.prefs__tag { text-decoration: none; padding: 3px 11px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-strong); font-size: 14px; font-weight: 700; color: var(--ink); }
.prefs__bar-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.prefs__btn { height: 46px; padding: 0 22px; font-size: 15px; }
.prefs__link { background: none; border: 0; padding: 10px 6px; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }
.prefs__wizard { position: relative; padding: 26px 0 30px; max-width: 1000px; }
.prefs__steps { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.prefs__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.prefs__step legend { font-weight: 900; font-stretch: 70%; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; padding: 0; margin-bottom: 6px; }
.prefs__hint { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.pref-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pref-chip { position: relative; display: inline-flex; }
.pref-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pref-chip span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--line-strong); background: var(--white); font-weight: 700; font-size: 15px; color: var(--ink); }
.pref-chip input:checked + span { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pref-chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.prefs__wizard input[type="text"] { width: 100%; max-width: 520px; height: 52px; padding: 0 16px; font: inherit; font-size: 17px; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--ink); }
.prefs__nav { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 24px; }
.prefs__err { margin: 14px 0 0; color: #9A1B1B; font-weight: 700; }
.prefs__note { margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.prefs-foryou { padding-top: 40px; }
.prefs-foryou[data-loading] { min-height: 620px; }
.prefs__notify { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 24px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 700; }
@media (max-width: 767px) {
	.prefs__bar { padding: 14px 0; }
	.prefs__bar-actions { width: 100%; }
	.prefs__bar-actions .prefs__btn { flex: 1; }
	.prefs-foryou[data-loading] { min-height: 420px; }
}

/* ---------- Slider "Voor jou" ---------- */
.slider-nav { display: flex; gap: 8px; }
.slider-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.slider-btn:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-btn:focus-visible, .deal-slider:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.deal-grid.deal-slider { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; padding: 12px 8px 30px; margin: -12px -8px -30px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.deal-slider > .deal-card { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) and (max-width: 1099px) { .deal-slider > .deal-card { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 1100px) { .deal-slider > .deal-card { flex-basis: calc((100% - 48px) / 4); } } /* 4 tegels in beeld */
@media (prefers-reduced-motion: reduce) { .deal-grid.deal-slider { scroll-behavior: auto; } }

a.prefs__tag:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
a.prefs__tag:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Categorieën: standaard 12, uitklap voor de rest */
.cat-wrap { min-width: 0; order: 1; }
.cat-layout .cat-wrap .cat-grid { order: 0; }
.cat-grid.is-collapsed .cat-card--extra { display: none; }
.cat-more { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.cat-more::before, .cat-more::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.cat-more[hidden] { display: none; }
.cat-card__name, .cat-card__sub { display: block; }
.cat-more .shop-more__btn[aria-expanded="true"] .shop-more__chev { transform: rotate(180deg); }

/* Categorie-iconen (rechtsboven in de kaart) */
.cat-card { position: relative; }
.cat-card__icon { position: absolute; top: 18px; right: 18px; display: block; line-height: 0; pointer-events: none; }
.cat-card__svg { display: block; width: 40px; height: 40px; color: var(--yellow); }
.cat-card__text { display: contents; }
.cat-card__icon + .cat-card__text .cat-card__name { padding-right: 52px; }
@media (max-width: 767px) {
	.cat-card__icon { top: 12px; right: 12px; }
	.cat-card__svg { width: 30px; height: 30px; }
	.cat-card__icon + .cat-card__text .cat-card__name { padding-right: 38px; }
}

/* Foto bij stap 1 van de wizard */
.prefs__photo { display: none; }
@media (min-width: 768px) {
	.prefs__step[data-step="1"] { padding-right: 300px; min-height: 250px; }
	.prefs__photo { display: block; position: absolute; top: 0; right: 0; width: 270px; height: auto; pointer-events: none; }
}
/* Mobiel: lange categorienamen mogen niet onder het icoon doorlopen */
@media (max-width: 767px) {
	.cat-card { padding: 14px 12px; }
	.cat-card__name { font-size: 18px; }
	.cat-card__icon + .cat-card__text .cat-card__name { padding-right: 34px; }
}

/* Iconen in de keuzechips van de wizard (stap 1) */
.pref-chip__icon { flex: none; width: 28px; height: 28px; margin: 0 10px 0 -6px; color: var(--ink); }
.pref-chip input:checked + span .pref-chip__icon { color: var(--white); }
@media (max-width: 767px) { .pref-chip__icon { width: 24px; height: 24px; margin-right: 8px; } }

/* Wizard: zwart vlak */
.prefs__wizard { max-width: none; margin: 24px 0; padding: 30px 28px 28px; background: var(--ink); color: var(--white); border-radius: var(--radius); }
.prefs__wizard .prefs__steps { color: var(--on-dark); }
.prefs__wizard .prefs__step legend { color: var(--white); }
.prefs__wizard .prefs__hint, .prefs__wizard .prefs__note { color: var(--on-dark); }
.prefs__wizard .pref-chip input:checked + span { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.prefs__wizard .pref-chip input:checked + span .pref-chip__icon { color: var(--ink); }
.prefs__wizard .pref-chip input:focus-visible + span { outline-color: var(--yellow); }
.prefs__wizard .prefs__btn { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.prefs__wizard .prefs__btn:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); }
.prefs__wizard .prefs__link { color: var(--white); }
.prefs__wizard .prefs__err { color: #FF9B9B; }
@media (max-width: 767px) { .prefs__wizard { margin: 14px 0; padding: 22px 18px; } }
@media (min-width: 768px) {
	.prefs__step[data-step="1"] { padding-right: 420px; min-height: 320px; }
	.prefs__photo { top: 50%; right: 36px; width: 360px; transform: translateY(-50%); }
}

/* Wizard open: lichtgrijze strook rondom het zwarte vlak */
.prefs.is-open { background: var(--line-strong); }

/* Keuzepillen in de wizard: witte rand, zwart vlak, wit icoon en witte tekst */
.prefs__wizard .pref-chip span { background: var(--ink); border-color: var(--white); color: var(--white); }
.prefs__wizard .pref-chip__icon { color: var(--white); }
.prefs__wizard .pref-chip span { border-color: rgba(255, 255, 255, 0.7); }
.prefs__wizard .pref-chip input:checked + span { border-color: var(--yellow); }

/* Geen marge buiten de grijze strook: de ruimte rond het zwarte vlak is padding van de strook zelf */
.prefs.is-open { padding: 24px 0; }
.prefs.is-open .prefs__wizard { margin: 0; }
@media (max-width: 767px) { .prefs.is-open { padding: 14px 0; } }

/* Schaduw (20%) boven en onder in de grijze strook: het vlak lijkt dieper te liggen */
.prefs.is-open { box-shadow: inset 0 12px 14px -8px rgba(0, 0, 0, 0.2), inset 0 -12px 14px -8px rgba(0, 0, 0, 0.2); }

/* Homepage: winkellogo's in grijstinten */
.home .shop-card__logo img { filter: grayscale(1); }

/* Wensenlijst */
[data-wishlist] [hidden] { display: none !important; }
.wish-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; }
.wish-btn--icon { position: absolute; z-index: 6; top: 66px; left: 24px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
.deal-grid .wish-btn--icon { top: 58px; left: 20px; }
.wish-btn--icon.is-on { background: var(--ink); color: var(--yellow); }
.wish-btn.is-on .wish-btn__icon { fill: currentColor; }
.wish-btn--icon:focus-visible, .wish-btn--text:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.wish-btn--text { position: relative; z-index: 3; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 14px; font-weight: 700; }
.wish-btn--text.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.wish-btn--text.is-on .wish-btn__icon { color: var(--yellow); }
.wish-link { display: inline-flex; align-items: center; gap: 8px; }
.wish-link__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; line-height: 22px; text-align: center; }
.wish-link:hover .wish-link__count { background: var(--yellow); color: var(--ink); }
@media (max-width: 767px) {
	.site-header__row .btn-outline.wish-link { display: inline-flex; padding: 0 12px; }
	.site-header__row .wish-link { margin-left: auto; }
	.site-header__row .menu-toggle { margin-left: 0; }
	.wish-link__text { display: none; }
}
.wish-page { padding-bottom: 40px; }
.wish-page__total { font-size: .55em; font-weight: 700; color: var(--muted); }
.wish-page__loading { color: var(--muted); }
.wish-page__empty { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); max-width: 560px; }
.wish-page__empty h2 { margin: 0 0 6px; }
.wish-page__alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 22px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.wish-page__alert-btn.is-on { background: var(--yellow); color: var(--ink); }
.wish-page__hint { margin: 0; font-size: 14px; color: var(--muted); flex: 1 1 280px; }
.wish-page__sub { margin: 36px 0 14px; }
.wish-page__clear { margin-top: 28px; }
.wish-item { position: relative; display: flex; flex-direction: column; min-width: 0; }
.wish-item > .deal-card { flex: 1; }
.wish-item.is-expired .deal-card { opacity: .55; }
.wish-note { margin: 0 0 8px; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; background: var(--paper); color: var(--ink); }
.wish-note--drop { background: var(--yellow); }
.wish-note--up, .wish-note--gone { background: var(--paper); color: var(--muted); }
.wish-gone-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wish-gone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }

/* Foto in elke stap van de wizard */
@media (min-width: 768px) {
	.prefs__step { padding-right: 420px; min-height: 320px; }
}

/* Dealknop: meer ruimte rondom de tekst en groeit mee bij meerdere regels */
.btn-deal { height: auto; min-height: 52px; padding: 14px 24px; line-height: 1.25; }
.deal-row .btn-deal { height: auto; min-height: 50px; }
.compare .btn-deal { height: auto; min-height: 48px; }
.deal-grid .deal-card .btn-deal { height: auto; min-height: 52px; padding: 14px 22px; }
.btn-deal > span[aria-hidden="true"] { flex: none; }

/* Uitklapmenu Categorieën (hoofdmenu, alleen desktop) */
.main-nav { position: relative; }
.main-nav li.has-mega { position: static; }
.main-nav .mega { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--ink); color: var(--white); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 40px rgba(0,0,0,.28); padding: 28px 32px 32px; }
.main-nav li.has-mega:hover > .mega, .main-nav li.has-mega:focus-within > .mega { display: block; }
.main-nav li.has-mega.is-closed > .mega { display: none; }
.main-nav .mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 32px; }
.main-nav .mega a { display: block; padding: 0; border-bottom: 0; color: var(--white); text-decoration: none; }
.main-nav .mega a:hover, .main-nav .mega a:focus-visible { color: var(--yellow); border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
.main-nav .mega__cat { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; line-height: 1.25; padding: 2px 0 6px; }
.main-nav .mega__icon { flex: none; width: 24px; height: 24px; color: var(--yellow); }
.main-nav .mega ul.mega__subs { display: block; list-style: none; margin: 0; padding: 0 0 0 34px; font-weight: 400; font-size: 14px; }
.main-nav .mega__subs li { margin: 0; }
.main-nav .mega__subs a { padding: 3px 0; font-weight: 400; color: var(--on-dark); }
.main-nav li.has-mega > a { position: relative; }
@media (max-width: 1099px) { .main-nav .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .main-nav .mega, .main-nav li.has-mega:hover > .mega, .main-nav li.has-mega:focus-within > .mega { display: none; } }

/* Deal-alertblok met winkelstraat rechts (Voorstel A): foto loopt over in het geel */
.alert-box--photo { position: relative; overflow: hidden; }
.alert-box--photo::before, .alert-box--photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 55%); pointer-events: none; }
.alert-box--photo::before { background: url(assets/img/winkelstraat.webp) -30px -575px / 760px auto no-repeat; }
.alert-box--photo::after { background: linear-gradient(to right, var(--yellow) 0%, rgba(255,214,10,.55) 22%, rgba(255,214,10,0) 55%); }
.alert-box--photo > * { position: relative; z-index: 1; }
.alert-box--photo .alert-box__text { flex: 0 1 560px; }
.alert-box--photo .alert-form { flex: 0 1 360px; margin-left: auto; padding: 20px; background: var(--white); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
@media (max-width: 1199px) {
	.alert-box--photo { padding-bottom: 268px; }
	.alert-box--photo::before, .alert-box--photo::after { top: auto; left: 0; width: auto; height: 240px; }
	.alert-box--photo::before { background-size: 100% auto; background-position: 0 calc(-0.62 * (100vw - 32px)); }
	.alert-box--photo::after { background: linear-gradient(to bottom, var(--yellow) 0%, rgba(255,214,10,.45) 55%, rgba(255,214,10,0) 100%); }
	.alert-box--photo .alert-form { margin-left: 0; flex-basis: 100%; }
	.alert-box--photo .alert-box__text { flex-basis: 100%; }
}

/* "Aanbiedingen speciaal voor jou": de dame staat boven de tiles en wordt onderaan door de tiles afgedekt */
.prefs-foryou .section__head { position: relative; min-height: 150px; }
.prefs-foryou .foryou__title { position: relative; z-index: 2; max-width: 62%; }
.prefs-foryou .foryou__photo { position: absolute; z-index: 95; right: 0; bottom: -26px; height: 170px; width: auto; max-width: none; pointer-events: none; }
.prefs-foryou .slider-nav { position: relative; z-index: 6; }
.prefs-foryou .deal-grid.deal-slider { position: relative; z-index: 1; }
@media (min-width: 768px) {
	.prefs-foryou .section__head { min-height: 163px; }
	.prefs-foryou .foryou__title { max-width: calc(100% - 420px); }
	.prefs-foryou .foryou__photo { right: 130px; height: 250px; }
}

@media (max-width: 767px) { .prefs-foryou .slider-nav { display: none; } .prefs-foryou .foryou__photo { right: -4px; } }

/* Sticky header: desktop compact na scrollen, mobiel smal (logo + hamburger, zoekbalk eronder) */
html { scroll-padding-top: 150px; }
.site-header { position: sticky; top: 0; z-index: 100; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header__row { transition: padding .18s ease; }
.site-header.is-compact .site-header__row { padding-top: 8px; padding-bottom: 8px; }
.main-nav a.main-nav__wish { display: none; }
@media (max-width: 767px) {
	html { scroll-padding-top: 118px; }
	.site-header__row { gap: 8px 12px; padding-top: 8px; padding-bottom: 10px; }
	.site-header__row .btn-outline.wish-link { display: none; }
	.site-header .logo__main { font-size: 22px; }
	.site-header .logo__tag { font-size: 13px; }
	.site-header .logo img { max-height: 32px; }
	.menu-toggle { width: 40px; height: 40px; }
	.site-header__row form.search input[type="search"], .site-header__row form.search button { height: 40px; }
	.main-nav.is-open { max-height: calc(100vh - 130px); overflow-y: auto; }
	.main-nav a.main-nav__wish { display: block; padding: 14px 0; font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--line); }
}

/* Slider "Aanbiedingen speciaal voor jou": vloeiender, slepen, vierkantjes als voortgang, wisselen tussen slider en overzicht */
.deal-grid.deal-slider { scroll-behavior: smooth; scrollbar-width: none; cursor: grab; }
.deal-grid.deal-slider::-webkit-scrollbar { display: none; }
.deal-grid.deal-slider.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.deal-grid.deal-slider.is-dragging a, .deal-grid.deal-slider.is-dragging button { pointer-events: none; }
.slider-tools { display: flex; align-items: center; gap: 8px; }
.slider-btn { transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.slider-view .slider-view__row { display: none; }
.slider-view[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.slider-view[aria-pressed="true"] .slider-view__grid { display: none; }
.slider-view[aria-pressed="true"] .slider-view__row { display: block; }
.slider-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; }
.slider-dot { width: 12px; height: 12px; padding: 0; border: 2px solid var(--ink); border-radius: 2px; background: transparent; opacity: .35; cursor: pointer; transition: opacity .2s ease, background-color .2s ease, transform .2s ease; }
.slider-dot:hover { opacity: .7; }
.slider-dot.is-active { background: var(--ink); opacity: 1; transform: scale(1.2); }
.slider-dot:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Overzicht: alle deals onder elkaar in een raster */
.deal-grid.deal-slider.is-overview { display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; cursor: auto; padding-bottom: 30px; }
.deal-grid.deal-slider.is-overview > .deal-card { flex: none; width: auto; }
@media (min-width: 768px) { .deal-grid.deal-slider.is-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .deal-grid.deal-slider.is-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.prefs-foryou .slider-tools { position: relative; z-index: 6; }
@media (max-width: 767px) {
	.prefs-foryou .slider-tools { order: -1; flex-basis: 100%; }
	.slider-view { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .deal-grid.deal-slider { scroll-behavior: auto; } .slider-dot { transition: none; } }

/* Header: knoppen geel met zwarte tekst zonder rand; header 10px lager */
.site-header__row .btn-outline { background: var(--yellow); color: var(--ink); border-color: transparent; }
.site-header__row .btn-outline:hover, .site-header__row .btn-outline:focus-visible { background: var(--yellow-hover); color: var(--ink); }
.site-header__row .wish-link:hover .wish-link__count { background: var(--ink); color: var(--yellow); }
.site-header__row { padding-top: 13px; padding-bottom: 13px; }
.site-header.is-compact .site-header__row { padding-top: 6px; padding-bottom: 6px; }
@media (max-width: 767px) { .site-header__row { padding-top: 8px; padding-bottom: 10px; } }

/* Categoriepagina: "Houd me op de hoogte" onder de foto */
.page-head__side { min-width: 0; }
.page-head__side .follow-wrap { margin: 16px 0 0; display: flex; justify-content: center; }

/* "Populaire winkels": de dame met het hartje staat boven de winkeltegels, onderaan afgedekt door de tegels */
.shops-pop .section__head { position: relative; min-height: 150px; }
.shops-pop .section__title, .shops-pop .section__link { position: relative; z-index: 2; }
.shops-pop .shops-pop__photo { position: absolute; z-index: 0; right: 0; bottom: -26px; height: 170px; width: auto; max-width: none; pointer-events: none; }
.shops-pop .shop-grid { position: relative; z-index: 1; }
@media (min-width: 768px) {
	.shops-pop .section__head { min-height: 163px; }
	.shops-pop .shops-pop__photo { right: 215px; height: 250px; }
}
@media (max-width: 767px) {
	.shops-pop .section__title { max-width: 46%; }
	.shops-pop .shops-pop__photo { right: -4px; bottom: 34px; }
}



/* Categorieën-megamenu in de stijl van "Shop per categorie" (tegels + foto) */
.main-nav .mega { background: var(--paper); color: var(--ink); padding: 24px; max-height: calc(100vh - 150px); overflow-y: auto; }
.main-nav .mega__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.main-nav .mega__cats { min-width: 0; }
.main-nav .mega .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.main-nav .mega a.cat-card { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 18px 18px 16px; min-height: 104px; border-bottom: 0; color: var(--paper); text-decoration: none; }
.main-nav .mega a.cat-card:hover, .main-nav .mega a.cat-card:focus-visible { color: var(--paper); text-decoration: none; border-bottom: 0; outline: 3px solid var(--yellow); outline-offset: -3px; }
.main-nav .mega .cat-card__name { font-size: 24px; }
.main-nav .mega .cat-card__sub { font-size: 13px; line-height: 1.35; color: var(--on-dark); }
.main-nav .mega .cat-card__svg { width: 34px; height: 34px; }
.main-nav .mega .cat-card__icon { top: 14px; right: 14px; }
.main-nav .mega .cat-card__icon + .cat-card__text .cat-card__name { padding-right: 44px; }
.main-nav .mega .cat-grid.is-collapsed .cat-card--extra { display: none; }
.main-nav .mega__more { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.main-nav .mega__more::before, .main-nav .mega__more::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.main-nav .mega__more .shop-more__btn[aria-expanded="true"] .shop-more__chev { transform: rotate(180deg); }
.main-nav .mega .cat-figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); min-height: 260px; }
.main-nav .mega .cat-figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 100%; }
@media (max-width: 1099px) { .main-nav .mega__layout { grid-template-columns: minmax(0, 1fr); } .main-nav .mega .cat-figure { display: none; } }
@media (max-width: 1199px) { .main-nav .mega .cat-card__name { font-size: 21px; } }


/* Winkellogo's op de categoriepagina: klein en grijs, op één regel met "Houd me op de hoogte" */
.page-head__brands { min-width: 0; margin-top: 18px; }
.brand-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.brand-logos__item { display: inline-flex; align-items: center; height: 26px; }
.brand-logos__item img { display: block; height: 100%; width: auto; max-width: 90px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .6; }
.brand-logos__item:hover img, .brand-logos__item:focus-visible img { opacity: 1; }
.brand-logos__item.is-fav img { opacity: .85; }
.brand-logos__item[hidden] { display: none; }
.brand-logos__more { height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.brand-logos__more:hover, .brand-logos__more:focus-visible { border-color: var(--ink); }
.brand-logos__more[hidden] { display: none; }
@media (min-width: 900px) {
	.page-head.has-img.has-brands { grid-template-areas: "text img" "brands follow"; gap: 20px 40px; }
	.page-head.has-brands .page-head__text { grid-area: text; }
	.page-head.has-brands .page-head__side { display: contents; }
	.page-head.has-brands .page-head__img { grid-area: img; }
	.page-head.has-brands .page-head__side .follow-wrap { grid-area: follow; margin: 0; }
	.page-head.has-brands .page-head__brands { grid-area: brands; margin-top: 0; align-self: center; }
}

/* Grijze logo's krijgen bij hover (of toetsenbordfocus) hun eigen kleuren */
.home .shop-card__logo img, .brand-logos__item img { transition: filter .2s, opacity .2s; }
.home .shop-card:hover .shop-card__logo img, .home .shop-card:focus-within .shop-card__logo img { filter: none; }
.brand-logos__item:hover img, .brand-logos__item:focus-visible img { filter: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home .shop-card__logo img, .brand-logos__item img { transition: none; } }

/* Winkelpagina: logo rechts naast de kop */
.page-head__logo { margin: 24px 0 0; padding: 28px; background: #fff; border-radius: 20px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; max-width: 280px; aspect-ratio: 16 / 10; }
.page-head__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (min-width: 900px) {
	.page-head.has-logo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 40px; align-items: center; }
	.page-head.has-logo .page-head__logo { margin: 0; max-width: none; width: 100%; justify-self: end; }
	.page-head.has-logo:not(.has-img) { grid-template-areas: "text logo" "brands brands"; }
	.page-head.has-logo:not(.has-img) .page-head__logo { grid-area: logo; }
	.page-head.has-logo:not(.has-img) .page-head__brands { grid-area: brands; margin-top: 0; }
}

/* Voorkeuren: extra winkels achter een knop */
.pref-chip[hidden] { display: none; }
.prefs__more { margin: 14px 0 0; }


/* Merken */
.deal-brand { margin: -8px 0 16px; font-size: 15px; color: var(--muted, #555); }
.deal-brand a { font-weight: 700; }
.brand-az { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; }
.brand-az a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line, #e5e5e5); text-decoration: none; font-weight: 700; }
.brand-az a:hover, .brand-az a:focus-visible { text-decoration: underline; }
.brand-az__n { font-weight: 400; color: var(--muted, #555); font-variant-numeric: tabular-nums; }

/* Merkfilter */
.filters__more { margin-top: 6px; }
.filters__more summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.filters__more[open] summary { margin-bottom: 4px; }
.filters__more > label { margin-top: 10px; }

/* Merkenpagina: logo's wisselen op de tas */
.page-head__img--bag svg { display: block; width: 100%; height: auto; max-width: 440px; margin: 0 auto; overflow: visible; }
.page-head__img--bag .bag-logo { opacity: 0; animation: bag-logo-fade calc(var(--bag-n, 6) * 3s) infinite; filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.page-head__img--bag .bag-logo:first-of-type { opacity: 1; }
@keyframes bag-logo-fade { 0% { opacity: 0; } 4% { opacity: 1; } 15% { opacity: 1; } 19% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .page-head__img--bag .bag-logo { animation: none; } .page-head__img--bag .bag-logo:not(:first-of-type) { display: none; } }
@media (min-width: 900px) { .page-head__img--bag svg { max-width: 100%; } }
.page-head__img--bag.is-static .bag-logo { animation: none; opacity: 1; }
.filters__form { display: flex; flex-direction: column; gap: 22px; }

/* Voorkeurspillen: verwijderknop (x) per pil en een plus achter de pillen */
.prefs__tag-wrap { display: inline-flex; align-items: stretch; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-strong); overflow: hidden; }
.prefs__tag-wrap .prefs__tag { background: transparent; border: 0; padding: 3px 4px 3px 11px; border-radius: 0; }
.prefs__tag-wrap a.prefs__tag:hover { background: transparent; color: var(--ink); text-decoration: underline; }
.prefs__tag-x { appearance: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; line-height: 1; padding: 0 9px 2px 5px; cursor: pointer; }
.prefs__tag-x:hover { background: var(--ink); color: var(--white); }
.prefs__tag-x:focus-visible, .prefs__tag-add:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.prefs__tag-add { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0 0 2px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.prefs__tag-add:hover { background: var(--white); color: var(--ink); }

/* Favoriet en Melding: onder elkaar rechts, vast aan de bovenrand van het gele blok (groeit het kaartje, dan blijven ze aan het gele blok hangen) */
.deal-card__tools { position: absolute; z-index: 6; right: 18px; bottom: calc(100% + 12px); display: flex; flex-direction: column; gap: 10px; }
.deal-grid .deal-card__tools { right: 14px; bottom: calc(100% + 10px); gap: 8px; }
.deal-card .deal-card__tools .wish-btn--icon { position: static; top: auto; left: auto; }
.deal-card .deal-card__tools .deal-card__follow { position: static; top: auto; right: auto; }
/* Klikvlak: de link ligt ónder het kaartje; het kaartje laat klikken door (pointer-events: none) naar die link, behalve op knoppen en links (favoriet, melding, 18+, winkelknop). */
.deal-card__face { z-index: 2; pointer-events: none; }
.deal-card__face a, .deal-card__face button, .deal-card__tools { pointer-events: auto; }
.deal-card__cat, .deal-card__title { padding-right: 50px; }
.deal-card__title { min-height: 2.6em; }

/* 18+ afbeeldingen (Erotiek): grijs vlak met "18+" en een knop; de foto wordt pas na de klik geladen */
.is-adult { position: relative; flex-direction: column; gap: 10px; }
.adult-mask__badge { font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #706d7c; }
.adult-mask__btn { position: relative; z-index: 6; display: inline-flex; align-items: center; justify-content: center; gap: 6px; max-width: 90%; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
.adult-mask__btn svg { flex: none; }
.adult-mask__btn:hover { background: var(--ink); color: var(--white); }
.adult-mask__btn:focus-visible, .adult-mask__hide:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.is-adult.is-revealed { background: var(--white); }
.adult-mask__hide { position: absolute; z-index: 6; top: 8px; left: 8px; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(14, 14, 14, 0.78); color: var(--white); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.deal-row__img.is-adult .adult-mask__badge { font-size: 34px; }
.deal-row__img.is-adult .adult-mask__btn { font-size: 12px; padding: 6px 10px; }
.deal-row__img.is-adult { gap: 6px; }

/* Voorkeurenbalk blijft onder de sticky header hangen (alleen als de wizard dicht is; op telefoons niet, daar is de header al hoog) */
@media (min-width: 768px) {
	.prefs:not(.is-open) { position: sticky; top: var(--hdr-h, 0px); z-index: 90; }
	.admin-bar .prefs:not(.is-open) { top: calc(var(--hdr-h, 0px) + 32px); }
}

/* Soort product (schoenen, sokken, kleding) op merkpagina's zoals Nike en Adidas */
.type-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.type-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.type-tab:hover { border-color: var(--ink); }
.type-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.type-tab.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.type-tab__n { font-weight: 600; font-size: 13px; opacity: .65; }
@media (max-width: 767px) { .type-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .type-tab { flex: none; white-space: nowrap; } }

/* Tweede rij pills: doelgroep (dames/heren/kinderen) */
.type-tabs:has(+ .type-tabs--aud) { margin-bottom: 10px; }

/* Voorkeurenwizard: merkenstap met zoekveld */
.prefs__wizard .prefs__search { display: block; width: 100%; max-width: 520px; height: 52px; padding: 0 16px; margin: 0 0 14px; font: inherit; font-size: 17px; border: 2px solid var(--line-strong); border-radius: 10px; background: var(--white); color: var(--ink); }
.pref-chip[data-bextra][hidden], .pref-chip[data-hide][hidden] { display: none; }

/* Link tussen winkelpagina en merkpagina met dezelfde naam */
.twin-link { margin: 10px 0 0; font-size: 15px; }
.twin-link a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

/* Wizard: tussentijds afronden (wit met zwarte letters) */
.prefs__wizard .btn-dark.prefs__btn--finish { background: var(--white); border-color: var(--white); color: var(--ink); }
.prefs__wizard .btn-dark.prefs__btn--finish:hover { background: #E9E9E9; border-color: #E9E9E9; }
.prefs__btn--finish[hidden] { display: none; }

/* Model-foto schuift achter de vastgeplakte voorkeurenbalk langs zodra er gescrold wordt (balk z-index 90) */
.prefs-foryou.is-bar-stuck .foryou__photo { z-index: 80; }

/* ---------- Meer info: knop naast de prijs + popup ---------- */
.btn-info { appearance: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 12px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; }
.btn-info:hover { background: var(--ink); color: var(--yellow); }
.btn-info:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn-info svg { flex: none; }
.btn-info__short { display: none; }
.deal-card .btn-info { padding: 6px 11px; }
.deal-card .btn-info__full { display: none; }
.deal-card .btn-info__short { display: inline; }
.deal-card__face .btn-info { position: relative; z-index: 6; }
.deal-row__buy .btn-info { align-self: flex-start; position: relative; z-index: 3; margin: 0 0 8px; background: var(--white); }
.deal-row__buy .btn-info:hover { background: var(--ink); }
.info-dlg { width: min(880px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 24px 70px rgba(14, 14, 14, .45); overflow: hidden; }
.info-dlg::backdrop { background: rgba(14, 14, 14, .62); }
.info-dlg__close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.info-dlg__close:hover { background: var(--yellow); color: var(--ink); }
.info-dlg__close:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.info-dlg__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); }
.info-dlg__media { background: #fff; border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; min-height: 260px; }
.info-dlg__big { width: 100%; height: min(60vh, 460px); object-fit: contain; display: block; }
.info-dlg__thumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.info-dlg__thumb { appearance: none; width: 54px; height: 54px; padding: 2px; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.info-dlg__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.info-dlg__thumb[aria-current="true"] { border-color: var(--ink); }
.info-dlg__thumb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.info-dlg__text { padding: 28px 28px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.info-dlg__shop { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; padding-right: 44px; }
.info-dlg__title { margin: 0; font-size: 22px; line-height: 1.25; }
.info-dlg__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.info-dlg__price .price { font-size: 34px; }
.info-dlg__price .price-old { text-decoration: line-through; opacity: .7; }
.info-dlg__desc { font-size: 15px; line-height: 1.55; }
.info-dlg__desc p { margin: 0 0 10px; }
.info-dlg__text .btn-deal { margin-top: auto; flex: none; }
.info-dlg__note { font-size: 12px; opacity: .65; margin: 0; }
@media (max-width: 720px) {
	.info-dlg { width: calc(100vw - 16px); }
	.info-dlg__body { grid-template-columns: 1fr; overflow-y: auto; }
	.info-dlg__media { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px; min-height: 0; }
	.info-dlg__big { height: min(36vh, 280px); }
	.info-dlg__text { padding: 18px 18px 20px; overflow: visible; }
	.info-dlg__title { font-size: 19px; }
}
html.has-info-dlg { overflow: hidden; }

/* Tweede foto bij muis-over (alleen apparaten met een muis; de foto wordt pas bij de eerste hover geladen) */
.deal-card__img .deal-card__alt { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease-in-out; pointer-events: none; }
.deal-card:hover .deal-card__alt.is-ready { opacity: 1; transition-delay: .35s; } /* kleine vertraging, zodat langsdraaien van de muis niet meteen wisselt; terug naar de eerste foto zonder vertraging */
@media (prefers-reduced-motion: reduce) { .deal-card__img .deal-card__alt, .deal-card:hover .deal-card__alt.is-ready { transition: none; } }

/* Winkelnaam op de dealkaart: link naar de winkelpagina (boven het klikvlak van de kaart) */
.deal-card__shoplink { position: relative; z-index: 6; color: inherit; text-decoration: none; }
.deal-card__shoplink:hover { text-decoration: underline; text-underline-offset: 3px; }
.deal-card__shoplink:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 3px; }

/* Topdeals van vandaag: de dame staat in de lege plek naast de titel, daaronder de slider met overzichtsknop (zoals "Voor jou") */
.topdeals [hidden] { display: none !important; }
.topdeals .section__head { position: relative; min-height: 150px; }
.topdeals .topdeals__title { position: relative; z-index: 2; max-width: 62%; }
.topdeals .topdeals__photo { position: absolute; z-index: 0; right: 0; bottom: -20px; height: 170px; width: auto; max-width: none; pointer-events: none; }
.topdeals .topdeals__side { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.topdeals .tabs { position: relative; z-index: 2; }
.topdeals .deal-grid { position: relative; z-index: 1; }
@media (min-width: 768px) {
	.topdeals .section__head { min-height: 163px; }
	.topdeals .topdeals__title { max-width: calc(100% - 520px); }
	.topdeals .topdeals__photo { right: 215px; height: 250px; }
}
@media (max-width: 767px) {
	.topdeals .topdeals__side { flex-basis: 100%; order: -1; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
	.topdeals .slider-nav { display: none; }
	.topdeals .topdeals__photo { right: -4px; }
}

/* Samengevoegde maten: label op de tegel, "vanaf" bij de prijs en de maten in de Info-popup */
.deal-card__sizes { color: var(--ink); }
.price-from { font-size: 14px; font-weight: 700; color: var(--muted); align-self: baseline; }
.info-dlg__sizes { margin: 0 0 14px; }
.info-dlg__sizes-label { display: block; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.info-dlg__sizelist { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.info-dlg__sizelist li { min-width: 38px; padding: 6px 12px; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--white); font-weight: 700; font-size: 14px; text-align: center; }

/* Populaire winkels: slider met overzichtsknop, zelfde werking als de deals-rijen erboven */
.shops-pop [hidden] { display: none !important; }
.shops-pop .shops-pop__side { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.shop-grid.shop-slider { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; padding: 12px 8px 30px; margin: -12px -8px -30px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; cursor: grab; }
.shop-grid.shop-slider::-webkit-scrollbar { display: none; }
.shop-grid.shop-slider.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.shop-grid.shop-slider.is-dragging a, .shop-grid.shop-slider.is-dragging button { pointer-events: none; }
.shop-grid.shop-slider > .shop-card { flex: 0 0 min(230px, 64%); width: auto; min-width: 0; scroll-snap-align: start; }
@media (min-width: 768px) and (max-width: 1099px) { .shop-grid.shop-slider > .shop-card { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 1100px) { .shop-grid.shop-slider > .shop-card { flex-basis: calc((100% - 48px) / 4); } } /* 4 winkels in beeld */
.shop-grid.shop-slider.is-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; cursor: auto; padding-bottom: 30px; }
.shop-grid.shop-slider.is-overview > .shop-card { flex: none; width: auto; }
@media (min-width: 768px) { .shop-grid.shop-slider.is-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .shop-grid.shop-slider.is-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.shops-pop .shops-pop__side { flex-basis: 100%; order: -1; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
	.shops-pop .slider-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shop-grid.shop-slider { scroll-behavior: auto; } }

/* Mobiel: de rij met link en knoppen staat bovenaan, de titel eronder naast de foto, zodat de foto niets afdekt */
@media (max-width: 767px) {
	.topdeals .section__head, .shops-pop .section__head { min-height: 250px; align-content: space-between; }
	.topdeals .topdeals__title { max-width: 54%; }
}
/* 4-11: Topdeals op mobiel: de dame boven de kop in plaats van ernaast (rij met link en knoppen blijft bovenaan) */
@media (max-width: 767px) {
	.topdeals .section__head { min-height: 0; align-content: normal; row-gap: 8px; }
	.topdeals .topdeals__photo { position: static; flex: none; height: 200px; width: auto; margin: 0 auto; }
	.topdeals .topdeals__title { flex-basis: 100%; max-width: none; }
}
/* 4-11: Populaire winkels op mobiel: ook de dame boven de kop */
@media (max-width: 767px) {
	.shops-pop .section__head { min-height: 0; align-content: normal; row-gap: 8px; }
	.shops-pop .shops-pop__photo { position: static; flex: none; height: 200px; width: auto; margin: 0 auto; }
	.shops-pop .section__title { flex-basis: 100%; max-width: none; }
}
/* 4-11: Voor jou op mobiel: ook de dame boven de kop */
@media (max-width: 767px) {
	.prefs-foryou .section__head { min-height: 0; row-gap: 8px; }
	.prefs-foryou .foryou__photo { position: static; flex: none; height: 200px; width: auto; margin: 0 auto; }
	.prefs-foryou .foryou__title { flex-basis: 100%; max-width: none; }
}
/* 4-11: Kortingskalender op mobiel compacter: datum links, naam en uitleg rechts */
@media (max-width: 767px) {
	.cal-grid { gap: 10px; }
	.cal-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px 16px; }
	.cal-item__date { grid-row: 1 / span 2; font-size: 30px; white-space: nowrap; }
	.cal-item__name { margin-top: 0; font-size: 16px; }
	.cal-item__note { margin-top: 2px; font-size: 13px; line-height: 1.35; }
}

/* Meer info: paneel dat van links inschuift (in plaats van een popup in het midden) */
.info-dlg { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(560px, 92vw); max-width: none; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: 8px 0 40px rgba(14, 14, 14, .35); }
.info-dlg[open] { animation: info-slide-in .3s cubic-bezier(.2, .8, .2, 1); }
.info-dlg[open]::backdrop { animation: info-fade-in .3s ease-out; }
.info-dlg.is-closing { animation: info-slide-out .22s ease-in forwards; }
.info-dlg.is-closing::backdrop { animation: info-fade-out .22s ease-in forwards; }
.info-dlg__body { display: block; height: 100%; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
.info-dlg__media { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding: 20px; }
.info-dlg__big { height: min(42vh, 380px); }
.info-dlg__text { overflow: visible; padding: 22px 24px 28px; }
@keyframes info-slide-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes info-slide-out { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes info-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes info-fade-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 720px) {
	.info-dlg { width: 92vw; }
	.info-dlg__big { height: min(34vh, 300px); }
	.info-dlg__media { padding: 14px; }
	.info-dlg__text { padding: 18px 18px 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.info-dlg[open], .info-dlg.is-closing, .info-dlg[open]::backdrop, .info-dlg.is-closing::backdrop { animation: none; }
}

/* Varianten in het Info-paneel zijn links naar de deal bij de winkel */
.info-dlg__sizelist li { padding: 0; border: 0; background: none; min-width: 0; }
.info-dlg__sizelink { display: block; min-width: 38px; padding: 6px 12px; border: 2px solid var(--line-strong); border-radius: 0; background: var(--white); color: var(--ink); font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; }
.info-dlg__sizelink:hover, .info-dlg__sizelink:focus-visible { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.info-dlg__sizelink:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Variant kiezen: knop zet de link achter "Naar deal" om */
.info-dlg__sizelink { font-family: inherit; line-height: 1.2; cursor: pointer; }
.info-dlg__sizelink[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.info-dlg__sizelink[aria-pressed="true"]:hover { background: var(--ink); color: var(--white); }

/* Hoogte van de kop naast de foto op desktop (Topdeals en Populaire winkels) */
@media (min-width: 768px) {
	.topdeals .section__head { min-height: 120px; }
	.shops-pop .section__head { min-height: 135px; }
}

/* Kleur- en maatkeuze in het Info-paneel: rechthoekjes in een raster */
.info-dlg__sizes .info-dlg__sizes-label { margin-top: 10px; }
.info-dlg__sizes .info-dlg__sizes-label:first-child { margin-top: 0; }
.info-dlg__sizelist--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.info-dlg__sizelist--grid .info-dlg__sizelink { width: 100%; white-space: nowrap; }

/* Strik op de hoek van de knop "Naar deal" in het Info-paneel; het lint loopt over de boven- en rechterrand */
.info-dlg .btn-deal { position: relative; min-height: 76px; padding-right: 128px; overflow: visible; }
.info-dlg .btn-deal::after { content: ""; position: absolute; top: -3px; right: -2px; height: 95%; aspect-ratio: 300 / 197; background: url("assets/img/strik.webp") no-repeat right top / 100% 100%; pointer-events: none; }
@media (max-width: 480px) {
	.info-dlg .btn-deal { min-height: 64px; padding-right: 104px; }
}

/* Gele strik op de hoek van de zwarte knop op de dealtegels; bij muis-over (knop wordt wit) wordt de strik zwart */
.deal-card .deal-card__stub .btn-deal { position: relative; padding-right: 66px; }
.deal-card .deal-card__stub .btn-deal::after { content: ""; position: absolute; top: -3px; right: -2px; height: 95%; aspect-ratio: 300 / 197; background: url("assets/img/strik-geel-3.webp") no-repeat right top / 100% 100%; pointer-events: none; } /* gele strik, ook bij muis-over */

/* Hartje en belletje linksboven op de foto in het Info-paneel */
.info-dlg__tools { position: absolute; z-index: 3; top: 14px; left: 14px; display: flex; gap: 10px; }
.info-dlg__tools .wish-btn--icon, .info-dlg__tools .deal-card__follow { position: static; top: auto; left: auto; right: auto; }
.info-dlg__tools .wish-btn--icon, .info-dlg__tools .follow-btn--icon { width: 40px; height: 40px; }
.info-dlg__tools .follow-btn--icon { background: var(--white); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); border-color: transparent; }
.info-dlg__tools .follow-btn--icon.is-on { background: var(--ink); color: var(--yellow); }

/* 18+-masker in het Info-paneel */
.info-dlg__media--adult { min-height: 260px; background: #f1f0f4; justify-content: center; }
/* Zonder foto staan hartje en belletje boven de tekst, niet over de winkelnaam */
.info-dlg.has-tools-nomedia .info-dlg__text { padding-top: 72px; }
/* Kleur- en maatknoppen groeien mee met de tekst ("Lila - Zwart" past dan altijd) */
.info-dlg__sizelist--grid { display: flex; flex-wrap: wrap; }
.info-dlg__sizelist--grid .info-dlg__sizelink { width: auto; min-width: 72px; }

/* Winkel en categorie bovenaan het Info-paneel zijn links */
.info-dlg__shop a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.info-dlg__shop a:hover { text-decoration-thickness: 2px; color: var(--ink); }

/* Info-paneel: 25px extra ruimte links in de tekst */
.info-dlg__text { padding-left: 49px; }
@media (max-width: 767px) { .info-dlg__text { padding-left: 43px; } }

/* Info-paneel: rustige scrollbalk (witte baan, zwart blokje en zwarte pijltjes) */
.info-dlg__body::-webkit-scrollbar { width: 12px; }
.info-dlg__body::-webkit-scrollbar-track { background: #fff; border-left: 1px solid var(--line); }
.info-dlg__body::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid #fff; border-radius: 0; min-height: 40px; }
.info-dlg__body::-webkit-scrollbar-thumb:hover { background: #333; }
.info-dlg__body::-webkit-scrollbar-button:single-button { display: block; height: 14px; background-color: #fff; background-repeat: no-repeat; background-position: center; background-size: 8px 5px; border-left: 1px solid var(--line); }
.info-dlg__body::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M4 0l4 5H0z' fill='%23111'/%3E%3C/svg%3E"); }
.info-dlg__body::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23111'/%3E%3C/svg%3E"); }
.info-dlg__body::-webkit-scrollbar-button:vertical:start:increment, .info-dlg__body::-webkit-scrollbar-button:vertical:end:decrement { display: none; }
@supports not selector(::-webkit-scrollbar) { .info-dlg__body { scrollbar-color: var(--ink) #fff; scrollbar-width: thin; } } /* Firefox */

/* ---------- Placeholders tijdens het laden ---------- */
.skel { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--ph) 25%, #F8F6F2 50%, var(--ph) 75%); background-size: 200% 100%; animation: bfss-shimmer 1.4s ease-in-out infinite; }
.deal-card--skel { pointer-events: none; }
.deal-card--skel .deal-card__top { min-height: 30px; }
.skel--shop { width: 45%; height: 14px; }
.skel--cat { width: 35%; height: 12px; }
.skel--title { width: 92%; height: 40px; }
.deal-card--skel .deal-card__stub { gap: 12px; min-height: 250px; justify-content: flex-end; } /* even hoog als een echte tegel */
.deal-card--skel .deal-card__stub .skel { background-image: linear-gradient(90deg, rgba(14,14,14,.10) 25%, rgba(14,14,14,.04) 50%, rgba(14,14,14,.10) 75%); }
.skel--price { width: 55%; height: 30px; }
.skel--ref { width: 70%; height: 14px; }
.skel--btn { width: 100%; height: 63px; border-radius: 10px; }
.deal-card__img.is-loading, .deal-row__img.is-loading, .pick__img.is-loading, .shop-card__logo.is-loading { background: linear-gradient(90deg, var(--ph) 25%, #F8F6F2 50%, var(--ph) 75%); background-size: 200% 100%; animation: bfss-shimmer 1.4s ease-in-out infinite; }
.is-loading > img { background: transparent !important; }
@media (prefers-reduced-motion: reduce) { .skel, .is-loading { animation: none !important; } }

/* Slide-in: de dealknop blijft onderin in beeld tijdens het scrollen, met een witte rand zodat de tekst eronder wegvalt. */
.info-dlg .btn-deal { position: sticky; bottom: 16px; z-index: 2; box-shadow: 0 0 0 16px var(--white), 0 -18px 24px 10px var(--white); }
/* Ruimte boven de sticky knop, zodat de laatste regel (de noot) helemaal leesbaar is als je onderaan bent. */
.info-dlg__text .info-dlg__note { margin-bottom: 40px; }

/* Winkelpagina: de dame met het winkelmandje; het winkellogo staat op een wit label op het zwarte vlak van het mandje.
   Posities in procenten van de foto (760 x 913), zodat het label op elke schermbreedte op het mandje blijft. */
.page-head__img--basket { position: relative; width: 100%; max-width: 340px; margin: 24px auto 0; container-type: inline-size; }
.page-head__img--basket .basket__photo { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
.page-head__img--basket .basket__label { position: absolute; left: 35%; top: 70.9%; width: 42.3%; height: 13.8%; box-sizing: border-box; padding: 1.8cqw 3cqw; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 1.6cqw; box-shadow: 0 .5cqw 1.4cqw rgba(0, 0, 0, .35); overflow: hidden; }
.page-head__img--basket .basket__label .basket__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; object-fit: contain; }
.page-head__img--basket .basket__name { font-weight: 900; font-stretch: 80%; font-size: 4.6cqw; line-height: 1.05; text-align: center; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 900px) { .page-head__img--basket { max-width: 400px; margin: 0 auto; } }

/* Slide-in: prijsverloop uit onze eigen prijsmetingen */
.info-dlg__hist { border: 1px solid var(--line); border-radius: 10px; background: #fff; interpolate-size: allow-keywords; }
/* Ingeklapt: één rustige regel "Toon prijsverloop" met pijltje; uitgeklapt: grafiek en uitleg */
.info-dlg__hist-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; border-radius: 10px; }
.info-dlg__hist-toggle::-webkit-details-marker { display: none; }
.info-dlg__hist-toggle:hover { background: #F7F5F0; }
.info-dlg__hist-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.info-dlg__hist-chev { flex: none; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s ease; }
.info-dlg__hist[open] .info-dlg__hist-chev { transform: translateY(2px) rotate(-135deg); }
.info-dlg__hist[open] .info-dlg__hist-toggle { border-radius: 10px 10px 0 0; }
.info-dlg__hist-body { padding: 0 14px 10px; }
/* Zacht uitklappen waar de browser dat kan (nieuwere Chrome/Edge); elders klapt hij direct open */
.info-dlg__hist::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.info-dlg__hist[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { .info-dlg__hist::details-content, .info-dlg__hist-chev { transition: none; } }
.info-dlg__hist-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.info-dlg__hist-svg { display: block; width: 100%; height: auto; overflow: visible; }
.info-dlg__hist-svg .hist-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.info-dlg__hist-svg .hist-ref { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.info-dlg__hist-svg .hist-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.info-dlg__hist-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.info-dlg__hist-note { margin: 8px 0 0; font-size: 14px; line-height: 1.45; font-weight: 600; }
.info-dlg__hist-src { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.info-dlg__hist-svg .hist-txt { font: 600 11px/1 inherit; font-family: inherit; fill: var(--muted); }
.info-dlg__hist-svg .hist-txt--now { fill: var(--ink); font-weight: 800; }

/* ---------- Goudstof rond de dealknop ----------
   Het stof hangt aan het pijltje (span[aria-hidden]): ::before = bovenste helft, ::after = onderste helft,
   allebei absoluut ten opzichte van de knop. Het stof drijft van rechts naar links en tegelijk
   van het midden naar buiten (boven omhoog, onder omlaag). Zeven lagen met onregelmatige tegelmaten
   en eigen snelheden geven diepte; het masker toont alleen een rand rond de knop (niet achter de tekst),
   met extra wolkjes linksonder en rechtsboven. Stofjes vervagen als ze door de maskerrand drijven.
   Pop-up: altijd aan. Deal-tegels: alleen bij muis-over (gepauzeerd = geen rekenwerk). */
.deal-card .deal-card__stub .btn-deal,
.info-dlg .btn-deal { isolation: isolate; }
.deal-card .deal-card__stub .btn-deal > span[aria-hidden="true"]::before, .deal-card .deal-card__stub .btn-deal > span[aria-hidden="true"]::after,
.info-dlg .btn-deal > span[aria-hidden="true"]::before, .info-dlg .btn-deal > span[aria-hidden="true"]::after {
	content: ""; position: absolute; left: -14px; right: -14px; height: calc(50% + 15px); z-index: -1; pointer-events: none;
	background:
		radial-gradient(circle at 30% 40%, #FFE27A 0 1.2px, rgba(240, 180, 20, .45) 2px, transparent 4px),
		radial-gradient(circle at 70% 20%, #9C6500 0 1px, transparent 1.6px),
		radial-gradient(circle at 15% 75%, #FFD54A 0 .8px, transparent 1.4px),
		radial-gradient(circle at 60% 60%, #B57A06 0 1.3px, transparent 2px),
		radial-gradient(circle at 45% 35%, #FFE48A 0 .7px, transparent 1.2px),
		radial-gradient(circle at 80% 80%, #8A5800 0 .9px, transparent 1.5px),
		radial-gradient(circle at 25% 50%, #FFEB99 0 1.6px, rgba(240, 175, 15, .4) 2.6px, transparent 5px);
	background-size: 53px 47px, 37px 31px, 23px 29px, 71px 59px, 29px 19px, 41px 67px, 113px 89px;
	-webkit-mask: radial-gradient(farthest-side, transparent 64%, #000 80%, #000 86%, transparent 100%),
		radial-gradient(30% 60% at 6% 88%, #000, transparent 75%),
		radial-gradient(30% 60% at 94% 12%, #000, transparent 75%);
	mask: radial-gradient(farthest-side, transparent 64%, #000 80%, #000 86%, transparent 100%),
		radial-gradient(30% 60% at 6% 88%, #000, transparent 75%),
		radial-gradient(30% 60% at 94% 12%, #000, transparent 75%);
	-webkit-mask-size: 100% 200%; mask-size: 100% 200%;
	opacity: 0; transition: opacity .4s;
	animation: bfss-dust-up 12s linear infinite paused;
}
.deal-card .deal-card__stub .btn-deal > span[aria-hidden="true"]::before, .info-dlg .btn-deal > span[aria-hidden="true"]::before { top: -15px; -webkit-mask-position: 0 0; mask-position: 0 0; }
.deal-card .deal-card__stub .btn-deal > span[aria-hidden="true"]::after, .info-dlg .btn-deal > span[aria-hidden="true"]::after { bottom: -15px; -webkit-mask-position: 0 100%; mask-position: 0 100%; background-position: 17px 11px, 9px 23px, 5px 13px, 31px 7px, 11px 5px, 19px 29px, 47px 37px; animation-name: bfss-dust-down; }
.info-dlg .btn-deal > span[aria-hidden="true"]::before, .info-dlg .btn-deal > span[aria-hidden="true"]::after,
.deal-card:hover .deal-card__stub .btn-deal > span[aria-hidden="true"]::before,
.deal-card:hover .deal-card__stub .btn-deal > span[aria-hidden="true"]::after,
.deal-card .deal-card__stub .btn-deal:focus-visible > span[aria-hidden="true"]::before,
.deal-card .deal-card__stub .btn-deal:focus-visible > span[aria-hidden="true"]::after { opacity: 1; animation-play-state: running; }
/* Elke laag schuift precies een veelvoud van zijn tegel op: naadloze lus. x negatief = naar links. */
@keyframes bfss-dust-up {
	from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
	to { background-position: -159px -94px, -111px -62px, -92px -58px, -142px -59px, -87px -57px, -123px -67px, -113px -89px; }
}
@keyframes bfss-dust-down {
	from { background-position: 17px 11px, 9px 23px, 5px 13px, 31px 7px, 11px 5px, 19px 29px, 47px 37px; }
	to { background-position: -142px 105px, -102px 85px, -87px 71px, -111px 66px, -76px 62px, -104px 96px, -66px 126px; }
}
@media (prefers-reduced-motion: reduce) {
	.deal-card .deal-card__stub .btn-deal > span[aria-hidden="true"]::before, .deal-card .deal-card__stub .btn-deal > span[aria-hidden="true"]::after, .info-dlg .btn-deal > span[aria-hidden="true"]::before, .info-dlg .btn-deal > span[aria-hidden="true"]::after { animation: none; }
}

/* ---------- Laden in de slide-in: skelet in de vorm van het paneel ---------- */
.info-dlg__big--preview { animation: info-fade-in .25s ease-out; }
.info-dlg__body:not(.info-dlg__body--loading) { animation: info-fade-in .25s ease-out; } /* echte info komt zacht binnen */
.info-dlg .skel { flex: none; border-radius: 8px; }
.skel--dlg-img { width: 100%; height: min(42vh, 380px); border-radius: 10px; }
.skel--dlg-shop { width: 42%; height: 13px; }
.skel--dlg-title { width: 92%; height: 24px; }
.skel--dlg-title2 { width: 58%; margin-top: -4px; }
.skel--dlg-price { width: 46%; height: 42px; margin-top: 4px; }
.skel--dlg-hist { width: 100%; height: 48px; border-radius: 10px; }
.skel--dlg-line { width: 100%; height: 13px; }
.skel--dlg-line2 { width: 94%; margin-top: -4px; }
.skel--dlg-line3 { width: 68%; margin-top: -4px; }
.info-dlg .skel--dlg-btn { width: 100%; height: 76px; margin-top: 8px; border-radius: 10px; background-image: linear-gradient(90deg, #FFD60A 25%, #FFE875 50%, #FFD60A 75%); }
@media (max-width: 767px) { .info-dlg .skel--dlg-btn { height: 64px; } }
@media (prefers-reduced-motion: reduce) { .info-dlg__big--preview, .info-dlg__body:not(.info-dlg__body--loading) { animation: none; } }

/* ---------- Prijsfilter: schuif met twee grepen + velden Van/Tot ---------- */
.price-f__slider { position: relative; height: 30px; margin: 0 2px; }
.price-f__track { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--line); }
.price-f__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 3px; background: var(--ink); }
.price-f__r { position: absolute; z-index: 2; left: -11px; top: 0; width: calc(100% + 22px); height: 30px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.price-f__r::-webkit-slider-runnable-track { background: none; border: 0; height: 30px; }
.price-f__r::-moz-range-track { background: none; border: 0; }
.price-f__r::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: 3px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(14, 14, 14, .25); cursor: grab; transition: transform .15s ease; }
.price-f__r::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 0 1px 3px rgba(14, 14, 14, .25); cursor: grab; }
.price-f__r:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.12); }
.price-f__r:focus-visible { outline: none; }
.price-f__r:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--ink); outline-offset: 2px; }
.price-f__r:focus-visible::-moz-range-thumb { outline: 3px solid var(--ink); outline-offset: 2px; }
.price-f__inputs { display: flex; align-items: flex-end; gap: 8px; }
.filters .price-f__field { flex: 1; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; min-height: 0; font-size: 13px; font-weight: 700; cursor: text; }
.price-f__box { display: flex; align-items: center; gap: 4px; height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font-size: 15px; font-weight: 700; }
.price-f__box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.price-f__box input { flex: 1; min-width: 0; width: 100%; border: 0; padding: 0; background: none; font: inherit; color: var(--ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.price-f__box input::-webkit-outer-spin-button, .price-f__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-f__box input::placeholder { color: var(--muted); font-weight: 600; }
.price-f__dash { padding-bottom: 11px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .price-f__r::-webkit-slider-thumb { transition: none; } }

/* ---------- Wensenlijst als paneel dat van rechts inschuift, deals als rijen ---------- */
.wish-dlg { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(440px, 92vw); max-width: none; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; background: var(--white); color: var(--ink); box-shadow: -8px 0 40px rgba(14, 14, 14, .35); display: none; flex-direction: column; }
.wish-dlg[open] { display: flex; animation: wish-slide-in .3s cubic-bezier(.2, .8, .2, 1); }
.wish-dlg[open]::backdrop { background: rgba(14, 14, 14, .45); animation: info-fade-in .3s ease-out; }
.wish-dlg.is-closing { animation: wish-slide-out .22s ease-in forwards; }
.wish-dlg.is-closing::backdrop { animation: info-fade-out .22s ease-in forwards; }
@keyframes wish-slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes wish-slide-out { from { transform: none; } to { transform: translateX(100%); } }
html.has-wish-dlg { overflow: hidden; }
.wish-dlg__head { position: relative; flex: none; padding: 22px 64px 16px 22px; border-bottom: 1px solid var(--line); }
.wish-dlg__title { margin: 0; font-size: 22px; line-height: 1.2; }
.wish-dlg__count { color: var(--muted); font-weight: 700; }
.wish-dlg__close { top: 14px; right: 14px; }
.wish-dlg__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; }
.wish-dlg__foot { flex: none; padding: 14px 22px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.wish-dlg__more { font-weight: 700; }
.wish-dlg__empty { padding: 28px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.wish-dlg__empty-title { margin: 0; font-size: 18px; font-weight: 800; }
.wish-dlg__empty p { margin: 0 0 10px; }
.wish-dlg__err { padding: 20px 22px; }
.wish-row { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.wish-row__main { flex: 1; min-width: 0; display: flex; gap: 14px; align-items: center; padding: 12px 8px 12px 22px; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.wish-row__main:hover { background: #F7F5F0; }
.wish-row__main:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.wish-row__img { flex: none; width: 72px; height: 72px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wish-row__img img { width: 100%; height: 100%; object-fit: contain; }
.wish-row__adult { font-weight: 800; font-size: 13px; color: var(--muted); }
.wish-row__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wish-row__shop { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.wish-row__title { font-size: 15px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wish-row__price { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.wish-row__price strong { font-size: 17px; }
.wish-row__old { color: var(--muted); font-size: 13px; }
.wish-row__price .badge-pct { font-size: 12px; padding: 2px 6px; }
.wish-row__note { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.wish-row__note--drop { align-self: flex-start; padding: 2px 8px; border-radius: 6px; background: var(--yellow); color: var(--ink); }
.wish-row.is-expired .wish-row__img, .wish-row.is-gone .wish-row__title { opacity: .55; }
.wish-row__del { flex: none; align-self: center; margin: 0 14px 0 4px; }
.wish-row--skel { padding: 12px 22px; gap: 14px; align-items: center; }
.wish-row--skel .wish-row__img { border: 0; }
.wish-row__skel { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.skel--wr1 { width: 30%; height: 11px; }
.skel--wr2 { width: 85%; height: 15px; }
.skel--wr3 { width: 40%; height: 18px; }
@media (prefers-reduced-motion: reduce) { .wish-dlg[open], .wish-dlg.is-closing, .wish-dlg[open]::backdrop, .wish-dlg.is-closing::backdrop { animation: none; } }
.wish-dlg .wish-row__del { position: static; top: auto; left: auto; right: auto; bottom: auto; flex: none; align-self: center; margin: 0 14px 0 4px; }
.price-f--pct .price-f__box input { text-align: right; }
.wish-dlg__sub { margin: 0; padding: 18px 22px 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: #FAF8F4; }
.brand-cats { margin: 22px 0 0; }
.jump a[hidden], .az-group[hidden], .brand-az li[hidden] { display: none; }

/* ---------- Voorkeuren: keuzehulp als paneel dat van rechts inschuift ---------- */
.prefs-dlg { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: min(560px, 94vw); max-width: none; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; background: var(--ink); color: var(--white); box-shadow: -8px 0 40px rgba(14, 14, 14, .35); overflow-y: auto; overscroll-behavior: contain; }
.prefs-dlg[open] { animation: wish-slide-in .3s cubic-bezier(.2, .8, .2, 1); }
.prefs-dlg[open]::backdrop { background: rgba(14, 14, 14, .45); animation: info-fade-in .3s ease-out; }
.prefs-dlg.is-closing { animation: wish-slide-out .22s ease-in forwards; }
.prefs-dlg.is-closing::backdrop { animation: info-fade-out .22s ease-in forwards; }
html.has-prefs-dlg { overflow: hidden; }
.prefs-dlg .prefs__wizard { margin: 0; min-height: 100%; border-radius: 0; padding: 64px 26px 0; display: flex; flex-direction: column; }
.prefs-dlg .prefs__step legend { font-size: clamp(26px, 3vw, 32px); padding-right: 40px; }
.prefs-dlg .prefs__nav { position: sticky; bottom: 0; z-index: 2; margin: auto -26px 0; padding: 16px 26px; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .15); }
.prefs-dlg .prefs__note { margin: 0 -26px; padding: 0 26px 22px; background: var(--ink); }
.prefs-dlg__close { top: 14px; right: 14px; background: var(--white); color: var(--ink); }
.prefs-dlg__close:hover { background: var(--yellow); }
@media (prefers-reduced-motion: reduce) { .prefs-dlg[open], .prefs-dlg.is-closing, .prefs-dlg[open]::backdrop, .prefs-dlg.is-closing::backdrop { animation: none; } }
.prefs-dlg .prefs__step[data-step="1"] { padding-right: 0; min-height: 0; }
.prefs-dlg .prefs__photo { display: block; position: static; transform: none; width: 132px; height: auto; margin: 0 0 14px; }
.prefs:has([data-prefs-dlg]).is-open { background: var(--white); }

/* Voorkeurenpaneel op elke pagina: het paneel staat nu buiten de voorkeurenbalk */
[data-prefs-dlg] [hidden] { display: none !important; }
.prefs-dlg__load { margin: 0; padding: 90px 26px 0; font-weight: 700; font-size: 17px; color: var(--on-dark); }

/* Stempel "Echte korting · gemeten" (kalender met vinkje), naast het kortingspercentage */
.deal-card__marks { display: inline-flex; align-items: stretch; gap: 6px; flex: none; }
.deal-stamp { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 31px; min-height: 31px; padding: 0 4px; background: var(--yellow); color: var(--ink); border-radius: 6px; cursor: help; }
.deal-card__marks .deal-stamp { min-height: 0; }
.deal-row .price-row .deal-stamp { align-self: center; }

.info-dlg__stamp { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.info-dlg__stamp .deal-stamp--lg { width: 42px; height: 42px; border-radius: 8px; cursor: default; }
.info-dlg__stamp-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--text); }
.info-dlg__stamp-text strong { color: var(--ink); font-weight: 800; font-size: 15px; }

/* Kortingsdagen: overzicht en detail */
.kd-date { margin: -4px 0 8px; font-weight: 800; color: var(--ink); }
.kd-intro { max-width: 760px; font-size: 17px; color: var(--text); margin: 0 0 8px; }
.kd-more a { font-weight: 700; color: var(--ink); }
a.kd-card { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
a.kd-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(14, 14, 14, .12); }
a.kd-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.kd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kd-list a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 700; }
.kd-list a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- Stedenpagina: foto met de stadsnaam op het kartonnen bordje ---------- */
@font-face {
	font-family: 'Permanent Marker';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('assets/fonts/permanent-marker-latin.woff2') format('woff2');
}
.stad-hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: center; }
.stad-bordje { position: relative; margin: 0; container-type: inline-size; }
.stad-bordje img { display: block; width: 100%; height: auto; }
.stad-bordje__naam { position: absolute; left: 53.2%; top: 83.7%; transform: translate(-50%, -50%) rotate(-14deg); font-family: 'Permanent Marker', 'Comic Sans MS', cursive; line-height: 1; white-space: nowrap; color: #1c1816; opacity: .92; mix-blend-mode: multiply; pointer-events: none; }
@media (max-width: 760px) {
	.stad-hero { grid-template-columns: 1fr; gap: 16px; }
	.stad-bordje { width: 240px; justify-self: center; }
}

/* Merken A–Z: slider "Uitgelichte merken" (merken met eigen SEO-tekst) */
.brand-feat { padding-top: 8px; padding-bottom: 32px; }
.brand-feat .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.brand-feat .shops-pop__side { display: flex; align-items: center; gap: 12px; }
.brand-feat__note { font-size: 13px; color: var(--muted); }
.brand-card__hook { font-size: 14px; line-height: 1.35; color: var(--text); }
.brand-card .shop-card__logo { width: 140px; }

/* Stedenpagina: sliders tussen de tekst */
.stad-slider .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

/* Stedenpagina's (teksten van Mike): winkelgebieden, winkellijst, score, veelgestelde vragen */
.stad-tekst { padding-top: 24px; padding-bottom: 24px; }
.stad-gebieden { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 12px 0 8px; }
.stad-gebied { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stad-gebied h3 { margin: 0 0 6px; font-size: 17px; }
.stad-gebied p { margin: 0; font-size: 15px; }
.prose ul.stad-winkels { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose ul.stad-winkels li { margin: 0; padding: 0; }
.prose ul.stad-winkels li::before { content: none; }
.stad-winkels li > a, .stad-winkels li { display: inline-block; }
.prose ul.stad-winkels li { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-weight: 700; font-size: 15px; background: var(--white); }
.prose ul.stad-winkels li:has(> a) { padding: 0; border: 0; background: none; }
.prose ul.stad-winkels li > a { padding: 6px 14px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--white); }
.prose ul.stad-winkels li > a:hover { background: var(--ink); color: var(--white); }
.stad-score { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0 4px; }
.stad-score > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.stad-score dt { font-weight: 700; font-size: 14px; }
.stad-score dd { margin: 2px 0 0; font-size: 18px; letter-spacing: 2px; color: var(--ink); }
.stad-score__note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.stad-faq h3 { font-size: 17px; margin: 18px 0 4px; }

/* Winkelcentra: vaste module "Winkel of online?" */
.prose table.stad-keuze { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 8px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.stad-keuze th, .stad-keuze td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.stad-keuze thead th { background: var(--ink); color: var(--white); font-weight: 800; }
.stad-keuze tbody tr:last-child td { border-bottom: 0; }
.stad-keuze td:last-child { font-weight: 700; color: var(--ink); }
.stad-tekst .prose .stad-winkels + h3, .stad-tekst .prose p + h3 { margin-top: 18px; }

/* Hubpagina's /steden/ en /winkelcentra/ */
.hub-intro p { margin: 0 0 10px; }
.hub-tip { background: var(--white); border: 1px solid var(--line); border-left: 5px solid var(--yellow); border-radius: var(--radius); padding: 14px 18px; margin: 4px 0 8px; }
.hub-tip p { margin: 0; }
.hub-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin: 14px 0 8px; }
.prose a.hub-kaart, a.hub-kaart { display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; color: var(--text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
a.hub-kaart:hover, a.hub-kaart:focus-visible { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); color: var(--text); }
.prose .hub-kaart h3 { margin: 0; font-size: 19px; color: var(--ink); }
.prose .hub-kaart p { margin: 0; font-size: 15px; }
.prose .hub-kaart .hub-kaart__meta { font-size: 13px; font-weight: 600; color: var(--muted); }
.hub-kaart__link { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: 14px; color: var(--ink); }
.hub-tabel { overflow-x: auto; margin: 12px 0 8px; -webkit-overflow-scrolling: touch; }
.prose .hub-tabel table { margin: 0; }
.prose table.hub-vergelijk { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 15px; }
.hub-vergelijk th, .hub-vergelijk td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hub-vergelijk thead th { background: var(--ink); color: var(--white); font-weight: 800; white-space: nowrap; }
.hub-vergelijk tbody th { font-weight: 800; }
.hub-vergelijk tbody th a { color: var(--ink); }
.hub-vergelijk tbody tr:last-child > * { border-bottom: 0; }
.prose .hub-tabel table.stad-keuze { margin: 0; }

/* Overzichtspagina's: filter, labels, kaart van Nederland, "in de buurt" */
.hub-filter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 4px; }
.hub-filter__soort { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.hub-chip:hover { border-color: var(--ink); }
.hub-chip[aria-pressed="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.hub-chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.hub-filter__prov { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); }
.hub-filter__prov select { min-height: 38px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--white); font: inherit; font-weight: 500; }
.prose .hub-filter__aantal, .hub-filter__aantal { margin: 0 0 0 auto; font-size: 14px; color: var(--muted); }
.hub-kaart[hidden] { display: none !important; }
a.hub-kaart.is-hl { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.hub-kaart__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-tag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--ph); color: var(--text); }
.hub-tag--soort { background: var(--yellow); color: var(--ink); }
.hub-kaart-sectie .nl-kaart { margin: 12px auto 0; max-width: 520px; padding: 0 8px; }
.nl-kaart svg { display: block; width: 100%; height: auto; overflow: visible; }
.nl-kaart__prov path { fill: var(--white); stroke: var(--line-strong); stroke-width: 1.2; stroke-linejoin: round; transition: fill .15s ease; }
.nl-kaart__prov path.is-klikbaar { cursor: pointer; }
.nl-kaart__prov path.is-klikbaar:hover { fill: #FFF6CC; }
.nl-kaart__prov path.is-actief { fill: #FFE98A; }
.nl-pin circle { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; transition: r .15s ease, fill .15s ease; }
.nl-pin text { font-family: var(--display); font-weight: 800; font-size: 17px; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.nl-pin:hover circle, .nl-pin:focus-visible circle, .nl-pin.is-hl circle { r: 10px; fill: var(--ink); stroke: var(--yellow); }
.nl-pin:hover text, .nl-pin:focus-visible text, .nl-pin.is-hl text { opacity: 1; }
.nl-pin:focus { outline: none; }
.nl-pin.is-uit { opacity: .15; pointer-events: none; }
.hub-buurt .hub-kaart h3 { margin: 0; font-size: 19px; color: var(--ink); }
.hub-kaart__meta { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .nl-pin circle, .nl-pin text, .nl-kaart__prov path { transition: none; } }

/* Stedenpagina's/winkelcentra: info-kaart bevestigde Black Friday-openingstijd */
.stad-open { display: grid; gap: 2px; margin: 14px 0 6px; padding: 12px 16px; background: var(--yellow); color: var(--ink); border-radius: var(--radius); max-width: 560px; }
.stad-open__kop { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.stad-open__tijd { font-size: 19px; font-weight: 800; line-height: 1.3; }
.stad-open__bron { font-size: 13px; color: #3D3A33; }
.hub-tag--open { background: var(--yellow); color: var(--ink); }

/* Nieuws en onderzoek */
.nw-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 12px; font-size: 14px; color: var(--muted); font-weight: 600; }
.nw-titel { font-size: clamp(36px, 5vw, 60px); }
.nw-beeld { margin-top: 8px; margin-bottom: 0; }
.nw-beeld img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.nw-blok { margin-top: 28px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.nw-blok h2 { margin: 0 0 8px; font-size: 20px; }
.nw-blok p:last-child, .nw-blok ul:last-child { margin-bottom: 0; }
.nw-bronnen ul { margin: 0; padding-left: 18px; font-size: 15px; }
.nw-terug { margin-top: 28px; font-weight: 700; }
.nw-lijst { display: grid; gap: 12px; }
.nw-item { display: block; padding: 18px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.nw-item:hover, .nw-item:focus-visible { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.nw-item__datum { font-size: 13px; font-weight: 700; color: var(--muted); }
.nw-item__titel { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; color: var(--ink); }
.nw-item__intro { margin: 0 0 8px; font-size: 15px; }
.nw-item__link { font-weight: 800; font-size: 14px; color: var(--ink); }
/* Overzicht /onderzoek/: foto naast de kop */
.nw-hero__foto { margin: 0; }
.nw-hero__foto img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .nw-hero__foto { max-width: 240px; margin: 0 auto; } }

/* Snelkeuze winkel boven de lijst (categorie- en merkpagina's) */
.type-tabs--shop { margin-top: -8px; }
.type-tab--zonder { border-style: dashed; }

/* ---------- Hero 2026 (31-10): cadeaufoto als achtergrond, links kop/cijfers/categorieën, rechts de dame met het bord (aftelklok) en een zoekbalk ---------- */
.hero .wrap { align-items: flex-start; gap: 32px 40px; padding-top: 48px; padding-bottom: 48px; }
.hero--img::before { background-position: center 35%; }
.hero--img::after {
	background:
		linear-gradient(90deg, rgba(14,14,14,.95) 0%, rgba(14,14,14,.9) 38%, rgba(14,14,14,.55) 62%, rgba(14,14,14,.45) 100%),
		linear-gradient(0deg, rgba(14,14,14,.6) 0%, rgba(14,14,14,0) 30%);
}
.hero h1 { margin: 14px 0 18px; font-size: clamp(44px, 5.6vw, 80px); }
.hero__accent { display: block; margin-top: .25em; font-size: .5em; line-height: 1; color: var(--yellow); } /* onderkop: half zo groot als de kop erboven */
.hero__lead { margin-bottom: 26px; font-size: 19px; max-width: 600px; }
.hero-stats { display: flex; flex-wrap: wrap; margin: 0 0 26px; max-width: 680px; border: 1px solid #3D3A33; border-radius: 12px; background: rgba(14,14,14,.7); }
.hero-stats > div { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px 16px; border-right: 1px solid #3D3A33; }
.hero-stats > div:last-child { border-right: 0; }
.hero-stats dd { margin: 0; white-space: nowrap; font-weight: 900; font-stretch: 70%; font-size: 32px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-stats dt { margin-top: 4px; font-size: 14px; color: var(--on-dark); }
.hero-stats .hs-l { display: none; }
.hero-stats__note { display: flex; align-items: center; gap: 8px; margin: -10px 0 22px; font-size: 14px; color: var(--on-dark); }
.hero-stats__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--yellow); flex: none; } /* "2,9 mln" in plaats van "2,9 miljoen" */
.hero .chip { background: rgba(14,14,14,.7); }
.hero .chip--more { border-color: transparent; background: none; color: var(--yellow); font-weight: 700; padding-left: 6px; padding-right: 6px; }
.hero .chip--more:hover { text-decoration: underline; }
.hero__side { flex: 1 1 500px; max-width: 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hero-board { position: relative; container-type: inline-size; }
.hero-board__img { display: block; width: 100%; height: auto; }
.hero-board__cd { position: absolute; left: calc(4% + 10px); top: 38.8%; /* 31-10: 6 px hoger op 1620 breed, zoals in Figma */ width: 58%; color: var(--ink); }
.hero-board .countdown-card__title { font-size: max(10px, 2.15cqw); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
.hero-board .countdown { margin: 1.8cqw 0 2.1cqw; gap: 1.1cqw; }
.hero-board .countdown__cell { border-radius: 1.4cqw; padding: 1.4cqw 0 1.1cqw; }
.hero-board .countdown__num { font-size: 5.4cqw; }
.hero-board .countdown__unit { font-size: max(10px, 2cqw); color: var(--on-dark); margin-top: .3cqw; }
.hero__side.is-live .hero-board .countdown-card__title { font-weight: 900; font-stretch: 70%; font-size: 7cqw; letter-spacing: 0; text-transform: none; line-height: 1; margin-bottom: 2.4cqw; }
.hero-board__cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15px; text-align: center; }
.hero-board__cta:hover { background: var(--yellow-hover); color: var(--ink); }
.hero-board__cta--m { display: none; }
.hero__side .hero-search { max-width: none; }
.hero__side .hero-search input, .hero__side .hero-search button { height: 52px; }
.hero__side .hero-search input { font-size: 17px; }
@media (max-width: 1160px) {
	.hero--img::after { background: linear-gradient(180deg, rgba(14,14,14,.92) 0%, rgba(14,14,14,.85) 45%, rgba(14,14,14,.7) 100%); }
	.hero__side { flex-basis: 100%; }
}
@media (max-width: 900px) {
	.hero .wrap { padding-top: 32px; padding-bottom: 36px; gap: 24px; }
	.hero--img::before { background-position: center top; }
}
@media (max-width: 767px) {
	.hero h1 { font-size: clamp(38px, 11vw, 48px); margin: 10px 0 14px; }
	.hero__lead { font-size: 16px; margin-bottom: 18px; }
	.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; border-radius: 10px; }
	.hero-stats > div { padding: 10px 12px; border-right: 0; }
	.hero-stats > div:nth-child(odd) { border-right: 1px solid #3D3A33; }
	.hero-stats > div:nth-child(n+3) { border-top: 1px solid #3D3A33; }
	.hero-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
	.hero-stats dd { font-size: 24px; }
	.hero-stats dt { font-size: 12px; margin-top: 3px; }
	.hero .eyebrow__cm { display: none; }
	.hero__side { gap: 12px; order: -1; } /* 4-11: op mobiel eerst de dame met het bord (en zoekbalk), daarna kop, tekst en cijfers */
}
/* 4-11: cijfers in de hero op mobiel naast elkaar in één rij (werkt ook als er maar drie zijn) */
@media (max-width: 767px) {
	.hero-stats { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.hero-stats > div { padding: 9px 8px; border-right: 1px solid #3D3A33; }
	.hero-stats > div:nth-child(n+3) { border-top: 0; }
	.hero-stats > div:last-child, .hero-stats > div:last-child:nth-child(odd) { grid-column: auto; border-right: 0; }
	.hero-stats dd { font-size: 21px; }
	.hero-stats dt { font-size: 11px; line-height: 1.25; }
}
@media (max-width: 359px) { .hero-stats > div { padding: 8px 6px; } .hero-stats dd { font-size: 18px; } } /* hele smalle telefoons */
@media (max-width: 539px) {
	.hero-board__cd .hero-board__cta { display: none; }
	.hero-board__cta--m { display: flex; }
	.hero-board .countdown { margin-bottom: 0; }
	.hero-board .countdown__num { font-size: 6.6cqw; }
}

/* ---------- Productpagina's (/black-friday-deals/[model]/) ---------- */
.pp-intro { font-size: 18px; }
.pp-empty p { margin: 0 0 14px; max-width: 760px; }
.pp-empty .follow-wrap { margin: 0; }
.pp-shops__title { margin: 28px 0 12px; font-size: 20px; color: var(--ink); }

/* Keurmerk (besluit 3 nov 2026): zwart label = door ons gemeten; licht label = korting volgens de winkel (van-prijs uit de feed). Stempel alleen na 30 dagen eigen meting. */
.badge-pct--winkel { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.badge-pct__src { font-size: 10px; font-weight: 800; font-stretch: 100%; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.deal-stamp__img { display: block; width: 26px; height: 26px; }
.deal-stamp--lg .deal-stamp__img { width: 36px; height: 36px; }
.info-dlg__ref { margin: 10px 0 0; }