/* ============================================================
   Header  -  barra superior, categorias, menu en una linea, iconos
   (scoped: .mh-* / .header-top.mh-topbar)
   ============================================================ */

  .header-top.mh-topbar {
  background: #e77235;
  border-bottom: 1px solid #F7F8F8;
  padding: 10px 0;
  text-align: left;
}
  .mh-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Contact list (left) */
  .mh-contact {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
  .mh-contact li { display: flex; align-items: center; position: relative; }
  .mh-contact li + li { padding-left: clamp(14px, 1.6vw, 30px); }
  .mh-contact li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #91A0AC;
}
  .mh-contact a,
  .mh-contact span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s ease;
}
  .mh-contact a:hover { color: #fff; }
  .mh-contact svg { flex-shrink: 0; }

/* Right cluster */
  .mh-right {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
}
  .mh-divider { width: 1px; height: 20px; background: #91A0AC; }

  .mh-social { display: flex; align-items: center; gap: 8px; }
  .mh-social a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F7F8F8;
  color: #495F70;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
  .mh-social a:hover {
  background: #173856;
  color: #fff;
  transform: translateY(-2px);
}
  .mh-social a.is-placeholder {
  opacity: 0.85;
  cursor: default;
}
  .mh-social a.is-placeholder:hover {
  background: #F7F8F8;
  color: #495F70;
  transform: none;
}

/* Language dropdown */
  .mh-lang { position: relative; }
  .mh-lang > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #07182C;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 2px;
}
  .mh-lang > button i { font-size: 11px; transition: transform 0.25s ease; color: #91A0AC; }
  .mh-lang:hover > button i { transform: rotate(180deg); }
  .mh-lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 140px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid #F7F8F8;
  border-radius: 12px;
  box-shadow: 0 16px 34px -18px rgba(20, 21, 22, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 60;
}
  .mh-lang:hover .mh-lang-menu,
  .mh-lang:focus-within .mh-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
  .mh-lang-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #495F70;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
  .mh-lang-menu a:hover { background: #F7F8F8; color: #173856; }

/* Iniciar sesión */
  .mh-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #07182C;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease;
}
  .mh-login:hover { color: #173856; }

/* Responsive */
@media (max-width: 1199px) {
.mh-contact li:nth-child(3) { display: none; }
}
@media (max-width: 991px) {
.mh-topbar-inner { justify-content: space-between; }
.mh-contact li:nth-child(2) { display: none; }
}
@media (max-width: 767px) {
.header-top.mh-topbar { padding: 8px 0; }
.mh-social { display: none; }
.mh-right .mh-divider:first-of-type { display: none; }
}
@media (max-width: 479px) {
.mh-lang,
.mh-right .mh-divider { display: none; }
.mh-topbar-inner { justify-content: center; gap: 20px; }
}

/* ----- Categories button relocated into the nav row ----- */
  .mh-navrow {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 36px);
}
  .mh-categories { position: relative; }
  .mh-categories > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid #91A0AC;
  background: #fff;
  color: #07182C;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 0.9vw, 16px);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
  .mh-categories > a svg { flex-shrink: 0; }
  .mh-categories > a .fa-chevron-down {
  font-size: 11px;
  color: #91A0AC;
  transition: transform 0.25s ease, color 0.25s ease;
}
  .mh-categories:hover > a,
  .mh-categories:focus-within > a {
  border-color: #173856;
  color: #173856;
  box-shadow: 0 10px 22px -14px rgba(245, 147, 0, 0.9);
}
  .mh-categories:hover > a .fa-chevron-down,
  .mh-categories:focus-within > a .fa-chevron-down {
  transform: rotate(180deg);
  color: #173856;
}

/* Flyout */
  .mh-categories .sub-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 14px);
  min-width: 230px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid #F7F8F8;
  border-radius: 16px;
  box-shadow: 0 24px 46px -22px rgba(20, 21, 22, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
  z-index: 70;
}
  .mh-categories .sub-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
  .mh-categories:hover .sub-menu,
  .mh-categories:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
  .mh-categories .sub-menu li a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: #495F70;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
  .mh-categories .sub-menu li a:hover {
  background: #F7F8F8;
  color: #173856;
  padding-left: 18px;
}

/* ===== Single-line header bar ===== */
  .mh-bar {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 32px);
  padding: 14px 0;
}
/* High specificity to beat app.css .header-logo width rules */
header.main-menu .header-section .mh-bar .mh-logo {
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
header.main-menu .header-section .mh-bar .mh-logo img {
  height: clamp(48px, 4.4vw, 66px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
}

/* Keep the nav from claiming full width inside the flex bar */
header.main-menu .header-section .mh-bar .navigation.mh-nav { width: auto; }
header.main-menu .header-section .mh-bar .navigation.mh-nav .menu-button-right .main-menu__nav {
  margin: 0;
}

/* Search pill (re-styled outside its old wrapper) */
  .mh-search {
  flex: 0 1 250px;
  width: 250px;
  min-width: 140px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: #F7F8F8;
  border: 1px solid #91A0AC;
  border-radius: 100px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
  .mh-search .searchbar-icon { width: 20px; height: 20px; flex-shrink: 0; }
  .mh-search .searchbar-icon-btn,
  .mh-search .rk-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 0;
  }
  .mh-search input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  color: #07182C;
}
  .mh-search input::placeholder { color: #91A0AC; }
  .mh-search:focus-within {
  border-color: #173856;
  box-shadow: 0 0 0 3px rgba(245, 147, 0, 0.12);
}

/* Actions */
  .mh-bar .mh-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
  .mh-bar .main-menu__toggler { display: none; }

/* Cart / wishlist icons */
  .mh-icons { display: flex; align-items: center; gap: 4px; }
  .mh-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #07182C;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.mh-icon i {
    font-size: 24px; /* Ajusta este valor (ej: 20px, 22px, 26px) según prefieras */
    color: #333; /* O el color que desees para los iconos */
}
  .mh-icon:hover {
  background: #F7F8F8;
  color: #173856;
  transform: translateY(-2px);
}
  .mh-icon svg { width: 22px; height: 22px; }
  .mh-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: #173856;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  border-radius: 10px;
  border: 2px solid #fff;
}
@media (max-width: 575px) {
.mh-icons { display: none; }
}

