/* ============================================================
   shopin.city — header e ottimizzazioni per telefono
   Caricato dopo dark.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. Hamburger a due linee, apertura "a punta"
   Due tratti di lunghezza diversa suggeriscono già una diagonale
   invece di un blocco squadrato. All'apertura ruotano di 45° in
   versi opposti e si incrociano: una punta netta, non una X molle.
   ------------------------------------------------------------ */

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    order: 9;
}

.nav-toggle-bars {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 24px;
    height: 14px;
    justify-content: center;
}

.nav-toggle-bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: right center;
    transition: transform .18s var(--ease), width .18s var(--ease), opacity .18s var(--ease);
}

/* La linea sopra è piena, quella sotto rientra: taglio obliquo. */
.nav-toggle-bar:nth-child(1) { width: 24px; }
.nav-toggle-bar:nth-child(2) { width: 15px; }

.nav-toggle:hover .nav-toggle-bar:nth-child(2) { width: 24px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    width: 24px;
    transform: translateY(4px) rotate(-45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    width: 24px;
    transform: translateY(-4px) rotate(45deg);
}

/* ------------------------------------------------------------
   2. Riga 1 su telefono
   Logo a sinistra; a destra, sempre visibili: negozi, account,
   carrello e per ultimo l'hamburger, dove arriva il pollice.
   ------------------------------------------------------------ */

@media (max-width: 899px) {

    .hdr-top-inner {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "brand act"
            "search search";
        column-gap: 8px;
    }

    .hdr-top-inner > .hdr-left { grid-area: brand; justify-self: start; }
    .hdr-top-inner > .header-actions { grid-area: act; justify-self: end; }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* Il richiamo per i negozianti resta, ma ridotto all'osso. */
    .hdr-cta {
        display: inline-flex;
        gap: 6px;
        padding: 7px 10px;
        box-shadow: none;
    }

    .hdr-cta-spark { width: 22px; height: 22px; }
    .hdr-cta-spark svg { width: 13px; height: 13px; }
    .hdr-cta-text strong { font-size: .72rem; }
    .hdr-cta-text span { display: none; }

    /* Su schermi molto stretti resta la sola saetta. */
    @media (max-width: 400px) {
        .hdr-cta { padding: 7px; }
        .hdr-cta-text { display: none; }
    }

    .hdr-act {
        min-width: 44px;
        min-height: 44px;
        padding: 4px 2px;
    }

    .hdr-act-label {
        font-size: .58rem;
        letter-spacing: .01em;
    }

    .brand-logo { height: 38px; }
}

/* ------------------------------------------------------------
   3. Bersagli toccabili
   Nessun comando sotto i 44px: è la misura di un polpastrello.
   ------------------------------------------------------------ */

@media (max-width: 899px) {
    .filter-chip { min-height: 44px; padding-left: 14px; padding-right: 14px; }
    .card-size { min-width: 44px; min-height: 44px; }
    .qty-stepper button { min-width: 44px; min-height: 44px; }
    .wish-btn { width: 40px; height: 40px; }
    .rail-btn { display: none !important; }
    .city-menu-link,
    .main-nav .nav-link { min-height: 48px; }
}

/* ------------------------------------------------------------
   4. Niente zoom automatico sui campi
   Sotto i 16px iOS ingrandisce la pagina al primo tocco e non
   torna più indietro: è il difetto mobile più fastidioso.
   ------------------------------------------------------------ */

@media (max-width: 899px) {
    input,
    select,
    textarea,
    .hdr-search-input {
        font-size: 16px;
    }
}

/* ------------------------------------------------------------
   5. Stabilità del layout e scorrimento
   ------------------------------------------------------------ */

html, body { max-width: 100%; overflow-x: hidden; }

img { max-width: 100%; }

/* Le sezioni sotto la piega non vengono disegnate finché non
   servono: lo scorrimento resta fluido anche con molte foto. */
@media (max-width: 899px) {
    .shops-showcase,
    .cat-section,
    .section {
        content-visibility: auto;
        contain-intrinsic-size: 640px;
    }

    /* Il catalogo no: è il contenuto principale e deve essere
       misurabile subito per i motori di ricerca. */
    #catalog {
        content-visibility: visible;
    }
}

/* ------------------------------------------------------------
   6. Aree sicure (notch e barra gesti)
   ------------------------------------------------------------ */

.chat-fab,
.chat-launcher,
[data-chat-toggle] {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.site-footer {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ------------------------------------------------------------
   7. Densità dei testi sulla card a due colonne
   ------------------------------------------------------------ */

@media (max-width: 460px) {
    .product-card-name,
    .product-card-title {
        font-size: .84rem;
        line-height: 1.25;
    }

    .product-card-brand { font-size: .62rem; }
    .product-card-shop { font-size: .68rem; }
    .price-now { font-size: .92rem; }
    .price-old { font-size: .76rem; }
    .card-add { font-size: .68rem; min-height: 42px; }
}