/* =========================================================================
   Daily Sneaker Steals: app.css
   Volgorde: tokens · basis · header · hero · secties · footer · responsive
   ========================================================================= */

:root {
	--ink: #0b0b0c;
	--ink-2: #16161a;
	--ink-3: #24242a;
	--paper: #f7f6f3;
	--white: #fff;

	--accent: #ef4123;          /* vlakken, badges, knoppen: 3.85:1 met wit  */
	--accent-ink: #c22e0e;      /* oranje tékst op licht    : 5.26:1 op papier */
	--accent-soft: #fdede9;
	--accent-glow: rgba(239, 65, 35, 0.35);

	--muted: #6b6a66;
	--line: #e3e1db;
	--line-dark: rgba(255, 255, 255, 0.14);

	/* Strak gehouden: net genoeg ronding om zacht te ogen, niet zo bol dat
	   alles eruitziet als een pilletje. --round blijft over voor de paar
	   dingen die écht rond horen te zijn (telbadge, statusstip). */
	--radius-xs: 3px;
	--radius-sm: 5px;
	--radius: 8px;
	--radius-lg: 12px;
	--pill: 10px;
	--round: 999px;

	--shadow-sm: 0 2px 8px rgba(11, 11, 12, 0.06);
	--shadow-md: 0 6px 20px rgba(11, 11, 12, 0.09);
	--shadow-lg: 0 18px 44px rgba(11, 11, 12, 0.16);

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-glass: cubic-bezier(0.22, 1, 0.36, 1);

	--wrap: 1320px;
	--gutter: clamp(1.15rem, 5vw, 3rem);

	/* Obviously komt van Adobe Fonts (use.typekit.net) en mag niet lokaal
	   gehost worden. Zonder geladen kit valt de kop terug op Archivo. */
	--font-display: obviously, Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- basis ---------------------------------------------------------------- */

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

/* WordPress zet root-padding én 24px marge tussen blokken op hoofdniveau.
   Onze secties regelen hun eigen ruimte, dus beide uit: anders zie je een
   lichte strook boven de donkere hero. */
.wp-site-blocks { padding-top: 0; }
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 0;
	text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg { max-width: 100%; }

.dss-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.dss-eyebrow {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin: 0 0 0.9rem;
}

.dss-section { padding-block: clamp(3.5rem, 8vw, 7rem); }
.dss-section--dark { background: var(--ink); color: var(--paper); }

.dss-section--dark .dss-eyebrow { color: var(--accent); }

.dss-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.dss-section__title { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.dss-section__lead {
	max-width: 46ch;
	color: var(--muted);
	margin: 0.8rem 0 0;
}
.dss-section--dark .dss-section__lead { color: rgba(247, 246, 243, 0.68); }

/* --- knoppen -------------------------------------------------------------- */

/* Alle knopvarianten delen dezelfde animatie: een gradient van 210% breed die
   bij hover heen en weer schuift (zelfde principe als de referentiesite).
   Elke variant vult alleen zijn eigen kleuren in. */
.dss-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.95rem 1.7rem;
	border: 1px solid transparent;
	border-radius: var(--pill);
	font-family: var(--font-body);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	background-size: 210% 100%;
	background-position: 0% 50%;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
		transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
		border-color 0.2s var(--ease-out);
}

.dss-btn:hover,
.dss-header__cta:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	animation: dss-btn-shimmer 1.9s ease-in-out infinite;
	transform: translateY(-2px);
}

@keyframes dss-btn-shimmer {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* oranje hoofdknop: rustkleur haalt 5.69:1 met witte tekst */
.dss-btn--primary,
.dss-header__cta,
.wp-element-button,
.wp-block-button__link {
	background-color: var(--accent-ink);
	background-image: linear-gradient(92deg,
		var(--accent-ink) 0%, var(--accent) 50%, var(--accent-ink) 100%);
	background-size: 210% 100%;
	background-position: 0% 50%;
	color: var(--white);
	box-shadow: 0 3px 16px var(--accent-glow);
}
.dss-btn--primary:hover,
.dss-header__cta:hover,
.wp-element-button:hover,
.wp-block-button__link:hover { box-shadow: 0 7px 24px var(--accent-glow); }

/* donkere knop op lichte vlakken: bewust een graad lichter dan de inkt,
   anders leest de linkerhelft als een zwart blok naast het oranje */
.dss-btn--onlight {
	background-color: var(--ink-3);
	background-image: linear-gradient(92deg,
		var(--ink-3) 0%, var(--accent-ink) 50%, var(--ink-3) 100%);
	color: var(--white);
	box-shadow: 0 3px 16px rgba(11, 11, 12, 0.14);
}
.dss-btn--onlight:hover { box-shadow: 0 7px 24px rgba(11, 11, 12, 0.28); }

/* omlijnde knop: de shimmer loopt hier over een lichte waas */
.dss-btn--ghost {
	background-color: transparent;
	background-image: linear-gradient(92deg,
		rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 100%);
	color: currentColor;
	border-color: rgba(255, 255, 255, 0.28);
}
.dss-btn--ghost:hover { border-color: currentColor; }

.dss-btn__arrow { transition: transform 0.25s var(--ease-out); }
.dss-btn:hover .dss-btn__arrow { transform: translateX(3px); }

/* =========================================================================
   HEADER: vaste pill, transparant over de hero, matglas bij scrollen
   ========================================================================= */

.dss-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	padding: 1.3rem clamp(1rem, 3vw, 2rem) 0;
	transition: padding-top 0.7s var(--ease-glass);
}
.dss-header.is-scrolled { padding-top: 0.5rem; }

.dss-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	/* Iets smaller dan de contentwrap, maar nog altijd breder dan de tekst
	   erbinnen (die zit op wrap min de gutters). */
	max-width: calc(var(--wrap) - 44px);
	margin-inline: auto;
	position: relative;
	padding: 0.5rem 0.5rem 0.5rem 0.95rem;
	border-radius: 16px;
}

/* Het matglas zit op een pseudo-element, niet op de balk zelf. Een element met
   backdrop-filter wordt namelijk het referentiekader voor position:fixed
   erbinnen, en dan klapt het mobiele menu in zodra je scrolt. */
.dss-header__bar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid transparent;
	border-radius: inherit;
	transition: background-color 0.7s var(--ease-glass), border-color 0.7s var(--ease-glass),
		box-shadow 0.7s var(--ease-glass), backdrop-filter 0.7s var(--ease-glass);
}

.dss-header.is-scrolled .dss-header__bar::before,
body:not(.dss-has-hero) .dss-header__bar::before {
	background: rgba(11, 11, 12, 0.78);
	backdrop-filter: saturate(1.3) blur(16px);
	-webkit-backdrop-filter: saturate(1.3) blur(16px);
	border-color: var(--line-dark);
	box-shadow: 0 12px 38px rgba(11, 11, 12, 0.34);
}

/* merk: het logo staat één keer als <symbol> in de header en wordt met
   <use> hergebruikt. Zo blijft het één bron én neemt het currentColor aan.
   Verhouding 1497:766 = 1.954 */
.dss-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.dss-logo {
	display: block;
	height: var(--logo-h, 30px);
	width: calc(var(--logo-h, 30px) * 1.954);
	fill: currentColor;
}

.dss-brand {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--white);
	transition: color 0.2s var(--ease-out);
}
.dss-brand .dss-logo { --logo-h: 30px; }
.dss-brand__name {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	font-style: italic;   /* echte cursief uit de Adobe-kit, geen schuintrekking */
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.dss-brand:hover { color: var(--accent); }

/* navigatie */
.dss-nav {
	justify-self: center;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.9rem);
}

.dss-nav > a,
.dss-nav__top {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.32rem;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s var(--ease-out);
}
.dss-nav > a:hover,
.dss-nav__top:hover { color: var(--white); }

.dss-nav > a::after,
.dss-nav__top::after {
	content: "";
	position: absolute;
	inset: auto 0 -4px 0;
	height: 2px;
	background: var(--accent);
	border-radius: 1px;
	transform: scaleX(0);
	transition: transform 0.3s var(--ease-out);
}
.dss-nav > a:hover::after,
.dss-nav__top:hover::after,
.dss-nav > a.is-active::after,
.dss-nav__top.is-active::after,
.dss-has-submenu:focus-within .dss-nav__top::after { transform: scaleX(1); }

.dss-nav > a.is-sale { color: var(--accent); }

.dss-caret { transition: transform 0.25s var(--ease-out); }
.dss-has-submenu:hover .dss-caret,
.dss-has-submenu:focus-within .dss-caret { transform: rotate(180deg); }

/* De wrapper om "Merken" is een blok; een inline-flex link daarin zakt naar de
   tekstbasislijn en staat daardoor net lager dan de losse menu-items. Zelf een
   flexcontainer maken haalt die regelbox weg. */
.dss-has-submenu {
	position: relative;
	display: flex;
	align-items: center;
}

