/* =========================================================================
Mimoda — info-pagina's (page.php) + 404. Content-styling + accordions.
========================================================================= */
.mimoda-page { padding: 56px 0 72px; }
.mimoda-page__inner { max-width: calc(920px + 48px); }
.mimoda-page__head { margin-bottom: 28px; }
.mimoda-page__title { font-family: var(--mimoda-display); font-weight: 400; font-size: 46px; margin: 0; }
.mimoda-page__content { font-size: 15px; line-height: 26px; color: var(--mimoda-ink); }
.mimoda-page__content h2 { font-family: var(--mimoda-display); font-size: 28px; margin: 34px 0 14px; }
.mimoda-page__content h3 { font-size: 18px; font-weight: 700; margin: 24px 0 10px; }
.mimoda-page__content p { margin: 0 0 16px; }
.mimoda-page__content ul, .mimoda-page__content ol { margin: 0 0 16px; padding-left: 22px; }
.mimoda-page__content li { margin-bottom: 6px; }
.mimoda-page__content a { color: var(--mimoda-coral-ink); text-decoration: underline; }
/* Accordions (FAQ): Vraag
… (marge, niet padding) zodat de hoogte-animatie
van de "Over mij"-accordion (team.js) exact klopt en niet schokt. */
.mimoda-team__card details { margin-top: 10px; }
.mimoda-team__card summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.mimoda-team__card summary::-webkit-details-marker { display: none; }
.mimoda-team__name { font-family: var(--mimoda-display); font-size: 30px; line-height: 1.1; color: #fff; }
.mimoda-team__more { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 800; color: var(--mimoda-pink); white-space: nowrap; } /* "Over mij" #ff8cbe ExtraBold (design 252:5017) */
.mimoda-team__more::after { content: ""; flex: none; width: 12px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M4.99998 6C4.82076 6 4.64156 5.92797 4.50493 5.78422L0.205142 1.25832C-0.0683806 0.970413 -0.0683806 0.503627 0.205142 0.21584C0.478554 -0.0719468 0.921935 -0.0719468 1.19548 0.21584L4.99998 4.22061L8.80451 0.21598C9.07803 -0.0718069 9.52137 -0.0718069 9.79476 0.21598C10.0684 0.503767 10.0684 0.970553 9.79476 1.25846L5.49504 5.78436C5.35834 5.92814 5.17914 6 4.99998 6Z' fill='%23ff8cbe'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .2s ease; } /* chevron 252:5024 (was ▾) */
.mimoda-team__card details[open] .mimoda-team__more::after { transform: rotate(180deg); }
.mimoda-team__bio { font-size: 13px; line-height: 20px; margin: 10px 0 0; color: #fff; }
/* --- Onze winkel --------------------------------------------------- */
.mimoda-winkel__intro { display: grid; grid-template-columns: minmax(0, 762px) minmax(0, 430px); justify-content: center; gap: 60px; align-items: start; padding: 48px 24px 20px; }
.mimoda-winkel__title { font-family: var(--mimoda-display); font-weight: 400; font-size: 50px; margin: 0 0 20px; }
.mimoda-winkel__text p { font-size: 14px; line-height: 24px; margin: 0 0 16px; }
.mimoda-winkel__nav { margin-top: 12px; min-width: 320px; }
.mimoda-winkel__illu img { width: 100%; height: auto; display: block; }
/* Winkel-slider (onder de intro) — oneindig via theme.js; géén border-radius (1:1 design). */
.mimoda-winkel__slider-wrap { max-width: calc(1454px + 48px); margin-inline: auto; padding: 24px 24px 48px; }
.mimoda-winkel__slider { position: relative; }
.mimoda-winkel__slider .mimoda-slider__viewport { overflow: hidden; }
.mimoda-winkel__slider .mimoda-slider__track { display: flex; gap: 0; will-change: transform; }
.mimoda-winkel__slider .mimoda-slider__slide { flex: 0 0 100%; }
.mimoda-winkel__slider .mimoda-slider__slide img { width: 100%; aspect-ratio: 1454 / 714; object-fit: cover; border-radius: 0; display: block; }
.mimoda-winkel__slider .mimoda-slider__arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
padding: 0; border: none; background: transparent; color: var(--mimoda-gold); cursor: pointer; z-index: 2; /* pijlen goud #bea561 (design 252:5190) */
transition: color .15s ease;
}
.mimoda-winkel__slider .mimoda-slider__arrow:hover { color: #9a844a; }
.mimoda-winkel__slider .mimoda-slider__arrow svg { width: 30px; height: 30px; }
.mimoda-winkel__slider .mimoda-slider__arrow--prev { left: -44px; }
.mimoda-winkel__slider .mimoda-slider__arrow--next { right: -44px; }
@media (max-width: 1560px) {
.mimoda-winkel__slider .mimoda-slider__arrow { background: rgba(255, 255, 255, .74); border-radius: 50%; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); color: var(--mimoda-gold); }
.mimoda-winkel__slider .mimoda-slider__arrow--prev { left: 12px; }
.mimoda-winkel__slider .mimoda-slider__arrow--next { right: 12px; }
}
/* "Ontdek ons team"-knop is coral (design #fdcac8): gebruikt de gedeelde
.mimoda-btn--coral modifier (zie style.css) i.p.v. een eigen regel. */
@media (max-width: 900px) { .mimoda-winkel__intro { grid-template-columns: 1fr; gap: 28px; } }
/* --- Openingstijden ------------------------------------------------- */
/* Design (182:879): links titel + intro (max 762px) + 2 knoppen, rechts de
NL-kaart met Borne-pin (~429px). Kolommen links uitgelijnd, 72px ertussen. */
.mimoda-openingstijden__inner {
display: grid;
grid-template-columns: minmax(0, 762px) minmax(0, 429px);
justify-content: start;
align-items: start;
gap: 72px;
padding: 72px 24px 80px; /* design: 72px tussen banner en titel */
}
.mimoda-openingstijden__title { font-family: var(--mimoda-display); font-weight: 400; font-size: 48px; margin: 0 0 26px; }
.mimoda-openingstijden__intro { font-size: 16px; line-height: 26px; color: var(--mimoda-ink); max-width: 762px; }
.mimoda-openingstijden__intro p { margin: 0 0 26px; }
.mimoda-openingstijden__intro p:last-child { margin-bottom: 0; }
.mimoda-openingstijden__intro a { color: var(--mimoda-accent); text-decoration: underline; }
.mimoda-openingstijden__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
.mimoda-openingstijden__actions .mimoda-btn { flex: 0 0 276px; max-width: 100%; }
.mimoda-openingstijden__illu img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
.mimoda-openingstijden__inner { grid-template-columns: 1fr; gap: 32px; padding: 36px 24px 56px; }
.mimoda-openingstijden__title { font-size: 38px; }
.mimoda-openingstijden__illu { max-width: 429px; }
.mimoda-openingstijden__actions .mimoda-btn { flex: 1 1 auto; }
}
/* --- Contactpagina ------------------------------------------------- */
.mimoda-contactpage { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 650px); justify-content: center; gap: 62px; padding: clamp(56px, 5.5vw, 88px) 24px 72px; align-items: center; }
.mimoda-contactpage .mimoda-info__title { font-size: 50px; margin: 0 0 4px; }
.mimoda-contactpage__intro { font-size: 14px; line-height: 24px; margin: 16px 0 30px; max-width: 609px; }
.mimoda-contactpage__sub, .mimoda-contactpage__formtitle { font-family: var(--mimoda-display); font-weight: 400; font-size: 28px; margin: 26px 0 14px; }
.mimoda-contactpage__formtitle { margin-top: 0; }
.mimoda-contactpage__info { list-style: none; margin: 0 0 10px; padding: 0; }
.mimoda-contactpage__info li { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.mimoda-contactpage__info svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mimoda-gold); } /* icons goud #bea561 (design 252:5358) */
/* Hover op de contactlinks (adres/telefoon/e-mail) = orchidee, zelfde kleurovergang
als de header-nav en de footerlinks (klantwens 27-07). */
.mimoda-contactpage__info a { transition: color .15s ease; }
.mimoda-contactpage__info a:hover { color: var(--mimoda-accent); } /* #e598e5 */
.mimoda-contactpage__hours { border-collapse: collapse; font-size: 14px; }
.mimoda-contactpage__hours th { text-align: left; font-weight: 400; padding: 3px 48px 3px 0; }
.mimoda-contactpage__hours td { padding: 3px 0; color: var(--mimoda-gold); } /* tijden goud #bea561 (design 252:5355) */
@media (max-width: 860px) { .mimoda-contactpage { grid-template-columns: 1fr; gap: 34px; } }
/* --- Ruilen & Retourneren (page-ruilen-retourneren.php) -------------
Figma 174:1025: zelfde gecentreerde tekstlayout als Bezorgen & Afhalen
(géén banner, titel 48px, tekstkolom 1070px met ExtraBold subkoppen), plus een
"Download retourformulier"-knop onder de tekst. Zelfstandig gescoped
(.mimoda-info--returns) zodat het losstaat van de overige info-pagina's. */
.mimoda-info--returns .mimoda-info__head { padding-top: 72px; }
.mimoda-info--returns .mimoda-info__title { font-size: 48px; }
.mimoda-info--returns .mimoda-page__content {
max-width: calc(1070px + 48px);
text-align: center;
font-size: 14px;
line-height: 26px;
padding-top: 33px; /* body-tekst op y≈283 (Figma), ≈20px onder de titel */
}
/* Eén doorlopend tekstblok (zoals het Figma-tekstvak): alleen een lege regel
(26px) tussen alinea's; subkoppen tight boven hun alinea. */
.mimoda-info--returns .mimoda-page__content p { margin: 0 0 26px; }
.mimoda-info--returns .mimoda-page__content p:last-child { margin-bottom: 0; }
.mimoda-info--returns .mimoda-page__content h2 {
font-family: var(--mimoda-font);
font-weight: 800; /* Kumbh Sans ExtraBold */
font-size: 14px;
line-height: 26px;
margin: 0;
}
.mimoda-info--returns .mimoda-page__content a { color: inherit; text-decoration: none; }
.mimoda-info--returns .mimoda-page__content a:hover { text-decoration: underline; }
/* Downloadknop (Figma 208:3896): 53px hoog, accent, radius 5px, 14px ExtraBold
uppercase wit; 54px onder de tekst, 66px boven de "Stay up to date"-band. */
.mimoda-info--returns .mimoda-info__actions { text-align: center; padding: 54px 24px 66px; }
.mimoda-info__download {
display: inline-flex; align-items: center; justify-content: center;
height: 53px; padding: 0 42px;
background: var(--mimoda-accent); color: #fff;
border-radius: var(--mimoda-radius);
font-family: var(--mimoda-font); font-weight: 800; font-size: 14px;
line-height: 1; text-transform: uppercase; /* Figma: geen letterspatiëring → 317px breed */
cursor: pointer; transition: filter .15s ease;
}
.mimoda-info__download:hover { filter: brightness(0.95); }
@media (max-width: 640px) {
.mimoda-info--returns .mimoda-info__head { padding-top: 48px; }
.mimoda-info--returns .mimoda-info__title { font-size: 36px; }
}
/* --- Privacyverklaring / Algemene voorwaarden (page-privacyverklaring.php) --
Figma 179:6: banner (1920×400) → links uitgelijnde titel (Abril Fatface 48px)
→ doorlopende juridische tekst in de volle container (1320px), Kumbh Sans
14/26, links uitgelijnd. Artikelkoppen hebben in het ontwerp hetzelfde gewicht
en dezelfde grootte als de body (geen display-h2); alleen een lege regel
erboven scheidt de artikelen. Zelfstandig gescoped (.mimoda-info--legal) zodat
het losstaat van de gecentreerde tekstpagina's (bezorgen/ruilen). */
.mimoda-info--legal .mimoda-info__head { text-align: left; padding-top: 50px; }
.mimoda-info--legal .mimoda-info__title { font-size: 48px; }
.mimoda-info--legal .mimoda-page__content {
font-size: 14px;
line-height: 26px;
padding-top: 25px; /* body-tekst ≈25px onder de titel (Figma) */
padding-bottom: 88px; /* ruimte vóór de "Stay up to date"-band */
}
/* Eén doorlopend tekstblok: een lege regel (26px) tussen de blokken; de
artikelkop staat tight boven zijn eerste alinea (het gat erbóven komt van de
marge van het vorige blok). */
.mimoda-info--legal .mimoda-page__content p { margin: 0 0 26px; }
.mimoda-info--legal .mimoda-page__content h2 {
font-family: var(--mimoda-font);
font-weight: 400; /* Figma: artikelkop = zelfde gewicht/grootte als de body */
font-size: 14px;
line-height: 26px;
margin: 0 0 26px;
}
.mimoda-info--legal .mimoda-page__content ul,
.mimoda-info--legal .mimoda-page__content ol { margin: 0 0 26px; padding-left: 21px; }
.mimoda-info--legal .mimoda-page__content li { margin: 0; }
/* Links zwart onderstreept (Figma), niet het koraal-accent van de basis. */
.mimoda-info--legal .mimoda-page__content a { color: inherit; text-decoration: underline; }
/* Inhoudsopgave (alleen Algemene voorwaarden): vette kop + roze anker-links
zonder opsommingsteken (Figma 177:1609). De TOC-links volgen het merk-accent
i.p.v. de zwarte bodylinks hierboven. */
.mimoda-info--legal .mimoda-page__content h2.mimoda-legal__toc-title { font-weight: 700; margin: 0; }
.mimoda-info--legal .mimoda-page__content ul.mimoda-legal__toc { list-style: none; padding-left: 0; margin: 0 0 26px; }
.mimoda-info--legal .mimoda-page__content .mimoda-legal__toc a { color: var(--mimoda-accent); text-decoration: underline; }
.mimoda-info--legal .mimoda-page__content .mimoda-legal__toc a:hover { color: var(--mimoda-accent-strong); }
/* Subkop binnen een artikel ("Bij levering van producten:", "Opzegging", …):
zelfde grootte als de body, licht vet als label; tight boven zijn lijst. */
.mimoda-info--legal .mimoda-page__content h3.mimoda-legal__sub {
font-family: var(--mimoda-font);
font-weight: 700;
font-size: 14px;
line-height: 26px;
margin: 0 0 26px;
}
@media (max-width: 640px) {
.mimoda-info--legal .mimoda-info__head { padding-top: 36px; }
.mimoda-info--legal .mimoda-info__title { font-size: 36px; }
}
/* CF7-formulier — Figma: grijze velden (#f5f5f5), geen rand, rechte hoeken. */
.wpcf7 .mimoda-cf__row { margin: 0 0 16px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
width: 100%; border: none; border-radius: 0; padding: 0 16px; height: 44px;
font-family: var(--mimoda-font); font-size: 14px; color: var(--mimoda-ink); background: #f5f5f5;
}
.wpcf7 textarea { height: 122px; padding: 13px 16px; resize: vertical; }
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #6f6f6f; opacity: 1; }
/* Verzenden-knop rechts uitgelijnd met de veldrand. CF7's (verborgen) spinner
staat ná de knop en neemt ~72px in; row-reverse zet de knop tegen de rechterrand. */
.wpcf7 .mimoda-cf__submit { display: flex; justify-content: flex-end; align-items: center; margin: 8px 0 0; }
.wpcf7 input[type="submit"] {
background: var(--mimoda-accent); color: #fff; border: none; border-radius: 5px;
width: 202px; height: 44px; padding: 0; font-family: var(--mimoda-font); font-weight: 800;
font-size: 16px; text-transform: uppercase; letter-spacing: .02em; cursor: pointer;
transition: var(--mimoda-btn-transition);
}
.wpcf7 input[type="submit"]:hover { filter: brightness(.96); transform: translateY(var(--mimoda-btn-lift)); box-shadow: var(--mimoda-btn-shadow); }
.wpcf7 input[type="submit"]:active { transform: translateY(var(--mimoda-btn-press)); box-shadow: var(--mimoda-btn-shadow-active); filter: brightness(.94); }
.wpcf7 .mimoda-cf__submit .wpcf7-spinner { order: -1; margin: 0 12px 0 0; }
/* =========================================================================
MOBIEL (Agent E) — info-pagina's, Contact, Openingstijden, Onze winkel,
Ons team, Over ons, tekst/juridische pagina's + 404. Primaire tier ≤981px
reproduceert het mobiele Figma-ontwerp (frames 402px breed). Deze regels
staan bewust LAATST in het bestand en winnen daarom op gelijke specificiteit
van de oudere ad-hoc ≤900/≤860/≤640-queries hierboven (§2). De 12.5%-goot
komt uit .mimoda-container (style.css); elementen die hun eigen
`padding: … 24px …` dragen, zetten we hier terug op 12.5% zodat ze niet
dubbel of te smal inspringen (§3). Desktop (≥1220) blijft ongewijzigd.
========================================================================= */
@media (max-width: 981px) {
/* --- Banner + paginatitels (alle banner-content-pagina's) --------- */
.mimoda-info-banner { height: 145px; } /* Figma: banner 402×145 */
.mimoda-info-banner--team img { object-position: center 28%; }
.mimoda-info__title,
.mimoda-info--delivery .mimoda-info__title,
.mimoda-info--returns .mimoda-info__title,
.mimoda-info--legal .mimoda-info__title,
.mimoda-winkel__title,
.mimoda-openingstijden__title,
.mimoda-contactpage .mimoda-info__title { font-size: 30px; } /* Abril ~30px (Figma-box ~40px incl. leading) */
.mimoda-info__head { padding: 30px 12.5% 0; } /* banner → titel ~30px */
.mimoda-info--legal .mimoda-info__head { padding-top: 30px; }
.mimoda-info--delivery .mimoda-info__head,
.mimoda-info--returns .mimoda-info__head { padding-top: 40px; } /* geen banner */
.mimoda-info__intro { padding: 27px 12.5% 0; font-size: 14px; }
/* --- Teaser (beeld + tekst) → 1 kolom ----------------------------- */
.mimoda-teaser { padding: 40px 0; }
.mimoda-teaser__inner { grid-template-columns: 1fr; gap: 28px; }
.mimoda-teaser__title { font-size: 30px; }
.mimoda-teaser__text p { font-size: 14px; }
/* Coral "Check out our team"-knop: 276px, links, 14px (Figma 418:11086/11800). */
.mimoda-teaser__text .mimoda-btn { width: 276px; max-width: 100%; justify-content: center; font-size: 14px; }
/* Winkel-teaser: tekst vóór beeld (Figma 418:11581), i.t.t. Over ons. */
.mimoda-winkel .mimoda-teaser__media { order: 2; }
/* Winkel-sectie op info-pagina's: ondermarge vóór "Stay up to date". */
.mimoda-info .mimoda-store { padding-bottom: 56px; }
/* --- Ons team: staffkaarten → horizontaal swipe-carrousel, 1 kaart per view
met de volgende die net peekt (Figma 418:11241 toont 1 roze kaart). .mimoda-team
draagt zelf de .mimoda-container 12.5%-goot → hier op 0; goot terug via
eerste/laatste kaartmarge. Ondermarge klein (was 56px) zodat het gat naar
"Meer dan alleen een webshop" ~44px is (design). */
/* .mimoda-team = de scroller (inline padding 0); de 12.5%-goot zit op de
.mimoda-team-slider-wrapper eronder. De scroller is dus zo breed als het
content-vak → één kaart (flex:0 0 100%) vult 'm en de volgende valt buiten
de overflow (GÉÉN peek), pas zichtbaar bij scrollen/pijl. */
.mimoda-team {
display: flex;
/* De desktop-rij breekt af en staat gecentreerd; hier juist niet. Eén rij
die horizontaal scrollt: afbreken zet de kaarten onder elkaar, en
centreren laat de reeks aan béide kanten uitsteken — de eerste kaart
staat dan links buiten beeld en is niet meer weg te scrollen. */
flex-wrap: nowrap;
justify-content: flex-start;
gap: 12px;
padding: 24px 0 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mimoda-team::-webkit-scrollbar { display: none; }
.mimoda-team__card { flex: 0 0 100%; scroll-snap-align: start; }
/* Prev/next-pijlen = gouden chevrons in de zij-goten, verticaal gecentreerd op
de zichtbare kaart (Figma 418:11241: links ~x31, rechts ~x371). Zelfde stijl
als de home/404 categorie-slider (.mimoda-cats__nav). De wrapper is de
positioneercontext; theme.js initCatScroller scrollt één kaart. */
.mimoda-team-slider { position: relative; padding-inline: 12.5%; }
.mimoda-team__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-team__nav svg { width: 22px; height: 22px; }
/* In de zij-goot, strak náást de kaart (~8px), niet los tegen de schermrand. */
.mimoda-team__nav--prev { left: calc(12.5% - 36px); }
.mimoda-team__nav--next { right: calc(12.5% - 36px); }
/* Ons team (níet Over ons): meer lucht ónder de winkelfoto/NL-kaart vóór de
"Stay up to date"-band (design: foto ~y2251, band ~y2341, kaart hangt erin). */
.mimoda-info:not(.mimoda-info--over-ons) .mimoda-store { padding-bottom: 90px; }
/* --- Onze winkel -------------------------------------------------- */
.mimoda-winkel__intro { grid-template-columns: 1fr; gap: 40px; padding: 30px 12.5% 20px; }
/* Volle-breedte knop; 14px + nowrap zodat "Navigeer naar onze winkel" op 1 regel past. */
.mimoda-winkel__nav { width: 100%; min-width: 0; margin-top: 24px; font-size: 14px; white-space: nowrap; padding-inline: 16px; }
.mimoda-winkel__illu { max-width: 430px; } /* NL-kaart, links uitgelijnd */
/* Slider: minder ruimte eronder (design: ~34px tot "Ontdek ons team"). */
.mimoda-winkel__slider-wrap { padding: 24px 12.5% 10px; }
.mimoda-winkel .mimoda-teaser { padding-top: 24px; }
.mimoda-winkel__slider .mimoda-slider__slide img { aspect-ratio: 310 / 248; }
/* Pijlen = dunne GOUDEN chevrons in de zij-goten BUITEN het beeld (design
418:11581: links ~x31, rechts ~x371), verticaal gecentreerd — zelfde stijl als
de home "Shop our favs"-pijlen. Overschrijft de witte-cirkel-regel (≤1560px). */
.mimoda-winkel__slider .mimoda-slider__arrow {
background: transparent;
border-radius: 0;
box-shadow: none;
color: var(--mimoda-gold);
width: 24px;
height: 40px;
}
.mimoda-winkel__slider .mimoda-slider__arrow svg { width: 24px; height: 24px; }
/* Chevron gecentreerd IN de 12.5%-zijgoot i.p.v. er tegen het beeld aangedrukt
(klantfeedback: te weinig witruimte). De zichtbare chevron is ~8px van de
24px-box, dus box-offset = halve goot (6.25vw) + halve box (12px); zo blijft
de lucht links/rechts van de chevron gelijk en schaalt hij mee met de goot.
De 34px-cap houdt de tussenruimte op brede tablets gelijk aan de 982–1219-band
(~36px), zodat de pijl niet verspringt op de breekpuntgrens. */
.mimoda-winkel__slider .mimoda-slider__arrow--prev { left: calc(-1 * min(6.25vw, 34px) - 12px); }
.mimoda-winkel__slider .mimoda-slider__arrow--next { right: calc(-1 * min(6.25vw, 34px) - 12px); }
/* --- Openingstijden ----------------------------------------------- */
.mimoda-openingstijden__inner { grid-template-columns: 1fr; gap: 44px; padding: 30px 12.5% 48px; }
.mimoda-openingstijden__actions { flex-direction: column; gap: 16px; margin-top: 30px; }
.mimoda-openingstijden__actions .mimoda-btn { flex: none; width: 100%; font-size: 14px; }
.mimoda-openingstijden__illu { max-width: 430px; }
/* --- Contact: info + formulier stapelen --------------------------- */
.mimoda-contactpage { grid-template-columns: 1fr; gap: 20px; padding: 30px 12.5% 56px; align-items: start; }
.mimoda-contactpage__sub,
.mimoda-contactpage__formtitle { font-size: 24px; }
/* Verzendknop volle breedte (Figma 418:12182: 310px, tekst centraal).
De flex-wrapper (justify-content:flex-end) + de (verborgen) CF7-spinner
kromp de knop tot ~265px rechts; op mobiel de wrapper als block zetten en
de spinner uit de flow halen zodat width:100% de volle veldbreedte vult. */
.wpcf7 .mimoda-cf__submit { display: block; position: relative; }
.wpcf7 .mimoda-cf__submit .wpcf7-spinner { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; }
.wpcf7 input[type="submit"] { width: 100%; }
/* --- Ruilen & Retourneren: downloadknop --------------------------- */
.mimoda-info--returns .mimoda-info__actions { padding: 40px 12.5% 48px; }
/* Volle-breedte knop; smallere inspringing + nowrap → "Download retourformulier" op 1 regel. */
.mimoda-info__download { width: 100%; padding-inline: 20px; white-space: nowrap; }
/* --- 404 ---------------------------------------------------------- */
.mimoda-404 { padding: 48px 0 44px; }
.mimoda-404__title { font-size: 30px; margin-bottom: 22px; }
.mimoda-404__text { font-size: 14px; line-height: 24px; margin: 0 auto 22px; }
.mimoda-404__btn { width: 100%; min-width: 0; }
.mimoda-404__cats { margin-top: 44px; }
/* Categorie-tegels → EXACT dezelfde slider als op de homepage: geen enkele
404-specifieke override meer. De tegels erven alle gedeelde .mimoda-cat*-regels
uit home.css (raster→scroller, tegelbreedte, tekst-groottes/-posities, pijlen,
oneindige loop). .mimoda-404__cats is de .mimoda-container (12.5%-goot) +
scroller-wrapper. Zo zijn 404 en home 1-op-1 identiek. */
}
/* Ons team is nu op alle mobiele breedtes een 1-up swipe-carrousel (zie ≤981);
de oude ≤600 "1 kolom grid"-regel verviel daarmee. */
/* =========================================================================
Over ons — store-sectie: op mobiel toont het ontwerp (Figma 418:10984)
het beeld (foto + NL-kaart) BOVEN de "Meer dan alleen een webshop"-tekst,
terwijl home én Ons team juist tekst-eerst zijn. Alleen op Over ons
omkeren, dus scoped op .mimoda-info--over-ons (wint qua specificiteit van
de gedeelde .mimoda-store-regel in home.css).
========================================================================= */
@media (max-width: 981px) {
.mimoda-info--over-ons .mimoda-store__inner .mimoda-store__media { order: -1; }
/* Comfortabele ruimte tussen het beeld (foto + NL-kaart) en de kop
"Meer dan alleen een webshop" (design 418:10984: beeld ~y1922, kop ~y1990 →
~68px). Bovenop de row-gap (28px) van de gestapelde store__inner. */
.mimoda-info--over-ons .mimoda-store__text { margin-top: 40px; }
}
/* =========================================================================
Liggende tablet / laptop (982–1219px) — verfijningen (feedback klant).
Store-witruimte (Over ons / Ons team), Onze-winkel-slider, Contactpagina.
Strikt op de tablet-band gescopet → geen conflict met mobiel of desktop.
========================================================================= */
@media (min-width: 982px) and (max-width: 1219px) {
/* Store-sectie op content-pagina's (Over ons / Ons team): op desktop hangt de
NL-kaart in ~198px witruimte eronder; op tablet is die kaart kleiner en aan
de rechterrand verankerd (zie home.css), dus 198px is te veel → normale
sectie-ondermarge. */
.mimoda-info .mimoda-store { padding-bottom: 72px; }
/* --- Onze winkel: slider-pijlen = DESKTOP-stijl (gouden chevrons NAAST het
beeld i.p.v. de witte cirkels-erover uit de ≤1560-regel) + minder witruimte
onder de slider. De slider-wrap krijgt zij-ruimte voor de chevrons. --- */
.mimoda-winkel__slider-wrap { padding-inline: 60px; padding-bottom: 24px; }
.mimoda-winkel__slider .mimoda-slider__arrow {
background: transparent;
border-radius: 0;
box-shadow: none;
color: var(--mimoda-gold);
width: 44px;
height: 44px;
}
.mimoda-winkel__slider .mimoda-slider__arrow svg { width: 30px; height: 30px; }
.mimoda-winkel__slider .mimoda-slider__arrow--prev { left: -50px; }
.mimoda-winkel__slider .mimoda-slider__arrow--next { right: -50px; }
.mimoda-winkel .mimoda-teaser { padding-top: 28px; }
/* --- Contactpagina: kolommen bovenaan uitlijnen i.p.v. verticaal centreren
(dat gaf een zwevend formulier met veel lucht erboven/onder) + krappere goot. */
.mimoda-contactpage { align-items: start; gap: 48px; }
}