/* ==========================================================================
   Matmap Header CSS — Versión unificada con buscador integrado
   Incluye: cabecera, paneles, carrito, integración buscador
   ========================================================================== */

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
  --header-height:    68px;
  --top-bar-height:   30px;
  --primary-color:    #3a3a72;
  --secondary-color:  #e69130;
  --text-color:       #1a1a2e;
  --header-bg:        #ffffff;
  --light-gray:       #f4f5f8;
  --border-color:     #e8eaef;
  --success-color:    #28a745;
  --header-z-index:   99990;
  --transition-fast:  0.18s;
  --transition-base:  0.36s;
  --container-width:  1440px;
  --r:                10px;
}

/* ── Reset contextual ─────────────────────────────────────────────────── */
#page-container, #page, .site, .et-boc { overflow-x: clip !important; }
:focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 2px; border-radius: 4px; }
/* El input del buscador tiene su propio estilo de foco — sin outline naranja */
.mmis__input:focus-visible,
.mmis__field:focus-within .mmis__input { outline: none !important; }
[hidden] { display: none !important; }
#main-header, #top-header { display: none !important; }

/* Fix Divi: p { padding-bottom: 1em } dentro de paneles del plugin */
#mh-header p,
#mh-panel-categories p,
#mh-panel-cart p,
#mh-panel-nav p { padding-bottom: 0 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   ESTRUCTURA PRINCIPAL
   ═══════════════════════════════════════════════════════════════════════ */

.mh-header {
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  background: var(--header-bg);
  box-shadow: 0 1px 0 rgba(0,0,0,.07), 0 4px 24px rgba(0,0,0,.05);
  z-index:    var(--header-z-index);
  /* Sin transform: evita crear un stacking context que rompe
     position:fixed en paneles hijos */
}

/* Barra superior */
.mh-header__top-bar {
  background:      var(--primary-color);
  color:           #fff;
  height:          var(--top-bar-height);
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
  position:        relative;
}
#mh-slider-container { position: relative; width: 100%; height: 100%; }
.mh-slider-link {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff !important;
  font-size:       13px;
  text-decoration: none;
  opacity:         0;
  transition:      opacity .5s;
}
.mh-slider-link i { margin-right: 8px; }
.mh-slider-link.is-active { opacity: 1; }

/* Fila principal */
.mh-header__main { height: var(--header-height); }
.mh-header__container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  max-width:       var(--container-width);
  margin:          0 auto;
  padding:         0 24px;
  gap:             20px;
}

.mh-header__left,
.mh-header__right { display: flex; align-items: center; gap: 5px; }
.mh-header__center { flex-grow: 1; display: flex; justify-content: center; }

/* Desktop */
@media (min-width: 981px) {
  /* left y right con flex:1 para que el center (logo) quede matemáticamente centrado */
  .mh-header__left  { flex: 1 1 0; justify-content: flex-start; }
  .mh-header__center { flex-shrink: 0; }
  .mh-header__right { flex: 1 1 0; justify-content: flex-end; gap: 12px; }

  /* El buscador crece en el espacio disponible de la derecha */
  .mh-header__search-desktop {
    flex: 1 1 0;
    min-width: 180px;
    max-width: 580px;
    display:   block;
  }
}

/* Mobile */
@media (max-width: 980px) {
  .mh-header__left  { flex: 1; justify-content: flex-start; }
  .mh-header__right { flex: 1; justify-content: flex-end; }
  .mh-header__center { flex-grow: 0; }
  .mh-header__search-desktop { display: none !important; }
}

.mh-header__logo img { max-height: 50px; width: auto; display: block; }


/* ═══════════════════════════════════════════════════════════════════════
   ACCIONES (iconos de la barra)
   ═══════════════════════════════════════════════════════════════════════ */

.mh-header__actions { display: flex; align-items: center; gap: 5px; }
@media (min-width: 981px) { .mh-header__actions { gap: 10px; } }

.mh-action-item {
  color:           var(--primary-color);
  font-size:       18px;
  position:        relative;
  cursor:          pointer;
  background:      none;
  border:          none;
  padding:         8px;
  border-radius:   50%;
  width:           40px;
  height:          40px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color var(--transition-fast), transform var(--transition-fast);
}
.mh-action-item:hover {
  background-color: var(--light-gray);
  transform: scale(1.08);
}
.mh-action-item i { color: var(--primary-color) !important; }