.dss-submenu {
	position: absolute;
	top: calc(100% + 1.6rem);
	left: -0.8rem;
	min-width: 240px;
	padding: 0.45rem;
	display: grid;
	gap: 0.25rem;
	background: rgba(13, 13, 14, 0.96);
	backdrop-filter: saturate(1.3) blur(18px);
	-webkit-backdrop-filter: saturate(1.3) blur(18px);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
	box-shadow: 0 16px 40px rgba(11, 11, 12, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
	z-index: 60;
}
/* onzichtbare brug zodat de muis het menu haalt zonder dat het sluit */
.dss-submenu::before {
	content: "";
	position: absolute;
	inset: auto 0 100% 0;
	height: 1.8rem;
}
.dss-has-submenu:hover .dss-submenu,
.dss-has-submenu:focus-within .dss-submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.dss-submenu a {
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius-sm);
	font-size: 0.92rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.dss-submenu a:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); }

/* rechterkant */
.dss-header__actions {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.dss-iconbtn {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--pill);
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.dss-iconbtn:hover { background: rgba(255, 255, 255, 0.12); color: var(--white); }
.dss-iconbtn svg { width: 20px; height: 20px; }

.dss-cartcount {
	position: absolute;
	top: 3px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	border-radius: var(--round);
	background: var(--accent);
	color: var(--white);
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
}

.dss-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.68rem 1.3rem;
	border-radius: var(--pill);
	background: var(--accent);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out),
		box-shadow 0.2s var(--ease-out);
}
.dss-header__cta:hover {
	background: var(--accent-ink);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px var(--accent-glow);
}

.dss-menu-toggle {
	display: none;
	padding: 0.4rem;
	border: 0;
	background: none;
	color: var(--white);
	cursor: pointer;
}
.dss-menu-toggle svg { width: 26px; height: 26px; }

/* =========================================================================
   HERO
   ========================================================================= */

/* Hero én vertrouwensbalk vullen samen precies één schermhoogte. De wrapper
   bepaalt de hoogte, de hero eet de restruimte op. min-height (geen height)
   zodat korte of gestapelde schermen mogen meegroeien in plaats van af te
   knippen; svh houdt rekening met de adresbalk op mobiel. */
.dss-viewport {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}
.dss-viewport .dss-hero { flex: 1 1 auto; min-height: 0; }
.dss-viewport .dss-trust { flex: 0 0 auto; }

.dss-hero {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--ink);
	color: var(--paper);
	padding-top: clamp(5.5rem, 12vh, 8.5rem);
	padding-bottom: clamp(1.5rem, 3vh, 3.5rem);
	overflow: hidden;
	isolation: isolate;
}
.dss-hero__grid { width: 100%; }

/* schuine oranje gloed achter de kop */
.dss-hero::before {
	content: "";
	position: absolute;
	top: -30%;
	left: -10%;
	width: 70%;
	height: 120%;
	background: radial-gradient(ellipse at center, rgba(239, 65, 35, 0.22), transparent 65%);
	z-index: -1;
	pointer-events: none;
}

.dss-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.dss-hero__flag {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.42rem 0.5rem 0.42rem 0.85rem;
	margin-bottom: clamp(0.8rem, 2.2vh, 1.5rem);
	border: 1px solid var(--line-dark);
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.05);
	font-size: 0.78rem;
	font-weight: 600;
	color: rgba(247, 246, 243, 0.8);
}
.dss-hero__flag b { color: var(--accent); font-weight: 700; }
.dss-hero__flag-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 var(--accent-glow);
	animation: dss-pulse 2s infinite;
}
@keyframes dss-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(239, 65, 35, 0.6); }
	70%  { box-shadow: 0 0 0 9px rgba(239, 65, 35, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 65, 35, 0); }
}

.dss-hero__title {
	font-size: clamp(2.2rem, min(6.4vw, 8.6vh), 5rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	text-transform: uppercase;
}
.dss-hero__title em {
	font-style: normal;
	color: var(--accent);
}

.dss-hero__lead {
	max-width: 44ch;
	margin: clamp(0.8rem, 2.2vh, 1.4rem) 0 clamp(1.1rem, 3vh, 2.1rem);
	font-size: clamp(0.95rem, 1.5vw, 1.15rem);
	color: rgba(247, 246, 243, 0.72);
}

.dss-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* De drie blokjes gelijkmatig verdeeld: beoordeling links, retour rechts,
   100% precies in het midden. Gelijke tussenruimte, geen willekeurige gaten. */
.dss-hero__proof {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: clamp(1.2rem, 3vw, 2rem);
	margin-top: clamp(1.2rem, 3.2vh, 2.6rem);
	padding-top: clamp(1rem, 2.4vh, 1.8rem);
	border-top: 1px solid var(--line-dark);
}
.dss-hero__stat strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	/* Expliciet, want in de flexrij met de sterren viel de regelhoogte terug
	   op de fontmetriek en stond het cijfer net iets hoger dan de andere twee. */
	line-height: 1.25;
}
.dss-hero__stat span {
	font-size: 0.82rem;
	color: rgba(247, 246, 243, 0.6);
}

/* cijfer en sterren op één regel, label eronder: zo blijft het blok even
   hoog als "100%" en "14 dagen" ernaast */
/* WordPress' wpautop laat een lege <p> achter in de shortcode-uitvoer. Die
   telt mee als flexkind en at een gat op: en mijn eerdere :nth-child(2) greep
   hém in plaats van het 100%-blok, waardoor dat juist naar rechts schoof. */
.dss-hero__proof > p { display: none; }

/* Het middelste blok iets naar links: een rechtermarge verkleint de vrije
   ruimte, waardoor space-between het naar links trekt terwijl de beoordeling
   links en de retourtermijn rechts blijven staan. Op klasse, niet op positie. */
.dss-hero__stat--mid { margin-right: 1.5rem; }

.dss-hero__rating-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.dss-hero__rating-row .dss-stars { margin-bottom: 0.15rem; }
.dss-hero .dss-hero__rating-row strong { color: var(--white); }

/* de beoordeling linkt naar het Google-profiel, maar mag geen standaard
   oranje onderstreepte link worden */
/* Eén klasse extra: de algemene "link in de hero"-regel heeft dezelfde
   specificiteit en staat verderop, en won daardoor met oranje + onderstreping. */
.dss-hero .dss-hero__proof a.dss-hero__stat--rating {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s var(--ease-out);
}
.dss-hero .dss-hero__proof a.dss-hero__stat--rating span { text-decoration: none; }
.dss-hero .dss-hero__proof a.dss-hero__stat--rating:hover span { color: var(--accent); }

/* lege sterren moeten op zwart net zichtbaar zijn, niet lichtgrijs verdwijnen */
.dss-hero .dss-star { fill: rgba(255, 255, 255, 0.22); }
.dss-hero .dss-star.is-on { fill: #f5a623; }

/* dealkaart */
.dss-dealcard {
	position: relative;
	padding: 1.15rem;
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	color: var(--ink);
}
.dss-dealcard__media {
	position: relative;
	/* De kaart is het hoogste element in de hero en bepaalt of alles binnen één
	   schermhoogte past. Daarom een hoogte op schermmaat in plaats van een vaste
	   verhouding: met aspect-ratio zou de cap ook de bréédte afknijpen. */
	width: 100%;
	height: clamp(180px, 34vh, 420px);
	border-radius: var(--radius);
	background: linear-gradient(145deg, #ececE7, #f7f6f3);
	display: grid;
	place-items: center;
	overflow: hidden;
	margin-bottom: 1.1rem;
}
.dss-dealcard__media img { width: 100%; height: 100%; object-fit: cover; }
.dss-dealcard__badge {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius-xs);
	background: var(--accent);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.dss-dealcard__brand {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.dss-dealcard__name {
	font-size: 1.32rem;
	margin: 0.3rem 0 0.35rem;
}
.dss-dealcard__size {
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--muted);
}
.dss-dealcard__prices {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	margin-bottom: 1.1rem;
}
.dss-price {
	font-family: var(--font-display);
	font-size: 1.85rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--accent-ink);
}
.dss-price--was {
	font-size: 1rem;
	font-weight: 500;
	color: var(--muted);
	text-decoration: line-through;
}
.dss-dealcard .dss-btn { width: 100%; justify-content: center; }

/* aftelklok */
.dss-countdown {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.9rem;
	margin-bottom: 1rem;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
}
.dss-countdown__label {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--accent-ink);
}
.dss-countdown__time {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--accent-ink);
}

/* =========================================================================
   VERTROUWENSBALK
   ========================================================================= */

.dss-trust {
	background: var(--accent);
	color: var(--white);
	padding-block: clamp(0.7rem, 1.6vh, 1rem);
}
.dss-trust__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem 2rem;
}
.dss-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.88rem;
	font-weight: 600;
}
.dss-trust__item svg { width: 18px; height: 18px; flex-shrink: 0; }
.dss-trust__item--dup { display: none; }

/* =========================================================================
   PRODUCTRASTER
   ========================================================================= */

.dss-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
}

.dss-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out);
}
.dss-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.dss-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: linear-gradient(145deg, #efeeea, #f9f8f5);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.dss-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease-out);
}
.dss-card:hover .dss-card__media img { transform: scale(1.05); }

/* tijdelijke productafbeelding: het logo-silhouet, vaag, tot Shopify
   de echte beelden levert */
.dss-ph {
	width: 64%;
	height: auto;
	aspect-ratio: 1497 / 766;
	fill: var(--ink);
	opacity: 0.09;
}

