/**
 * Le frecce che invitano a scorrere, sulle nuvole della hero.
 *
 * Un disco nel verde del sito, con dentro tre punte d'oro che si accendono
 * a cascata verso il basso: la direzione la dice il movimento, non solo la
 * forma. Sta al centro, sopra la fascia delle nuvole, che è chiara: il disco
 * verde si stacca lì e anche dove sotto passa l'arcobaleno.
 *
 * La hero (.klb-banner.for-slider) è già `position: relative` e
 * `overflow: hidden`: è il riquadro giusto a cui ancorarsi. La distanza dal
 * fondo la regola il JS, perché sul desktop la hero sporge sotto la finestra.
 */

.klb-banner.for-slider .usm-scendi {
    position: absolute;
    left: 50%;
    bottom: 54px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    transform: translateX(-50%);
    background: var(--usm-green, #213e25);
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(33, 62, 37, .4);
    text-decoration: none;
    cursor: pointer;
    transition: opacity .35s ease, transform .35s ease, background .2s ease;
}

.klb-banner.for-slider .usm-scendi:hover,
.klb-banner.for-slider .usm-scendi:focus-visible {
    background: var(--usm-green-dark, #172c1a);
    outline: none;
}

.klb-banner.for-slider .usm-scendi:focus-visible {
    border-color: var(--usm-gold, #EBBD17);
}

/* Ogni punta è un quadrato ruotato di cui si vedono due lati, in oro. */
.usm-scendi__freccia {
    display: block;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-right: 3px solid var(--usm-gold, #EBBD17);
    border-bottom: 3px solid var(--usm-gold, #EBBD17);
    border-radius: 2px;
    transform: rotate(45deg);
    opacity: .35;
    animation: usm-scendi-cascata 1.9s ease-in-out infinite;
}

/* Le tre punte insieme sono alte poco più di una: si centrano nel disco. */
.usm-scendi__freccia:nth-child(1) { animation-delay: 0s;   margin-top: -2px; }
.usm-scendi__freccia:nth-child(2) { animation-delay: .22s; }
.usm-scendi__freccia:nth-child(3) { animation-delay: .44s; }

/*
 * Ogni punta si accende scendendo di poco e si spegne: con i ritardi a
 * scalare, l'occhio legge un'onda che va verso il basso. Il resto del ciclo
 * le punte restano accese a metà: il disco non è mai vuoto, e il gesto si
 * nota senza diventare un lampeggio.
 */
@keyframes usm-scendi-cascata {
    0%        { opacity: .35; transform: rotate(45deg) translate(-2px, -2px); }
    35%       { opacity: 1;   transform: rotate(45deg) translate(0, 0); }
    70%, 100% { opacity: .35; transform: rotate(45deg) translate(2px, 2px); }
}

/* Scorso un poco, sparisce: ha già detto quello che doveva. */
.klb-banner.for-slider .usm-scendi--nascosta {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    pointer-events: none;
}

/* Sul telefono la hero è più bassa e le nuvole iniziano più in alto. */
@media (max-width: 767.98px) {
    .klb-banner.for-slider .usm-scendi {
        bottom: 30px;
        width: 50px;
        height: 50px;
    }

    .usm-scendi__freccia {
        width: 12px;
        height: 12px;
        margin-top: -6px;
    }
}

/* Chi ha chiesto meno animazioni vede tre punte ferme, tutte accese. */
@media (prefers-reduced-motion: reduce) {
    .usm-scendi__freccia {
        animation: none;
        opacity: 1;
    }

    .usm-scendi__freccia:nth-child(2) { opacity: .7; }
    .usm-scendi__freccia:nth-child(3) { opacity: .45; }
}

/* =============================================================
   La hero alta quanto la sua immagine, e gli spazi della home
   =============================================================
   Il widget dello slider fissa la hero a 900px sul desktop, ma
   l'illustrazione è più bassa (1600×753, cioè 677px a 1440 di larghezza):
   sotto le nuvole restavano 220px di niente, e poi il margine della sezione
   e il riempimento della successiva — un quarto di schermo vuoto prima dei
   numeri. Qui l'altezza segue le proporzioni dell'immagine. Sul telefono il
   widget la fissa a 550 con l'immagine a riempire: va bene com'è.

   Con una sola diapositiva il puntino della paginazione non ha senso.

   Le altre sezioni della home portano 28px di margine sotto (il tema) più
   riempimenti di 56-64px sopra e sotto (Elementor): sommati, fra un blocco
   e l'altro passavano 90-150px. Qui si stringono. Il selettore ripete la
   classe della sezione per avere la meglio sul CSS generato da Elementor,
   che usa `.elementor-6 .elementor-element.elementor-element-<id>`. */

@media (min-width: 768px) {
    /*
     * Non `aspect-ratio`: il contenitore dello slider è un flex che stira
     * la diapositiva in altezza, e il rapporto finiva per allargare la base
     * invece di abbassare l'altezza. L'altezza si dà esplicita, dalla
     * larghezza dello schermo — la sezione è a tutta larghezza.
     */
    body.home .elementor-element-942116c .klb-banner.for-slider {
        /* Elementor scrive la sua altezza con !important: serve altrettanto. */
        height: calc(100vw * 753 / 1600) !important;
        max-height: 900px !important;
    }
}

body.home .klb-banner.for-slider ~ .slick-dots:has(li:only-child),
body.home .module-slider .slick-dots:has(li:only-child) {
    display: none;
}

/* Lo stacco di 28px fra le tessere lo mette homepage-card.css, ed è voluto:
   qui si stringono solo i riempimenti interni. Le sezioni sono in parte
   .elementor-top-section e in parte contenitori .e-con: il selettore
   vale per entrambi, e ripete .elementor-6 .elementor-element per avere
   la meglio sul CSS generato da Elementor. */

/* I numeri sotto la hero. */
body.home .elementor-6 .elementor-element.elementor-element-70f0c68 { padding-top: 32px; }

/* Il carosello delle categorie. */
body.home .elementor-6 .elementor-element.elementor-element-1c72d5f { padding-bottom: 28px; }

/* Il carosello degli arrivi. */
body.home .elementor-6 .elementor-element.elementor-element-29101d7 { padding-top: 36px; padding-bottom: 28px; }

/* Le recensioni. */
body.home .elementor-6 .elementor-element.elementor-element-38a5658 { padding-top: 32px; padding-bottom: 32px; }

@media (max-width: 767.98px) {
    body.home .elementor-6 .elementor-element.elementor-element-70f0c68 { padding-top: 20px; }
    body.home .elementor-6 .elementor-element.elementor-element-29101d7 { padding-top: 12px; padding-bottom: 0; }
    body.home .elementor-6 .elementor-element.elementor-element-38a5658 { padding-top: 24px; padding-bottom: 24px; }
}

/* ── Fra i numeri e "Collezioni curate": la metà ────────────────
   Erano 134px, così composti: 15 di riempimento della colonna sotto i
   numeri, 28 di stacco fra le tessere, 15 di colonna sopra il titolo e 60
   di riempimento interno del blocco del titolo. Si azzerano le colonne e
   si porta a 20 il riempimento interno: restano ~64. Lo stacco fra le
   tessere non si tocca. */
body.home .elementor-6 .elementor-element.elementor-element-70f0c68 > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-bottom: 0; }
body.home .elementor-6 .elementor-element.elementor-element-eb998ca > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-top: 0; padding-bottom: 0; }
body.home .elementor-6 .elementor-element.elementor-element-eb998ca .text-block { padding-top: 20px !important; }

/* ── Fra il testo sotto "Collezioni curate" e le categorie: la metà ──
   Erano 59: 16 di margine del paragrafo, 15 di colonna, 28 di stacco.
   Restano i 28 dello stacco. */
body.home .elementor-6 .elementor-element.elementor-element-eb998ca .text-block .entry-description p:last-child { margin-bottom: 0; }

/* ── Attorno al blocco appuntamento: grigio, non bianco ──────────
   Gli arrivi e le recensioni hanno il fondo grigio-verde (#eef2ea); fra
   loro e il blocco verde scuro dell'appuntamento restava lo stacco bianco
   delle tessere. Qui la sezione dell'appuntamento prende lo stesso grigio,
   con lo stacco portato dentro come riempimento, e si salda a quella sopra
   e a quella sotto: una sola banda grigia con la card verde nel mezzo. Le
   giunture si squadrano, altrimenti gli angoli arrotondati lascerebbero
   quattro triangolini bianchi. */
body.home .elementor-6 .elementor-element.elementor-element-b2a51ee {
    background: #eef2ea;
    padding: 28px 0;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

body.home .elementor-6 .elementor-element.elementor-element-29101d7 {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.home .elementor-6 .elementor-element.elementor-element-38a5658 {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* La card verde tiene i propri angoli, ora che la sezione non li dà più. */
body.home .elementor-element-b2a51ee .usm-booking {
    border-radius: 20px;
    overflow: hidden;
    /* Sopra respirava meno di sotto (0 contro 2em): il riquadro
       dell'illustrazione sporgeva oltre il bordo e il suo contorno veniva
       tagliato. */
    padding-top: 2em;
}

/* ── I numeri, da telefono: una riga che scorre ─────────────────
   Erano una griglia 2×2. Qui restano in fila come sul desktop, e si scorre
   di lato: si vedono i primi due e mezzo, la barra sotto — sottile e
   verde — dice che ce n'è altri. */
@media (max-width: 767.98px) {
    body.home .elementor-6 .elementor-element.elementor-element-70f0c68 > .elementor-container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        padding: 0 16px 10px;
        scrollbar-width: thin;
        scrollbar-color: var(--usm-green, #213e25) transparent;
    }

    body.home .elementor-6 .elementor-element.elementor-element-70f0c68 > .elementor-container::-webkit-scrollbar { height: 3px; }
    body.home .elementor-6 .elementor-element.elementor-element-70f0c68 > .elementor-container::-webkit-scrollbar-track { background: transparent; }
    body.home .elementor-6 .elementor-element.elementor-element-70f0c68 > .elementor-container::-webkit-scrollbar-thumb {
        background: var(--usm-green, #213e25);
        border-radius: 3px;
    }

    body.home .elementor-6 .elementor-element.elementor-element-70f0c68 > .elementor-container > .elementor-column {
        flex: 0 0 40%;
        width: 40%;
        max-width: none;
        scroll-snap-align: start;
    }
}

/* ── "Vedi tutti i nuovi arrivi", sotto il carosello ────────────── */
.usm-arrivi-tutti {
    display: flex;
    justify-content: center;
    padding: 4px 0 8px;
}

.usm-arrivi-tutti a.usm-arrivi-tutti__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    background: var(--usm-green, #213e25);
    border: 0;
    border-radius: 999px;
    font-family: var(--usm-font-body, 'Work Sans', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background .18s ease, transform .18s ease;
}

.usm-arrivi-tutti a.usm-arrivi-tutti__link:hover,
.usm-arrivi-tutti a.usm-arrivi-tutti__link:focus-visible {
    background: var(--usm-green-dark, #172c1a);
    color: #fff;
    transform: translateY(-1px);
}

.usm-arrivi-tutti a.usm-arrivi-tutti__link .material-symbols-outlined { font-size: 20px; }

/* ── Sotto il testo di "Collezioni curate": 48 → 24 ─────────────
   Al bordo della slide erano 28, ma la card visibile comincia 20px più
   sotto, per due riempimenti da 10px annidati nel carosello (e-con-inner
   e il contenitore della card). Si toglie uno dei due e si dimezza lo
   stacco fra le due tessere, solo in questo punto. */
body.home .elementor-6 .elementor-element.elementor-element-eb998ca { margin-bottom: 10px !important; }
body.home .elementor-6 .elementor-element.elementor-element-1c72d5f .swiper-slide > .elementor-element > .e-con-inner { padding-top: 0; }
body.home .elementor-6 .elementor-element.elementor-element-1c72d5f .elementor-element.elementor-element-d1aa561 { padding-top: 0; }

/* Carosello centrato sugli schermi stretti: slick mette 70px di margine
   per lato (inline, da data-centerpadding) e la card resta in un francobollo.
   Qui 32: la card centrale prende quasi tutto lo schermo, e ai lati se ne
   intravede un pezzo — quanto basta a dire che si scorre. */
@media (max-width: 767.98px) {
    body.home .elementor-element-29101d7 .klb-slider .slick-list {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* ── Fra il blocco appuntamento e "Ci trovate in Via Nazionale" ──
   Erano ~135: i 28 di grigio sotto la card verde, 32 di riempimento della
   sezione recensioni, 15 di colonna e 60 interni al blocco del titolo (lo
   stesso di "Collezioni curate"). Restano i 28 di banda grigia più 20
   interni. */
body.home .elementor-6 .elementor-element.elementor-element-38a5658 { padding-top: 0; }
body.home .elementor-6 .elementor-element.elementor-element-38a5658 > .elementor-container > .elementor-column > .elementor-widget-wrap { padding-top: 0; }
body.home .elementor-6 .elementor-element.elementor-element-38a5658 .text-block { padding-top: 20px !important; }