/* =====================================================================
   OLD MX — Habillage dynamique (custom CSS zone customizer)
   - Fond de site sombre & dynamique, plus de noir et de contraste
   - Couleurs client conservées : rouge + noir  |  logo inchangé
   - Structure des 2 menus conservée (UI retravaillée)  |  DOM non modifié
   ===================================================================== */

/* TYPO TITRES — Oswald hébergée sur le serveur (pas de Google Fonts : RGPD + perf)
   Fichier à déposer dans :  themes/mega_parts_store/assets/fonts/            */
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url("/themes/mega_parts_store/assets/fonts/Oswald-VariableFont_wght.ttf") format('truetype-variations'),
      url("/themes/mega_parts_store/assets/fonts/Oswald-VariableFont_wght.ttf") format('truetype');
}

:root{
  /* IMAGE DE FOND (motard) — fichier à déposer dans :
     themes/mega_parts_store/assets/img/
     Chemin volontairement relatif à la racine du site : fonctionne aussi bien
     sur test.old-mx.fr que sur le domaine définitif, sans rien modifier. */
  --mx-bg-image:url("/themes/mega_parts_store/assets/img/fond-web.jpg");
  --mx-font-title:"Oswald","Montserrat","Arial Narrow",sans-serif;
  --mx-font-body:"Montserrat","Helvetica","Arial",sans-serif;
  --mx-red:#ff0000;          /* rouge client (configuré dans le customizer) */
  --mx-red-deep:#c00000;     /* rouge profond pour les dégradés */
  --mx-red-bright:#ff3b3b;   /* rouge vif pour halos/hover */
  /* BLEU repris du logo OLD MX (#182484), éclairci pour rester lisible */
  --mx-blue:#182484;         /* bleu exact du logo */
  --mx-blue-mid:#2b45c9;     /* bleu accent */
  --mx-blue-bright:#5a78ff;  /* bleu vif : halos / survols */
  /* GRIS ANTHRACITE (remplace le noir) */
  --mx-black:#2e3237;        /* fond principal anthracite */
  --mx-black-2:#272b30;      /* anthracite plus profond */
  --mx-anth-deep:#23262b;    /* header / footer */
  --mx-panel:#363b42;        /* panneaux */
  --mx-panel-2:#434a54;      /* panneaux (survol) */
  --mx-line:rgba(255,255,255,.10);
  --mx-text-soft:#ccd2dc;    /* texte clair secondaire sur fond sombre */
  --mx-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------------
   1. FOND DE SITE — sombre & dynamique (dégradés CSS = performant)
   --------------------------------------------------------------------- */
html{background:var(--mx-black);}
body{background:transparent;}
main{background:transparent !important;}   /* on retire l'ancien fond délavé */

/* Décor de fond FIXE derrière tout le contenu (z-index négatif) :
   base noire dynamique + motard intégré + halo rouge + voile pour lisibilité */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--mx-black);          /* ANTHRACITE (remplace le noir) */
  background-image:var(--mx-bg-image);
  background-repeat:no-repeat;
  background-position:center center;         /* recadrage équilibré toutes résolutions */
  background-size:cover;                     /* remplit l'écran quel que soit le ratio */
  /* l'image a du noir incrusté : "lighten" relève ces noirs vers l'anthracite
     tout en conservant le motard et la poussière */
  background-blend-mode:lighten;
  /* position:fixed => effet "background fixed" fiable (y compris iOS) */
}
/* Halos rouge + BLEU (logo) et vignettage : profondeur + lisibilité */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 620px at 88% 8%, rgba(90,120,255,.16), transparent 60%),
    radial-gradient(900px 640px at 6% 92%, rgba(255,0,0,.14), transparent 60%),
    radial-gradient(130% 100% at 50% 42%, transparent 54%, rgba(20,22,26,.62) 100%);
}

/* Micro-transitions globales (UX douce, non agressive) */
a,button,.btn,.banner .oslona img,.product-miniature,.brand-image,
.product-miniature img,.top-menu .dropdown-item,.kategorie a{
  transition:all .28s var(--mx-ease);
}

