:root {
	--wd-text-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 500;
	--wd-text-color: rgba(13,97,122,0.9);
	--wd-text-font-size: 16px;
	--wd-title-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: rgb(13,97,122);
	--wd-entities-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 700;
	--wd-entities-title-color: rgba(13,97,122,0.91);
	--wd-entities-title-color-hover: rgba(255, 93, 5, 0.87);
	--wd-alternative-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: none;
	--wd-widget-title-color: rgb(13,97,122);
	--wd-widget-title-font-size: 17px;
	--wd-header-el-font: "Poppins", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 17px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(255,93,5);
	--wd-alternative-color: rgb(13,97,122);
	--btn-default-font-family: "Poppins", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 600;
	--btn-default-transform: inherit;
	--btn-default-bgcolor: rgb(255,93,5);
	--btn-default-bgcolor-hover: rgb(13,97,122);
	--btn-accented-font-family: "Poppins", Arial, Helvetica, sans-serif;
	--btn-accented-font-weight: 600;
	--btn-accented-transform: inherit;
	--btn-accented-bgcolor: rgb(255,93,5);
	--btn-accented-bgcolor-hover: rgb(13,97,122);
	--btn-font-family: "Poppins", Arial, Helvetica, sans-serif;
	--btn-font-weight: 600;
	--btn-color: rgb(255,255,255);
	--btn-font-size: 15px;
	--btn-bgcolor: rgb(255,93,5);
	--btn-bgcolor-hover: rgb(13,97,122);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: rgb(247,111,0);
	--notices-warning-color: #fff;
	--wd-link-color: rgb(255,93,5);
	--wd-link-color-hover: rgba(47,124,191,0.81);
	--wd-sticky-btn-height: 95px;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(255,255,255);
	background-image: none;
}
html .wd-nav.wd-nav-main > li > a, html .wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-full-width .wd-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu > li > a, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu > li > a, html .wd-dropdown-menu.wd-design-sized .sub-sub-menu li a, html .wd-dropdown-menu.wd-design-full-width .sub-sub-menu li a, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu .sub-sub-menu li a, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu .sub-sub-menu li a, html .wd-nav.wd-nav-secondary > li > a {
	font-family: "Montserrat", Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 17px;
	color: rgb(255,255,255);
}
html .wd-nav.wd-nav-main > li:hover > a, html .wd-nav.wd-nav-main > li.current-menu-item > a, html .wd-dropdown-menu.wd-design-sized .wd-sub-menu > li > a:hover, body .wd-dropdown-menu.wd-design-full-width .wd-sub-menu > li > a:hover, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu  > li > a:hover, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu > li > a:hover, html .wd-dropdown-menu.wd-design-sized .sub-sub-menu li a:hover, html .wd-dropdown-menu.wd-design-full-width .sub-sub-menu li a:hover, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu .sub-sub-menu  li a:hover, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu .sub-sub-menu li a:hover, html .wd-nav.wd-nav-secondary > li:hover > a, html .wd-nav.wd-nav-secondary > li.current-menu-item > a {
	color: rgb(255,255,255);
}
html .wd-dropdown-menu.wd-design-default .wd-sub-menu li a {
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-weight: 600;
	color: rgb(0,0,0);
}
.wd .product-label.onsale {
	background-color: rgb(255,93,5);
}
.wd .product-label.featured {
	background-color: rgb(221,51,51);
}
.wd .product-label.out-of-stock {
	background-color: rgb(247,197,17);
}
.wd .product-label.attribute-label:not(.label-with-img) {
	color: rgb(0,0,0);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
.woocommerce-product-gallery {
	--wd-gallery-gap: 6px;
}

@media (max-width: 1024px) {
	:root {
		--wd-text-font-size: 15px;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font-size: 16px;
	--btn-font-size: 14px;
	--wd-sticky-btn-height: 95px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-text-font-size: 15px;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font-size: 16px;
	--btn-font-size: 13px;
	--wd-sticky-btn-height: 45px;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 30px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
--wd-cat-brd-radius: 12px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgb(255,255,255);
}

@media (min-width: 1024px){
  .checkout-sticky{
    position: sticky;
    top: 90px; /* ajuste selon la hauteur de ton header */
  }
}

@media (max-width: 768px){

  /* On fixe le conteneur du bouton + CGV */
  .woocommerce-checkout #payment .form-row.place-order,
  .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    z-index: 999999 !important;
    background: #fff !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.12) !important;
    margin: 0 !important;
  }

  /* Le bouton en pleine largeur */
  .woocommerce-checkout #place_order{
    width: 100% !important;
  }

  /* On évite que la barre fixe masque le contenu */
  .woocommerce-checkout form.checkout{
    padding-bottom: 16px !important;
  }
}





