body {
    padding-top: 0;
}

/* Mobile + Tablet: stile identico, unificato fino a 899px */
@media (max-width: 899px) {
    /* html = contenitore scroll (altezza fissa); body può crescere.
       lvh e non dvh: su iOS Safari la barra inferiore si ritrae mentre scorri e
       dvh la insegue, quindi il box di scroll cambia altezza ad ogni frame
       dell'animazione e tutta la pagina si rilegge sotto il dito. lvh è il
       viewport grande, costante: il layout non si muove. 100vh come fallback
       vale già lvh su iOS. */
    html {
        height: 100vh !important;
        height: 100lvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        /* Blocca overscroll/bounce quando in cima: evita tremolio su Chrome/Android */
        overscroll-behavior-y: none !important;
    }
    body {
        min-height: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    body { padding-top: 0; }

    .menu-hero {
        min-height: 100svh;
    }

    body:not(.footer-visible):not(.ai-response-active) {
        padding-bottom: 0 !important;
    }

    .container {
        display: block;
        padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: 14px;
        padding-right: 14px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important;
    }

    #menu-dashboard {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 0 !important;
    }

    #menu-container.container {
        width: 100%;
        max-width: 100%;
    }

    /* Carousel piatti consigliati: solo desktop/tablet largo (su mobile è poco chiaro) */
    .recommended-section {
        display: none !important;
    }

    /* Contenuti categorie: sempre allineati a sinistra su mobile */
    .category-title,
    .recommended-section,
    .recommended-header,
    .recommended-title {
        justify-content: flex-start;
        text-align: left !important;
    }
    .product-card,
    .product-card .card-content,
    .product-card .product-info,
    .product-card h3,
    .product-card .product-description,
    .product-card .product-price {
        text-align: left !important;
    }
    .card-badges {
        justify-content: flex-start;
    }

    /* Header: dimensioni mobile leggermente ingrandite */
    .menu-header {
        padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
        padding-right: calc(1.2rem + env(safe-area-inset-right, 0px));
        padding-bottom: 0.9rem;
        padding-left: calc(1.2rem + env(safe-area-inset-left, 0px));
        gap: 0.7rem;
    }
    .menu-header h1 {
        font-size: 1.55rem;
    }
    .menu-header .logo-wrapper {
        width: 48px;
        height: 48px;
    }
    .menu-header.shrunk .logo-wrapper {
        width: 42px;
        height: 42px;
    }
    .header-category-pill {
        padding: 8px 15px;
        font-size: 0.86rem;
    }

    /* Splash mobile: centratura ottica logo (5-8% più in alto per bilanciare SCOPRI) */
    .menu-hero-logo-ring {
        transform: translateY(-6%);
    }

    /* Splash disattivata da admin: niente hero, header subito visibile (senza attendere JS) */
    body.no-menu-hero .menu-hero {
        display: none !important;
    }
    body.no-menu-hero .menu-header,
    body.no-menu-hero .menu-header.header-in-splash {
        transform: translateY(0) translateZ(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    /* Accessibilità in header (non flottante sui piatti) */
    body.no-menu-hero .header-title-block {
        padding-right: 2.75rem;
    }
    body.no-menu-hero .header-main {
        padding-right: 0.35rem;
    }
    /* Senza schermata di apertura il bottone accessibilità va in basso a destra,
       impilato SOPRA la bacchetta della chat (come su desktop), invece che in
       alto a destra. Stile allineato alla chat: cerchio card-bg + icona accent. */
    body.no-menu-hero .accessibility-btn-desktop {
        display: flex !important;
        position: fixed;
        top: auto;
        left: auto;
        right: 22px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
        transform: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--text-main) 12%, transparent);
        background: color-mix(in srgb, var(--card-bg) 75%, transparent);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        color: var(--accent-color);
        align-items: center;
        justify-content: center;
        z-index: 10001;
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        opacity: 1;
    }
    body.no-menu-hero .accessibility-btn-desktop svg {
        width: 20px;
        height: 20px;
        filter: none;
        stroke-width: 1.75;
    }
    body.no-menu-hero.ai-bar-open .accessibility-btn-desktop {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* Drawer prodotto aperto: nascondi il bottone accessibilità (ora è in basso
       a destra e si sovrapporrebbe al bottom sheet). Specificità alta apposta
       per battere la regola no-hero { opacity: 1 } qui sopra. */
    body.no-menu-hero.product-detail-open .accessibility-btn-desktop {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* Chat + accessibilità impilati in basso: spazio extra così non coprono
       l'ultima card quando si scrolla in fondo. */
    body.no-menu-hero #menu-container {
        padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Splash mobile: SCOPRI - area touch 48px, freccia destra, pulse */
    .menu-hero-scroll-hint {
        min-height: 48px;
        padding: 12px 24px;
        gap: 0.5rem;
    }
    .menu-hero-scroll-hint .menu-hero-scroll-arrow {
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-color) 50%, transparent));
    }

    /* Accessibilità: stile mobile */
    .accessibility-btn {
        width: 38px;
        height: 38px;
    }
    .accessibility-btn svg {
        width: 20px;
        height: 20px;
    }

    .menu-hero .accessibility-btn {
        position: fixed;
        right: 18px;
        bottom: calc(82px + env(safe-area-inset-bottom, 0px));
        width: 52px;
        height: 52px;
        z-index: 9999;
    }
    .menu-hero .accessibility-btn svg {
        width: 30px;
        height: 30px;
    }
    body.splash-locked .menu-hero .accessibility-btn {
        display: none;
    }

    /* Bottone assistenza vocale: solo in hero su mobile, nascondi quello in header */
    .accessibility-btn-desktop {
        display: none !important;
    }

    /* Prima categoria mobile: più respiro sotto l'header fisso */
    .category-title:first-of-type {
        margin-top: 52px;
    }

    /* Card: 1 per riga, margini mobile. Layout badge/prezzo come desktop */
    .product-card {
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin-bottom: 18px;
    }
    .product-card .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .product-card .card-badges {
        margin-top: auto;
    }
}

