/* =========================================================
   VZUTA_UA — HOME.CSS
   home categories / product sections
   ========================================================= */

.category-showcase{
    padding:18px 0 46px;
    background:#fff;
}

.category-showcase .section-header{
    display:none;
}

.category-grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
}

.category-grid::-webkit-scrollbar{
    height:8px;
}

.category-grid::-webkit-scrollbar-track{
    background:#e8e8e8;
    border-radius:20px;
}

.category-grid::-webkit-scrollbar-thumb{
    background:#9b9b9b;
    border-radius:20px;
}

.category-card{
    flex:0 0 calc((100% - 36px) / 4);
    height:560px;
    position:relative;
    overflow:hidden;
    border-radius:14px;
    background:#eee;
    scroll-snap-align:start;
    transition:.32s ease;
}

.category-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.category-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.35s ease;
}

.category-card:hover img{
    transform:scale(1.035);
}

.category-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.48), rgba(0,0,0,.08), transparent);
}

.category-name{
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    z-index:2;
    color:#fff;
    font-size:22px;
    font-weight:800;
    text-transform:uppercase;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.category-name::after{
    content:"→";
    font-size:24px;
    font-weight:400;
}

.products-section{
    padding:70px 0;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.section-header h2{
    font-size:36px;
    font-weight:800;
}

.section-header a{
    color:#111;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    transition:.25s ease;
}

.section-header a:hover{
    opacity:.55;
}