/* Visibilidad por breakpoint — sin duplicados */
.mh-action-item--mobile,
.mh-action-item--search-mobile { display: flex; }
.mh-categories-toggle { display: none; }

@media (min-width: 981px) {
  .mh-action-item--mobile,
  .mh-action-item--search-mobile { display: none !important; }
  .mh-categories-toggle { display: flex; align-items: center; }
}

/* Botón "Productos" desktop */
.mh-categories-toggle {
  font-weight:   600;
  font-size:     14px;
  background:    var(--primary-color);
  border:        none;
  height:        40px;
  padding:       0 16px;
  border-radius: 20px;
  gap:           8px;
  cursor:        pointer;
  transition:    all .2s cubic-bezier(.4,0,.2,1);
  white-space:   nowrap;
  color:         #fff;
  letter-spacing: .01em;
}
.mh-categories-toggle:hover {
  background-color: #2e2d5c;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(58,58,114,.3);
}
.mh-categories-toggle i { color: currentColor !important; font-size: 13px; }

/* Badge del carrito */
.mh-cart-count {
  position:      absolute;
  top:           0;
  right:         0;
  background:    var(--secondary-color);
  color:         var(--primary-color) !important;
  border-radius: 50%;
  width:         20px;
  height:        20px;
  font-size:     11px;
  font-weight:   700;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border:        2px solid var(--header-bg);
  line-height:   1;
}


/* ═══════════════════════════════════════════════════════════════════════
   OVERLAYS Y PANELES
   ═══════════════════════════════════════════════════════════════════════ */

.mh-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    999998 !important;
  opacity:    0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.mh-overlay.is-active { opacity: 1; visibility: visible; }

/* Carrito + Nav (slide desde la derecha) */
.mh-panel-cart,
.mh-panel-nav {
  position:       fixed;
  top:            0;
  right:          0;
  width:          100%;
  max-width:      420px;
  height:         100%;
  background:     #fff;
  z-index:        999999 !important;
  transform:      translateX(100%);
  transition:     transform .4s cubic-bezier(.25,.46,.45,.94);
  display:        flex;
  flex-direction: column;
  box-shadow:     -10px 0 40px rgba(0,0,0,.12);
}
.mh-panel-cart.is-active,
.mh-panel-nav.is-active { transform: translateX(0); }

/* Botón cerrar panel */
.mh-panel__close {
  background:    #e9ecef;
  border:        none;
  font-size:     20px;
  cursor:        pointer;
  color:         #6c757d;
  padding:       0;
  width:         40px;
  height:        40px;
  line-height:   40px;
  text-align:    center;
  border-radius: 50%;
  transition:    all .2s;
  flex-shrink:   0;
}
.mh-panel__close:hover {
  background-color: var(--primary-color);
  color:            #fff;
  transform:        rotate(90deg);
}

/* Cabeceras de paneles */
.mh-panel-cart__header,
.mh-panel-nav__header,
.mh-panel-drilldown__header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         20px;
  border-bottom:   1px solid var(--border-color);
  flex-shrink:     0;
}
.mh-panel-cart__title,
.mh-panel-nav__title,
.mh-panel-drilldown__title {
  margin:      0;
  font-size:   20px;
  font-weight: 700;
  color:       var(--primary-color);
}


/* ═══════════════════════════════════════════════════════════════════════
   CARRITO — contenido del panel
   ═══════════════════════════════════════════════════════════════════════ */