/* Tablet/iPad: unica differenza = 2 card per riga, header e categorie più grandi */
@media (min-width: 601px) and (max-width: 899px) {
    /* Splash: SCOPRI più in alto, non troppo vicino al bordo */
    .menu-hero-scroll-hint {
        bottom: 4.5rem;
    }
    /* Header più grande */
    .menu-header {
        padding-top: calc(1.1rem + env(safe-area-inset-top, 0px));
        padding-right: calc(1.3rem + env(safe-area-inset-right, 0px));
        padding-bottom: 0.85rem;
        padding-left: calc(1.3rem + env(safe-area-inset-left, 0px));
    }
    .menu-header h1 {
        font-size: 1.8rem;
    }
    .menu-header .logo-wrapper {
        width: 54px;
        height: 54px;
    }
    .menu-header.shrunk h1 {
        font-size: 1.55rem;
    }
    .menu-header.shrunk .logo-wrapper {
        width: 46px;
        height: 46px;
    }
    /* Categorie (pill) più grandi */
    .category-title {
        font-size: 1.5rem;
        margin: 44px 0 18px 0;
    }
    .category-title::before {
        width: 4px;
        height: 1.2em;
    }
    .category-title:first-of-type {
        margin-top: 64px;
        margin-bottom: 18px;
    }
    .container {
        max-width: 880px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 24px;
        align-items: stretch;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: 0;
    }
    .container .category-title,
    .container .recommended-section {
        flex-basis: 100%;
        width: 100%;
    }
    .product-card {
        flex: 0 0 calc(50% - 12px);
        width: calc(50% - 12px);
        min-width: 0;
        max-width: none;
        margin-bottom: 0;
    }
}

