/* woonwinkel-header-shell 1.0.0 · 21st-port van @balick/segmented-control (21st.dev, motion/react) als navigatie.
   Uit de bron: een radiogroep in een ronde rand (rounded-full, border, bg muted op 50 procent, padding 4 px) met
   knoppen van 32 px hoog, px-4, text-sm font-medium en één pil (absolute, rounded-full) die als gedeelde layout-overgang
   naar de gekozen knop reist met een veer (bounce 0,2, duur 0,4 s; module.js zet die als linear()-easing). De gekozen
   knop krijgt de inkttekst, de andere de gedempte tint met hover naar inkt. Hier staat de pil in --m-accent2 op
   35 procent op een lichte balk in --m-surface met een lijn van 1 px eronder. De balk, de acties rechts en het paneel
   onder 1024 px (Escape, scroll-lock, focusherstel) zijn eigen bouw in de --m-*-tokens. */
.msm-woonwinkel-header-shell {
  --bm-ease: cubic-bezier(.2, 0, 0, 1);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  padding: 0 16px;
  background: var(--m-surface, #f7f6f2);
  color: var(--m-ink, #252628);
  font-family: var(--m-font-body, 'Manrope', ui-sans-serif, system-ui, sans-serif);
}
.msm-woonwinkel-header-shell *,
.msm-woonwinkel-header-shell *::before,
.msm-woonwinkel-header-shell *::after { box-sizing: border-box; }
.msm-woonwinkel-header-shell svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.msm-woonwinkel-header-shell a { color: inherit; text-decoration: none; }
.msm-woonwinkel-header-shell p { margin: 0; }
.msm-woonwinkel-header-shell a:focus-visible,
.msm-woonwinkel-header-shell button:focus-visible { outline: 2px solid var(--m-primary, #9a5237); outline-offset: 3px; border-radius: 9999px; }

.msm-woonwinkel-header-shell .bm-nav { border-bottom: 1px solid var(--m-line, #c8c5be); }
.msm-woonwinkel-header-shell .bm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 0;
}
.msm-woonwinkel-header-shell .bm-brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--m-font-display, 'Instrument Serif', ui-serif, Georgia, serif);
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--m-ink, #252628);
}

/* De segmented control uit de bron: ronde rand, bg muted op 50 procent, padding 4 px, één reizende pil. */
.msm-woonwinkel-header-shell .bm-segments {
  position: relative;
  display: none;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--m-line, #c8c5be);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--m-bg, #dfddd8) 50%, transparent);
}
.msm-woonwinkel-header-shell .bm-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 0;
  height: 32px;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--m-accent2, #c48a6e) 35%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-pill.is-on { opacity: 1; }
.msm-woonwinkel-header-shell .bm-seg {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 9999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--m-muted, #6b6d6e);
  cursor: pointer;
  transition: color .15s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-seg:hover,
.msm-woonwinkel-header-shell .bm-seg[aria-checked="true"] { color: var(--m-ink, #252628); }
.msm-woonwinkel-header-shell .bm-seg:focus-visible { outline-offset: -2px; }
.msm-woonwinkel-header-shell .bm-seg-label { position: relative; display: flex; align-items: center; gap: 6px; }

.msm-woonwinkel-header-shell .bm-actions { display: none; align-items: center; gap: 20px; margin-left: auto; }
.msm-woonwinkel-header-shell .bm-secondary {
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: var(--m-muted, #6b6d6e);
  transition: color .15s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-secondary:hover { color: var(--m-ink, #252628); }
.msm-woonwinkel-header-shell .bm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 9999px;
  background: var(--m-primary, #9a5237);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--m-surface, #f7f6f2);
  transition: background-color .2s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-cta:hover { background: color-mix(in srgb, var(--m-primary, #9a5237) 84%, var(--m-ink, #252628)); }

.msm-woonwinkel-header-shell .bm-menu,
.msm-woonwinkel-header-shell .bm-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 40px;
  padding: 0 10px;
  border: 1px solid var(--m-line, #c8c5be);
  border-radius: 9999px;
  background: transparent;
  color: var(--m-ink, #252628);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s var(--bm-ease), background-color .2s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-menu:hover,
.msm-woonwinkel-header-shell .bm-close:hover { border-color: var(--m-muted, #6b6d6e); background: var(--m-bg, #dfddd8); }
.msm-woonwinkel-header-shell .bm-menu svg,
.msm-woonwinkel-header-shell .bm-close svg { width: 20px; height: 20px; }
.msm-woonwinkel-header-shell .bm-menu-text { display: none; }

/* Paneel onder 1024 px: de vijf secties als verticale lijst, Kennis en de knop eronder. */
.msm-woonwinkel-header-shell .bm-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  overflow-y: auto;
  background: var(--m-surface, #f7f6f2);
  color: var(--m-ink, #252628);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s var(--bm-ease), transform .25s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-panel[hidden] { display: none; }
.msm-woonwinkel-header-shell .bm-panel.is-open { opacity: 1; transform: none; }
.msm-woonwinkel-header-shell .bm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 0;
  border-bottom: 1px solid var(--m-line, #c8c5be);
}
.msm-woonwinkel-header-shell .bm-panel-links {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 0;
}
.msm-woonwinkel-header-shell .bm-panel-links a {
  display: block;
  padding: 12px 16px;
  border-radius: 9999px;
  font-family: var(--m-font-display, 'Instrument Serif', ui-serif, Georgia, serif);
  font-size: 30px;
  line-height: 1.15;
  color: var(--m-ink, #252628);
  transition: background-color .15s var(--bm-ease);
}
.msm-woonwinkel-header-shell .bm-panel-links a:hover { background: color-mix(in srgb, var(--m-bg, #dfddd8) 60%, transparent); }
.msm-woonwinkel-header-shell .bm-panel-links a[aria-current="location"] { background: color-mix(in srgb, var(--m-accent2, #c48a6e) 35%, transparent); }
.msm-woonwinkel-header-shell .bm-panel-foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 0 32px;
  border-top: 1px solid var(--m-line, #c8c5be);
}
.msm-woonwinkel-header-shell .bm-cta-panel { align-self: flex-start; height: 48px; padding: 0 22px; font-size: 16px; }
.msm-woonwinkel-header-shell .bm-foot-line { font-size: 13px; line-height: 20px; color: var(--m-muted, #6b6d6e); }

@media (min-width: 640px) {
  .msm-woonwinkel-header-shell .bm-menu-text { display: inline; }
  .msm-woonwinkel-header-shell .bm-panel-links a { font-size: 36px; }
}
@media (min-width: 768px) {
  .msm-woonwinkel-header-shell .bm-actions { display: flex; }
}
@media (min-width: 1024px) {
  .msm-woonwinkel-header-shell .bm-segments { display: inline-flex; }
  .msm-woonwinkel-header-shell .bm-actions { margin-left: 0; }
  .msm-woonwinkel-header-shell .bm-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-woonwinkel-header-shell .bm-panel { transform: none; transition: opacity .2s ease-out; }
  .msm-woonwinkel-header-shell .bm-pill,
  .msm-woonwinkel-header-shell .bm-seg,
  .msm-woonwinkel-header-shell .bm-secondary,
  .msm-woonwinkel-header-shell .bm-cta,
  .msm-woonwinkel-header-shell .bm-menu,
  .msm-woonwinkel-header-shell .bm-close,
  .msm-woonwinkel-header-shell .bm-panel-links a { transition: none; }
}