.fe-offer-banner-slider {
    width: 100%;
    margin: 20px 0;
    position: relative;
}

.fe-offer-banner-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    gap: 0;
    border-radius: 14px !important;
    scrollbar-width: none;
}

.fe-offer-banner-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.fe-offer-banner-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    border-radius: 14px !important;
    border: 2px solid #ff6b35 !important;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 0;
}

/*
 * থিমের (WoodMart) নিজস্ব img স্টাইল অনেক সময় বেশি specificity বা
 * !important দিয়ে বর্ডার/রাউন্ড-কর্নার রিসেট করে দেয়, ফলে নিচের
 * border-radius আর border আগে কাজ করত না। তাই এখানে সিলেক্টরের
 * specificity বাড়ানো হয়েছে (.fe-offer-banner-slider .fe-offer-banner-track
 * .fe-offer-banner-slide img)।
 *
 * বর্ডার আর radius ইচ্ছাকৃতভাবে img-এর বদলে .fe-offer-banner-slide
 * (প্যারেন্ট) কন্টেইনারে বসানো, img-এ না — কারণ img ট্যাগে সরাসরি
 * border-radius + border + object-fit একসাথে দিলে কিছু মোবাইল
 * ব্রাউজারে (বিশেষত Android) কোণাগুলো ঠিকমতো ক্লিপ না হয়ে সামান্য
 * উঁকি দেয় (image-এর আসল কোণা গোল বর্ডারের বাইরে দেখা যায়)। প্যারেন্টের
 * overflow:hidden দিয়ে ক্লিপ করা সব ব্রাউজারে নির্ভরযোগ্যভাবে কাজ করে।
 */
.fe-offer-banner-slider .fe-offer-banner-track .fe-offer-banner-slide img,
.fe-offer-banner-slide img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    display: block;
}

.fe-offer-banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.fe-offer-banner-dot {
    width: 7px;
    height: 7px;
    border-radius: 50% !important;
    background: #d9d9d9 !important;
    transition: background 0.2s, width 0.2s;
}

.fe-offer-banner-dot.is-active {
    background: #43a047 !important;
    width: 18px;
    border-radius: 4px !important;
}

@media (max-width: 480px) {
    .fe-offer-banner-slider {
        margin: 14px 0;
    }
    .fe-offer-banner-slider .fe-offer-banner-track .fe-offer-banner-slide img,
    .fe-offer-banner-slide img {
        aspect-ratio: 16 / 7;
    }
    .fe-offer-banner-slide {
        border-radius: 10px !important;
    }
    .fe-offer-banner-track {
        border-radius: 10px !important;
    }
}