/* ============================================================
   shopin.city — menu mobile
   Caricato dopo ui7.css.

   Corregge due difetti e rifà il pannello:
   1. la freccia del menu città non aveva vincoli di dimensione
      né `fill: none`, quindi diventava un triangolo nero enorme;
   2. la regola del testo bianco della barra blu colpiva anche
      il pannello a scomparsa, che è bianco: voci invisibili.
   ============================================================ */

/* ----------------------------------------------------------
   22. Freccia del menu città
   ---------------------------------------------------------- */

.city-menu-caret {
    flex: none;
    width: 11px;
    height: 7px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s var(--ease);
}

.city-menu-toggle[aria-expanded="true"] .city-menu-caret {
    transform: rotate(180deg);
}

/* ----------------------------------------------------------
   23. Pannello a scomparsa: fondo bianco, testo scuro
   ---------------------------------------------------------- */

@media (max-width: 899px) {

    .site-header .main-nav {
        background: var(--bg);
        padding: 6px 0 28px;
        box-shadow: 0 24px 48px rgba(6, 8, 12, .16);
    }

    /* Le voci tornano leggibili: qui il fondo non è più blu. */
    .site-header .main-nav .nav-link,
    .site-header .main-nav .city-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 15px 20px;
        border-radius: 0;
        background: transparent;
        color: var(--ink);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        box-shadow: none;
    }

    .site-header .main-nav .nav-link:hover,
    .site-header .main-nav .nav-link:focus-visible,
    .site-header .main-nav .city-menu-toggle:hover {
        background: var(--bg-soft);
        color: var(--night);
    }

    .site-header .main-nav .nav-link.is-active {
        color: var(--night);
        background: transparent;
        box-shadow: inset 3px 0 0 var(--blue);
    }

    .site-header .main-nav .nav-list > li + li {
        border-top: 1px solid var(--line);
    }

    /* "OFFERTE" resta la voce che stacca, ma dentro la riga. */
    .site-header .main-nav .nav-link.nav-link-hot {
        color: var(--danger);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        font-weight: 800;
    }

    .site-header .main-nav .nav-link.nav-link-hot::after {
        content: "→";
        color: var(--danger);
    }

    /* Elenco città: rientrato, discreto, senza pannello flottante. */
    .main-nav .city-menu-panel {
        position: static;
        width: auto;
        max-height: none;
        padding: 2px 0 10px;
        border: 0;
        border-radius: 0;
        background: var(--bg-soft);
        box-shadow: none;
    }

    .main-nav .city-menu-panel .city-menu-region {
        padding: 10px 20px 4px;
        margin: 0;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .main-nav .city-menu-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-nav .city-menu-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 20px 11px 28px;
        color: var(--ink);
        font-size: .94rem;
        text-decoration: none;
    }

    .main-nav .city-menu-link:hover { background: var(--bg); color: var(--night); }
    .main-nav .city-menu-link span:last-child { color: var(--muted); font-size: .76rem; }

    .main-nav .city-menu-footer {
        padding: 10px 20px 2px;
    }

    .main-nav .city-menu-footer a {
        font-size: .84rem;
        font-weight: 700;
        color: var(--night);
    }

    /* Bottoni in fondo al menu. */
    .site-header .main-nav .nav-mobile-actions {
        padding: 18px 20px 0;
        gap: 10px;
    }

    .site-header .main-nav .nav-divider { display: none; }

    /* ------------------------------------------------------
       24. La striscia blu su telefono
       Resta blu con le scritte bianche, ma leggibile: voci più
       distanziate, niente maiuscoletto stretto, e una sfumatura
       ai bordi che dice "si scorre".
       ------------------------------------------------------ */

    .hdr-rail {
        position: relative;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
    }

    .site-header .hdr-rail .nav-link {
        padding: 12px 12px;
        font-size: .82rem;
        font-weight: 700;
        letter-spacing: .02em;
        white-space: nowrap;
        color: rgba(255, 255, 255, .94);
    }

    .site-header .hdr-rail .nav-link.is-active {
        color: #fff;
        box-shadow: inset 0 -3px 0 #fff;
    }
}