.dss-card__badge {
	position: absolute;
	/* Bij hover krijgt de foto een transform, en een getransformeerd element
	   schildert over alles wat ervóór in de opmaak staat. Zonder deze regel
	   verdween het label "Verkocht" zodra je de kaart aanwees. */
	z-index: 2;
	top: 0.7rem;
	left: 0.7rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-xs);
	background: var(--accent);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.74rem;
	font-weight: 700;
}
.dss-card__badge--soon {
	background: var(--ink);
}

.dss-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.3rem;
	padding: 1rem 1.05rem 1.15rem;
}
.dss-card__brand {
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}
.dss-card__name {
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.dss-card__prices {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.7rem;
}
.dss-card__price {
	font-family: var(--font-display);
	font-size: 1.22rem;
	font-weight: 700;
	color: var(--accent-ink);
}
.dss-card__was {
	font-size: 0.85rem;
	color: var(--muted);
	text-decoration: line-through;
}
.dss-card__sizes {
	font-size: 0.76rem;
	color: var(--muted);
}

/* markering waar de Shopify-collectie komt */
.dss-shopify-slot {
	margin-top: 2rem;
	padding: 1rem 1.15rem;
	border: 1px dashed var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	font-size: 0.86rem;
	color: var(--accent-ink);
}
.dss-shopify-slot code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85em;
}

/* =========================================================================
   MERKENSTROOK
   ========================================================================= */

.dss-brands {
	padding-block: clamp(2rem, 4vw, 3rem);
	border-block: 1px solid var(--line);
	background: var(--white);
	overflow: hidden;
}
.dss-brands__track {
	display: flex;
	will-change: transform;
	gap: clamp(3.6rem, 5.6vw, 6.2rem);
	align-items: center;
	width: max-content;
	animation: dss-marquee 76s linear infinite;
}
.dss-brands:hover .dss-brands__track { animation-play-state: paused; }
@keyframes dss-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.dss-brands__item {
	display: inline-flex;
	align-items: center;
	color: var(--ink);
	opacity: 0.34;
	transition: opacity 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.dss-brands__item:hover { opacity: 1; color: var(--accent-ink); }

/* echte merklogo's, allemaal in een 24×24 kader zodat ze optisch
   even zwaar wegen ondanks hun verschillende vormen */
.dss-brandmark {
	display: block;
	height: clamp(26px, 3.2vw, 38px);
	width: auto;
	fill: currentColor;
}
/* Beeldmerken zonder woord zijn optisch kleiner dan een wordmark op dezelfde
   hoogte; die krijgen wat extra. */
.dss-brandmark--jordan,
.dss-brandmark--puma,
.dss-brandmark--reebok,
.dss-brandmark--newbalance,
.dss-brandmark--acg { height: clamp(40px, 5vw, 60px); }

/* =========================================================================
   CATEGORIETEGELS
   ========================================================================= */

.dss-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}
.dss-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 280px;
	padding: 1.5rem;
	border-radius: var(--radius-lg);
	background: var(--ink-2);
	color: var(--white);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
}
.dss-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(239, 65, 35, 0.25), transparent 60%);
	z-index: -1;
	transition: opacity 0.3s var(--ease-out);
	opacity: 0.6;
}
.dss-tile:hover::after { opacity: 1; }
.dss-tile--sale { background: var(--accent); }
.dss-tile--sale::after { background: linear-gradient(160deg, rgba(0, 0, 0, 0.3), transparent 60%); }

.dss-tile__count {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.7);
}
.dss-tile__name {
	font-family: var(--font-display);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	margin-top: 0.2rem;
}
.dss-tile__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.8rem;
	font-size: 0.85rem;
	font-weight: 600;
}
.dss-tile:hover .dss-btn__arrow { transform: translateX(4px); }

/* =========================================================================
   WERKWIJZE
   ========================================================================= */

.dss-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
}
.dss-step__num {
	font-family: var(--font-display);
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
	margin-bottom: 0.8rem;
}
.dss-step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.dss-step p { margin: 0; color: rgba(247, 246, 243, 0.68); font-size: 0.95rem; }

/* =========================================================================
   GOOGLE-REVIEWS
   ========================================================================= */

.dss-reviews { background: var(--white); }

.dss-reviews__score { text-align: right; }
.dss-reviews__meta { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--muted); }
.dss-reviews__meta strong {
	font-family: var(--font-display);
	font-size: 1.15rem;
	color: var(--ink);
}
.dss-reviews__link {
	display: inline-block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--accent-ink);
}

/* Sterren met gedeeltelijke vulling: elke ster is een lege basis met daarover
   een gevulde kopie die op breedte wordt afgeknipt (4,7 → vijfde ster 70%). */
.dss-stars { display: inline-flex; gap: 2px; }

.dss-star-slot {
	position: relative;
	display: block;
	width: 17px;
	height: 17px;
	line-height: 0;
}
.dss-star { display: block; width: 17px; height: 17px; fill: var(--line); }

.dss-star-fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	line-height: 0;
}
.dss-star.is-on { fill: #f5a623; }

.dss-reviews__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
}

.dss-review {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
}
.dss-review__text {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--ink);
}
.dss-review__text::before { content: "\201C"; }
.dss-review__text::after  { content: "\201D"; }

.dss-review__by {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: auto;
	padding-top: 0.4rem;
	font-size: 0.88rem;
}
.dss-review__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.dss-review__by strong { display: block; font-weight: 600; }
.dss-review__when { color: var(--muted); font-size: 0.82rem; }

@media (max-width: 900px) {
	.dss-reviews__grid { grid-template-columns: 1fr; }
	.dss-reviews__score { text-align: left; }
}

/* =========================================================================
   NIEUWSBRIEF
   ========================================================================= */

.dss-news {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: var(--paper);
}
.dss-news__title { font-size: clamp(1.7rem, 3.5vw, 2.5rem); text-transform: uppercase; }
.dss-news__lead { display: block; color: rgba(247, 246, 243, 0.7); margin: 0.8rem 0 0; }

.dss-news__form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.dss-news__input {
	flex: 1 1 220px;
	padding: 0.95rem 1.2rem;
	border: 1px solid var(--line-dark);
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	font-family: var(--font-body);
	font-size: 0.95rem;
}
.dss-news__input::placeholder { color: rgba(247, 246, 243, 0.45); }
.dss-news__input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	background: rgba(255, 255, 255, 0.1);
}
.dss-news__small {
	display: block;
	margin: 0.8rem 0 0;
	font-size: 0.78rem;
	color: rgba(247, 246, 243, 0.5);
}

/* Links op donkere vlakken: --accent-ink is bedoeld voor lichte achtergronden
   en haalt op zwart maar 2.4:1. Het felle oranje haalt 5.11:1. */
.dss-section--dark a:not(.dss-btn),
.dss-news a,
.dss-hero a:not(.dss-btn) {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.dss-section--dark a:not(.dss-btn):hover,
.dss-news a:hover,
.dss-hero a:not(.dss-btn):hover { text-decoration: none; }

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

.dss-footer {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem;
}
.dss-footer__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gutter) 3rem;
	display: grid;
	grid-template-columns: 1.5fr 2fr;
	gap: clamp(2rem, 5vw, 4rem);
	border-bottom: 1px solid var(--line-dark);
}
.dss-footer__logo { color: var(--paper); margin-bottom: 1.3rem; }
.dss-footer__logo .dss-logo { --logo-h: 46px; }
.dss-footer__tagline {
	max-width: 38ch;
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.5;
	color: rgba(247, 246, 243, 0.7);
}
.dss-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.dss-footer__col { display: flex; flex-direction: column; gap: 0.6rem; }
.dss-footer__label {
	margin-bottom: 0.35rem;
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.dss-footer__col a {
	color: rgba(247, 246, 243, 0.82);
	text-decoration: none;
	font-size: 0.93rem;
	transition: color 0.2s var(--ease-out);
}
.dss-footer__col a:hover { color: var(--accent); }
.dss-footer__muted { color: rgba(247, 246, 243, 0.62); font-size: 0.86rem; }

.dss-footer__bottom {
	max-width: var(--wrap);
	margin: 1.8rem auto 0;
	padding-inline: var(--gutter);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.8rem;
	/* 0,5 gaf 4,4 op inkt en bleef net onder de eis van 4,5. */
	color: rgba(247, 246, 243, 0.62);
}
.dss-footer__bottom a { color: rgba(247, 246, 243, 0.85); text-decoration: underline; text-underline-offset: 0.2em; }
.dss-footer__bottom a:hover { color: var(--accent); text-decoration: underline; }

/* Deze regel stond op 0,4 en haalde 3,58: te licht om te lezen. Op 0,62 wordt
   het 7,24. */
.dss-footer__powered { color: rgba(247, 246, 243, 0.62); }

/* De link staat middenin een zin en was alleen aan zijn kleur te herkennen.
   Onderstrepen is hier de enige werkende oplossing: link en tekst hebben
   dezelfde kleur, dus geen enkele doorzichtigheid haalt de eis van 3,0
   verschil. */
.dss-footer__powered a {
	color: rgba(247, 246, 243, 0.85);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: color 0.2s var(--ease-out);
}
.dss-footer__powered a:hover { color: var(--accent); text-decoration: underline; }

.dss-pay { display: inline-flex; gap: 0.5rem; align-items: center; }
.dss-pay span {
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--line-dark);
	border-radius: 6px;
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(247, 246, 243, 0.75);
}

