.elementor-kit-5{--e-global-color-primary:#E4B36E;--e-global-color-secondary:#FFAA00;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"boxing";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"boxing";--e-global-typography-accent-font-weight:500;background-image:url("https://lewhirl.com/wp-content/uploads/2026/08/1a-13.jpg");background-position:center center;background-size:cover;overscroll-behavior:contain;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{background-image:url("https://lewhirl.com/wp-content/uploads/2026/08/1a-13.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:1025px){.elementor-kit-5{background-attachment:fixed;}}
/* Start custom CSS *//* --- 1. REGLAGES MARGES ORDINATEUR --- */
@media (min-width: 1025px) {
    body {
        padding-left: 16% !important;
    }
} 

/* --- 2. REGLAGES MARGES MOBILE & TABLETTE --- */
@media (max-width: 1024px) {
    body {
        padding-top: 50px !important; 
        padding-left: 0px !important; 
    }
} 

/* --- 3. CORRECTION DU FORMULAIRE ET DES VARIATIONS SUR MOBILE --- */
@media (max-width: 767px) {
    .woocommerce div.product form.cart {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        float: none !important;
        width: 100% !important;
    }

    /* On s'assure que les tableaux de variations (swatches) restent bien dans l'axe */
    .woocommerce div.product form.cart .variations {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px !important;
    }

    .woocommerce div.product form.cart .variations tr {
        display: block !important;
        margin-bottom: 10px !important;
    }

    .woocommerce div.product form.cart .variations td {
        display: block !important;
        float: none !important;
        width: 100% !important;
    }

    /* On empile proprement les boutons de paiement express en bas */
    .woocommerce div.product form.cart div.wc-block-components-express-payment,
    .woocommerce div.product form.cart .wc-stripe-payment-request-wrapper,
    .woocommerce div.product form.cart .express-checkout-block,
    div[id*="woo-stripe-payment-request"],
    div[id*="express-checkout"],
    .wcs-payment-request-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 10px 0 !important;
        position: static !important;
    }

    .gpay-button, 
    .amazon-pay-button, 
    .apple-pay-button, 
    .wc-stripe-payment-request-button,
    iframe.google-pay-button-frame {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 6px auto !important;
        float: none !important;
    }

    .single_add_to_cart_button {
        width: 100% !important;
        margin-top: 15px !important;
        clear: both !important;
        float: none !important;
        position: static !important;
        display: block !important;
    }
}

/* --- 4. FOND FIXE MOBILE --- */
@media (max-width: 767px) {
    body {
        background-image: url('https://lewhirl.com/wp-content/uploads/2026/08/1a-13.jpg') !important;
        background-attachment: fixed !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

/* --- 5. MASQUER LES BOUTONS SUR LA PAGE ARCHIVE BOUTIQUE --- */
.elementor-widget-woocommerce-archive-products ul.products li.product a.button,
.elementor-widget-woocommerce-archive-products ul.products li.product .button,
.elementor-widget-woocommerce-archive-products ul.products li.product .add_to_cart_button {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- 7. EMPILER LES PRODUITS VERTICALEMENT DANS LE PANIER MOBILE --- */
@media (max-width: 767px) {
    /* Transforme chaque ligne du tableau en un bloc vertical empilé */
    .woocommerce-cart-form__contents tr.cart_item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
        position: relative !important;
    }

    /* Cache les en-têtes et les cellules vides du tableau classique */
    .woocommerce-cart-form__contents thead,
    .woocommerce-cart-form__contents .product-remove {
        display: none !important; /* On cache la croix par défaut pour la replacer proprement si besoin */
    }

    /* Rend chaque élément visible et les empile */
    .woocommerce-cart-form__contents td {
        display: block !important;
        width: 100% !important;
        border: none !important;
        padding: 4px 0 !important;
        text-align: center !important;
    }

    /* Grossit et centre joliment l'image du produit en haut */
    .woocommerce-cart-form__contents .product-thumbnail {
        display: block !important;
        margin-bottom: 10px !important;
    }

    .woocommerce-cart-form__contents .product-thumbnail img {
        width: 130px !important;
        max-width: 130px !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 6px !important;
    }

    /* Nom du produit bien mis en valeur au milieu */
    .woocommerce-cart-form__contents .product-name {
        font-weight: bold !important;
        font-size: 16px !important;
        margin: 5px 0 !important;
    }
    
    * --- 8. FIXER LES BOUTONS STRIPE / WOOPAYMENTS SUR MOBILE --- */
@media (max-width: 767px) {
    /* Force les conteneurs Stripe et WooPayments à prendre 100% de la largeur sans déborder */
    .wc-stripe-payment-request-wrapper,
    #wc-stripe-payment-request-wrapper,
    #wc-stripe-payment-request-button,
    .wcs-payment-request-wrapper,
    .wc-block-components-express-payment,
    .woocommerce-checkout .payment_box {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        clear: both !important;
        margin: 15px auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Force les iframes (Apple Pay / Google Pay) à respecter les limites de l'écran */
    .wc-stripe-payment-request-wrapper iframe,
    .wcs-payment-request-wrapper iframe,
    .wc-block-components-express-payment iframe {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'boxing';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://lewhirl.com/wp-content/uploads/2026/08/Boxing-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */