*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#111}


/* ================= MAIN BANNER ================= */
.marketplace-banner{width:1320px;max-width:1320px;margin:0 auto;height:455px;display:flex;overflow:hidden}
.category-sidebar{width:341px;min-width:341px;height:100%;background:#fff;border-right:1px solid #eee;display:flex;flex-direction:column}
.category-item{height:59px;display:flex;align-items:center;padding:0 23px;gap:10px;border-bottom:1px solid #eee;cursor:pointer;transition:.2s}
.category-item:hover{background:#fafafa}
.category-item img{width:38px;height:38px;object-fit:cover;flex-shrink:0}
.category-item span{font-size:15px;color:#34465a;font-weight:400;white-space:nowrap}
.view-all{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 23px;color:#538167;font-size:14px;margin-top:auto}
.view-all button{width:36px;height:36px;border:0;border-radius:50%;background:#fff8f4;color:#538167;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.view-all button:hover{background:#538167;color:#fff;transform:translateX(3px)}
.view-all i{font-size:12px}
.hero-slider{position:relative;width:calc(100% - 341px);height:100%;overflow:hidden;background:#000}
.slides{width:100%;height:100%;position:relative}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease}
.slide.active{opacity:1;visibility:visible;z-index:2}
.slide>img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-content{position:absolute;left:58px;top:0;height:100%;z-index:5;display:flex;flex-direction:column;align-items:flex-start}
.hero-content h1{margin-top:-3px;color:#fff;font-size:clamp(52px,5vw,74px);line-height:.96;font-weight:300;letter-spacing:-2px;text-transform:uppercase}
.shop-btn{margin-top:113px;padding:14px 27px;min-width:146px;border:0;border-radius:30px;background:#fff;color:#242424;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:.25s}
.shop-btn:hover{background:#538167;color:#fff;transform:translateY(-2px)}
.hero-content p{margin-top:42px;color:#fff;font-size:19px;font-weight:500}
.slider-dots{position:absolute;z-index:20;bottom:34px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px}
.dot{width:9px;height:9px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:.3s}
.dot.active{width:10px;height:10px;background:#fff}

@media(max-width:1150px){
.header-inner{width:100%;max-width:100%;padding:0 20px}
.main-nav{gap:11px}
.nav-link{font-size:13px}
.marketplace-banner{width:100%;max-width:100%;}
.category-sidebar{width:280px;min-width:280px}
.hero-slider{width:calc(100% - 280px)}
.hero-content{left:35px}
.hero-content h1{font-size:52px}
}
@media(max-width:900px){
.site-header{height:100px}
.header-inner{padding:0 20px}
.brand{height:95px;width:155px}
.brand img{width:150px;height:90px}
.main-nav{display:none}
.mobile-menu{display:flex;border:0;background:#ffbd08;width:42px;height:42px;border-radius:6px;align-items:center;justify-content:center;font-size:19px;cursor:pointer}
.marketplace-banner{margin-top:0}
}
@media(max-width:768px){
.marketplace-banner{width:100%;max-width:100%;height:auto;min-height:455px;flex-direction:column}
.category-sidebar{width:100%;min-width:100%;height:auto;display:grid;grid-template-columns:repeat(2,1fr)}
.category-item{height:60px;padding:0 15px}
.view-all{height:60px;grid-column:1/-1;margin:0}
.hero-slider{width:100%;height:455px}
.hero-content{left:30px}
.hero-content h1{font-size:48px}
.shop-btn{margin-top:80px}
}
@media(max-width:500px){
.category-sidebar{grid-template-columns:1fr}
.hero-slider{height:400px}
.hero-content{left:25px}
.hero-content h1{font-size:40px;letter-spacing:-1px}
.shop-btn{margin-top:60px;padding:12px 22px}
.hero-content p{font-size:15px}
}

/* ================= TOP CATEGORY ================= */
.top-category-section{
    width:1320px;
    max-width:1320px;
    margin:0 auto;
    padding:27px 0 55px;
    background:#fff;
}

.category-section-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:31px;
}

.category-section-head h2{
    position:relative;
    display:inline-block;
    margin:0;
    font-size:24px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    z-index:1;
}

.category-section-head .title-brush{
    position:absolute;
    width:57px;
    height:13px;
    right:-8px;
    top:17px;
    background:#ead7e0;
    border-radius:50%;
    transform:rotate(4deg);
    z-index:-1;
}

.category-section-head p{
    margin:7px 0 0;
    color:#5f6063;
    font-size:15px;
    line-height:1.3;
}

.view-more-btn {
    margin-top: 2px;
    min-width: 114px;
    height: auto;
    padding: 10px 20px;
    border: 1px solid #538167;
    border-radius: 24px;
    background: transparent;
    color: #538167;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
    text-align: center;
    text-decoration: none;
}

.view-more-btn:hover{
    background:#538167;
    color:#fff;
}

.top-category-grid{
    display:grid;
    grid-template-columns:repeat(8, 1fr);
    gap:22px;
}

.top-category-card{
    height:auto;
    min-width:0;
    padding:20px 10px 13px;
    background:#fff;
    border-radius:4px;
    text-decoration:none;
    text-align:center;
    overflow:hidden;
    transition:transform .2s ease, box-shadow .2s ease;
}

.top-category-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(0,0,0,.07);
}

.top-category-card img{
    display:block;
    width:120px;
    height:120px;
    margin:0 auto 15px;
    border-radius:50%;
    object-fit:cover;
}

.top-category-card h3{
    margin:0;
    color:#111;
    font-size:14px;
    line-height:18px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.top-category-card p{
    margin:7px 0 0;
    color:#666;
    font-size:12px;
    line-height:16px;
}

@media(max-width:1150px){
    .top-category-section{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }
    .top-category-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

@media(max-width:768px){
    .top-category-section{
        padding-top:25px;
    }
    .category-section-head{
        align-items:flex-start;
    }
    .top-category-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }
    .top-category-card img{
        width:110px;
        height:110px;
    }
}

@media(max-width:500px){
    .category-section-head{
        gap:15px;
    }
    .category-section-head h2{
        font-size:21px;
    }
    .view-more-btn{
        min-width:95px;
        height:38px;
        padding:0 13px;
    }
}


/* ================= TOP CATEGORY SLIDER ================= */
.category-carousel{
    position:relative;
    width:100%;
}

.category-viewport{
    width:100%;
    overflow:hidden;
}

.top-category-grid{
    display:flex;
    gap:22px;
    width:max-content;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
}

.top-category-card{
    width:172px;
    min-width:172px;
    flex:0 0 172px;
}

.category-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:36px;
    height:36px;
    border:1px solid #538167;
    border-radius:50%;
    background:#fff;
    color:#538167;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(0,0,0,.10);
    transition:.2s ease;
}

.category-arrow:hover{
    background:#538167;
    color:#fff;
}

.category-arrow:disabled{
    opacity:.35;
    cursor:default;
}

.category-prev{left:-18px}
.category-next{right:-18px}

@media(max-width:1150px){
    .top-category-grid{
        gap:18px;
    }
    .top-category-card{
        width:calc((100vw - 20px * 2 - 18px * 3) / 4);
        min-width:calc((100vw - 20px * 2 - 18px * 3) / 4);
    }
}

@media(max-width:768px){
    .top-category-grid{
        gap:14px;
    }
    .top-category-card{
        width:calc((100vw - 20px * 2 - 14px) / 2);
        min-width:calc((100vw - 20px * 2 - 14px) / 2);
    }
    .category-prev{left:-8px}
    .category-next{right:-8px}
}

@media(max-width:500px){
    .category-arrow{
        width:32px;
        height:32px;
    }
}


/* ================= NEW ARRIVALS ================= */
.new-arrivals-section{
    width:1320px;
    max-width:1320px;
    margin:0 auto;
    padding:25px 0 25px;
    background:#fff;
}

.new-arrivals-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:31px;
}

.new-arrivals-head h2{
    position:relative;
    display:inline-block;
    margin:0;
    font-size:24px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    z-index:1;
}

.new-arrivals-head .title-brush{
    position:absolute;
    width:57px;
    height:13px;
    right:-8px;
    top:17px;
    background:#ead7e0;
    border-radius:50%;
    transform:rotate(4deg);
    z-index:-1;
}

.new-arrivals-head p{
    margin:7px 0 0;
    color:#5f6063;
    font-size:15px;
}

.product-carousel{
    position:relative;
    width:100%;
}

.product-viewport{
    width:100%;
    overflow:hidden;
}

.product-track{
    display:flex;
    gap:19px;
    width:max-content;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.product-card{
    width:291px;
    min-width:291px;
    height:357px;
    background:#fff;
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}

.product-image-wrap{
    position:relative;
    height:220px;
    background:#fff;
    overflow:hidden;
}

.product-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.discount-badge{
    position:absolute;
    z-index:3;
    top:10px;
    left:0;
    padding:6px 11px;
    border-radius:0 4px 4px 0;
    background:#198754;
    color:#fff;
    font-size:14px;
    font-weight:500;
}

.product-info{
    height:137px;
    padding:8px 9px 9px;
}

.rating{
    color:#ffad00;
    font-size:17px;
    line-height:18px;
    letter-spacing:-2px;
    white-space:nowrap;
}

.product-info h3{
    margin:6px 0 0;
    color:#111;
    font-size:14px;
    line-height:17px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.price{
    margin:0px;
    color:#198754;
    font-size:17px;
    font-weight:700;
}

.price del{
    margin-left:3px;
    color:#858585;
    font-size:13px;
    font-weight:400;
}

.product-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:13px;
}

.cart-btn{
    height:31px;
    padding:0 10px;
    border:1px solid #ffcfb4;
    border-radius:17px;
    background:#fff;
    color:#198754;
    font-size:12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
}

.cart-btn:hover{
    background:#538167;
    border-color:#538167;
    color:#fff;
}

.heart-btn{
    border:0;
    background:transparent;
    color:#198754;
    font-size:20px;
    cursor:pointer;
    padding:0 5px;
}

.product-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:#538167;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}

.product-arrow:hover{
    background:#538167;
    color:#fff;
}

.product-arrow:disabled{
    opacity:.3;
    cursor:default;
}

.product-prev{left:-17px}
.product-next{right:-17px}

.promo-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:80px;
}

.promo-banner{
    display:block;
    height:201px;
    overflow:hidden;
    border-radius:5px;
}

.promo-banner img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

@media(max-width:1150px){
    .new-arrivals-section{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }

    .product-card{
        width:calc((100vw - 40px - 3 * 19px) / 4);
        min-width:calc((100vw - 40px - 3 * 19px) / 4);
    }
}

@media(max-width:768px){
    .product-card{
        width:calc((100vw - 40px - 19px) / 2);
        min-width:calc((100vw - 40px - 19px) / 2);
    }

    .promo-row{
        grid-template-columns:1fr;
        margin-top:35px;
    }

    .promo-banner{
        height:auto;
        aspect-ratio:758 / 201;
    }
}

@media(max-width:500px){
    .new-arrivals-head h2{
        font-size:21px;
    }

    .product-card{
        width:calc(100vw - 40px);
        min-width:calc(100vw - 40px);
    }

    .product-prev{left:-8px}
    .product-next{right:-8px}
}


/* ================= CAROUSEL OVERFLOW FIX ================= */
/* Keep every product card fully inside the 1320px content area. */
.new-arrivals-section{
    overflow:visible;
}

.product-carousel{
    width:100%;
    padding:0;
}

.product-viewport{
    width:100%;
    overflow:hidden;
    padding:0 1px 2px;
}

.product-track{
    gap:16px;
}

.product-card{
    width:calc((100% - 48px) / 4);
    min-width:calc((100% - 48px) / 4);
    flex:0 0 calc((100% - 48px) / 4);
}

/* Keep arrows inside the carousel so they never clip the section. */
.product-prev{left:8px}
.product-next{right:8px}

.product-arrow{
    top:42%;
}

/* Four complete cards on the 1320px desktop layout. */
@media(min-width:1151px){
    .product-card{
        width:calc((1320px - 48px) / 4);
        min-width:calc((1320px - 48px) / 4);
        flex-basis:calc((1320px - 48px) / 4);
    }
}

/* At widths below desktop, calculate from the actual available width. */
@media(max-width:1150px){
    .product-card{
        width:calc((100% - 48px) / 4);
        min-width:calc((100% - 48px) / 4);
        flex-basis:calc((100% - 48px) / 4);
    }
}

/* Promotional banners must stay completely inside the 1320px shell. */
.promo-row{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:16px;
    margin-top:55px;
}

.promo-banner{
    width:100%;
    min-width:0;
    height:auto;
    aspect-ratio:758 / 201;
    border-radius:5px;
}

.promo-banner img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Tablet */
@media(max-width:768px){
    .product-card{
        width:calc((100% - 16px) / 2);
        min-width:calc((100% - 16px) / 2);
        flex-basis:calc((100% - 16px) / 2);
    }

    .promo-row{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:35px;
    }

    .promo-banner{
        width:100%;
        aspect-ratio:758 / 201;
    }
}

/* Mobile */
@media(max-width:500px){
    .product-card{
        width:100%;
        min-width:100%;
        flex-basis:100%;
    }

    .product-prev{left:8px}
    .product-next{right:8px}
}


/* FINAL 1320PX PRODUCT/BANNER LAYOUT */
.new-arrivals-section,
.top-category-section,
.marketplace-banner{
    width:1320px;
    max-width:1320px;
    margin-left:auto;
    margin-right:auto;
}

.product-viewport{
    width:1320px;
    max-width:100%;
    overflow:hidden;
}

.product-track{
    display:flex;
    flex-wrap:nowrap;
    gap:16px;
}

.product-card{
    box-sizing:border-box;
    flex:0 0 270.5px;
    width:270.5px;
    min-width:270.5px;
}

.promo-row{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.promo-banner{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:auto;
    overflow:hidden;
    border-radius:5px;
    line-height:0;
}

.promo-banner img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
}

@media(max-width:1150px){
    .marketplace-banner,
    .top-category-section,
    .new-arrivals-section{
        width:100%;
        max-width:100%;
    }

    .product-viewport{
        width:100%;
    }

    .product-card{
        flex:0 0 calc((100% - 48px) / 4);
        width:calc((100% - 48px) / 4);
        min-width:calc((100% - 48px) / 4);
    }
}

@media(max-width:768px){
    .product-card{
        flex:0 0 calc((100% - 16px) / 2);
        width:calc((100% - 16px) / 2);
        min-width:calc((100% - 16px) / 2);
    }

    .promo-row{
        grid-template-columns:1fr;
    }
}

@media(max-width:500px){
    .product-card{
        flex:0 0 100%;
        width:100%;
        min-width:100%;
    }
}

/* ===== FINAL PRODUCT CARD FIT ===== */
.product-viewport{
    width:100%;
    max-width:1320px;
    overflow:hidden;
    padding:0;
}

.product-track{
    gap:15px;
    width:max-content;
    flex-wrap:nowrap;
}

.product-card{
    box-sizing:border-box;
    flex:0 0 270px !important;
    width:270px !important;
    min-width:270px !important;
    height:357px;
}

.product-image-wrap{
    height:220px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
}

.product-image-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.product-info{
    width:100%;
    min-width:0;
    overflow:hidden;
}

.product-info h3{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.product-actions{
    width:100%;
}

.product-prev{
    left:6px;
}

.product-next{
    right:6px;
}

@media(max-width:1150px){
    .product-card{
        flex:0 0 calc((100% - 45px) / 4) !important;
        width:calc((100% - 45px) / 4) !important;
        min-width:calc((100% - 45px) / 4) !important;
    }
}

@media(max-width:768px){
    .product-card{
        flex:0 0 calc((100% - 15px) / 2) !important;
        width:calc((100% - 15px) / 2) !important;
        min-width:calc((100% - 15px) / 2) !important;
    }
}

@media(max-width:500px){
    .product-card{
        flex:0 0 100% !important;
        width:100% !important;
        min-width:100% !important;
    }
}

/* ================= BEST SELLING PRODUCTS ================= */
.best-selling-section{
    width:1320px;
    max-width:1320px;
    margin:0 auto;
    padding:28px 0 45px;
    background:#fff;
}

.best-selling-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:31px;
}

.best-selling-head h2{
    position:relative;
    display:inline-block;
    margin:0;
    font-size:24px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    z-index:1;
}

.best-selling-head p{
    margin:7px 0 0;
    color:#5f6063;
    font-size:15px;
}

.best-selling-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:19px;
}

.best-product-card{
    height:201px;
    min-width:0;
    display:grid;
    grid-template-columns:199px minmax(0, 1fr);
    background:#fff;
    border-radius:5px;
    overflow:hidden;
    box-shadow:0 2px 7px rgba(0,0,0,.04);
}

.best-product-image{
    position:relative;
    width:199px;
    height:201px;
    overflow:hidden;
    background:#fff;
}

.best-product-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.best-discount{
    position:absolute;
    left:0;
    top:10px;
    z-index:3;
    background:#198754;
    color:#fff;
    font-size:13px;
    font-weight:600;
    padding:6px 11px;
    border-radius:0 3px 3px 0;
}

.best-product-info{
    min-width:0;
    padding:42px 15px 12px;
}

.stock{
    color:#118b19;
    font-size:13px;
    font-weight:600;
    margin-bottom:7px;
}

.best-price-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:7px;
}

.best-price-row .rating{
    color:#ffad00;
    font-size:17px;
    letter-spacing:-2px;
    line-height:18px;
    white-space:nowrap;
}

.best-price-row strong{
    color:#198754;
    font-size:17px;
    white-space:nowrap;
}

.best-price-row del{
    color:#888;
    font-size:12px;
    font-weight:400;
}

.best-product-info h3{
    margin:8px 0 0;
    color:#111;
    font-size:14px;
    line-height:17px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.best-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:14px;
}

.view-product-btn{
    height:35px;
    padding:0 13px;
    border:1px solid #ffcfb4;
    border-radius:18px;
    background:#fff;
    color:#198754;
    font-size:13px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:7px;
}

.view-product-btn:hover{
    background:#538167;
    border-color:#538167;
    color:#fff;
}

.best-actions .heart-btn{
    color:#198754;
    font-size:20px;
}

@media(max-width:1150px){
    .best-selling-section{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }
}

@media(max-width:900px){
    .best-selling-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media(max-width:650px){
    .best-selling-grid{
        grid-template-columns:1fr;
    }
    .best-product-card{
        grid-template-columns:180px minmax(0,1fr);
    }
    .best-product-image{
        width:180px;
    }
}

@media(max-width:480px){
    .best-product-card{
        grid-template-columns:145px minmax(0,1fr);
    }
    .best-product-image{
        width:145px;
    }
    .best-product-info{
        padding:30px 10px 10px;
    }
    .best-price-row{
        display:block;
    }
    .best-price-row strong{
        display:block;
        margin-top:4px;
    }
}

/* Existing product cards: PKR + View action */
.price{
    color:#198754;
}
.cart-btn{
    color:#198754;
}


/* ================= BEST SHOPS ================= */
.best-shops-section{
    width:1320px;
    max-width:1320px;
    margin:0 auto;
    padding:27px 0 50px;
    background:#fff;
}

.best-shops-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:31px;
}

.best-shops-head h2{
    position:relative;
    display:inline-block;
    margin:0;
    font-size:24px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    z-index:1;
}

.best-shops-head p{
    margin:7px 0 0;
    color:#5f6063;
    font-size:15px;
}

.best-shops-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
}

.shop-card{
    min-width:0;
    height:309px;
    background:#fff;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
}

.shop-cover{
    position:relative;
    height:120px;
    overflow:hidden;
    background:#fff;
}

.shop-cover > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.shop-logo{
    position:absolute;
    left:12px;
    bottom:-1px;
    width:59px;
    height:59px;
    border:4px solid #fff;
    border-radius:50%;
    background:#f4f4f4;
    color:#538167;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}

.value-logo{
    background:#07152b;
    color:#fff;
    font-size:22px;
}

.shine-logo{
    background:#090909;
    color:#d7b45a;
    font-size:10px;
}

.shop-body{
    position:relative;
    height:189px;
    padding:19px 20px 12px;
}

.shop-rating{
    color:#ffad00;
    font-size:17px;
    line-height:18px;
    letter-spacing:-2px;
    margin-bottom:14px;
}

.shop-chat{
    color:#198754;
    font-size:20px;
    line-height:20px;
    margin-bottom:9px;
}

.shop-body h3{
    margin:0;
    color:#111;
    font-size:16px;
    line-height:19px;
    font-weight:700;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.shop-body p{
    margin:4px 0 0;
    color:#666;
    font-size:12px;
}

.shop-body p strong{
    color:#198754;
    font-size:13px;
}

.shop-actions{
    position:absolute;
    left:20px;
    right:20px;
    bottom:19px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.store-btn{
    height:33px;
    padding:0 14px;
    border:1px solid #198754;
    border-radius:18px;
    background:#198754;
    color:#fff;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.store-btn:hover{
    background:#538167;
    border-color:#538167;
}

.follow-btn{
    height:33px;
    min-width:101px;
    padding:0 14px;
    border:1px solid #ffd6c2;
    border-radius:18px;
    background:#fffaf7;
    color:#198754;
    font-size:12px;
    cursor:pointer;
}

.follow-btn:hover{
    border-color:#538167;
    color:#538167;
    background:#f4f8f5;
}

@media(max-width:1150px){
    .best-shops-section{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }
}

@media(max-width:900px){
    .best-shops-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media(max-width:600px){
    .best-shops-grid{
        grid-template-columns:1fr;
    }
}