/* =========================================================================
   TOEGANKELIJKHEID
   ========================================================================= */

:where(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.dss-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 0.8rem 1.2rem;
	/* Wit op #EF4123 komt op 3,85 en dat is te weinig. Oranje-donker haalt 5,69.
	   Daar is die kleur ook voor bedoeld: witte tekst op oranje. */
	background: var(--accent-ink);
	color: var(--white);
	font-weight: 700;
	text-decoration: none;
}
.dss-skip:focus { left: 1rem; top: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.dss-brands__track { animation: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
	.dss-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Eerder overschakelen naar de compacte kop: op een 13-inch scherm werd het
   logo naast het menu te klein om nog te lezen. */
@media (max-width: 1280px) {
	.dss-header__bar {
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 0.6rem 0.5rem 1.1rem;
	}
	.dss-menu-toggle { display: inline-flex; order: 3; }
	.dss-menu-toggle svg { width: 30px; height: 30px; }
	.dss-brand .dss-logo { --logo-h: 36px; }
	.dss-iconbtn { width: 44px; height: 44px; }
	.dss-iconbtn svg { width: 23px; height: 23px; }
	.dss-header__cta { display: none; }

	/* Mobiel menu: bijna schermvullend paneel met marge rondom. De bovenmarge
	   laat de header vrij, zodat je met dezelfde knop weer sluit. */
	.dss-nav[data-open="false"] { display: none; }
	.dss-nav {
		position: fixed;
		top: 5rem;
		left: 1rem;
		right: auto;
		bottom: 1rem;
		width: calc(100vw - 2rem);
		z-index: 55;
		flex-direction: column;
		align-items: stretch;
		/* verticaal centreren zodat er geen gat onder het laatste item valt;
		   "safe" voorkomt dat de bovenkant wegvalt als het menu uitklapt */
		justify-content: center;
		justify-content: safe center;
		gap: 0.15rem;
		padding: 1.25rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: rgba(11, 11, 12, 0.97);
		backdrop-filter: saturate(1.2) blur(16px);
		-webkit-backdrop-filter: saturate(1.2) blur(16px);
		border: 1px solid var(--line-dark);
		border-radius: var(--radius-lg);
		box-shadow: 0 12px 34px rgba(11, 11, 12, 0.45);
	}

	.dss-nav > a,
	.dss-nav__top {
		width: 100%;
		justify-content: space-between;
		padding-block: 1.15rem;
		font-size: 1.3rem;
		letter-spacing: 0.03em;
		border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	}
	.dss-caret { width: 14px; height: 14px; }
	/* de onderstreping-animatie hoort bij het bureaubladmenu */
	.dss-nav > a::after,
	.dss-nav__top::after { content: none; }

	.dss-has-submenu {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}

	/* dichtgeklapt tot iemand op Merken tikt */
	.dss-submenu {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0.2rem 0 0.5rem 0.9rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
	}
	.dss-has-submenu.is-open .dss-submenu { display: grid; }
	.dss-has-submenu.is-open .dss-caret { transform: rotate(180deg); }
	.dss-submenu a { padding-block: 0.7rem; font-size: 1.02rem; }

	/* De vier beloftes passen mobiel niet naast elkaar; laat ze rondlopen
	   in plaats van ze over vier regels te breken. */
	.dss-trust { overflow: hidden; }
	.dss-trust__row {
		flex-wrap: nowrap;
		width: max-content;
		max-width: none;
		/* margin-inline stond op auto via .dss-wrap; samen met width:max-content
		   zette Safari de rij stil. Expliciet op 0 en een compositielaag
		   afdwingen zodat iOS hem wel animeert. */
		margin-inline: 0;
		padding-inline: 0;
		gap: 2.2rem;
		will-change: transform;
		animation: dss-marquee 30s linear infinite;
	}
	.dss-trust__item { flex: 0 0 auto; }
	.dss-trust__item--dup { display: inline-flex; }

	.dss-hero__proof { justify-content: flex-start; }
	.dss-hero__stat--mid { margin-right: 0; }

	.dss-hero__grid { grid-template-columns: 1fr; }
	.dss-news { grid-template-columns: 1fr; }
	.dss-footer__inner { grid-template-columns: 1fr; }
	.dss-steps { grid-template-columns: 1fr; gap: 2rem; }
	.dss-tiles { grid-template-columns: 1fr; }
}

/* Onder ~600px passen logo + wordmark + vier icoontjes niet meer naast elkaar
   (gemeten 423px nodig tegen ~330px beschikbaar op een 380px-scherm). */
@media (max-width: 600px) {
	.dss-brand__name { display: none; }
}

@media (max-width: 720px) {
	.dss-grid { grid-template-columns: repeat(2, 1fr); }
	.dss-footer__cols { grid-template-columns: 1fr 1fr; }
	.dss-section__head { flex-direction: column; align-items: flex-start; }
	.dss-hero__proof { gap: 1.2rem; }
	.dss-hero__stat strong { font-size: 1.3rem; }
}

@media (max-width: 420px) {
	.dss-grid { grid-template-columns: 1fr; }
	.dss-brand__mark { height: 26px; }
}

/* =========================================================================
   COOKIEVOORKEUREN
   Weigeren en accepteren zijn even makkelijk: één klik, gelijke maat en plek.
   Alles staat standaard uit; niets wordt geladen voor er is gekozen.
   ========================================================================= */

.dss-cc {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 80;
	display: flex;
	justify-content: flex-start;
	padding: clamp(0.75rem, 2vw, 1.5rem);
	pointer-events: none;
}
.dss-cc[hidden] { display: none; }

.dss-cc__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100svh - 2rem);
	overflow-y: auto;
	padding: clamp(1.3rem, 3vw, 1.9rem);
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(11, 11, 12, 0.55);
	pointer-events: auto;
	animation: dss-cc-in 0.45s var(--ease-out) both;
}
@keyframes dss-cc-in {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.dss-cc__x {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: var(--pill);
	background: transparent;
	color: rgba(247, 246, 243, 0.6);
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.dss-cc__x:hover { background: rgba(255, 255, 255, 0.1); color: var(--paper); }
.dss-cc__x svg { width: 18px; height: 18px; }

.dss-cc__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin: 0 0 0.5rem;
	padding-right: 2.5rem;
}
.dss-cc__text {
	margin: 0 0 1.1rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: rgba(247, 246, 243, 0.72);
}
.dss-cc__text a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.dss-cc__text a:hover { text-decoration: none; }

.dss-cc-cats {
	list-style: none;
	margin: 0 0 1.2rem;
	padding: 0;
	display: grid;
	gap: 0.15rem;
}
.dss-cc-cat { padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.dss-cc-cat:last-child { border-bottom: 0; }

.dss-cc-cat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.dss-cc-cat__name {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.dss-cc-cat__locked {
	font-size: 0.72rem;
	color: rgba(247, 246, 243, 0.45);
}
.dss-cc-cat__desc {
	margin: 0.25rem 0 0;
	font-size: 0.82rem;
	color: rgba(247, 246, 243, 0.55);
}

/* schakelaar */
.dss-cc-switch { position: relative; display: inline-flex; cursor: pointer; }
.dss-cc-switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}
.dss-cc-switch__slider {
	position: relative;
	display: block;
	width: 42px;
	height: 24px;
	border-radius: var(--round);
	background: rgba(255, 255, 255, 0.16);
	transition: background-color 0.22s var(--ease-out);
}
.dss-cc-switch__slider::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--paper);
	transition: transform 0.22s var(--ease-out);
}
.dss-cc-switch input:checked + .dss-cc-switch__slider { background: var(--accent); }
.dss-cc-switch input:checked + .dss-cc-switch__slider::after { transform: translateX(18px); }
.dss-cc-switch input:focus-visible + .dss-cc-switch__slider {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}

/* acties */
.dss-cc__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}
.dss-cc__btn {
	padding: 0.85rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--pill);
	font-family: var(--font-body);
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	background-size: 210% 100%;
	background-position: 0% 50%;
	transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
		transform 0.2s var(--ease-out);
}
.dss-cc__btn:hover { animation: dss-btn-shimmer 1.9s ease-in-out infinite; transform: translateY(-1px); }

.dss-cc__btn--deny {
	background-color: transparent;
	background-image: linear-gradient(92deg,
		rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0) 100%);
	color: var(--paper);
	border-color: rgba(255, 255, 255, 0.3);
}
.dss-cc__btn--deny:hover { border-color: var(--paper); }

.dss-cc__btn--accept {
	background-color: var(--accent-ink);
	background-image: linear-gradient(92deg,
		var(--accent-ink) 0%, var(--accent) 50%, var(--accent-ink) 100%);
	color: var(--white);
}

.dss-cc__save {
	display: block;
	width: 100%;
	margin-top: 0.7rem;
	padding: 0.4rem;
	border: 0;
	background: none;
	font-family: var(--font-body);
	font-size: 0.82rem;
	color: rgba(247, 246, 243, 0.6);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.dss-cc__save:hover { color: var(--accent); }

/* heropenen vanuit de footer */
.dss-cc__reopen {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: rgba(247, 246, 243, 0.7);
	cursor: pointer;
}
.dss-cc__reopen:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 480px) {
	.dss-cc__actions { grid-template-columns: 1fr; }
}

