/*
Theme Name: My Product Landing
Theme URI: http://example.com/
Author: Ultimate IT Solution
Author URI: https://minhaj-it.com/
Description: A simple AJAX based WooCommerce landing theme with Modal.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-landing
*/

/* এখানে আপনার কাস্টম CSS গুলো থাকবে */
body { font-family: "Segoe UI", Roboto, Arial, sans-serif; background:#fff; color:#222; }
.hero-title { font-size: 42px; font-weight:600; text-align:center; margin:30px 0; }
/*.category-pill {     margin: 5px;*/
/*    border-radius: 5px;*/
/*    padding: 5px 10px;*/
/*    background: #111;*/
/*    color: #fff;*/
/*    cursor: pointer;*/
/*    display: inline-block;*/
/*    border: none;*/
/*    transition: 0.3s;*/
/*    font-size: 14px;}*/
/*.category-pill:hover, .category-pill.active { background:#333; box-shadow:0 3px 0 rgba(0,0,0,0.2); }*/
/* =========================================
   Desktop Styles (Default)
   সব ক্যাটাগরি একসাথে দেখাবে (Wrap হবে)
   ========================================= */
#categoryPills {
    display: flex;
    flex-wrap: wrap;        /* লাইন ভেঙে নিচে নামবে */
    justify-content: center; /* মাঝখানে থাকবে */
    gap: 10px;
    padding: 20px 0;
}

/* বাটনের বেসিক ডিজাইন */
.category-pill {
    display: inline-block;
    border-radius: 10px;
    padding: 8px 15px;
    box-shadow: 0 1px 5px rgba(17, 153, 142, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.category-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 0px 11px rgba(17, 153, 142, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.category-pill.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-color: #111;
    box-shadow: 0 0px 14px rgba(102, 126, 234, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* =========================================
   Mobile Styles (Only for screens < 768px)
   মোবাইলে স্ক্রলবার আসবে এবং এক লাইনে থাকবে
   ========================================= */
@media (max-width: 767px) {
    #categoryPills {
        flex-wrap: nowrap;       /* এক লাইনে জোর করে রাখবে */
        justify-content: flex-start; /* বাম দিক থেকে শুরু হবে */
        overflow-x: auto;        /* স্ক্রল অন হবে */
        padding-bottom: 15px;    /* স্ক্রলবারের জন্য জায়গা */
        
        /* Firefox Scrollbar */
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    /* Custom Scrollbar for Chrome/Safari on Mobile */
    #categoryPills::-webkit-scrollbar {
        height: 5px;             /* চিকন স্ক্রলবার */
        display: block;          /* মোবাইল ভিউতে শো করবে */
    }

    #categoryPills::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    #categoryPills::-webkit-scrollbar-thumb {
        background: #bbb;
        border-radius: 10px;
    }
}
.product-card { border-radius:12px; overflow:hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding:10px; text-align:center;  transition: all 0.3s ease; cursor: pointer; height: 100%; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 15px 20px rgba(102, 126, 234, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.product-thumb { width:100%; max-height: 285px; object-fit:cover; border-radius:10px; background:#e0e0e0; display:block; }
.product-name { margin-top:5px; font-weight:500; color: #fff; }
.load-more-wrap { text-align:center; margin:40px 0; }
.load-more-btn { border-radius:7px; padding: 8px 23px; font-size:18px; color:#fff; border:none; 
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    box-shadow: 0 1px 15px rgba(30, 58, 138, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.breadcrumb-small { font-size:14px; color:#888; margin-bottom:10px; }
.load-more-btn:hover{
        transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* Modal gallery */
.modal-gallery-main .swiper-slide img { width:100%; height:auto; object-fit:contain; border-radius:8px; max-height: 400px; }
.modal-gallery-thumbs .swiper-slide { width:80px; height:80px; opacity:0.6; cursor:pointer; }
.modal-gallery-thumbs .swiper-slide-thumb-active { opacity:1; border:2px solid #0d6efd; border-radius:6px; }
.modal-gallery-thumbs img { width:100%; height:100%; object-fit:cover; border-radius:6px; }