/** Shopify CDN: Minification failed

Line 209:1 Expected "}" to go with "{"

**/
/* ===========================
   SI – Vignettes produit mobile
   =========================== */

@media screen and (max-width: 749px) {

  /* Conteneur global des vignettes */
  .media-gallery__thumbs {
    margin-top: 8px;
  }

  /* Liste UL des vignettes :
     - si tout tient : centré
     - si ça déborde : slide horizontal */
  .media-gallery__thumbs .media-thumbs {
    display: flex !important;
    flex-wrap: nowrap;                 /* une seule ligne */
    justify-content: center;           /* centre si ça tient */
    align-items: center;
    gap: 6px;
    overflow-x: auto;                  /* slide horizontal si ça dépasse */
    -webkit-overflow-scrolling: touch; /* inertie iOS */
    scroll-snap-type: x mandatory;     /* optionnel : snap agréable */
  }

  /* Chaque vignette (li) : taille réduite + snap */
  .media-gallery__thumbs .media-thumbs__item {
    flex: 0 0 48px;        /* largeur ≈ 48px -> à ajuster si besoin */
    max-width: 48px;
    scroll-snap-align: center;
  }

  /* Bouton de la vignette : occupe toute la largeur de son li */
  .media-gallery__thumbs .media-thumbs__btn {
    width: 100% !important;
  }

  /* Image dans la vignette */
  .media-gallery__thumbs .media-thumbs__item img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}

/* === MOBILE : Titre / Prix / ATC en premier === */
@media (max-width: 768px) {

  /* On dit : les enfants de .product-info__sticky sont gérés en flex colonne */
  .product-info__sticky {
    display: flex;
    flex-direction: column;
  }

  /* 1) Titre plus petit + tout en haut */
  .product-info__sticky > .product-info__block.product-info__title {
    order: -30;
  }

  .product-info__sticky > .product-info__block.product-info__title .product-title {
    font-size: 1.35rem;
    line-height: 1.1;
    white-space: nowrap;      /* une seule ligne */
    overflow: hidden;         /* cache ce qui dépasse */
    text-overflow: ellipsis;  /* ajoute "…" si trop long */
    margin-bottom: 4px;
  }

  /* 2) Prix juste après le titre */
  .product-info__sticky > .product-info__block.product-price {
    order: -20;
  }

  /* 3) Bloc qui contient le bouton "Add to cart"
        ➜ on le repère grâce à .product-info__add-to-cart à l'intérieur
        (pseudo-classe :has, bien supportée sur les navigateurs récents) */
  @supports (selector(.product-info__sticky > .product-info__block:has(.product-info__add-to-cart))) {
    .product-info__sticky > .product-info__block:has(.product-info__add-to-cart) {
      order: -10;
    }
  }

  /* Les autres .product-info__block (Alma, backorder, paiements, etc.)
     gardent order: 0 et donc viennent APRÈS ce trio sur mobile. */
}

/* === MOBILE : compacter l'espace entre Titre / Prix / ATC === */
@media (max-width: 768px) {

  /* On enlève les gros marges par défaut sur ces 3 blocs */
  .product-info__sticky > .product-info__block.product-info__title,
  .product-info__sticky > .product-info__block.product-price,
  .product-info__sticky > .product-info__block:has(.product-info__add-to-cart) {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Le titre lui-même : zéro marge */
  .product-info__sticky > .product-info__block.product-info__title .product-title {
    margin: 0 !important;
  }

  /* Le bloc prix & contenu prix : serrés */
  .product-info__price,
  .product-info__price .price,
  .product-info__price .price__default {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Le conteneur du bouton : pas de gros espace au-dessus */
  .product-info__add-to-cart {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    gap: 4px;
  }

  /* Le bouton en lui-même : pas de marge supplémentaire */
  .product-info__add-button .btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* === MOBILE : réduire l'espace avant "Paiement sécurisé" === */
@media (max-width: 768px) {

  /* Bloc Alma (widget de paiement en plusieurs fois) :
     on réduit l'espace en dessous */
  .product-info__sticky > .product-info__block:has(.alma_widget_block),
  .product-info__sticky > .product-info__block:has(#alma-widget) {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
  }

  /* La ligne de séparation juste après Alma */
  .product-info__sticky > hr.mt-8.mb-8 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Bloc "Paiement sécurisé" lui-même : encore plus proche de ce qui précède */
  .product-info__sticky > .product-info__block.px-payment_method {
    margin-top: 0px !important;   /* tu peux descendre à 2px si tu veux ultra serré */
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* === MOBILE : réduire l'espace entre variantes et "Paiement sécurisé" === */
@media (max-width: 768px) {

  /* Bloc qui contient les variantes (Dimensions du tapis, tailles, etc.) */
  .product-info__sticky > .product-info__block:has(.product-options),
  .product-info__sticky > .product-info__block:has(.product-options__fieldset),
  .product-info__sticky > .product-info__block:has(.product-options__field),
  .product-info__sticky > .product-info__block:has(.product-options__wrapper) {
    margin-bottom: 0 px !important;   /* avant c'est probablement ~16–24px */
    padding-bottom: 0 !important;
  }

  /* On resserre aussi un peu les boutons de variantes entre eux */
  .product-options__fieldset,
  .product-options__field {
    margin-bottom: 4px !important;
  }

/* === MOBILE : supprimer le trou du bloc backorder caché === */
@media (max-width: 768px) {

  /* Si le bloc backorder ne montre rien (hidden),
     on enlève tout son espace visuel */
  .product-info__block.product-backorder {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
    .product-info__block:has(> style + script) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* === MOBILE : coller le bloc des variantes au "Paiement sécurisé" === */
@media (max-width: 768px) {

  /* Bloc "Variant picker" (Dimensions du tapis, tailles, etc.) */
  .product-info__block[data-block-type="variant_picker"] {
    margin-bottom: 0 !important;   /* avant c'est bien plus large */
    padding-bottom: 0 !important;
  }

  /* Bloc "Paiement sécurisé" juste en dessous */
  .product-info__block.px-payment_method {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }
}