/* =========================
   Galerie produit
========================= */

.wc-product-gallery { max-width: 100%; position: relative; }

.wc-product-gallery-main { cursor: zoom-in; }

.wc-product-gallery-main img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* =========================
   Vignettes + slider
========================= */

.wc-product-gallery-thumbs-wrapper {
    position: relative;
    margin-top: 15px;
}

.wc-product-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0 60px;
}

.wc-product-gallery-thumbs::-webkit-scrollbar { display: none; }

.wc-product-gallery-thumbs img {
    flex: 0 0 auto;
    width: 70px;
    height: 70px !important;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.7;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.wc-product-gallery-thumbs img.active,
.wc-product-gallery-thumbs img:hover {
    opacity: 1;
    border-color: #000;
}

/* =========================
   Boutons slider vignette
========================= */

.wc-thumb-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 52px !important;
    height: 52px !important;
    aspect-ratio: 1 / 1 !important;     /* 🔒 cercle forcé */
    box-sizing: border-box !important;

    border-radius: 50% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;

    line-height: 1 !important;          /* 🔒 anti-oval */
    font-size: 0 !important;

    z-index: 5 !important;
    cursor: pointer !important;

    /* ÉTAT NORMAL */
    background-color: rgba(255,255,255,0.85) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* reset bouton natif */
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;

    transition: background-color 0.2s ease;
}

/* Position */
.wc-thumb-nav.prev { left: 6px; }
.wc-thumb-nav.next { right: 6px; }

/* =========================
   Icône flèche (GRANDE)
========================= */

.wc-thumb-nav::before {
    content: "";
    width: 40px;                        /* 🔥 FLÈCHE BIEN VISIBLE */
    height: 40px;

    background-color: #19486F;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 40px 40px;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 40px 40px;

    pointer-events: none;
}

/* SVG gauche */
.wc-thumb-nav.prev::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 19L8.5 12L15.5 5'/%3E%3C/svg%3E");
    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 19L8.5 12L15.5 5'/%3E%3C/svg%3E\");
}

/* SVG droite */
.wc-thumb-nav.next::before {
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 5L15.5 12L8.5 19'/%3E%3C/svg%3E");
    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 5L15.5 12L8.5 19'/%3E%3C/svg%3E\");
}

/* =========================
   Survol (CONFORME)
========================= */

.wc-thumb-nav:hover {
    background-color: #19486F !important;
}

.wc-thumb-nav:hover::before {
    background-color: #ffffff;
}