/* ================================================================== N'Joy Car — WooCommerce (noir / or premium) Boutique intégrée au thème custom. Palette : or #C9A84C / noir #0d0d0d. ================================================================== */ .njoy-shop{ --g:#C9A84C; --g2:#b8933d; --gl:#e8c96a; --bg:#0d0d0d; --surf:#161616; --surf2:#1c1c1c; --bd:rgba(201,168,76,.18); --bd2:rgba(255,255,255,.08); --tx:#e6e3da; --mut:#9a958a; background:var(--bg); color:var(--tx); font-family:var(--font-body); padding:calc(var(--header-h, 80px) + 60px) 20px 70px !important; } .njoy-shop-inner{ max-width:1280px; margin:0 auto; } .njoy-shop a{ color:var(--g); } .njoy-shop ::selection{ background:var(--g); color:#0d0d0d; } /* ── Titres & fil d'Ariane ───────────────────────────────── */ .njoy-shop .woocommerce-products-header__title, .njoy-shop h1.product_title, .njoy-shop h1.entry-title{ font-family:Montserrat,sans-serif; font-weight:800; color:#fff; font-size:2rem; letter-spacing:.5px; margin:0 0 6px; } .njoy-wc-breadcrumb{ font-size:.8rem; color:var(--mut); margin:0 auto 22px; max-width:1280px; } .njoy-wc-breadcrumb a{ color:var(--mut); text-decoration:none; } .njoy-shop .term-description, .njoy-shop .woocommerce-products-header{ margin-bottom:18px; } .njoy-shop .woocommerce-result-count{ color:var(--mut); font-size:.82rem; } .njoy-shop .woocommerce-ordering select{ background:var(--surf2); color:var(--tx); border:1px solid var(--bd); border-radius:4px; padding:8px 12px; } /* ── Grille produits ─────────────────────────────────────── */ .njoy-shop ul.products{ display:grid !important; grid-template-columns:repeat(5,1fr); gap:16px; margin:0; padding:0; list-style:none; } /* WooCommerce ajoute un clearfix ::before/::after qui devient une CASE VIDE en grid → on le neutralise */ .njoy-shop ul.products::before, .njoy-shop ul.products::after{ content:none !important; display:none !important; } .njoy-shop ul.products li.product{ clear:none !important; } @media(max-width:1300px){ .njoy-shop ul.products{ grid-template-columns:repeat(4,1fr); } } @media(max-width:1050px){ .njoy-shop ul.products{ grid-template-columns:repeat(3,1fr); } } @media(max-width:760px){ .njoy-shop ul.products{ grid-template-columns:repeat(2,1fr); } } @media(max-width:460px){ .njoy-shop ul.products{ grid-template-columns:1fr; } } .njoy-shop li.product .woocommerce-loop-product__title{ font-size:.88rem; } .njoy-shop li.product img{ aspect-ratio:1/1; } .njoy-shop ul.products li.product{ width:auto !important; margin:0 !important; float:none !important; background:var(--surf); border:1px solid var(--bd2); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s, border-color .2s, box-shadow .2s; } .njoy-shop ul.products li.product:hover{ transform:translateY(-4px); border-color:var(--bd); box-shadow:0 12px 30px rgba(0,0,0,.45); } .njoy-shop li.product a.woocommerce-LoopProduct-link{ display:block; padding:0; color:inherit; } .njoy-shop li.product img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; background:#fff; margin:0 !important; display:block; } .njoy-shop li.product .woocommerce-loop-product__title{ font-family:Montserrat,sans-serif; font-weight:700; font-size:.95rem; color:#fff; padding:14px 16px 4px; line-height:1.35; } .njoy-shop li.product .price{ padding:0 16px; color:var(--g); font-weight:800; font-size:1.05rem; display:block; } .njoy-shop li.product .price del{ color:var(--mut); font-weight:500; font-size:.85rem; margin-right:6px; } .njoy-shop li.product .price ins{ text-decoration:none; color:var(--gl); } .njoy-shop li.product .star-rating{ margin:8px 16px 0; color:var(--g); } .njoy-shop li.product .button, .njoy-shop li.product .added_to_cart{ margin:14px 16px 16px; text-align:center; } /* ── Badge promo ─────────────────────────────────────────── */ .njoy-shop span.onsale{ background:var(--g); color:#0d0d0d; font-family:Montserrat,sans-serif; font-weight:800; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; min-height:0; min-width:0; padding:5px 11px; border-radius:20px; top:12px; left:12px; right:auto; margin:0; position:absolute; } .njoy-shop li.product, .njoy-shop div.product{ position:relative; } /* ── Boutons (or premium) ────────────────────────────────── */ .njoy-shop .button, .njoy-shop .wp-element-button, .njoy-shop button.button, .njoy-shop input.button, .njoy-shop a.button, .njoy-shop #respond input#submit{ background:var(--g); color:#0d0d0d !important; border:0; border-radius:6px; font-family:Montserrat,sans-serif; font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.78rem; padding:12px 22px; cursor:pointer; transition:background .2s, transform .1s; box-shadow:none; } .njoy-shop .button:hover, .njoy-shop .wp-element-button:hover, .njoy-shop button.button:hover, .njoy-shop a.button:hover{ background:var(--gl); transform:translateY(-1px); } .njoy-shop .button.alt, .njoy-shop .checkout-button, .njoy-shop .single_add_to_cart_button{ background:var(--g); } .njoy-shop .added_to_cart{ display:inline-block; color:var(--g) !important; border:1px solid var(--g); background:transparent; border-radius:6px; padding:10px 18px; font-size:.74rem; text-transform:uppercase; font-weight:700; } .njoy-shop .button.disabled, .njoy-shop .button:disabled{ opacity:.5; } /* ── Fiche produit ───────────────────────────────────────── */ .njoy-shop div.product{ display:grid; grid-template-columns:1fr 1fr; gap:40px; } @media(max-width:820px){ .njoy-shop div.product{ grid-template-columns:1fr; gap:24px; } } .njoy-shop div.product .woocommerce-product-gallery{ float:none; width:auto; margin:0; } .njoy-shop div.product .woocommerce-product-gallery img{ border-radius:10px; background:#fff; } .njoy-shop div.product .summary{ float:none; width:auto; margin:0; } .njoy-shop div.product .summary .price, .njoy-shop div.product p.price{ color:var(--g); font-weight:800; font-size:1.7rem; margin:6px 0 16px; } .njoy-shop div.product .summary .price del{ color:var(--mut); font-size:1.1rem; } .njoy-shop div.product .woocommerce-product-details__short-description{ color:var(--tx); line-height:1.7; font-size:.92rem; } .njoy-shop div.product .quantity input.qty{ background:var(--surf2); color:#fff; border:1px solid var(--bd); border-radius:5px; padding:11px 8px; width:72px; } .njoy-shop .stock.in-stock{ color:#10b981; } .njoy-shop .stock.out-of-stock{ color:#e05252; } .njoy-shop .product_meta{ color:var(--mut); font-size:.8rem; margin-top:18px; border-top:1px solid var(--bd2); padding-top:14px; } .njoy-shop .product_meta a{ color:var(--g); } /* Onglets (description / avis) */ .njoy-shop .woocommerce-tabs{ grid-column:1/-1; margin-top:30px; } .njoy-shop .woocommerce-tabs ul.tabs{ border-bottom:1px solid var(--bd); padding:0; } .njoy-shop .woocommerce-tabs ul.tabs li{ background:transparent; border:0; border-radius:0; margin:0 4px -1px 0; padding:0; } .njoy-shop .woocommerce-tabs ul.tabs li a{ font-family:Montserrat,sans-serif; font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); padding:12px 18px; display:block; border-bottom:2px solid transparent; } .njoy-shop .woocommerce-tabs ul.tabs li.active a{ color:var(--g); border-bottom-color:var(--g); } .njoy-shop .woocommerce-tabs ul.tabs:before{ border-color:var(--bd); } .njoy-shop .woocommerce-Tabs-panel h2{ color:#fff; font-family:Montserrat,sans-serif; } .njoy-shop h2.woocommerce-loop-product__title, .njoy-shop section.related h2, .njoy-shop section.up-sells h2{ color:#fff; font-family:Montserrat,sans-serif; } /* ── Tableaux (panier) ───────────────────────────────────── */ .njoy-shop table.shop_table{ border:1px solid var(--bd2); border-radius:8px; border-collapse:separate; border-spacing:0; overflow:hidden; } .njoy-shop table.shop_table th{ background:#000; color:var(--g); font-family:Montserrat,sans-serif; text-transform:uppercase; font-size:.72rem; letter-spacing:.06em; padding:14px; } .njoy-shop table.shop_table td{ background:var(--surf); color:var(--tx); border-top:1px solid var(--bd2); padding:14px; } .njoy-shop table.shop_table a{ color:#fff; } .njoy-shop .cart_totals h2, .njoy-shop .cross-sells h2{ color:#fff; font-family:Montserrat,sans-serif; } .njoy-shop .coupon input.input-text, .njoy-shop .cart input.input-text{ background:var(--surf2); color:#fff; border:1px solid var(--bd); border-radius:5px; padding:11px 12px; } .njoy-shop td.product-name a{ color:#fff; } .njoy-shop .cart-collaterals .cart_totals .order-total .amount{ color:var(--g); } /* ── Formulaires (commande / compte) ─────────────────────── */ .njoy-shop form .form-row label{ color:var(--tx); font-size:.84rem; font-weight:600; } .njoy-shop input[type=text], .njoy-shop input[type=email], .njoy-shop input[type=tel], .njoy-shop input[type=password], .njoy-shop input[type=number], .njoy-shop textarea, .njoy-shop select, .njoy-shop .select2-container--default .select2-selection--single{ background:var(--surf2) !important; color:#fff !important; border:1px solid var(--bd) !important; border-radius:6px !important; padding:11px 12px !important; box-shadow:none !important; min-height:auto; } .njoy-shop .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#fff; line-height:normal; } .njoy-shop input:focus, .njoy-shop textarea:focus, .njoy-shop select:focus{ border-color:var(--g) !important; outline:none; } .njoy-shop #order_review, .njoy-shop #customer_details{ } .njoy-shop #order_review_heading, .njoy-shop #customer_details h3, .njoy-shop .woocommerce-billing-fields h3{ color:#fff; font-family:Montserrat,sans-serif; } .njoy-shop #payment{ background:var(--surf); border:1px solid var(--bd2); border-radius:8px; } .njoy-shop #payment ul.payment_methods{ border-color:var(--bd2); } .njoy-shop #payment div.payment_box{ background:var(--surf2); color:var(--tx); } .njoy-shop #payment div.payment_box:before{ border-bottom-color:var(--surf2); } /* Mon compte */ .njoy-shop .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; border:1px solid var(--bd2); border-radius:8px; overflow:hidden; } .njoy-shop .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--bd2); } .njoy-shop .woocommerce-MyAccount-navigation li a{ display:block; padding:13px 16px; color:var(--tx); text-decoration:none; font-size:.86rem; } .njoy-shop .woocommerce-MyAccount-navigation li.is-active a, .njoy-shop .woocommerce-MyAccount-navigation li a:hover{ background:var(--surf); color:var(--g); } /* ── Notices ─────────────────────────────────────────────── */ .njoy-shop .woocommerce-message, .njoy-shop .woocommerce-info, .njoy-shop .woocommerce-error{ background:var(--surf); border-top:3px solid var(--g); color:var(--tx); border-radius:0 0 6px 6px; padding:14px 16px 14px 44px; } .njoy-shop .woocommerce-message{ border-top-color:#10b981; } .njoy-shop .woocommerce-error{ border-top-color:#e05252; list-style:none; } .njoy-shop .woocommerce-message:before, .njoy-shop .woocommerce-info:before, .njoy-shop .woocommerce-error:before{ color:var(--g); top:14px; } .njoy-shop .woocommerce-message a.button{ float:none; margin-left:10px; } /* ── Pagination ──────────────────────────────────────────── */ .njoy-shop .woocommerce-pagination ul{ border:0; } .njoy-shop .woocommerce-pagination ul li a, .njoy-shop .woocommerce-pagination ul li span{ background:var(--surf); color:var(--tx); border:1px solid var(--bd2); border-radius:5px; margin:0 3px; padding:8px 13px; } .njoy-shop .woocommerce-pagination ul li span.current{ background:var(--g); color:#0d0d0d; border-color:var(--g); } /* ── Sécurité : aucune sidebar / widgets parasites sur la boutique ── */ .woocommerce #secondary, .woocommerce-page #secondary, .njoy-shop ~ #secondary, .njoy-shop ~ aside, aside.widget-area.shop-sidebar{ display:none !important; } .woocommerce #primary, .woocommerce-page #primary{ width:100% !important; max-width:100% !important; float:none !important; } /* ── En-tête boutique premium (titre centré + filet or) ── */ .njoy-shop .woocommerce-products-header{ text-align:center; margin:0 auto 30px; padding-bottom:18px; border-bottom:1px solid var(--bd); } .njoy-shop .woocommerce-products-header__title{ display:inline-block; } .njoy-shop .woocommerce-products-header__title:after{ content:""; display:block; width:64px; height:3px; background:var(--g); border-radius:3px; margin:14px auto 0; } .njoy-shop .term-description{ color:var(--mut); max-width:760px; margin:14px auto 0; text-align:center; font-size:.9rem; } /* barre tri / résultats */ .njoy-shop .woocommerce-result-count{ margin:0 0 18px; } .njoy-shop .woocommerce-ordering{ margin-bottom:22px; } /* « aucun produit trouvé » — premium centré */ .njoy-shop .woocommerce-no-products-found{ text-align:center; padding:30px 0; } .njoy-shop .woocommerce-info{ display:inline-block; text-align:left; } /* ================================================================ PANIER & COMMANDE — finitions premium (templates CLASSIQUES : pages avec [woocommerce_cart] / [woocommerce_checkout]) ================================================================ */ /* — Panier — */ .njoy-shop table.cart img{ width:64px; height:auto; border-radius:6px; background:#fff; } .njoy-shop table.cart td.product-remove a.remove{ color:#e05252 !important; border:1px solid var(--bd2); width:26px; height:26px; line-height:24px; border-radius:50%; font-weight:700; } .njoy-shop table.cart td.product-remove a.remove:hover{ background:#e05252; color:#fff !important; } .njoy-shop table.cart td.product-quantity input.qty{ background:var(--surf2); color:#fff; border:1px solid var(--bd); border-radius:5px; padding:10px 8px; width:70px; } .njoy-shop td.product-name a{ color:#fff; font-weight:600; } .njoy-shop td.product-price, .njoy-shop td.product-subtotal{ color:var(--g); font-weight:700; } .njoy-shop .cart .actions{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:14px; } .njoy-shop .cart .actions .coupon{ display:flex; gap:8px; } .njoy-shop .cart .actions .coupon input.input-text{ flex:1; max-width:220px; } .njoy-shop .cart-collaterals{ margin-top:24px; } .njoy-shop .cart-collaterals .cart_totals{ background:var(--surf); border:1px solid var(--bd2); border-radius:10px; padding:6px 18px 18px; float:none; width:auto; max-width:420px; margin-left:auto; } .njoy-shop .cart_totals h2{ font-size:1.1rem; padding-bottom:8px; border-bottom:1px solid var(--bd); } .njoy-shop .cart_totals table.shop_table{ border:0; border-radius:0; } .njoy-shop .cart_totals table.shop_table th{ background:transparent; color:var(--mut); padding:12px 4px; } .njoy-shop .cart_totals table.shop_table td{ background:transparent; border-top:1px solid var(--bd2); padding:12px 4px; } .njoy-shop .cart_totals .order-total th{ color:#fff; } .njoy-shop .cart_totals .order-total .amount{ color:var(--g); font-size:1.15rem; } .njoy-shop .wc-proceed-to-checkout a.checkout-button{ display:block; text-align:center; width:100%; font-size:.9rem; padding:15px; margin-top:8px; } /* — Commande (checkout) : 2 colonnes — */ @media(min-width:850px){ .njoy-shop form.checkout.woocommerce-checkout{ display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; } .njoy-shop form.checkout #customer_details{ grid-column:1; grid-row:1 / span 2; } .njoy-shop form.checkout #order_review_heading{ grid-column:2; grid-row:1; margin-top:0; } .njoy-shop form.checkout #order_review{ grid-column:2; grid-row:2; position:sticky; top:20px; } } .njoy-shop #customer_details h3, .njoy-shop #order_review_heading{ font-size:1.1rem; padding-bottom:8px; border-bottom:1px solid var(--bd); margin-bottom:14px; } .njoy-shop #order_review{ background:var(--surf); border:1px solid var(--bd2); border-radius:10px; padding:18px; } .njoy-shop #order_review .shop_table{ border:0; } .njoy-shop #order_review .shop_table th{ background:transparent; color:var(--mut); } .njoy-shop #order_review .shop_table td{ background:transparent; } .njoy-shop #order_review .cart-subtotal td, .njoy-shop #order_review .order-total td{ color:#fff; } .njoy-shop #order_review .order-total .amount{ color:var(--g); font-size:1.2rem; } .njoy-shop #payment{ padding:6px 16px 16px; } .njoy-shop #payment ul.payment_methods li, .njoy-shop #payment label{ color:var(--tx); } .njoy-shop #payment .about_paygate{ color:var(--mut); } .njoy-shop #place_order{ width:100%; font-size:.95rem; padding:15px; margin-top:10px; } .njoy-shop .woocommerce-terms-and-conditions-wrapper{ color:var(--mut); font-size:.82rem; } .njoy-shop .woocommerce-form-login-toggle, .njoy-shop .woocommerce-form-coupon-toggle{ margin-bottom:18px; } /* — Commande reçue / remerciement — */ .njoy-shop ul.woocommerce-order-overview{ list-style:none; display:flex; flex-wrap:wrap; gap:18px; padding:18px; margin:0 0 24px; background:var(--surf); border:1px solid var(--bd2); border-radius:10px; } .njoy-shop ul.woocommerce-order-overview li{ border:0 !important; color:var(--mut); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; padding:0; } .njoy-shop ul.woocommerce-order-overview li strong{ display:block; color:var(--g); font-size:1rem; margin-top:4px; text-transform:none; letter-spacing:0; } /* ================================================================ BOUTONS D'ACTION PRIMAIRES (.alt) — forcer l'OR WooCommerce force ces boutons (« Valider la commande », « Commander », « Ajouter au panier ») en violet (#7f54b3) via une règle plus prioritaire → on impose l'or en !important. ================================================================ */ .njoy-shop a.button.alt, .njoy-shop button.button.alt, .njoy-shop input.button.alt, .njoy-shop .checkout-button, .njoy-shop .wc-proceed-to-checkout a.checkout-button, .njoy-shop #place_order, .njoy-shop #payment #place_order, .njoy-shop .single_add_to_cart_button{ background:var(--g) !important; background-color:var(--g) !important; color:#0d0d0d !important; border:0 !important; box-shadow:none !important; text-shadow:none !important; } .njoy-shop a.button.alt:hover, .njoy-shop button.button.alt:hover, .njoy-shop input.button.alt:hover, .njoy-shop .checkout-button:hover, .njoy-shop .wc-proceed-to-checkout a.checkout-button:hover, .njoy-shop #place_order:hover, .njoy-shop .single_add_to_cart_button:hover{ background:var(--gl) !important; background-color:var(--gl) !important; } /* ================================================================ PANIER / COMMANDE / COMPTE — présentation premium (titre de page + largeurs maîtrisées + panier recentré) ================================================================ */ /* Titre de page (Panier · Commande · Mon compte) — centré, filet or */ .njoy-shop .njoy-shop-title{ font-family:Montserrat,sans-serif; font-weight:800; color:#fff; font-size:1.9rem; text-align:center; margin:4px auto 30px; padding-bottom:16px; letter-spacing:.5px; } .njoy-shop .njoy-shop-title:after{ content:""; display:block; width:64px; height:3px; background:var(--g); border-radius:3px; margin:14px auto 0; } /* Largeurs maîtrisées (fini les cases démesurées sur grand écran) */ .woocommerce-cart .njoy-shop-inner{ max-width:880px; } .woocommerce-account .njoy-shop-inner{ max-width:1000px; } .woocommerce-checkout .njoy-shop-inner{ max-width:1180px; } /* Panier : totaux en carte pleine largeur SOUS la table → supprime le grand vide à gauche */ .njoy-shop .cart-collaterals{ float:none !important; width:100% !important; margin-top:22px; } .njoy-shop .cart-collaterals .cart_totals{ float:none !important; width:100% !important; max-width:100% !important; margin:0; } .njoy-shop .cart-collaterals .cross-sells{ display:none; } .njoy-shop .woocommerce-cart-form{ width:100%; } .njoy-shop table.cart td.product-thumbnail{ width:90px; } /* Checkout classique : colonne formulaire un peu plus aérée */ .njoy-shop form.checkout .form-row{ margin-bottom:14px; } .njoy-shop #customer_details, .njoy-shop #customer_details .col2-set{ width:100% !important; } .njoy-shop #customer_details .col-1, .njoy-shop #customer_details .col-2{ width:100% !important; float:none !important; margin:0 0 10px !important; padding:0 !important; } /* Sélecteur de pays (select2) : pleine largeur + sombre, pas de doublon */ .njoy-shop .select2-container{ width:100% !important; } .njoy-shop .select2-container--default .select2-selection--single{ background:var(--surf2) !important; border:1px solid var(--bd) !important; height:46px !important; padding:6px 10px; display:flex; align-items:center; } .njoy-shop .select2-container--default .select2-selection--single .select2-selection__rendered{ color:#fff !important; } .njoy-shop .select2-dropdown{ background:var(--surf2); border-color:var(--bd); } .njoy-shop .select2-results__option{ color:var(--tx); } /* Masquer le