/* ---------------------------------------------------------------------
   2. HEADER — tout en noir (plus de blanc/gris), plus aéré, logo plus grand
   --------------------------------------------------------------------- */
#header{background:#23262b !important;}          /* était blanc */
.header-top .container{background:transparent !important;}  /* supprime le #333 résiduel */
.header-nav{
  background:var(--mx-anth-deep) !important;     /* anthracite (plus de noir pur) */
  border-bottom:1px solid var(--mx-line);
  padding:6px 0;                                 /* barre contact plus aérée */
}
.header-top{
  background:linear-gradient(180deg,#33373d 0%,#282c31 100%) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  padding:22px 0 !important;                      /* plus d'air autour du logo/recherche */
}
/* Barre du menu 1 : fond sombre + liseré rouge, SANS le trait blanc du thème */
.menu-background{
  background:linear-gradient(180deg,#2f333a,#23262b) !important;
  border-top:0 !important;
  border-bottom:0 !important;                 /* supprime le trait blanc #e3e3e3 */
  position:relative;
}
/* liseré ROUGE → BLEU (rappel des 2 couleurs du logo) */
.menu-background::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,var(--mx-red) 0%,var(--mx-red) 52%,var(--mx-blue-mid) 100%);
}
/* le fond sombre habille toute la hauteur réelle du menu (évite le débord sur un trait) */
#_desktop_top_menu,.menu-background .container{
  background:linear-gradient(180deg,#2f333a,#23262b) !important;
}

/* LOGO plus grand (mêmes couleurs, image inchangée) */
#_desktop_logo{padding-top:4px;padding-bottom:4px;}
#_desktop_logo .logo,.logo.img-responsive{
  max-width:210px !important;width:100% !important;height:auto !important;
}
#contact-link,#contact-link span,.user-info a.account{color:#e9ecf1 !important;}
.user-info a.account:hover{color:var(--mx-blue-bright) !important;}   /* survol BLEU */
#contact-link .fa{color:var(--mx-red) !important;}
.user-info .fa,.user-info svg{color:var(--mx-blue-bright) !important;}
/* bouton retour en haut : BLEU logo */
#scroll{background:linear-gradient(180deg,var(--mx-blue-mid),var(--mx-blue)) !important;
  border:none !important;box-shadow:0 6px 18px rgba(43,69,201,.45) !important;}
#scroll:hover{background:linear-gradient(180deg,var(--mx-blue-bright),var(--mx-blue-mid)) !important;}
/* panier : survol bleu */
.blockcart .cart_link:hover,.cart_index_title a:hover{color:var(--mx-blue-bright) !important;}

/* Barre de recherche header */
#search_plugin input[type="text"]{
  background:#22252a !important;color:#fff !important;
  border:1px solid var(--mx-line) !important;border-radius:4px 0 0 4px;
}
/* placeholder "Rechercher" en BLANC (demande cliente) */
#search_plugin input[type="text"]::placeholder{color:#ffffff !important;opacity:1 !important;}
#search_plugin input[type="text"]::-webkit-input-placeholder{color:#ffffff !important;opacity:1 !important;}
#search_plugin input[type="text"]::-moz-placeholder{color:#ffffff !important;opacity:1 !important;}
#search_plugin input[type="text"]:focus{
  border-color:var(--mx-blue-mid) !important;outline:none;
  box-shadow:0 0 0 3px rgba(43,69,201,.28) !important;   /* focus BLEU logo */
}
#search_plugin button{
  background:var(--mx-red) !important;border:none !important;border-radius:0 4px 4px 0;
}
#search_plugin button:hover{background:var(--mx-red-deep) !important;}

/* ---------------------------------------------------------------------
   3. MENU 1 — barre horizontale (structure conservée, UI revue)
   --------------------------------------------------------------------- */
