.nuslider-container{width:100%;position:relative;}

/* progress bar (fuori dal container) */
.nuslider-progress{
    position:relative;     /* non più absolute */
    width:100%;
    height:4px;
    background:#eee;
    overflow:hidden;
margin-top:24px;
    margin-bottom: 50px;
    }
.nuslider-progress .swiper-pagination-progressbar-fill{
    background:#28bfcc;
    height:100%;
    transform-origin:left center; /* lasciamo a Swiper il fill */
    transition: transform 800ms cubic-bezier(0.25, 1, 0.5, 1);

}
.nuslider-container .swiper-wrapper{
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.ns-title{font-size:18px;margin:8px 0 0;    font-weight: 600;}
.ns-price{display:block;font-weight:600;}
.ns-excerpt{font-size:16px;line-height:25px;margin-top:6px;}
.ns-cat-btn{display:inline-block;margin-top:8px;padding:6px 12px;background:#333;color:#fff;font-size:13px;text-decoration:none;}


/* ——— layout “split” 2⁄3 – 1⁄3 quando columns=1 ——— */
.ns-split{
    display:flex;
    flex-wrap:nowrap;           /* niente a capo */
    align-items:stretch;
}

.ns-split .ns-media{
    flex:2 0 0;                 /* 2/3 dello spazio */
    min-width:0;                /* evita overflow img */
    margin-right:20px;          /* spaziatura fra le due colonne */
}
.ns-split .ns-media img{
    width:100%;
    height:auto;
    display:block;
}

.ns-split .ns-content{
    flex:1 0 0;                 /* 1/3 dello spazio */
    display:flex;
    flex-direction:column;

    align-items:flex-start;     /* <— allinea a sinistra */
    text-align:left;
    min-width:0;                /* per testi lunghi */
}

/* titoli / testo a sinistra solo in layout split */
.ns-split .ns-title,
.ns-split .ns-price,
.ns-split .ns-excerpt{ text-align:left; }

/* bottone */
.ns-btn{
    display: inline-block;
    margin-top: 12px;
    background: #28bfcc;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: all .55s cubic-bezier(0.19,1,0.22,1);
    border-radius: 2px;
    padding: 5px 10px;
}
.ns-btn:hover{
    background-color: rgb(23, 160, 172);
    color: #fff;
}

.swiper-button-next, .swiper-button-prev {
    color: #28bfcc;
}

.is-draft{
/*    opacity:0.4;*/
    position:relative;
}
.is-draft::after{
    content:"DRAFT";
    position:absolute;
    top:8px; left:8px;
    background:#c0392b;
    color:#fff;
    padding:2px 6px;
    font-size:11px;
    letter-spacing:0.5px;
}

/* ------------------------------------------------------------------
 *  Hover-zoom + border-radius (tutti i layout)
 *  – il trigger è lo .swiper-slide, non più solo l’immagine –
 * ----------------------------------------------------------------*/
.nuslider-container .swiper-slide{
    user-select:text !important;            /* testo selezionabile */
    -webkit-user-select:text !important;
    cursor:pointer;                         /* feedback visivo */
}

.nuslider-container .swiper-slide a{
    display:block;
    overflow:hidden;                        /* taglia lo zoom */
    border-radius:4px;                      /* angoli arrotondati */
}

.nuslider-container .swiper-slide a img{
    display:block;
    width:100%;
    height:auto;
    transition:transform 800ms cubic-bezier(0.25,1,0.5,1);
}

/* zoom attivato dal passaggio sullo SLIDE
   (solo se abbiamo ≥2 colonne)                           */
.nuslider-container:not(.columns-1) .swiper-slide:hover a img{
    transform:scale(1.025);
}

/* ------------------------------------------------------------------
 * Frecce direzionali – colore brand
 * ----------------------------------------------------------------*/
.nuslider-container .swiper-button-prev,
.nuslider-container .swiper-button-next{
    width:46px;
    height:46px;
    margin-top:-23px;
    background:transparent;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s ease;
    cursor:pointer;
}

/* cerchio grigio in hover */
.nuslider-container .swiper-button-prev:hover,
.nuslider-container .swiper-button-next:hover{
    background:#e3e0e0;
}

/* stato disabilitato */
.nuslider-container .swiper-button-disabled{
    opacity:.35;
    cursor:default;
    background:transparent !important;
}

/* rimuovi icona default Swiper */
.nuslider-container .swiper-button-prev::after,
.nuslider-container .swiper-button-next::after{
    content:none;
}

/* ------------------- SVG icona default (color #28bfcc) ------------------- */
.nuslider-container .swiper-button-prev::before,
.nuslider-container .swiper-button-next::before{
    content:'';
    width:20px;
    height:20px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:20px 20px;
}

.nuslider-container .swiper-button-next::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' \
stroke='%2328bfcc' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
}

.nuslider-container .swiper-button-prev::before{
    transform:rotate(180deg);
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' \
stroke='%2328bfcc' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
}

/* ------------------- SVG icona hover (color #17a0ac) ------------------- */
.nuslider-container .swiper-button-next:hover::before,
.nuslider-container .swiper-button-next:focus::before{
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' \
stroke='%2317a0ac' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
}

.nuslider-container .swiper-button-prev:hover::before,
.nuslider-container .swiper-button-prev:focus::before{
    transform:rotate(180deg);
    background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' \
stroke='%2317a0ac' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='9 18 15 12 9 6'/></svg>");
}

/* ——— mobile: impila immagine + testo ——— */
@media (max-width:760px){
    .ns-split{
        flex-direction:column;
    }
    .ns-split .ns-media,
    .ns-split .ns-content{
        flex:1 0 100%;
        max-width:100%;
        margin:0;
    }
}