/* ════════════════════════════════════════════════════════════════
   JAD MALL CI — CORRECTIFS MOBILE v4 FINAL
   ✅ Slider desktop : intact (aucune règle position/display)
   ✅ Boutiques partenaires : rail horizontal mobile
   ✅ Services, iblocs, fp-cards, layout : tous corrigés
════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   1. SLIDER PRINCIPAL
   ⚠️  On ne touche QU'à la taille, jamais à position/display
   ⚠️  Le JS <?php if (!$isMobile) ?> doit rester INTACT
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-hero { padding: 0 !important; }

    .jm-slider-wrap {
        border-radius: 8px !important;
        overflow: hidden !important;
        min-height: 160px;
    }

    /* Taille uniquement — nivo gère le positionnement */
    .nivoSlider { width: 100% !important; }

    img.nivo-main-image {
        width: 100% !important;
        height: auto !important;
        max-height: 220px !important;
        object-fit: cover !important;
    }

    .nivo-controlNav { bottom: 8px !important; }
    .nivo-directionNav a {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        margin-top: -15px !important;
    }
}

/* ══════════════════════════════════════════════════════
   2. BLOCS SERVICES — rail horizontal scrollable
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-services {
        margin-top: 10px !important;
        padding: 0 8px !important;
    }

    .jm-services > .row,
    .jm-services .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .jm-services .row::-webkit-scrollbar { display: none; }

    .jm-services .col,
    .jm-services [class*="col-"] {
        flex: 0 0 148px !important;
        width: 148px !important;
        max-width: 148px !important;
        padding: 0 !important;
        float: none !important;
    }

    .block-wrapper .text-des {
        padding: 10px !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .block-wrapper .text-des i  { font-size: 17px !important; }
    .block-wrapper .text-des h4 { font-size: 9px !important; margin-bottom: 1px !important; }
    .block-wrapper .text-des p  { font-size: 9px !important; line-height: 1.3 !important; }
}

/* ══════════════════════════════════════════════════════
   3. BANNIÈRES LATÉRALES
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-side-banners {
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 0 10px 8px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .jm-side-banners::-webkit-scrollbar { display: none; }

    .jm-side-banner {
        flex: 0 0 200px !important;
        height: 120px !important;
    }
}

/* ══════════════════════════════════════════════════════
   4. LAYOUT — annuler push/pull Bootstrap
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .col-sm-push-4, .col-md-push-3 { left: 0 !important; }
    .col-sm-pull-8, .col-md-pull-9 { right: 0 !important; }

    .col-main,
    .jm-sidebar {
        width: 100% !important;
        float: none !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .main-container { overflow-x: hidden !important; }
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .row {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
}

/* ══════════════════════════════════════════════════════
   5. IBLOCS CATÉGORIES
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-iblocs-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .jm-ibloc-head       { padding: 9px 10px !important; }
    .jm-ibloc-head-title { font-size: 10px !important; }
    .jm-ibloc-ring       { width: 50px !important; height: 50px !important; }
    .jm-ibloc-item       { padding: 10px 6px 8px !important; }
    .jm-ibloc-lbl        { font-size: 9px !important; max-width: 68px !important; }
}

/* ══════════════════════════════════════════════════════
   6. BOUTIQUES PARTENAIRES
   ─────────────────────────────────────────────────────
   PROBLÈME CAPTURÉ : les logos s'empilent en colonne
   CAUSE : flexslider génère soit :
     • ul.slides > li  (structure jQuery flexslider)
     • div.slider-items > div.product-item (structure custom)
   On cible LES DEUX structures + le wrapper .home-tab
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* Wrapper général boutiques */
    #related-posts,
    #related-posts .flex-viewport,
    #related-posts .flexslider {
        overflow: visible !important;
    }

    /* ── Structure flexslider standard : ul.slides > li ── */
    #related-posts ul.slides {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 0 0 8px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Annuler transform de flexslider */
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        width: auto !important;
    }
    #related-posts ul.slides::-webkit-scrollbar { display: none; }

    #related-posts ul.slides > li {
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        margin: 0 !important;
        float: none !important;
        display: block !important;
    }

    /* ── Structure custom : .slider-items > .product-item ── */
    #related-posts .slider-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 0 0 8px 0 !important;
        margin: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: auto !important;
    }
    #related-posts .slider-items::-webkit-scrollbar { display: none; }

    #related-posts .slider-items > .product-item,
    #related-posts .slider-items > div {
        flex: 0 0 140px !important;
        width: 140px !important;
        min-width: 140px !important;
        margin: 0 !important;
        float: none !important;
    }

    /* Images boutiques */
    .jm-shop-item .entry-thumb,
    #related-posts .entry-thumb {
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .jm-shop-item .entry-thumb img,
    #related-posts .entry-thumb img,
    #related-posts img {
        width: 100% !important;
        height: 80px !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Masquer les flèches flexslider sur mobile */
    #related-posts .flex-direction-nav { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   7. BANNIÈRES CATÉGORIES gauche/droite
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-cat-banners {
        flex-direction: column !important;
        gap: 8px !important;
        margin: 14px 0 !important;
    }

    .jm-cat-banner img {
        height: 110px !important;
        border-radius: 10px !important;
    }

    .jm-cat-banner__title { font-size: 13px !important; }
    .jm-cat-banner__sub   { font-size: 10px !important; }
}

