/* ============================================================
   header-redesign.css — EgetTryck.se header override
   Ветка: feature/header-redesign
   Скоуп: только зона над меню (лого/поиск/доставка/переключатель/аккаунт/корзина).
   Меню (verticalmenu) НЕ трогаем.
   Перекрашивание B2B висит на html.mode-b2b (класс ставит модуль modeswitcher).
   ============================================================ */

:root {
  --eg-ink:      #1a1a1a;
  --eg-accent:   #e84444;
  --eg-canvas:   #f9f8f6;
  --eg-stamp:    #f0ece4;
  --eg-border:   #e2ddd8;
  --eg-header-bg:#f2ede3;
  --eg-green:    #2e7d5c;
  --eg-green-dk: #245147;
  --eg-green-bg: #eef4f0;
  --eg-green-bd: #bcd8cb;
  --eg-yellow:   #f5a623;
  --eg-muted:    #6b6a63;
}

/* ─────────── Каркас: 3 зоны (search | logo | actions) ───────────
   !important обязателен: встроенный critical CSS темы задаёт фон через
   #header.header-5 .header-center { background-color:#030303 } — ID в селекторе
   даёт более высокую специфичность, чем .header-5 .eg-header-center без !important. */
.header-5 .eg-header-center,
#header.header-5 .eg-header-center {
  background: var(--eg-header-bg) !important;
  border-bottom: 2px solid var(--eg-ink) !important;
  transition: background .35s ease, border-color .35s ease;
}
/* мобильная и sticky-шапки — в тот же кремовый тон (та же причина для !important) */
.header-5 .header-mobile,
#header.header-5 .header-mobile {
  background: var(--eg-header-bg) !important;
  transition: background .35s ease;
}
#header-sticky.sticky-header-5 { background: var(--eg-header-bg) !important; }
.header-5 .eg-header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 76px;
  padding: 10px 0;
}
.header-5 .eg-zone-left  { display: flex; align-items: center; }
/* flex-column + position:static !important на всех детях гарантирует, что
   слоган стоит СТРОГО ПОД логотипом, даже если где-то в CSS темы на .logo /
   .contentsticky_logo висит унаследованный position:absolute (sticky-эффект
   логотипа) — из-за него слоган раньше наезжал поверх картинки. */
.header-5 .eg-zone-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center;
  text-align: center;
  line-height: 1;
  position: relative;
}
.header-5 .eg-zone-logo > a {
  position: static !important;
  display: inline-flex !important;
}
/* найдено в браузере через DevTools: старое правило темы
   #_desktop_logo img.logo { min-width:250px; margin:-50px 0px; }
   тянуло картинку на 50px вверх (обрезалась сверху) и форсило min-width:250px.
   Оно живёт по ID (#_desktop_logo сохранён на контейнере ради совместимости),
   поэтому перебиваем margin/min-width явным !important. */
.header-5 .eg-zone-logo img.logo {
  position: static !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-height: 54px;
  max-width: 100%;
  object-fit: contain;
  display: block !important;
}
/* слоган под логотипом — чёрный, не меняется в B2B-режиме */
.header-5 .eg-slogan {
  position: static !important;
  margin-top: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--eg-ink);
  white-space: nowrap; line-height: 1.2;
}
.header-5 .eg-zone-right { display: flex; justify-content: flex-end; }
.header-5 .eg-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
}

/* ─────────── Поиск (displayAdvanceSearch / novadvancedsearch) в пилюлю ───────────
   Виджет темы по умолчанию — «схлопнутая» иконка, разворачивается по клику через
   класс .search-active (id-селекторы #header.header-5 #_desktop_search_content ...):
     .form-novadvancedsearch { max-width:42px; visibility:hidden; opacity:0 }
     .search-active .form-novadvancedsearch { max-width:310px; visibility:visible; opacity:1 }
     .search-button { position:absolute; left:0; background:#264653; border-radius:50% } — тёмный
     кружок теми поверх свёрнутой формы, ВСЕГДА видим, если нет .search-active.
   Нам нужна всегда открытая белая пилюля — убираем схлопывание и прячем кружок темы;
   свою иконку берём из штатной кнопки сабмита (.button-search), кладём её справа в пилюле. *
   Также #_desktop_search_content .search_query{background:#f4f4f4;...} — с ID, поэтому
   белый фон и border тут тоже через !important. */
