/* Rediseño del menú principal en mobile (.header-menu):
   acordeón apilado con todos los ítems visibles, submenús como
   filas de "ícono + nombre" (sin las imágenes grandes de categoría). */

/* Desktop: mega-menú de Llantas (imagen + "Ver categoría").
   El ícono pequeño solo se usa en mobile. Se muestran TODAS las categorías;
   si pasan de 5, el sub-menú hace wrap a una segunda fila. */
@media (min-width: 1181px) {
  .header-menu .sub-menu .menu-cat-icon {
    display: none;
  }
  /* El grid ya reparte en 5 columnas; separamos las filas cuando hay más de 5. */
  .header-menu .sub-menu:not(.ventas) {
    row-gap: 1.5rem;
  }
  /* El panel abría a 30rem (pensado para una sola fila). Con más de 5
     categorías hacen falta 2 filas; lo ampliamos para no recortar la segunda. */
  .header-menu .contenedor-forma > ul > li.desplegable.categorias:hover .subMenu {
    max-height: 52rem !important;
  }
}

/* Placeholder para categorías sin imagen: ocupa el mismo espacio (aspecto 16/9)
   con un fondo blanco/gris muy suave, para que las tarjetas queden alineadas. */
.header-menu .sub-menu .imagen.imagen-vacia {
  background-color: #f5f5f5;
  border: 1px solid #ececec;
}

@media (max-width: 1180px) {
  /* Panel blanco y scrolleable */
  .header-menu {
    background-color: #fff !important;
  }
  .header-menu .contenedor-forma {
    overflow-y: auto !important;
    flex: 1;
  }

  /* Todos los ítems de nivel superior visibles a la vez (acordeón real) */
  .header-menu .contenedor-forma > ul {
    height: auto !important;
    gap: 0 !important;
  }
  .header-menu .contenedor-forma > ul.active {
    gap: 0 !important;
  }
  .header-menu .contenedor-forma > ul.active > li:not(.active),
  .header-menu .contenedor-forma > ul > li {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 200rem !important;
    width: 100% !important;
  }
  .header-menu .contenedor-forma > ul.active > li.active {
    height: auto !important;
  }

  /* Título de cada sección: negro y en negrita; chevron rojo */
  .header-menu .contenedor-forma > ul > li > a,
  .header-menu .contenedor-forma > ul > li > span {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 0.75rem 0.25rem !important;
  }
  .header-menu .contenedor-forma > ul > li > a span,
  .header-menu .contenedor-forma > ul > li > span > span {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: #1a1a1a !important;
  }
  .header-menu .contenedor-forma > ul > li.desplegable > span svg {
    transition: transform 0.3s ease;
  }
  .header-menu .contenedor-forma > ul > li.desplegable > span svg path {
    fill: var(--bg-color-red1) !important;
  }
  .header-menu .contenedor-forma > ul > li.desplegable.active > span svg {
    transform: rotate(180deg);
  }

  /* Submenús: fluyen en línea (accordion), sin overlay absoluto */
  .header-menu .contenedor-forma > ul > li.desplegable .subMenu {
    position: relative !important;
    height: auto !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    gap: 0 !important;
    box-shadow: none !important;
    transition: max-height 0.4s ease !important;
  }
  .header-menu .contenedor-forma > ul > li.desplegable.active .subMenu {
    max-height: 200rem !important;
    padding: 0 0 0.5rem 0.25rem !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu {
    position: relative !important;
    height: auto !important;
    top: auto !important;
    overflow: visible !important;
    gap: 0 !important;
  }

  /* Ocultar el botón "Ver todas las categorías" en mobile */
  .header-menu .contenedor-forma > ul > li.desplegable .subMenu > a {
    display: none !important;
  }

  /* --- Categorías de "Llantas": fila ícono + nombre --- */
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) > li {
    width: 100% !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) li.menu-cat-extra {
    display: block !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) > li > a {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    width: 100% !important;
    padding: 0.45rem 0.25rem !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) .menu-cat-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 2.1rem !important;
    height: 2.1rem !important;
    border-radius: 50% !important;
    background: #fce6e7 !important;
    flex-shrink: 0;
    overflow: hidden;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) .menu-cat-icon img {
    width: 60% !important;
    height: 60% !important;
    object-fit: contain !important;
    object-position: center;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) span.nombre {
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    text-align: left !important;
    width: auto !important;
    color: #333 !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) .imagen,
  .header-menu .contenedor-forma .subMenu .sub-menu:not(.ventas) span.ref {
    display: none !important;
  }

  /* --- "Canal de ventas": lista apilada con íconos --- */
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas {
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas > li {
    width: 100% !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas ul {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas a {
    padding: 0.45rem 0.25rem !important;
    gap: 0.75rem !important;
    justify-content: flex-start !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas .imagen-category,
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas a > svg {
    width: 2.1rem !important;
    height: 2.1rem !important;
    flex-shrink: 0;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas .imagen-category img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas a span {
    font-size: 0.95rem !important;
    color: #333 !important;
    font-weight: 500 !important;
  }
  .header-menu .contenedor-forma .subMenu .sub-menu.ventas ul li:first-child {
    font-family: GorditaBold, sans-serif;
    font-size: 0.8rem !important;
    color: #1a1a1a !important;
    text-transform: uppercase;
    margin: 0.5rem 0 0.25rem !important;
  }
}