/* =========================================================
   VANCE CEYLON
   NEW ARRIVALS — COMPACT SEAMLESS INFINITE SLIDER
   Replace the old new-arrivals-slider.css with this file.
   ========================================================= */

.vance-new-arrivals{
    width:100%;
    overflow:hidden;
    background:var(--bg, #050505);
    color:var(--text, #fff);
    padding:72px 0 82px;
}

.vance-new-arrivals-head{
    width:100%;
    box-sizing:border-box;
    padding:0 28px 32px;
}

.vance-new-arrivals-head .eyebrow{
    margin-bottom:10px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.20em;
    text-transform:uppercase;
    opacity:.55;
}

.vance-new-arrivals-head h2{
    margin:0;
    font-size:clamp(42px,6vw,86px);
    line-height:.92;
    font-weight:900;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

/* Window only clips the moving strip. No side padding = no fake blank area. */
.vance-slider-window{
    position:relative;
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.vance-slider-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:16px !important;
    width:max-content !important;
    min-width:max-content !important;
    margin:0 !important;
    padding:0 !important;
    transform:translate3d(0,0,0);
    will-change:transform;
}

.vance-slider-set{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:flex-start !important;
    gap:16px !important;
    width:max-content !important;
    min-width:max-content !important;
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
}

/*
   Image + name + category + price are ONE card.
   The card is intentionally smaller than before, so products sit closer.
*/
.vance-slider-set > .card{
    display:block !important;
    flex:0 0 clamp(260px, 30vw, 380px) !important;
    width:clamp(260px, 30vw, 380px) !important;
    min-width:clamp(260px, 30vw, 380px) !important;
    max-width:380px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    cursor:pointer;
    animation:none !important;
}

.vance-slider-set > .card:hover{
    transform:none !important;
}

.vance-slider-set > .card .card-img{
    display:block !important;
    width:100% !important;
    aspect-ratio:4 / 5 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#101010;
}

.vance-slider-set > .card .card-img img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    transition:transform .35s ease;
}

.vance-slider-set > .card:hover .card-img img{
    transform:scale(1.012);
}

/* Keep all product words directly attached to their own image. */
.vance-slider-set > .card .card-info{
    display:block !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 !important;
    padding:12px 4px 0 !important;
}

.vance-slider-set > .card .card-name{
    margin:0 !important;
    font-size:13px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.vance-slider-set > .card .card-category{
    margin:5px 0 0 !important;
    font-size:10px;
    line-height:1.3;
    letter-spacing:.10em;
    text-transform:uppercase;
    opacity:.52;
}

.vance-slider-set > .card .card-price{
    margin:7px 0 0 !important;
    font-size:13px;
    line-height:1.3;
}

/* Use this class later when your uploaded images have transparent backgrounds. */
.vance-new-arrivals.transparent-products .card-img{
    background:transparent !important;
}

.vance-new-arrivals.transparent-products .card-img img{
    object-fit:contain !important;
}

@media (max-width:1000px){
    .vance-new-arrivals{
        padding:60px 0 68px;
    }

    .vance-new-arrivals-head{
        padding:0 20px 26px;
    }

    .vance-slider-track,
    .vance-slider-set{
        gap:12px !important;
    }

    .vance-slider-set > .card{
        flex-basis:clamp(250px, 44vw, 340px) !important;
        width:clamp(250px, 44vw, 340px) !important;
        min-width:clamp(250px, 44vw, 340px) !important;
        max-width:340px !important;
    }
}

@media (max-width:650px){
    .vance-new-arrivals{
        padding:48px 0 56px;
    }

    .vance-new-arrivals-head{
        padding:0 14px 22px;
    }

    .vance-new-arrivals-head h2{
        font-size:42px;
    }

    .vance-slider-track,
    .vance-slider-set{
        gap:10px !important;
    }

    .vance-slider-set > .card{
        flex-basis:calc(82vw) !important;
        width:82vw !important;
        min-width:82vw !important;
        max-width:330px !important;
    }
}