/* (fond du menu 1 défini plus haut, section header) */
.top-menu .dropdown-item{
  color:#dfe3ea !important;
  font-family:var(--mx-font-body) !important;   /* Montserrat (demande cliente) */
  text-transform:uppercase;font-weight:700;letter-spacing:.4px;font-size:13px;
  position:relative;padding:24px 30px !important;   /* menu plus aéré */
}
/* barre du menu 1 un peu plus haute pour respirer */
.menu-background .container{padding-top:4px;padding-bottom:4px;}
.top-menu>li>a::after{
  content:"";position:absolute;left:18px;right:18px;bottom:8px;height:2px;
  background:linear-gradient(90deg,var(--mx-red),var(--mx-blue-mid));  /* rouge → bleu */
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--mx-ease);
}
/* Survol : le thème imposait #e7000e (rouge foncé) = illisible sur fond sombre.
   Sélecteur volontairement très spécifique pour reprendre la main. */
#header #_desktop_top_menu .top-menu>li>a.dropdown-item:hover,
#header #_desktop_top_menu .top-menu>li>a.dropdown-item:focus,
#header #_desktop_top_menu .top-menu>li:hover>a.dropdown-item{
  color:#ffffff !important;background:rgba(90,120,255,.12) !important;border-radius:6px;
}
.top-menu>li>a:hover::after{transform:scaleX(1);}

/* ---------------------------------------------------------------------
   4. MENU 2 — Catégories (panneau sombre, accents rouges)
   --------------------------------------------------------------------- */
.block-categories{
  background:linear-gradient(180deg,var(--mx-panel),var(--mx-black-2)) !important;
  border:1px solid var(--mx-line);border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.block-categories .facet-label,
.block-categories .facet-label a{
  color:#fff !important;background:linear-gradient(90deg,var(--mx-red),var(--mx-red-deep));
  margin:0 !important;padding:16px 18px !important;letter-spacing:1px;
  font-family:var(--mx-font-title);font-weight:700;font-size:18px;text-transform:uppercase;
}
.block-categories .facet-label a{background:none;padding:0 !important;}
.kategorie a,.block-categories .block_content a{color:var(--mx-text-soft) !important;}
.kategorie>li>a{
  display:block;padding:12px 16px !important;font-weight:600;
  font-size:15.5px;line-height:1.35;            /* texte des catégories agrandi */
  border-left:3px solid transparent;border-bottom:1px solid var(--mx-line);
}
/* sous-niveaux du menu catégories, également agrandis */
.kategorie ul li a{font-size:14.5px;}
.kategorie>li>a:hover{
  color:#fff !important;background:var(--mx-panel-2) !important;
  border-left-color:var(--mx-red);padding-left:22px !important;
}
.block-categories .facet-label{border-radius:0;}

/* Blocs Marques / Fournisseurs : MÊME aspect que Catégories */
#search_filters_brands,#search_filters_suppliers{
  background:linear-gradient(180deg,var(--mx-panel),var(--mx-black-2)) !important;
  border:1px solid var(--mx-line);border-radius:10px;overflow:hidden;margin-top:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#search_filters_brands .facet-label,#search_filters_suppliers .facet-label,
#search_filters_brands .facet-label a,#search_filters_suppliers .facet-label a{
  color:#fff !important;background:linear-gradient(90deg,var(--mx-red),var(--mx-red-deep));
  margin:0 !important;padding:16px 18px !important;letter-spacing:1px;
  font-family:var(--mx-font-title);font-weight:700;font-size:18px;text-transform:uppercase;
}
#search_filters_brands .facet-label a,#search_filters_suppliers .facet-label a{background:none;padding:0 !important;}
#search_filters_brands .block_content,#search_filters_suppliers .block_content{padding:12px 16px;}
.no_brands{color:var(--mx-text-soft) !important;}

/* ---------------------------------------------------------------------
   5. ACCUEIL — surface transparente pour laisser respirer le fond sombre
   --------------------------------------------------------------------- */
/* Fond anthracite sur TOUTES les pages (accueil + pages intérieures) */
#wrapper{background:transparent !important;}
#left-column,.kolumny{background:transparent !important;}
#wrapper .breadcrumb,#wrapper .breadcrumb a span,
#wrapper .breadcrumb li::after{color:var(--mx-text-soft) !important;}
#wrapper .breadcrumb a:hover span{color:var(--mx-blue-bright) !important;}

