/* section-01-header — точная подгонка шапки под референс www.venstermarkt.com.
   Только слой шапки (topbar / header / nav). Разметка DaisyUI не меняется. */

/* ширина контейнера шапки как на живом сайте (контент 1240px) */
.mk-topbar > .mk-container,
.mk-header > .mk-container,
.mk-nav > .mk-container { max-width: 1272px; }

/* ---- sticky: главная шапка (header + nav) следует за скроллом ---- */
.drawer, .drawer-content { overflow: visible; }
.mk-sticky-head {
  position: sticky;
  top: 0;
  z-index: 80;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}
/* якоря/скролл к секциям не должны уезжать под шапку */
html { scroll-padding-top: 130px; }
@media (max-width: 1023px) { html { scroll-padding-top: 100px; } }

/* ---- row 1: utility bar ---- */
.mk-topbar { font-size: 13px; }
.mk-topbar-inner { min-height: 40px; }
.mk-topbar-menu li > *,
.mk-topbar-menu li > span { font-size: 13px; padding: 4px 9px; gap: 7px; }
.mk-topbar-menu i { font-size: 13px; opacity: 1; }
.mk-topbar-strong { font-weight: 700; }

/* ---- row 2: main bar ---- */
.mk-header .mk-navbar { min-height: 80px; position: relative; padding-inline: 16px; }
.mk-header .mk-logo-img { height: 48px; }
.mk-header .mk-waarborg { height: 30px; margin-right: 10px; }
.mk-header .mk-icon-btn { width: 44px; height: 44px; min-height: 44px; font-size: 21px; }
.mk-header .mk-navbar-start { flex: 1 1 0; width: auto; }
.mk-header .mk-navbar-end { flex: 1 1 0; width: auto; justify-content: flex-end; gap: 6px; }

/* тост-контейнер не должен занимать место над шапкой — он живёт внизу экрана */
#alert { position: fixed; top: auto; bottom: 0; right: 0; z-index: 1200; padding: 12px; }
.mk-cart-badge, .mk-count-badge { top: 2px; right: 0; }

/* поиск: одна белая «таблетка», иконка внутри справа */
.mk-header .mk-navbar-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 548px; justify-content: center;
}
.mk-header .mk-search { position: relative; width: 100%; max-width: 548px; }
.mk-header .mk-search-input {
  width: 100%; height: 44px; min-height: 44px; border-radius: 999px !important;
  padding-inline: 22px 56px; font-size: 15px;
}
/* Кнопка-лупа центрируется через top/bottom, а НЕ через transform:
   DaisyUI ставит .btn{animation:button-pop} и .btn:active{transform:...},
   которые перебивают translateY(-50%) и роняли лупу вниз из «таблетки». */
.mk-header .mk-search-btn {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  height: auto; min-height: 0; width: 44px;
  background: transparent; border-radius: 999px; color: #1A1A1A; font-size: 17px;
  animation: none;
  transform: none;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.mk-header .mk-search-btn:hover { background: rgba(0,0,0,.07); color: #000; }
/* лёгкая анимация нажатия — только масштаб, без сдвига */
.mk-header .mk-search-btn:focus,
.mk-header .mk-search-btn:focus-visible { transform: none; animation: none; }
.mk-header .mk-search-btn:active,
.mk-header .mk-search-btn:active:hover,
.mk-header .mk-search-btn:active:focus { transform: scale(.94); animation: none; }

/* ---- бургер: три полоски на всех страницах, без слова MENU ---- */
.mk-header .mk-hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  font-size: 21px; color: #fff; background: transparent; border: none;
  margin-right: 6px;
}
.mk-header .mk-hamburger i { line-height: 1; }

/* ---- выдвижное меню: слева, не зависит от grid-раскладки DaisyUI ---- */
.drawer > .mk-drawer-side {
  position: fixed; inset: 0; z-index: 95;
  display: block; width: auto; height: 100%;
  visibility: hidden; pointer-events: none; overflow: visible;
}
.drawer > #mk-drawer:checked ~ .mk-drawer-side {
  visibility: visible; pointer-events: auto;
}
.drawer > .mk-drawer-side > .drawer-overlay {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; min-height: 0;
  background: rgba(0, 0, 0, .45); opacity: 0;
  transition: opacity .2s ease;
}
.drawer > #mk-drawer:checked ~ .mk-drawer-side > .drawer-overlay { opacity: 1; }
.drawer > .mk-drawer-side > .mk-drawer-panel {
  position: absolute; top: 0; left: 0; right: auto; bottom: 0;
  height: 100%; overflow-y: auto;
  transform: translateX(-100%); transition: transform .25s ease;
  box-shadow: 0 0 24px rgba(0, 0, 0, .28);
}
.drawer > #mk-drawer:checked ~ .mk-drawer-side > .mk-drawer-panel { transform: translateX(0); }

/* ---- row 3: nav ---- */
.mk-nav-menu { min-height: 46px; }
.mk-nav-link { font-size: 14px; padding: 13px 15px; }

/* ---- mobile 390: логотип по центру, поиск отдельной строкой ---- */
@media (max-width: 1023px) {
  .mk-header .mk-navbar {
    min-height: 50px; flex-wrap: wrap; padding-bottom: 10px; row-gap: 8px;
  }
  .mk-header .mk-navbar-start { flex: 1 1 auto; min-width: 0; }
  /* Логотип в потоке рядом с бургером: абсолютное центрирование на узком экране
     наезжало на иконку личного кабинета (см. заявку тестера). */
  .mk-header .mk-logo {
    position: static; left: auto; top: auto;
    transform: none; margin: 0; min-width: 0; overflow: hidden;
  }
  .mk-header .mk-logo-img { height: 28px; max-width: 100%; }
  .mk-header .mk-navbar-center {
    position: static; transform: none; order: 3;
    flex: 1 0 100%; max-width: none; width: 100%;
  }
  /* поиск — на всю ширину строки (theme.css ставит .mk-search-wrap{width:auto}) */
  .mk-header .mk-search-wrap { width: 100%; max-width: none; }
  .mk-header .mk-search { max-width: none; width: 100%; }
  .mk-header .mk-search-input {
    display: block; width: 100%; height: 40px; min-height: 40px; font-size: 14px;
  }
  .mk-header .mk-search-btn {
    position: absolute; display: flex; width: 42px; background: transparent;
    border-radius: 999px; color: #1A1A1A;
  }
  .mk-header .mk-navbar-end .mk-icon-btn[aria-label="Verlanglijst"] { display: inline-flex; }
  .mk-header .mk-icon-btn { width: 38px; height: 38px; min-height: 38px; font-size: 19px; }
  .mk-header .mk-navbar-end { gap: 2px; }
}