/* Ajustes propios. Se carga despues de theme-<color>.css, asi que gana en la cascada.
   No lo regenera el compilador SCSS del modulo spthemeconfigurator. */

/* --- Bloque "Los mas buscados" (spcustomhtml 7 / .trending) --- */

/* Barra roja vertical y chevron que dejaban un hueco raro entre el titulo
   y el primer producto del carrusel. */
.footer-trending .trending {
	border-left: 0;
}
.footer-trending .trending:before {
	display: none;
}

/* El titulo venia empujado 50px hacia abajo para dejar sitio al chevron. */
.footer-trending .trending div.text {
	padding: 25px 25px 25px 30px;
}

/* Separador limpio entre el titulo y el carrusel. */
.footer-trending .trending div.item {
	border-left: 1px solid #ebebeb;
}
.footer-trending .trending ul li.item:first-child {
	border-left: 0;
}

/* ==========================================================================
   Menu 2024 - spmegamenu como dropdown en cascada
   Los selectores llevan el prefijo ".navbar #sp-megamenu" a proposito: el
   modulo usa reglas con ID (spmegamenu.css:339) y sin eso pierden por
   especificidad.
   ========================================================================== */
@media (min-width: 993px) {

  /* --- el bloque de la izquierda (spverticalmenu) solo trae un <script>,
         sin contenido visible, pero ocupa col-lg-3 = 318px. Sin esto los 9
         items (1160px) no entran en los 933px que quedan. --- */
  #vertical_menu { display: none; }
  #header_menu {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* --- barra superior: una sola fila --- */
  .navbar #sp-megamenu .navbar-nav > li {
    position: relative;
    margin: 0;
    padding: 10px 0;
    float: none;
    display: inline-block;
  }
  .navbar #sp-megamenu .navbar-nav > li > a,
  .navbar #sp-megamenu .navbar-nav > li.parent > a {
    padding: 8px 13px 7px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* --- caret de los items raiz ---
     El modulo lo pinta con 0dd (fa-sort-desc, dibuja por debajo de la linea
     base) y color #fff, invisible sobre la barra clara. Ademas va absolute a
     right:9px sin reservar padding, asi que se monta sobre el texto.
     Ver spmegamenu.css: .sp-megamenu .navbar-nav .item-1.parent > a:before */
  .navbar #sp-megamenu .navbar-nav > li.parent > a {
    padding-right: 26px;
  }
  .navbar #sp-megamenu .navbar-nav > li.parent > a:before {
    content: "0d7";
    color: inherit;
    opacity: .55;
    font-size: 11px;
    right: 11px;
    left: auto;
    top: 50%;
    bottom: auto;
    height: auto;
    line-height: 1;
    transform: translateY(-50%);
  }
  .navbar #sp-megamenu .navbar-nav > li.parent:hover > a:before {
    opacity: 1;
  }

  /* --- nivel 1: panel anclado bajo su item (el modulo lo fija a left/right:150px) --- */
  .navbar #sp-megamenu .navbar-nav > li > .dropdown-menu {
    left: 0;
    right: auto;
    min-width: 260px;
    width: auto;
    padding: 8px 0;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  }

  /* --- items de cualquier nivel: lista vertical, sin columnas --- */
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul > li {
    position: relative;
    float: none;
    display: block;
    width: auto;
    padding: 0;
  }
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul > li > a {
    display: block;
    padding: 8px 30px 8px 18px;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-transform: none;
    color: #333;
    white-space: nowrap;
  }
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul > li > a:hover {
    background: #f5f5f5;
    color: #e4007c;
  }

  /* --- niveles 2+: flyout a la derecha en hover --- */
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul > li > .dropdown-menu {
    position: absolute;
    top: -8px;
    left: 100%;
    right: auto;
    bottom: auto;
    display: block;
    visibility: hidden;
    opacity: 0;
    min-width: 240px;
    width: auto;
    margin: 0;
    padding: 8px 0;
    background: #fff;
    border: none;
    border-radius: 0 3px 3px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    transition: opacity .2s ease;
    z-index: 10;
  }
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul > li:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
  }

  /* --- flecha en los que tienen hijos --- */
  .navbar #sp-megamenu .navbar-nav > li .dropdown-menu ul > li.parent > a:after {
    content: "\f105";
    font-family: "FontAwesome";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
  }

  /* --- las 2 ultimas raices abren hacia la izquierda para no cortarse --- */
  .navbar #sp-megamenu .navbar-nav > li:nth-last-child(-n+2) > .dropdown-menu {
    left: auto;
    right: 0;
  }
  .navbar #sp-megamenu .navbar-nav > li:nth-last-child(-n+2) .dropdown-menu ul > li > .dropdown-menu {
    left: auto;
    right: 100%;
    border-radius: 3px 0 0 3px;
  }

  /* el "Home" viene hardcodeado en spmegamenu.tpl, no de la DB */
  .navbar #sp-megamenu .sp-megamenu-container .home { display: none; }
}