/* TIMSHOP RESPONSIVE MARKETPLACE DESIGN */
/* Telefon: 2 ustun, Kompyuter: to‘liq premium grid */

:root{
    --mobile-bg:#070b1d;
    --mobile-card:#111729;
    --mobile-line:rgba(255,255,255,.10);
    --accent:#7c3cff;
    --accent2:#2c8cff;
    --danger:#ff4b78;
    --muted:#9ca3b8;
}

/* Umumiy header tartibi */
.shop-header{
    position:sticky;
    top:12px;
    z-index:100;
    backdrop-filter:blur(18px);
}

.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

/* Desktop grid */
.product-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:22px;
}

.product-card{
    position:relative;
    overflow:hidden;
}

.product-img{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1 / 1;
    overflow:hidden;
}

.product-img img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:14px;
}

.product-body h3{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.mobile-like{
    position:absolute;
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.88);
    color:#222;
    font-size:22px;
    box-shadow:0 10px 25px rgba(0,0,0,.18);
    z-index:4;
}

.sale-badge{
    position:absolute;
    top:10px;
    left:10px;
    min-height:28px;
    padding:0 9px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:linear-gradient(135deg,#7047ff,#8b5cff);
    color:#fff;
    font-weight:900;
    font-size:12px;
    z-index:4;
}

/* Pastki mobil menyu */
.mobile-bottom-nav{
    display:none;
}

/* Tablet */
@media(max-width:1100px){
    .product-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:18px;
    }
}

/* Telefon marketplace */
@media(max-width:760px){
    body{
        background:#fff !important;
        color:#14151a !important;
        padding-bottom:86px;
    }

    .shop-shell{
        width:100%;
        padding:0 12px 85px !important;
        margin:0 auto;
    }

    .shop-header{
        top:0;
        margin:0 -12px 10px;
        padding:12px 12px 10px !important;
        border-radius:0 !important;
        border:0 !important;
        background:#fff !important;
        box-shadow:0 6px 24px rgba(0,0,0,.07);
        display:grid !important;
        grid-template-columns:1fr auto;
        gap:10px;
    }

    .shop-brand{
        color:#111 !important;
        font-size:20px !important;
    }

    .shop-brand span{
        width:36px !important;
        height:36px !important;
    }

    .shop-header nav{
        display:none !important;
    }

    .header-actions{
        grid-column:1 / -1;
        width:100%;
        display:grid;
        grid-template-columns:1fr auto;
        gap:10px;
    }

    .mini-search{
        width:100%;
    }

    .mini-search input{
        width:100% !important;
        height:48px !important;
        border-radius:12px !important;
        background:#f0f0f5 !important;
        color:#111 !important;
        border:0 !important;
        font-size:16px !important;
    }

    .pill,
    .primary,
    .cart-badge-btn{
        height:48px !important;
        min-height:48px !important;
        border-radius:12px !important;
        padding:0 13px !important;
        white-space:nowrap;
    }

    .hero{
        display:none !important;
    }

    .category-pills{
        display:flex;
        gap:10px;
        overflow-x:auto;
        padding:10px 0 14px;
        margin:0 !important;
        scrollbar-width:none;
    }

    .category-pills::-webkit-scrollbar{
        display:none;
    }

    .category-pills a{
        flex:0 0 auto;
        min-height:38px;
        padding:0 14px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:999px;
        background:#f2efff !important;
        color:#7a45ff !important;
        font-weight:800;
        border:0 !important;
    }

    .products-section{
        padding:0 !important;
        margin-top:0 !important;
    }

    .section-head{
        padding:8px 2px 14px !important;
        display:flex;
        align-items:center;
        justify-content:space-between;
    }

    .section-head h2{
        color:#202124 !important;
        font-size:22px !important;
    }

    .section-head a{
        color:#7c3cff !important;
        font-weight:800;
    }

    .product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:14px !important;
        align-items:start;
    }

    .product-card{
        border:0 !important;
        border-radius:0 !important;
        background:#fff !important;
        box-shadow:none !important;
        overflow:visible !important;
        min-width:0;
    }

    .product-img{
        width:100%;
        aspect-ratio:1 / 1.18;
        border-radius:13px;
        background:#f5f5f8 !important;
        border:0 !important;
        overflow:hidden;
    }

    .product-img img{
        width:100%;
        height:100%;
        object-fit:cover !important;
        padding:0 !important;
    }

    .product-body{
        padding:9px 2px 0 !important;
    }

    .product-body > span{
        display:none !important;
    }

    .product-body h3{
        color:#24252b !important;
        font-size:14px !important;
        line-height:1.25 !important;
        font-weight:600 !important;
        min-height:35px;
        margin:6px 0 6px !important;
    }

    .price{
        color:#16171c !important;
        font-size:19px !important;
        font-weight:950 !important;
        margin:0 0 4px !important;
    }

    .mobile-like{
        display:flex;
    }

    .sale-badge{
        display:flex;
    }

    .search-actions{
        display:grid !important;
        grid-template-columns:1fr 42px !important;
        gap:7px !important;
        margin-top:8px !important;
    }

    .search-actions .buy-now{
        min-height:42px !important;
        border-radius:10px !important;
        font-size:13px !important;
        background:#eee8ff !important;
        color:#7c3cff !important;
        box-shadow:none !important;
    }

    .search-actions .add-cart{
        min-height:42px !important;
        width:42px !important;
        padding:0 !important;
        border-radius:10px !important;
        font-size:0 !important;
        background:#7c3cff !important;
        border:0 !important;
    }

    .search-actions .add-cart::before{
        content:"🛒";
        font-size:19px;
    }

    .search-actions .wish{
        display:none !important;
    }

    .empty{
        color:#333 !important;
        background:#f7f7fb !important;
        border-radius:14px;
        padding:28px !important;
    }

    .shop-footer{
        display:none !important;
    }

    .mobile-bottom-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        height:72px;
        z-index:999;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        background:#fff;
        border-top:1px solid #ececf2;
        box-shadow:0 -8px 25px rgba(0,0,0,.08);
    }

    .mobile-bottom-nav a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:#7d7f8c;
        font-size:12px;
        font-weight:700;
        text-decoration:none;
        position:relative;
    }

    .mobile-bottom-nav a b{
        font-size:22px;
        line-height:1;
        font-weight:400;
    }

    .mobile-bottom-nav a.active{
        color:#7c3cff;
    }

    .mobile-bottom-nav .nav-count{
        position:absolute;
        top:8px;
        right:22%;
        min-width:18px;
        height:18px;
        padding:0 5px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:999px;
        background:#ff4b78;
        color:#fff;
        font-size:11px;
        font-weight:950;
    }
}

/* Juda kichik telefon */
@media(max-width:360px){
    .product-grid{
        gap:10px !important;
    }

    .product-body h3{
        font-size:13px !important;
    }

    .price{
        font-size:17px !important;
    }
}