/* Responsive: collapse to logo + Comenzar + hamburger */
@media (max-width: 1199px) {
.mh-search { flex-basis: 200px; width: 200px; }
}
@media (max-width: 991px) {
.mh-bar .mh-categories,
.mh-search { display: none; }
  /* High specificity to beat the template's .navigation { display:flex } */
  header.main-menu .header-section .mh-bar .navigation.mh-nav { display: none; }
.mh-bar { justify-content: space-between; }
.mh-bar .main-menu__toggler { display: inline-flex; align-items: center; }
.mh-bar .mh-actions { margin-left: auto; }
}
@media (max-width: 575px) {
.mh-bar .mh-getstarted { display: none; }
}

/* ============================================================
   Sticky header clone (.stricky-header)
   El JS clona el innerHTML de .main-menu dentro de
   .stricky-header .sticky-header__content, es decir FUERA de
   "header.main-menu". Por eso las reglas de arriba scopeadas a
   "header.main-menu ..." dejan de aplicar al clon y el logo se
   expande a su tamaño natural (desborde) al hacer scroll.
   Re-aplicamos el tamaño del logo y el layout del bar al clon.
   ============================================================ */
.stricky-header .sticky-header__content .mh-bar {
  padding: 8px 0;
}
.stricky-header .sticky-header__content .mh-bar .mh-logo {
  width: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.stricky-header .sticky-header__content .mh-bar .mh-logo img {
  height: clamp(42px, 3.6vw, 54px);
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}
.stricky-header .sticky-header__content .mh-bar .navigation.mh-nav {
  width: auto;
}
.stricky-header .sticky-header__content .mh-bar .navigation.mh-nav .menu-button-right .main-menu__nav {
  margin: 0;
}

/* ============================================================
   Header anclado (fijo) en móvil / responsive
   Usa position:fixed (sticky es poco fiable por overflow-x:hidden del body).
   El espaciador --rk-mh-h lo calcula el JS con la altura real del header.
   ============================================================ */
@media (max-width: 991px) {
  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: #F7F8F8;
    box-shadow: 0 6px 20px -10px rgba(7, 24, 44, 0.3);
  }
  /* Empuja el contenido para que no quede debajo del header fijo */
  body {
    padding-top: var(--rk-mh-h, 118px);
  }
  /* Evita doble header: oculta el clon sticky generado por JS en móvil */
  .stricky-header.stricked-menu {
    display: none !important;
  }
  /*
   * El drawer móvil (app.css) usa z-index 999; con header fijo en 1000
   * el panel quedaba detrás y solo se veían los ítems inferiores.
   */
  .mobile-nav__wrapper {
    z-index: 1100;
  }
  .mobile-nav__wrapper .mobile-nav__content {
    padding-top: calc(var(--rk-mh-h, 118px) + 12px);
  }
  .mobile-nav__wrapper .mobile-nav__close {
    top: calc(var(--rk-mh-h, 118px) + 8px);
  }
}