/* ============================================================
   TINECO STATIC SITE — UI FIXES
   ============================================================ */

/* ── 0. TABS — Disable sticky tablist on product pages ──────
   Le JS du thème rend la barre d'onglets sticky au scroll.
   On force position relative pour qu'elle reste en place.    */
.tablist,
.tablist--sticky,
.tablist.is-sticky,
.tablist[style*="position"] {
  position: relative !important;
  top: auto !important;
  z-index: auto !important;
}

/* ── 1. MEILLEURE VENTE — Fix button overlap on mobile ──────
   Cards are 2 cols on mobile, buttons side-by-side overflow.
   Stack them vertically on small screens.                    */
@media (max-width: 767px) {
  .card__quick-add > div[style] {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .card__quick-add .btn {
    white-space: normal !important;
    font-size: 12px !important;
    padding: 7px 8px !important;
    line-height: 1.3 !important;
  }
}

/* ── 2. NOTES BOX — Make stock/livraison/garantie compact ───
   Reduces the oversized box in collection product cards.     */
.product-card__notes {
  font-size: 11px !important;
  padding: 4px 10px !important;
  margin: 4px 0 5px !important;
  line-height: 1.35 !important;
  border-radius: 4px;
}
.product-card__notes li {
  padding: 1px 0 !important;
}
.product-card__notes li::before {
  font-size: 10px !important;
}

/* ── 3. MOBILE THUMBNAILS — Image centree + vignettes dessous ─
   Overrides le layout desktop (row-reverse, thumbs à gauche).
   Sur mobile : colonne, viewer centré en haut, thumbs en bas.  */
@media (max-width: 767px) {

  /* Forcer le layout en colonne : viewer d'abord, thumbs ensous */
  media-gallery.media-gallery {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Viewer = image principale : pleine largeur, clip les débordements */
  .media-gallery__viewer {
    width: 100% !important;
    order: 1 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* Slider mobile : scroll-snap horizontal, chaque item = 100% */
  .media-gallery__viewer .media-viewer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    transform: none !important;   /* annule le transform du theme JS */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .media-gallery__viewer .media-viewer::-webkit-scrollbar {
    display: none !important;
  }

  /* Chaque slide = 100% de la largeur du viewer */
  .media-gallery__viewer .media-viewer__item {
    flex: 0 0 100% !important;
    width: 100% !important;
    scroll-snap-align: start !important;
  }

  /* Thumbs : en dessous, bande horizontale scrollable */
  .media-gallery__thumbs {
    display: block !important;
    order: 2 !important;
    width: 100% !important;
    margin-top: 10px !important;
    overflow: hidden;
  }

  /* La liste des vignettes en ligne horizontale — pleine largeur */
  .media-gallery__thumbs .media-thumbs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 5px !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
    width: 100% !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    list-style: none;
  }
  .media-gallery__thumbs .media-thumbs::-webkit-scrollbar {
    display: none;
  }

  /* Chaque vignette : 5 visibles à la fois, scrollable pour les autres */
  .media-gallery__thumbs .media-thumbs__item {
    flex: 0 0 calc(20% - 4px) !important;
    min-width: 0 !important;
    list-style: none;
  }

  /* Bouton vignette — occupe 100% de son item */
  .media-gallery__thumbs .media-thumbs__btn {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    padding: 0 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fafafa !important;
    cursor: pointer !important;
    position: static !important;
    box-sizing: border-box !important;
  }
  .media-gallery__thumbs .media-thumbs__btn.is-active,
  .media-gallery__thumbs .media-thumbs__btn[aria-current="true"] {
    border-color: #1a1a1a !important;
  }

  /* Image dans la vignette */
  .media-gallery__thumbs .media-thumbs__btn img {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* Cacher le texte screen-reader dans les vignettes */
  .media-gallery__thumbs .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
  }
}