/* URBAN GRID EMERGENCY OVERRIDE — restores 3 / 2 / 1 product cards */ .woocommerce ul.products,.woocommerce-page ul.products,.elementor .woocommerce ul.products,.elementor-widget-shortcode .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:34px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;columns:auto!important;column-count:auto!important} .woocommerce ul.products li.product,.woocommerce-page ul.products li.product,.elementor .woocommerce ul.products li.product{float:none!important;width:100%!important;max-width:none!important;margin:0!important} .woocommerce ul.products li.product img,.elementor .woocommerce ul.products li.product img{width:100%!important;height:400px!important;aspect-ratio:auto!important;object-fit:cover!important} @media(max-width:1024px){.woocommerce ul.products,.woocommerce-page ul.products,.elementor .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:640px){.woocommerce ul.products,.woocommerce-page ul.products,.elementor .woocommerce ul.products{grid-template-columns:minmax(0,1fr)!important}.woocommerce ul.products li.product img,.elementor .woocommerce ul.products li.product img{height:290px!important}} /* URBAN CONTAINERS — PREMIUM SINGLE PRODUCT */ .single-product .uc-commerce-content div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:52px;align-items:start;background:#fff;border:1px solid #dbe2df;padding:34px;box-shadow:0 16px 45px rgba(7,42,50,.07)} .single-product div.product .woocommerce-product-gallery,.single-product div.product .summary{width:100%!important;float:none!important;margin:0!important} .single-product div.product .summary{padding:10px 6px 0} .single-product div.product .summary .product_title{font:700 clamp(28px,3vw,42px)/1.08 "Manrope",sans-serif;color:#073f49;margin:0 0 18px} .single-product div.product .summary .price{font:700 29px/1.15 "Manrope",sans-serif;color:#c87732;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid #e1e5e2} .single-product div.product .woocommerce-product-details__short-description{font:500 16px/1.7 "Manrope",sans-serif;color:#34575d;margin-bottom:24px} .single-product div.product .summary .product_meta{margin-top:26px;padding-top:18px;border-top:1px solid #e1e5e2;font:600 13px/1.8 "Manrope",sans-serif;color:#63777b} .single-product .woocommerce-tabs{grid-column:1/-1;margin-top:18px;padding-top:30px;border-top:1px solid #dbe2df} .single-product .woocommerce-tabs ul.tabs{display:flex;gap:8px;margin:0 0 28px!important;padding:0!important} .single-product .woocommerce-tabs ul.tabs:before{display:none!important} .single-product .woocommerce-tabs ul.tabs li{margin:0!important;padding:0!important;border:1px solid #dbe2df!important;border-radius:0!important;background:#f5f3ed!important} .single-product .woocommerce-tabs ul.tabs li:before,.single-product .woocommerce-tabs ul.tabs li:after{display:none!important} .single-product .woocommerce-tabs ul.tabs li a{padding:14px 20px!important;font:700 13px "Manrope",sans-serif!important;color:#0b4c55!important} .single-product .woocommerce-tabs ul.tabs li.active{background:#0b4c55!important;border-color:#0b4c55!important}.single-product .woocommerce-tabs ul.tabs li.active a{color:#fff!important} .single-product .woocommerce-Tabs-panel{max-width:1050px;padding:0 0 20px!important;font:500 16px/1.75 "Manrope",sans-serif;color:#34575d} .single-product .woocommerce-Tabs-panel h2{font:700 26px/1.2 "Manrope",sans-serif;color:#073f49;margin:0 0 22px} .single-product .related.products,.single-product .upsells.products{grid-column:1/-1;margin-top:34px;padding-top:34px;border-top:1px solid #dbe2df} .single-product .related.products>h2,.single-product .upsells.products>h2{font:700 clamp(25px,3vw,36px)/1.15 "Manrope",sans-serif;color:#073f49;margin:0 0 28px} .single-product .related.products ul.products,.single-product .upsells.products ul.products{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important} .single-product .related.products .uc-product-actions,.single-product .upsells.products .uc-product-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:10px!important;padding:0 20px!important} .single-product .related.products .uc-product-actions a,.single-product .upsells.products .uc-product-actions a{width:100%!important;min-width:0!important;min-height:54px!important;padding:10px 7px!important;white-space:normal!important;font-size:11px!important;line-height:1.2!important} @media(max-width:1024px){.single-product .uc-commerce-content div.product{grid-template-columns:1fr 1fr;gap:28px;padding:24px}.single-product .related.products ul.products,.single-product .upsells.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media(max-width:700px){.single-product .uc-commerce-content{padding-left:14px;padding-right:14px}.single-product .uc-commerce-content div.product{display:block;padding:14px}.single-product div.product .summary{padding:25px 4px 4px}.single-product .woocommerce-tabs{margin-top:28px}.single-product .woocommerce-tabs ul.tabs{display:grid;grid-template-columns:1fr}.single-product .related.products ul.products,.single-product .upsells.products ul.products{grid-template-columns:1fr!important}.single-product .related.products .uc-product-actions,.single-product .upsells.products .uc-product-actions{grid-template-columns:1fr 1fr!important;padding:0 16px!important;gap:8px!important}.single-product .related.products .uc-product-actions a,.single-product .upsells.products .uc-product-actions a{font-size:10px!important}} /* FINAL FIX — related product action buttons: compact, aligned, never stretched */ .single-product .related.products li.product,.single-product .upsells.products li.product{padding-bottom:20px!important} .single-product .related.products li.product .uc-product-actions,.single-product .upsells.products li.product .uc-product-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;padding:0 18px!important;margin:18px 0 0!important;box-sizing:border-box!important;align-items:stretch!important} .single-product .related.products li.product .uc-product-actions>a,.single-product .upsells.products li.product .uc-product-actions>a{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:52px!important;min-height:52px!important;max-height:52px!important;margin:0!important;padding:8px 10px!important;box-sizing:border-box!important;font-size:10.5px!important;line-height:1.15!important;font-weight:800!important;text-align:center!important;white-space:normal!important;overflow-wrap:normal!important;border-radius:3px!important} @media(max-width:640px){.single-product .related.products li.product .uc-product-actions,.single-product .upsells.products li.product .uc-product-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:0 14px!important}.single-product .related.products li.product .uc-product-actions>a,.single-product .upsells.products li.product .uc-product-actions>a{height:50px!important;min-height:50px!important;max-height:50px!important;font-size:10px!important;padding:7px 5px!important}} /* ========================================================== URBAN CONTAINERS — WOOCOMMERCE FINAL Desktop : 3 colonnes Tablette : 2 colonnes Mobile : 1 colonne ========================================================== */ .woocommerce, .woocommerce-page { font-family: "Manrope", sans-serif; } /* ---------- ZONE CATALOGUE ---------- */ .uc-woocommerce { background: #f5f3ed; color: #0b3f49; overflow: hidden; } .uc-commerce-head { max-width: 1440px; margin: 0 auto; padding: 54px 48px 28px; } .uc-commerce-head span { font: 700 12px/1.2 "Manrope", sans-serif; letter-spacing: .16em; color: #c87732; } .uc-commerce-head h1 { margin: 10px 0 0; font: 700 clamp(30px, 4vw, 52px)/1.05 "Manrope", sans-serif; color: #0b3f49; } .uc-commerce-content { max-width: 1440px; margin: 0 auto; padding: 0 48px 80px; } /* ========================================================== GRILLE PRODUITS Fonctionne boutique + catégories + shortcode Elementor ========================================================== */ .woocommerce ul.products, .woocommerce-page ul.products, .elementor-widget-shortcode .woocommerce ul.products, .uc-commerce-content ul.products { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 34px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; clear: both !important; list-style: none !important; } /* Supprime les anciens clearfix WooCommerce */ .woocommerce ul.products::before, .woocommerce ul.products::after, .woocommerce-page ul.products::before, .woocommerce-page ul.products::after { display: none !important; content: none !important; } /* ========================================================== CARTE PRODUIT ========================================================== */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .elementor-widget-shortcode .woocommerce ul.products li.product, .uc-commerce-content ul.products li.product { float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 24px !important; position: relative !important; display: flex !important; flex-direction: column !important; background: #ffffff !important; border: 1px solid #dbe2df !important; border-radius: 4px !important; overflow: hidden !important; box-shadow: 0 10px 32px rgba(7, 42, 50, .06) !important; transition: transform .25s ease, box-shadow .25s ease; } .woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(7, 42, 50, .11) !important; } /* ========================================================== LIEN PRODUIT ========================================================== */ .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: flex !important; flex-direction: column !important; color: inherit !important; text-decoration: none !important; } /* ========================================================== IMAGE Grande image occupant toute la largeur de la carte ========================================================== */ .woocommerce ul.products li.product a.woocommerce-LoopProduct-link img, .woocommerce ul.products li.product img { display: block !important; width: 100% !important; max-width: 100% !important; height: 400px !important; margin: 0 0 24px !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; transition: transform .35s ease; } .woocommerce ul.products li.product:hover img { transform: scale(1.015); } /* ========================================================== TITRE ========================================================== */ .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 26px !important; margin: 0 0 13px !important; font-family: "Manrope", sans-serif !important; font-size: 20px !important; line-height: 1.32 !important; font-weight: 700 !important; color: #073f49 !important; text-transform: none !important; } /* ========================================================== PRIX ========================================================== */ .woocommerce ul.products li.product .price { display: block !important; padding: 0 26px !important; margin: 0 0 22px !important; font-family: "Manrope", sans-serif !important; font-size: 19px !important; line-height: 1.2 !important; font-weight: 700 !important; color: #cf6b16 !important; } /* ========================================================== ACTIONS Voir le produit + Demander un devis ========================================================== */ .woocommerce ul.products li.product .uc-product-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 12px !important; width: 100% !important; padding: 0 26px !important; margin-top: auto !important; box-sizing: border-box !important; } .woocommerce ul.products li.product .uc-product-actions a { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 58px !important; padding: 12px 10px !important; box-sizing: border-box !important; text-align: center !important; text-decoration: none !important; font-family: "Manrope", sans-serif !important; font-size: 12px !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: .015em !important; border-radius: 3px !important; transition: transform .2s ease, filter .2s ease !important; } /* VOIR LE PRODUIT */ .woocommerce ul.products li.product .uc-product-view { background: #0b4c55 !important; color: #ffffff !important; border: 1px solid #0b4c55 !important; } /* DEMANDER UN DEVIS */ .woocommerce ul.products li.product .uc-product-quote { background: #efb35e !important; color: #073844 !important; border: 1px solid #efb35e !important; } .woocommerce ul.products li.product .uc-product-actions a:hover { filter: brightness(.96); transform: translateY(-1px); } /* ========================================================== SUPPRESSION DU BOUTON WOOCOMMERCE CLASSIQUE seulement s'il subsiste dans certaines cartes ========================================================== */ .woocommerce ul.products li.product > a.button, .woocommerce ul.products li.product .add_to_cart_button { display: none !important; } /* ========================================================== RESULT COUNT + TRI ========================================================== */ .uc-commerce-content .woocommerce-result-count { font: 600 14px/1.4 "Manrope", sans-serif; color: #61777c; margin: 0 0 26px; } .uc-commerce-content .woocommerce-ordering { margin: 0 0 26px; } .uc-commerce-content .woocommerce-ordering select { min-width: 220px; padding: 14px 42px 14px 16px; border: 1px solid #d6dedc; background: #ffffff; color: #0b3f49; font: 600 14px "Manrope", sans-serif; border-radius: 4px; } /* ========================================================== TABLETTE — 2 COLONNES ========================================================== */ @media (max-width: 1024px) { .uc-commerce-head, .uc-commerce-content { padding-left: 28px; padding-right: 28px; } .woocommerce ul.products, .woocommerce-page ul.products, .elementor-widget-shortcode .woocommerce ul.products, .uc-commerce-content ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } .woocommerce ul.products li.product img { height: 320px !important; } } /* ========================================================== MOBILE — 1 COLONNE ========================================================== */ @media (max-width: 640px) { .uc-commerce-head { padding: 34px 18px 22px; } .uc-commerce-content { padding: 0 18px 56px; } .woocommerce ul.products, .woocommerce-page ul.products, .elementor-widget-shortcode .woocommerce ul.products, .uc-commerce-content ul.products { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; } .woocommerce ul.products li.product { width: 100% !important; } .woocommerce ul.products li.product img { width: 100% !important; height: 290px !important; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: 0 18px !important; font-size: 19px !important; } .woocommerce ul.products li.product .price { padding: 0 18px !important; } .woocommerce ul.products li.product .uc-product-actions { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 18px !important; } .woocommerce ul.products li.product .uc-product-actions a { min-height: 54px !important; padding: 10px 6px !important; font-size: 10px !important; } } /* Très petits téléphones */ @media (max-width: 380px) { .woocommerce ul.products li.product .uc-product-actions { grid-template-columns: 1fr !important; } }