/* ============================================================
   shopin.city — barra categorie in blu elettrico
   Caricato dopo ui4.css.

   La seconda riga dell'header diventa una fascia sfumata dal
   blu notte al blu elettrico, con le voci in bianco. Serve a
   separare la navigazione merceologica — dove si sceglie cosa
   guardare — dagli strumenti (ricerca, account, carrello) che
   restano sul grigio chiaro della prima riga.
   ============================================================ */

.hdr-nav {
    background: linear-gradient(100deg, var(--night) 0%, #23306E 42%, var(--blue) 100%);
    border-top: 0;
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

.site-header .hdr-nav .nav-link,
.site-header .hdr-rail .nav-link {
    color: rgba(255, 255, 255, .92);
}

.site-header .hdr-nav .nav-link:hover,
.site-header .hdr-rail .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-radius: 8px;
}

/* Voce corrente: sottolineatura bianca netta, niente fondo. */
.site-header .hdr-nav .nav-link.is-active,
.site-header .hdr-rail .nav-link.is-active {
    color: #fff;
    background: transparent;
    box-shadow: inset 0 -2px 0 #fff;
    border-radius: 0;
}

/* Menu città: la voce sta sulla barra, il pannello no. */
.hdr-nav .city-menu-toggle,
.hdr-nav .city-menu-caret {
    color: rgba(255, 255, 255, .92);
}

.hdr-nav .city-menu-toggle:hover {
    color: #fff;
}

.hdr-nav .city-menu-panel {
    color: var(--ink);
    background: #fff;
}

.hdr-nav .city-menu-panel .city-menu-link,
.hdr-nav .city-menu-panel .city-menu-region {
    color: var(--ink);
}

/* "OFFERTE": sul blu il rosso vibra e affatica la vista, quindi
   diventa una pastiglia bianca con il testo blu notte. Stacca
   di più e resta la voce più leggibile della barra. */
/* Nota: deve battere `.site-header .hdr-nav .nav-link`, che qui sopra
   porta il testo a bianco. Serve quindi la stessa profondità di selettore
   più la classe della voce, altrimenti resta bianco su bianco. */
.site-header .hdr-nav .nav-link.nav-link-hot,
.site-header .hdr-nav .nav-link.nav-link-hot:hover,
.site-header .hdr-nav .nav-link.nav-link-hot.is-active,
.site-header .hdr-rail .nav-link.nav-link-hot,
.site-header .hdr-rail .nav-link.nav-link-hot:hover {
    background: #fff;
    color: var(--night);
    box-shadow: 0 2px 10px rgba(6, 8, 12, .18);
    border-radius: 999px;
}

.site-header .hdr-nav .nav-link.nav-link-hot:hover,
.site-header .hdr-rail .nav-link.nav-link-hot:hover {
    filter: none;
    background: #F3F5FF;
    color: var(--night);
}

/* Su telefono la fila che scorre eredita la stessa fascia. */
@media (max-width: 899px) {
    .hdr-rail {
        background: linear-gradient(100deg, var(--night) 0%, #23306E 52%, var(--blue) 100%);
    }
}