/* --- DESIGN DES CASES DE LIVRAISON (V2 RESPONSIVE) --- */

/* 1. La Grille (Mise en page intelligente) */
body .fc-shipping-methods {
    display: grid;
    grid-template-columns: 1fr; /* Par défaut (Mobile) : 1 colonne */
    gap: 15px;
}

/* Règle spéciale pour Ordinateur (Écrans plus larges que 768px) */
@media (min-width: 768px) {
    body .fc-shipping-methods {
        grid-template-columns: 1fr 1fr; /* 2 colonnes sur PC */
    }
}

/* 2. Le look de la case (Tuile) */
body .fc-shipping-method__label {
    display: flex !important;
    flex-direction: column; /* On empile le texte et le prix proprement */
    justify-content: center;
    align-items: flex-start; /* Tout aligné à gauche */
    background-color: #fff;
    border: 2px solid #e1e1e1;
    border-radius: 12px;
    padding: 20px !important;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 100%; /* Pour que toutes les cases aient la même hauteur */
    min-height: 80px;
}

/* 3. Effet au survol */
body .fc-shipping-method__label:hover {
    border-color: #b0b0b0;
    background-color: #fafafa;
}

/* 4. Quand la case est SÉLECTIONNÉE */
body .fc-shipping-method--selected .fc-shipping-method__label {
    border-color: #FF6600 !important; /* TA COULEUR ORANGE */
    background-color: #fff5f0 !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.15);
    position: relative;
    z-index: 1;
}

/* 5. Le Nom de la livraison */
body .fc-shipping-method__label-text {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 5px;
    color: #222;
}

/* 6. Le Prix */
body .fc-shipping-method__price {
    font-size: 16px;
    font-weight: 800;
    color: #FF6600; /* Prix en orange aussi */
}

/* 7. Cacher le petit rond moche */
body .fc-shipping-method input[type="radio"] {
    display: none; 
}

/* --- Masquer l'expédition sur la page PANIER uniquement --- */

/* 1. Cache la ligne "Expédition" dans le tableau des totaux */
.woocommerce-cart .cart_totals tr.shipping {
    display: none !important;
}

/* 2. Cache le calculateur de frais de port (le lien "Calculer les frais") */
.woocommerce-cart .woocommerce-shipping-calculator {
    display: none !important;
}

/* 3. Cache le texte "Expédition calculée à la commande" si présent */
.woocommerce-cart .cart_totals p.woocommerce-shipping-destination {
    display: none !important;
}

/* --- Masquer la ligne Sous-total dans le résumé du panier --- */
.cart-subtotal {
    display: none !important;
}



/* ==========================================
   PRIX AU KG ET PAR TASSE - CAFÉ
   ========================================== */
.prix-details {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    font-size: 13px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; /* Centré par défaut */
}

.prix-details span {
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid transparent;
    transition: all 0.3s ease;
    font-family: inherit;
    letter-spacing: 0.3px;
    flex: 0 1 auto; /* Taille normale pour plusieurs badges */
}

/* Badge unique : prend toute la largeur et est plus grand */
.prix-details span.badge-unique {
    flex: 1 1 100%;
    max-width: 200px;
    padding: 8px 20px;
    font-size: 14px;
    text-align: center;
}

/* Badge prix au kg - vert élégant */
.prix-kg {
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%) !important;
    color: #2e7d32 !important;
    border-color: #c8e6c9 !important;
    box-shadow: 0 2px 4px rgba(46, 125, 50, 0.08);
}

.prix-kg:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(46, 125, 50, 0.12);
}

/* Badge prix par tasse - orange élégant */
.prix-tasse {
    background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%) !important;
    color: #e65100 !important;
    border-color: #ffe0b2 !important;
    box-shadow: 0 2px 4px rgba(230, 81, 0, 0.08);
}

.prix-tasse:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(230, 81, 0, 0.12);
}

/* Badge prix par capsule - bleu élégant */
.prix-capsule {
    background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%) !important;
    color: #1565c0 !important;
    border-color: #bbdefb !important;
    box-shadow: 0 2px 4px rgba(21, 101, 192, 0.08);
}

.prix-capsule:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(21, 101, 192, 0.12);
}

/* TABLETTES */
@media (max-width: 768px) {
    .prix-details {
        font-size: 12px;
        gap: 8px;
    }
    
    .prix-details span {
        padding: 5px 12px;
    }
    
    .prix-details span.badge-unique {
        padding: 7px 18px;
        font-size: 13px;
        max-width: 180px;
    }
}

/* MOBILES */
@media (max-width: 480px) {
    .prix-details {
        font-size: 11px;
        gap: 6px;
    }
    
    .prix-details span {
        padding: 5px 10px;
    }
    
    .prix-details span.badge-unique {
        padding: 6px 16px;
        font-size: 12px;
        max-width: 160px;
    }
}