/* Barra de progreso de envío */
.mh-panel-cart__shipping-progress {
  flex-shrink:   0;
  padding:       14px 20px;
  border-bottom: 1px solid var(--border-color);
}
.mh-shipping-progress__text {
  margin:      0 0 8px;
  font-size:   14px;
  text-align:  center;
  line-height: 1.4;
}
.mh-shipping-progress__note {
  margin:     0 0 8px;
  font-size:  11px;
  text-align: center;
  color:      rgba(0,0,0,.45);
}
.mh-shipping-progress__bar {
  width:         100%;
  height:        8px;
  background:    #e9ecef;
  border-radius: 4px;
  overflow:      hidden;
}
.mh-shipping-progress__bar-inner {
  width:         0;
  height:        100%;
  background:    linear-gradient(90deg, var(--primary-color), #6a69a2);
  border-radius: 4px;
  transition:    width .4s;
}
.mh-shipping-progress__bar-inner.is-full { background: var(--success-color); }
.mh-panel-cart__separator { height: 1px; background: var(--border-color); }

/* Scroll de productos */
.mh-panel-cart__content-scroll {
  flex-grow:  1;
  overflow-y: auto;
  overflow-x: hidden;
  padding:    0;
  -webkit-overflow-scrolling: touch;
}

/* Lista productos */
.mh-panel-cart__products { padding: 0; }
.mh-cart-products {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
}

.mh-cart-product {
  display:     flex;
  gap:         12px;
  padding:     16px 44px 16px 16px;
  border-bottom: 1px solid var(--border-color);
  position:    relative;
  align-items: flex-start;
  transition:  opacity .2s;
}
.mh-cart-product.removing { opacity: 0.4; pointer-events: none; }

/* Botón eliminar */
.mh-cart-product__remove {
  position:      absolute;
  top:           16px;
  right:         12px;
  background:    rgba(0,0,0,.05);
  border:        none;
  width:         24px;
  height:        24px;
  border-radius: 50%;
  font-size:     16px;
  cursor:        pointer;
  color:         rgba(0,0,0,.45);
  display:       flex;
  align-items:   center;
  justify-content: center;
  transition:    all .2s;
  padding:       0;
  z-index:       1;
}
.mh-cart-product__remove:hover {
  background: rgba(220,53,69,.12);
  color:      #dc3545;
  transform:  rotate(90deg);
}

/* Imagen del producto */
.mh-cart-product__media {
  flex-shrink:   0;
  width:         68px;
  height:        68px;
  overflow:      hidden;
  border-radius: var(--r);
  background:    var(--light-gray);
}
.mh-cart-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Info */
.mh-cart-product__info { flex-grow: 1; min-width: 0; }
.mh-cart-product__title {
  font-size:     14px;
  font-weight:   600;
  margin-bottom: 6px;
  line-height:   1.35;
}
.mh-cart-product__title a { color: var(--text-color); text-decoration: none; }
.mh-cart-product__title a:hover { color: var(--primary-color); }
.mh-cart-product__meta { font-size: 13px; color: rgba(0,0,0,.55); }

/* Carrito vacío */
.mh-cart-empty { padding: 48px 20px; text-align: center; color: rgba(0,0,0,.45); font-size: 15px; }

/* Footer del carrito */
.mh-panel-cart__footer {
  flex-shrink: 0;
  background:  #fff;
  padding:     16px 20px 20px;
  border-top:  1px solid var(--border-color);
  box-shadow:  0 -4px 16px -4px rgba(0,0,0,.08);
}

/* Totales acordeón */
.mh-cart-totals-wrapper { margin-bottom: 14px; }

.mh-cart-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding-bottom:  10px;
  cursor:          pointer;
  user-select:     none;
}
.mh-cart-total__label {
  font-weight:    700;
  font-size:      17px;
  color:          var(--primary-color);
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            3px;
}
.mh-cart-total__main { display: flex; align-items: center; gap: 7px; }
.mh-cart-total__toggle {
  font-size:  11px;
  color:      rgba(0,0,0,.35);
  transition: transform .3s ease;
  display:    inline-block;
}
.mh-cart-total.is-expanded .mh-cart-total__toggle { transform: rotate(180deg); }
.mh-cart-total__hint {
  font-size:   11px;
  font-weight: 500;
  color:       rgba(0,0,0,.45);
  display:     flex;
  align-items: center;
  gap:         4px;
}
.mh-cart-total.is-expanded .mh-cart-total__hint:not(.mh-cart-total__hint--shipping) { display: none; }
.mh-cart-total__hint--shipping { text-decoration: none; cursor: pointer; }
.mh-cart-total__hint--shipping:hover { text-decoration: underline; }
.mh-cart-total__amount { font-weight: 700; font-size: 20px; color: var(--primary-color); }

