/* ==========================================================================
   Fiche produit : style du système de défilement
   - Au-dessus de 900px la page ne défile pas (voir product-detail-fixed-layout.css) :
     ce sont les colonnes (`.pd-col-gallery`, `.pd-col-info`) et le panneau
     d'onglets (`.pd-tab-panels`) qui ont chacun leur barre de défilement.
     On les stylise : piste visible + curseur en dégradé, dont la taille et
     la position indiquent le niveau de défilement.
   - En dessous de 900px c'est la page qui défile : barre de progression
     fixe en haut de l'écran (`.pd-scroll-progress`) + barre de page stylée.
   Portée : uniquement les pages contenant `.pd-detail`.
   ========================================================================== */

/* ---- Barre de progression de page (petits écrans) ---- */

.pd-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 1250; /* au-dessus du header (1100) */
    background: rgba(var(--primary-rgb, 21, 101, 192), 0.12);
    pointer-events: none;
}

.pd-scroll-progress[hidden] {
    display: none;
}

.pd-scroll-progress-bar {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-color, #0B1B34), var(--secondary-color, #C9A24B));
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px rgba(var(--primary-rgb, 21, 101, 192), 0.55);
    transform: scaleX(var(--pd-scroll, 0));
    transform-origin: left center;
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .pd-scroll-progress-bar {
        transition: transform 0.08s linear;
    }
}

/* ---- Barres de défilement (Chrome, Edge, Safari) ---- */

@supports selector(::-webkit-scrollbar) {
    /* `scrollbar-width` / `scrollbar-color` (déclarés ailleurs, ex. `thin` sur
       `.pd-tab-panels`) désactiveraient les règles ::-webkit-scrollbar. */
    html:has(.pd-detail),
    .pd-detail .pd-col-gallery,
    .pd-detail .pd-col-info,
    .pd-detail .pd-tab-panels {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }

    html:has(.pd-detail)::-webkit-scrollbar,
    .pd-detail .pd-col-gallery::-webkit-scrollbar,
    .pd-detail .pd-col-info::-webkit-scrollbar,
    .pd-detail .pd-tab-panels::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    html:has(.pd-detail)::-webkit-scrollbar-track,
    .pd-detail .pd-col-gallery::-webkit-scrollbar-track,
    .pd-detail .pd-col-info::-webkit-scrollbar-track,
    .pd-detail .pd-tab-panels::-webkit-scrollbar-track {
        background: rgba(var(--primary-rgb, 21, 101, 192), 0.1);
        border-radius: 999px;
    }

    html:has(.pd-detail)::-webkit-scrollbar-thumb,
    .pd-detail .pd-col-gallery::-webkit-scrollbar-thumb,
    .pd-detail .pd-col-info::-webkit-scrollbar-thumb,
    .pd-detail .pd-tab-panels::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--primary-color, #0B1B34), var(--secondary-color, #C9A24B));
        border-radius: 999px;
        /* Bordure transparente : le curseur paraît plus fin que sa piste. */
        border: 2px solid transparent;
        background-clip: padding-box;
    }

    html:has(.pd-detail)::-webkit-scrollbar-thumb:hover,
    .pd-detail .pd-col-gallery::-webkit-scrollbar-thumb:hover,
    .pd-detail .pd-col-info::-webkit-scrollbar-thumb:hover,
    .pd-detail .pd-tab-panels::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, var(--primary-color-dark, var(--primary-color, #0B1B34)), var(--primary-color, #0B1B34));
        background-clip: padding-box;
    }

    html:has(.pd-detail)::-webkit-scrollbar-corner {
        background: transparent;
    }
}

/* ---- Firefox (pas de ::-webkit-scrollbar) ---- */

@supports not selector(::-webkit-scrollbar) {
    html:has(.pd-detail),
    .pd-detail .pd-col-gallery,
    .pd-detail .pd-col-info,
    .pd-detail .pd-tab-panels {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color, #0B1B34) rgba(var(--primary-rgb, 21, 101, 192), 0.12);
    }
}