/* Netflix style header (all public pages). Loaded after custom.css.
   Spec: ai/specs/2026-09-27-netflix-header-offer-mobile-design.md */

.nh-header {
  --nh-pill: rgba(0, 0, 0, .05);
  --nh-pill-hover: rgba(0, 0, 0, .09);
  --nh-pill-active-bg: #111;
  --nh-pill-active: #fff;
  --nh-icon-hover: rgba(0, 0, 0, .06);
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color-translucent);
}
[data-bs-theme="dark"] .nh-header {
  --nh-pill: rgba(255, 255, 255, .08);
  --nh-pill-hover: rgba(255, 255, 255, .16);
  --nh-pill-active-bg: #f2f2f2;
  --nh-pill-active: #111;
  --nh-icon-hover: rgba(255, 255, 255, .1);
}
.nh-header.-pane { box-shadow: none !important; }

.nh-row { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 0 24px; }
.nh-logo { flex: none; display: flex; align-items: center; order: 1 !important; }
.nh-header .languages { order: 2 !important; }
.nh-header .category-nav-bar { order: 3; }
.nh-tools { order: 4 !important; }
.nh-logo img { display: block; width: 55px; height: 30px; }
.nh-header .languages { flex: none; }
.nh-header .languages .dropdown-toggle { border: 0; padding: 6px; border-radius: 10px; color: inherit; }
.nh-header .languages .dropdown-toggle:hover { background: var(--nh-icon-hover); }

/* ---- category pills (component moved into the header) ---- */
.nh-header .category-nav-bar { position: static !important; top: auto !important; background: transparent !important; margin: 0 !important; border: 0; flex: 1 1 auto; min-width: 0; }
.nh-header .category-nav-bar-scroll { display: block; position: relative; }
.nh-header .category-nav-bar-controls,
.nh-header .category-nav-bar-fade { display: none !important; }
.nh-header .category-nav-bar-track { display: flex; flex-wrap: nowrap; gap: 5px; padding: 2px 0 !important; align-items: center; overflow: hidden; }
.nh-header .category-nav-item { flex: none; }
.nh-header .category-nav-item.nh-overflow { display: none; }
.nh-header .category-nav-link {
  display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px;
  height: 36px; min-width: 0 !important; max-width: none !important;
  padding: 0 10px 0 8px !important; border-radius: 999px !important; /* all 9 pills fit at 1440 */
  background: var(--nh-pill) !important; color: inherit !important;
  font-size: 14px; font-weight: 500; white-space: nowrap !important; text-align: left;
  border: 0; line-height: 1; transition: background-color .15s ease;
}
.nh-header .category-nav-link:hover,
.nh-header .category-nav-item.is-megamenu-open > .category-nav-link,
.nh-header .nh-more.is-open > .category-nav-link { background: var(--nh-pill-hover) !important; }
.nh-header .category-nav-link.is-active { background: var(--nh-pill-active-bg) !important; color: var(--nh-pill-active) !important; font-weight: 700; }
.nh-header .category-nav-link > i {
  width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important;
  font-size: 18px !important; transform: none !important; display: inline-flex; flex: none;
}
.nh-header .category-nav-link > i[class*="-tabler"]::before { width: 1em !important; height: 1em !important; }
.nh-header .category-nav-link > span { font-size: 14px !important; line-height: 1 !important; }
.nh-more-btn { cursor: pointer; }
.nh-more-caret { font-size: 12px !important; }
.nh-more-menu { position: fixed; z-index: 1115; min-width: 240px; padding: 8px; display: grid; gap: 2px; }
.nh-more-menu[hidden] { display: none; }
.nh-more-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; color: inherit; text-decoration: none; font-weight: 600; font-size: 14px; }
.nh-more-menu a:hover { background: var(--nh-icon-hover); }
.nh-more-menu a > i { font-size: 18px; }

