/* =========================
   BREADCRUMB
========================= */

.breadcrumb-section{

    padding:20px 0;

    background:#fafafa;

}

.breadcrumb-section .container{

    font-size:14px;

}

.breadcrumb-section a{

    color:#666;

    text-decoration:none;

}

.breadcrumb-section strong{

    color:#111;

}

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

.category-hero{

    padding:30px 0 60px;

    background:#fff;

}

.category-banner{

    margin-bottom:35px;

}

.category-banner img{

    width:100%;

    height:380px;

    object-fit:cover;

    border-radius:16px;

    display:block;

}

.category-heading{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.category-heading h1{

    font-size:46px;

    font-weight:700;

    margin-bottom:15px;

    color:#111;

}

.category-heading p{

    color:#666;

    font-size:16px;

    line-height:1.9;

}

/* =========================
   PRODUCTS
========================= */

.category-products{

    padding:30px 0 70px;

}

.category-grid{

    display:grid;

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

    gap:24px;

}

/* CARD */

.category-card{

    text-decoration:none;

    color:#111;

    transition:.25s;

}

.category-card:hover{

    transform:translateY(-4px);

}

/* IMAGE */

.category-image{

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

}

.category-image img{

    width:100%;

    aspect-ratio:1/1.2;

    object-fit:contain;

    transition:.3s;

}

.category-card:hover img{

    transform:scale(1.03);

}

/* BODY */

.category-body{

    padding-top:12px;

    text-align:center;

}

/* TITLE */

.category-body h3{

    font-size:14px;

    font-weight:600;

    line-height:1.4;

    min-height:40px;

    margin-bottom:8px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

/* PRICE */

.category-price{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:4px;

}

.price-before{

    font-size:12px;

    color:#999;

    text-decoration:line-through;

}

.price-now{

    font-size:18px;

    font-weight:700;

    color:#111;

}

/* =========================
   CONTENT SEO
========================= */

.category-content{

    padding:70px 0;

    background:#fafafa;

}

.category-content h2{

    font-size:34px;

    font-weight:700;

    margin-bottom:20px;

}

.content-box{

    color:#555;

    font-size:15px;

    line-height:2;

}

/* =========================
   FAQ
========================= */

.category-faq{

    padding:70px 0;

    background:#fff;

}

.category-faq h2{

    text-align:center;

    font-size:34px;

    font-weight:700;

    margin-bottom:35px;

}

.faq-list{

    max-width:900px;

    margin:auto;

}

.faq-item{

    padding:20px;

    border:1px solid #eee;

    margin-bottom:12px;

    border-radius:10px;

}

.faq-item h3{

    margin:0;

    font-size:16px;

    font-weight:600;

}

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

@media(max-width:991px){

    .category-banner img{

        height:220px;

        border-radius:12px;

    }

    .category-heading h1{

        font-size:30px;

    }

    .category-heading p{

        font-size:14px;

    }

    .category-grid{

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

        gap:20px 14px;

    }

    .category-body h3{

        font-size:12px;

        min-height:34px;

    }

    .price-before{

        font-size:10px;

    }

    .price-now{

        font-size:15px;

    }

    .category-content{

        padding:50px 0;

    }

    .category-content h2{

        font-size:24px;

    }

    .category-faq{

        padding:50px 0;

    }

    .category-faq h2{

        font-size:24px;

    }

    .faq-item{

        padding:16px;

    }

    .faq-item h3{

        font-size:14px;

    }

}