/* woonwinkel-footer 1.0.0 · 21st-port van @meschacirung/footer-2 (21st.dev). Tailwind-maten uit de bron: footer pt-20,
   container max-w-5xl (1024 px) px-6; raster gap-12 en vanaf md vijf kolommen, links twee kolommen met alleen het logo
   (hier de merknaam als tekst) als link naar boven, rechts drie kolommen (col-span-3, grid-cols-3, gap-6) met per groep
   een medium kop (block font-medium) en daaronder losse bloklinks in de gedempte tint met hover naar de hoofdkleur in
   150 ms; onderregel mt-12 py-6 boven een lijn, flex-wrap items-end justify-between gap-6, copyright text-sm gedempt en
   rechts een rij; op mobiel staat die rij boven het copyright (order-first/last wisselen vanaf md). Hier op --m-ink met
   tekst in --m-bg en lijnen in --m-bg op 15 procent; de socialiconen vervallen (fictief merk). Geen animatie. */
.msm-woonwinkel-footer {
  --bf-ease: cubic-bezier(.2, 0, 0, 1);
  --bf-muted: color-mix(in srgb, var(--m-bg, #dfddd8) 70%, var(--m-ink, #252628));
  --bf-line: color-mix(in srgb, var(--m-bg, #dfddd8) 15%, transparent);
  box-sizing: border-box;
  width: 100%;
  padding: 80px 24px 0;
  background: var(--m-ink, #252628);
  color: var(--m-bg, #dfddd8);
  font-family: var(--m-font-body, 'Manrope', ui-sans-serif, system-ui, sans-serif);
}
.msm-woonwinkel-footer *,
.msm-woonwinkel-footer *::before,
.msm-woonwinkel-footer *::after { box-sizing: border-box; }
.msm-woonwinkel-footer p { margin: 0; }
.msm-woonwinkel-footer a { color: inherit; text-decoration: none; }
.msm-woonwinkel-footer a:focus-visible { outline: 2px solid var(--m-accent2, #c48a6e); outline-offset: 3px; border-radius: 3px; }

.msm-woonwinkel-footer .bf-wrap { width: 100%; max-width: 1024px; margin: 0 auto; }

/* Raster: gap-12, vanaf md vijf kolommen (2 + 3). */
.msm-woonwinkel-footer .bf-grid { display: grid; gap: 48px; }
.msm-woonwinkel-footer .bf-brand { display: flex; flex-direction: column; gap: 24px; }
.msm-woonwinkel-footer .bf-home { display: inline-flex; flex-direction: column; gap: 4px; width: fit-content; }
.msm-woonwinkel-footer .bf-name {
  font-family: var(--m-font-display, 'Instrument Serif', ui-serif, Georgia, serif);
  font-size: 40px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--m-bg, #dfddd8);
}
.msm-woonwinkel-footer .bf-sub { font-size: 16px; line-height: 24px; color: var(--bf-muted); }
.msm-woonwinkel-footer .bf-note { max-width: 360px; font-size: 14px; line-height: 20px; color: var(--bf-muted); }

/* Drie groepen: medium kop, daaronder losse bloklinks (space-y-4). */
.msm-woonwinkel-footer .bf-cols { display: grid; grid-template-columns: 1fr; gap: 32px 24px; }
.msm-woonwinkel-footer .bf-col { display: flex; flex-direction: column; gap: 16px; font-size: 16px; line-height: 24px; }
.msm-woonwinkel-footer .bf-col-title { display: block; font-weight: 500; color: var(--m-bg, #dfddd8); }
.msm-woonwinkel-footer .bf-col a,
.msm-woonwinkel-footer .bf-line { display: block; color: var(--bf-muted); }
.msm-woonwinkel-footer .bf-col a { transition: color .15s var(--bf-ease); }
.msm-woonwinkel-footer .bf-col a:hover { color: var(--m-accent2, #c48a6e); }

/* Onderregel boven een lijn. */
.msm-woonwinkel-footer .bf-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--bf-line);
  font-size: 14px;
  line-height: 20px;
  color: var(--bf-muted);
}
.msm-woonwinkel-footer .bf-copy { order: 2; display: block; width: 100%; text-align: center; }
.msm-woonwinkel-footer .bf-bottom-links { order: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; width: 100%; }

@media (min-width: 640px) {
  .msm-woonwinkel-footer .bf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .msm-woonwinkel-footer .bf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .msm-woonwinkel-footer .bf-brand { grid-column: span 2; }
  .msm-woonwinkel-footer .bf-cols { grid-column: span 3; }
  .msm-woonwinkel-footer .bf-copy { order: 1; width: auto; text-align: left; }
  .msm-woonwinkel-footer .bf-bottom-links { order: 2; width: auto; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-woonwinkel-footer .bf-col a { transition: none; }
}