/* ============================================================
   1. STRONA GŁÓWNA & WYSZUKIWARKA (TŁA) – wspólne
   ============================================================ */
div#container.main_page.container {
  background-color: black !important;
}
.main_page #layout, 
.main_page #layout.clearfix {
  background-color: black !important;
  background: black !important;
}
.main_page div#content.col-12 {
  background-color: black !important;
}
.main_page .main_banner_wrapper, 
.main_page #main_banner1,
.main_page .slick-list.draggable {
  background-color: black !important;
}
div#content.col-md-9.col-12 {
  background-color: white !important;
}
body:not(.main_page) #layout {
  background-color: white !important;
}
body {
  background-color: black !important;
}

/* ============================================================
   2. MOTOKONFIGURATOR – francuski (pionowe zakładki + krótszy przycisk)
   ============================================================ */

/* --- Górne napisy --- */
html[lang="fr"] #moto_config span:first-child {
  font-size: 0 !important;
}
html[lang="fr"] #moto_config span:first-child::after {
  content: "RECHERCHER PIÈCES & DONNÉES" !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
}
html[lang="fr"] #moto_config .config_header {
  font-size: 0 !important;
}
html[lang="fr"] #moto_config .config_header::after {
  content: "CONFIGURATEUR MOTO" !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

/* --- Zakładki PIÈCES / DONNÉES (pionowo jak w innych językach) --- */
html[lang="fr"] .auto_config__tabs li {
  float: left !important;
  display: block !important;
  width: 100% !important;
}
html[lang="fr"] #menu_5,
html[lang="fr"] .auto_config__tab:nth-child(1) a,
html[lang="fr"] .auto_config__tab:nth-child(1) span,
html[lang="fr"] [data-tab="parts"] {
  font-size: 0 !important;
  display: block !important;
}
html[lang="fr"] #menu_5::after,
html[lang="fr"] .auto_config__tab:nth-child(1) a::after,
html[lang="fr"] .auto_config__tab:nth-child(1) span::after,
html[lang="fr"] [data-tab="parts"]::after {
  content: "PIÈCES" !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html[lang="fr"] #menu_3,
html[lang="fr"] .auto_config__tab:nth-child(2) a,
html[lang="fr"] .auto_config__tab:nth-child(2) span,
html[lang="fr"] [data-tab="motodata"] {
  font-size: 0 !important;
  display: block !important;
}
html[lang="fr"] #menu_3::after,
html[lang="fr"] .auto_config__tab:nth-child(2) a::after,
html[lang="fr"] .auto_config__tab:nth-child(2) span::after,
html[lang="fr"] [data-tab="motodata"]::after {
  content: "DONNÉES" !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #a8a8a8 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* --- Marque / Modèle / Année --- */
html[lang="fr"] #select2-msearch1-container,
html[lang="fr"] #select2-msearch2-container,
html[lang="fr"] #select2-msearch3-container {
  position: relative !important;
  text-align: center !important;
}

/* MARQUE */
html[lang="fr"] #select2-msearch1-container[title="Marke"],
html[lang="fr"] #select2-msearch1-container[title="Marque"],
html[lang="fr"] #select2-msearch1-container[title="Marka"],
html[lang="fr"] #select2-msearch1-container[title="Marca"] {
  visibility: hidden !important;
}
html[lang="fr"] #select2-msearch1-container[title="Marke"]::after,
html[lang="fr"] #select2-msearch1-container[title="Marque"]::after,
html[lang="fr"] #select2-msearch1-container[title="Marka"]::after,
html[lang="fr"] #select2-msearch1-container[title="Marca"]::after {
  content: "Marque" !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
  color: #ffffff !important;
}
html[lang="fr"] #select2-msearch1-container:not([title="Marke"]):not([title="Marque"]):not([title="Marka"]):not([title="Marca"]) {
  visibility: visible !important;
  color: #ffffff !important;
}
html[lang="fr"] #select2-msearch1-container:not([title="Marke"]):not([title="Marque"]):not([title="Marka"]):not([title="Marca"])::after {
  content: none !important;
}

