/* ======================================================
   SEAN B SHOP
   ALL CATEGORIES PAGE
   assets/css/pages/categories.css
====================================================== */


/* ======================================================
   PAGE WRAPPER
====================================================== */

.categories-page{

    background:#f5f7fa;

    min-height:100vh;

    padding-bottom:60px;

}



/* ======================================================
   CATEGORY HERO
====================================================== */


.categories-hero{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
        135deg,
        #0b1f3a,
        #152f55
    );

    padding:55px 0;

}



.categories-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at top right,
        rgba(230,0,0,.35),
        transparent 45%
    );

}



.categories-hero .container{

    position:relative;

    z-index:2;

}



.categories-hero-content{

    text-align:center;

    color:#fff;

}



.categories-hero-content span{

    display:inline-flex;

    align-items:center;

    background:#e60000;

    color:#fff;

    padding:8px 20px;

    border-radius:30px;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.5px;

}



.categories-hero-content h1{

    margin:18px 0 12px;

    color:#fff;

    font-size:44px;

    font-weight:900;

    text-shadow:

    0 4px 15px rgba(0,0,0,.4);

}



.categories-hero-content p{

    max-width:650px;

    margin:auto;

    color:#dbe7f5;

    font-size:16px;

    line-height:1.6;

}



/* ======================================================
   ALL CATEGORIES SECTION
====================================================== */


.all-categories{

    padding:45px 0;

}



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


.all-categories .section-header{

    margin-bottom:30px;

}



.section-tag{

    display:block;

    color:#e60000;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:6px;

}



.section-header h2{

    color:#0b1f3a;

    font-size:30px;

    font-weight:900;

    margin:0;

}



.section-header p{

    color:#64748b;

    margin-top:8px;

    font-size:14px;

}



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


.category-grid{

    display:grid;

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

    gap:18px;

}



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


.category-card{

    background:#fff;

    border-radius:18px;

    padding:22px 15px;

    text-align:center;

    text-decoration:none;

    border:1px solid #e8edf3;

    position:relative;

    overflow:hidden;

    transition:.3s ease;

}



.category-card::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:3px;

    background:#e60000;

    transform:scaleX(0);

    transition:.3s ease;

}



.category-card:hover::after{

    transform:scaleX(1);

}



.category-card:hover{

    transform:translateY(-7px);

    box-shadow:

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

}





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


.category-image{

    width:90px;

    height:90px;

    margin:0 auto 15px;

    border-radius:50%;

    background:#f5f7fa;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}



.category-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:12px;

}



.category-image i{

    font-size:40px;

    color:#0b1f3a;

    transition:.25s ease;

}



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

    color:#e60000;

}





/* ======================================================
   CATEGORY TEXT
====================================================== */


.category-card h3{

    color:#0b1f3a;

    font-size:15px;

    font-weight:800;

    margin:0 0 12px;

    line-height:1.4;

}



.category-card span{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

    color:#e60000;

    font-size:12px;

    font-weight:700;

}





/* ======================================================
   EMPTY STATE
====================================================== */


.empty-category{

    background:#fff;

    padding:60px 20px;

    border-radius:18px;

    text-align:center;

}



.empty-category h3{

    color:#0b1f3a;

}



.empty-category p{

    color:#64748b;

}



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


@media(max-width:1200px){


.category-grid{

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

}


}





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


@media(max-width:768px){


.categories-hero{

    padding:35px 0;

}



.categories-hero-content h1{

    font-size:30px;

}



.categories-hero-content p{

    font-size:14px;

}



.all-categories{

    padding:30px 0;

}



.category-grid{

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

    gap:12px;

}



.category-card{

    padding:18px 10px;

}



.category-image{

    width:65px;

    height:65px;

}



.category-image i{

    font-size:30px;

}



.category-card h3{

    font-size:13px;

}


}