/**
 * Layout fixe et élastique pour la fiche produit (page-products-detail)
 *
 * La page produit était volontairement exclue du layout fixe de
 * products-fixed-layout.css (voir les règles `.page-products-detail` de ce
 * fichier, qui redonnent un défilement de page normal et réaffichent le
 * pied de page). Cette feuille, chargée après, réapplique le même principe
 * que la page listing et que le panier : le pied de page est masqué, la
 * page ne défile jamais verticalement, et chaque zone gère son propre
 * débordement en interne — en particulier la colonne des onglets
 * (Description/Caractéristiques/Avis), qui s'étire sur toute la hauteur
 * disponible quelle que soit la longueur du texte.
 *
 * N'agit qu'à partir de 901px : en dessous, trois colonnes empilées avec
 * autant de blocs (galerie, vidéo, contact, prix, caractéristiques, onglets,
 * produits similaires) ne peuvent pas tenir dans un seul écran sans devenir
 * illisibles — la page retrouve alors un défilement normal, comme le fait
 * déjà products-fixed-layout.css pour la page listing en dessous de 768px.
 */

@media (min-width: 901px) {
    body.page-products.page-products-detail {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    body.page-products.page-products-detail .footer,
    body.page-products.page-products-detail footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.page-products.page-products-detail .main-content,
    body.page-products.page-products-detail main {
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: calc(var(--products-header-offset, 73px) + 0.35rem) 0 0 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.page-products.page-products-detail .section.pd-detail {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0.6rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.page-products.page-products-detail .section.pd-detail > .pd-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 0 1rem !important;
    }

    body.page-products.page-products-detail .pd-breadcrumb {
        flex: 0 0 auto !important;
        margin-bottom: 0.6rem !important;
    }

    body.page-products.page-products-detail .pd-grid {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    /* Chaque colonne gère son propre débordement : la galerie/vidéo/contact
       (colonne 1) et le prix/caractéristiques (colonne 2) défilent en bloc
       si leur contenu dépasse la hauteur disponible. */
    body.page-products.page-products-detail .pd-col-gallery,
    body.page-products.page-products-detail .pd-col-info {
        height: 100% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 0.25rem !important;
    }

    /* Colonne 3 : le conteneur ne défile pas lui-même — c'est le panneau
       d'onglets, à l'intérieur, qui s'étire et défile. */
    body.page-products.page-products-detail .pd-col-tabs {
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    body.page-products.page-products-detail .pd-tabs-card {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        margin-bottom: 0.9rem !important;
    }

    body.page-products.page-products-detail .pd-tabs {
        flex: 0 0 auto !important;
    }

    /* Le panneau d'onglets occupe toute la hauteur restante de sa carte,
       quelle que soit la longueur de la description : c'est lui qui défile
       en interne, jamais la page. */
    body.page-products.page-products-detail .pd-tab-panels {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    /* "Produits similaires" garde sa hauteur naturelle, sous le panneau
       d'onglets qui absorbe tout le reste de l'espace. */
    body.page-products.page-products-detail .pd-similar {
        flex: 0 0 auto !important;
    }
}