/* MODÈLE */
html[lang="fr"] #select2-msearch2-container[title="Modell"],
html[lang="fr"] #select2-msearch2-container[title="Modèle"],
html[lang="fr"] #select2-msearch2-container[title="Model"],
html[lang="fr"] #select2-msearch2-container[title="Modelo"],
html[lang="fr"] #select2-msearch2-container[title="Modello"] {
  visibility: hidden !important;
}
html[lang="fr"] #select2-msearch2-container[title="Modell"]::after,
html[lang="fr"] #select2-msearch2-container[title="Modèle"]::after,
html[lang="fr"] #select2-msearch2-container[title="Model"]::after,
html[lang="fr"] #select2-msearch2-container[title="Modelo"]::after,
html[lang="fr"] #select2-msearch2-container[title="Modello"]::after {
  content: "Modèle" !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
  color: #a8a8a8 !important;
}
html[lang="fr"] #select2-msearch2-container:not([title="Modell"]):not([title="Modèle"]):not([title="Model"]):not([title="Modelo"]):not([title="Modello"]) {
  visibility: visible !important;
  color: #ffffff !important;
}
html[lang="fr"] #select2-msearch2-container:not([title="Modell"]):not([title="Modèle"]):not([title="Model"]):not([title="Modelo"]):not([title="Modello"])::after {
  content: none !important;
}

/* ANNÉE */
html[lang="fr"] #select2-msearch3-container[title="Baujahr"],
html[lang="fr"] #select2-msearch3-container[title="Jahr"],
html[lang="fr"] #select2-msearch3-container[title="Rocznik"],
html[lang="fr"] #select2-msearch3-container[title="Année"],
html[lang="fr"] #select2-msearch3-container[title="Annee"],
html[lang="fr"] #select2-msearch3-container[title="Año"],
html[lang="fr"] #select2-msearch3-container[title="Anno"] {
  visibility: hidden !important;
}
html[lang="fr"] #select2-msearch3-container[title="Baujahr"]::after,
html[lang="fr"] #select2-msearch3-container[title="Jahr"]::after,
html[lang="fr"] #select2-msearch3-container[title="Rocznik"]::after,
html[lang="fr"] #select2-msearch3-container[title="Année"]::after,
html[lang="fr"] #select2-msearch3-container[title="Annee"]::after,
html[lang="fr"] #select2-msearch3-container[title="Año"]::after,
html[lang="fr"] #select2-msearch3-container[title="Anno"]::after {
  content: "Année" !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
  color: #a8a8a8 !important;
}
html[lang="fr"] #select2-msearch3-container:not([title="Baujahr"]):not([title="Jahr"]):not([title="Rocznik"]):not([title="Année"]):not([title="Annee"]):not([title="Año"]):not([title="Anno"]) {
  visibility: visible !important;
  color: #ffffff !important;
}
html[lang="fr"] #select2-msearch3-container:not([title="Baujahr"]):not([title="Jahr"]):not([title="Rocznik"]):not([title="Année"]):not([title="Annee"]):not([title="Año"]):not([title="Anno"])::after {
  content: none !important;
}

/* --- OU --- */
html[lang="fr"] .special_lit {
  font-size: 0 !important;
}
html[lang="fr"] .special_lit::after {
  content: "OU" !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #ffffff !important;
}

/* ============================================================
   3. PRZYCISK WYSZUKIWARKI (skrócony)
   ============================================================ */
html[lang="fr"] form#menu_search button[type="submit"] {
  font-size: 0 !important;
  min-width: 90px !important;
}
html[lang="fr"] form#menu_search button[type="submit"]::after {
  content: "CHERCHER" !important;
  font-size: 13px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

/* ============================================================
   4. SEKCJA OPINII
   ============================================================ */
