/* ============================================================
   jb-head.css — nowy, responsywny nagłówek (test A/B: ?jb-head=1)
   Port z lovable-glowna (SiteHeader.tsx, TopInfoBar.tsx, BrandLogo.tsx).
   Markup: tpl-parts/jb-head/header.tpl, zachowanie: js/jb-head.js.
   Ładowany WYŁĄCZNIE gdy body.jbhd-on (patrz header.tpl) — nie wpływa na stary nagłówek.

   Jeden DOM, dwa stany (klasa .is-compact na #jbhd, przełączana przez JS po scrollu):
     Desktop (>=992px)   u góry: [logo | wyszukiwarka | ikony] + pasek kategorii (jb_menu)
                         po scrollu: tylko wiersz [logo | wyszukiwarka | ikony]
     Mobile  (<992px)    u góry: pasek USP / [burger | logo | ikony] / wyszukiwarka z przyciskiem
                         po scrollu: [burger | kompaktowa wyszukiwarka | ikony] (bez USP, logo, przycisku)

   #jbhd jest position:fixed, a jego miejsce w dokumencie rezerwuje #jbhd-reserve (wysokość stanu
   pełnego) — zmiana stanu nie przesuwa treści strony (brak layout shift). Stan pełny zwija się
   przez grid-template-rows 1fr→0fr + opacity + transform, bez zmiany wysokości rezerwacji.
   ============================================================ */

:root {
  --jbhd-brand: #8b0000;
  --jbhd-brand-hover: #9e1b24;
  --jbhd-beige: #f7f4ee;
  --jbhd-ink: #1f1f1f;
  --jbhd-muted: #6b7280;
  --jbhd-border: #e7e1d7;
  --jbhd-input-bg: #fcfaf7;
  --jbhd-line: #efeae2;
}

/* ---------- neutralizacja starego mechanizmu nagłówka (tylko przy nowym) ---------- */
body.jbhd-on #header {
  padding-top: 0 !important;
  box-shadow: none;
  background: transparent;
}
body.jbhd-on .sticky .header-container {
  margin-bottom: 0 !important; /* stary stickyNav() (footer.tpl) dokładał sztywne 151px */
}

/* ---------- rezerwacja miejsca + kontener ---------- */
.jbhd-reserve {
  height: var(--jbhd-full-h, 150px);
  position: relative;
}
@media (min-width: 992px) {
  .jbhd-reserve { height: var(--jbhd-full-h, 122px); }
}

.jbhd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5003;
  background: #fff;
  border-bottom: 1px solid var(--jbhd-line);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--jbhd-ink);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.jbhd *,
.jbhd *::before,
.jbhd *::after {
  box-sizing: border-box;
}
.jbhd.is-compact {
  border-bottom-color: #f3f4f6;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

.jbhd-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 12px;
}
@media (min-width: 768px) {
  .jbhd-container { padding: 0 24px; }
}
/* te same max-width co .jb-container (jb_menu) — wiersz główny i pasek kategorii leżą w jednej osi */
@media (min-width: 992px) {
  .jbhd-container { max-width: 970px; }
}
@media (min-width: 1200px) {
  .jbhd-container { max-width: 1540px; }
}

.jbhd button,
.jbhd a {
  -webkit-tap-highlight-color: transparent;
}
.jbhd a { text-decoration: none; }
.jbhd button { font-family: inherit; cursor: pointer; }
.jbhd svg { display: block; flex-shrink: 0; }
/* globalne style motywu potrafią wypełniać ikony — wszystkie ikony nagłówka to kontury (stroke) */
.jbhd svg,
.jbhd svg * { fill: none !important; }

/* .is-measuring: js/jb-head.js wyłącza przejścia na czas pomiaru wysokości / ustawiania stanu początkowego */
.jbhd.is-measuring,
.jbhd.is-measuring * {
  transition: none !important;
  animation: none !important;
}

/* ---------- zwijane wiersze: USP (mobile), kategorie (desktop) ---------- */
.jbhd__fold {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  transition: grid-template-rows .25s ease, opacity .2s ease, transform .25s ease, visibility 0s;
}
.jbhd__fold-in {
  min-height: 0;
  overflow: visible; /* panele mega-menu jb_menu (position:absolute) wystają poza pasek */
}
.jbhd.is-compact .jbhd__fold {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: grid-template-rows .25s ease, opacity .2s ease, transform .25s ease, visibility 0s .25s;
}
.jbhd.is-compact .jbhd__fold-in {
  overflow: hidden;
}