/* Desglose colapsable */
.mh-cart-breakdown {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  max-height:     0;
  overflow:       hidden;
  opacity:        0;
  transition:     max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.mh-cart-breakdown.is-expanded {
  max-height: 260px;
  opacity:    1;
  padding:    10px 0 12px;
  border-top: 1px solid var(--border-color);
}
.mh-cart-breakdown__item {
  display:         flex;
  justify-content: space-between;
  font-size:       13px;
  color:           rgba(0,0,0,.6);
}
.mh-cart-breakdown__item span:last-child { font-weight: 500; }

/* Cupones */
.mh-cart-breakdown__item--coupon {
  color:         #28a745;
  background:    rgba(40,167,69,.06);
  padding:       7px 10px;
  border-radius: 6px;
  margin:        2px 0;
}
.mh-cart-breakdown__item--coupon span:first-child { font-weight: 600; display: flex; align-items: center; gap: 5px; }
.mh-cart-breakdown__item--coupon .fa-tag { font-size: 10px; }
.mh-cart-breakdown__discount { color: #28a745; font-weight: 700 !important; }

/* Botones de acción del carrito */
#mh-panel-cart .widget_shopping_cart_content .woocommerce-mini-cart__total,
#mh-panel-cart .widget_shopping_cart_content .woocommerce-mini-cart__buttons { display: none !important; }

.woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 10px; }
.woocommerce-mini-cart__buttons .button {
  padding:       14px !important;
  font-size:     15px !important;
  font-weight:   700 !important;
  text-align:    center !important;
  border-radius: var(--r) !important;
  text-decoration: none;
  display:       block;
  transition:    all .2s;
}
.woocommerce-mini-cart__buttons a.checkout {
  background: var(--primary-color) !important;
  color:      #fff !important;
  border:     none !important;
}
.woocommerce-mini-cart__buttons a.checkout:hover { opacity: .88; }
.woocommerce-mini-cart__buttons a.button:not(.checkout) {
  background: #fff !important;
  color:      var(--primary-color) !important;
  border:     2px solid var(--primary-color) !important;
}
.woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
  background: var(--primary-color) !important;
  color:      #fff !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   NAV MÓVIL
   ═══════════════════════════════════════════════════════════════════════ */

.mh-panel-nav__content-scroll {
  overflow-y: auto;
  flex-grow:  1;
  -webkit-overflow-scrolling: touch;
}
.mh-nav-list,
.mh-nav-list ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.mh-nav-list li { display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--border-color); }
.mh-nav-list li a {
  flex-grow:   1;
  padding:     14px 20px;
  text-decoration: none;
  color:       var(--text-color);
  font-weight: 600;
  font-size:   15px;
  display:     flex;
  align-items: center;
  gap:         12px;
}
.mh-nav-list li a span { flex-grow: 1; }
.mh-nav-list .mh-submenu-toggle {
  flex-shrink: 0;
  width:       54px;
  background:  transparent;
  border:      none;
  border-left: 1px solid var(--border-color);
  padding:     0;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       #bbb;
  transition:  color .2s;
}
.mh-nav-list .mh-submenu-toggle:hover { color: var(--primary-color); }
.mh-nav-list .sub-menu { display: none; width: 100%; background-color: var(--light-gray); }
.mh-nav-list li.is-open > .mh-submenu-toggle i { transform: rotate(180deg); }

/* Jerarquía visual */
.mh-panel-nav .mh-nav-list > li > a { font-size: 16px; font-weight: 700; }
.mh-panel-nav .mh-nav-list ul.sub-menu { margin-left: 10px; padding-left: 10px; border-left: 2px solid var(--border-color); background: transparent; }
.mh-panel-nav .mh-nav-list ul.sub-menu > li > a { font-size: 14px; font-weight: 600; padding-left: 18px; background: rgba(0,0,0,.02); }
.mh-panel-nav .mh-nav-list ul.sub-menu ul.sub-menu > li > a { font-size: 13.5px; font-weight: 500; padding-left: 26px; background: rgba(0,0,0,.035); }
.mh-panel-nav .mh-nav-list ul.sub-menu ul.sub-menu ul.sub-menu > li > a { font-size: 13px; font-weight: 500; padding-left: 34px; background: rgba(0,0,0,.05); }
.mh-panel-nav .mh-nav-list li.is-open > a { background: rgba(58,57,114,.06); }


