/* ========================================
   LAYOUT TELEFONO (sotto i 768px)
   Tutto sta dentro la media query: da 768px in su nulla di questo file si applica.
   Header + barra di navigazione valgono per le pagine su layouts.master,
   il resto per la home (partials/home-mobile).
   ======================================== */
@media (max-width: 767.98px) {
    .header,
    .home-search,
    .m-home,
    .m-bottom-nav,
    .m-bottom-nav-spacer {
        --m-ink: #0E1A3A;
        --m-muted: #46506A;
        --m-surface: #F3F5FA;
        --m-border: #E6EAF2;
        --m-border-strong: #D5DBE8;
        --m-primary: #0A6CFF;
        --m-annuncio: #0A6CFF;
        --m-asta: #08827A;
        --m-super: #6A4FE0;
        --m-super-ink: #5537C9;
        --m-super-soft: #F5F2FF;
        --m-super-tint: #E6DFFF;
        --m-urgent: #B4232F;
        --m-gutter: 16px;
        --m-nav-height: 64px;
    }

    /* ---------- Header ---------- */
    .header {
        box-shadow: none;
        border-bottom: 1px solid var(--m-border);
    }

    .header__content {
        padding: 8px var(--m-gutter) !important;
    }

    .header__logo img {
        width: 104px !important;
        max-width: 104px !important;
    }

    /* Si accede dalla barra in basso, ci si registra dalla pagina di login */
    .header__action--profile a[href="/login"],
    .header__action--profile a[href="/register"] {
        display: none !important;
    }

    /* La barra in basso sostituisce il pulsante "torna su" */
    .scrollToTop {
        display: none !important;
    }

    /* ---------- Barra di navigazione inferiore ---------- */
    .m-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: calc(var(--m-nav-height) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        border-top: 1px solid var(--m-border);
    }

    .m-bottom-nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--m-muted);
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
    }

    .m-bottom-nav a[aria-current="page"] {
        color: var(--m-primary);
        font-weight: 800;
    }

    .m-bottom-nav-spacer {
        height: calc(var(--m-nav-height) + env(safe-area-inset-bottom));
    }

    /* ---------- Ricerca in home ---------- */
    .container.home-search {
        margin-top: 12px !important;
        margin-bottom: 0 !important;
        padding-inline: var(--m-gutter);
    }

    .home-search > .row {
        margin: 0;
    }

    .home-search form.header__search {
        display: block !important;
        padding: 0 !important;
        position: relative !important;
    }

    .home-search form.header__search > .col-11 {
        width: 100%;
    }

    .home-search form.header__search > .col-11 > .row {
        margin: 0;
    }

    .home-search form.header__search .col-12.col-sm-4.mb-2:first-child {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .home-search form.header__search .search-container {
        height: 46px;
        min-height: 46px;
        padding: 0 48px 0 14px !important;
        background: var(--m-surface);
        border: 0;
        border-radius: 12px !important;
        color: var(--m-ink);
    }

    .home-search form.header__search > .col-1 {
        position: absolute;
        top: 14px; /* il campo è spostato in basso dai gutter delle .row */
        right: 0;
        width: 46px;
    }

    .home-search form.header__search > .col-1 > .row,
    .home-search form.header__search > .col-1 > .row > div {
        margin: 0;
        padding: 0;
        width: 46px;
    }

    .home-search form.header__search .btn-round-search-home {
        position: static !important;
        width: 46px;
        height: 46px;
        padding: 0;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        box-shadow: none;
        color: var(--m-muted);
    }

    .home-search form.header__search .btn-round-search-home svg {
        fill: var(--m-muted);
    }

    /* Banner in home: il testo non deve arrivare ai bordi */
    .container.pt-mobile .jumbotron.banner-home {
        padding: 1.25rem 1rem !important;
    }

    .banner-home-servizi > .d-flex {
        align-items: stretch !important;
    }

    .banner-home-servizi > .d-flex > div {
        min-width: 0;
    }

    .banner-home-servizi .btn-banner-servizi {
        padding-inline: 0.75rem;
        white-space: normal;
    }

    /* ---------- Home ---------- */
    .m-home {
        color: var(--m-ink);
    }

    .m-home a {
        text-decoration: none;
    }

    .m-chips {
        display: flex;
        gap: 8px;
        padding: 10px var(--m-gutter) 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .m-chips--wrap {
        flex-wrap: wrap;
        padding: 0;
    }

    .m-home-categories {
        padding: 24px 0 8px;
    }

    .m-home-categories .m-section__head {
        padding: 0;
    }

    .m-chips::-webkit-scrollbar,
    .m-rail::-webkit-scrollbar {
        display: none;
    }

    .m-home .m-chip {
        flex: none;
        display: flex;
        align-items: center;
        height: 36px;
        padding: 0 14px;
        border: 1.5px solid var(--m-border-strong);
        border-radius: 18px;
        color: var(--m-ink);
        font-size: 13.5px;
        font-weight: 700;
    }

    .m-home .m-chip[aria-current="page"] {
        background: var(--m-ink);
        border-color: var(--m-ink);
        color: #fff;
    }

    .m-explain {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 12px var(--m-gutter) 0;
        padding: 10px 12px;
        border-radius: 12px;
        background: var(--m-super-soft);
        color: #3A2F73;
        font-size: 13px;
        line-height: 1.4;
    }

    .m-explain svg {
        flex: none;
    }

    .m-explain span {
        flex: 1;
    }

    .m-home .m-explain a {
        padding: 10px 0;
        color: var(--m-super-ink);
        font-weight: 700;
        white-space: nowrap;
    }

    .m-section {
        padding: 18px 0 4px;
    }

    .m-section__head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 10px;
        padding: 0 var(--m-gutter);
    }

    .m-home .m-section__head h2 {
        margin: 0;
        color: var(--m-ink);
        font-size: 19px;
        font-weight: 800;
    }

    .m-home .m-section__head a {
        padding: 10px 0;
        color: var(--m-primary);
        font-size: 14px;
        font-weight: 700;
    }

    /* Scorrimento orizzontale */
    .m-rail {
        display: flex;
        gap: 10px;
        padding: 0 var(--m-gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--m-gutter);
        scrollbar-width: none;
    }

    .m-home .m-rail-card {
        flex: none;
        display: flex;
        gap: 10px;
        width: 220px;
        padding: 8px;
        border: 1.5px solid var(--m-border);
        border-radius: 14px;
        color: var(--m-ink);
        scroll-snap-align: start;
    }

    .m-rail-card img {
        flex: none;
        width: 72px;
        height: 72px;
        border-radius: 10px;
        background: var(--m-border);
        object-fit: cover;
    }

    .m-rail-card__body {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .m-rail-card__title,
    .m-card__title {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .m-rail-card__title {
        font-size: 13px;
    }

    .m-rail-card__price {
        font-size: 15px;
        font-weight: 800;
    }

    .m-rail-card__time {
        color: var(--m-muted);
        font-size: 12px;
        font-weight: 700;
    }

    .m-rail-card__time--urgent {
        color: var(--m-urgent);
    }

    /* Griglia a due colonne */
    .m-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        padding: 0 var(--m-gutter);
    }

    .m-card {
        position: relative;
    }

    .m-home .m-card__link {
        display: flex;
        flex-direction: column;
        gap: 5px;
        color: var(--m-ink);
    }

    .m-card__img {
        position: relative;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 14px;
        background: var(--m-border);
    }

    .m-card__img img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .m-card__title {
        font-size: 13.5px;
    }

    .m-card__price {
        font-size: 16px;
        font-weight: 800;
    }

    .m-card__meta {
        color: var(--m-muted);
        font-size: 12px;
    }

    .m-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 10;
        padding: 3px 7px;
        border-radius: 6px;
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .2px;
    }

    .m-badge--standard { background: var(--m-annuncio); }
    .m-badge--tradizionale { background: var(--m-asta); }
    .m-badge--supertymer { background: var(--m-super); }

    /* Area di tocco 44px attorno al cuore da 32px */
    .m-fav {
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 11;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        background: none;
    }

    .m-fav .heart_pieno,
    .m-fav .heart_vuoto {
        display: block;
    }

    .m-fav > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background: #fff;
    }

    /* Card esplicativa SuperTymer */
    .m-promo {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 16px var(--m-gutter);
        padding: 16px;
        border-radius: 16px;
        background: var(--m-super);
        color: #fff;
    }

    .m-promo__kicker {
        color: var(--m-super-tint);
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .m-promo__title {
        font-size: 18px;
        font-weight: 800;
        line-height: 1.25;
    }

    .m-promo__text {
        color: #EDE8FF;
        font-size: 13.5px;
        line-height: 1.45;
    }

    .m-home .m-promo a {
        align-self: flex-start;
        display: flex;
        align-items: center;
        height: 44px;
        margin-top: 4px;
        padding: 0 16px;
        border-radius: 12px;
        background: #fff;
        color: var(--m-super-ink);
        font-size: 14px;
        font-weight: 800;
    }
}