/*
 * Navbar de la tienda — dos pisos
 * ============================================================
 * Piso 1: logo · buscador (se come todo el ancho libre) · cuenta y carrito.
 * Piso 2: ancla "Todas las categorías" + accesos + franja de mensaje.
 *
 * El buscador es el elemento más ancho de la barra a propósito: en un catálogo
 * de miles de ítems el visitante llega sabiendo qué quiere, y antes era un input
 * de 250px perdido al lado del logo.
 *
 * El piso 2 NO se dibuja si el cliente no tiene nada que poner ahí (sin árbol de
 * categorías, sin accesos, sin mensaje): una tienda recién instalada se ve
 * terminada igual, sin cajas vacías ni links muertos.
 *
 * Formas heredadas del front de la tienda, no del admin: esquinas rectas,
 * Open Sans, títulos en mayúscula, controles negros y filetes #e6e6e6.
 * ============================================================
 */

/* Sin filete abajo: la barra tiene que apoyarse contra lo que sigue sin costura. Con el
   banner (o cualquier bloque oscuro) pegado, ese 1px gris cortaba el negro del ancla de
   categorías con el negro del banner. La separación, cuando hace falta, la da la sombra
   que aparece SOLO al scrollear (la barra es sticky y ahí sí pasa contenido por debajo). */
.sf-nav {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.sf-nav.is-stuck {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .09);
}

/* style.css le mete padding: 2rem 1rem a TODO .container del sitio público; en la
   barra eso son 64px de aire por piso. Acá el alto lo fija cada fila. */
.sf-nav .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---------- Piso 1 ---------- */

/* Los dos pisos son UNA barra, no dos bloques: sin filete entre medio y con el aire
   justo. Todo junto mide menos que el navbar de una sola fila que había antes. */
.sf-nav__row {
    display: flex;
    align-items: center;
    gap: 26px;
    min-height: 64px;
}

.sf-nav__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 1.05rem;
}
.sf-nav__logo img { max-height: 44px; }

/* El contenido del navbar va centrado en su contenedor, como el resto del sitio: los
   fondos pueden ir de borde a borde, el contenido no. */