/* =========================================================================
   BLOG: kaarten, archief en artikelpagina
   ========================================================================= */

.dss-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
}

.dss-post {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out);
}
.dss-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}

.dss-post__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(145deg, #efeeea, #f9f8f5);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.dss-post__media .dss-ph { width: 58%; }

.dss-post__source {
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-xs);
	background: var(--ink);
	color: var(--white);
	font-family: var(--font-display);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dss-post__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
	padding: 0.9rem 1.1rem 1rem;
}
.dss-post__date {
	font-size: 0.76rem;
	line-height: 1.3;
	color: var(--muted);
	margin-bottom: 0.45rem;
}
.dss-post__title {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
}
.dss-post__excerpt {
	display: block;
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--muted);
}
.dss-post__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.8rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--accent-ink);
}
.dss-post:hover .dss-btn__arrow { transform: translateX(4px); }

/* --- artikelpagina -------------------------------------------------------- */

.dss-article {
	max-width: 840px;
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.dss-article__head { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.dss-article__title {
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	margin-bottom: 0.8rem;
}
.dss-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.86rem;
	color: var(--muted);
}
.dss-article__meta a { color: var(--accent-ink); }

.dss-article__body { font-size: 1.08rem; line-height: 1.7; }
.dss-article__body > * + * { margin-top: 1.2rem; }
.dss-article__body h2 {
	font-size: 1.5rem;
	margin-top: 2.4rem;
}
.dss-article__body h3 { font-size: 1.2rem; margin-top: 1.8rem; }
.dss-article__body blockquote {
	margin: 2rem 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.45;
}
.dss-article__body blockquote::before {
	content: "\201C";
	display: block;
	margin-bottom: -0.6rem;
	font-size: 2.6rem;
	line-height: 1;
	color: var(--accent);
}
.dss-article__body blockquote cite {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--font-body);
	font-size: 0.86rem;
	font-style: normal;
	color: var(--muted);
}
/* Blokcitaat op gewone pagina's (Over ons en verder). WordPress tekent er een
   streep naast maar zet de binnenruimte op nul, waardoor de tekst tegen die
   streep aan plakt. Ruimte tussen streep en tekst, en tussen citaat en bron. */
.entry-content blockquote {
	padding-inline-start: 1.4rem;
}
.entry-content blockquote cite {
	display: block;
	margin-top: 0.7rem;
	font-family: var(--font-body);
	font-size: 0.86rem;
	font-style: normal;
	color: var(--muted);
}

.dss-article__body img { border-radius: var(--radius); }
.dss-article__body figcaption {
	margin-top: 0.5rem;
	font-size: 0.82rem;
	color: var(--muted);
}

/* bronvermelding onderaan een artikel */
.dss-source {
	margin-top: 2.6rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	font-size: 0.9rem;
}
.dss-source strong { font-family: var(--font-display); }

@media (max-width: 900px) {
	.dss-posts { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) and (min-width: 901px) {
	.dss-posts { grid-template-columns: repeat(2, 1fr); }
}

/* de bloklijst van WordPress komt als <ul><li>; de kaart moet het li vullen
   en in z'n geheel klikbaar zijn via de titel-link */
.dss-posts { list-style: none; margin: 0; padding: 0; }
.dss-posts > p { display: none; }
.dss-posts > li { display: flex; }
.dss-post { position: relative; width: 100%; }
.dss-post__title a,
.dss-post__title { color: inherit; text-decoration: none; display: block; }
/* de titel-link dekt de hele kaart af, zodat je overal kunt klikken zonder
   dat er een <a> om alles heen hoeft */
.dss-post__title a::after,
a.dss-post__title::after { content: ""; position: absolute; inset: 0; }
.dss-post__media a { display: block; width: 100%; height: 100%; }
.dss-post__date { margin: 0; }

body.page-template-contact .dss-article { max-width: 1100px; }
.dss-article__image { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }
/* staat er een video in het artikel, dan is die het openingsbeeld en zou de
   uitgelichte afbeelding er dubbelop boven staan */
body.dss-has-video .dss-article__image { display: none; }
body.dss-has-video .dss-article__body > .dss-embed:first-child { margin-top: 0; }
.dss-article__image img { width: 100%; border-radius: var(--radius); }

.dss-pagination { margin-top: 2.6rem; gap: 0.5rem; }
.dss-pagination a, .dss-pagination span {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
.dss-pagination a:hover { color: var(--accent-ink); }

/* de kaarten uit de blokloop exact als die op de homepage: vaste
   beeldverhouding (anders bepaalt de foto de hoogte) en gelijke hoogte */
.dss-posts { align-items: stretch; }
.dss-posts > li { height: 100%; }
.dss-post { height: 100%; }
.dss-post__media,
figure.dss-post__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	flex: 0 0 auto;
}
.dss-post__excerpt p { margin: 0; }
.wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.8rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--accent-ink);
	text-decoration: none;
}
.wp-block-post-excerpt__more-link::after { content: "\2192"; transition: transform 0.25s var(--ease-out); }
.dss-post:hover .wp-block-post-excerpt__more-link::after { transform: translateX(4px); }

/* video-embed in een artikel */
.dss-embed { margin: 2rem 0; }
.dss-embed__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
}
.dss-embed__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.dss-embed figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted); }

/* De hoogte van het kader komt uit aspect-ratio, en daartegen kan een
   percentage-hoogte niet worden berekend: height:100% viel terug op auto,
   waardoor het beeld uit het kader stak en je alleen de bovenkant zag.
   Absoluut positioneren geeft wél een definitieve hoogte. */
.dss-post__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* =========================================================================
   404
   ========================================================================= */

.dss-404 {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: clamp(7rem, 12vh, 9rem);
	padding-bottom: clamp(3rem, 6vh, 5rem);
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	isolation: isolate;
}
.dss-404::before {
	content: "";
	position: absolute;
	top: -25%;
	left: -8%;
	width: 70%;
	height: 120%;
	background: radial-gradient(ellipse at center, rgba(239, 65, 35, 0.24), transparent 65%);
	z-index: -1;
}

/* de schoen loopt het beeld uit */
.dss-404__mark {
	position: absolute;
	right: -14%;
	bottom: -8%;
	width: min(70%, 900px);
	fill: var(--paper);
	opacity: 0.05;
	z-index: -1;
	transform: rotate(-6deg);
	animation: dss-404-walk 6s ease-in-out infinite;
}
@keyframes dss-404-walk {
	0%, 100% { transform: rotate(-6deg) translateX(0); }
	50%      { transform: rotate(-4deg) translateX(2.5%); }
}

.dss-404__inner { position: relative; width: 100%; }

.dss-404__code {
	font-family: var(--font-display);
	font-size: clamp(4rem, 14vw, 11rem);
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.05em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(247, 246, 243, 0.22);
	margin: 0 0 clamp(0.5rem, 2vh, 1.5rem);
}

.dss-404__title {
	font-size: clamp(2.2rem, 6vw, 4.2rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}
.dss-404__title em { font-style: normal; color: var(--accent); }

.dss-404__lead {
	max-width: 46ch;
	margin: clamp(1rem, 2.5vh, 1.5rem) 0 clamp(1.5rem, 3.5vh, 2.2rem);
	font-size: clamp(0.98rem, 1.4vw, 1.12rem);
	color: rgba(247, 246, 243, 0.7);
}

.dss-404__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.dss-404__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1.3rem;
	margin-top: clamp(2rem, 4vh, 3rem);
	padding-top: clamp(1.2rem, 2.5vh, 1.8rem);
	border-top: 1px solid var(--line-dark);
	font-size: 0.9rem;
}
.dss-404__links span { color: rgba(247, 246, 243, 0.5); }
.dss-404__links a {
	color: var(--paper);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.dss-404__links a:hover { color: var(--accent); border-color: var(--accent); }

/* =========================================================================
   MAATTABEL met merktabbladen
   ========================================================================= */

.dss-maat { margin: 1.6rem 0 2rem; }

.dss-maat__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 1.2rem;
}
.dss-tab {
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--white);
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
		border-color 0.2s var(--ease-out);
}
.dss-tab:hover { border-color: var(--ink); }
.dss-tab.is-on {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.dss-maat__advies {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	font-size: 0.92rem;
	color: var(--ink);
}
.dss-maat__scroll { overflow-x: auto; }
.dss-maat__table {
	width: 100%;
	min-width: 380px;
	border-collapse: collapse;
	font-size: 0.94rem;
}
.dss-maat__table th,
.dss-maat__table td {
	padding: 0.6rem 0.7rem;
	text-align: left;
	border-bottom: 1px solid var(--line);
}
.dss-maat__table th {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.dss-maat__table tbody tr:hover { background: var(--accent-soft); }

/* =========================================================================
   VEELGESTELDE VRAGEN
   ========================================================================= */

.dss-faq { margin-top: 0.5rem; }
.dss-faq__group + .dss-faq__group { margin-top: clamp(2rem, 4vw, 3rem); }

.dss-faq__heading {
	font-family: var(--font-display);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.9rem;
}

.dss-faq__item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	margin-bottom: 0.6rem;
	overflow: hidden;
	transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.dss-faq__item:hover { border-color: var(--ink); }
.dss-faq__item[open] {
	border-color: transparent;
	box-shadow: var(--shadow-md);
}

.dss-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.2rem;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
}
.dss-faq__item summary::-webkit-details-marker { display: none; }

.dss-faq__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: var(--pill);
	background: var(--accent-soft);
	color: var(--accent-ink);
	transition: transform 0.25s var(--ease-out), background-color 0.2s var(--ease-out);
}
.dss-faq__icon svg { width: 15px; height: 15px; }
.dss-faq__item[open] .dss-faq__icon {
	transform: rotate(45deg);
	background: var(--accent);
	color: var(--white);
}