html[lang="fr"] #opinions_section .big_label {
  font-size: 0 !important;
}
html[lang="fr"] #opinions_section .big_label::after {
  content: "Ajouter votre avis" !important;
  font-size: 20px !important;
  font-weight: bold !important;
  color: #333333 !important;
  text-transform: uppercase !important;
}
html[lang="fr"] .shop_opinions_name {
  font-size: 0 !important;
}
html[lang="fr"] .shop_opinions_name::after {
  content: "Votre note :" !important;
  font-size: 14px !important;
  color: #666666 !important;
}
html[lang="fr"] label[for="opinion"] {
  font-size: 0 !important;
}
html[lang="fr"] label[for="opinion"]::after {
  content: "Votre avis" !important;
  font-size: 13px !important;
  color: #666666 !important;
}
html[lang="fr"] .opinion_add_photos_text {
  font-size: 0 !important;
}
html[lang="fr"] .opinion_add_photos_text i {
  font-size: 14px !important;
}
html[lang="fr"] .opinion_add_photos_text::after {
  content: " Ajouter une photo du produit :" !important;
  font-size: 13px !important;
  color: #666666 !important;
}
html[lang="fr"] label[for="addopinion_name"] {
  font-size: 0 !important;
}
html[lang="fr"] label[for="addopinion_name"]::after {
  content: "Votre nom" !important;
  font-size: 13px !important;
  color: #666666 !important;
}
html[lang="fr"] label[for="addopinion_email"] {
  font-size: 0 !important;
}
html[lang="fr"] label[for="addopinion_email"]::after {
  content: "Votre e-mail" !important;
  font-size: 13px !important;
  color: #666666 !important;
}
html[lang="fr"] button.opinions-shop_opinions_button {
  font-size: 0 !important;
  color: transparent !important;
}
html[lang="fr"] button.opinions-shop_opinions_button::after {
  content: "Envoyer l'avis" !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

/* ============================================================
   5. REKOMENDACJE + WYSYŁKA
   ============================================================ */
html[lang="fr"] #products_associated_zone1 .big_label {
  font-size: 0 !important;
}
html[lang="fr"] #products_associated_zone1 .big_label::after {
  content: "VOUS AIMEREZ AUSSI" !important;
  font-size: 2.4rem !important;
  font-weight: 400 !important;
  color: #333333 !important;
  text-transform: uppercase !important;
  display: block !important;
}
html[lang="fr"] #projector_shipping_info label {
  font-size: 0 !important;
}
html[lang="fr"] #projector_shipping_info label::after {
  content: "Livraison :" !important;
  font-size: 13px !important;
  color: #666666 !important;
  margin-right: 4px !important;
}

/* ============================================================
   6. MENU KLIENTA / STOPKA
   ============================================================ */
html[lang="fr"] #order_rma a {
  font-size: 0 !important;
}
html[lang="fr"] #order_rma a::after {
  content: "Je souhaite déposer une réclamation" !important;
  font-size: 13px !important;
  color: #e0dcdc !important;
  display: inline-block !important;
}
html[lang="fr"] #order_returns a {
  font-size: 0 !important;
}
html[lang="fr"] #order_returns a::after {
  content: "Je souhaite retourner un produit" !important;
  font-size: 13px !important;
  color: #e0dcdc !important;
  display: inline-block !important;
}

/* ============================================================
   7. "Matches to:" → "Compatible avec :"
   ============================================================ */
html[lang="fr"] .projector_menu_items_label_text {
  font-size: 0 !important;
}
html[lang="fr"] .projector_menu_items_label_text::after {
  content: "Compatible avec :" !important;
  font-size: 1.6rem !important;
  font-weight: bold !important;
  color: inherit !important;
  display: inline-block !important;
}

/* ============================================================
   8. Przycisk potwierdzający zmianę języka / waluty
   ============================================================ */
html[lang="fr"] #menu_settings form ul.li.buttons button.btn-small,
html[lang="fr"] #menu_settings .buttons button.btn-small,
html[lang="fr"] button.btn-small[type="submit"] {
  font-size: 0 !important;
}
html[lang="fr"] #menu_settings form ul.li.buttons button.btn-small::after,
html[lang="fr"] #menu_settings .buttons button.btn-small::after,
html[lang="fr"] button.btn-small[type="submit"]::after {
  content: "APPLIQUER" !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}
/* --- KARTA PRODUKTU --- */
#projector_price_unit,
.projector_price_unit {
    display: inline-block !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
#projector_price_unit::after,
.projector_price_unit::after {
    content: "pcs" !important;
    font-size: 14px !important;
    line-height: normal !important;
}

/* --- KAFELKI W KATEGORIACH --- */
.product_prices span.price {
    position: relative !important;
    display: inline-block !important;
}

.product_prices span.price::after {
    content: "pcs" !important;
    position: absolute !important;
    right: 0 !important;
    top: -2px !important;
    bottom: -2px !important;
    width: 26px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #272626 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}