/* tuincentrum-header-shell 1.0.0 · 21st-port van @akashsingh890901-crypto/glassmorphism-navigation (21st.dev).
   Tailwind-maten uit de bron: fixed, left-1/2 -translate-x-1/2, z-50, mb-6 onderaan en pt-6 bovenaan; pil gap-3 py-1 px-1
   rounded-full shadow-lg, backdrop-filter blur(20px) saturate(180%), border 1 px in 5 % ink; tabs text-sm font-semibold px-6 py-2
   rounded-full, actief bg-black/5 met het lampje: w-8 h-1 rounded-t-full op -top-2, gloed w-12 h-6 blur-md, w-8 h-6 blur-md en
   w-4 h-4 blur-sm in 20 % primary. Thema-knop en scheidingslijn uit de bron vervallen; merknaam en CTA staan buiten de pil. */
.msm-tuincentrum-header-shell {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 56px;
  pointer-events: none;
  color: var(--m-ink, #203522);
  font-family: var(--m-font-body, 'Figtree', ui-sans-serif, system-ui, sans-serif);
}
.msm-tuincentrum-header-shell *,
.msm-tuincentrum-header-shell *::before,
.msm-tuincentrum-header-shell *::after { box-sizing: border-box; }
.msm-tuincentrum-header-shell a { color: inherit; text-decoration: none; }
.msm-tuincentrum-header-shell a:focus-visible { outline: 2px solid var(--m-primary, #d76538); outline-offset: 2px; }

/* Smalle balk bovenaan (op desktop zonder achtergrond: merknaam links, Kennis en CTA rechts). */
.msm-tuincentrum-header-shell .kk-bar {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  pointer-events: auto;
  background: color-mix(in srgb, var(--m-surface, #f3f6ee) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--m-ink, #203522) 5%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
.msm-tuincentrum-header-shell .kk-brand {
  font-family: var(--m-font-display, 'Fraunces', ui-serif, Georgia, serif);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.msm-tuincentrum-header-shell .kk-actions { display: flex; align-items: center; gap: 10px; }
.msm-tuincentrum-header-shell .kk-secondary {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: color-mix(in srgb, var(--m-ink, #203522) 80%, transparent);
  transition: color .3s ease;
}
.msm-tuincentrum-header-shell .kk-secondary:hover { color: var(--m-primary, #d76538); }
.msm-tuincentrum-header-shell .kk-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--m-ink, #203522) 30%, transparent);
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.msm-tuincentrum-header-shell .kk-cta:hover { background: var(--m-primary, #d76538); border-color: var(--m-primary, #d76538); color: var(--m-surface, #f3f6ee); }

/* De pil van matglas: onder 768 px gedokt onderaan het scherm (mb-6). */
.msm-tuincentrum-header-shell .kk-dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin-bottom: 24px;
  pointer-events: auto;
}
.msm-tuincentrum-header-shell .kk-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--m-ink, #203522) 5%, transparent);
  background: color-mix(in srgb, var(--m-surface, #f3f6ee) 30%, transparent);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: background-color .3s ease, border-color .3s ease;
}
.msm-tuincentrum-header-shell .kk-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: color-mix(in srgb, var(--m-ink, #203522) 80%, transparent);
  cursor: pointer;
  white-space: nowrap;
  transition: color .3s ease, background-color .3s ease;
}
.msm-tuincentrum-header-shell .kk-tab:hover { color: var(--m-primary, #d76538); }
.msm-tuincentrum-header-shell .kk-tab.is-active { background: color-mix(in srgb, var(--m-ink, #203522) 5%, transparent); color: var(--m-primary, #d76538); }
.msm-tuincentrum-header-shell .kk-tab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.msm-tuincentrum-header-shell .kk-label { display: none; }

/* Het lampje: een gedeelde laag die met een veer van tab naar tab schuift (layoutId "lamp"). */
.msm-tuincentrum-header-shell .kk-lamp {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-primary, #d76538) 5%, transparent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
}
.msm-tuincentrum-header-shell .kk-lamp.is-placed { opacity: 1; }
.msm-tuincentrum-header-shell .kk-lamp-bar {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 32px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: var(--m-primary, #d76538);
}
.msm-tuincentrum-header-shell .kk-glow { position: absolute; display: block; border-radius: 999px; background: color-mix(in srgb, var(--m-primary, #d76538) 20%, transparent); }
.msm-tuincentrum-header-shell .kk-glow-1 { width: 48px; height: 24px; top: -8px; left: -8px; filter: blur(12px); }
.msm-tuincentrum-header-shell .kk-glow-2 { width: 32px; height: 24px; top: -4px; left: 0; filter: blur(12px); }
.msm-tuincentrum-header-shell .kk-glow-3 { width: 16px; height: 16px; top: 0; left: 8px; filter: blur(4px); }

@media (min-width: 768px) {
  .msm-tuincentrum-header-shell { height: 88px; }
  .msm-tuincentrum-header-shell .kk-bar {
    height: auto;
    padding: 24px;
    background: none;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .msm-tuincentrum-header-shell .kk-brand { font-size: 22px; }
  .msm-tuincentrum-header-shell .kk-cta { padding: 8px 18px; }
  .msm-tuincentrum-header-shell .kk-dock { bottom: auto; top: 0; margin-bottom: 0; padding-top: 24px; }
  .msm-tuincentrum-header-shell .kk-tab svg { display: none; }
  .msm-tuincentrum-header-shell .kk-label { display: inline; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .msm-tuincentrum-header-shell .kk-tab { padding: 8px 14px; font-size: 13px; }
  .msm-tuincentrum-header-shell .kk-pill { gap: 6px; }
  .msm-tuincentrum-header-shell .kk-secondary { display: none; }
}
@media (min-width: 1024px) {
  .msm-tuincentrum-header-shell .kk-bar { padding: 24px 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-tuincentrum-header-shell .kk-tab,
  .msm-tuincentrum-header-shell .kk-secondary,
  .msm-tuincentrum-header-shell .kk-cta,
  .msm-tuincentrum-header-shell .kk-pill { transition: none; }
}