.dss-faq__answer {
	padding: 0 1.2rem 1.15rem;
	font-size: 0.96rem;
	line-height: 1.6;
	color: var(--muted);
}
.dss-faq__answer p { margin: 0; }
.dss-faq__answer a { color: var(--accent-ink); }

/* =========================================================================
   CONTACT
   ========================================================================= */

/* Twee kolommen: gegevens links, formulier rechts. De contactpagina is
   breder dan de andere pagina's, anders wordt elke kolom te smal. */
.dss-contact {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.dss-contact__intro {
	max-width: 52ch;
	margin-bottom: clamp(1.8rem, 4vw, 2.6rem);
	font-size: 1.08rem;
	color: var(--muted);
}

.dss-contact__block + .dss-contact__block { margin-top: 1.6rem; }
.dss-contact__block h2 {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-bottom: 0.5rem;
}
.dss-contact__block p {
	margin: 0 0 0.35rem;
	font-size: 0.98rem;
	line-height: 1.55;
}
.dss-contact__block a { color: var(--ink); text-underline-offset: 3px; }
.dss-contact__block a:hover { color: var(--accent-ink); }
.dss-contact__block--klein p { font-size: 0.88rem; color: var(--muted); }

.dss-contact__form {
	position: sticky;
	top: 6.5rem;
	display: grid;
	gap: 0.9rem;
	padding: clamp(1.4rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
	box-shadow: var(--shadow-md);
}
.dss-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.dss-field { display: grid; gap: 0.35rem; }
.dss-field label {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.dss-field input,
.dss-field textarea {
	padding: 0.85rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font-family: var(--font-body);
	font-size: 0.98rem;
	color: var(--ink);
}
.dss-field textarea { min-height: 160px; resize: vertical; }
.dss-field input:focus,
.dss-field textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	background: var(--white);
}
.dss-contact__hp { position: absolute; left: -9999px; }
.dss-contact__note { margin: 0; font-size: 0.8rem; color: var(--muted); }

.dss-notice {
	padding: 0.95rem 1.15rem;
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
	font-size: 0.94rem;
	margin-bottom: 1.5rem;
}
.dss-notice--fout { background: var(--line); }

/* De uitleg onder het formulier, over de volle breedte: naast het formulier
   werd de kolom een lange smalle sliert. */
.dss-contact__onder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--line);
}
.dss-contact__onder .dss-contact__block + .dss-contact__block { margin-top: 0; }

@media (max-width: 900px) {
	.dss-contact { grid-template-columns: 1fr; }
	.dss-contact__form { position: static; order: -1; }
	.dss-contact__onder { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 720px) {
	.dss-contact__row { grid-template-columns: 1fr; }
}

.dss-maat__waarschuwing {
	margin: 0 0 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--muted);
}
.dss-maat__waarschuwing strong { color: var(--ink); }
.dss-maat__table--smal { min-width: 0; max-width: 280px; }

.dss-maat__sex { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.dss-chip {
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--white);
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
		border-color 0.2s var(--ease-out);
}
.dss-chip:hover { border-color: var(--ink); color: var(--ink); }
.dss-chip.is-on {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* =========================================================================
   TELEFOON: hero compacter
   ========================================================================= */

@media (max-width: 620px) {
	/* de twee knoppen naast elkaar in plaats van onder elkaar */
	.dss-hero__actions { flex-wrap: nowrap; gap: 0.55rem; }
	.dss-hero__actions .dss-btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding: 0.85rem 0.7rem;
		font-size: 0.82rem;
	}
	.dss-hero__actions .dss-btn__arrow { display: none; }

	/* de drie cijfers op een rij houden */
	.dss-hero__proof {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0.6rem;
		margin-top: 1.4rem;
		padding-top: 1rem;
	}
	.dss-hero__stat { min-width: 0; }
	.dss-hero__stat strong { font-size: 1.02rem; }
	.dss-hero__stat span { font-size: 0.66rem; line-height: 1.25; }
	.dss-hero__stat--mid { margin-right: 0; }

	.dss-hero__rating-row { gap: 0.3rem; }
	.dss-hero__rating-row .dss-stars { gap: 1px; }
	.dss-hero__rating-row .dss-star-slot,
	.dss-hero__rating-row .dss-star { width: 11px; height: 11px; }
}

/* modelformulier voor herroeping */
.dss-formulier {
	margin: 1.5rem 0 2rem;
	padding: clamp(1.2rem, 3vw, 1.9rem);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}
.dss-formulier__intro {
	margin: 0 0 1.2rem;
	font-size: 0.88rem;
	font-style: italic;
	color: var(--muted);
}
.dss-formulier dl {
	display: grid;
	grid-template-columns: minmax(0, 12rem) 1fr;
	gap: 0.55rem 1.2rem;
	margin: 0;
	font-size: 0.95rem;
}
.dss-formulier dt {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	padding-top: 0.25rem;
}
.dss-formulier dd { margin: 0; }
.dss-formulier__lijn {
	border-bottom: 1px solid var(--line);
	min-height: 1.9rem;
	font-size: 0.85rem;
	color: var(--muted);
}

@media (max-width: 640px) {
	.dss-formulier dl { grid-template-columns: 1fr; gap: 0.15rem 0; }
	.dss-formulier dd + dt { margin-top: 0.9rem; }
}

/* =========================================================================
   COLLECTIEPAGINA'S (categorie, merk, nieuw, sale)
   ========================================================================= */

.dss-collectie__intro {
	max-width: 58ch;
	margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
	font-size: 1.06rem;
	color: var(--muted);
}

/* snelle doorstroom naar de andere collecties */
.dss-collectie__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.dss-collectie__nav a {
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--line);
	border-radius: var(--pill);
	background: var(--white);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
		border-color 0.2s var(--ease-out);
}
.dss-collectie__nav a:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.dss-collectie__nav a[aria-current] {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* de plek waar straks de Shopify-collectie komt */
.dss-binnenkort {
	display: grid;
	gap: 1.1rem;
	justify-items: center;
	text-align: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--white);
}
.dss-binnenkort__mark {
	width: min(220px, 55%);
	fill: var(--ink);
	opacity: 0.08;
}
/* De productkaart komt uit een shortcode, dus de titel is een <a> die via CSS
   de hele kaart afdekt. Een <a> om alles heen kan niet: wpautop breekt die op
   en dan maakt de parser er spookkaarten van. */
.dss-card { position: relative; }
.dss-card__name {
	color: inherit;
	text-decoration: none;
	display: block;
}
.dss-card__name::after { content: ""; position: absolute; inset: 0; }
.dss-card__name:hover { color: var(--accent-ink); }
.dss-leeg { display: block; color: var(--muted); }

/* Het "binnenkort"-blok komt nu ook uit een shortcode en bestaat daarom uit
   <span>'s in plaats van <h2> en <p>: wpautop breekt alinea's af. */
.dss-binnenkort__titel {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}
.dss-binnenkort__tekst { display: block; max-width: 46ch; color: var(--muted); }

.dss-binnenkort h2 {
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	text-transform: uppercase;
}
.dss-binnenkort p { max-width: 46ch; margin: 0; color: var(--muted); }
.dss-binnenkort__acties { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 0.4rem; }

/* merkoverzicht */
.dss-merken {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: clamp(0.8rem, 1.6vw, 1.2rem);
}
.dss-merk {
	display: grid;
	place-items: center;
	gap: 0.7rem;
	min-height: 130px;
	padding: 1.4rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out);
}
.dss-merk:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.dss-merk svg { height: 30px; width: auto; max-width: 100%; fill: currentColor; }
.dss-merk span {
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
}
.dss-merk--stil { opacity: 0.55; }

/* zoekpagina */
.dss-zoek__form { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.dss-zoek__form input[type="search"] {
	flex: 1 1 260px;
	padding: 0.95rem 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--white);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
}
.dss-zoek__form input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.dss-zoek__leeg { padding: 2rem 0; color: var(--muted); }

.dss-merklogo { display: block; margin-bottom: 1.4rem; }
.dss-merklogo svg { height: 46px; width: auto; max-width: 220px; fill: var(--ink); }

/* =========================================================================
   COLLECTIEPAGINA: volle breedte, want hier komen productrasters
   ========================================================================= */

.dss-collectie__titel {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	margin-bottom: 0.9rem;
}
.dss-collectie__head { margin-bottom: clamp(1rem, 2vw, 1.4rem); }

