/* =========================================================================
   VPCrazy - Cartes produit (boucle shop / archives / recherche / blocs Woo)
   Badge grammage, reference fournisseur, coloris a defilement horizontal.
   ========================================================================= */

/* Ancrage du badge : la carte doit etre le parent positionne le plus proche. */
ul.products li.product,
.products .product,
.wc-block-grid__product,
.wc-block-product,
.ct-product-card {
  position: relative;
}

/* -------------------------------------------------------------------------
   Badge grammage (haut gauche, pastille verte, chiffre au-dessus de "Gr")
   ------------------------------------------------------------------------- */
.vpcr-card-gsm {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #2bb673;
  color: #fff;
  line-height: 1;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  pointer-events: none;
}

.vpcr-card-gsm__num {
  font-size: 14px;
  font-weight: 800;
}

.vpcr-card-gsm__unit {
  font-size: 8px;
  font-weight: 700;
  margin-top: 1px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   Titre produit : une seule ligne, tronque par points de suspension.
   L'attribut title (survol) est pose par es_cards.js.
   ------------------------------------------------------------------------- */
.woocommerce-loop-product__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* -------------------------------------------------------------------------
   Reference fournisseur (bas de carte, au-dessus des coloris)
   ------------------------------------------------------------------------- */
.vpcr-card-ref {
  margin: 6px 0 4px;
  font-size: 12px;
  color: #667085;
}

/* -------------------------------------------------------------------------
   Habillage des coloris : conteneur positionne + chevrons gauche/droite.
   Les chevrons ne s'affichent que si la bande deborde (classe posee par le JS).
   ------------------------------------------------------------------------- */
.vpcr-colors-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Quand ca deborde, on reserve la place des chevrons sur les cotes
   (les ronds occupent donc un peu moins de largeur). */
.vpcr-colors-wrap.vpcr-has-chev .vpcr-card-colors {
  padding-left: 8px;
  padding-right: 8px;
}

/* Chevrons discrets : gris, opacite reduite, masques par defaut. */
.vpcr-chev {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #98a2b3;
  opacity: .45;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .15s ease;
}

.vpcr-chev svg {
  display: block;
  width: 10px;
  height: 10px;
}

.vpcr-chev--prev {
  order: -1;
}

.vpcr-chev--next {
  order: 1;
}

.vpcr-colors-wrap.vpcr-has-chev .vpcr-chev {
  display: flex;
}

.vpcr-chev:hover {
  opacity: .75;
}

/* Chevron masque par le JS (direction non disponible : debut ou fin de bande). */
.vpcr-chev[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   Coloris : une seule ligne, contrainte a la largeur de la carte.
   overflow-x masque (jamais de debordement hors carte) ; le defilement
   est pilote en JS (auto + scrub a la souris). scrollLeft reste applicable
   par script meme avec overflow masque.
   ------------------------------------------------------------------------- */
.vpcr-card-colors {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex: 0 1 80%;
  width: 80%;
  max-width: 80%;
  min-width: 0;
  order: 0;
  margin: 0;
  padding: 0 8px 4px;
  box-sizing: border-box;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-behavior: auto;
}

/* Indice visuel de scrub quand la bande deborde (classe posee par le JS). */
.vpcr-card-colors.vpcr-scrollable {
  cursor: ew-resize;
  justify-content: flex-start;
}

/* Masque toute barre de defilement residuelle. */
.vpcr-card-colors {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.vpcr-card-colors::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Tactile : defilement natif au doigt (auto et scrub desactives en JS). */
.vpcr-card-colors.vpcr-touch {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Rond de couleur cliquable (lien vers la fiche, couleur preselectionnee) */
.vpcr-card-swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #d0d5dd;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .02) inset;
  display: inline-block;
  cursor: pointer;
  transition: transform .12s ease;
}

.vpcr-card-swatch:hover {
  transform: scale(1.15);
}