.header-5 .eg-search-wrap { width: 100%; max-width: 300px; }
.header-5 .eg-search-wrap form,
.header-5 .eg-search-wrap .search-widget,
.header-5 .eg-search-wrap .ui-widget { width: 100%; }
.header-5 .eg-search-wrap #_desktop_search_content,
.header-5 .eg-search-wrap .form-novadvancedsearch {
  width: 100% !important;
  max-width: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
}
.header-5 .eg-search-wrap .search-button { display: none !important; }
.header-5 .eg-search-wrap .input-group {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  position: relative !important;
}
.header-5 .eg-search-wrap input[type="text"],
.header-5 .eg-search-wrap input.search_query,
.header-5 .eg-search-wrap input.ui-autocomplete-input {
  width: 100%;
  background: #fff !important;
  border: 1px solid var(--eg-border) !important;
  border-radius: 99px !important;
  padding: 9px 44px 9px 16px !important;
  font-size: 13px;
  height: auto;
  box-shadow: none !important;
  transition: border-color .35s ease, background .35s ease;
}
.header-5 .eg-search-wrap input:focus { border-color: var(--eg-ink) !important; outline: none; }
/* штатная кнопка сабмита — переносим внутрь пилюли, справа, как круглую icon-button.
   Тема даёт кнопке СВОЙ position:absolute;top:4px;right:4px;width:38px;height:38px
   через ID-правило (#_desktop_search_content .btn.btn-secondary) — оно сильнее
   без !important. Из-за двух вложенных absolute (обёртка + сама кнопка) кнопка
   проваливалась ниже пилюли. Фикс: обёртка absolute+по центру (!important),
   а у самой кнопки жёстко глушим position → static, чтобы она просто заполнила
   обёртку без собственного смещения. */
.header-5 .eg-search-wrap .input-group-btn.button-search {
  position: absolute !important;
  right: 4px !important; left: auto !important; bottom: auto !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 30px !important; height: 30px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  z-index: 2;
}
.header-5 .eg-search-wrap .button-search button {
  position: static !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important; max-height: none !important;
  background: var(--eg-ink) !important;
  border: none !important; border-radius: 50% !important;
  color: #fff !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important;
  cursor: pointer;
}
.header-5 .eg-search-wrap .button-search button i { margin: 0; font-size: 12px; }
html.mode-b2b .header-5 .eg-search-wrap .button-search button { background: var(--eg-green) !important; }

/* ─────────── Доставка: ⚡ бейдж + тултип ─────────── */
.header-5 .eg-delivery { position: relative; display: flex; }
.header-5 .eg-delivery-btn {
  display: flex; align-items: center; gap: 6px;
  background: none;
  border: 1px solid var(--eg-border);
  border-radius: 99px;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--eg-muted);
  font-family: inherit; font-size: 12px; font-weight: 600;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.header-5 .eg-delivery-btn:hover { border-color: var(--eg-green); color: var(--eg-green); }
