/* ======================================================
   SEAN B SHOP
   SHOP CATEGORIES COMPONENT
   assets/css/components/categories.css
====================================================== */


/* ======================================================
   SECTION
====================================================== */


.categories-section{

    padding:45px 0;

    background:#f5f7fa;

}



.categories-section .section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}



.categories-section .section-tag{

    display:block;

    color:#e60000;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:6px;

}



.categories-section .section-header h2{

    margin:0;

    color:#0b1f3a;

    font-size:28px;

    font-weight:800;

}



.categories-section .section-header p{

    margin-top:8px;

    color:#64748b;

    font-size:14px;

}





.view-all{

    display:flex;

    align-items:center;

    gap:8px;

    color:#e60000;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

}





/* ======================================================
   CATEGORY GRID
====================================================== */


.category-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:16px;

}





/* ======================================================
   CATEGORY CARD
====================================================== */


.category-card{

    background:#ffffff;

    border-radius:16px;

    padding:20px 15px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    text-decoration:none;

    border:1px solid #e8edf3;

    transition:.25s ease;

    position:relative;

    overflow:hidden;

}



.category-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:#e60000;

    transform:scaleX(0);

    transition:.25s ease;

}



.category-card:hover::before{

    transform:scaleX(1);

}



.category-card:hover{

    transform:translateY(-6px);

    box-shadow:

    0 15px 35px rgba(11,31,58,.12);

}





/* ======================================================
   CATEGORY IMAGE
====================================================== */


.category-image{

    width:80px;

    height:80px;

    border-radius:50%;

    background:#f5f7fa;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:15px;

    overflow:hidden;

}



.category-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:10px;

}



.category-image i{

    font-size:36px;

    color:#0b1f3a;

}



.category-card:hover .category-image i{

    color:#e60000;

}





/* ======================================================
   CATEGORY NAME
====================================================== */


.category-card h3{

    margin:0 0 10px;

    color:#0b1f3a;

    font-size:15px;

    font-weight:750;

    line-height:1.3;

}





/* ======================================================
   SHOP NOW LINK
====================================================== */


.category-card span{

    display:flex;

    align-items:center;

    gap:5px;

    color:#e60000;

    font-size:12px;

    font-weight:700;

}



.category-card span i{

    font-size:10px;

}





/* ======================================================
   TABLET
====================================================== */


@media(max-width:1200px){


.category-grid{

    grid-template-columns:repeat(4,1fr);

}


}







/* ======================================================
   MOBILE
====================================================== */


@media(max-width:768px){


.categories-section{

    padding:35px 0;

}



.categories-section .section-header{

    align-items:flex-start;

}



.categories-section .section-header h2{

    font-size:22px;

}



.category-grid{

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}



.category-card{

    padding:16px 10px;

}



.category-image{

    width:65px;

    height:65px;

}



.category-image i{

    font-size:30px;

}



.category-card h3{

    font-size:13px;

}



}