/*
 | Tiroir du panier (offcanvas #shoppingCart*, components/header-1 et header-1-luxe).
 |
 | Ordinateur : la liste des articles défile dans le corps du tiroir, la réassurance reste en bas.
 | La barre de défilement prend la couleur primaire du site (var(--cz-primary) suit la couleur
 | personnalisée de /websites/{id}/customize).
 |
 | Mobile (< 768 px) : plus de boîte à défilement dans le tiroir. Le bloc de réassurance (~250 px)
 | restait fixé en bas et ne laissait au corps qu'environ 430 px : la liste, le total et
 | « Commander » défilaient dans une petite fenêtre avec sa barre (15/10/2026). Le tiroir
 | entier coule maintenant comme une page : corps à sa hauteur naturelle, réassurance à la suite.
 */
.offcanvas[id^="shoppingCart"] .offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: var(--cz-primary) transparent;
}
.offcanvas[id^="shoppingCart"] .offcanvas-body::-webkit-scrollbar {
    width: 6px;
}
.offcanvas[id^="shoppingCart"] .offcanvas-body::-webkit-scrollbar-track {
    background: transparent;
}
.offcanvas[id^="shoppingCart"] .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--cz-primary);
    border-radius: 3px;
}

@media (max-width: 767.98px) {
    .offcanvas[id^="shoppingCart"] {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }
    .offcanvas[id^="shoppingCart"]::-webkit-scrollbar {
        display: none;
    }
    .offcanvas[id^="shoppingCart"] .offcanvas-header,
    .offcanvas[id^="shoppingCart"] .offcanvas-body,
    .offcanvas[id^="shoppingCart"] [data-cz-cart-extra] {
        flex-shrink: 0;
    }
    .offcanvas[id^="shoppingCart"] .offcanvas-body {
        flex-grow: 0;
        overflow-y: visible;
    }
}