/*
Theme Name: MESA Bureautique
Theme URI: https://mesa-bureautique.fr
Author: MESA Bureautique
Description: Thème WooCommerce sur mesure pour MESA Bureautique.
Version: 1.0.0
Text Domain: mesa-bureautique
*/
/* ==========================================================
   MESA - PANIER & CHECKOUT
   Conteneur, espacements et responsive
   ========================================================== */


/* ----------------------------------------------------------
   CONTENEUR GENERAL
   ---------------------------------------------------------- */

body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   PANIER
   ---------------------------------------------------------- */

body.woocommerce-cart
.wc-block-components-sidebar-layout {
    gap: 42px;
    align-items: flex-start;
}

body.woocommerce-cart
.wc-block-components-main {
    flex: 1 1 auto;
    min-width: 0;
}

body.woocommerce-cart
.wc-block-components-sidebar {
    flex: 0 0 390px;
    width: 390px;
}


/* Un peu d'air autour du contenu produit */

body.woocommerce-cart
.wc-block-cart-items {
    margin-top: 8px;
}

body.woocommerce-cart
.wc-block-cart-items__row {
    padding-top: 18px;
    padding-bottom: 18px;
}


/* Résumé panier */

body.woocommerce-cart
.wc-block-cart__sidebar {
    padding-left: 0;
}


/* ----------------------------------------------------------
   CHECKOUT
   ---------------------------------------------------------- */

body.woocommerce-checkout
.wc-block-components-sidebar-layout {
    gap: 48px;
    align-items: flex-start;
}

body.woocommerce-checkout
.wc-block-components-main {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-right: 0;
}

body.woocommerce-checkout
.wc-block-components-sidebar {
    flex: 0 0 400px;
    width: 400px;
    margin-left: 0;
}


/* Donne plus d'air au formulaire */

body.woocommerce-checkout
.wc-block-checkout__main {
    padding-right: 0;
}


/* Résumé de commande légèrement mieux contenu */

body.woocommerce-checkout
.wc-block-checkout__sidebar {
    padding-left: 0;
}


/* ----------------------------------------------------------
   EXPRESS CHECKOUT
   ---------------------------------------------------------- */

body.woocommerce-checkout
.wc-block-components-express-payment {
    margin-bottom: 24px;
}

body.woocommerce-checkout
.wc-block-components-express-payment__event-buttons {
    gap: 8px;
}


/* ----------------------------------------------------------
   TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 1100px) {

    body.woocommerce-cart .wp-block-woocommerce-cart,
    body.woocommerce-checkout .wp-block-woocommerce-checkout {
        padding-left: 22px;
        padding-right: 22px;
    }

    body.woocommerce-cart
    .wc-block-components-sidebar-layout,

    body.woocommerce-checkout
    .wc-block-components-sidebar-layout {
        gap: 28px;
    }

    body.woocommerce-cart
    .wc-block-components-sidebar,

    body.woocommerce-checkout
    .wc-block-components-sidebar {
        flex-basis: 340px;
        width: 340px;
    }
}


/* ----------------------------------------------------------
   MOBILE / PETITE TABLETTE
   ---------------------------------------------------------- */

@media (max-width: 782px) {

    body.woocommerce-cart .wp-block-woocommerce-cart,
    body.woocommerce-checkout .wp-block-woocommerce-checkout {
        max-width: none;
        padding-left: 16px;
        padding-right: 16px;
    }

    body.woocommerce-cart
    .wc-block-components-sidebar-layout,

    body.woocommerce-checkout
    .wc-block-components-sidebar-layout {
        display: block;
    }

    body.woocommerce-cart
    .wc-block-components-main,

    body.woocommerce-cart
    .wc-block-components-sidebar,

    body.woocommerce-checkout
    .wc-block-components-main,

    body.woocommerce-checkout
    .wc-block-components-sidebar {
        width: 100%;
        max-width: none;
        flex: none;
        margin-left: 0;
        margin-right: 0;
    }

    body.woocommerce-cart
    .wc-block-components-sidebar,

    body.woocommerce-checkout
    .wc-block-components-sidebar {
        margin-top: 28px;
    }
}


/* ----------------------------------------------------------
   PETITS MOBILES
   ---------------------------------------------------------- */

@media (max-width: 480px) {

    body.woocommerce-cart .wp-block-woocommerce-cart,
    body.woocommerce-checkout .wp-block-woocommerce-checkout {
        padding-left: 14px;
        padding-right: 14px;
    }

}
/* ==========================================================
   MESA CHECKOUT - 2 COLONNES DESKTOP
   ========================================================== */

@media (min-width: 783px) {

    body.woocommerce-checkout
    .wp-block-woocommerce-checkout
    .wc-block-components-sidebar-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important;
        gap: 40px !important;
        align-items: start !important;
    }

    body.woocommerce-checkout
    .wc-block-components-main,

    body.woocommerce-checkout
    .wc-block-components-sidebar {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        margin: 0 !important;
    }

    body.woocommerce-checkout
    .wc-block-checkout__sidebar {
        position: sticky;
        top: 24px;
    }

}