/* =========================================================================
   Mimoda — Homepage. Gescoped op .mimoda-* (home-secties).
   1:1 op Figma "Home" (142:498). Content-container 1320px (x300–x1620).
   ========================================================================= */

/* --- 1. Hero (3 beelden + Shop now) ---------------------------------- */
.mimoda-hero { position: relative; }
.mimoda-hero__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.mimoda-hero__grid img {
	width: 100%;
	height: min(40vw, 768px);
	object-fit: cover;
	display: block;
}
.mimoda-hero__cta {
	position: absolute;
	left: 50%;
	bottom: clamp(40px, 5.8vw, 112px);
	transform: translateX(-50%);
	min-width: 188px;
}
/* De generieke .mimoda-btn-hover zou hier de translateX(-50%)-centrering
   overschrijven; daarom combineren we de lift/klik mét de horizontale centrering. */
.mimoda-hero__cta:hover { transform: translateX(-50%) translateY(var(--mimoda-btn-lift)); }
.mimoda-hero__cta:active { transform: translateX(-50%) translateY(var(--mimoda-btn-press)); }

/* --- 2. Categorie-tegels (tekst over beeld) -------------------------- */
.mimoda-cats { padding-block: 83px 66px; }
.mimoda-cats__nav { display: none; } /* alleen zichtbaar op de mobiele slider (≤981) */
.mimoda-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 21px;
}
.mimoda-cat { position: relative; display: block; color: #fff; transition: transform .3s ease; will-change: transform; }
.mimoda-cat:hover { transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
	.mimoda-cat { transition: none; }
	.mimoda-cat:hover { transform: none; }
}
.mimoda-cat__media {
	position: relative;
	display: block;
	aspect-ratio: 426 / 648;
	overflow: hidden;
	border-radius: 2px;
}
.mimoda-cat__media img { width: 100%; height: 100%; object-fit: cover; }
.mimoda-cat__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
.mimoda-cat__title {
	position: absolute;
	left: 30px;
	bottom: 66px;
	font-family: var(--mimoda-font);
	font-weight: 800;
	font-size: 28px;
	text-transform: uppercase;
	line-height: 1;
	z-index: 1;
}
.mimoda-cat__link {
	position: absolute;
	left: 30px;
	bottom: 34px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	z-index: 1;
}
.mimoda-cat__link svg { width: 18px; height: 18px; }

/* --- Sectietitel (Abril 40px) — zwart (Figma 96:718: "Finish the look" zwart) --- */
.mimoda-section-title { font-size: 40px; margin: 0 0 26px; }

/* --- Volle-breedte kleurbanden -------------------------------------- */
.mimoda-band { width: 100%; }
/* Lila band (klant 09-09): op élk formaat de orchidee-accent i.p.v. het roze uit
   design 252:1742. Stond sinds 28-08 alleen op telefoon zo (de homepage oogde daar
   te roze) en trekt nu door naar tablet en desktop, zodat de band op alle breedtes
   hetzelfde leest. Zelfde tint als de primaire knoppen — geen nieuwe kleur. Het
   ≤981-blok onderaan zet alleen nog de padding. */
.mimoda-favs { background: var(--mimoda-accent); padding-block: 53px 66px; }

/* --- Productkaart-atomen (maat-chips + kleurstalen) -----------------
   Gebruikt door de loop-productkaart woocommerce/content-product.php (winkel,
   homepage-sliders én winkelwagen-cross-sell). De kaart-layout zelf staat in
   shop.css (.mimoda-product*). */
.mimoda-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 27px;
	height: 24px;
	padding: 0 8px;
	background: var(--mimoda-pink-soft);
	color: #ff8cbe; /* design 252:1742 — maat-chip tekst roze, niet coral-ink */
	font-size: 12px;
	border-radius: 2px;
}
.mimoda-swatch {
	width: 20px;
	height: 20px;
	border-radius: 2px;
	display: inline-block;
	border: 1px solid rgba(0, 0, 0, .08);
}

/* Klikbare kaart-opties (variabele producten, klantwens 27-07): chips/stalen zijn
   dan <button>s (content-product.php) — reset zodat ze er identiek uitzien, plus
   een vaste selectiestaat in dezelfde vormtaal als de shop-filters (shop.css:
   chip = roze rand, staal = coral-ink outline). Gedrag: theme.js initCardOptions. */