.header-5 .eg-delivery-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.header-5 .eg-delivery-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 260px; max-width: 80vw;
  background: var(--eg-ink); color: #fff;
  font-size: 12px; line-height: 1.5; font-weight: 400;
  padding: 12px 14px; border-radius: 8px; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 120; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.header-5 .eg-delivery-pop::before {
  content: ""; position: absolute; bottom: 100%; right: 20px;
  border: 6px solid transparent; border-bottom-color: var(--eg-ink);
}
.header-5 .eg-delivery:hover .eg-delivery-pop,
.header-5 .eg-delivery.is-open .eg-delivery-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* нормализуем произвольный HTML, который отдаёт модуль leveranstidjustnu */
.header-5 .eg-delivery-pop * { color: #fff !important; font-size: 12px !important; margin: 0 !important; line-height: 1.5 !important; }
.header-5 .eg-delivery-pop a { color: var(--eg-yellow) !important; text-decoration: underline; }
.header-5 .eg-delivery-pop strong,
.header-5 .eg-delivery-pop b { font-weight: 600 !important; }

/* ─────────── Разделитель ─────────── */
.header-5 .eg-divider { width: 1px; height: 22px; background: var(--eg-border); transition: background .35s ease; }

/* ─────────── Капсула Privat/Företag (перекрываем modeswitcher.css) ─────────── */
.header-5 .ms-switcher {
  border: 1px solid var(--eg-border);
  background: #fff;
  border-radius: 99px;
}
.header-5 .ms-pill {
  padding: 7px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--eg-muted); background: transparent;
  border-radius: 99px;
  transition: background .25s, color .25s;
}
.header-5 .ms-pill:hover { background: var(--eg-stamp); }
.header-5 .ms-pill--b2c.ms-pill--active { background: var(--eg-accent); color: #fff; }
.header-5 .ms-pill--b2b.ms-pill--active { background: var(--eg-green);  color: #fff; }

/* бейдж "exkl. moms" — виден только в B2B */
.header-5 .eg-vat {
  font-size: 10px; font-weight: 600; color: var(--eg-green);
  background: #dcebe3; padding: 3px 9px; border-radius: 99px;
  white-space: nowrap;
  opacity: 0; max-width: 0; overflow: hidden; padding-left: 0; padding-right: 0;
  transition: opacity .3s ease, max-width .3s ease, padding .3s ease;
}

/* ─────────── Аккаунт + корзина: только outline-иконки ─────────── */
/* прячем текстовые подписи в шапке (Login / Account / My Cart) */
.header-5 .title-cart,
.header-5 .eg-actions .label-header { display: none !important; }

/* единая иконка-кнопка (аккаунт) + иконка корзины */
.header-5 .eg-icon-btn,
.header-5 .contentsticky_cart .header-cart-icon {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; color: var(--eg-ink); cursor: pointer;
  transition: color .2s ease;
}
.header-5 .eg-icon-btn svg,
.header-5 .eg-cart-svg { width: 22px; height: 22px; display: block; }
.header-5 .eg-icon-btn:hover,
.header-5 .contentsticky_cart:hover .header-cart-icon { color: var(--eg-accent); }
.header-5 .contentsticky_cart { display: flex; align-items: center; }
.header-5 .contentsticky_cart .header-cart { display: flex; align-items: center; }

/* счётчик корзины — акцентный бейдж поверх иконки */
.header-5 .cart-products-count {
  position: absolute; top: -7px; right: -9px;
  background: var(--eg-accent); color: #fff;
  font-size: 10px; font-weight: 600; line-height: 1;
  border-radius: 99px; padding: 2px 5px; min-width: 17px; text-align: center;
  transition: background .35s ease;
}

/* ═══════════ B2B: перекрашивание всего хедера (html.mode-b2b) ═══════════
   !important — та же причина специфичности, что и в базовой секции выше. */
html.mode-b2b .header-5 .eg-header-center,
html.mode-b2b #header.header-5 .eg-header-center {
  background: var(--eg-green-bg) !important;
  border-bottom-color: var(--eg-green) !important;
}
/* рамка пилюли поиска красится в тот же цвет, что и рамка капсулы Privat/Företag
   (.ms-switcher использует var(--eg-border)/var(--eg-green-bd) для тех же режимов) —
   !important обязателен: базовое правило border ... !important выше иначе не пускает. */
html.mode-b2b .header-5 .eg-search-wrap input { background: #fff !important; border-color: var(--eg-green-bd) !important; }
html.mode-b2b .header-5 .eg-divider { background: var(--eg-green-bd); }
html.mode-b2b .header-5 .ms-switcher { border-color: var(--eg-green-bd); }
html.mode-b2b .header-5 .eg-vat { opacity: 1; max-width: 120px; padding-left: 9px; padding-right: 9px; }
html.mode-b2b .header-5 .eg-icon-btn,
html.mode-b2b .header-5 .contentsticky_cart .header-cart-icon { color: var(--eg-green-dk); }
html.mode-b2b .header-5 .cart-products-count { background: var(--eg-green); }
html.mode-b2b .header-5 .eg-delivery-btn { border-color: var(--eg-green-bd); }

/* ─────────── Мобильная зона: 2 ряда как в демке (оптимизировано под 350px) ─────────── */
.header-5 .header-mobile { padding: 0; border-bottom: 2px solid var(--eg-ink) !important; }
html.mode-b2b .header-5 .header-mobile,
html.mode-b2b #header.header-5 .header-mobile {
  background: var(--eg-green-bg) !important;
  border-bottom-color: var(--eg-green) !important;
}

/* Ряд 1: бургер | логотип | доставка+корзина */
.header-5 .eg-m-row1 {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 10px; padding: 9px 12px;
}
.header-5 .eg-m-burger {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--eg-ink); cursor: pointer;
}
.header-5 .eg-m-burger svg { width: 24px; height: 24px; }
.header-5 .eg-m-burger i { font-size: 22px; }
.header-5 .eg-m-logo { text-align: center; line-height: 0; }
.header-5 .eg-m-logo img {
  height: auto !important; width: auto !important;
  max-height: 30px; max-width: 100%; display: inline-block;
}
.header-5 .eg-m-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.header-5 .eg-m-right .eg-delivery-btn { border: none; padding: 0; color: var(--eg-ink); }
.header-5 .eg-m-right .eg-delivery-btn svg { width: 21px; height: 21px; }
.header-5 .eg-m-cart { color: var(--eg-ink); }

/* Ряд 2: поиск + капсула */
.header-5 .eg-m-row2 {
  display: flex; align-items: center; gap: 10px; padding: 0 12px 11px;
}
.header-5 .eg-m-row2 .eg-search-wrap { flex: 1; max-width: none; min-width: 0; }
.header-5 .eg-m-row2 .ms-switcher { flex-shrink: 0; }
.header-5 .eg-m-row2 .ms-pill { padding: 7px 13px; font-size: 12px; }

/* ─────────── Sticky-хедер (#header-sticky) — минимально в тон ─────────── */
html.mode-b2b .sticky-header-5 { background: var(--eg-green-bg) !important; }
.sticky-header-5 .eg-delivery-pop { z-index: 200; }

/* убираем старый рудимент topbar «Free shipping $200» (скрыт в tpl, подстраховка) */
.header-5 .topbar.eg-legacy-hidden { display: none; }