/* =========================================================================
   Mimoda — Footer. Gescoped op .mimoda-footer*.
   1:1 op het design (winkelwagen 252): nieuwsbriefband #e598e5 (orchidee),
   hoofd-footer zacht roze #ffeff6 (gouden bovenrand), copyright wit.
   Sinds 15-10-2026 zacht roze i.p.v. het topbalkroze #fec2dc (klantkeuze uit de
   footervarianten, Figma 618:707 "Footer A"): tekst zwart, iconen goud,
   "Aanmelden" orchidee met witte tekst.
   ========================================================================= */

/* --- Nieuwsbriefband ------------------------------------------------- */
.mimoda-newsletter {
	background: var(--mimoda-accent); /* #dfbbda (Figma 96:718 nieuwsbriefband) */
	color: #fff;
	padding-block: 52px;
}
.mimoda-newsletter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}
.mimoda-newsletter__title {
	font-family: var(--mimoda-display);
	font-size: 40px;
	color: #fff;
	margin: 0 0 14px;
}
.mimoda-newsletter__text {
	font-size: 14px;
	line-height: 26px;
	max-width: 540px;
	margin: 0;
}
.mimoda-newsletter__text strong { font-weight: 700; }

.mimoda-newsletter__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 14px;
}
.mimoda-newsletter input {
	height: 44px;
	border: none;
	border-radius: var(--mimoda-radius);
	background: #fff;
	padding: 0 16px;
	font-family: var(--mimoda-font);
	font-size: 16px;
	color: var(--mimoda-ink);
}
.mimoda-newsletter input::placeholder { color: var(--mimoda-mauve); opacity: 1; }
.mimoda-newsletter__submit {
	width: 100%;
	height: 44px;
	border: none;
	border-radius: var(--mimoda-radius);
	background: var(--mimoda-accent-strong); /* #c099bb "Abonneren" */
	color: #fff;
	font-family: var(--mimoda-font);
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: var(--mimoda-btn-transition);
}
.mimoda-newsletter__submit:hover {
	filter: brightness(.96);
	transform: translateY(var(--mimoda-btn-lift));
	box-shadow: var(--mimoda-btn-shadow);
}
.mimoda-newsletter__submit:active {
	transform: translateY(var(--mimoda-btn-press));
	box-shadow: var(--mimoda-btn-shadow-active);
	filter: brightness(.94);
}

/* --- Hoofd-footer ---------------------------------------------------- */
.mimoda-footer__main {
	background: var(--mimoda-pink-soft); /* #ffeff6 — Figma 618:707 "Footer A" (klant 15-10) */
	border-top: 3px solid var(--mimoda-gold);
	color: #000;
	padding-block: 48px 40px;
}
.mimoda-footer__grid {
	display: grid;
	/* Kolommen als VERHOUDING, niet in pixels. De ontwerpmaten (315/266/311/207/221)
	   tellen op tot 1320px = precies de containerbreedte op 1920, dus met `fr` staat
	   de footer daar nog exact 1:1 op het ontwerp én schaalt hij daaronder mee met
	   de container. Met vaste pixels bleef de rij 1320px breed terwijl de container
	   `min(68.75vw, 1320)` is — op 1440 dus 990px — waardoor de signup-kolom rechts
	   buiten beeld viel en de héle pagina horizontaal scrollde (klant 21-08, zichtbaar
	   van 1361 tot 1564px; onder 1361 gold al de 3-koloms regel hieronder).
	   De signupkolom houdt zijn ontwerpbreedte als ONDERGRENS (221px): daaronder
	   wringt "Start your / fashion story now" zich over drie regels i.p.v. de twee
	   uit het ontwerp, en breekt de aanmeldtekst midden in "€ 5,-" (klant 21-08).
	   De vier linkkolommen delen de rest naar dezelfde verhouding. */
	grid-template-columns: 315fr 266fr 311fr 207fr minmax(221px, 221fr);
	gap: 0;
}
/* 3 koloms zolang vijf niet comfortabel passen. De grens lag op 1360, maar daar
   begon de 5-koloms rij pas: de kolominhoud vraagt minimaal 193+141+175+126 px plus
   221 voor de signupkolom = 856px, en op 1361 is de container 936px — 20px lucht per
   kolom, waardoor "Contactgegevens" tegen "Categorieën" aan kwam te staan. Vanaf
   1431px is de container 984px en heeft elke kolom ±30px lucht (klant 21-08). */
