/* ===== BAZAAR STYLES – UPDATED PALETTE ===== */
:root {
    --primary-blue: #2c8aca;
    --primary-dark: #016ea4;
    --accent-gold: #cabb2c;
    --promo-red: #ca2c3b;
    --price-blue: #2c8aca;           /* unified with primary */
    --gradient-start: var(--primary-blue);
    --gradient-end: var(--primary-dark);
}
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
img {
    max-width: 100%;
    height: auto;
}
.container {
   width: 100%;
}
/* ===== RÉDUCTION DES ESPACES ENTRE SECTIONS ===== */
.hero-with-sidebars { padding: 6px 0 !important; }
.ramadan-promo-banner { padding: 0.1rem 0 !important; }
.featured-shops { padding: 30px 0 !important; }
.today-offers { padding: 30px 0 !important; }
.mega-promo { padding: 30px 0 !important; }
.featured-products { padding: 30px 0 !important; }
.market-stats { padding: 40px 0 !important; }
.banner-duo-section { padding: 15px 0 !important; }
.container, .container-fluid { padding-left: 15px; padding-right: 15px; }

/* ===== MOBILE FILTER BUTTON ===== */
.mobile-filter-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: #1a1a1a;
    color: white;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}
.mobile-filter-btn:hover { transform: scale(1.1); background: #333; }
.filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9997; backdrop-filter: blur(3px); }
.filter-overlay.active { display: block; }
@media (max-width: 992px) { .mobile-filter-btn { display: flex; } }
@media (min-width: 993px) { .mobile-filter-btn { display: none !important; } .filter-overlay { display: none !important; } }

/* ===== HERO SECTION  ===== */
.hero-with-sidebars {
    background: #f8f9fa; /* Light background for the whole section */
    padding: 12px 0;    /* Vertical padding for the section */
}
.hero-with-sidebars .container {
    /* Optional: Limit max width for a cleaner look on very large screens */
    max-width: 1300px; 
}
.hero-with-sidebars .row {
    /* Preserve your existing g-3 g-md-4 gutters, but ensure alignment */
    align-items: stretch; /* Ensures columns stretch to equal height */
}

/* Side Banners Container (col-md-2) */
.hero-with-sidebars .col-md-2 {
    display: flex; /* Make the column a flex container */
    flex-direction: column; /* Stack children vertically */
}
.hero-with-sidebars .col-md-2 > .row { /* Target the inner row for the two banners */
    flex: 1; /* Make this inner row fill available vertical space */
    display: flex;
    flex-direction: column;
    /* This gap corresponds to your original g-3 (1rem) on mobile, g-4 (1.5rem) on md+ */
    /* Let's unify for cleaner look */
    gap: 10px; /* Consistent gap between the two side banners */
}
.hero-with-sidebars .col-md-2 > .row > .col-12 {
    flex: 1; /* Each individual banner column takes equal vertical space */
}

/* Individual Side Banner Styling */
.hero-with-sidebars .sidebar-banner {
    height: 100%; /* Ensure banner fills its parent col-12 space */
    border-radius: 12px; /* Rounded corners for the banner container */
    overflow: hidden; /* Crucial to clip image if it overflows */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Soft shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #f0f0f0; /* Fallback background for banners */
}
.hero-with-sidebars .sidebar-banner:hover {
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* Enhanced shadow on hover */
}
.hero-with-sidebars .sidebar-banner > a { /* Target the anchor tag wrapper */
    display: block; /* Make the link fill the entire banner area */
    width: 100%;
    height: 100%;
    text-decoration: none; /* Remove underline */
}
.hero-with-sidebars .sidebar-banner > a > img { /* Target the image inside the link */
    width: 100%;
    height: 100%; /* Make image fill the height of its parent (the <a>) */
    object-fit: cover; /* Cover the area without distorting aspect ratio */
    border-radius: 12px; /* Apply border-radius to the image as well */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}
.hero-with-sidebars .sidebar-banner:hover > a > img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

/* Main Carousel Container (col-md-8) */
.hero-with-sidebars .col-md-8 {
    display: flex; /* Ensure the carousel takes up available space */
    align-items: stretch; /* Make carousel stretch to height of side banners */
}
.hero-with-sidebars .carousel {
    width: 100%;
    border-radius: 12px; /* Match side banners */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Match side banners */
}
.hero-with-sidebars .carousel-item {
    height: 350px !important; /* Adjusted height for desktop carousel */
    background: #f0f0f0; /* Fallback background */
    display: flex; /* Ensure image is centered if smaller */
    align-items: center;
    justify-content: center;
}
.hero-with-sidebars .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area without distorting aspect ratio */
}

