/* =========================================
   SHOP PAGE
========================================= */

.shop-page{

    padding:60px 0 100px;
}


/* =========================================
   TOP BAR
========================================= */

.shop-topbar{

    background:#ff6600;

    color:#fff;

    padding:14px 0;

    margin-bottom:40px;
}

.shop-topbar-flex{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.shop-topbar-left{

    font-weight:600;

    font-size:15px;
}

.shop-topbar-right{

    display:flex;

    align-items:center;

    gap:20px;
}

.shop-topbar-right a{

    color:#fff;

    text-decoration:none;

    font-weight:500;
}


/* =========================================
   OFFER BANNER
========================================= */

.shop-banner{

    background:
    linear-gradient(
        135deg,
        #ff6600,
        #ff8533
    );

    border-radius:28px;

    padding:60px;

    margin-bottom:40px;

    color:#fff;

    position:relative;

    overflow:hidden;
}

.shop-banner h2{

    font-size:52px;

    font-weight:800;

    margin-bottom:15px;
}

.shop-banner p{

    font-size:18px;

    margin-bottom:30px;

    opacity:.92;
}

.shop-banner-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:54px;

    padding:0 34px;

    border-radius:40px;

    background:#fff;

    color:#ff6600;

    font-weight:700;

    text-decoration:none;

    transition:.35s ease;
}

.shop-banner-btn:hover{

    transform:translateY(-4px);
}


/* =========================================
   MAIN LAYOUT
========================================= */

.shop-layout{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:35px;
}


/* =========================================
   SIDEBAR
========================================= */

.shop-sidebar{

    background:#fff;

    border-radius:26px;

    padding:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    height:fit-content;
}

.sidebar-title{

    font-size:22px;

    font-weight:800;

    margin-bottom:25px;

    color:#111;
}

.category-list{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:40px;
}

.category-list a{

    text-decoration:none;

    color:#444;

    font-weight:500;

    transition:.3s ease;
}

.category-list a:hover{

    color:#ff6600;

    transform:translateX(6px);
}


/* =========================================
   FILTER COLORS
========================================= */

.color-filter{

    display:flex;

    gap:12px;

    margin:20px 0 40px;
}

.color-filter span{

    width:22px;

    height:22px;

    border-radius:50%;

    cursor:pointer;
}


/* =========================================
   FEATURED PRODUCT
========================================= */

.featured-mini{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;
}

.featured-mini img{

    width:60px;

    height:60px;

    object-fit:cover;

    border-radius:14px;
}

.featured-mini h5{

    font-size:15px;

    margin-bottom:5px;
}

.featured-mini span{

    color:#ff6600;

    font-weight:700;
}


/* =========================================
   CONTENT AREA
========================================= */

.shop-content{

    width:100%;
}


/* =========================================
   TOOLBAR
========================================= */

.shop-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

    gap:20px;

    flex-wrap:wrap;
}

.shop-search{

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:50px;

    overflow:hidden;

    width:100%;

    max-width:420px;

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

.shop-search input{

    flex:1;

    border:none;

    outline:none;

    height:56px;

    padding:0 22px;

    font-size:15px;
}

.shop-search button{

    width:60px;

    height:56px;

    border:none;

    background:#ff6600;

    color:#fff;

    cursor:pointer;
}

.shop-sort{

    display:flex;

    align-items:center;

    gap:15px;
}

.shop-sort select{

    height:48px;

    border:none;

    background:#fff;

    padding:0 18px;

    border-radius:14px;

    font-weight:600;

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


/* =========================================
   PRODUCT GRID
========================================= */

.shop-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(260px,1fr));

    gap:30px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px){

    .shop-layout{

        grid-template-columns:1fr;
    }

    .shop-sidebar{

        order:2;
    }

    .shop-content{

        order:1;
    }
}

@media(max-width:768px){

    .shop-banner{

        padding:40px 25px;
    }

    .shop-banner h2{

        font-size:34px;
    }

    .shop-toolbar{

        flex-direction:column;

        align-items:stretch;
    }

    .shop-search{

        max-width:100%;
    }
}