/* ==========================================
   FIX FOR SHOP PAGE CONTAINER ALIGNMENT
========================================== */

/* ১. শপ পেজের মূল র‍্যাপার কন্টেইনারকে ফিক্স করা */
.woocommerce-shop #content.site-content,
.archive.woocommerce #content.site-content,
.tax-product_cat #content.site-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    /*padding: 40px 20px !important;*/
    width: 100% !important;
}

/* ২. Woostify থিমের ডিফল্ট কন্টেইনার ওভাররাইড রোধ করা */
.woocommerce-shop .woostify-container,
.archive.woocommerce .woostify-container,
.tax-product_cat .woostify-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    float: none !important;
}

/* ৩. শপ পেজের প্রোডাক্ট গ্রিড গ্যাপ ও মার্জিন এলাইনমেন্ট */
.woocommerce-shop .woocommerce ul.products,
.archive.woocommerce .woocommerce ul.products,
.tax-product_cat .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
    margin: 0 !important;
}

/* মোবাইল এবং ট্যাবলেটের জন্য রেস্পন্সিভ ফিক্স */
@media (max-width: 991px) {
    .woocommerce-shop .woocommerce ul.products,
    .archive.woocommerce .woocommerce ul.products,
    .tax-product_cat .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
}

/* ==========================================
   MOBILE 2-COLUMN PRODUCT GRID FIX
========================================== */
@media (max-width: 768px) {
    /* শপ পেজের প্রোডাক্ট আল্টিমেট গ্রিড বা লিস্টকে ২ কলাম করা */
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products,
    ul.products.mobile-columns-1 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important; /* দুটি কার্ডের মাঝখানের দূরত্ব */
        margin: 0 !important;
        padding: 0 10px !important;
    }

    /* মোবাইল ভিউতে প্রতিটি প্রোডাক্ট কার্ডের উইডথ এবং মার্জিন ফিক্স */
    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    /* মোবাইলে প্রোডাক্ট টাইটেল ও ফন্ট সাইজ সামান্য সামঞ্জস্য করা */
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
    }
}