/* ══════════════════════════════════════════════════════
   8. MEILLEURES CATÉGORIES
   Même correction double structure que les boutiques
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-categories-section {
        padding: 14px 10px !important;
        border-radius: 12px !important;
        margin: 12px 0 !important;
    }

    /* Structure flexslider */
    #best-selling-slider ul.slides {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        width: auto !important;
    }
    #best-selling-slider ul.slides::-webkit-scrollbar { display: none; }

    #best-selling-slider ul.slides > li {
        flex: 0 0 110px !important;
        width: 110px !important;
        min-width: 110px !important;
        margin: 0 !important;
        float: none !important;
    }

    /* Structure custom */
    #best-selling-slider .slider-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 0 0 6px 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: auto !important;
    }
    #best-selling-slider .slider-items::-webkit-scrollbar { display: none; }

    #best-selling-slider .slider-items > .product-item {
        flex: 0 0 110px !important;
        width: 110px !important;
        min-width: 110px !important;
        margin: 0 !important;
        float: none !important;
    }

    #best-selling-slider img {
        height: 80px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    #best-selling-slider .flex-direction-nav { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   9. BANNIÈRE PROMO
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-promo-banner {
        border-radius: 12px !important;
        margin: 12px 0 !important;
    }
    .jm-promo-banner__inner { padding: 18px 16px !important; }
    .jm-promo-banner__text  { font-size: 15px !important; line-height: 1.4 !important; }
}

/* ══════════════════════════════════════════════════════
   10. FEATURED PRODUCTS SLIDER
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-fp-section { margin: 18px 0 !important; }

    .jm-section-head  { margin-bottom: 12px !important; padding-bottom: 10px !important; }
    .jm-section-title { font-size: 14px !important; }
    .jm-section-badge { font-size: 10px !important; padding: 2px 8px !important; }

    .jm-fp-nav { display: none !important; }

    .jm-fp-track {
        gap: 8px !important;
        padding: 4px 0 10px !important;
        scroll-snap-type: x mandatory;
    }

    .jm-fp-card {
        width: calc((100vw - 44px) / 2) !important;
        min-width: 140px !important;
        max-width: 180px !important;
        scroll-snap-align: start;
    }

    .jm-fp-card__thumb   { padding-top: 100% !important; }
    .jm-fp-card__body    { padding: 8px 8px 0 !important; }
    .jm-fp-card__name    { font-size: 10px !important; }
    .jm-fp-card__price   { font-size: 12px !important; }
    .jm-fp-card__badge   { font-size: 8px !important; padding: 2px 6px !important; }
    .jm-fp-card__overlay { display: none !important; }

    /* Bouton acheter toujours visible sur mobile */
    .jm-fp-card__buy {
        opacity: 1 !important;
        transform: none !important;
        font-size: 9px !important;
        padding: 7px 0 !important;
    }

    .jm-fp-dots { margin-top: 8px !important; }
    .jm-fp-dot  { width: 6px !important; height: 6px !important; }
    .jm-fp-dot.is-active { width: 16px !important; }
}

