.hero{

    margin-bottom:50px;

}

.slider{

    position:relative;

    height:520px;

    overflow:hidden;

    border-radius:18px;

    border:1px solid var(--border);

    background:var(--surface);

}

.slides{

    position:relative;

    width:100%;

    height:100%;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    transition:opacity .5s;

}

.slide.active{

    opacity:1;

}

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.slider-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.45);

    color:#fff;

    cursor:pointer;

    z-index:5;

    transition:.2s;

}

.slider-btn:hover{

    background:rgba(0,0,0,.7);

}

.prev{

    left:20px;

}

.next{

    right:20px;

}

.slider-dots{

    position:absolute;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:10px;

    z-index:5;

}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:rgba(255,255,255,.4);

    cursor:pointer;

}

.dot.active{

    background:#fff;

}

.collections{

    margin-top:50px;

}

.section-title{

    margin-bottom:25px;

}

.section-title h2{

    font-size:32px;

    margin-bottom:6px;

}

.section-title span{

    color:var(--muted);

}

.collection-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));

    gap:24px;

}

.collection-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    transition:.2s;

}

.collection-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

}

.collection-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    transition:.3s;

}

.collection-card:hover img{

    transform:scale(1.05);

}

.collection-info{

    padding:18px;

}

.collection-info h3{

    margin-bottom:8px;

    font-size:24px;

}

.collection-info p{

    color:var(--muted);

    line-height:1.6;

}

@media(max-width:768px){

    .slider{

        height:260px;

    }

    .collection-grid{

        grid-template-columns:1fr;

    }

}