/* Desktop: w stanie kompaktowym pasek kategorii (mega menu jb_menu) wraca przy scrollu w górę (js: .show-cats) */
.jbhd.is-compact.show-cats .jbhd__fold--cats {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: grid-template-rows .25s ease, opacity .2s ease, transform .25s ease, visibility 0s;
}
.jbhd.is-compact.show-cats .jbhd__fold--cats .jbhd__fold-in {
  overflow: visible; /* panele mega-menu wystają poza pasek */
}
.jbhd.is-compact.show-cats .jbhd__fold--cats {
  border-top: 1px solid #f3f4f6;
}

/* ---------- wiersz główny ---------- */
.jbhd__grid {
  display: grid;
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "burger logo actions"
    "search search search";
  column-gap: 6px;
  row-gap: 10px;
  padding-top: 6px;
  padding-bottom: 10px;
  transition: padding .25s ease;
}
.jbhd__burger { grid-area: burger; }
.jbhd__logo { grid-area: logo; }
.jbhd__search { grid-area: search; }
.jbhd__actions { grid-area: actions; }

.jbhd__burger {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--jbhd-ink);
}
.jbhd__burger svg { width: 26px; height: 26px; }
.jbhd__burger:hover { background: var(--jbhd-beige); }

.jbhd__logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
  padding-left: 4px;
}
.jbhd__logo img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
}

/* ---------- wyszukiwarka ---------- */
.jbhd__search {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  min-width: 0;
  margin: 0;
  padding: 0 4px 0 12px;
  border: 1px solid var(--jbhd-border);
  border-radius: 6px;
  background: var(--jbhd-input-bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.jbhd__search:focus-within {
  border-color: var(--jbhd-brand);
  box-shadow: 0 0 0 3px rgba(139, 0, 0, .12);
}
.jbhd .jbhd__search-lupa {
  display: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: var(--jbhd-muted);
  pointer-events: none;
}
/* globalne reguły sklepu na input[type=text]/button nie mogą tu nic ruszyć */
.jbhd .jbhd__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  font: 400 13px/1.2 'Poppins', system-ui, sans-serif;
  color: var(--jbhd-ink);
  -webkit-appearance: none;
  appearance: none;
}
.jbhd .jbhd__input::placeholder { color: #7a7a7a; opacity: 1; }
.jbhd .jbhd__input::-webkit-search-cancel-button { display: none; }

.jbhd__camera {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 0 4px 0 6px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(31, 31, 31, .7);
  font: 600 12px/1 'Poppins', system-ui, sans-serif;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.jbhd__camera:hover { color: var(--jbhd-brand); background: var(--jbhd-beige); }
.jbhd__camera svg { width: 18px; height: 18px; }
.jbhd__camera-label { display: none; }

.jbhd__submit {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: var(--jbhd-brand);
  color: #fff;
  font: 600 14px/1 'Poppins', system-ui, sans-serif;
  transition: background-color .15s ease;
}
.jbhd__submit:hover,
.jbhd__submit:focus-visible { background: var(--jbhd-brand-hover); }
.jbhd__submit svg { width: 16px; height: 16px; }

/* ---------- ikony: konto / lista życzeń / koszyk ---------- */
.jbhd__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 2px;
}
.jbhd__actions .shopping_cart {
  position: relative;
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  background: none;
  border: 0;
}
.jbhd__action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 8px;
  color: rgba(31, 31, 31, .85);
  line-height: 1;
  transition: color .15s ease, background-color .15s ease;
}
.jbhd__action:hover,
.jbhd__action:focus-visible { color: var(--jbhd-brand); }
/* stare reguły sklepu (#header .shopping_cart > a:before, ico_cart…) — ikona jest tu inline SVG */
.jbhd__actions .shopping_cart > a::before,
.jbhd__actions .shopping_cart > a::after { content: none !important; display: none !important; }
.jbhd__actions .shopping_cart > a { background: none; padding: 4px 6px; width: auto; height: auto; }

.jbhd__icon {
  position: relative;
  display: inline-flex;
  font-style: normal;
}
.jbhd__icon svg { width: 22px; height: 22px; }
.jbhd__label {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
  white-space: nowrap;
}
.jbhd__label b { font-weight: inherit; }
.jbhd__label-full { display: none; }

.jbhd__badge {
  position: absolute;
  top: -6px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px #fff;
  font: 700 8.5px/16px 'Poppins', system-ui, sans-serif;
  text-align: center;
  color: #fff;
  pointer-events: none;
}
.jbhd__badge--dark { background: #111; }
.jbhd__badge--brand { background: var(--jbhd-brand); }
.jbhd__badge.is-empty,
.jbhd__badge.unvisible { display: none !important; }

/* podgląd koszyka (hover, desktop) — pozycjonowanie względem nowej ikony; wygląd: nc-cart-preview.css */
.jbhd__actions .shopping_cart .cart_block {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 6px;
}

/* ---------- USP (mobile) ---------- */
.jbhd-usp {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  background: var(--jbhd-beige);
  color: #4b5563;
  font-size: 12px;
  line-height: 1.3;
}
.jbhd-usp__btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
}
.jbhd-usp__btn:hover { background: rgba(0, 0, 0, .05); color: #1f2937; }
.jbhd-usp__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; }
.jbhd-usp__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.jbhd-usp__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  animation: jbhd-fade-in .25s ease;
}
.jbhd-usp__slide[hidden] { display: none; }
.jbhd-usp__slide span { overflow: hidden; text-overflow: ellipsis; }
.jbhd-usp__icon { width: 16px; height: 16px; }