button.mimoda-chip {
	border: 1px solid transparent; /* reserveert de selectierand → geen versprong */
	font-family: var(--mimoda-font);
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
}
button.mimoda-swatch {
	padding: 0;
	cursor: pointer;
}
button.mimoda-chip:disabled,
button.mimoda-swatch:disabled { cursor: default; }
/* Hover = gevuld #ff8cbe met witte tekst (klantwens 27-07) — zelfde taal als het
   geselecteerde maat-item in het filtermenu. */
button.mimoda-chip:not(:disabled):hover {
	background: var(--mimoda-pink);
	border-color: var(--mimoda-pink);
	color: #fff;
}
button.mimoda-swatch:not(:disabled):not(.is-selected):hover { outline: 2px solid rgba(0, 0, 0, .18); outline-offset: 2px; }
.mimoda-chip.is-selected { border-color: var(--mimoda-pink); }   /* = filter-maat checked */
.mimoda-swatch.is-selected { outline: 2px solid var(--mimoda-coral-ink); outline-offset: 2px; } /* = filter-kleur checked */

/* Mobiel/tablet (zelfde grens als de hamburger-layout): chips gevuld roze + witte
   tekst — klantwens 06-08, de soft-tint was op een telefoon slecht zichtbaar; desktop
   houdt het lichte design hierboven. Geselecteerd = paars gevuld, want de roze
   selectierand valt weg op de roze vulling (maat-selectie = paars, overal). Ná de
   desktop-staten geplaatst: gelijke specificiteit, dus de volgorde beslist. */
