/* =====================================================
   ResellHat — Frontend Mobile Tweaks
   ফাইলটি Tailwind CDN এর পরে load হবে
   ===================================================== */

/* ==================== MOBILE (≤ 767px) ==================== */
@media (max-width: 767px) {

    /* 🔹 Container — দুই সাইডে gap কমান */
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 🔹 Product Hero Section — উপরের ও নিচের gap কমান */
    .container.py-6 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .container.py-8 {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* 🔹 Product Cards (gallery, info, order-form) — ভেতরের gap কমান */
    .rounded-2xl.border-2 {
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .rounded-xl.border.p-3,
    .rounded-xl.border.p-4,
    .rounded-xl.border.p-6 {
        padding: 10px !important;
        border-radius: 10px !important;
    }

    /* 🔹 Grid gaps — মোবাইলে ছোট gap */
    .gap-6 {
        gap: 10px !important;
    }
    .gap-4 {
        gap: 8px !important;
    }

    /* 🔹 Section padding — মোবাইলে কম জায়গা */
    .container.pb-8 {
        padding-bottom: 12px !important;
    }
    .container.pb-12 {
        padding-bottom: 20px !important;
    }

    /* 🔹 Gallery thumbnail gap কমান */
    .grid.grid-cols-5.gap-2 {
        gap: 4px !important;
    }

    /* 🔹 Breadcrumb — ছোট font */
    nav.bg-white.border-b {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* ==================== VERY SMALL (≤ 375px) ==================== */
@media (max-width: 375px) {
    .container {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .rounded-xl.border.p-3,
    .rounded-xl.border.p-4 {
        padding: 8px !important;
    }
}