@keyframes jbhd-slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

@keyframes jbhd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Topbar desktop (>=992px) — oryginalny #topBar sklepu (topbar.css), bez zmian ---------- */
.jbhd-topbar-wrap { display: none; }

/* ticker USP (mobile/tablet): pogrubione frazy jak w starym pasku — globalne style sklepu spłaszczają <strong> */
.jbhd .jbhd-usp,
.jbhd .jbhd-usp span { font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 400 !important; letter-spacing: -0.1px !important; }
.jbhd .jbhd-usp strong { font-family: 'Poppins', system-ui, sans-serif !important; font-weight: 600 !important; }

/* ---------- ukryte oryginalne wyjście hooków (koszyk, konto, …) ---------- */
.jbhd-legacy { display: none !important; }

/* ============================================================
   MOBILE / TABLET (<992px)
   ============================================================ */
@media (max-width: 991px) {
  .jbhd__fold--cats { display: none !important; }

  /* pasek USP jedzie ze scrollem (js/jb-head.js ustawia top), więc jego zwinięcie przy przełączeniu na
     .is-compact musi być natychmiastowe — animacja rozjechałaby się z resetem top */
  .jbhd__fold--usp,
  .jbhd.is-compact .jbhd__fold--usp { transition: none; }

  /* Jak w lovable: pełny nagłówek jest w normalnym przepływie strony (absolute w #jbhd-reserve, który trzyma
     jego miejsce) i przewija się natywnie razem z treścią; zwarty pasek jest position:fixed i dojeżdża z góry
     dopiero po przejechaniu całego nagłówka (przełączenie robi js/jb-head.js, gdy nagłówek jest już poza ekranem). */
  .jbhd { position: absolute; }
  .jbhd.is-compact {
    position: fixed;
    animation: jbhd-slide-down .25s ease;
  }

  /* stan pełny: etykiety pod ikonami ("Ulubione", "Koszyk") */
  .jbhd__label-short { display: inline; }

  /* stan kompaktowy: [burger | wyszukiwarka | ikony], bez logo i bez przycisku "Szukaj" */
  .jbhd.is-compact .jbhd__grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "burger search actions";
    column-gap: 8px;
    row-gap: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .jbhd.is-compact .jbhd__logo,
  .jbhd.is-compact .jbhd__submit,
  .jbhd.is-compact .jbhd__label { display: none; }

  .jbhd.is-compact .jbhd__search {
    height: 40px;
    padding: 0 4px 0 12px;
    animation: jbhd-fade-in .2s ease;
  }
  .jbhd.is-compact .jbhd__search-lupa { display: block; }
  .jbhd.is-compact .jbhd__input { font-size: 13px; }
  .jbhd.is-compact .jbhd__camera { margin: 0; padding: 0; width: 34px; height: 32px; justify-content: center; }
  .jbhd.is-compact .jbhd__actions { gap: 0; }
  .jbhd.is-compact .jbhd__action { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .jbhd.is-compact .jbhd__icon svg { width: 22px; height: 22px; }
  .jbhd.is-compact .jbhd__badge { top: -5px; right: -6px; }
  /* licznik życzeń pokazuje się dopiero, gdy coś jest na liście (jak w referencji) — .is-empty robi to już wyżej */
}

/* ============================================================
   DESKTOP (>=992px)
   ============================================================ */
@media (min-width: 992px) {
  .jbhd__burger { display: none !important; }
  .jbhd-usp { display: none; }
  .jbhd-topbar-wrap { display: block; }

  .jbhd__grid {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo search actions";
    column-gap: 28px;
    row-gap: 0;
    padding-top: 8px;
    padding-bottom: 12px;
  }
  .jbhd.is-compact .jbhd__grid {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .jbhd__logo { padding-left: 0; }
  .jbhd__logo img { height: 58px; }

  .jbhd__camera-label { display: inline; }
  .jbhd__camera { padding: 0 10px; }
  .jbhd__search { padding-left: 16px; }
  .jbhd.is-compact .jbhd__search { height: 42px; }

  .jbhd__actions { gap: 6px; }
  .jbhd__action { padding: 4px 8px; gap: 4px; }
  .jbhd__icon svg { width: 24px; height: 24px; }
  .jbhd__label { font-size: 11px; }
  .jbhd__label-full { display: inline; }
  .jbhd__label-short { display: none; }
  .jbhd__badge { top: -7px; right: -10px; }

  /* pasek kategorii (jb_menu) — własny kontener i tło, tu tylko linia bazowa pod całym nagłówkiem */
  .jbhd__fold--cats .jb-menu { display: block; }
  .jbhd__fold--cats #jb-desktop-nav { background: #fff; }
}

/* ---------- ruch zredukowany ---------- */
@media (prefers-reduced-motion: reduce) {
  .jbhd,
  .jbhd__fold,
  .jbhd__grid,
  .jbhd-usp__slide,
  .jbhd.is-compact .jbhd__search {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Drawer "Wyszukaj lampę po zdjęciu" (jb_menu) na desktopie
   jb_menu chowa go od 768px (display:none — bez menu mobilnego nie było do niego dostępu). Nowy nagłówek
   otwiera go też z paska wyszukiwania na desktopie, więc tu jest pokazywany jako panel z prawej strony.
   ============================================================ */
@media (min-width: 768px) {
  body.jbhd-on .jb-photo-search-overlay { display: block; }
  body.jbhd-on .jb-photo-search {
    display: flex;
    left: auto;
    top: 0;
    width: 460px;
    max-width: 100vw;
    border-radius: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
  }
  body.jbhd-on .jb-photo-search.jb-photo-search--open { transform: translateX(0); }
}

/* ============================================================
   Doofinder: pole wyszukiwania w warstwie wyników — rozmiar czcionki na focusie
   global.css ustawia tu 14px (16px <640px) z !important; wyższa specyficzność (body.jbhd-on) + !important
   wygrywa z tamtymi regułami niezależnie od kolejności ładowania arkuszy.
   ============================================================ */
body.jbhd-on .dfd-searchbox-input:focus {
  font-size: 17px !important;
}

/* ============================================================
   Desktop: wyłączenie globalnego "input:focus { font-size: 16px !important }"
   Ta reguła (sztuczka przeciw auto-zoomowi Safari na iOS) ładuje się globalnie i powiększa tekst w polu
   wyszukiwania po kliknięciu. Na desktopie zoomu nie ma, więc przywracamy tu rozmiar z .jbhd__input —
   !important + wyższa specyficzność wygrywa z globalną regułą. Mobile/tablet (<992px) zostają bez zmian.
   ============================================================ */
@media (min-width: 992px) {
  body.jbhd-on .jbhd .jbhd__input:focus { font-size: 14px !important; }
  body.jbhd-on .jbhd.is-compact .jbhd__input:focus { font-size: 13px !important; }
}