@media (max-width: 981px) {
	.mimoda-chip { background: var(--mimoda-pink); color: #fff; }
	.mimoda-chip.is-selected { background: var(--mimoda-accent); border-color: var(--mimoda-accent); }
}

/* Uitzondering op de "Shop our favs"-band: die is lila, en daartegen valt zowel de
   roze soft-tint van de desktop-chip als de gevulde roze chip van mobiel vrijwel
   weg (contrast met de band 1,03:1). Op die band dus wit met lila tekst, en
   hover/selectie de omkering met een witte rand — zonder die rand loopt de gevulde
   chip naadloos over in de band. Sinds 09-09 op élk formaat, met de band mee (was
   alléén ≤981, toen de band vanaf 982 nog roze was). Ná zowel de desktop-staten als
   het ≤981-blok hierboven, en hoger van specificiteit dan beide. */
.mimoda-favs .mimoda-chip { background: #fff; color: var(--mimoda-accent); }
.mimoda-favs button.mimoda-chip:not(:disabled):hover,
.mimoda-favs .mimoda-chip.is-selected {
	background: var(--mimoda-accent);
	border-color: #fff;
	color: #fff;
}
/* Uitverkocht: zelfde witte basis, zodat alleen de schuine koraalstreep en de
   grijze tekst het verschil maken (streep = achtergrond-SVG uit shop.css). */
.mimoda-favs .mimoda-product__sizes .mimoda-chip.is-unavailable { background-color: #fff; }

/* --- 4. Meer dan alleen een webshop --------------------------------- */
.mimoda-store { padding-block: 62px; }
.mimoda-store__inner {
	display: grid;
	grid-template-columns: minmax(0, 628px) minmax(0, 538px);
	justify-content: start;
	column-gap: 54px;
	align-items: start;
}
.mimoda-store__title { font-size: 50px; line-height: 1.05; margin: 0 0 24px; max-width: 612px; }
.mimoda-store__text p { font-size: 14px; line-height: 24px; margin: 0 0 28px; max-width: 628px; }
.mimoda-store__cta { min-width: 276px; }
.mimoda-store__media { position: relative; }
.mimoda-store__photo {
	width: 100%;
	aspect-ratio: 538 / 403;
	object-fit: cover;
	border-radius: var(--mimoda-radius);
}
.mimoda-store__badge {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 55px;
	padding: 0 18px;
	background: var(--mimoda-accent);
	color: #fff;
	font-family: var(--mimoda-display);
	font-size: 24px;
	/* Zit in de linkerbovenhoek van de foto: alleen linksboven + rechtsonder afgerond
	   (rechtsboven en linksonder vlak tegen de fotoranden). */
	border-radius: var(--mimoda-radius) 0 var(--mimoda-radius) 0;
}
.mimoda-store__badge svg { width: 20px; height: 20px; }

/* --- 5. Finish the look --------------------------------------------- */
.mimoda-looks { padding-block: 80px 60px; }

/* --- 6. Stay up to date --------------------------------------------- */
.mimoda-stay { background: var(--mimoda-gray); padding-block: 80px; }
.mimoda-stay__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.mimoda-stay__title { font-size: 50px; color: #fec2dc; margin: 0 0 18px; } /* design 252:1742 — roze */
.mimoda-stay__text { font-size: 14px; line-height: 26px; margin: 0 0 24px; }
.mimoda-stay__social { display: flex; justify-content: center; gap: 14px; }
.mimoda-stay__social a { color: var(--mimoda-accent); display: inline-block; line-height: 0; }
.mimoda-stay__social svg { width: 42px; height: 42px; }
/* Rondjes goud → roze #fec2dc op hover, met een kleine vertraging (klantwens 06-08).
   De SVG's staan hiervoor inline in de HTML (mimoda_inline_svg) — als <img> kon CSS
   niet bij de fill. Enkel op hover-apparaten (touch laat anders de kleur "plakken"). */
.mimoda-stay__social svg path { transition: fill .3s ease .12s; }
@media (hover: hover) {
	.mimoda-stay__social a:hover svg path { fill: #fec2dc; }
}

/* --- 7. Over Mimoda -------------------------------------------------- */
.mimoda-about { padding-block: 67px 47px; }
.mimoda-about__title { font-size: 40px; margin: 0 0 24px; }
.mimoda-about__text { position: relative; font-size: 14px; line-height: 26px; margin: 0 0 10px; max-width: 1316px; }
/* Alinea's uit de tekstverwerker: de tussenruimte is één lege regel (26px =
   line-height), zodat het er net zo uitziet als toen dit veld nog platte tekst
   met dubbele regeleinden was. */
.mimoda-about__text > p { margin: 0 0 26px; }
.mimoda-about__text > p:last-child { margin-bottom: 0; }
/* Tussenkoppen uit de tekstverwerker. Zelfde maatvoering als de SEO-tekst op de
   shoppagina (shop.css: .mimoda-shop-seo__text h2/h3), zodat de twee SEO-blokken
   op de site hetzelfde ogen. Meer ruimte boven dan onder de kop, zodat hij bij
   zijn eigen alinea hoort en niet los zweeft. */
.mimoda-about__text h2,
.mimoda-about__text h3,
.mimoda-about__text h4 {
	font-size: 20px;
	line-height: 26px;
	/* Marges zijn veelvouden van de regelhoogte (26px), zodat elk element op
	   hetzelfde ritme begint als de tekstregels. Anders valt de inklap-grens
	   midden door een regel en zie je onderaan een half afgesneden regel staan.
	   Onder de kop geen marge: hij hoort tegen zijn eigen alinea aan (zelfde
	   keuze als .mimoda-shop-seo__text h2/h3). De 26px boven valt samen met de
	   26px onder de vorige alinea (marge-collaps), dus dat blijft één regel. */
	margin: 26px 0 0;
}
.mimoda-about__text > :first-child { margin-top: 0; }
/* Een link in de SEO-tekst valt op in het roze van het ontwerp (--mimoda-pink,
   #ff8cbe — hetzelfde roze als "Aanmelden" in de footer). Onderstreept, zodat een
   link ook zonder kleur te herkennen is. */
.mimoda-about__text a { color: var(--mimoda-pink); text-decoration: underline; }
.mimoda-about__text a:hover,
.mimoda-about__text a:focus-visible { text-decoration: none; }
/* Ingeklapt: toon max. 4 regels; "lees meer" (initSeoMore) klapt open/dicht.
   max-height i.p.v. -webkit-line-clamp, want line-clamp rekent alleen met losse
   tekstregels en niet met <p>-alinea's eronder. Zelfde aanpak als de SEO-tekst
   op de shoppagina (shop.css). 4 x 26px regelhoogte = 104px. */
.mimoda-about__text.is-clamped {
	max-height: 104px;
	overflow: hidden;
}
/* Verloop over de onderste regel: laat zien dat er meer tekst is en verzacht de
   afsnijding. Zelfde middel als op de shoppagina (shop.css), maar naar wit —
   deze sectie staat op de witte pagina-achtergrond. */
.mimoda-about__text.is-clamped::after,
.mimoda-about__text.is-fade::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--mimoda-white));
	pointer-events: none;
}
.mimoda-about__more {
	display: inline-block;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mimoda-ink);
	font-family: var(--mimoda-font);
	font-weight: 700;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}
.mimoda-about__more:hover { color: var(--mimoda-accent); }

/* =========================================================================
   Feedback-ronde 1 — aanpassingen.
   ========================================================================= */

/* "Shop our favs" op de gekleurde band: titel + kaart-tekst wit */
.mimoda-favs .mimoda-section-title { color: #fff; }
.mimoda-favs .mimoda-card__name,
.mimoda-favs .mimoda-card__price,
.mimoda-favs .mimoda-card__now { color: #fff; }

/* Kleurstalen: witte rand voor contrast op de gekleurde band */
.mimoda-favs .mimoda-swatch { border-color: rgba(255, 255, 255, .6); }

/* Sale-badge (1:1 op design: accent, top-RECHTS, 91x44, radius 5px) */
.mimoda-card__badge {
	top: 0;
	right: 0;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 91px;
	height: 44px;
	padding: 0 14px;
	background: var(--mimoda-accent);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: .02em;
	text-transform: uppercase;
	border-radius: 5px 0 0 5px; /* rechterhoeken vlak (tegen de kaartrand), links afgerond */
}

/* --- Slider (favs + finish the look) — pijlen + oneindige track ------- */
.mimoda-slider { position: relative; }
/* 6px ademruimte in de clipzone (padding, teruggenomen met negatieve marge):
   de selectiering van een gekozen kleurstaal (outline 2px + 2px offset) steekt
   buiten de kaart en werd anders onderaan — en bij een randslide opzij —
   afgeknipt. Layout en slide-stap veranderen niet (JS meet slide-tot-slide);
   de buur-slide staat op 22px gap en blijft dus buiten beeld in rust. */
.mimoda-slider__viewport { overflow: hidden; padding: 6px; margin: -6px; }
.mimoda-slider__track { display: flex; gap: 22px; will-change: transform; }
.mimoda-slider__slide { flex: 0 0 calc((100% - 3 * 22px) / 4); }
/* Kaarten in de slider altijd even hoog (klant 06-08: hoogteverschillen, ook met
   2 rijen maat-chips): de track rekt elke slide tot de hoogste kaart (flex-
   standaard stretch — dus géén align-items op de track), zodat beeld, naam en
   prijs bovenaan uitlijnen.
   De kleurstalen hangen NIET meer aan een gezamenlijke onderlijn (klant 12-08:
   op kaarten zónder maat-chips gaf dat een groot gat tussen prijs en bolletjes).
   Ze volgen nu gewoon de prijs op 10px (shop.css) en de resthoogte valt onderaan
   de kaart — onzichtbaar, want de kaart heeft geen eigen achtergrond/rand. */
.mimoda-slider__slide .mimoda-product { display: flex; flex-direction: column; height: 100%; }
.mimoda-slider__arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--mimoda-gold); /* design 252:1742 — pijlen goud #bea561 (finish the look) */
	cursor: pointer;
	z-index: 2;
}
.mimoda-slider__arrow svg { width: 34px; height: 34px; }
.mimoda-slider__arrow--prev { left: -52px; }
.mimoda-slider__arrow--next { right: -52px; }
.mimoda-favs .mimoda-slider__arrow { color: #fff; }

@media (max-width: 1100px) {
	.mimoda-slider__slide { flex-basis: calc((100% - 22px) / 2); }
	.mimoda-slider__arrow--prev { left: -6px; }
	.mimoda-slider__arrow--next { right: -6px; }
}

/* Store-sectie: alinea-witruimte + NL-kaart-illustratie */
.mimoda-store__title { max-width: none; }
.mimoda-store__text p { margin: 0 0 16px; }
.mimoda-store__cta { margin-top: 14px; }
.mimoda-store__map {
	position: absolute;
	left: 60%;
	top: 31%;
	width: 59%;
	height: auto;
	z-index: 2;
	pointer-events: none;
}

/* Stay up to date: social-iconen als design-SVG's */
.mimoda-stay__social a { display: inline-block; line-height: 0; }
.mimoda-stay__social img { width: 42px; height: 42px; display: block; }

/* =========================================================================
   MOBIEL — 1:1 op Figma "Home" mobiel (374:3248, frame 402px breed).
   Komt als laatste in de bron → wint bij gelijke specificiteit. De zij-gutter
   (12.5%) zit al op .mimoda-container (style.css, foundation): hier NIET dubbel
   padden. Desktop (≥1220px) blijft ongewijzigd.
   ========================================================================= */
@media (max-width: 981px) {

	/* --- 1. Hero — twee beelden naast elkaar (446px hoog), knop onderaan --- */
	.mimoda-hero__grid { grid-template-columns: repeat(2, 1fr); }
	.mimoda-hero__grid img {
		height: auto;
		aspect-ratio: 201 / 446; /* design 374:3312 / 374:3313 */
	}
	/* Mobiel toont 2 hero-beelden (design); eventuele extra slides verborgen. */
	.mimoda-hero__grid img:nth-child(n+3) { display: none; }
	/* Knop-onderkant ~77px boven de hero-onderkant (design 374:3315 op 446px hoog). */
	.mimoda-hero__cta { bottom: 17%; }

	/* --- 2. Categorie-tegels — swipe-slider (gebruiker-eis) ---
	   De scroller (.mimoda-cats__grid) staat BINNEN .mimoda-container (die de
	   12.5%-goot levert). De scroller is dus precies zo breed als het content-vak:
	   2 tegels (elk (100%-8)/2) + 8px gap vullen 'm exact, de 3e valt buiten de
	   overflow en is pas zichtbaar bij scrollen/pijl → géén peek in rust. */
	.mimoda-cats { padding-block: 34px; }
	.mimoda-cats__grid {
		display: flex;
		gap: 8px; /* design: tegels op x46 + x205 → 8px tussenruimte */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mimoda-cats__grid::-webkit-scrollbar { display: none; }
	.mimoda-cat {
		flex: 0 0 calc((100% - 8px) / 2);
		scroll-snap-align: start;
	}

	/* Slider-pijlen op de categorie-tegels (home + 404), gouden chevrons in de
	   zij-goten (gebruiker-eis). initCatScroller (theme.js) scrollt één tegel. */
	.mimoda-cats,
	.mimoda-404__cats { position: relative; }
	.mimoda-cats__nav {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 28px;
		height: 42px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--mimoda-gold);
		cursor: pointer;
		z-index: 2;
	}
	.mimoda-cats__nav svg { width: 22px; height: 22px; }
	/* In de zij-goot, strak náást de tegels (~8px), niet los tegen de schermrand
	   (12.5% = de tegel-inspringing; -36px = pijlbreedte + ~8px lucht). */
	.mimoda-cats__nav--prev { left: calc(12.5% - 36px); }
	.mimoda-cats__nav--next { right: calc(12.5% - 36px); }
	.mimoda-cat__media { aspect-ratio: 151 / 262; border-radius: var(--mimoda-radius); }
	.mimoda-cat__title { left: 10px; bottom: 24px; font-size: 16px; } /* Kumbh 800 uppercase */
	.mimoda-cat__link  { left: 10px; bottom: 11px; font-size: 9px; gap: 5px; }
	.mimoda-cat__link svg { width: 8px; height: 8px; }

	/* Sectietitels (Abril) → 30px op mobiel (design 377:3368 / 377:3500).
	   Marge-onder = de band-padding-onder → even veel lucht boven als onder de slider. */
	.mimoda-section-title { font-size: 30px; margin: 0 0 24px; }

	/* --- 3. Shop our favs — band (boven/onder gelijk) --- */
	/* Alleen de padding: de lila achtergrond staat sinds 09-09 op de basisregel en
	   geldt dus op elk formaat. */
	.mimoda-favs { padding-block: 30px 24px; }

	/* Slider (favs + finish the look): 2 kaarten per view, gap 10, pijlen in de
	   gutter. GEEN align-items:center meer (klant 06-08): kortere kaarten zakten
	   daardoor omlaag t.o.v. hun buur — kaarten rekken nu gelijk (stretch) en de
	   kleurstalen hangen aan de gezamenlijke onderlijn (zie desktop-blok). */
	.mimoda-slider__track { gap: 10px; }
	.mimoda-slider__slide { flex: 0 0 calc((100% - 10px) / 2); }
	/* Pijlen verticaal gecentreerd op de KAART (top:50% van .mimoda-slider =
	   kaarthoogte, niet het beeld) en als dunne chevrons in de zij-goot mét lucht
	   tot de kaarten (design favs 377:3434/3436). Geldt ook voor "Shop the look". */
	.mimoda-slider__arrow { width: 28px; height: 42px; top: 50%; }
	.mimoda-slider__arrow svg { width: 24px; height: 24px; }
	.mimoda-slider__arrow--prev { left: -36px; }
	.mimoda-slider__arrow--next { right: -36px; }

	/* --- 4. Store — stapel tot 1 kolom: tekst → foto (badge + NL-kaart) --- */
	.mimoda-store { padding-block: 34px 60px; }
	.mimoda-store__inner { grid-template-columns: 1fr; column-gap: 0; row-gap: 28px; }
	.mimoda-store__title { font-size: 30px; line-height: 35px; margin: 0 0 14px; }
	.mimoda-store__text p { line-height: 26px; }
	.mimoda-store__photo { aspect-ratio: 310 / 260; }
	.mimoda-store__badge { height: 41px; padding: 0 15px; gap: 6px; font-size: 16px; }
	.mimoda-store__badge svg { width: 13px; height: 13px; }
	.mimoda-store__map { left: 40%; top: 36%; width: 60%; } /* design 377:3443 t.o.v. foto */

	/* --- 5. Finish the look — zelfde behandeling als "Shop our favs" --- */
	.mimoda-looks { padding-block: 30px 24px; }

	/* --- 6. Stay up to date (gedeelde pre-footer band) --- */
	.mimoda-stay { padding-block: 56px 55px; }
	.mimoda-stay__title { font-size: 35px; line-height: 52px; margin: 0 0 12px; } /* design 35/52 */
	.mimoda-stay__text { margin: 0 0 20px; }

	/* --- 7. Over Mimoda --- */
	.mimoda-about { padding-block: 36px 30px; }
	.mimoda-about__title { font-size: 30px; line-height: 40px; margin: 0 0 14px; }
}

/* =========================================================================
   Liggende tablet / laptop (982–1219px) — verfijningen (feedback klant).
   Gedeelde componenten (sliders, store-sectie, categorie-tegels) die op deze
   pagina's terugkomen. Strikt op de tablet-band gescopet → geen conflict met
   mobiel (≤981) of desktop (≥1220).
   ========================================================================= */
@media (min-width: 982px) and (max-width: 1219px) {

	/* --- Sliders (Shop our favs / Finish the look / Shop the look / cart-cross) ---
	   Pijlen NAAST de afbeeldingen i.p.v. erover: de slider krijgt zij-ruimte
	   (beeld wordt daardoor iets smaller) en de pijlen staan in die goot.
	   NB: de winkel-slider (.mimoda-winkel__slider, óók .mimoda-slider) heeft z'n
	   eigen goot via .mimoda-winkel__slider-wrap (page.css) → hier uitsluiten,
	   anders dubbele inspring en staat het beeld te ver van de pijlen. */
	.mimoda-slider:not(.mimoda-winkel__slider) { padding-inline: 54px; }
	.mimoda-slider:not(.mimoda-winkel__slider) .mimoda-slider__arrow { top: 40%; }
	.mimoda-slider:not(.mimoda-winkel__slider) .mimoda-slider__arrow--prev { left: 4px; }
	.mimoda-slider:not(.mimoda-winkel__slider) .mimoda-slider__arrow--next { right: 4px; }

	/* --- Store-sectie "Meer dan alleen een webshop" --- */
	/* Beeld verticaal centreren t.o.v. de tekst + knop (netter uitgelijnd). */
	.mimoda-store__inner { align-items: center; }
	/* NL-kaart binnen beeld houden: verankerd aan de rechterrand van het beeld
	   i.p.v. ver naar rechts uitstekend (viel op deze breedte buiten beeld). */
	.mimoda-store__map { left: auto; right: 0; top: 30%; width: 52%; }

	/* --- Categorie-tegels (home + 404): langere titels ("Blazers & jackets")
	   passen niet op 28px in het smallere blok → iets kleiner + strakkere inset. */
	.mimoda-cat__title { font-size: 22px; left: 22px; }
	.mimoda-cat__link { left: 22px; }
}