/* Logo de la tienda. Dos versiones que se muestran segun breakpoint:
   - Mascota historica (--desktop): escritorio (>=992). Posicion absoluta,
     solo dentro de #_desktop_logo.
   - Wordmark de texto (--tablet): tablet y movil (<=991), donde el header usa
     la barra movil y este logo se clona en #_mobile_logo.
   Las reglas de visibilidad son globales (no scoped a #_desktop_logo) para que
   el clon de #_mobile_logo tambien muestre una sola version y no las dos. */
.img_logo--tablet {
    display: none;
}
#_desktop_logo .img_logo--desktop {
    position: absolute !important;
    top: -60px;
    /* Anclado a la IZQUIERDA de la columna (no a la derecha): la mascota es
       ancha y con right:20px se salia por la izquierda de la columna col-md-2,
       cortandose sobre todo al usar el container todo el ancho. Con left:15px
       arranca siempre desde el borde (con un pequeño margen) y no se corta. */
    left: 15px;
    right: auto;
}

@media (max-width: 991.98px) {
    .img_logo--desktop {
        display: none !important;
    }
    .img_logo--tablet {
        display: block !important;
    }
}

/* Menu superior compacto para que quepa en UNA fila. El menu desktop solo se
   muestra a partir de 992 (por debajo se usa el menu movil de hamburguesa); el
   menu completo solo entra holgado a partir de 1200, asi que entre 992 y 1199
   se reduce padding/tipografia y se fuerza nowrap. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #header .header-top a[data-depth="0"] {
        padding: 12px 7px;
        font-size: 13px;
    }
    #_desktop_top_menu ul {
        white-space: nowrap;
    }
}

/* Nav de categorias, marcas, ofertas */
#header .header-top a[data-depth="0"] {
    font-family: var(--font-brand);
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
    color: var(--color-gray-text);
    display: block;
    padding: 17px 20px;
}

#header .header-top a[data-depth="0"]:hover {
    color: var(--color-pink);
    cursor: pointer;
}

/* Sub menu */
.top-menu .sub-menu {
    width: max-content;
}

.top-menu .sub-menu > .top-menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 2px;
}

/* Sub categorias */
#header .header-top a[data-depth="1"] {
    font-family: var(--font-brand);
}

#header .header-top a[data-depth="1"]:hover {
    color: var(--color-pink);
    cursor: pointer;
}

/* Buscador */
.header-top #search_widget {
    color: var(--color-white) !important;
}

.header-top #search_widget .search {
    margin-top: 0.45rem;
}

.header-top #search_widget .ui-autocomplete-input::placeholder {
    color: var(--color-white);
}

#search_widget form input {
    display: inline;
    height: 35px;
    width: 90%;
    background: var(--color-pink);
    margin-top: 10px;
    border: none;
    color: var(--color-white);
    border-radius: 20px;
}