/* ---- tools ---- */
.nh-tools { flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nh-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: inline-flex; align-items: center; justify-content: center; position: relative; text-decoration: none; font-size: 22px; padding: 0; cursor: pointer; }
.nh-icon-btn:hover { background: var(--nh-icon-hover); color: inherit; }
.nh-icon-btn:focus-visible, .nh-user-btn:focus-visible, .nh-header .category-nav-link:focus-visible { outline: 2px solid #dc251e; outline-offset: 2px; }
.nh-fav .bi-heart-fill { color: #e11d48; }
.nh-badge { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #dc251e; color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* search: the icon slides open into a field */
.nh-search { display: flex; align-items: center; height: 40px; border-radius: 999px; border: 1px solid transparent; transition: border-color .2s, background-color .2s; }
.nh-searchbox { width: 0; overflow: hidden; transition: width .32s cubic-bezier(.2, .8, .2, 1); }
.nh-searchbox #searchbox, .nh-searchbox .chilli-search-box, .nh-searchbox form { width: 100%; }
.nh-searchbox #search-input { border: 0 !important; background: transparent !important; box-shadow: none !important; color: inherit !important; height: 38px; padding: 0 12px 0 2px; font-size: 15px; border-radius: 0 !important; }
.nh-searchbox #search-input::placeholder { color: inherit; opacity: .6; }
.nh-search-close { display: none; font-size: 16px; }
.nh-search.open { border-color: currentColor; background: var(--nh-pill); }
.nh-search.open .nh-searchbox { width: 320px; }
.nh-search.open .nh-search-toggle:hover { background: transparent; }

/* user menu */
.nh-user-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: inherit; padding: 3px; border-radius: 10px; position: relative; cursor: pointer; }
.nh-user-btn:hover { background: var(--nh-icon-hover); }
.nh-avatar, .nh-avatar-img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.nh-avatar { background: linear-gradient(135deg, #f97316, #dc251e); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.nh-avatar--guest { background: var(--nh-pill); color: inherit; font-size: 20px; }
.nh-avatar-img { object-fit: cover; }
.nh-caret { font-size: 12px; opacity: .8; }
.nh-user-dot { position: absolute; top: 1px; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: #dc251e; box-shadow: 0 0 0 2px var(--bs-body-bg); }
.nh-menu { width: 290px; padding: 8px !important; z-index: 1200 !important; }
.nh-menu .dropdown-item { border-radius: 12px; padding: 10px 12px; font-weight: 600; color: inherit; display: flex; align-items: center; }
.nh-menu .dropdown-item:hover, .nh-menu .dropdown-item:focus { background: var(--nh-icon-hover); color: inherit; }
.nh-menu .dropdown-divider { margin: 4px 8px; opacity: .15; }
.nh-menu-who { display: flex; align-items: center; gap: 10px; padding: 8px 12px 10px; }
.nh-menu-who small { display: block; opacity: .7; font-weight: 500; font-size: 12px; word-break: break-all; }
.nh-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 600; cursor: pointer; width: 100%; margin: 0; }
.nh-menu-row .form-check-input { width: 2.6em; height: 1.45em; cursor: pointer; margin: 0; }
.nh-dot { width: 8px; height: 8px; border-radius: 50%; background: #dc251e; display: inline-block; margin-left: 8px; }

/* glass (partner.chilli.ee hero card recipe, theme aware for plain pages) */
.nh-glass,
.nh-header .category-megamenu,
.nh-header #lang-dropdown-menu {
  background: rgba(255, 255, 255, .72) !important;
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 40px rgba(15, 17, 20, .18), 0 2px 8px rgba(15, 17, 20, .08), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  color: #111827;
}
[data-bs-theme="dark"] .nh-glass,
[data-bs-theme="dark"] .nh-header .category-megamenu,
[data-bs-theme="dark"] .nh-header #lang-dropdown-menu {
  background: rgba(28, 28, 32, .7) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  color: #f2f2f2;
}
.nh-header .category-megamenu-subcats li a { color: inherit !important; font-weight: 600; }

/* ---- homepage hero: header over the image, exact partner glass for the megamenu ---- */
body.home-hero-page:not(.home-header-stuck) .nh-header {
  --nh-pill: rgba(255, 255, 255, .14);
  --nh-pill-hover: rgba(255, 255, 255, .26);
  --nh-pill-active-bg: rgba(255, 255, 255, .92);
  --nh-pill-active: #111;
  --nh-icon-hover: rgba(255, 255, 255, .16);
  color: #fff;
  background: transparent !important;
  border-bottom: 0;
}
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
}
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-item { text-shadow: none; }
/* offers in the see-through menu over the hero photo: white like the category names (Marti 29.09) */
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-item,
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-title,
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-price-current { color: #fff !important; }
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-title,
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-prices { text-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3); }
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-price-regular { color: rgba(255, 255, 255, .78) !important; }
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-badge--qty { background: rgba(255, 255, 255, .2) !important; color: #fff !important; }
body.home-hero-page:not(.home-header-stuck) .nh-header .category-megamenu .category-megamenu-top3-item:hover { background-color: rgba(255, 255, 255, .14) !important; }

/* ---- tablets and phones ---- */
@media (max-width: 991.98px) {
  .nh-row { flex-wrap: wrap; min-height: 0; padding: 8px 12px; gap: 6px 4px; position: relative; }
  .nh-header .category-nav-bar { order: 10; flex: 0 0 100%; margin: 0 -12px !important; width: calc(100% + 24px); max-width: none; }
  .nh-header .category-nav-bar-track { overflow-x: auto !important; scrollbar-width: none; padding: 2px 12px 4px !important; gap: 6px; }
  .nh-header .category-nav-bar-track::-webkit-scrollbar { display: none; }
  .nh-header .category-nav-link { height: 34px; font-size: 13px; }
  .nh-header .category-nav-link > span { font-size: 13px !important; }
  .nh-header .nh-more { display: none !important; }
  .nh-header .category-nav-item.nh-overflow { display: block; }
  .nh-caret { display: none; }
  .nh-avatar, .nh-avatar-img { width: 30px; height: 30px; }
  /* search opens over the whole first row */
  .nh-search.open { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 5; height: 44px; background: var(--bs-body-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); }
  .nh-search.open .nh-searchbox { width: auto; flex: 1; }
  .nh-search.open .nh-search-close { display: inline-flex; }
}

/* ---- offer page on phones: header transparent over the gallery, categories only while searching ---- */
@media (max-width: 767.98px) {
  body.offer-hero-page .nh-header {
    --nh-pill: rgba(255, 255, 255, .16);
    --nh-pill-hover: rgba(255, 255, 255, .28);
    --nh-icon-hover: rgba(255, 255, 255, .16);
    position: absolute !important; left: 0; right: 0; top: 0 !important; z-index: 1120;
    color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 70%, rgba(0, 0, 0, 0) 100%) !important;
    border-bottom: 0;
  }
  body.offer-hero-page .nh-header .nh-fav { display: none !important; }
  body.offer-hero-page .nh-header .category-nav-bar { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .32s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
  body.offer-hero-page .nh-header.is-search-open .category-nav-bar { max-height: 64px; opacity: 1; }
  body.offer-hero-page .nh-header.is-search-open { background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, 0) 100%) !important; }
}

/* ---- phones: a pinned header slides away on scroll down and back on scroll up (nh-header.js .nh-autohide).
   The transform is set only while hidden: a transformed header would become the containing block of its
   fixed dropdowns. ---- */
@media (max-width: 767.98px) {
  .nh-header { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
  .nh-header.nh-autohide { transform: translateY(calc(-100% - 12px)) !important; animation: none !important; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nh-searchbox, .nh-search, body.offer-hero-page .nh-header .category-nav-bar, .nh-header { transition: none !important; }
}