/* ═══════════════════════════════════════════════════════════════════════
   DRILLDOWN ESCRITORIO
   ═══════════════════════════════════════════════════════════════════════ */

.mh-panel-drilldown {
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  max-width:      420px;
  height:         100%;
  background:     #fff;
  z-index:        999999 !important;
  transform:      translateX(-100%);
  transition:     transform .4s cubic-bezier(.25,.46,.45,.94);
  display:        flex;
  flex-direction: column;
  box-shadow:     10px 0 40px rgba(0,0,0,.12);
}
.mh-panel-drilldown.is-active { transform: translateX(0); }
.mh-panel-drilldown__content { flex-grow: 1; overflow: hidden; position: relative; }
.mh-panel-drilldown__inner {
  display:    flex;
  height:     100%;
  width:      100%;
  position:   absolute;
  top:        0;
  left:       0;
  transition: transform .35s ease-in-out;
}
.mh-drilldown-panel__list {
  list-style: none;
  margin:     0;
  padding:    0;
  background: #fff;
  width:      100%;
  height:     100%;
  overflow-y: auto;
  flex-shrink: 0;
}
.mh-drilldown-panel__header {
  padding:       0 20px;
  border-bottom: 1px solid var(--border-color);
  position:      sticky;
  top:           0;
  background:    #fff;
  z-index:       10;
}
.mh-drilldown-panel__back {
  background:  none;
  border:      none;
  padding:     18px 0;
  font-size:   17px;
  font-weight: 700;
  color:       var(--text-color);
  cursor:      pointer;
  display:     flex;
  align-items: center;
  gap:         10px;
  width:       100%;
}
.mh-drilldown-panel__back i { color: var(--primary-color); }

.mh-drilldown-panel__item { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-color); }
.mh-drilldown-panel__link {
  flex-grow:   1;
  padding:     16px 20px;
  text-decoration: none;
  color:       var(--text-color);
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         12px;
  transition:  background .15s;
}
.mh-drilldown-panel__link:hover { background: var(--light-gray); }
.mh-drilldown-panel__next {
  flex-shrink: 0;
  width:       54px;
  background:  transparent;
  border:      none;
  border-left: 1px solid var(--border-color);
  padding:     0;
  cursor:      pointer;
  color:       #bbb;
  transition:  all .2s;
}
.mh-drilldown-panel__next:hover { background: var(--light-gray); color: var(--primary-color); }
.mh-menu-item-image { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }



/* ═══════════════════════════════════════════════════════════════════════
   INTEGRACIÓN BUSCADOR .mmis — sólo posicionamiento de contexto
   Todos los estilos del buscador viven en search.css
   ═══════════════════════════════════════════════════════════════════════ */

/* Desktop: campo moderno integrado en header */
.mh-header__search-desktop .mmis { width: 100%; }
.mh-header__search-desktop .mmis__field {
  height:        42px;
  border-color:  var(--border-color);
  background:    var(--light-gray);
  border-radius: 21px;
  padding:       0 14px;
  transition:    background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mh-header__search-desktop .mmis__field:focus-within {
  background:   #fff;
  border-color: rgba(58,58,114,.35);
  box-shadow:   0 0 0 4px rgba(58,58,114,.07);
}
/* Panel sobre el header */
.mh-header__search-desktop .mmis__panel { z-index: 100001 !important; }
/* Ocultar botón cerrar cuando está incrustado (no es overlay) */
.mh-header__search-desktop .mmis:not(.is-overlay-open) .mmis__close { display: none !important; }

/* ── Ítems de menú no navegables (anclas agrupadores SEO) ── */
/* El span hereda el mismo aspecto visual que el <a> pero sin comportamiento de enlace */
.mh-drilldown-panel__link--group {
  cursor: default;
  pointer-events: none; /* El click lo absorbe el botón chevron adyacente */
}
.mh-drilldown-panel__link--group:hover {
  background: transparent;
}
/* En móvil: mismo tratamiento para el span agrupador */
.mh-panel-nav .mh-item--no-link > .mh-nav-link--group {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     14px 20px;
  font-weight: 600;
  color:       var(--text-color);
  cursor:      default;
  pointer-events: none;
  flex-grow:   1;
}