/* =========================================================
   Smart Mobile Care - Shop Page CSS
   ---------------------------------------------------------
   Page-specific CSS only
========================================================= */


/* =========================================================
   SHOP CONTAINER
========================================================= */

.shop-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding-left:20px;
    padding-right:20px;

}


/* =========================================================
   SHOP SEARCH SECTION
========================================================= */

.shop-search-section{

    width:100%;

    padding:18px 0;

    background:#f8fafc;

    border-bottom:1px solid #e5e7eb;

}


.shop-search-form{

    width:100%;

    max-width:900px;

    margin:0 auto;

    display:flex;

    align-items:center;

    gap:10px;

}


.shop-search-input{

    flex:1;

    width:100%;

    height:50px;

    padding:0 20px;

    border:2px solid #2563eb;

    border-radius:30px;

    background:#fff;

    color:#1f2937;

    font-size:14px;

    outline:none;

    transition:.25s;

}


.shop-search-input:focus{

    border-color:#1d4ed8;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.10);

}


.shop-search-button{

    width:50px;

    height:50px;

    flex:0 0 50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:17px;

    cursor:pointer;

    transition:.25s;

}


.shop-search-button:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}


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

.category-section{

    width:100%;

    background:#fff;

    border-bottom:1px solid #e5e7eb;

}


.category-list{

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 0;

    overflow-x:auto;

    scrollbar-width:none;

}


.category-list::-webkit-scrollbar{

    display:none;

}


.category-link{

    flex:0 0 auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    min-height:36px;

    padding:8px 16px;

    border-radius:25px;

    background:#f3f4f6;

    color:#374151;

    text-decoration:none;

    font-size:12px;

    font-weight:500;

    white-space:nowrap;

    transition:.25s;

}


.category-link i{

    font-size:11px;

}


.category-link:hover{

    background:#dbeafe;

    color:#2563eb;

}


.category-link.active{

    background:#2563eb;

    color:#fff;

    box-shadow:
        0 4px 12px rgba(37,99,235,.20);

}


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

.shop-products-section{

    width:100%;

    padding:35px 0 50px;

    background:#f3f4f6;

}


/* =========================================================
   RESULT HEADER
========================================================= */

.shop-result-header{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;

}


.shop-result-header h1{

    margin:0 0 4px;

    color:#1f2937;

    font-size:26px;

    line-height:1.3;

    font-weight:700;

}


.shop-result-header p{

    margin:0;

    color:#6b7280;

    font-size:13px;

}


.clear-filter{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:9px 14px;

    border:1px solid #d1d5db;

    border-radius:8px;

    background:#fff;

    color:#374151;

    text-decoration:none;

    font-size:12px;

    font-weight:500;

    transition:.25s;

}


.clear-filter:hover{

    border-color:#2563eb;

    background:#eff6ff;

    color:#2563eb;

}


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