/* Titres de section (PRODUITS POPULAIRES, etc.) */
.linia_tytul .tytuly,
.featured-products .linia_tytul,
.page-index .linia_tytul{color:#fff !important;}
.linia_tytul .tytuly a,.tytuly{
  color:#fff !important;text-transform:uppercase;font-weight:700;letter-spacing:1px;
  background:transparent !important;font-family:var(--mx-font-title);font-size:24px;
  line-height:1.25;   /* évite le chevauchement des titres sur 2 lignes */
}
.linia_tytul{
  position:relative;padding-left:16px;
}
.linia_tytul::before{
  content:"";position:absolute;left:0;top:2px;bottom:2px;width:5px;border-radius:3px;
  /* barre d'accent ROUGE → BLEU (couleurs du logo) */
  background:linear-gradient(180deg,var(--mx-red) 0%,var(--mx-red-deep) 55%,var(--mx-blue-mid) 100%);
}

/* ---------------------------------------------------------------------
   6. SLIDER — cadre, coins arrondis, flèches rouges
   --------------------------------------------------------------------- */
#carousel{
  border-radius:14px;overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.5);border:1px solid var(--mx-line);
}
#carousel .carousel-item img{display:block;width:100%;height:auto;}
#carousel .carousel-control{transition:all .28s var(--mx-ease);}
#carousel .icon-prev,#carousel .icon-next{
  background:var(--mx-red) !important;color:#fff !important;
  border-radius:50%;width:46px;height:46px;line-height:46px;text-align:center;
  box-shadow:0 6px 18px rgba(255,0,0,.4);opacity:.92;
}
#carousel .carousel-control:hover .icon-prev,
#carousel .carousel-control:hover .icon-next{
  background:var(--mx-red-deep) !important;transform:scale(1.08);opacity:1;
}

/* ---------------------------------------------------------------------
   7. LES 3 BLOCS sous le slider — effet dynamique au survol
   --------------------------------------------------------------------- */
.banner{
  border-radius:12px;overflow:hidden;position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,.4);border:1px solid var(--mx-line);
}
.banner .oslona{overflow:hidden;border-radius:12px;}
.banner .oslona img{width:100%;height:auto;display:block;transform:scale(1);}
.banner:hover .oslona img{transform:scale(1.08);}
.banner::after{
  content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--mx-red);transition:box-shadow .3s var(--mx-ease);
}
.banner:hover::after{box-shadow:inset 0 0 0 3px var(--mx-red);}
.banner:hover{transform:translateY(-4px);}

/* ---------------------------------------------------------------------
   8. CARTES PRODUITS — flottent sur le fond sombre + survol dynamique
   --------------------------------------------------------------------- */
.product-miniature{
  background:#fff !important;border-radius:12px;overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.product-miniature:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(0,0,0,.45);
  border-color:var(--mx-red);
}
.product-miniature .thumbnail-container img{transition:transform .4s var(--mx-ease);}
.product-miniature:hover .thumbnail-container img{transform:scale(1.06);}
.product-price-and-shipping .price{color:var(--mx-red) !important;font-weight:800;}
.product-title a,.thumbnail-container .product-title a{
  color:#1a1a1a !important;font-family:var(--mx-font-body) !important;  /* Montserrat */
}
.product-title a:hover{color:var(--mx-red) !important;}

/* ---------------------------------------------------------------------
   9. MARQUES — mises en avant (showcase sombre + chips animés)
   --------------------------------------------------------------------- */
