/* PJF Sélection accueil — slider brut (maquette Claude Design 1.0.7)
   Pas de padding propre au composant : la section Breakdance qui l'accueille
   gère déjà l'espacement. Les cards réutilisent pjf-shop-v2.css. */

.pjf-selection-slider {
    background: #F6F2E8;
    position: relative;
}

.pjf-selection-viewport { position: relative; overflow: hidden; }

/* Défilement natif (scroll-snap) : dégrade bien sans JS (swipe tactile
   fonctionne déjà), flèches/dots ne font que piloter ce scroll. */
.pjf-selection-track {
    display: flex; gap: 20px; padding: 0 4px;
    overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
}
.pjf-selection-track::-webkit-scrollbar { display: none; }

.pjf-selection-slide {
    scroll-snap-align: start; min-width: 0;
    flex: 0 0 calc(25% - 15px); /* 4 visibles ≥1280px (gap 20px × 3 / 4) */
    /* Étire la card enfant (.pjf-v2-card, elle-même flex-column avec un
       footer en margin-top:auto) sur toute la hauteur de la slide, elle-même
       déjà égalisée par le stretch par défaut de .pjf-selection-track (flex
       row) — donne des cards de hauteur uniforme, prix/bouton alignés en bas. */
    display: flex;
}
.pjf-selection-slide > .pjf-v2-card { width: 100%; }
@media (max-width: 1279px) {
    .pjf-selection-slide { flex-basis: calc(33.333% - 13.333px); } /* 3 visibles */
}
@media (max-width: 899px) {
    .pjf-selection-slide { flex-basis: calc(50% - 10px); } /* 2 visibles */
}
@media (max-width: 599px) {
    .pjf-selection-slide { flex-basis: 100%; } /* 1 visible */
}

.pjf-selection-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #EAE5D5;
    box-shadow: 0 2px 8px rgba(31, 53, 39, .06);
    display: flex; align-items: center; justify-content: center; color: #1F3527;
    cursor: pointer; padding: 0;
}
.pjf-selection-arrow:hover { background: #F6F2E8; }
.pjf-selection-arrow--prev { left: 8px; }
.pjf-selection-arrow--next { right: 8px; }

.pjf-selection-dots {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin-top: 24px; padding-bottom: 4px;
}
.pjf-selection-dot {
    width: 8px; height: 8px; border-radius: 999px; border: none; background: #D9D4C3;
    padding: 0; cursor: pointer; transition: width .25s ease, background .25s ease;
}
.pjf-selection-dot.is-active { width: 22px; background: #2C4A2E; }

@media (max-width: 599px) {
    .pjf-selection-arrow { width: 38px; height: 38px; }
}