/* Desktop: nasconde hero, mostra menu e header subito. Scroll solo in #scroll-viewport (sotto l'header) */
@media (min-width: 900px) {
    /* svh: la shell non scrolla (overflow hidden), quindi deve stare dentro il
       viewport più piccolo, altrimenti su iPad la barra di Safari le taglia il
       fondo. Su desktop svh, lvh e vh coincidono. */
    html {
        height: 100svh !important;
        overflow: hidden !important;
    }
    body {
        min-height: 100% !important;
        overflow: hidden !important;
        padding-top: 0 !important;
    }

    /* scroll-viewport: area scrollabile sotto l'header (su desktop l'header non rimpicciolisce) */
    #scroll-viewport {
        position: fixed;
        top: var(--header-height, 100px);
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .menu-hero {
        display: none;
    }

    /* #menu-container padding-top: impostato da JS (40px da fine header) */

    .ai-search-container {
        background: color-mix(in srgb, var(--card-bg) 85%, var(--header-bg) 15%);
    }

    .safe-area-bg { display: none; }
    .safari-tint-top { display: none; }

    .menu-header {
        padding: 1rem 1.25rem;
    }
    .menu-header h1 { font-size: 1.75rem; }
    .menu-header .logo-wrapper {
        width: 52px;
        height: 52px;
    }
    .menu-header.shrunk {
        padding: 0.65rem 1.25rem !important;
    }
    .menu-header.shrunk h1 {
        font-size: 1.5rem;
    }
    .menu-header.shrunk .logo-wrapper {
        width: 44px;
        height: 44px;
    }
    /* Categorie più grandi; margin-top ridotto per meno distanza da header */
    .category-title {
        font-size: 1.4rem;
        margin: 24px 0 16px 0;
    }
    .category-title::before {
        width: 4px;
        height: 1.2em;
    }
    /* Prima categoria desktop: meno distanza da header */
    .category-title:first-of-type {
        margin-top: 20px;
        scroll-margin-top: 48px;
    }

    .container {
        max-width: 1400px;
        width: 100%;
        padding: 20px 24px calc(48px + env(safe-area-inset-bottom, 0px)) 24px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 28px;
        /* Pari altezza per riga (griglia ordinata), ma il contenuto delle card
           resta raggruppato in alto (vedi .product-card sotto): le card corte
           NON hanno il vuoto in mezzo, lo spazio extra resta in fondo. */
        align-items: stretch;
        justify-content: flex-start;
    }
    .container .category-title,
    .container .recommended-section {
        flex-basis: 100%;
        width: 100%;
    }
    /* Footer: su desktop è dentro #scroll-viewport (già a tutta larghezza); i
       margini negativi del "breakout" mobile lo sballano su un lato rispetto
       alla scrollbar. Azzerati qui: riempie esattamente la larghezza. */
    .menu-footer {
        margin-left: 0;
        margin-right: 0;
    }
    .product-card {
        flex: 1 1 calc(33.333% - 19px);
        min-width: 280px;
        max-width: 480px;
        margin-bottom: 0;
    }
    /* Badge allineati in basso: posizione uniforme tra le card della stessa riga */
    .product-card .product-info {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .product-card .card-badges {
        margin-top: auto;
    }
    /* Le card senza descrizione seguono le stesse regole delle altre: product-info
       cresce e prezzo/badge si ancorano in basso. Così, stirandosi all'altezza
       della riga (align-items: stretch), restano allineate alle vicine invece di
       apparire più basse (era la causa del layout sfalsato su desktop). */
}

/* Desktop stretto (900–1199px): 2 card per riga per evitare schiacciamento */
@media (min-width: 900px) and (max-width: 1199px) {
    .container {
        max-width: 880px;
    }
    .product-card {
        flex: 0 0 calc(50% - 14px);
        width: calc(50% - 14px);
        min-width: 0;
        max-width: none;
    }
}

/* Hover card: gestito in cards.css (translateY + box-shadow unificato mobile/desktop) */