/* =====================================================================
   THE MINERS — header по дизайну (About-Us-Demo)
   «Стеклянный» фиксированный хедер: Cheap Glass + blur, обычное начертание,
   меню по центру. Цвет текста/иконок переключает header.js по фону
   под хедером: body.mh-tone-light (тёмный текст) / body.mh-tone-dark (светлый),
   body.mh-mixed — смешанный фон, тёмный текст на плотном стекле.
   Всё работает только при body.mh-on — его ставит JS (см. ENABLE там).
   ===================================================================== */

body.mh-on{
  --mh-h:92px;                 /* высота хедера — её же читает about-us (sticky-блоки) */
  --mh-gut:40px;
  --mh-fg:#141414;             /* текст/иконки — меняется тоном */
  --mh-glass:rgba(247,247,247,.2);
  --mh-panel:rgba(247,247,247,.94);   /* фон выпадашек */
  --mh-icon-filter:brightness(0);     /* иконки-картинки темы -> в цвет текста */
}
body.mh-on.mh-tone-dark{
  --mh-fg:#F7F7F7;
  --mh-panel:rgba(20,20,20,.9);
  --mh-icon-filter:brightness(0) invert(1);
}
/* фон под хедером смешанный (светлое + фото/тёмное): тёмный текст на плотном
   матовом стекле — весь хедер одного цвета и читается над любой частью */
body.mh-on.mh-mixed{ --mh-glass:rgba(247,247,247,.72); }
@media (max-width:1280px){ body.mh-on{ --mh-h:78px; --mh-gut:40px; } }
@media (max-width:767px){  body.mh-on{ --mh-h:64px; --mh-gut:16px; } }

/* --- сам хедер ----------------------------------------------------- */
body.mh-on #header{
  position:fixed !important; top:0 !important; left:0; right:0; width:100%; max-width:none !important;
  height:var(--mh-h); margin:0 !important; z-index:1000;
  background:transparent !important; box-shadow:none !important; border:0 !important;
  color:var(--mh-fg) !important;
}
/* стекло — на псевдоэлементе: backdrop-filter на самом #header сделал бы его
   containing block для fixed-потомков и сломал выезжающее мобильное меню */
body.mh-on #header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--mh-glass); transition:background-color .3s ease;
  -webkit-backdrop-filter:blur(22px) saturate(1.3); backdrop-filter:blur(22px) saturate(1.3);
}
/* страницы, где под хедером нет hero — контент не должен уезжать под фиксированный хедер */
body.mh-on.mh-push .overall-wrapper{ padding-top:var(--mh-h); }

body.mh-on #header .navigation-wrapper{ max-width:none !important; height:100%; padding:0 var(--mh-gut) !important; }
body.mh-on #header .header-top{ height:100%; padding:0 !important; align-items:center; }

/* всё содержимое — одним цветом, плавно меняется */
body.mh-on #header .header-top,
body.mh-on #header .header-top a,
body.mh-on #header .header-top b,
body.mh-on #header .header-top span,
body.mh-on #header .header-top button,
body.mh-on #header .languagesMenu__header--actual{ color:var(--mh-fg) !important; transition:color .3s ease; }

/* иконки темы (лого, стрелки, корзина, аккаунт, бургер) — картинками, красим фильтром */
body.mh-on #header .site-name img,
body.mh-on #header .languagesMenu__header--actual:after,
body.mh-on #header .languagesMenu__flags:after,
body.mh-on #header .top-nav-button-login:before,
body.mh-on #header .top-nav-button-account:before,
body.mh-on #header .cart-count:before{ filter:var(--mh-icon-filter) !important; transition:filter .3s ease; }
body.mh-on #header .responsive-tools > a:before{ color:var(--mh-fg) !important; filter:none !important; }
/* старые «белые» хедеры страниц (careers.css, locations, about-us.css) инвертируют
   сами кнопки фильтром — снимаем, иначе иконки всегда белые */
body.mh-on #header svg:not(.shp-flag),
body.mh-on #header .btn-icon,
body.mh-on #header .responsive-tools > a,
body.mh-on #header .top-nav-button-login,
body.mh-on #header .top-nav-button-account,
body.mh-on #header .navigation-buttons .btn-icon{ filter:none !important; }

#header .top-navigation-tools .responsive-tools a[data-target=navigation]{top:12px;}

/* лого — знак 33×27, как в макете */
body.mh-on #header .site-name a img{ height:38px !important; padding: 0 !important; width:auto; }
@media (min-width:768px){ body.mh-on #header .site-name{ margin-right:0 !important; } }

/* --- desktop: язык/валюта · меню по центру · иконки ---------------- */
@media (min-width:768px){
  body.mh-on #header .header-top{ justify-content:flex-start; }

  body.mh-on #header .languagesMenu{ margin-left:42px; }
  body.mh-on #header .languagesMenu__content{ display:flex; gap:26px; }
  body.mh-on #header .languagesMenu__header--actual{
    font-size:20px !important; font-weight:450 !important; text-transform:none !important; line-height:1.2 !important; }
  body.mh-on #header .languagesMenu__header--actual:hover{ text-decoration:none !important; opacity:.62; }
  body.mh-on #header .languagesMenu__header--actual:after{ top:-1px !important; transform:scale(.8); }

  /* меню: из абсолютного блока фикс. ширины -> обычная строка по центру */
  body.mh-on #header #navigation{ width:auto !important; height:auto !important; margin:0 auto !important; flex:0 1 auto; }
  body.mh-on #header #navigation .navigation-in{ position:static !important; width:auto !important; }
  body.mh-on #header #navigation .menu-level-1{ display:flex !important; gap:26px; }
  body.mh-on #header #navigation .menu-level-1 > li > a{ padding:0 !important; background:none !important; transition:opacity .2s; }
  body.mh-on #header #navigation .menu-level-1 > li > a:hover{ opacity:.62; text-decoration:none !important; }
  body.mh-on #header #navigation .menu-level-1 > li > a.active{ text-decoration:none !important; }
  body.mh-on #header #navigation .menu-level-1 > li > a b{
    font-size:20px !important; font-weight:450 !important; text-transform:none !important; line-height:1.2 !important; }

  body.mh-on #header .top-navigation-tools{ margin-left:0; }
  body.mh-on #header .navigation-buttons .cart-count{ margin-left:20px !important; padding-right:20px !important; }
  body.mh-on #header .top-nav-button-login:hover,
  body.mh-on #header .cart-count:hover{ opacity:.62; }
}

/* --- выпадашки языка/валюты: на стекле прозрачный фон не читается ---- */
body.mh-on #header .languagesMenu__list{
  background:var(--mh-panel) !important; border:0 !important; border-radius:4px; padding:4px 0 !important;
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
body.mh-on #header .languagesMenu__list a,
body.mh-on #header .languagesMenu__list span{ color:var(--mh-fg) !important; font-weight:450 !important; text-transform:none !important; }

/* --- mobile: раскладка темы, только высота и цвета ------------------ */
@media (max-width:767px){
  body.mh-on #header .header-top{ padding-right:35px !important; }
  /* выезжающее меню темы — всегда чёрное с белым текстом, тон хедера его не трогает */
  body.mh-on #header #navigation a,
  body.mh-on #header #navigation b,
  body.mh-on #header #navigation span{ color:#fff !important; }
}