@media (max-width: 1430px) {
	.mimoda-footer__grid { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
}
.mimoda-footer__heading {
	font-family: var(--mimoda-display);
	font-size: 25px;
	color: #000;
	margin: 0 0 18px;
}
.mimoda-footer__links,
.mimoda-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mimoda-footer__links li { margin-bottom: 4px; }
.mimoda-footer__links a,
.mimoda-footer__contact a,
.mimoda-footer__contact span {
	font-size: 14px;
	font-weight: 500; /* Kumbh Medium */
	line-height: 29px;
	color: #000;
}
/* Hover = orchidee (klantkeuze 27-07), zelfde kleurovergang als de header-nav. */
.mimoda-footer__links a,
.mimoda-footer__contact a { transition: color .15s ease; }
.mimoda-footer__links a:hover,
.mimoda-footer__contact a:hover { color: var(--mimoda-accent); } /* #e598e5 */

/* Iconen = Figma-export (speld 18×18, telefoon/mail 17×17) in een vaste kolom van
   18px + 9px tussenruimte: de tekst begint dan op elke regel 27px na het icoon, net
   als in het ontwerp. Verticaal gecentreerd t.o.v. de tekst. Hoogte komt uit het
   height-attribuut. */
.mimoda-footer__contact li {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 8px;
}
.mimoda-footer__contact svg { width: 18px; flex: 0 0 18px; color: var(--mimoda-gold); }
.mimoda-footer__contact span { line-height: 19px; }

/* Adres (2 regels): regelafstand 19px zoals in het ontwerp (was 29px van de
   linkregel). De speld staat in Figma — desktop én mobiel — 8px onder de
   bovenkant van het adres: tussen de twee regels, 2px boven het midden (klant
   15-10). Dus gecentreerd (basisregel) + margin-top -4px: de negatieve marge
   telt half mee in de centrering en tilt de speld precies 2px op. */
.mimoda-footer__address a { line-height: 19px; }
.mimoda-footer__address svg { margin-top: -4px; }

.mimoda-footer__social { display: flex; gap: 12px; margin-top: 18px; }
.mimoda-footer__social a { color: var(--mimoda-gold); transition: color .15s ease; }
.mimoda-footer__social a:hover { color: var(--mimoda-accent); } /* #e598e5 — zelfde hover als de footerlinks */
.mimoda-footer__social svg {
	width: 34px;
	height: 34px;
	display: block;
	--fill-0: currentColor; /* Figma-export vult met var(--fill-0, white) → volgt de linkkleur */
}

/* Signup-kolom (rechts) */
.mimoda-footer__heading--script { line-height: 1.15; }
.mimoda-footer__signup-text { font-size: 14px; line-height: 19px; margin: 0 0 14px; }
.mimoda-footer__signup { display: flex; flex-direction: column; gap: 10px; }
.mimoda-footer__signup input {
	height: 44px;
	border: none;
	border-radius: var(--mimoda-radius);
	background: #fff;
	padding: 0 16px;
	font-family: var(--mimoda-font);
	font-size: 14px;
	color: var(--mimoda-ink);
}
.mimoda-footer__signup input::placeholder { color: var(--mimoda-mauve); opacity: 1; }
.mimoda-footer__signup button {
	height: 44px;
	border: none;
	border-radius: var(--mimoda-radius);
	background: #fff;
	color: var(--mimoda-pink);
	font-family: var(--mimoda-font);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
	transition: var(--mimoda-btn-transition);
}
.mimoda-footer__signup button:hover {
	transform: translateY(var(--mimoda-btn-lift));
	box-shadow: var(--mimoda-btn-shadow);
	color: var(--mimoda-accent-strong);
}
.mimoda-footer__signup button:active {
	transform: translateY(var(--mimoda-btn-press));
	box-shadow: var(--mimoda-btn-shadow-active);
}

/* --- Copyright ------------------------------------------------------- */
.mimoda-footer__copy {
	background: #fff;
	padding-block: 14px;
}
.mimoda-footer__copy p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	color: #000;
}
/* Sellabees-referral-link in de copyright: zelfde orchidee-hover als de footerlinks. */
.mimoda-footer__copy a { transition: color .15s ease; }
.mimoda-footer__copy a:hover { color: var(--mimoda-accent); } /* #e598e5 */

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

/* Nieuwsbrieftekst breder: 2 regels i.p.v. 3 */
.mimoda-newsletter__text { max-width: 640px; }

/* Footer-social als design-SVG (witte cirkel, transparant glyph) */
.mimoda-footer__social img { width: 34px; height: 34px; display: block; }

/* "Aanmelden" — knop (orchidee, witte tekst; was wit met roze tekst op de roze
   footer) die naar het nieuwsbriefformulier linkt */