.manufacture_image{
  background:linear-gradient(180deg,#33373e,#272b30);
  border:1px solid var(--mx-line);border-radius:16px;
  border-top:3px solid var(--mx-blue-mid);      /* accent BLEU logo */
  padding:22px 26px 30px;margin-top:26px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.manufacture_image .linia_tytul{margin-bottom:18px;}
.manufacture_image .linia_tytul .tytuly a{
  color:#fff !important;font-size:26px;font-weight:700;letter-spacing:1.5px;
  font-family:var(--mx-font-title);
}
.manufacture_image .linia_tytul .tytuly a:hover{color:var(--mx-red-bright) !important;}
.manufacture_image .brand-image{
  background:#fff;border-radius:12px;padding:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  filter:grayscale(.15);
}
.manufacture_image .brand-image:hover{
  transform:translateY(-5px) scale(1.03);
  filter:grayscale(0);
  box-shadow:0 12px 26px rgba(90,120,255,.45);   /* halo BLEU logo au survol */
}
.manufacture_image .brand-image img{max-width:100%;height:auto;}

/* ---------------------------------------------------------------------
   10. TEXTE DE PRÉSENTATION / SEO — carte sombre lisible + hiérarchie
   --------------------------------------------------------------------- */
#custom-text{
  background:linear-gradient(180deg,#33373e,#272b30);
  border:1px solid var(--mx-line);border-radius:16px;
  padding:14px 34px;margin-top:26px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
#custom-text .editable{color:var(--mx-text-soft);}
#custom-text .editable h1 span,
#custom-text .editable h1{
  color:#fff !important;font-weight:700;line-height:1.12;
  font-family:var(--mx-font-title);letter-spacing:.5px;
}
#custom-text .editable h1:first-child span{
  background:linear-gradient(90deg,#fff 0%,var(--mx-red-bright) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
#custom-text .editable h3,#custom-text .editable h3 span{color:#eef1f6 !important;}
#custom-text .editable p,#custom-text .editable p span{
  color:var(--mx-text-soft) !important;line-height:1.7;font-size:15px;
}
/* Table de présentation : priorité au texte (référencement + lisibilité) */
#custom-text .editable table{max-width:1180px;width:100% !important;margin:0 auto;}
#custom-text .editable td{vertical-align:top !important;padding:18px !important;}
#custom-text .editable td:first-child{width:62% !important;text-align:left;}
#custom-text .editable td:nth-child(2){width:38% !important;}
#custom-text .editable td:first-child h1,
#custom-text .editable td:first-child h3{text-align:left !important;}
#custom-text .editable img{max-width:100% !important;height:auto !important;border-radius:10px;}

/* ---------------------------------------------------------------------
   11. BOUTONS — rouge, dynamiques, cohérents
   --------------------------------------------------------------------- */
.btn-primary,.button-search,.block_newsletter .btn,
.thumbnail-container .button-group button{
  background:linear-gradient(180deg,var(--mx-red),var(--mx-red-deep)) !important;
  color:#fff !important;border:none !important;border-radius:8px !important;
  text-transform:uppercase;font-weight:700;letter-spacing:.4px;
  box-shadow:0 6px 16px rgba(255,0,0,.28);
}
.btn-primary:hover,.button-search:hover,
.thumbnail-container .button-group button:hover{
  background:linear-gradient(180deg,var(--mx-red-bright),var(--mx-red)) !important;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(255,0,0,.42) !important;color:#fff !important;
}
.btn-primary:active{transform:translateY(0);}

/* ---------------------------------------------------------------------
   12. FOOTER — noir profond
   --------------------------------------------------------------------- */
#footer{position:relative;}
/* liseré haut du footer ROUGE → BLEU */
#footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--mx-red) 0%,var(--mx-red) 45%,var(--mx-blue-mid) 100%);
}
#footer,.footer-container{background:#23262b !important;}
#footer,.footer-container,.footer-container a,#footer a{color:var(--mx-text-soft) !important;}
.footer-container a:hover,#footer a:hover{color:var(--mx-blue-bright) !important;}  /* survol BLEU */
#footer .h3,.footer-container .h3{color:#fff !important;}

/* =====================================================================
   13. PAGES INTÉRIEURES (catégorie, produit, CMS, compte, panier…)
   Le contenu repose sur un panneau anthracite semi-opaque : le fond
   motocross n'interfère plus avec la lecture, et tous les textes
   passent en clair. Les cartes blanches gardent leur texte foncé.
   ===================================================================== */
body:not(.page-index) #content-wrapper{
  background:rgba(44,48,54,.93) !important;
  border:1px solid var(--mx-line);border-radius:14px;
  padding:22px !important;box-shadow:0 16px 40px rgba(0,0,0,.35);
}
/* 1) tout le texte du contenu passe en clair */
body:not(.page-index) #content-wrapper,
body:not(.page-index) #content-wrapper p,
body:not(.page-index) #content-wrapper li,
body:not(.page-index) #content-wrapper span,
body:not(.page-index) #content-wrapper div,
body:not(.page-index) #content-wrapper td,
body:not(.page-index) #content-wrapper th,
body:not(.page-index) #content-wrapper dd,
body:not(.page-index) #content-wrapper dt,
body:not(.page-index) #content-wrapper label,
body:not(.page-index) #content-wrapper strong,
body:not(.page-index) #content-wrapper em{
  color:var(--mx-text-soft) !important;
}
body:not(.page-index) #content-wrapper h1,
body:not(.page-index) #content-wrapper h2,
body:not(.page-index) #content-wrapper h3,
body:not(.page-index) #content-wrapper h4,
body:not(.page-index) #content-wrapper .h1,
body:not(.page-index) #content-wrapper .h2,
body:not(.page-index) #content-wrapper .h3,
body:not(.page-index) #content-wrapper .page-title{
  color:#ffffff !important;font-family:var(--mx-font-title);letter-spacing:.5px;
}
body:not(.page-index) #content-wrapper a{color:#e9edf4 !important;}
body:not(.page-index) #content-wrapper a:hover{color:var(--mx-blue-bright) !important;}

