/* Header utilities above the main navigation. */
.header { height: 120px; background: #000; }
.header .header-tools { position: fixed; top: 4px; right: 20px; z-index: 1002; display: flex; align-items: center; gap: 10px; width: auto; margin: 0; padding: 0; list-style: none; }
.header .header-tools > li { position: relative; display: flex; align-items: center; width: auto; margin: 0; padding: 0; list-style: none; transform: none; animation: none; }
.header .header-tools a { position: relative; display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: #fff; text-decoration: none; }
.header .header-tools img { display: block; width: 24px; height: 24px; object-fit: contain; }
.header .header-tools .lang-item img { width: 20px !important; height: auto !important; }
.header .header-tools a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.header .header-tools .cart-contents-count { position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px; border-radius: 50%; background: #ff2802; color: #fff; font: 12px/17px sans-serif; text-align: center; }
@media (min-width: 768px) {
 .header .menu-bar { transform: none !important; height: 120px; padding-top: 40px; box-sizing: border-box; }
 .header .header-menu { height: 80px; overflow: visible; }
 .header .header-menu nav { display: flex; align-items: center; height: 80px; padding: 0 16px; top: auto !important; }
 .header .header-menu nav > ul { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: clamp(2px, .5vw, 12px); width: 100%; margin: 0; padding: 0; overflow: visible; }
 .header .header-menu nav > ul > li { flex: 0 0 auto; width: auto; height: auto; padding: 8px clamp(2px, .35vw, 8px); transform: none; animation: none; white-space: nowrap; }
 .header .header-menu nav > ul > li > a { font-size: clamp(10px, .9vw, 16px); letter-spacing: .5px; line-height: 24px; }
 .header .header-menu nav > ul > .menu-bar__logo { width: clamp(90px, 10vw, 160px); height: 48px; margin: 0 12px; padding: 0; background-position: center; background-size: contain; }
 .header .header-menu nav > ul > .menu-bar__logo > a { height: 48px; font-size: 0 !important; }
 .header-menu nav li:focus-within > .sub-menu { display: block !important; opacity: 1; visibility: visible; }
 .burger { display: none !important; }
}
@media (max-width: 767px) {
 .header { height: 104px; }
 .header .header-tools { top: 4px; right: 12px; gap: 8px; }
 .header .logo-mobile { position: fixed; top: 48px; left: 16px; z-index: 1001; width: 128px; margin: 0; padding: 0; }
 .header .logo-mobile img { width: 128px; height: auto; }
 .burger { top: 58px !important; right: 20px; z-index: 1003; }
 .header .menu-bar { height: 100dvh; padding-top: 104px; box-sizing: border-box; transform: translateY(-120vh); }
 .header .menu-bar--scroll { transform: translateY(0); }
 .header .header-menu { width: 100%; height: calc(100dvh - 104px); overflow-y: auto !important; }
 .header .header-menu nav { display: block; position: relative; top: 0 !important; padding: 0 16px 24px; }
 .header .header-menu nav > ul { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0; margin: 0; overflow: visible; }
 .header .header-menu nav > ul > li { width: 100%; min-height: 44px; padding: 8px 0; transform: none; animation: none; }
 .header .header-menu nav > ul > .menu-bar__logo { display: none; }
 body .salon-carousel { margin-top: 104px; }
}

@media (min-width:768px) { .header .header-menu nav > ul > .menu-bar__logo { background-image:url('../img/logo-menu-white.png'); } }
@media (min-width:768px) and (max-width:1199px) {
 .header, .header .menu-bar { height:160px; }
 .header .menu-bar { padding-top:36px; }
 .header .header-menu, .header .header-menu nav { height:124px; }
 .header .header-menu nav > ul { flex-wrap:wrap; gap:0 12px; }
 .header .header-menu nav > ul > li { padding:4px; }
 .header .header-menu nav > ul > li > a { font-size:12px; line-height:24px; }
 .header .header-menu nav > ul > .menu-bar__logo { order:-1; flex-basis:100%; width:100%; height:44px; margin:0; background-size:auto 40px; }
 .header .header-menu nav > ul > .menu-bar__logo > a { height:44px; }
}

.header .header-menu nav > ul > li > a { transition:color .2s; }

@media(min-width:768px) { body .salon-carousel { margin-top:120px; } }
@media(min-width:768px) and (max-width:1199px) { body .salon-carousel { margin-top:160px; } }

/* Viewport-aligned submenus: replace legacy per-item horizontal offsets. */
@media (min-width:768px) {
 .header { --ibride-nav-bottom:120px; }
 .header .header-menu #ibride-main-nav > ul > li.menu-item > .sub-menu {
  position:fixed !important; top:var(--ibride-nav-bottom) !important; left:0 !important; right:0 !important; bottom:auto !important;
  width:100% !important; max-width:100vw !important; height:auto !important; max-height:calc(100dvh - var(--ibride-nav-bottom)); box-sizing:border-box;
  display:none !important; flex-direction:row !important; flex-wrap:wrap !important; justify-content:center !important; align-items:stretch !important;
  gap:8px 24px; margin:0 !important; padding:16px 24px !important; overflow:auto; background:#272727 !important;
  transform:none !important; animation:none !important; opacity:0; visibility:hidden; z-index:1000;
 }
 .header .header-menu #ibride-main-nav > ul > li.menu-item:hover > .sub-menu,
 .header .header-menu #ibride-main-nav > ul > li.menu-item:focus-within > .sub-menu { display:flex !important; opacity:1; visibility:visible; }
 .header .header-menu #ibride-main-nav > ul > li.menu-item > .sub-menu > li {
  position:relative !important; top:auto !important; left:auto !important; float:none !important; flex:0 1 auto;
  width:auto !important; min-width:160px; max-width:100%; height:auto !important; min-height:0; margin:0 !important; padding:0 !important;
  transform:none !important; animation:none !important; white-space:normal; text-align:center; background:transparent !important;
 }
 .header .header-menu #ibride-main-nav > ul > li.menu-item > .sub-menu > li > a {
  display:block; padding:12px 16px; color:#fff; font-size:14px; line-height:1.5; white-space:normal; overflow-wrap:break-word;
 }
 .header .header-menu #ibride-main-nav > ul > li.menu-item > .sub-menu > li > a:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
 .header .header-menu #ibride-main-nav > ul > li.menu-item-has-children:hover::before {
  content:''; position:absolute; top:100%; left:0; width:100%; height:70px; background:transparent;
 }
}
@media (min-width:768px) and (max-width:1199px) { .header { --ibride-nav-bottom:160px; } }

/* Mobile hotfix: the legacy nav script owns is-open/nav-open state. */
@media (max-width:767px) {
 .header .menu-bar {
  transform:none !important;
  height:104px !important;
  padding:0 !important;
  background:transparent !important;
  pointer-events:none;
 }
 body.nav-open .header .menu-bar {
  height:100dvh !important;
  background:#000 !important;
  pointer-events:auto;
 }
 .header .menu-bar .header-menu {
  top:104px !important;
  height:calc(100dvh - 104px) !important;
  visibility:hidden;
  pointer-events:none;
 }
 .header .menu-bar .header-menu.is-open {
  visibility:visible;
  pointer-events:auto;
 }
 .header .logo-mobile { top:48px !important; left:16px !important; }
 .header .logo-mobile img { height:auto !important; width:128px !important; }
}