/* Splash (hero): sfondo originale invariato */
/* Niente -webkit-fill-available: è il vecchio trucco iOS e vale il viewport
   piccolo (barra di Safari estesa), quindi litiga con le altezze in lvh e
   cambia mentre la barra si ritrae. */
html {
    background-color: var(--bg-body);
    min-height: 100%;
    width: 100vw;
}
body {
    background-color: transparent;
    background-attachment: fixed;
    min-height: 100%;
    width: 100vw;
    position: relative;
}

/* Soluzione nucleare iOS: solo in menu (splash-locked) per fix safe-area */
/* Sfondo menu = splash (--bg-body) per continuità visiva */
html.splash-locked, body.splash-locked {
    background-color: var(--bg-body) !important;
    overscroll-behavior-y: none;
}

/* Safari 26: elemento fixed in cima, visibile solo quando header è in splash (nascosto) */
@media (max-width: 899px) {
    .safari-tint-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background-color: var(--bg-body);
        z-index: 999;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    /* Nasconde la tint quando l'header è visibile (sempre fisso tranne in splash) */
    body:has(.menu-header:not(.header-in-splash)) .safari-tint-top {
        opacity: 0;
        pointer-events: none;
    }
}

/* Layer fisso in basso: solo mobile, gradiente morbido per safe area.
   background-color per Safari iOS che campiona gli elementi fixed per la tint. */
@media (max-width: 899px) {
    .safe-area-bg {
        display: none;
    }

    /* Quando il popup prodotto è aperto: mostra safe-area per colore del foglio */
    body.product-detail-open .safe-area-bg {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(24px + env(safe-area-inset-bottom, 0px));
        background-color: var(--card-bg);
        background-image: none;
        z-index: 9997;
        pointer-events: none;
    }

    /* Solo a fine scroll: safe-area omogenea con il footer.
       È una barra opaca sopra la pagina: se comparisse già quando il footer
       si affaccia, coprirebbe il testo che le scorre sotto (indirizzo e
       telefono tagliati a metà da un rettangolo pieno). */
    body.footer-end .safe-area-bg {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        background-color: color-mix(in srgb, var(--header-bg) 85%, #000000 15%);
        background-image: none;
        z-index: 9997;
        pointer-events: none;
    }
}

/* Sfondo pagina: solo colore solido (no gradient per evitare ricalcoli durante scroll e gap sub-pixel Safari) */
.page-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: var(--bg-body);
}