/* Carousel Controls (Arrows) */
.hero-with-sidebars .carousel-control-prev,
.hero-with-sidebars .carousel-control-next {
    width: 5%; /* Slightly wider hit area for arrows */
    opacity: 0.7;
    transition: opacity 0.3s, background-color 0.3s;
}
.hero-with-sidebars .carousel-control-prev:hover,
.hero-with-sidebars .carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.15); /* Subtle background on hover */
}
.hero-with-sidebars .carousel-control-prev-icon,
.hero-with-sidebars .carousel-control-next-icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); /* Subtle shadow for better visibility */
    font-size: 1.6rem; /* Larger arrows */
}
/* Carousel Indicators (Dots) */
.hero-with-sidebars .carousel-indicators {
    bottom: 10px; /* Position indicators lower */
}
.hero-with-sidebars .carousel-indicators button {
    width: 8px; /* Larger dots */
    height: 8px;
    border-radius: 50%;
    opacity: 0.6;
    background-color: white; /* White dots for better contrast */
    border: none;
    transition: opacity 0.3s, background-color 0.3s;
    margin: 0 4px; /* Spacing between dots */
}
.hero-with-sidebars .carousel-indicators button.active {
    opacity: 1;
    background-color: var(--primary-blue, #2c8aca); /* Active dot uses primary brand color */
}


/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Tablets and Medium Screens (Bootstrap's md breakpoint) */
@media (max-width: 991.98px) {
    .hero-with-sidebars {
        padding: 8px 0; /* Reduced padding on mobile */
    }
    .hero-with-sidebars .row {
        --bs-gutter-x: 8px; /* Tighter gutters on smaller screens */
        --bs-gutter-y: 8px;
    }

    /* Main carousel takes full width on smaller screens */
    .hero-with-sidebars .col-md-8 { /* Your original col-md-8 */
        order: 1; /* Position carousel at the top */
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .hero-with-sidebars .carousel-item {
        height: 200px !important; /* Smaller carousel height on tablets */
    }

    /* Side banners (your col-md-2) stack below the main carousel */
    .hero-with-sidebars .col-md-2 {
        order: 2; /* Position banners after carousel */
        width: 50%; /* Each column of side banners takes half width */
        flex: 0 0 50%;
        max-width: 50%;
    }
    .hero-with-sidebars .col-md-2 > .row { /* The inner row for the two banners */
        flex-direction: row; /* Banners in stack go side-by-side */
        gap: 8px; /* Horizontal gap between banners in a pair */
    }
    .hero-with-sidebars .col-md-2 > .row > .col-12 {
        flex: 1; /* Each individual banner takes equal width of its parent */
        max-width: 100%; /* Important: allows the flex:1 to work correctly */
    }
    .hero-with-sidebars .sidebar-banner {
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }
}

/* Small Mobile Screens (Bootstrap's sm breakpoint and below) */
@media (max-width: 767.98px) {
    .hero-with-sidebars .carousel-item {
        height: 160px !important; /* Even smaller carousel on small phones */
    }
    /* Both side banner columns now take full width and flow below the carousel */
    .hero-with-sidebars .col-md-2 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* Individual banners within the stack become horizontally scrollable */
    .hero-with-sidebars .col-md-2 > .row { /* The inner row holding the two side banners */
        flex-direction: row;
        flex-wrap: nowrap; /* Prevent individual banners from wrapping */
        overflow-x: auto; /* Enable horizontal scroll for side banners */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding-bottom: 5px; /* Space for scrollbar if it appears */
        gap: 8px; /* Tighter gap between individual banners */
    }
    .hero-with-sidebars .col-md-2 > .row > .col-12 {
        flex: 0 0 48%; /* Each individual banner takes ~48% to fit 2 per row with gap */
        max-width: 48%;
        min-width: 130px; /* Minimum width to prevent banners from becoming too small */
    }
    .hero-with-sidebars .sidebar-banner {
        height: 120px; /* Fixed height for small mobile banners */
    }
}

/* Extra Small Mobile Screens */
@media (max-width: 575.98px) {
    .hero-with-sidebars .carousel-item {
        height: 140px !important;
    }
    .hero-with-sidebars .col-md-2 > .row > .col-12 {
        flex: 0 0 47%; /* Adjust slightly for very small screens */
        max-width: 47%;
        min-width: 120px;
    }
    .hero-with-sidebars .sidebar-banner {
        height: 110px;
        border-radius: 8px;
    }
}

/* ===== SECTION 1B: AFFICHE PUBLICITAIRE ===== */
.ramadan-promo-banner {
    width: 100vw;
    margin: 0;
    padding: 0.1rem 0;
    background: linear-gradient(145deg, #ca2c3b 0%, #a0202e 100%);
    border-top: 1px solid #cabb2c;
    border-bottom: 1px solid #cabb2c;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    overflow: hidden;
}
@keyframes slideInSides {
    0% { transform: translateX(-100%); opacity: 0; }
    50% { transform: translateX(100%); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}
.ramadan-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.2rem 1rem;
    background: rgba(10, 50, 35, 0.35);
    backdrop-filter: blur(1px);
    border-radius: 0;
    border: 1px solid rgba(202, 44, 59, 0.6);
    box-shadow: 0 0 3px rgba(255,215,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    animation: slideInSides 1s ease-out forwards;
	animation: ramadan-loop 5s linear infinite;
    will-change: transform, opacity;
}
@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.3), 0 0 10px rgba(255,255,255,0.2), 0 0 15px rgba(255,255,255,0.1); color: #fffbe0; }
    50% { text-shadow: 0 0 8px rgba(255,255,255,0.8), 0 0 15px rgba(255,255,255,0.6), 0 0 25px rgba(255,255,255,0.4); color: #fffad0; }
}
.ramadan-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
    color: #fbe4a0;
    animation: glowPulse 2s infinite ease-in-out;
}
.ramadan-subtitle { font-size: 0.8rem; font-weight: 500; color: #fff4cf; margin: 0; }
.ramadan-discount { font-size: 0.9rem; font-weight: 700; background: #cabb2c; color: #0a2f1f; padding: 0.05rem 0.6rem; border-radius: 14px; margin: 0; box-shadow: 0 1px 0 #7e5d1e; }
.ramadan-order { font-size: 0.7rem; font-weight: 400; color: #fff0c0; margin: 0; }
.ramadan-phone {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fadf8a;
    text-decoration: none;
    background: #016ea4;
    padding: 0.15rem 0.8rem;
    border-radius: 20px;
    border: 1px solid #cabb2c;
    transition: 0.2s ease;
    box-shadow: 0 1px 0 #0f2c1f;
    white-space: nowrap;
}
.ramadan-phone:hover { background: #2c8aca; color: #ffe070; border-color: #ffd966; transform: translateY(-1px); }
@media (max-width: 768px) {
    .ramadan-card { padding: 0.2rem 0.5rem; gap: 0.4rem; }
    .ramadan-title { font-size: 0.9rem; }
    .ramadan-subtitle { font-size: 0.75rem; }
    .ramadan-discount { font-size: 0.8rem; padding: 0.05rem 0.5rem; }
    .ramadan-order { font-size: 0.65rem; }
    .ramadan-phone { font-size: 0.75rem; padding: 0.1rem 0.6rem; }
}
/* Animation boucle 5s — collez ceci dans votre CSS */
.ramadan-promo-banner { overflow: hidden; }

@keyframes ramadan-loop {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { transform: translateX(0);     opacity: 1; }
  80%  { transform: translateX(0);     opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* ===== SECTION 2: OFFRE D'AUJOURD'HUI ===== */
.today-offers {
    background: #ffffff;
    position: relative;
    overflow: visible !important; /* Changé de 'hidden' à 'visible' pour les flèches */
    padding: 30px 0;
}

/* Titre de la section */
.offers-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* Badge promotionnel */
.offer-badge {
    display: inline-block;
    background: var(--promo-red, #ca2c3b);
    color: white;
    padding: 4px 12px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
    box-shadow: 0 3px 10px rgba(202,44,59,0.3);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Sous-titre */
.offers-section-subtitle {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Navigation (cachée par défaut) */
.offers-nav { 
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    margin: 15px 0; 
}

.offers-nav-btn {
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    border: 1px solid #e0e0e0;
    background: white; 
    color: #333; 
    font-size: 16px; 
    cursor: pointer;
    transition: all 0.3s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.offers-nav-btn:hover { 
    background: var(--primary-blue, #2c8aca); 
    color: white; 
    border-color: var(--primary-blue, #2c8aca); 
    transform: scale(1.1); 
}

/* ===== CONTENEURS DU CARROUSEL AVEC FLÈCHES ===== */
.offers-carousel-container { 
    position: relative; 
    margin-top: 15px; 
    overflow: visible !important; /* Essentiel pour voir les flèches */
}

/* S'assurer que le container parent ne cache pas les flèches */
.today-offers .container,
.today-offers .container > div {
    overflow: visible !important;
}

/* Le carrousel lui-même */
.offers-carousel {
    display: flex; 
    gap: 10px; 
    overflow-x: auto; 
    scroll-behavior: smooth;
    padding: 5px 0; 
    -ms-overflow-style: none; 
    scrollbar-width: none;
}

.offers-carousel::-webkit-scrollbar { 
    display: none; 
}

/* ===== FLÈCHES DE DÉFILEMENT ===== */
.offers-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #e0e0e0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #333;
}

/* Position gauche */
.offers-scroll-btn.left {
    left: -15px;
}

/* Position droite */
.offers-scroll-btn.right {
    right: -15px;
}

/* Effet au survol */
.offers-scroll-btn:hover {
    background: var(--primary-blue, #2c8aca);
    color: white;
    border-color: var(--primary-blue, #2c8aca);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(44,138,202,0.3);
}

/* Style pour les flèches désactivées */
.offers-scroll-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ===== CARTES PRODUITS ===== */
.offer-item { 
    flex: 0 0 auto; 
    width: 200px; 
}

.offer-card {
    background: white; 
    border-radius: 10px; 
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.03); 
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0; 
    cursor: pointer;
}

.offer-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(44,138,202,0.1);
    border-color: var(--primary-blue, #2c8aca);
}

/* Image du produit */
.offer-image { 
    position: relative; 
    width: 100%; 
    height: 120px; 
    overflow: hidden; 
    background: #f8f9fa; 
}

.offer-image img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.4s ease; 
}

.offer-card:hover .offer-image img { 
    transform: scale(1.05); 
}

/* Détails du produit */
.offer-details { 
    padding: 10px 8px; 
    text-align: left; 
}

.offer-title {
    font-size: 14px; 
    font-weight: 500; 
    color: #333; 
    margin-bottom: 4px;
    line-height: 1.3; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden; 
    min-height: 36px;
}

.offer-price { 
    font-size: 15px; 
    font-weight: 700; 
    color: var(--price-blue, #2c8aca); 
    margin: 0; 
}

/* ===== RESPONSIVE ===== */
/* Tablette */
@media (max-width: 768px) {
    .offers-section-title { 
        font-size: 24px; 
    }
    
    .offer-badge { 
        font-size: 14px; 
        padding: 3px 10px; 
    }
    
    .offers-section-subtitle { 
        font-size: 13px; 
    }
    
    .offer-item { 
        width: 140px; 
    }
    
    .offer-image { 
        height: 100px; 
    }
    
    .offer-title { 
        font-size: 12px; 
        min-height: 32px; 
    }
    
    .offer-price { 
        font-size: 13px; 
    }
    
    /* Masquer les flèches sur tablette */
    .offers-scroll-btn {
        display: none !important;
    }
    
    /* Permettre le défilement tactile */
    .offers-carousel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .offer-item { 
        width: 120px; 
    }
    
    .offer-image { 
        height: 85px; 
    }
    
    .offer-title { 
        font-size: 11px; 
        min-height: 28px; 
    }
    
    .offer-price { 
        font-size: 12px; 
    }
    
    .offers-carousel {
        padding: 5px 10px;
    }
}

/* Petit mobile */
@media (max-width: 480px) {
    .offer-item { 
        width: 105px; 
    }
    
    .offer-image { 
        height: 75px; 
    }
    
    .offers-nav { 
        display: none; 
    }
    
    /* Assurer que les flèches sont masquées */
    .offers-scroll-btn {
        display: none !important;
    }
}

/* Grand écran */
@media (min-width: 1200px) {
    .offers-scroll-btn.left {
        left: -20px;
    }
    
    .offers-scroll-btn.right {
        right: -20px;
    }
}

/* Très grand écran */
@media (min-width: 1600px) {
    .offers-scroll-btn.left {
        left: -30px;
    }
    
    .offers-scroll-btn.right {
        right: -30px;
    }
    
    .offers-scroll-btn {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
}
/* ===== POPULAR PRODUCTS ===== */
.popular-products{
background:var(--primary-blue)!important;
padding:8px 0;
font-family:'Poppins',sans-serif;
position:relative;
}

.popular-products .section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin:0 10px 6px 10px;
color:#fff;
}

.popular-products .section-header h2{
font-size:22px;
font-weight:700;
margin:0;
}

.popular-products .see-more{
background:rgba(255,255,255,0.15);
padding:6px 12px;
border-radius:20px;
color:#fff;
font-size:12px;
text-decoration:none;
}

.carousel-wrapper{
position:relative;
}

.products-carousel{
display:flex;
gap:10px;
padding:5px 30px;
overflow:hidden;
scroll-behavior:smooth;
}

.scroll-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
background:#fff;
border:none;
width:36px;
height:36px;
border-radius:50%;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
font-size:18px;
cursor:pointer;
z-index:20;
display:flex;
align-items:center;
justify-content:center;
}

.scroll-btn.left{left:5px;}
.scroll-btn.right{right:5px;}

.product-card{
background:#fff;
min-width:140px;
max-width:140px;
border-radius:10px;
overflow:hidden;
flex-shrink:0;
font-size:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

.product-image{
height:100px;
background:#f5f7f9;
position:relative;
}

.product-image img{
width:100%;
height:100%;
object-fit:cover;
}

.discount{
position:absolute;
top:6px;
left:6px;
background:linear-gradient(135deg,var(--promo-red),#a0202e);
color:#fff;
font-size:10px;
padding:3px 6px;
border-radius:14px;
}

.product-info{
padding:8px;
}

.product-name{
font-size:12px;
font-weight:600;
height:30px;
overflow:hidden;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}

.product-price .current{
font-weight:700;
color:var(--price-blue);
font-size:12px;
}

.product-price .old{
text-decoration:line-through;
font-size:10px;
color:#999;
margin-left:4px;
}

/* MOBILE */
@media(max-width:768px){

.products-carousel{
overflow-x:auto;
padding:5px 10px;
}

.scroll-btn{
display:none;
}

.product-card{
min-width:120px;
max-width:120px;
}

.product-image{
height:85px;
}

.product-name{
font-size:11px;
height:26px;
}

}
/* ===== BANNIÈRES DYNAMIQUES - MOBILE HORIZONTAL SCROLL ===== */
@media (max-width: 767px) {
    .banner-duo-section { padding: 10px 0; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
    .banner-duo-section .row {
        display: flex; flex-direction: row; gap: 12px; margin: 0; flex-wrap: nowrap;
    }
    .banner-duo-section [class*="col-"] {
        flex: 0 0 auto; width: 320px; max-width: 320px; padding: 0;
    }
    .banner-link { width: 100%; margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .banner-image { width: 100%; height: 160px; object-fit: cover; transition: transform 0.5s ease; }
    .banner-link:hover .banner-image { transform: scale(1.02); }
}
@media (max-width: 480px) {
    .banner-duo-section [class*="col-"] { width: 260px; max-width: 260px; }
    .banner-image { height: 130px; }
}

/* ===== FEATURED SHOPS - HORIZONTAL SCROLL ===== */
.featured-shops { background: #f8f9fa; }
.shops-scroll-container { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 15px; }
.shops-scroll-container::-webkit-scrollbar { height: 8px; }
.shops-scroll-container::-webkit-scrollbar-track { background: #e9ecef; border-radius: 10px; }
.shops-scroll-container::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 10px; }
.shops-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }
.shops-flex { display: flex; flex-direction: row; gap: 20px; padding: 5px 0; width: max-content; }
.shop-tile {
    position: relative; width: 180px; min-width: 180px; aspect-ratio: 1 / 1;
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; display: block;
}
.shop-tile:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.shop-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.shop-tile:hover img { transform: scale(1.05); }
.shop-tile-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white; padding: 15px 10px 10px; text-align: center;
}
.shop-tile-overlay h3 {
    margin: 0; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shop-tile.view-more-tile { background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark)); display: flex; align-items: center; justify-content: center; }
.view-more-content { text-align: center; color: white; }
.view-more-content i { font-size: 32px; margin-bottom: 10px; display: block; }
.view-more-content span { font-size: 16px; font-weight: 600; }
.scroll-hint { color: #6c757d; font-size: 14px; }
.scroll-hint i { color: var(--primary-blue); margin: 0 5px; }
@media (max-width: 767px) {
    .featured-shops { padding-top: 15px !important; padding-bottom: 15px !important; }
    .featured-shops .section-header { margin-bottom: 8px !important; }
    .featured-shops .section-title { margin-bottom: 2px !important; font-size: 20px; }
    .featured-shops .section-subtitle { margin-bottom: 5px !important; font-size: 13px; }
    .shops-scroll-container { padding-bottom: 8px; }
    .shops-flex { gap: 10px !important; padding: 2px 0; }
    .shop-tile { width: 140px; min-width: 140px; border-radius: 10px; }
    .shop-tile-overlay { padding: 10px 8px 6px; }
    .shop-tile-overlay h3 { font-size: 12px; }
    .view-more-content i { font-size: 24px; margin-bottom: 5px; }
    .view-more-content span { font-size: 13px; }
    .scroll-hint { margin-top: 5px !important; font-size: 12px; }
    .scroll-hint i { font-size: 10px; }
    .shops-scroll-container::-webkit-scrollbar { height: 4px; }
}
@media (max-width: 480px) {
    .shop-tile { width: 120px; min-width: 120px; }
    .shops-flex { gap: 8px !important; }
}
@media (min-width: 1200px) { .shop-tile { width: 220px; min-width: 220px; } .shops-flex { gap: 25px; } }
@media (min-width: 768px) and (max-width: 1199px) { .shop-tile { width: 200px; min-width: 200px; } }

/* ===== MEGA PROMO COMPACT ===== */
.mega-promo-compact { width: 100%; padding: 0.4rem 1rem; font-family: 'Poppins', sans-serif; }
.mega-promo-compact .container { max-width: 100%; padding: 0; }
.mega-promo-compact .promo-wrapper {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: 0.4rem 1rem; background: #fff3f6; border-radius: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.promo-badge { font-size: 0.75rem; background: var(--promo-red); color: #fff; padding: 0.15rem 0.5rem; border-radius: 50px; font-weight: 600; }
.promo-title { font-size: 1rem; font-weight: 700; margin: 0; color: #333; }
.btn-primary {
    font-size: 0.75rem; padding: 0.25rem 0.7rem; border-radius: 50px;
    background: var(--accent-gold); border: none; margin-top: 0.2rem; color: #000;
}
.countdown-wrapper { display: flex; gap: 0.5rem; }
.countdown-item { text-align: center; background: #fff; padding: 0.25rem 0.4rem; border-radius: 8px; min-width: 35px; }
.countdown-value { font-size: 0.9rem; font-weight: 700; color: var(--promo-red); }
.countdown-label { font-size: 0.6rem; color: #666; }
@media (max-width: 768px) { .mega-promo-compact .promo-wrapper { flex-direction: column; gap: 0.5rem; text-align: center; } }

/* ===== RECOMMANDÉ POUR VOUS ===== */
.recommended-section { background: #ffffff; border-top: 1px solid #eef2f6; padding: 20px 0; }
.recommended-section .section-header { position: relative; margin-bottom: 12px; }
.recommended-section .section-title {
    font-size: 1.6rem; font-weight: 700; color: #1e293b; margin: 0;
    position: relative; display: inline-block;
}
.recommended-section .section-title::after {
    content: ""; position: absolute; left: 0; bottom: -6px; width: 40px; height: 3px;
    background: linear-gradient(135deg, var(--promo-red), #a0202e); border-radius: 2px;
}
.rec-carousel-wrapper { position: relative; }
.recommended-carousel {
    display: flex; gap: 14px; overflow: hidden; padding: 8px 50px; scroll-behavior: smooth;
}
.rec-scroll-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.25);
    cursor: pointer; z-index: 20; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.rec-scroll-btn.left { left: 5px; }
.rec-scroll-btn.right { right: 5px; }
.rec-scroll-btn:hover { background: var(--primary-blue); color: #fff; }
.rec-card {
    flex: 0 0 auto; width: 140px; background: #fff; border-radius: 14px;
    overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease; cursor: pointer;
    border: 1px solid #f0f0f0;
}
.rec-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }
.rec-image { position: relative; width: 100%; height: 110px; background: #f5f7f9; overflow: hidden; border-bottom: 1px solid #f0f0f0; }
.rec-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.rec-card:hover .rec-image img { transform: scale(1.08); }
.rec-discount {
    position: absolute; top: 6px; left: 6px;
    background: linear-gradient(135deg, var(--promo-red), #a0202e);
    color: #fff; font-size: 10px; font-weight: 600; padding: 3px 7px; border-radius: 14px;
}
.rec-info { padding: 6px 8px; text-align: left; }
.rec-name {
    font-size: 12px; font-weight: 600; color: #333; margin-bottom: 4px;
    line-height: 1.2; height: 28px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rec-price { font-size: 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rec-price .current { font-weight: 700; color: var(--price-blue); }
.rec-price .old { text-decoration: line-through; color: #999; font-size: 10px; }
@media (max-width: 768px) {
    .recommended-carousel { overflow-x: auto; padding: 8px 0; }
    .rec-scroll-btn { display: none; }
}
@media (max-width: 576px) {
    .rec-card { width: 115px; }
    .rec-image { height: 85px; }
    .rec-name { font-size: 11px; height: 24px; }
    .rec-price { font-size: 11px; }
}

/* ===== BANNER BONS PLANS ===== */
.bons-plans-banner{
background:linear-gradient(135deg,var(--primary-blue),var(--primary-dark));
padding:18px 0;
text-align:center;
position:relative;
overflow:hidden;
width:100%;
}

.bons-plans-banner::before{
content:'';
position:absolute;
top:0;
left:-150%;
width:150%;
height:100%;
background:rgba(255,255,255,0.25);
transform:skewX(-25deg);
animation:shine 3s infinite;
}

@keyframes shine{
0%{left:-150%;}
20%{left:100%;}
100%{left:100%;}
}

.bons-plans-banner h2{
color:#fff;
font-size:1.6rem;
font-weight:700;
text-transform:uppercase;
margin:0;
line-height:1.2;
text-shadow:1px 1px 6px rgba(0,0,0,0.4);
}

/* MOBILE */
@media(max-width:768px){

.bons-plans-banner{
padding:12px 0;
}

.bons-plans-banner h2{
font-size:1.2rem;
}

}

@media(max-width:480px){

.bons-plans-banner{
padding:10px 0;
}

.bons-plans-banner h2{
font-size:1rem;
}

}

/* ===== TOP VENTE SECTION ===== */
.top-vente-section { padding: 30px 0; background: #fff; font-family: 'Poppins', sans-serif; }
.top-vente-section .section-header { display: flex; justify-content: space-between; align-items: center; }
.top-vente-section .section-title {
    font-size: 2rem; font-weight: 700; color: #333; margin: 0;
    position: relative; padding-bottom: 10px;
}
.top-vente-section .section-title:after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px;
    background: var(--primary-blue); border-radius: 3px;
}
.voir-plus-link { color: var(--primary-blue); font-weight: 600; font-size: 14px; text-decoration: none; padding: 8px 12px; background: rgba(44,138,202,0.1); border-radius: 20px; transition: all 0.3s ease; white-space: nowrap; }
.voir-plus-link:hover { background: var(--primary-blue); color: white; }

/* Mobile horizontal scroll */
.top-vente-mobile-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; padding-bottom: 15px; margin-bottom: 5px; }
.top-vente-mobile-scroll::-webkit-scrollbar { height: 4px; }
.top-vente-mobile-scroll::-webkit-scrollbar-track { background: #e9ecef; border-radius: 10px; }
.top-vente-mobile-scroll::-webkit-scrollbar-thumb { background: var(--primary-blue); border-radius: 10px; }
.top-vente-mobile-flex { display: flex; flex-direction: row; gap: 15px; padding: 5px 0; width: max-content; }
.top-vente-mobile-item { text-align: center; cursor: pointer; width: 120px; min-width: 120px; transition: transform 0.3s ease; padding: 8px 5px 5px; border-radius: 12px; text-decoration: none; color: inherit; display: flex; flex-direction: column; height: auto; }
.top-vente-mobile-item:hover { transform: translateY(-3px); background: rgba(44,138,202,0.05); }
.top-vente-mobile-item .circle {
    width: 90px; height: 90px; border-radius: 50%;
    background: linear-gradient(145deg, var(--primary-blue), var(--primary-dark));
    display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
    box-shadow: 0 8px 18px rgba(44,138,202,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #fff; flex-shrink: 0;
}
.top-vente-mobile-item .circle img { width: 94%; height: 94%; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid rgba(255,255,255,0.3); }
.top-vente-mobile-item .product-name-container { width: 100%; margin-top: 5px; min-height: 45px; display: flex; align-items: flex-start; justify-content: center; }
.top-vente-mobile-item .product-name { font-size: 11px; font-weight: 500; color: #333; margin: 0; line-height: 1.4; text-align: center; width: 100%; word-break: break-word; white-space: normal; display: block; }
.voir-plus-tile { text-decoration: none; display: flex; flex-direction: column; }
.voir-plus-circle { background: linear-gradient(145deg, var(--accent-gold), #b09b24) !important; display: flex; align-items: center; justify-content: center; }
.voir-plus-circle i { font-size: 32px; color: white; }

/* Desktop grid */
.top-vente-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 20px; justify-items: center; align-items: start; }
.top-vente-item { text-align: center; cursor: pointer; transition: transform 0.3s ease; width: 100%; max-width: 160px; display: flex; flex-direction: column; height: auto; }
.top-vente-item:hover { transform: translateY(-6px); }
.top-vente-item .circle {
    width: 130px; height: 130px; border-radius: 50%;
    background: linear-gradient(145deg, var(--primary-blue), var(--primary-dark));
    display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
    box-shadow: 0 8px 18px rgba(44,138,202,0.35); transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #fff; flex-shrink: 0;
}
.top-vente-item .circle img { width: 96%; height: 96%; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid rgba(255,255,255,0.3); }
.top-vente-item .product-name-container { width: 100%; margin-top: 5px; min-height: 45px; display: flex; align-items: flex-start; justify-content: center; }
.top-vente-item .product-name { font-size: 14px; font-weight: 500; color: #333; margin: 0; line-height: 1.4; text-align: center; width: 100%; word-break: break-word; white-space: normal; display: block; }
.btn-outline-primary {
    color: var(--primary-blue); border-color: var(--primary-blue); padding: 10px 25px;
    border-radius: 30px; font-weight: 600; transition: all 0.3s ease;
}
.btn-outline-primary:hover { background: var(--primary-blue); color: white; border-color: var(--primary-blue); }

@media (max-width: 767px) {
    .top-vente-section { padding: 30px 0; }
    .top-vente-section .section-title { font-size: 1.5rem; padding-bottom: 8px; }
    .top-vente-section .section-title:after { width: 40px; height: 2px; }
    .top-vente-mobile-item { width: 115px; min-width: 115px; }
    .top-vente-mobile-item .product-name-container { min-height: 40px; }
    .top-vente-mobile-item .product-name { font-size: 10.5px; }
}
@media (max-width: 480px) {
    .top-vente-mobile-item { width: 105px; min-width: 105px; }
    .top-vente-mobile-item .circle { width: 80px; height: 80px; }
    .top-vente-mobile-item .product-name-container { min-height: 40px; }
    .top-vente-mobile-item .product-name { font-size: 10px; }
    .voir-plus-circle i { font-size: 28px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .top-vente-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; }
    .top-vente-item .circle { width: 110px; height: 110px; }
    .top-vente-item .product-name { font-size: 13px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .top-vente-grid { grid-template-columns: repeat(8, 1fr); gap: 15px; }
    .top-vente-item .circle { width: 110px; height: 110px; }
    .top-vente-item .product-name { font-size: 13px; }
}
@media (min-width: 1200px) {
    .top-vente-item .circle { width: 130px; height: 130px; }
    .top-vente-item .product-name { font-size: 14px; }
}

/* ===== UNIVERS FOOD & RESTAURATION BANNER ===== */
.food-univers-banner {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.food-bg-image {
  background-image: url('https://images.unsplash.com/photo-1561758033-7e924f619b47?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #000;
  width: 100%;
  height: 100%;
  min-height: 200px;
  position: relative;
  display: block;
}
.food-overlay {
  background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
}
.food-content-wrapper {
  padding: 20px 30px;
  color: #fff;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.food-main-heading {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  color: #fff;
}
.food-main-heading span {
  font-size: 1.8rem;
  font-weight: 400;
  display: block;
  margin-top: 5px;
  letter-spacing: 1px;
}
@media (min-width: 768px) {
  .food-bg-image {
    background-size: cover;
    background-position: center 30%;
    min-height: 200px;
  }
  .food-main-heading {
    font-size: 2.5rem;
  }
  .food-main-heading span {
    font-size: 2rem;
    font-weight: 300;
  }
}
@media (max-width: 767px) {
  .food-bg-image {
    min-height: 150px;
    background-size: contain;
    background-position: center;
  }
  .food-overlay {
    min-height: 150px;
    background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 100%);
  }
  .food-content-wrapper {
    padding: 15px 20px;
  }
  .food-main-heading {
    font-size: 1.5rem;
  }
  .food-main-heading span {
    font-size: 1.2rem;
    margin-top: 3px;
  }
}
@media (max-width: 480px) {
  .food-bg-image {
    min-height: 130px;
    background-size: contain;
    background-position: center;
  }
  .food-overlay {
    min-height: 130px;
  }
  .food-main-heading {
    font-size: 1.3rem;
  }
  .food-main-heading span {
    font-size: 1rem;
  }
}

















/* ===== MARKET STATS ===== */
.market-stats { padding: 60px 0; background: #f4f6fb; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
.stat-circle {
    width: 140px; aspect-ratio: 1/1; border-radius: 50%; margin: 0 auto;
    background: linear-gradient(145deg, #fff, #e0f0ff); display: flex;
    align-items: center; justify-content: center; transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); cursor: pointer; position: relative;
}
.stat-circle::before {
    content: ''; position: absolute; width: 85%; height: 85%;
    border: 2px dashed rgba(44,138,202,0.3); border-radius: 50%; transition: 0.5s;
}
.circle-content { position: relative; z-index: 2; text-align: center; padding: 10px; }
.circle-content i { font-size: 26px; margin-bottom: 8px; color: var(--primary-blue); transition: 0.3s; }
.circle-content p { margin: 0; font-size: 14px; color: #666; }
.circle-content h2 { font-size: 26px; font-weight: 700; margin-top: 5px; color: var(--primary-blue); }
.stat-circle:hover { transform: translateY(-8px) scale(1.08); box-shadow: 0 20px 35px rgba(44,138,202,0.2); }
.stat-circle:hover::before { border-color: var(--primary-blue); transform: rotate(180deg); }
.stat-circle:hover i { color: var(--primary-dark); transform: scale(1.2); }
@media (max-width: 768px) {
    .stats-grid { display: flex; overflow-x: auto; gap: 20px; padding: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .stat-circle { flex: 0 0 auto; scroll-snap-align: center; width: 90px; }
}
@media (max-width: 576px) {
    .stat-circle { width: 110px; }
    .circle-content h2 { font-size: 18px; }
    .circle-content p { font-size: 13px; }
    .circle-content i { font-size: 20px; }
}

/* ===== BANNER SLIDER (AUTO‑PLAY - FULL WIDTH) ===== */
.banner-slider-section.full-width { background: transparent; margin: 0; padding: 0; width: 100%; max-width: 100%; overflow: hidden; }
.banner-slider-container { position: relative; width: 100%; overflow: hidden; }
.banner-slides { position: relative; width: 100%; height: 0; padding-bottom: 28%; background: transparent; }
.banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; }
.banner-slide.banner-active { opacity: 1; visibility: visible; }
.banner-slider-link, .banner-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 992px) { .banner-slides { padding-bottom: 32%; } }
@media (max-width: 768px) { .banner-slides { padding-bottom: 40%; } }
@media (max-width: 480px) { .banner-slides { padding-bottom: 45%; } }
/* ===== MEGA DEAL BADGE MOBILE ANIMATION ===== */

.mega-promo-compact .promo-badge{
    background: linear-gradient(45deg,#ff003c,#ff7a00);
    color:#fff;
    font-weight:700;
    position:relative;
    overflow:hidden;
    animation:badgePulse 1.5s infinite;
}

/* glow */
@keyframes badgePulse{
    0%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(255,0,60,0.6);
    }
    50%{
        transform:scale(1.15);
        box-shadow:0 0 14px rgba(255,0,60,0.9);
    }
    100%{
        transform:scale(1);
        box-shadow:0 0 0 rgba(255,0,60,0.6);
    }
}

/* moving shine */
.mega-promo-compact .promo-badge::after{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );
    transform:skewX(-20deg);
    animation:shineMove 2.5s infinite;
}

@keyframes shineMove{
    0%{ left:-120%; }
    50%{ left:120%; }
    100%{ left:120%; }
}
/* top vente*/ 
.top-vente-page .page-title { font-size:1.5rem; margin:0; }
.filters-row { border:1px solid #eef2f6; }
.store-banner img { height:150px; object-fit:cover; }
.banner-fallback { background:#f8fafc; min-height:150px; }
.product-card { cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.product-card:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.product-img-wrap { height:160px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product-img-wrap img { object-fit:cover; height:100%; width:100%; }
.product-title { font-size:0.95rem; line-height:1.2; margin:0; height:2.4em; overflow:hidden; }
.price { color:#0d6efd; }
@media (max-width:767.98px){
  .product-img-wrap { height:120px; }
  .store-banner img, .banner-fallback { height:110px; }
  .filters-row .form-control, .filters-row .form-select { font-size:.9rem; }
}