.sf-nav__search {
    flex: 1 1 auto;
    max-width: 760px;
    display: flex;
    min-width: 0;
}
.sf-nav__search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1.5px solid #333;
    border-right: 0;
    border-radius: 0;
    padding: 11px 16px;
    font-size: .92rem;
    color: #333;
    background: #fff;
}
.sf-nav__search input::placeholder { color: #999; }
.sf-nav__search input:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px #333;
}
.sf-nav__search button {
    flex: 0 0 auto;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0 26px;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    transition: background .15s;
}
.sf-nav__search button:hover { background: #333; }

/* ---------- Sugerencias debajo del buscador ---------- */

.sf-sug {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-top: 0;
    box-shadow: 0 14px 26px -20px rgba(0, 0, 0, .45);
    z-index: 1050;
    display: none;
    max-height: 60vh;
    overflow-y: auto;
}
.sf-sug.is-open { display: block; }

.sf-sug__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid #f2f2f2;
    color: #3c3c3c;
    text-decoration: none;
    font-size: .84rem;
}
.sf-sug__item:hover,
.sf-sug__item.is-cursor {
    background: #000;
    color: #fff;
}
.sf-sug__item:hover .sf-sug__precio,
.sf-sug__item.is-cursor .sf-sug__precio { color: #fff; }

.sf-sug__img {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    object-fit: contain;
    background: #f6f6f6;
}
.sf-sug__txt {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sf-sug__precio {
    flex: 0 0 auto;
    color: #666;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sf-sug__caticon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    color: #666;
    font-size: .8rem;
}
.sf-sug__item--cat .sf-sug__txt { font-weight: 700; }
/* #611: código del producto en la sugerencia (opción de tienda) */
.sf-sug__sku {
    flex: 0 0 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: #6c757d;
    margin-right: 8px;
}
.sf-sug__cattag {
    flex: 0 0 auto;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    border: 1px solid #e6e6e6;
    padding: 2px 7px;
}
.sf-sug__item:hover .sf-sug__cattag,
.sf-sug__item.is-cursor .sf-sug__cattag { color: #fff; border-color: #555; }
.sf-sug__item:hover .sf-sug__caticon,
.sf-sug__item.is-cursor .sf-sug__caticon { background: #1a1a1a; color: #fff; }

.sf-sug__estado {
    padding: 12px 14px;
    color: #999;
    font-size: .82rem;
}

.sf-sug__todos {
    display: block;
    padding: 11px 14px;
    background: #f6f6f6;
    color: #000;
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}
.sf-sug__todos:hover { background: #000; color: #fff; }

.sf-nav__search { position: relative; }

/* Cuenta y carrito viven en el segundo piso, a la derecha, enfrentados a las categorías:
   ahí sobraba lugar y el primer piso queda para buscar, que es como se compra un repuesto. */
.sf-nav__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    padding-left: 24px;
}
.sf-nav__bar-row .sf-nav__action {
    font-size: .82rem;
}

.sf-nav__action {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.sf-nav__action:hover { color: #000; }
.sf-nav__action i { font-size: .95rem; }

.sf-nav__count {
    background: #000;
    color: #fff;
    border-radius: 0;
    padding: 1px 6px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5;
}

/* ---------- Piso 2 ---------- */

.sf-nav__bar {
    position: relative;
}
/* Sin aire abajo: esos 6px dejaban una costura blanca entre la barra y lo que sigue
   (el banner arranca pegado, como en cualquier tienda). */
.sf-nav__bar-row {
    display: flex;
    align-items: stretch;
    min-height: 40px;
    gap: 0;
}

.sf-nav__cats {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: none;
    color: #111;
    border: 0;
    padding: 0;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
}
.sf-nav__cats:hover,
.sf-nav__cats[aria-expanded="true"] {
    color: #000;
}
.sf-nav__cats i.fa-chevron-down {
    font-size: .62rem;
    opacity: .7;
    transition: transform .18s;
}
.sf-nav__cats[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); }

.sf-nav__links {
    display: flex;
    align-items: center;
    gap: 26px;
    padding-left: 26px;
}
.sf-nav__links a {
    color: #555;
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    white-space: nowrap;
}
.sf-nav__links a:hover { color: #000; }

.sf-nav__note {
    margin-left: auto;
    color: #999;
    font-size: .82rem;
    white-space: nowrap;
    padding-left: 20px;
}

/* ---------- Panel de categorías ---------- */

.sf-nav__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, .35);
    display: none;
    z-index: 1040;
}
.sf-nav__panel.is-open { display: block; }

.sf-nav__panel-grid {
    display: grid;
    grid-template-columns: 230px 1fr;
}

.sf-nav__ejes {
    border-right: 1px solid #eee;
    padding: 16px 0;
}
.sf-nav__eje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 18px;
    border: 0;
    background: none;
    color: #666;
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    cursor: pointer;
    text-align: left;
}
.sf-nav__eje i { font-size: .58rem; opacity: .5; }
.sf-nav__eje:hover { background: #000; color: #fff; }
.sf-nav__eje:hover i { opacity: .8; }
.sf-nav__eje.is-active {
    background: #f6f6f6;
    color: #000;
    font-weight: 700;
}

/* El panel NO scrollea: entra lo que entra. Seis columnas y un tope de filas —
   lo que no entra vive en la página del catálogo, no en un scroll escondido. */
.sf-nav__nodos {
    padding: 16px 18px 18px 26px;
    overflow: hidden;
}
.sf-nav__nodos-grid {
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px 18px;
}
.sf-nav__nodos-grid.is-active { display: grid; }

/* Hover heredado del megamenú viejo de Categorías: relleno negro y texto blanco.
   Es el gesto que el cliente ya tenía y reconoce. */
.sf-nav__nodo {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 -8px;
    padding: 5px 8px;
    color: #3c3c3c;
    text-decoration: none;
    font-size: .82rem;
}
.sf-nav__nodo:hover,
.sf-nav__nodo:focus-visible {
    background: #000;
    color: #fff;
    text-decoration: none;
    outline: none;
}
.sf-nav__nodo:hover span + span { color: #bbb; }

/* Cuando el eje tiene más nodos de los que entran, esto NO es un nodo más */
.sf-nav__nodo--mas {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    font-weight: 700;
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
    color: #000;
}
.sf-nav__nodo--mas:hover { background: #000; color: #fff; }
/* El gris claro es para el CONTADOR, que va en un segundo span. Con `span:last-child` se lo
   comía el nombre (único span de cada nodo) y toda la lista quedaba ilegible. */
.sf-nav__nodo span + span { color: #bbb; font-variant-numeric: tabular-nums; }

.sf-nav__todos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
    color: #000;
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
}
.sf-nav__todos i { font-size: .68rem; }

/* ---------- Mobile ---------- */

/* Abajo de 992 manda el header mobile que ya existía; los dos pisos se guardan. */
@media (max-width: 991.98px) {
    .sf-nav { display: none; }
}

/* ---------- Panel de categorías del celular ---------- */

/* Mismo modelo que el panel de escritorio: elegís el eje arriba, los nodos abajo.
   Una sola columna: meter la grilla de Bootstrap acá era lo que hacía que los
   nombres se pisaran entre sí dentro de un panel de 380px. */
.sf-cats__head {
    border-bottom: 1px solid #e6e6e6;
    padding: 14px 18px;
}
.sf-cats__head .offcanvas-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #000;
}

.sf-cats__body { padding: 0; }

.sf-cats__ejes {
    display: flex;
    border-bottom: 1px solid #e6e6e6;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}
.sf-cats__eje {
    flex: 1 1 0;
    border: 0;
    background: none;
    padding: 13px 8px;
    color: #666;
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.sf-cats__eje.is-active {
    color: #000;
    border-bottom-color: #000;
}

.sf-cats__lista {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}
.sf-cats__lista.is-active { display: block; }

.sf-cats__lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid #f2f2f2;
    color: #3c3c3c;
    text-decoration: none;
    font-size: .88rem;
}
.sf-cats__lista a:active,
.sf-cats__lista a:hover {
    background: #000;
    color: #fff;
}
.sf-cats__lista i {
    font-size: .62rem;
    opacity: .45;
    flex: 0 0 auto;
}
.sf-cats__lista a:hover i { opacity: .8; }

/* El buscador viaja con el header mobile: misma jerarquía que en escritorio,
   sin robarle alto a la pantalla (una sola fila, pegada al header). */
/* Los íconos del header mobile venían en #555 mientras las acciones de escritorio
   son #333: misma barra, dos grises distintos. Se emparejan. El !important es para
   ganarle al de public-layout.css:329, que ya venía con !important. */
.mobile-header .right-group i { color: #333 !important; }

.sf-mobile-search {
    display: flex;
    position: relative;
    padding: 0 16px 12px;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
}
@media (min-width: 992px) {
    .sf-mobile-search { display: none; }
}
/* En 390px un borde negro de 1.5px se lee como una caja pesada al lado de unos
   íconos livianos: el peso lo lleva el botón, el campo acompaña. */
.sf-mobile-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #ccc;
    border-right: 0;
    border-radius: 0;
    padding: 10px 12px;
    font-size: .88rem;
    color: #333;
    background: #fff;
}
.sf-mobile-search input::placeholder { color: #999; }
.sf-mobile-search input:focus { outline: none; box-shadow: inset 0 0 0 1px #333; }
.sf-mobile-search button {
    flex: 0 0 auto;
    background: #000;
    color: #fff;
    border: 0;
    border-radius: 0;
    padding: 0 18px;
    font-size: .9rem;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .sf-nav__cats i.fa-chevron-down,
    .sf-nav__search button { transition: none; }
}

/* El numerito del carrito arranca escondido si está vacío; updateCartBadge() lo prende con
   style.display, que le gana a esta clase (#1000: antes era un style="" en el .phtml). */
.sf-badge-vacio { display: none; }
.sf-logo-movil { max-height: 40px; }