.products-grid{

    width:100%;

    display:grid;

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

    gap:20px;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card{

    position:relative;

    min-width:0;

    overflow:hidden;

    background:#fff;

    border:1px solid #eef2f7;

    border-radius:15px;

    box-shadow:
        0 4px 14px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.product-card:hover{

    transform:translateY(-5px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.11);

}


/* =========================================================
   FEATURED BADGE
========================================================= */

.featured-badge{

    position:absolute;

    top:0;

    left:0;

    z-index:5;

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:6px 10px;

    border-radius:
        0 0 9px 0;

    background:#f97316;

    color:#fff;

    font-size:10px;

    font-weight:600;

}


.featured-badge i{

    font-size:9px;

}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.product-image-link{

    width:100%;

    height:220px;

    display:block;

    overflow:hidden;

    background:#f8fafc;

}


.product-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


.product-card:hover .product-image{

    transform:scale(1.04);

}


/* =========================================================
   PRODUCT BODY
========================================================= */

.product-body{

    padding:15px;

}


/* =========================================================
   PRODUCT NAME
========================================================= */

.product-name{

    height:42px;

    margin:0 0 6px;

    overflow:hidden;

    font-size:15px;

    font-weight:600;

    line-height:1.4;

}


.product-name a{

    color:#1f2937;

    text-decoration:none;

}


.product-name a:hover{

    color:#2563eb;

}


/* =========================================================
   BRAND
========================================================= */

.product-brand{

    min-height:20px;

    margin:0 0 5px;

    color:#6b7280;

    font-size:11px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.product-brand i{

    margin-right:4px;

    color:#2563eb;

}


/* =========================================================
   PRODUCT RATING
   ---------------------------------------------------------
   Only Approved reviews are counted by PHP
========================================================= */

.product-rating{

    width:100%;

    min-height:20px;

    display:flex;

    align-items:center;

    gap:5px;

    margin:2px 0 8px;

    line-height:1;

}


.rating-stars{

    display:flex;

    align-items:center;

    gap:1px;

    color:#f59e0b;

    font-size:11px;

    line-height:1;

    white-space:nowrap;

}


.rating-stars i{

    width:auto;

    line-height:1;

}


.rating-number{

    color:#374151;

    font-size:10px;

    font-weight:700;

    line-height:1;

}


.rating-count{

    color:#94a3b8;

    font-size:10px;

    font-weight:400;

    line-height:1;

}


/* =========================================================
   PRICE
========================================================= */

.product-price-row{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

}


.product-price{

    color:#16a34a;

    font-size:19px;

    font-weight:700;

    line-height:1.2;

}


.discount-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:3px 7px;

    border-radius:20px;

    background:#dcfce7;

    color:#15803d;

    font-size:9px;

    font-weight:700;

}


/* =========================================================
   MRP
========================================================= */

.product-mrp{

    display:flex;

    align-items:center;

    gap:6px;

    margin-top:5px;

    color:#9ca3af;

    font-size:11px;

}


.product-mrp del{

    color:#888;

    font-size:12px;

}


/* =========================================================
   SAVING
========================================================= */

.product-saving{

    display:flex;

    align-items:center;

    gap:5px;

    margin-top:5px;

    color:#16a34a;

    font-size:11px;

    font-weight:600;

}


.product-saving i{

    font-size:10px;

}


/* =========================================================
   STOCK
========================================================= */

.stock-status{

    display:flex;

    align-items:center;

    gap:5px;

    margin-top:7px;

    font-size:11px;

    font-weight:600;

}


.stock-status i{

    font-size:9px;

}


.in-stock{

    color:#16a34a;

}


.out-stock{

    color:#dc2626;

}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.product-actions{

    width:100%;

    display:flex;

    gap:8px;

    margin-top:13px;

}


.action-form{

    flex:1;

    min-width:0;

    margin:0;

}


.product-btn{

    width:100%;

    min-height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:8px 7px;

    border:none;

    border-radius:10px;

    color:#fff;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}


.product-btn:hover{

    transform:translateY(-2px);

}


.buy-now-btn{

    background:#2563eb;

}


.buy-now-btn:hover{

    background:#1d4ed8;

}


.cart-btn{

    background:#16a34a;

}


.cart-btn:hover{

    background:#15803d;

}


.disabled-btn{

    width:100%;

    background:#d1d5db;

    color:#6b7280;

    cursor:not-allowed;

}


.disabled-btn:hover{

    transform:none;

}


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

.shop-empty{

    grid-column:
        1 / -1;

    width:100%;

    min-height:300px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:50px 20px;

    background:#fff;

    border-radius:16px;

    text-align:center;

    box-shadow:
        0 4px 14px rgba(0,0,0,.05);

}


.shop-empty-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:15px;

    border-radius:50%;

    background:#f3f4f6;

    color:#9ca3af;

    font-size:28px;

}


.shop-empty h2{

    margin:0 0 8px;

    color:#374151;

    font-size:20px;

}


.shop-empty p{

    max-width:400px;

    margin:0 0 20px;

    color:#6b7280;

    font-size:13px;

}


/* =========================================================
   PAGINATION
========================================================= */

.pagination{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:7px;

    margin-top:35px;

}


.pagination-number,
.pagination-btn{

    min-width:38px;

    min-height:38px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:8px 12px;

    border:1px solid #e5e7eb;

    border-radius:8px;

    background:#fff;

    color:#374151;

    text-decoration:none;

    font-size:12px;

    font-weight:500;

    transition:.25s;

}


.pagination-number:hover,
.pagination-btn:hover{

    border-color:#2563eb;

    background:#eff6ff;

    color:#2563eb;

}


.pagination-number.active{

    border-color:#2563eb;

    background:#2563eb;

    color:#fff;

}


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

@media(max-width:1100px){

    .products-grid{

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

    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media(max-width:992px){

    .shop-container{

        padding-left:15px;

        padding-right:15px;

    }


    .products-grid{

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

        gap:15px;

    }


    .product-image-link{

        height:200px;

    }

}


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

@media(max-width:768px){

    .shop-container{

        padding-left:10px;

        padding-right:10px;

    }


    .shop-search-section{

        padding:10px 0;

    }


    .shop-search-form{

        gap:7px;

    }


    .shop-search-input{

        height:45px;

        padding:0 14px;

        font-size:13px;

    }


    .shop-search-button{

        width:45px;

        height:45px;

        flex-basis:45px;

        font-size:15px;

    }


    .category-list{

        padding:9px 0;

        gap:7px;

    }


    .category-link{

        min-height:34px;

        padding:7px 13px;

        font-size:11px;

    }


    .shop-products-section{

        padding:25px 0 35px;

    }


    .shop-result-header{

        margin-bottom:18px;

    }


    .shop-result-header h1{

        font-size:21px;

    }


    .shop-result-header p{

        font-size:11px;

    }


    .clear-filter{

        padding:8px 10px;

        font-size:10px;

    }


    .products-grid{

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

        gap:9px;

    }


    .product-card{

        border-radius:12px;

    }


    .product-image-link{

        height:150px;

    }


    .product-body{

        padding:10px;

    }


    .product-name{

        height:38px;

        font-size:12px;

        line-height:1.45;

    }


    .product-brand{

        font-size:9px;

        margin-bottom:4px;

    }


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

    .product-rating{

        min-height:17px;

        gap:4px;

        margin:1px 0 6px;

    }


    .rating-stars{

        gap:1px;

        font-size:9px;

    }


    .rating-number{

        font-size:9px;

    }


    .rating-count{

        font-size:9px;

    }


    .product-price{

        font-size:16px;

    }


    .discount-badge{

        font-size:8px;

        padding:2px 5px;

    }


    .product-mrp{

        font-size:9px;

    }


    .product-mrp del{

        font-size:10px;

    }


    .product-saving{

        font-size:9px;

    }


    .stock-status{

        font-size:9px;

    }


    .product-actions{

        gap:5px;

        margin-top:9px;

    }


    .product-btn{

        min-height:36px;

        padding:7px 4px;

        border-radius:8px;

        font-size:9px;

    }


    .featured-badge{

        padding:5px 7px;

        font-size:8px;

    }


    .shop-empty{

        min-height:260px;

        padding:35px 15px;

    }


    .shop-empty h2{

        font-size:18px;

    }


    .shop-empty p{

        font-size:11px;

    }


    .pagination{

        margin-top:25px;

        gap:5px;

    }


    .pagination-number,
    .pagination-btn{

        min-width:34px;

        min-height:34px;

        padding:7px 9px;

        font-size:10px;

    }

}


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

@media(max-width:480px){

    .shop-result-header{

        align-items:flex-start;

        gap:10px;

    }


    .shop-result-header h1{

        font-size:19px;

    }


    .clear-filter{

        white-space:nowrap;

    }


    .product-image-link{

        height:135px;

    }


    .product-body{

        padding:9px;

    }


    .product-name{

        font-size:11px;

    }


    /* ================================================
       SMALL MOBILE RATING
    ================================================ */

    .product-rating{

        gap:3px;

        margin-top:1px;

        margin-bottom:5px;

    }


    .rating-stars{

        font-size:8px;

    }


    .rating-number{

        font-size:8px;

    }


    .rating-count{

        font-size:8px;

    }


    .product-price{

        font-size:15px;

    }


    .product-actions{

        flex-direction:column;

    }


    .product-btn{

        min-height:34px;

        font-size:10px;

    }


    .shop-empty{

        min-height:240px;

    }

}