/* Carrousel des tuiles de sous-catégories (page catégorie), voir
   shop1kdo_wrap_subcategory_carousel() dans functions.php et assets/js/subcategory-carousel.js.
   Visible uniquement à partir de 992px (desktop/tablette) : en dessous, c'est la grille de boutons
   (subcategory-button-grid.css) qui s'affiche à la place — voir la media query plus bas.

   Dégradation progressive : avant l'initialisation JS de Slick (classe .slick-initialized pas
   encore posée), la piste reste utilisable au clavier/tactile en défilement horizontal natif,
   4 tuiles par ligne (grille visée par Slick une fois initialisé : 4 colonnes × 2 lignes) — au cas
   où le JS n'aurait pas encore tourné ou échouerait.

   Fichier séparé plutôt qu'ajouté à style.css : style.css est versionné via l'en-tête "Version"
   du thème (voir haut du fichier), qui ne change pas à chaque modification — le navigateur peut
   donc continuer à servir une ancienne copie en cache après une édition. Ce fichier est enqueue
   séparément avec un numéro de version basé sur filemtime() (functions.php), qui se met donc à
   jour tout seul à chaque modification. */
.shop1kdo-subcat-carousel {
    display: none;
    position: relative;
    padding: 0 44px;
    margin-bottom: 30px;
}

@media (min-width: 992px) {
    .shop1kdo-subcat-carousel {
        display: block;
    }
}

/* Posée côté PHP (shop1kdo_wrap_subcategory_carousel()) quand 8 tuiles ou moins (une grille 4×2
   complète) : rien à faire défiler, donc pas de chevrons/pastilles inutiles. */
.shop1kdo-subcat-carousel--static {
    padding: 0;
}

.shop1kdo-subcat-carousel--static .shop1kdo-subcat-carousel__arrow,
.shop1kdo-subcat-carousel--static .slick-dots {
    display: none !important;
}

.shop1kdo-subcat-carousel__track:not(.slick-initialized) {
    display: flex;
    flex-wrap: wrap;
}

.shop1kdo-subcat-carousel__track:not(.slick-initialized) > li {
    width: 25%;
}

.shop1kdo-subcat-carousel__track.slick-slider {
    margin-bottom: 0;
}

.shop1kdo-subcat-carousel__track .slick-slide {
    height: auto;
}

/* Pas de recadrage : l'image garde son ratio d'origine (voir shop1kdo-subcategory-thumbnail dans
   functions.php, redimensionnement proportionnel sans crop) et remplit toute la largeur de la
   tuile, sa hauteur s'ajustant en conséquence. */
.shop1kdo-subcat-carousel__track .product-category img {
    width: 100%;
    height: auto;
    border-radius: 5px 5px 5px 5px;
}

/* Le thème parent applique `.woocommerce ul.products li.product a img { box-shadow: none; }`
   (product_item.scss), plus spécifique (3 classes) que la règle ci-dessus (2 classes) : elle
   écrasait silencieusement le box-shadow. On regagne la priorité en ajoutant les classes
   .woocommerce et .product, déjà présentes sur les ancêtres réels dans le DOM, sans toucher au
   thème parent.
   Flou réduit par rapport à la page d'accueil (30px) : là-bas les tuiles ont de la marge entre
   elles, ici elles sont collées dans le carrousel (pas de gap Slick), donc un flou aussi large
   débordait visuellement sur la tuile voisine. */
.woocommerce .shop1kdo-subcat-carousel__track .product-category.product img {
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.5);
}

/* Même effet de hover que les tuiles de sous-catégories de la page d'accueil (classe Elementor
   "elementor-animation-shrink" : scale(0.9) sur transform, transition 0.3s) — reproduit ici pour
   rester cohérent visuellement, cette page n'utilisant pas Elementor. */
.shop1kdo-subcat-carousel__track .product-category img {
    transition-duration: .3s;
    transition-property: transform;
}

.shop1kdo-subcat-carousel__track .product-category a:hover img,
.shop1kdo-subcat-carousel__track .product-category a:focus img {
    transform: scale(0.9);
}

/* Chevrons : couleurs/tailles isolées ici pour rester facilement personnalisables sans toucher
   au JS ni au thème parent. Même couleur que les boutons de sous-catégories mobile
   (subcategory-button-grid.css, #C5963E) pour rester cohérent avec le reste du site — l'ancien
   fond blanc/icône grise se distinguait mal des visuels de catégorie derrière. */
.shop1kdo-subcat-carousel__arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #C5963E;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    transition: background-color .2s ease, color .2s ease;
}

.shop1kdo-subcat-carousel__arrow:hover {
    background-color: #333;
    color: #fff;
}

.shop1kdo-subcat-carousel__arrow--prev {
    left: 0;
}

.shop1kdo-subcat-carousel__arrow--next {
    right: 0;
}

.shop1kdo-subcat-carousel__arrow.slick-disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

/* Pastilles : une pastille par page de tuiles (comportement natif des "dots" Slick, groupées par
   slidesToScroll), pas une pastille par tuile individuelle. */
.shop1kdo-subcat-carousel .slick-dots {
    position: static;
    display: flex !important;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0;
    list-style: none;
}

.shop1kdo-subcat-carousel .slick-dots li {
    width: auto;
    height: auto;
    margin: 0;
    /* list-style:none sur le <ul> parent est censé suffire par héritage, mais on le redéclare ici
       en direct (+ ::marker) pour rester robuste face à d'éventuelles règles plus spécifiques du
       thème sur les <li>. */
    list-style: none;
}

.shop1kdo-subcat-carousel .slick-dots li::marker {
    content: '';
}

.shop1kdo-subcat-carousel .slick-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d0d0d0;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

.shop1kdo-subcat-carousel .slick-dots li.slick-active button {
    background: #333;
}