/* ══════════════════════════════════════════════════════
   11. SIDEBAR — Offre Spéciale
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-sidebar { padding: 0 !important; }
    .jm-sidebar-block { border-radius: 12px !important; margin-bottom: 12px !important; }

    .jm-offer-item        { padding: 8px 2px !important; }
    .jm-offer-item__img   { width: 50px !important; height: 50px !important; }
    .jm-offer-item__name  { font-size: 10px !important; }
    .jm-offer-item__price { font-size: 12px !important; }

    /* Slider offre spéciale côté mobile */
    #best-sale-slider ul.slides {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 0 0 6px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transform: none !important;
        -webkit-transform: none !important;
        transition: none !important;
        width: auto !important;
    }
    #best-sale-slider ul.slides::-webkit-scrollbar { display: none; }
    #best-sale-slider ul.slides > li {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* ══════════════════════════════════════════════════════
   12. ONGLETS
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .jm-tabs-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 2px !important;
    }
    .jm-tabs-nav::-webkit-scrollbar { display: none; }

    .jm-tabs-nav > li > a {
        font-size: 10px !important;
        padding: 7px 11px !important;
        white-space: nowrap !important;
    }
}

/* ══════════════════════════════════════════════════════
   13. ANTI SCROLL HORIZONTAL + GÉNÉRAL
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    body, #page { overflow-x: hidden !important; }

    .home-tab,
    .featured-products-slider,
    .jm-iblocs,
    .jm-services,
    .jm-categories-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .product-item { margin-bottom: 10px !important; }

    .jm-fp-section,
    .jm-cat-banners,
    .jm-categories-section,
    .jm-promo-banner {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }

    /* Flexslider : désactiver les animations qui cassent le layout */
    .flexslider { overflow: visible !important; }
    .flex-viewport { overflow: visible !important; }
}

/* ══════════════════════════════════════════════════════
   14. TRÈS PETITS ÉCRANS ≤ 380px
══════════════════════════════════════════════════════ */
@media (max-width: 380px) {

    .jm-fp-card {
        width: calc((100vw - 34px) / 2) !important;
        min-width: 120px !important;
    }

    .jm-ibloc-ring         { width: 42px !important; height: 42px !important; }
    .jm-ibloc-lbl          { font-size: 8px !important; max-width: 58px !important; }
    .jm-promo-banner__text { font-size: 13px !important; }
    .jm-section-title      { font-size: 13px !important; }

    .jm-services [class*="col-"] {
        flex: 0 0 120px !important;
        width: 120px !important;
    }

    #related-posts ul.slides > li,
    #related-posts .slider-items > .product-item {
        flex: 0 0 120px !important;
        width: 120px !important;
    }
}

/* ══════════════════════════════════════════════════════
   SLIDER PLEINE LARGEUR SUR MOBILE — v2
   Approche directe : forcer tous les parents à 0 padding/margin
   et le jms-wrap à 100vw avec position relative left compensé
══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  .jm-hero {
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Tous les containers/rows/cols autour du slider → padding 0 */
  .jm-hero .container,
  .jm-hero .row,
  .jm-hero .col-md-9,
  .jm-hero .col-xs-12,
  .jm-hero [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Le .row de Bootstrap a margin -15px par défaut → annuler */
  .jm-hero .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* jms-wrap : pleine largeur viewport, collé aux bords */
  .jms-wrap {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Réintroduire padding pour les services sous le slider */
  .jm-services {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ══════════════════════════════════════════════════════
   HUD SLIDER — invisible par défaut, visible au touch/hover
══════════════════════════════════════════════════════ */

/* Par défaut : HUD masqué */
.jms-hud {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  pointer-events: none !important;
}

/* Au survol de la zone slider (desktop) */
.jms-stage:hover .jms-hud,
.jms-wrap:hover .jms-hud {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Au touch (mobile) : classe .hud-visible ajoutée par JS */
.jms-wrap.hud-visible .jms-hud {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* Masquer aussi le badge FX par défaut — déjà géré mais on renforce */
.jms-fx-tag {
  transition: opacity 0.4s ease !important;
}