/**
 * Smart River — fiche produit : responsive (KAN-34)
 *
 * Ajustements tablette (768–991 px) et mobile (< 768 px) de l'ensemble de la fiche produit.
 * Les bascules de base restent dans chaque fichier d'élément (une colonne et galerie non fixée : product-page.css,
 * barre d'achat collante : product-add-to-cart.css, onglets en accordéon : product-tabs.css) ;
 * ce fichier ne contient que les retouches d'ensemble constatées à ces largeurs.
 * Chargé en dernier sur la page produit (config/theme.yml > assets > css > product) ; il réutilise les variables
 * --sr-pp-* de product-page.css. Règles limitées à #main.sr-product.
 */

/* ------------------------------------------------------------------ tablette et mobile */

@media (max-width: 991px) {
  /* titre équilibré sur plusieurs lignes (évite un mot seul en fin de titre) */
  #main.sr-product .sr-pinfo__title {
    text-wrap: balance;
  }

  /* réassurance : cartes horizontales compactes, une par ligne (colonne trop étroite pour des cartes côte à côte) */
  #main.sr-product .blockreassurance_product {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  #main.sr-product .blockreassurance_product > div:not(.clearfix) {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 0.875rem;
    text-align: left;
  }

  #main.sr-product .blockreassurance_product .item-product {
    grid-row: span 2;
    margin: 0;
  }

  /* onglets nombreux : la barre défile horizontalement au lieu de passer sur deux lignes */
  #main.sr-product .sr-ptabs .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #main.sr-product .sr-ptabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  #main.sr-product .sr-ptabs .nav-tabs .nav-item {
    flex: 0 0 auto;
  }
}

/* ------------------------------------------------------------------ tablette uniquement (deux colonnes étroites) */

@media (min-width: 768px) and (max-width: 991px) {
  #main.sr-product .product-cover {
    padding: 1.75rem;
  }

  #main.sr-product .images-container .product-images > li.thumb-container .thumb {
    width: 4.25rem;
    height: 4.25rem;
  }
}

/* écran large mais peu haut (tablette ou portable à l'horizontale) : une galerie fixée serait coupée */
@media (min-width: 768px) and (max-height: 640px) {
  #main.sr-product .sr-product__gallery {
    position: static;
  }
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 767px) {
  /* image moins haute : le prix et le bouton remontent vers le premier écran */
  #main.sr-product .product-cover {
    aspect-ratio: 5 / 4;
    padding: 1.25rem;
  }

  /* miniatures : défilement au doigt jusqu'au bord de l'écran, arrêt sur chaque vignette */
  #main.sr-product .images-container .js-qv-mask {
    width: calc(100% + 30px);
    max-width: none;
    margin: 0 -15px;
    padding: 0.25rem 15px;
    scroll-padding: 0 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  #main.sr-product .images-container .product-images > li.thumb-container {
    scroll-snap-align: start;
  }

  #main.sr-product .images-container .product-images > li.thumb-container .thumb:hover {
    transform: none;
  }

  /* bloc prix : un peu moins d'air autour */
  #main.sr-product .product-prices {
    padding: 1rem 1.125rem;
  }

  /* partage : libellé sur sa ligne si l'écran est trop étroit pour tout aligner */
  #main.sr-product .product-additional-info .social-sharing {
    row-gap: 0.5rem;
  }
}

/* ------------------------------------------------------------------ petits mobiles (< 375 px) */

@media (max-width: 374px) {
  #main.sr-product .product-additional-info .social-sharing > span {
    flex: 1 0 100%;
  }

  #main.sr-product .product-quantity .wishlist-button-add {
    width: 3rem;
  }

  #main.sr-product .sr-sticky-buy__btn {
    padding: 0 0.875rem;
    font-size: 0.875rem;
  }
}