/* Styles pour le Slider de Produits */
.product-slider {
    position: relative;
    width: 100%;
    margin-top: 10px;
}
.slider-track-container {
    overflow: hidden;
    width: 100%;
    margin: 0 auto; /* Centrer si les flèches sont à l'extérieur */
}

/* --- Premier bloc de .slider-track --- */
.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 1rem; /* Espace entre les cartes dans le slider */
}
.slider-track > .product-card {
    /* flex: 0 0 calc(50% - 0.5rem); Affiche 2 cartes par défaut, ajuste le gap */
    /* min-width: calc(50% - 0.5rem); */
    flex: 0 0 calc(33.333% - 0.66rem); /* Pour 3 cartes, ajuster le gap (1rem total, donc 0.66rem pour 2 gaps) */
    min-width: calc(99.333% - 0.66rem);
    /* max-width: calc(50% - 0.5rem); Commenté car géré par flex-basis */
    /* Si on veut afficher 3 cartes, ajuster à ~33.33% - gap */
    /* exemple pour 3 cartes: flex: 0 0 calc(33.333% - 0.66rem); */
}
/* S'il n'y a qu'une seule carte dans le slider-track */
.slider-track:has(.product-card:first-child:last-child) > .product-card {
    flex: 0 0 calc(80% - 0.5rem); /* Plus large si une seule carte */
    min-width: 280px; /* Mais pas trop petite */
    max-width: 450px; /* Et pas trop grande non plus, centrée */
    margin: 0 auto; /* Centrer la carte unique */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    line-height: 1;
}
.slider-arrow.prev {
    left: -15px;
}
.slider-arrow.next {
    right: -15px;
}
.slider-arrow:disabled {
    background-color: rgba(0,0,0,0.2);
    cursor: default;
}

/* --- Deuxième bloc de .slider-track (fusionné) --- */
.slider-track {
  display: flex; 
  gap: 1rem; 
  padding: 0.5rem; 
  /* overflow-x: auto; */ /* Optionnel pour scroll horizontal */
  margin-bottom: 1rem; 
}

/* --- Deuxième bloc de .slider-arrow (fusionné) --- */
.slider-arrow {
  cursor: pointer;
  font-size: 2rem; /* Noter que la taille est différente du premier bloc, j'utilise celle-ci */
  color: #333;
}
/* .slider-arrow.prev {} */ /* Pas de styles spécifiques dans le deuxième bloc */
/* .slider-arrow.next {} */ /* Pas de styles spécifiques dans le deuxième bloc */

/* Conteneur global du slider pour aligner les flèches et le track */
.product-slider-container { 
    display: flex;
    align-items: center;
    justify-content: space-between; /* Éloigne les flèches */
    margin-bottom: 1rem; /* Espace sous le slider complet */
    position: relative; /* Pour positionner les flèches absolument si besoin */
}

.slider-main-content { /* Ce conteneur englobe le slider-track et permet de contrôler son overflow si besoin */
    flex-grow: 1;
    overflow: hidden; /* Cache les autres cartes qui ne sont pas dans la vue actuelle */
    margin: 0 10px; /* Espace pour les flèches si elles ne sont pas absolument positionnées */
}