/* 2) les blocs blancs résiduels du thème deviennent des panneaux anthracite */
.block-category,#js-product-list-top,.products-selection,
body:not(.page-index) .page-header,
body:not(.page-index) .page-content:not(.card-block){
  background:transparent !important;border:0 !important;box-shadow:none !important;
}

/* 3) EXCEPTIONS : les cartes blanches gardent leur texte foncé.
      NB : préfixées par #content-wrapper pour passer devant la règle
      générale ci-dessus (qui contient déjà un ID). */
body:not(.page-index) #content-wrapper .product-miniature,
body:not(.page-index) #content-wrapper .product-miniature *,
body:not(.page-index) #content-wrapper .product-miniature a,
body:not(.page-index) #content-wrapper .product-miniature span,
body:not(.page-index) #content-wrapper .thumbnail-container,
body:not(.page-index) #content-wrapper .thumbnail-container *,
body:not(.page-index) #content-wrapper .quickview *,
body:not(.page-index) #content-wrapper select,
body:not(.page-index) #content-wrapper select option,
body:not(.page-index) #content-wrapper input,
body:not(.page-index) #content-wrapper textarea{
  color:#1a1a1a !important;
}
/* prix dans les cartes produits */
body:not(.page-index) #content-wrapper .product-miniature .price,
body:not(.page-index) #content-wrapper .product-miniature .product-price-and-shipping .price,
body:not(.page-index) #content-wrapper .product-miniature .product-price-and-shipping span{
  color:var(--mx-red) !important;font-weight:800;
}
/* pastilles produit (Rupture de stock, Promo…) : texte blanc sur pastille */
body:not(.page-index) #content-wrapper .product-flag,
body:not(.page-index) #content-wrapper .product-flag *{
  color:#ffffff !important;background:var(--mx-red) !important;
}
/* PRIX PRINCIPAL de la fiche produit — bien visible sur l'anthracite */
body:not(.page-index) #content-wrapper .product-prices .current-price,
body:not(.page-index) #content-wrapper .product-prices .current-price *,
body:not(.page-index) #content-wrapper .product-prices .current-price span,
body:not(.page-index) #content-wrapper .current-price,
body:not(.page-index) #content-wrapper .current-price *,
body:not(.page-index) #content-wrapper .product-price,
body:not(.page-index) #content-wrapper .product-price *{
  color:var(--mx-red-bright) !important;font-weight:800;
}
/* boutons : garder le texte blanc malgré la règle générale */
body:not(.page-index) #content-wrapper .btn,
body:not(.page-index) #content-wrapper .btn *,
body:not(.page-index) #content-wrapper button,
body:not(.page-index) #content-wrapper button *{color:#fff !important;}

/* 4) cartes blanches du thème (formulaires, contact…) → panneau anthracite,
      les libellés redeviennent lisibles ; les champs restent blancs */