.mimoda-footer__signup-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	border-radius: var(--mimoda-radius);
	background: var(--mimoda-accent); /* #e598e5 */
	color: #fff;
	font-family: var(--mimoda-font);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .02em;
	align-self: flex-start;
	transition: var(--mimoda-btn-transition);
}
.mimoda-footer__signup-btn:hover {
	filter: brightness(.95); /* zelfde hover als .mimoda-btn */
	transform: translateY(var(--mimoda-btn-lift));
	box-shadow: var(--mimoda-btn-shadow);
}
.mimoda-footer__signup-btn:active {
	filter: brightness(.93);
	transform: translateY(var(--mimoda-btn-press));
	box-shadow: var(--mimoda-btn-shadow-active);
}

/* Copyright + betaalmethoden op één rij */
.mimoda-footer__copy-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.mimoda-footer__copy-inner .mimoda-footer__payment,
.mimoda-footer__payment { height: 28px; width: auto; max-width: 220px; flex: 0 0 auto; }

/* Betaallogo's naast elkaar (klantwens 27-07; sinds 13-08 alleen iDEAL/WERO) —
   zelfde set + optische hoogtes als de winkelwagen (woocommerce.css), zodat ze
   visueel gelijk ogen. */
.mimoda-footer__payments {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}
.mimoda-footer__payments li { margin: 0; padding: 0; display: flex; align-items: center; }
.mimoda-footer__payments img.pay-logo { width: auto; display: block; }
.mimoda-footer__payments img.pay-ideal { height: 21px; }
.mimoda-footer__payments img.pay-billink { height: 24px; }
.mimoda-footer__payments img.pay-klarna { height: 29px; }
.mimoda-footer__payments img.pay-bancontact { height: 35px; }

/* =========================================================================
   Mobiel (≤981px) — 1:1 op Figma-footer (Component 406:105).
   Nieuwsbriefband + footer-kolommen stapelen tot één kolom.
   ========================================================================= */
@media (max-width: 981px) {
	/* Nieuwsbriefband "€5 korting voor jou!" — alles gestapeld.
	   Kleinere tussenruimte intro↔formulier (minder witruimte boven "Naam"). */
	.mimoda-newsletter { padding-block: 40px; }
	.mimoda-newsletter__inner { grid-template-columns: 1fr; gap: 16px; }
	.mimoda-newsletter__title { font-size: 30px; margin-bottom: 12px; }
	.mimoda-newsletter__text { max-width: none; margin-bottom: 0; }
	.mimoda-newsletter__fields { grid-template-columns: 1fr; gap: 14px; }

	/* Hoofd-footer — 1 kolom (wint van de 1360px-regel: staat later in de cascade) */
	.mimoda-footer__main { padding-block: 40px 34px; }
	.mimoda-footer__grid { grid-template-columns: 1fr; row-gap: 34px; }
	.mimoda-footer__heading { font-size: 24px; margin-bottom: 14px; }

	/* Contactregels iets ruimer dan de 19px van het desktop-adres. */
	.mimoda-footer__contact a { line-height: 1.45; }

	/* Signup-tekst: geen losse-woord-orphan ("bestelling" alleen) — balanceer de
	   regels zodat de wrap netjes na het "€5,-"-deel valt (design). */
	.mimoda-footer__signup-text { text-wrap: balance; }

	/* Copyright + betaaliconen: op smalle schermen onder elkaar */
	.mimoda-footer__copy-inner { flex-wrap: wrap; gap: 14px; }
}

/* =========================================================================
   €5-aanmeldpopup (footer "Aanmelden"-knop). De shell komt uit de core
   (.sellabees-popup / __overlay / __box / __close); hieronder de Mimoda-
   huisstijl van de box + het formulier.
   ========================================================================= */
.mimoda-signup-popup__box {
	max-width: 460px;
	text-align: center;
	padding: 42px 40px 44px;
	border: none;
	border-radius: 6px;
}
.mimoda-signup-popup__title {
	font-family: var(--mimoda-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.1;
	color: var(--mimoda-ink);
	margin: 0 0 12px;
}
.mimoda-signup-popup__text {
	font-size: 14px;
	line-height: 24px;
	color: var(--mimoda-ink);
	margin: 0 0 22px;
}
.mimoda-signup-popup__form { display: flex; flex-direction: column; gap: 12px; }
.mimoda-signup-popup__form input {
	height: 46px;
	border: 1px solid #e0cfcf;
	border-radius: 6px;
	padding: 0 16px;
	font-family: var(--mimoda-font);
	font-size: 14px;
	color: var(--mimoda-ink);
	background: #fff;
}
.mimoda-signup-popup__form input::placeholder { color: var(--mimoda-mauve); opacity: 1; }
.mimoda-signup-popup__form .mimoda-btn { width: 100%; margin-top: 2px; }
.mimoda-signup-popup .sellabees-news-msg { margin-top: 12px; font-size: 13px; }
.mimoda-signup-popup .sellabees-news-msg.is-ok { color: #2e7d32; }
.mimoda-signup-popup .sellabees-news-msg.is-error { color: var(--mimoda-coral-ink); }