/*==================================================
  SmartShop Categories
==================================================*/

.categories{

    margin:40px 15px 20px 15px;

}
.categories .container{

    width:min(100%,1400px);

    margin:auto;

}
.categories .section-header{

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    gap:25px;

    margin-bottom:24px;

}

.categories-banner{

    height:42px;

    border:1px solid #fde1a8;

    background:#fff8ea;

    border-radius:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0 22px;

    color:#8a6730;

    font-size:14px;

    font-weight:600;

    white-space:nowrap;

}

.categories-banner strong{

    color:#d49308;

    margin:0 5px;

}

.categories .section-header h2{

    margin:0;

    font-size:25px;

    font-weight:700;

    color:#162447;

}

.categories .view-all{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:42px;

    padding:0 18px;

    border-radius:24px;

    background:#f8f9fc;

    border:1px solid #eceff5;

    color:#16325c;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.categories .view-all:hover{

    background:#f4b223;

    color:#fff;

}

.categories-wrapper{

    display:block;

}

.category-arrow{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

    flex-shrink:0;

}

.category-arrow:hover{

    background:#f4b223;

}

.category-arrow img{

    width:16px;

    height:16px;

}

.categories-grid{

    display:grid;

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

    gap:10px;

}

.category-card{

    background:#fff;

    border:1px solid #eef2f7;

    border-radius:16px;

    padding:22px 4px;

    text-align:center;

    text-decoration:none;

    transition:.25s;

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}

.category-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.08);

}

.category-icon{

    position:relative;

    width:70px;

    height:70px;

    margin:0 auto 16px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.icon-bg{

    position:absolute;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#fff5df;

}

.category-icon img{

    position:relative;

    z-index:2;

    width:36px;

    height:36px;

    object-fit:contain;

}

.category-card h3{

    margin:0 0 8px;

    font-size:15px;

    color:#162447;

    line-height:1.5;

    font-weight:700;

}

.category-count{

    display:block;

    color:#8c95a8;

    font-size:14px;

}

.more-card .icon-bg{

    background:#f3f5f8;

}

.more-card img{

    width:28px;

    height:28px;

}

.more-card h3{

    font-weight:700;

}

@media(max-width:1200px){

    .categories-grid{

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

    }

}

@media(max-width:768px){

    .categories-wrapper{

        gap:10px;

    }

    .categories-grid{

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

    }

    .category-arrow{

        display:none;

    }

}

@media(max-width:576px){

    .categories .section-header{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

    .categories-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
  SmartShop Categories Mobile
==================================================*/

.sscat-mobile{
    display:none;
}

@media (max-width:768px){

    .categories-desktop{
        display:none;
    }

    .sscat-mobile{
        display:block;
        margin:40px 15px;
    }

    .sscat-header{
        text-align:center;
        margin-bottom:24px;
    }

    .sscat-header h2{
        margin:0 0 14px;
        font-size:34px;
        font-weight:700;
        color:#162447;
    }

    .sscat-banner{

     

        align-items:center;

        justify-content:center;

        padding:10px 18px;

        border-radius:30px;

        background:#fff8ea;

        border:1px solid #fde1a8;

        color:#8a6730;

        font-size:15px;

        font-weight:600;

        white-space:nowrap;

    }

}
    .sscat-slider{

        position:relative;

        overflow:hidden;

        width:100%;

    }

    .sscat-track{

        display:flex;

        width:100%;

        transition:transform .35s ease;

    }

    .sscat-page{

        flex:0 0 100%;

        width:100%;

        display:grid;

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

        gap:16px;

        box-sizing:border-box;

        padding:0;

    }

    .sscat-card{

        background:#fff;

        border:1px solid #eef2f7;

        border-radius:18px;

        min-height:180px;

        padding:20px 12px;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        text-align:center;

        text-decoration:none;

        box-shadow:0 8px 25px rgba(0,0,0,.05);

        transition:.25s;

    }

    .sscat-card:hover{

        transform:translateY(-4px);

    }

    .sscat-more{

        background:#f8f9fc;

    }
	    .sscat-icon{

        position:relative;

        width:72px;

        height:72px;

        margin-bottom:14px;

        display:flex;

        align-items:center;

        justify-content:center;

    }

    .sscat-icon-bg{

        position:absolute;

        width:56px;

        height:56px;

        border-radius:50%;

        background:#fff5df;

    }

    .sscat-icon img{

        position:relative;

        z-index:2;

        width:36px;

        height:36px;

        object-fit:contain;

    }

    .sscat-card h3{

        margin:8px 0 6px;

        font-size:15px;

        line-height:1.5;

        color:#162447;

        font-weight:700;

    }

    .sscat-card span{

        font-size:14px;

        color:#8c95a8;

    }

    .sscat-arrow{

        position:absolute;

        top:50%;

        transform:translateY(-50%);

        width:42px;

        height:42px;

        border:none;

        border-radius:50%;

        background:#fff;

        display:flex;

        align-items:center;

        justify-content:center;

        cursor:pointer;

        box-shadow:0 5px 20px rgba(0,0,0,.10);

        z-index:5;

        transition:.25s;

    }

    .sscat-arrow:hover{

        background:#f4b223;

    }

    .sscat-arrow img{

        width:16px;

        height:16px;

    }

    .sscat-prev{

        right:8px;

    }

    .sscat-next{

        left:8px;

    }
	    @media (max-width:480px){

        .sscat-header h2{

            font-size:28px;

        }

        .sscat-banner{

            font-size:13px;

            padding:8px 14px;

            white-space:normal;

            line-height:1.6;

        }

        .sscat-page{

            gap:12px;

        }

        .sscat-card{

            min-height:165px;

            padding:8px 10px;

        }

        .sscat-icon{

            width:64px;

            height:64px;
margin-bottom: 0;
        }

        .sscat-icon-bg{

            width:50px;

            height:50px;

        }

        .sscat-icon img{

            width:32px;

            height:32px;

        }

        .sscat-card h3{

            font-size:14px;

        }

        .sscat-card span{

            font-size:13px;

        }

    }

}