body:not(.page-index) #content-wrapper .card,
body:not(.page-index) #content-wrapper .card-block,
body:not(.page-index) .contact-form,
body:not(.page-index) .contact-form .form-fields{
  background:transparent !important;border:0 !important;box-shadow:none !important;
}
body:not(.page-index) .form-control-label,
body:not(.page-index) #content-wrapper .form-control-label{color:#e9edf4 !important;}

/* 5) COLONNE GAUCHE : blocs modules (ex. « Informations » de la page contact)
      lisibles sur l'anthracite — les 3 panneaux déjà stylés sont exclus */
#left-column > div:not(.block-categories):not(#search_filters_brands):not(#search_filters_suppliers),
#left-column > div:not(.block-categories):not(#search_filters_brands):not(#search_filters_suppliers) *{
  color:var(--mx-text-soft) !important;
}
#left-column .contact-rich h4,#left-column .contact-rich .h4,
#left-column > div:not(.block-categories) h1,
#left-column > div:not(.block-categories) h2,
#left-column > div:not(.block-categories) h3,
#left-column > div:not(.block-categories) h4{
  color:#ffffff !important;font-family:var(--mx-font-title);letter-spacing:.5px;
}
#left-column .contact-rich .icon i,#left-column .contact-rich svg{color:var(--mx-blue-bright) !important;}

/* 6) catégorie ACTIVE dans le menu de gauche : bien visible + accent bleu */
.kategorie li.current > a,.kategorie a.current,.kategorie a.selected,
#left-column .kategorie a.selected,#left-column .kategorie li.current > a,
.block-categories li.current > a{
  color:#ffffff !important;background:rgba(90,120,255,.16) !important;
  border-left-color:var(--mx-blue-mid) !important;font-weight:700;
}

/* fil d'Ariane un peu plus lumineux */
#wrapper .breadcrumb a span{color:#dfe4ec !important;}

/* 7) ONGLETS produit (Détails / Commentaires) : étaient clair sur clair */
body:not(.page-index) .nav-tabs,
body:not(.page-index) .tabs .nav-tabs,
body:not(.page-index) .tabs{
  background:transparent !important;border-bottom:1px solid var(--mx-line) !important;
}
body:not(.page-index) .nav-tabs .nav-link,
body:not(.page-index) .tabs .nav-link{
  background:transparent !important;border:0 !important;
  color:var(--mx-text-soft) !important;
  font-family:var(--mx-font-title);letter-spacing:.6px;
}
body:not(.page-index) .nav-tabs .nav-link.active,
body:not(.page-index) .nav-tabs .nav-link:hover,
body:not(.page-index) .tabs .nav-link.active,
body:not(.page-index) .tabs .nav-link:hover{
  color:#ffffff !important;background:rgba(90,120,255,.12) !important;
  border-bottom:3px solid var(--mx-red) !important;
}
body:not(.page-index) .tab-content,
body:not(.page-index) .tab-pane{background:transparent !important;color:var(--mx-text-soft) !important;}

/* ---------------------------------------------------------------------
   14. RESPONSIVE — le menu 1 garde un padding généreux en desktop mais
       se resserre en tablette pour tenir sur une seule ligne (pas de
       chevauchement). Fond image adapté aux petits écrans.
   --------------------------------------------------------------------- */
@media (max-width:1199px){
  .top-menu .dropdown-item{padding:18px 16px !important;letter-spacing:.2px;}
}
@media (max-width:991px){
  .top-menu .dropdown-item{padding:14px 11px !important;font-size:12px;letter-spacing:0;}
  .block-categories .facet-label,.block-categories .facet-label a,
  #search_filters_brands .facet-label,#search_filters_suppliers .facet-label{font-size:16px;}
}
/* Mobile : l'image de fond cadre sur le motard (sinon centre = surtout noir) */
@media (max-width:767px){
  body::before{background-position:22% center;}
  .linia_tytul .tytuly a,.tytuly{font-size:19px;letter-spacing:.5px;}
  body:not(.page-index) #content-wrapper{padding:14px !important;border-radius:10px;}
}