/** * ========================================================== * Domaine de l'Hess - WooCommerce CSS * ========================================================== * * Contient : * 1. Archive produits * 2. Page produit * 3. Bouton ajout panier * 4. Quantité custom + / - * 5. Variations radios custom * 6. Page Panier * 7. Bannière WooCommerce notice * 8. Page Checkout * 9. Page Mon compte * 10. Responsive * * ========================================================== */ /* ========================================================== 1. Archive produits ========================================================== */ .ast-woo-shop-product-description p { font-family: "Comfortaa", sans-serif; color: #4A505E; font-size: 14px; line-height: 1.1rem; } .price { margin-top: 20px !important; margin-bottom: 30px !important; } /* ul/ol sur les pages categorie produit */ .tax-product_cat ol, .tax-product_cat ul { margin: 0 0 1.5em 1em; } .tax-product_cat ol li, .tax-product_cat ul li { margin-top: 10px; } /* ========================================================== 2. Page produit WooCommerce ========================================================== */ .single-product { margin-top: 200px; } .single-product .e-atc-qty-button-holder { display: flex; flex-direction: column; } /* Masque le prix sur les produits variables WooCommerce ajoute .product-type-variable sur le */ .product-type-variable .elementor-widget-woocommerce-product-price, .product-type-variable .elementor-widget-text-editor:has(.woocommerce-Price-amount) { display: none !important; } /* ========================================================== Fiches produits — Classes communes ACF ========================================================== */ /* --- Description produit --- */ .produit-accroche { font-size: 16px; line-height: 1.9; } .produit-liste { line-height: 2; } .produit-bienfaits { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0; } .produit-bienfait-bloc { flex: 1; min-width: 200px; background: #F8F2E3; border-radius: 8px; padding: 16px 20px; } .produit-bienfait-bloc, .produit-citation, .produit-conseil-bloc { box-shadow: 5px 5px 10px -7px rgba(0, 0, 0, 0.2); } .produit-bienfait-titre { font-weight: 700; color: #9A5033; margin: 0 0 6px; } .produit-bienfait-texte { margin: 0; font-size: 13px; line-height: 1.7; color: #4A505E; } .produit-citation { padding: 14px 20px; background: #F8F2E3; border-radius: 8px; } .produit-citation p { margin: 0; line-height: 1.8; font-size: 14px; color: #4A505E; font-style: italic; } /* --- Caracteristiques --- */ .produit-caract { line-height: 2; } /* --- Composition --- */ .produit-compo-bloc { margin-bottom: 24px; } .produit-compo-titre { font-weight: 700; color: #4A505E; border-bottom: 1px solid #E1D5B3; padding-bottom: 6px; margin-bottom: 10px; margin-top: 0; } .produit-compo-inci { font-size: 12px; color: #888; line-height: 1.7; margin-bottom: 6px; } .produit-compo-fr { font-size: 13px; color: #4A505E; line-height: 1.7; margin: 0; } .produit-compo-legende { font-size: 11px; color: #aaa; line-height: 1.8; border-top: 1px solid #E1D5B3; padding-top: 12px; margin-top: 8px; } /* --- Conseils Utilisation / Conservation --- */ .produit-conseils { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; } .produit-conseil-bloc { flex: 1; min-width: 260px; background: #F8F2E3; border-radius: 8px; padding: 20px 24px; } .produit-conseil-titre { font-weight: 700; color: #4A505E; border-bottom: 1px solid #E1D5B3; padding-bottom: 8px; margin-bottom: 14px; margin-top: 0; } .produit-conseil-texte { line-height: 1.8; margin: 0; color: #4A505E; } /* Bloc conseil a 3 colonnes (ex: Rhassoul avec soin capillaire) */ .produit-conseil-bloc.col-3 { min-width: 220px; } /* ========================================================== 3. Bouton ajout panier ========================================================== */ .single-product .single_add_to_cart_button { margin: 0 !important; background-color: #4A505E !important; border: 1px solid #4A505E !important; font-family: "Comfortaa", sans-serif !important; font-size: 14px !important; text-transform: uppercase; } .single-product .single_add_to_cart_button:hover { background-color: #ffffff !important; border-color: #E1D5B3 !important; color: #E1D5B3 !important; } /* ========================================================== 4. Quantité custom + / - ========================================================== */ .single-product .quantity { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 20px; border: 1px solid #4A505E; } /* Boutons - et + */ .single-product .quantity button { padding: 0 !important; border: none; background: none; color: #4A505E; font-size: 22px; cursor: pointer; } /* Champ quantité */ .single-product .quantity input.qty { width: 50px; border: none !important; background: transparent; box-shadow: none; color: #4A505E; text-align: center; } /* Supprime les flèches natives Chrome / Safari */ .single-product .quantity input[type="number"]::-webkit-inner-spin-button, .single-product .quantity input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /* Supprime les flèches natives Firefox */ .single-product .quantity input[type="number"] { -moz-appearance: textfield; } /* ========================================================== 5. Variations radios custom ========================================================== */ .single-product .custom-variation-radios { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; } /* Texte variation */ .single-product .variations span { font-size: 14px !important; font-weight: 400 !important; line-height: 1rem; text-transform: none; } /* Label radio */ .single-product .variation-radio { display: flex; align-items: center; gap: 8px; color: #4A505E; font-size: 16px; cursor: pointer; } /* Margin bottom quand Effacer est masque (une seule variation) */ .single-product .custom-variation-radios.single-variation .variation-radio { margin-bottom: 16px; } /* Radio custom */ .single-product .variation-radio input[type="radio"] { position: relative; width: 12px; height: 12px; border: 1px solid #4A505E; border-radius: 50%; appearance: none; cursor: pointer; } /* Point intérieur radio */ .single-product .variation-radio input[type="radio"]:checked::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: #4A505E; border-radius: 50%; transform: translate(-50%, -50%); } .single-product input[type="radio"]:checked { background-color: #ffffff !important; } /* ========================================================== 6. Page Panier ========================================================== */ .woocommerce-cart .shopengine-table__body-item { gap: 10px !important; } .woocommerce-cart .product-price, .woocommerce-cart .product-subtotal { display: flex; justify-content: center; align-items: center; } .woocommerce-cart .woocommerce-Price-amount bdi, .woocommerce-cart .product-name a { font-weight: 900 !important; } .shopengine-widget .shopengine-checkout-coupon-form .woocommerce-info-toggle::before { display: none !important; } /* Section produit hors panier */ .woocommerce-cart .products { font-family: "Comfortaa", sans-serif !important; } .woocommerce-cart .woocommerce-loop-product__title { font-weight: 700; color: #4A505E !important; } .woocommerce-cart .products { row-gap: 20px; } .woocommerce-cart a.product_type_variable, .woocommerce-cart a.button.product_type_simple { background-color: #4A505E !important; border: solid 1px #4A505E !important; padding: 5px 10px 5px 10px !important; align-self: flex-start !important; } .woocommerce-cart a.product_type_variable:hover, .woocommerce-cart a.button.product_type_simple:hover { background-color: white !important; color: #E1D5B3 !important; border-color: #E1D5B3 !important; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { justify-content: space-between !important; } /* Bouton panier vide "Continuer mes achats" */ .wc-empty-cart-message .empty-cart-button-group { margin-top: 25px; text-align: center; } .wc-empty-cart-message .shopengine-footer-button { background: #4f5668; color: #fff; border: none; padding: 10px 28px; border-radius: 2px; font-family: "Comfortaa", sans-serif; cursor: pointer; } .wc-empty-cart-message .shopengine-footer-button a { color: #fff; text-decoration: none; } .wc-empty-cart-message .shopengine-footer-button i { margin-right: 6px; } .wc-empty-cart-message .shopengine-footer-button:hover { background-color: #E1D5B3 !important; } .woocommerce-cart .shopengine-woocommerce-info { background-color:#F8F2E3 !important; } @media (max-width: 1024px) { .woocommerce-cart .product-price, .woocommerce-cart .product-subtotal { justify-content: start; gap: 20px; } .shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-subtotal::before , .shopengine-widget .shopengine-cart-table .shopengine-table__body-item .product-price::before{ width: 100px !important; } } /* ========================================================== 7. Bannière WooCommerce notice ========================================================== */ /* Wrapper popup */ .woocommerce-notices-wrapper, .elementor-widget-woocommerce-notices { position: fixed !important; top: 120px; right: 24px; z-index: 99999; width: auto !important; max-width: 380px !important; min-width: 280px; opacity: 0; transform: translateX(120%); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; } /* Affichage du popup */ .woocommerce-notices-wrapper.is-visible, .elementor-widget-woocommerce-notices.is-visible, .woocommerce-cart .shopengine-cart-table > .woocommerce-error.is-visible, .woocommerce-cart .shopengine-cart-table ul.woocommerce-error.is-visible { opacity: 1; transform: translateX(0); } /* Erreurs ShopEngine hors wrapper */ .woocommerce-cart .shopengine-cart-table > .woocommerce-error, .woocommerce-cart .shopengine-cart-table ul.woocommerce-error { position: fixed !important; top: 120px; right: 24px; z-index: 99999; width: auto !important; max-width: 380px !important; min-width: 280px; opacity: 0; transform: translateX(120%); transition: opacity 0.4s ease, transform 0.4s ease; } /* Style commun des notices */ .woocommerce-notices-wrapper .woocommerce-message, .woocommerce-notices-wrapper .woocommerce-info, .woocommerce-notices-wrapper .woocommerce-error, .elementor-widget-woocommerce-notices .woocommerce-message, .elementor-widget-woocommerce-notices .woocommerce-info, .elementor-widget-woocommerce-notices .woocommerce-error, .woocommerce-cart .shopengine-cart-table > .woocommerce-error, .woocommerce-cart .shopengine-cart-table ul.woocommerce-error { width: 100% !important; max-width: 380px !important; box-sizing: border-box; font-family: "Comfortaa", sans-serif; background: #F8F2E3 !important; color: #3d3d3d !important; padding: 16px 20px 16px 45px !important; margin-bottom: 12px; border-radius: 5px; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16); pointer-events: auto; } /* Position des icônes */ .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before { top: 16px !important; left: 14px !important; } /* Success + info */ .woocommerce-message, .woocommerce-info { border-top: 3px solid #E1D5B3 !important; } .woocommerce-message::before, .woocommerce-info::before { color: #E1D5B3 !important; } /* Error */ .woocommerce-error { border-top: 3px solid #d63638 !important; } .woocommerce-error::before { color: #d63638 !important; } /* ========================================================== 8. Page checkout ========================================================== */ /* Masque les labels checkout WooCommerce / ShopEngine */ .woocommerce-checkout .woocommerce-billing-fields label, .woocommerce-checkout .woocommerce-shipping-fields label { display: none !important; } .woocommerce-checkout #order_review tr { box-shadow: none !important; } .woocommerce-checkout #order_review tbody tr { gap: 30px !important; } .woocommerce-checkout #order_review tbody td { flex-wrap: nowrap !important; } .woocommerce-checkout #order_review thead tr { border-bottom: solid 1px #9A5033 !important; margin-bottom: 20px !important; } .woocommerce-checkout #order_review tfoot { border-top: solid 1px #9A5033 !important; } /* Bordure formulaire "Adresse différente de livraison" */ .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper { border: solid 1px #9A5033 !important; } /* ========================================================== 9. Page Mon compte ========================================================== */ .woocommerce-account { margin-top: 160px !important; font-family: "Comfortaa",sans-serif !important; } .woocommerce-account .woocommerce a { color: #9A5033 !important; } .woocommerce-account h1 { font-family: "Comfortaa",sans-serif !important; color: #4A505E !important; } .woocommerce-account .woocommerce { display: flex !important; flex-direction: column; } .woocommerce-account .woocommerce-MyAccount-navigation { width: 100% !important; } .woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex !important; gap: 10px; padding: 0px; } .woocommerce-account .woocommerce-MyAccount-navigation li a { color: #1E1E1E !important; line-height: 1rem; } .woocommerce-account .woocommerce-MyAccount-navigation li { background-color: #F8F2E3 !important; border-radius: 8px 8px 0 0; border: none; } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background-color: #4A505E !important; color: white !important; border-radius: 8px 8px 0 0; height: 100% !important; } .woocommerce-account .woocommerce-MyAccount-content { border: solid 1px #E9E0C8 !important; border-radius: 0px 8px 8px 8px; padding: 30px !important; width: 100% !important; } .woocommerce-account .woocommerce .button { background-color: #4A505E !important; color: white !important; } .woocommerce-account input { border-top: 0px !important; border-left: 0px !important; border-right: 0px !important; } .woocommerce-account .login, .woocommerce-account .login input { background-color: #FFFBF3 !important; } .woocommerce-account .login { border: none !important; padding: 50px !important; } .woocommerce-account .login, .woocommerce-account .login button { margin-top: 30px; } @media (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-direction: column !important; } } /* ========================================================== 10. Responsive ========================================================== */ @media (max-width: 1024px) { .single-product .ast-woo-shop-product-description { display: none; } .price { margin-top: 0 !important; margin-bottom: 10px !important; } } @media (max-width: 768px) { .single-product { margin-top: 150px; } } /* ========================================================== Bouton choix point relais Mondial Relay ========================================================== */ /* Mondial Relay - layout du li de livraison */ .shopengine-widget .shopengine-checkout-review-order .woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td ul li:has(.wms_pickup_open_modal_openstreetmap) { display: grid !important; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; align-items: start !important; column-gap: 8px; row-gap: 6px; flex-direction: unset !important; } /* Puce - colonne 1 ligne 1 */ .woocommerce-shipping-totals li:has(.wms_pickup_open_modal_openstreetmap) input[type="radio"] { grid-column: 1; grid-row: 1; margin-top: 3px; } /* Label - colonne 2 ligne 1 */ .woocommerce-shipping-totals li:has(.wms_pickup_open_modal_openstreetmap) label { grid-column: 2; grid-row: 1; } /* Bouton - colonne 2 ligne 2 */ .wms_pickup_open_modal_openstreetmap { grid-column: 2; grid-row: 2; padding: 6px 12px; font-size: 12px; width: fit-content; margin-top: 4px; } /* Bloc point selectionne - colonne 2 ligne 3 */ #wms_selected_pickup_desc { grid-column: 2 / -1; grid-row: 3; font-size: 12px; color: #4A505E; margin-top: 4px; line-height: 1.5; } /* Icone panier sur les vignettes produits - icon-bag manquante */ .single-product .ast-icon.icon-bag { visibility: visible !important; } .single-product .ast-icon.icon-bag::before { content: ""; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; vertical-align: middle; } /* ========================================================== Page confirmation de commande (Thank You) ========================================================== */ .woocommerce-order-received .woocommerce { margin: 200px auto 60px; padding: 0 40px; } /* Message de succes */ .woocommerce-order-received .woocommerce-notice--success { background: #F8F2E3; border: none; border-left: 4px solid #9A5033; border-radius: 8px; padding: 20px 24px; color: #4A505E; font-family: "Comfortaa", sans-serif; font-size: 15px; line-height: 1.7; margin-bottom: 32px; } /* Bloc recapitulatif commande */ .woocommerce-order-received .woocommerce-order-overview { background: #4A505E; border-radius: 8px; padding: 24px; list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 32px; padding-left: 24px; } .woocommerce-order-received .woocommerce-order-overview li { flex: 1; min-width: 140px; padding: 12px 16px; border-right: 1px solid rgba(225, 213, 179, 0.2); color: #F8F2E3; font-family: "Comfortaa", sans-serif; font-size: 13px; } .woocommerce-order-received .woocommerce-order-overview li:last-child { border-right: none; } .woocommerce-order-received .woocommerce-order-overview li strong { display: block; color: #E1D5B3; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; font-weight: 700; } /* Total en rust */ .woocommerce-order-received .woocommerce-order-overview__total strong ~ * { color: #9A5033; font-weight: 700; font-size: 16px; } /* Titre sections */ .woocommerce-order-received h2 { font-family: "Comfortaa", sans-serif; font-size: 18px; color: #4A505E; font-weight: 700; border-bottom: 1px solid #E1D5B3; padding-bottom: 10px; margin-bottom: 20px; } /* Tableau produits */ .woocommerce-order-received .woocommerce-table--order-details { width: 100%; border-collapse: collapse; font-family: "Comfortaa", sans-serif; font-size: 13px; color: #4A505E; margin-bottom: 32px; } .woocommerce-order-received .woocommerce-table--order-details thead th { background: #F8F2E3; padding: 14px 20px; text-align: left; font-weight: 700; color: #4A505E; border-bottom: 2px solid #E1D5B3; font-family: "Comfortaa", sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .woocommerce-order-received .woocommerce-table--order-details tbody td { padding: 14px 20px; border-bottom: 1px solid #E1D5B3; vertical-align: middle; color: #4A505E; } .woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td, .woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th { font-weight: 700; color: #9A5033; font-size: 15px; padding: 14px 16px; border-top: 2px solid #E1D5B3; } /* Adresse client */ .woocommerce-order-received .woocommerce-customer-details address { background: #F8F2E3; border-radius: 8px; padding: 20px 24px; font-family: "Comfortaa", sans-serif; font-size: 13px; color: #4A505E; line-height: 1.8; border: none; font-style: normal; } @media (max-width: 768px) { .woocommerce-order-received .woocommerce-order-overview li { min-width: 45%; border-right: none; border-bottom: 1px solid rgba(225, 213, 179, 0.2); } } /* Neutraliser text-align:right de ShopEngine sur la derniere colonne */ .shopengine-widget .shopengine-checkout-review-order .woocommerce-checkout-review-order-table tr :last-child { text-align: left !important; } /* Supprimer le fond gris sur le container commande ShopEngine */ .elementor-element-2c8ec30 { background-color: transparent !important; } /* Payment box ShopEngine - corrections layout */ .shopengine-widget .shopengine-checkout-payment #payment .wc_payment_method .payment_box { max-width: 100% !important; padding-left: 0 !important; margin-top: 50px !important; } /* ========================================================== Messages erreur checkout - Toast notification ========================================================== */ .woocommerce-NoticeGroup-checkout { position: fixed !important; top: 120px !important; right: 20px !important; z-index: 99999 !important; max-width: 380px !important; width: auto !important; margin: 0 !important; } .woocommerce-NoticeGroup-checkout .woocommerce-error { background: #fff !important; border: none !important; border-left: 4px solid #9A5033 !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important; padding: 16px 20px !important; margin: 0 !important; list-style: none !important; animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .woocommerce-NoticeGroup-checkout .woocommerce-error li { font-family: "Comfortaa", sans-serif !important; font-size: 13px !important; color: #4A505E !important; padding: 4px 0 !important; border: none !important; list-style: none !important; } .woocommerce-NoticeGroup-checkout .woocommerce-error li a { color: #9A5033 !important; font-weight: 700 !important; text-decoration: none !important; } .woocommerce-NoticeGroup-checkout .woocommerce-error li a:hover { text-decoration: underline !important; } @media (max-width: 768px) { .woocommerce-NoticeGroup-checkout { top: auto !important; bottom: 20px !important; right: 10px !important; left: 10px !important; max-width: 100% !important; } } /* Onglets fiche produit - couleur active correcte */ .elementor-element-d0d1784 .e-n-tab-title[aria-selected="true"] { --n-tabs-title-background-color-active: #4C505E !important; background-color: #4C505E !important; } /* Onglets fiche produit - couleur hover */ .elementor-element-d0d1784 .e-n-tab-title:hover { --n-tabs-title-background-color-active: #4C505E !important; background-color: #4C505E !important; }