/* De tekstblokken houden een leesbare regellengte; alleen de rasters en de
   navigatie mogen de volle breedte pakken. */
.dss-collectie__body > p,
.dss-collectie__body > h2,
.dss-collectie__body > h3,
.dss-collectie__body > ul,
.dss-collectie__body > ol { max-width: 68ch; }
.dss-collectie__body > h2 { margin-top: clamp(2.2rem, 4vw, 3rem); }
.dss-collectie__body > * + * { margin-top: 1.1rem; }

/* de dealkaart toont nu een echte winkelfoto in plaats van een placeholder */
.dss-dealcard__media--foto { background: var(--ink); }
.dss-dealcard__media--foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.dss-dealcard__media--foto .dss-dealcard__badge { z-index: 1; }

/* het "binnenkort" blok staat op de homepage op een lichte sectie */
.dss-section .dss-binnenkort { margin-top: 0; }

/* foto met bijschrift in een artikel of pagina */
/* Foto's krijgen een vaste verhouding en een plafond, zodat een staand beeld
   nooit de halve pagina inneemt. */
.dss-foto { margin: clamp(1.6rem, 3vw, 2.4rem) 0; max-width: 880px; }
.dss-foto img {
	width: 100%;
	max-height: 520px;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--radius);
	display: block;
}
.dss-foto figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted); }

/* ===========================================================================
   Productpagina van de Shopify-plugin
   =========================================================================== */

/* De plugin rendert deze pagina zonder rekening te houden met onze vaste kop,
   waardoor het product eronder verdween. */
.shopify-product-details {
	padding-top: clamp(5.5rem, 9vw, 7rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}
.shopify-product-details .single-product-layout {
	/* Bewust 1224 en niet --wrap: de productpagina is smaller dan de homepage,
	   zoals bij de collectiepagina's. Alleen de zijmarge is gelijk. */
	max-width: 1224px;
	margin-inline: auto;
	/* Dezelfde zijmarge als .dss-wrap, via dezelfde variabele. Met een eigen
	   clamp liep hij twee pixel uit de pas met de rest van de site. */
	padding-inline: var(--gutter);
}

/* De plugin toont één foto zonder galerij. Onze eigen galerij komt ervoor in
   de plaats, dus die ene foto gaat weg. */
.single-product__main-image { display: none; }

.dss-galerij { display: grid; gap: 0.7rem; }

/* Het vak volgt de vorm van de foto's zelf (staand, 3:4). In een vierkant vak
   viel er een derde af, en omdat de schoen in die foto's laag staat leek hij
   daardoor uit het midden te zitten. Nu valt er niets meer weg. */
.dss-galerij__hoofd {
	position: relative;
	aspect-ratio: 3 / 4;
	/* De hoofdfoto plus de strook duimnagels past altijd binnen het scherm:
	   schermhoogte min de kop, de duimen en wat lucht. */
	max-height: calc(100svh - 20rem);
	margin-inline: auto;
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--white);
}
/* Het vak helemaal gevuld, met het midden van de foto als ankerpunt. De foto's
   zijn staand en het vak is vierkant, dus er gaat boven en onder evenveel af. */
.dss-galerij__groot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	opacity: 0;
	transition: opacity 0.25s var(--ease-out);
}
.dss-galerij__groot.is-actief { opacity: 1; }

.dss-galerij__duimen {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: thin;
}
.dss-galerij__duim {
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	background: var(--white);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
/* Inzoomen om details te bekijken. Het punt waar je wijst blijft staan, zodat
   je gericht naar het stiksel of het label kunt kijken. Het ankerpunt wordt in
   JavaScript meegegeven via --dss-zoom-x en --dss-zoom-y. */
.dss-galerij__groot.is-actief {
	transition: opacity 0.25s var(--ease-out), transform 0.28s var(--ease-out);
	transform-origin: var(--dss-zoom-x, 50%) var(--dss-zoom-y, 50%);
}
.dss-galerij__hoofd.is-zoom .dss-galerij__groot.is-actief {
	transform: scale(2.2);
	transition: transform 0.12s linear, opacity 0.25s var(--ease-out);
}
.dss-galerij__hoofd { cursor: zoom-in; }
.dss-galerij__hoofd.is-zoom { cursor: zoom-out; }

/* Wie beweging heeft uitgezet, krijgt geen zoom. */
@media (prefers-reduced-motion: reduce) {
	.dss-galerij__hoofd.is-zoom .dss-galerij__groot.is-actief { transform: none; }
}

.dss-galerij__duim img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Op een telefoon zijn de merklogo's zo groot dat je eindeloos moet scrollen
   voordat je bij de producten bent. Vier op een rij. */
@media (max-width: 640px) {
	.dss-merken { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
	.dss-merk {
		min-height: 62px;
		padding: 0.55rem 0.35rem;
		gap: 0.3rem;
		border-radius: var(--radius-sm);
	}
	.dss-merk svg, .dss-merk img, .dss-merklogo { max-width: 100%; }
	.dss-merk > span:last-child { font-size: 0.58rem; letter-spacing: 0.03em; }
}

/* Onze eigen omschrijving, met de alinea's die de plugin platsloeg. */
.dss-pdp-omschrijving p { margin: 0 0 0.8rem; }
.dss-pdp-omschrijving p:last-child { margin-bottom: 0; }
.dss-galerij__duim:hover { transform: translateY(-2px); }
.dss-galerij__duim.is-actief { border-color: var(--accent); border-width: 2px; }

/* De omschrijving stond dichtgeklapt. Hij mag meteen leesbaar zijn. */
.single-product__accordion__content.is-open {
	display: block !important;
	max-height: none !important;
	overflow: visible !important;
}
.single-product__accordion__header {
	font-family: var(--font-display);
	font-weight: 700;
}

/* De dealkaart in de hero komt uit een shortcode en bestaat daarom uit
   <span>'s. */
.dss-dealcard { display: block; }
.dss-dealcard__media { display: block; }
.dss-dealcard__name { display: block; }
.dss-dealcard__prijs {
	display: block;
	margin-bottom: 0.9rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--accent-ink);
}

/* ===========================================================================
   Winkelwagen van de Shopify-plugin
   =========================================================================== */

/* <shopify-cart> is een custom element zonder eigen display, dus de browser
   behandelt het als inline met breedte nul. De inhoud viel daardoor buiten de
   pagina in plaats van erin. */
shopify-cart,
shopify-context,
shopify-cart-summary { display: block; width: 100%; }

.shopify-cart-page { padding-block: clamp(1rem, 3vw, 2rem); }

/* De omschrijving staat vast open, dus de kop is geen knop meer. */
.single-product__accordion__header.is-vast {
	pointer-events: none;
	cursor: default;
}
.single-product__accordion__header.is-vast::after,
.single-product__accordion__header.is-vast svg { display: none; }

/* Op een breed scherm is de rechterkolom vaak langer dan de foto's. Laat de
   galerij dan meelopen, zodat je het paar blijft zien terwijl je leest.
   Alleen waar er ook echt twee kolommen naast elkaar staan. */
@media (min-width: 1000px) {
	.single-product__media {
		position: sticky;
		/* Gelijk aan de plek waar de galerij bij niet-gescrolde pagina al staat:
		   de bovenmarge van de sectie plus de binnenmarge van de kaart. Zo zet
		   hij meteen vast en schuift hij niet eerst een stukje mee. */
		top: calc(clamp(5.5rem, 9vw, 7rem) + 2rem);
		align-self: start;
	}
}

/* Het aantal in het karretje is verborgen zolang de winkelwagen leeg is.
   Zonder !important wint de display-regel hierboven van het hidden-attribuut. */
.dss-cartcount[hidden] { display: none !important; }

/* Waarschuwing bij een ouder paar. Opvallend genoeg om gelezen te worden,
   rustig genoeg om niet als foutmelding over te komen. */
.dss-letop {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.1rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
}
.dss-letop__kop {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-ink);
}
.dss-letop__tekst { font-size: 0.88rem; line-height: 1.55; color: var(--ink); }
.dss-letop a { color: var(--accent-ink); }

/* De omschrijving hoeft geen eigen kader: hij hoort gewoon onder de knoppen
   te staan, met wat lucht ertussen. */
.single-product__accordion,
.single-product__accordion__item {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.single-product__accordion { margin-top: 1.4rem !important; }
.single-product__accordion__header {
	padding: 0 0 0.5rem !important;
	background: none !important;
	border: 0 !important;
}
.single-product__accordion__content { padding: 0 !important; }

/* ===========================================================================
   Eigen winkelwagen
   =========================================================================== */

.dss-kar { display: grid; gap: 1.6rem; margin-top: 1.4rem; }
@media (min-width: 900px) {
	.dss-kar { grid-template-columns: 1fr 340px; align-items: start; }
}
.dss-kar.is-bezig { opacity: 0.55; pointer-events: none; }
.dss-kar__laden { color: var(--muted); }

.dss-kar__lijst { display: grid; gap: 0.9rem; }
.dss-kar__rij {
	display: grid;
	grid-template-columns: 92px 1fr auto auto;
	gap: 1rem;
	align-items: center;
	padding: 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
}
.dss-kar__beeld {
	display: block;
	width: 92px;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-xs);
	overflow: hidden;
	background: var(--paper);
}
.dss-kar__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