/* --- LAYOUT GLOBAL (Grille Shopify) --- */
/* On force le conteneur principal à prendre toute la largeur */
.lucoffee-shopify-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* Le formulaire WooCommerce devient une grille flexible */
form.checkout.woocommerce-checkout {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* --- COLONNE GAUCHE (Infos client + Paiement) --- */
/* On cible la partie "customer_details" (adresse) ET le bloc de paiement qu'on va déplacer ici */
.col-left-part {
    width: 58%;
    padding-right: 40px; /* Espace entre les colonnes */
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 50px;
}

/* Logo desktop (visible uniquement si écran large) */
.desktop-logo-area { display: block; margin-bottom: 30px; }
.desktop-logo-area img { max-height: 50px; }

/* --- COLONNE DROITE (Récapitulatif commande) --- */
.col-right-part {
    width: 42%;
    background: #fafafa; /* Fond gris typique Shopify */
    border-left: 1px solid #e1e1e1;
    padding: 40px;
    box-sizing: border-box;
    height: 100vh; /* Prend toute la hauteur */
    position: sticky; /* Reste accroché */
    top: 0;
}

/* --- DESIGN DES CHAMPS --- */
.form-row input.input-text, .form-row textarea {
    padding: 12px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    font-size: 14px;
}
.form-row input.input-text:focus { border-color: #197bbd; outline: none; box-shadow: 0 0 0 1px #197bbd; }

/* --- NETTOYAGE TABLEAU DROITE --- */
#order_review table.shop_table { margin: 0; }
#order_review table.shop_table thead { display: none; }
#order_review table.shop_table th, 
#order_review table.shop_table td { border: none; padding: 10px 0; background: transparent; }
#order_review .cart-subtotal th, #order_review .order-total th { font-weight: normal; color: #555; }
#order_review .order-total { border-top: 1px solid #e1e1e1; margin-top: 10px; font-size: 1.2em; font-weight: bold; }

/* --- PAIEMENT (Sera déplacé à gauche par le JS) --- */
#payment { background: transparent !important; }
.wc_payment_methods { border: 1px solid #d9d9d9; border-radius: 5px; overflow: hidden; }
.wc_payment_methods li { background: #fff; padding: 15px; border-bottom: 1px solid #d9d9d9; }
.wc_payment_methods li:last-child { border-bottom: none; }
#place_order {
    width: 100%; background: #197bbd; color: white; padding: 20px; font-size: 16px; border-radius: 5px; font-weight: bold; margin-top: 20px;
}
#place_order:hover { background: #146296; }

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 1000px) {
    form.checkout.woocommerce-checkout { flex-direction: column-reverse; } /* Inverse l'ordre : Total en haut, Formulaire en bas */
    .col-left-part, .col-right-part { width: 100%; padding: 20px; border: none; height: auto; position: static; }
    .col-right-part { background: #fafafa; border-bottom: 1px solid #e1e1e1; }
    .desktop-logo-area { display: none; }
}



/* Réduire la taille et rendre les boîtes rondes */
.wd-swatches-product .wd-swatch {
    width: 60px !important;  /* Taille réduite */
    height: 60px !important; /* Hauteur fixe pour un rond parfait */
    margin-bottom: 15px;     /* Un peu d'espace en dessous pour le texte */
    border-radius: 50% !important; /* Transforme le carré en rond parfait */
    overflow: hidden; /* Cache tout ce qui dépasse du rond */
    display: inline-flex;
    flex-direction: column;
    justify-content: center; /* Centre l'image verticalement */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Petit effet d'ombre pour le relief */
}

/* Ajuster l'image à l'intérieur du rond */
.wd-swatch.wd-bg img {
    max-height: 50px; /* Limite la hauteur de l'image pour qu'elle rentre bien */
    max-width: 50px;
    object-fit: contain;
}

/* Positionner le texte SOUS le rond et non dedans */
.wd-swatches-product {
    display: flex;
    gap: 20px; /* Espace entre chaque rond */
    flex-wrap: wrap;
    align-items: flex-start; /* Aligne le haut des ronds */
}

/* Style du texte du poids */
.wd-swatch-text {
    display: block !important;
    text-align: center;
    width: 60px; /* Même largeur que le rond pour être centré */
    font-size: 12px !important;
    font-weight: 600;
    margin-top: 5px;
    color: #333;
    position: absolute; /* Sort le texte du flux pour le mettre sous le rond */
    bottom: -20px; /* Le place sous le rond */
    left: 0;
}

/* Nécessaire pour que le texte absolu se positionne par rapport au parent */
.wd-swatch-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px; /* Espace supplémentaire en bas pour le texte */
}

/* ============================================
   FIX: Sticky bar + panneau lateral (panier/menu)
   Masque la sticky bar quand un panneau lateral s ouvre
   ============================================ */
html body.single-product .wd-sticky-btn.lf-hidden,
html body.single-product .woodmart-sticky-btn.lf-hidden {
  display: none !important;
}

body .scrollToTop.lf-hidden {
  display: none !important;
}

/* FIX: Recentrer le spinner de chargement sur le bouton sticky */
html body.single-product .wd-sticky-btn .single_add_to_cart_button::after {
  inset-inline-start: calc(50% - 9px) !important;
}

html body.single-product .wd-sticky-btn .single_add_to_cart_button::before {
  inset-inline-start: 0 !important;
}

/* FIX: Fermer au-dessus des filtres mobile */
@media (max-width: 1024px) {
    .wd-col-offcanvas-sm.wd-side-hidden > .wd-heading {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
        background: #fff !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #eee !important;
    }
    .wd-col-offcanvas-sm.wd-side-hidden > .elementor-element {
        margin-top: 55px !important;
    }
}@media (min-width: 1025px) {
	@media (min-width: 1024px){
  .checkout-sticky{
    position: sticky;
    top: 90px; /* ajuste selon la hauteur de ton header */
  }
}

}

@media (max-width: 576px) {
	/* ==========================================================================
   1. CONTENEUR PRINCIPAL (TRANSPARENT & POSITIONNÉ)
   ========================================================================== */
html body.single-product .wd-sticky-btn,
html body.single-product .woodmart-sticky-btn {
    background-color: rgba(255, 255, 255, 0) !important; /* Transparence totale demandée */
    backdrop-filter: blur(15px) !important; /* On enlève le flou */
    -webkit-backdrop-filter: blur(15px) !important;
    bottom: 55px !important; /* Position validée */
    padding: 10px 20px !important;
    box-shadow: none !important; /* Plus d'ombre sur le conteneur, juste sur le bouton */
    border-top: none !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    pointer-events: none; /* Laisse passer les clics autour du bouton */
}

/* ==========================================================================
   2. DÉPLACEMENT DU BOUTON "SCROLL TO TOP"
   ========================================================================== */
/* On le remonte pour qu'il flotte au-dessus de la barre sticky */
body .scrollToTop {
    bottom: 120px !important; /* 55px (barre) + 48px (bouton) + marge */
    z-index: 10000 !important; /* Au-dessus de tout */
		background-color: rgba(255, 255, 255, 0) !important; 
		backdrop-filter: blur(15px) !important; /* On enlève le flou */
    -webkit-backdrop-filter: blur(15px) !important;
}
body .scrollToTop::after {
		font-weight: 1200 !important;
		color: black;
}
/* ==========================================================================
   3. SUPPRESSION DE LA QUANTITÉ
   ========================================================================== */
html body.single-product .wd-sticky-btn .quantity,
html body.single-product .woodmart-sticky-btn .quantity,
html body .wd-sticky-btn.wd-quantity-overlap div.quantity {
    display: none !important;
}

/* ==========================================================================
   4. BOUTON D'AJOUT AU PANIER (GELLULE ORANGE)
   ========================================================================== */
html body.single-product .wd-sticky-btn .single_add_to_cart_button,
html body.single-product .woodmart-sticky-btn .single_add_to_cart_button {
    pointer-events: auto; /* Réactive les clics sur le bouton */
    background-color: #ff5b00 !important; /* Orange */
    color: white !important;
    border-radius: 50px !important;
    border: none !important;
    height: 48px !important;
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(255, 91, 0, 0.4) !important; /* Ombre portée sur le bouton seul */
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   5. MISE EN PAGE & NETTOYAGE
   ========================================================================== */
html body.single-product .wd-sticky-btn form.cart,
html body.single-product .woodmart-sticky-btn form.cart {
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Cache les éléments parasites */
html body.single-product .wd-sticky-btn .price,
html body.single-product .wd-sticky-btn .product_title,
html body.single-product .wd-sticky-btn img {
    display: none !important;
}

/* Espace de sécurité en bas de page */
body.single-product {
    padding-bottom: 140px !important;
}

/* ---------------------------------------------------------------
   4. FIX FILTRES SIDEBAR OFF-CANVAS
   --------------------------------------------------------------- */
/* Panel filtres pleine largeur sur mobile */
.wd-sidebar-opener + .wd-side-hidden,
.wd-side-hidden.wd-shop-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Assurer que le contenu du panel ne soit pas coupe */
.wd-side-hidden .wd-widget-title,
.wd-side-hidden .widget-title {
    white-space: normal !important;
    word-break: break-word;
}
}