.dss-kar__info { display: grid; gap: 0.25rem; justify-items: start; }
.dss-kar__naam {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	color: inherit;
	text-decoration: none;
}
.dss-kar__naam:hover { color: var(--accent-ink); }
.dss-kar__maat { font-size: 0.82rem; color: var(--muted); }
.dss-kar__weg {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.8rem;
	color: var(--muted);
	text-decoration: underline;
	cursor: pointer;
}
.dss-kar__weg:hover { color: var(--accent-ink); }

.dss-kar__aantal {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	overflow: hidden;
}
.dss-kar__aantal button {
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	color: var(--ink);
}
.dss-kar__aantal button:hover { background: var(--paper); }
.dss-kar__aantal span { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }

.dss-kar__prijs {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	white-space: nowrap;
}

.dss-kar__slot {
	display: grid;
	gap: 0.7rem;
	padding: 1.2rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--white);
	position: sticky;
	top: calc(var(--dss-header-hoogte, 92px) + 1.5rem);
}
.dss-kar__totaal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--font-display);
	font-size: 1.1rem;
}
.dss-kar__totaal strong { font-size: 1.35rem; color: var(--accent-ink); }
.dss-kar__note { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.dss-kar__afrekenen { width: 100%; justify-content: center; }
.dss-kar__verder { text-align: center; font-size: 0.85rem; color: var(--muted); }

.dss-kar__leeg { display: grid; gap: 0.6rem; justify-items: start; }
.dss-kar__leeg p { margin: 0; color: var(--muted); }
.dss-kar__acties { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; }
.dss-kar__fout { color: var(--accent-ink); }

@media (max-width: 560px) {
	.dss-kar__rij { grid-template-columns: 72px 1fr; row-gap: 0.7rem; }
	.dss-kar__beeld { width: 72px; }
	.dss-kar__aantal { grid-column: 1 / 2; }
	.dss-kar__prijs { grid-column: 2 / 3; text-align: right; }
}
.dss-kar__enkel { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* ===========================================================================
   Zoekpaneel in de kop
   =========================================================================== */

.dss-zoekpaneel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	padding: 1rem 0 1.3rem;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	animation: dss-zoek-in 0.18s var(--ease-out);
}
@keyframes dss-zoek-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.dss-zoekpaneel__form {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--paper);
}
.dss-zoekpaneel__icoon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--muted); }
.dss-zoekpaneel__form input {
	flex: 1;
	border: 0;
	background: none;
	font-size: 1rem;
	font-family: inherit;
	color: var(--ink);
	outline: none;
	min-width: 0;
}
.dss-zoekpaneel__sluit {
	border: 0;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	padding: 0 0.2rem;
}
.dss-zoekpaneel__sluit:hover { color: var(--ink); }

.dss-zoekpaneel__uit { display: grid; gap: 0.3rem; margin-top: 0.7rem; }
.dss-zoekpaneel__uit:empty { margin-top: 0; }

.dss-zoekhit {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 0.8rem;
	align-items: center;
	padding: 0.5rem;
	border-radius: var(--radius-xs);
	color: inherit;
	text-decoration: none;
}
.dss-zoekhit:hover { background: var(--paper); }
.dss-zoekhit__beeld {
	width: 52px;
	aspect-ratio: 3 / 4;
	border-radius: 4px;
	overflow: hidden;
	background: var(--paper);
}
.dss-zoekhit__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dss-zoekhit__tekst { display: grid; gap: 0.1rem; min-width: 0; }
.dss-zoekhit__merk {
	font-family: var(--font-display);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.dss-zoekhit__naam {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dss-zoekhit__maat { font-size: 0.76rem; color: var(--muted); }
.dss-zoekhit__prijs {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--accent-ink);
	white-space: nowrap;
}

.dss-zoekpaneel__leeg { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--muted); }
.dss-zoekpaneel__alles {
	display: block;
	margin-top: 0.4rem;
	padding: 0.55rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--accent-ink);
	border-top: 1px solid var(--line);
}

/* De dealkaart in de hero is in zijn geheel klikbaar: de knop onderin dekt via
   ::after de hele kaart af. De knop blijft gewoon een knop, dus toetsenbord en
   schermlezer werken zoals ze horen. */
.dss-dealcard--klik { position: relative; cursor: pointer; }
.dss-dealcard--klik .dss-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	/* De foto in de kaart is zelf absoluut gepositioneerd en schilderde over
	   deze laag heen, waardoor de klik op de foto landde in plaats van op de
	   link. Vandaar een expliciete stapelvolgorde. De knop zelf blijft
	   ongepositioneerd: zodra die relative wordt, valt deze laag terug op de
	   knop in plaats van op de hele kaart. */
	border-radius: inherit;
}
.dss-dealcard__vlak {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}
.dss-dealcard--klik .dss-btn { position: relative; z-index: 4; }
.dss-dealcard--klik .dss-dealcard__media { overflow: hidden; }
.dss-dealcard--klik .dss-dealcard__media img { transition: transform 0.5s var(--ease-out); }
.dss-dealcard--klik:hover .dss-dealcard__media img { transform: scale(1.05); }
.dss-dealcard--klik:hover .dss-dealcard__name { color: var(--accent-ink); }
.dss-dealcard--klik:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Het merklogo naast de titel op een merkpagina. */
.dss-merkkop {
	display: flex;
	align-items: center;
	gap: clamp(0.7rem, 1.6vw, 1.1rem);
	flex-wrap: wrap;
}
.dss-merkkop__logo {
	display: grid;
	place-items: center;
	width: clamp(44px, 5.5vw, 60px);
	height: clamp(44px, 5.5vw, 60px);
	flex: 0 0 auto;
}
.dss-merkkop__logo svg { width: 100%; height: 100%; object-fit: contain; }
.dss-merkkop .dss-collectie__titel { margin: 0; }

/* Minder lucht tussen de alinea's van de omschrijving: het waren korte stukjes
   met de spatiëring van lange alinea's. */
.dss-pdp-omschrijving p { margin: 0 0 0.5rem; }

/* Op een telefoon is de kop hoger ten opzichte van het scherm, dus daar mag er
   meer lucht boven de pagina. */
@media (max-width: 700px) {
	/* Alleen de eerste sectie van een sjabloon, die zijn bovenmarge als clamp
	   inline meekrijgt. Niet elke sectie met een inline padding-top: de
	   Verhalen-sectie zet die juist op 0 en kreeg zo 120px opgelegd. */
	.dss-section[style*="padding-top:clamp"] { padding-top: 7.5rem !important; }
	.shopify-product-details { padding-top: 7rem; }
}

/* Acht merken op een rij. De vakken worden krapper, maar het logo (30px hoog)
   en het bijschrift blijven even groot: de ruimte komt uit de binnenmarge en de
   hoogte, niet uit de inhoud. Zou ik alleen de vakken smaller maken, dan zou
   max-width de bredere woordmerken alsnog verkleinen. */
@media (min-width: 1000px) {
	.dss-merken {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 0.7rem;
	}
	.dss-merk {
		min-height: 92px;
		padding: 0.85rem 0.45rem;
		gap: 0.45rem;
	}
}

/* Saucony is het breedste woordmerk van de dertien en drukt in een rij van acht
   tegen de rand aan. Alleen dat logo iets kleiner; de rest blijft zoals hij is. */
.dss-merk--saucony svg { height: 22px; }
.dss-merk--asics svg { height: 24px; }

/* Het logo hoort optisch op de hoogte van de letters van de titel, niet op het
   midden van het hele tekstblok. De titel heeft regelafstand boven en onder de
   letters, waardoor midden-uitlijnen het logo te hoog laat lijken. */
.dss-merkkop { align-items: baseline; }
.dss-merkkop__logo { align-self: center; transform: translateY(0.12em); }

/* De omschrijving staat in een smalle kolom naast de foto's. De regelafstand
   van 1,6 die de rest van de site gebruikt is daar te ruim: het leest als
   losse regels in plaats van als een alinea. */
.dss-pdp-omschrijving { line-height: 1.45; }
.dss-pdp-omschrijving p { margin: 0 0 0.45rem; }
.dss-pdp-omschrijving p:last-child { margin-bottom: 0; }

/* Productpagina op een telefoon: de plugin zet 32px binnenruimte én 32px
   tussenruimte op de container. Op een scherm van 390px gaat daar 64px aan
   breedte in zitten, waardoor de foto 291px breed werd terwijl een kaart op de
   homepage 351px is. De zijmarge komt nu van de laag erboven, gelijk aan de
   .dss-wrap van de rest van de site. */
@media (max-width: 700px) {
	.shopify-product-details {
		/* Zo veel dat de foto even ver onder de kop begint als op de
		   collectiepagina's, ongeveer 35px. */
		padding-top: 7.25rem;
		padding-bottom: 2.5rem;
	}
	.single-product__container {
		padding: 0 !important;
		gap: 1.1rem !important;
	}
	/* De container mocht zijn binnenruimte kwijt, want die at de breedte op.
	   De witte kaart eromheen houdt hem wel: anders plakt de tekst tegen de
	   rand van de kaart. */
	.single-product__details { padding: 1rem !important; }
	.single-product__info { padding: 0 !important; }
}