/* Wspólny box dla ikon */
.block-social ul li {
  width: 40px !important;
  height: 40px !important;
  margin: 0 0px;
  background-size: 100% auto !important;   /* skalowanie ikony */
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: transparent !important;
  display: inline-block;
}

/* Specjalne dopasowanie LinkedIn */
.block-social ul li.linkedin {
  background-size: 73% auto !important;   /* zmniejszona ikona */
  background-position: 75% center !important;   /* zamiast center przesunięcie w prawo */
}

/* Link – ukrywamy tekst, zostawiamy tylko ikonę */
.block-social ul li a {
  display: block !important;
  width: auto !important;
  height: auto !important;
  font-size: 0 !important;       /* ukrywa napisy Facebook/Instagram/LinkedIn */
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
}

.block-social ul li {
  transition: opacity 0.2s ease;
}
.block-social ul li:hover {
  opacity: 0.7; /* przy najechaniu ikona jaśniejsza/przyciemniona */
}
/* Globalnie jasne litery na ciemnym tle */
body,
.block-social,
footer,
footer a,
footer p,
footer li,
footer span {
  color: #dddddd !important;   /* biały tekst */
}

/* Linki po najechaniu */
footer a:hover {
  color: #cccccc !important;   /* jasnoszary dla hover */
}
/* Jasne nagłówki w stopce */
footer .h3,
footer h3 {
  color: #dddddd !important;
  font-weight: 600;
}
/* Linki w breadcrumb (np. Home) */
.breadcrumb li a span {
  color: #ffffff !important;          /* biały */
  transition: color 0.2s ease;
}
.breadcrumb li a span:hover {
  color: #cc6633 !important;          /* pomarańczowy na hover */
}

/* Aktualna strona (np. RINGS) */
.breadcrumb li span {
  color: #cccccc !important;          /* jasnoszary */
  cursor: default;                    /* bez efektu klikania */
}
.nav-item.contact-link a {
  color: #cccccc !important;     /* biały tekst */
  font-weight: 600;
  display: flex;                 /* wyrównanie w pionie */
  align-items: center;           /* centrowanie w pionie */
  height: 100%;                  /* wysokość całego kontenera nav */
  padding: 10px 12px 20px 0px;               /* odstęp lewy/prawy, góra/dół automatycznie */
  line-height: normal;
}


.nav-item.contact-link a:hover {
  color: #cc6633 !important;      /* kolor brandowy przy hover */
}

.user-info a,
.user-info a i,
.user-info a span {
  color: #cccccc !important;   /* jasnoszary */
}

.user-info a:hover,
.user-info a:hover i,
.user-info a:hover span {
  color: #cc6633 !important;   /* branodwy na hover */
}
.row.sort-by-row {
  display: none !important;
}
#js-product-list-header .block-category {
  background-color: #000000 !important;   /* czarne tło */
  color: #ffffff !important;              /* biały tekst */
  padding: 20px;
}

#js-product-list-header .block-category h1,
#js-product-list-header .block-category p,
#js-product-list-header .block-category div {
  color: #ffffff !important;              /* białe litery */
}
.blockreassurance_product {
  display: none !important;
}

#### 04.09.25

.footer-columns {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;  /* dopasuj do szerokości strony */
  margin: 0 auto;
  padding: 20px 0;
}

.footer-col {
  flex: 1 1 auto;
  margin: 0 15px;
}

/* social ma mniejszą szerokość */
.footer-col.footer-social {
  flex: 0 0 160px;
}

#block_myaccount_infos {
  visibility: hidden !important; /* treść niewidoczna */
}

.header-nav {
  display: block !important;
}
/* Ukrywa cały pasek nagłówka na desktopie */
.header-nav .hidden-sm-down {
  display: none !important;
}

/* Zachowuje wersję mobilną */
.header-nav .hidden-md-up {
  display: block !important;
}

@media (max-width: 767px) {
  body, #wrapper, #content {
    display: block !important;   /* wymuszenie widoczności */
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* na desktopie chowamy tylko wersję desktopową header-nav */
@media (min-width: 768px) {
  .header-nav .hidden-sm-down {
    display: none !important;
  }
  .header-nav .hidden-md-up {
    display: none !important; /* żeby mobilna się nie pokazywała na desktopie */
  }
  .header-nav {
    display: block !important; /* kontener zostaje, nie ukrywamy go */
  }
}

/* na mobile chowamy wersję desktopową i pokazujemy mobilną */
@media (max-width: 767px) {
  .header-nav .hidden-sm-down {
    display: none !important;
  }
  .header-nav .hidden-md-up {
    display: block !important;
  }
}






/* Logo nad menu */
#_desktop_logo {
  width: 100% !important;
  text-align: center !important;
  margin: 0 auto 15px auto;
}

#_desktop_logo img {
  width: auto !important;       /* usuwa wymuszoną szerokość */
  height: auto !important;      /* usuwa wymuszoną wysokość */
  max-width: 550px !important;  /* ustaw docelową maksymalną szerokość w px */
  display: inline-block;
}



.header-top .row {
  display: block !important; /* zamiast układu kolumn */
}

/* usuń biały pasek pod menu */
#_desktop_top_menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* wycentruj menu */
#_desktop_top_menu .top-menu {
  display: inline-block;
  margin-left: 194px;
  padding: 0;
  
}

#_desktop_top_menu {
  text-align: center;
}

/* linki w menu */
#_desktop_top_menu .top-menu > li {
  display: inline-block;
  margin: 0 15px;   /* odstępy między linkami */
}

#_desktop_top_menu .top-menu > li > a {
  color: #dddddd !important;   /* białe litery */
  font-weight: 500;
}
/* Styl dla mobilnego wrappera */
#mobile_top_menu_wrapper {
  background: #000 !important;  /* czarne tło */
  color: #fff !important;       /* biały tekst */
  border: none !important;
  box-shadow: none !important;
}

/* linki w mobilnym menu */
#mobile_top_menu_wrapper a {
  color: #fff !important;       /* białe litery */
  font-weight: 500;
}

/* ikony w mobilnym menu */
#mobile_top_menu_wrapper i,
#mobile_top_menu_wrapper .material-icons {
  color: #fff !important;       /* ikony też na biało */
}
.how-to-order {
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 16px;
  color: #ddd;         /* jasny kolor na czarnym tle */
}

.how-to-order h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.how-to-order ul {
  margin: 15px 0 25px 25px;
  list-style: disc;
}

.how-to-order a {
  color: #f19d76;      /* podkreślenie brandowym kolorem */
  text-decoration: none;
}

.how-to-order a:hover {
  text-decoration: underline;
}
.page-not-found {
  display: none !important;
}
/* tło zakładek */
.tabs {
  background-color: #000 !important;   /* czarne tło */
  color: #fff !important;              /* białe litery */
  padding: 20px;
}

/* pasek z nazwami zakładek */
.tabs .nav-tabs {
  border-bottom: 1px solid #444 !important;
}

.tabs .nav-tabs .nav-link {
  color: #ccc !important;              /* domyślne szare litery */
  background: transparent !important;
  border: none !important;
}

.tabs .nav-tabs .nav-link.active {
  color: #fff !important;              /* aktywna zakładka – biała */
  border-bottom: 2px solid #fff !important;
}

/* treść zakładek */
/* treść zakładek */
.tabs .tab-content {
  background-color: #000 !important;   /* czarne tło */
  color: #fff !important;              /* białe litery */
  padding: 20px;
  border: 1px solid #444;
  border-top: none;
  box-shadow: 0 4px 12px rgba(55, 55, 55, 0.6);  /* cień ramki */
}

/* Odwrócone kolory dla nazw produktów */
.product-description .product-title a {
  background-color: #000000;   /* czarne tło */
  color: #ffffff !important;  /* białe litery */
  padding: 6px 10px;           /* trochę miejsca w środku */
  display: inline-block;       /* żeby tło otaczało tekst */
  border-radius: 4px;          /* lekko zaokrąglone rogi */
  text-decoration: none;       /* bez podkreślenia */
}

/* efekt hover */
.product-description .product-title a:hover {
  background-color: #333333;   /* ciemnoszary przy najechaniu */
  color: #f1f1f1 !important;   /* lekko jaśniejsze litery */
}

/* cały kontener produktu – czarne tło */
.thumbnail-container {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #222;       /* cienka ramka */
  border-radius: 6px;           /* zaokrąglone rogi */
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); /* lekki cień */
}

/* nazwa produktu */
.thumbnail-container .product-title a {
  color: #ffffff !important;    /* białe litery */
  text-decoration: none;
  font-weight: 600;
}

/* efekt hover na nazwie */
.thumbnail-container .product-title a:hover {
  color: #dddddd !important;
}

/* Quick view link */
.thumbnail-container .quick-view {
  color: #ffffff !important;
}

/* Quick view ikona */
.thumbnail-container .quick-view .material-icons {
  color: #ffffff !important;
}
/* blok z opisem produktu */
.product-description {
  background-color: #000000 !important; /* czarne tło */
  color: #ffffff !important;            /* białe litery */
  padding: 10px;
  border-top: 1px solid #333;           /* oddziela od obrazka */
}

/* link w tytule */
.product-description .product-title a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
}

/* efekt hover na linku */
.product-description .product-title a:hover {
  color: #cccccc !important;
}
/* kontener quick view */
.highlighted-informations.no-variants {
  background-color: #000000 !important; /* czarne tło */
  padding: 8px;
  text-align: center;
}

/* link quick view */
.highlighted-informations.no-variants a.quick-view {
  color: #ffffff !important;       /* biały tekst */
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

/* ikona lupy */
.highlighted-informations.no-variants a.quick-view i.material-icons {
  color: #ffffff !important;
  vertical-align: middle;
  margin-right: 5px;
}

/* hover efekt */
.highlighted-informations.no-variants a.quick-view:hover {
  color: #cccccc !important;       /* jaśniejszy szary przy hover */
}
/* kontener wariantów */
.variant-links {
  background-color: #000000 !important; /* czarne tło całego boxa */
  padding: 8px;
  border-radius: 4px;
  text-align: center;
}

/* każdy przycisk koloru */
.variant-links a.color {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid #ffffff; /* białe obramowanie domyślnie */
  margin: 0 4px;
  border-radius: 50%;
}

/* wariant biały – dodaj czarną ramkę, żeby był widoczny */
.variant-links a.color[title="White"] {
  border: 2px solid #000000;
}

/* wariant czarny – zostaw białą ramkę */
.variant-links a.color[title="Black"] {
  border: 2px solid #ffffff;
}

/* efekt hover */
.variant-links a.color:hover {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
/* cały box highlighted-informations */
.highlighted-informations {
  background-color: #000000 !important; /* czarne tło */
  padding: 8px;
  border-radius: 4px;
  text-align: center;
}

/* link Quick view */
.highlighted-informations a.quick-view {
  color: #ffffff !important;       /* biały tekst */
  font-weight: 500;
  display: inline-block;
  margin-bottom: 6px;
}

/* ikona lupy */
.highlighted-informations a.quick-view i.material-icons {
  color: #ffffff !important;
  vertical-align: middle;
}

/* warianty kolorów */
.highlighted-informations .variant-links {
  margin-top: 6px;
}

/* każdy przycisk koloru */
.highlighted-informations .variant-links a.color {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 0 4px;
  border-radius: 50%;
  border: 2px solid #ffffff; /* domyślna ramka biała */
}

/* biały wariant — kontrastowa ramka czarna */
.highlighted-informations .variant-links a.color[title="White"] {
  border: 2px solid #000000;
}

/* czarny wariant — zostaje biała ramka */
.highlighted-informations .variant-links a.color[title="Black"] {
  border: 2px solid #ffffff;
}

/* efekt hover */
.highlighted-informations .variant-links a.color:hover {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* licznik wariantów */
.highlighted-informations .variant-links .js-count {
  color: #ffffff !important;
  font-size: 0.9em;
}
/* STORE INFORMATION tak samo jak OUR COMPANY */
.block-contact .block-contact-title,
.block-contact #contact-infos {
  color: #dddddd !important;
  font-size: 16px;         /* taki sam jak w OUR COMPANY */
  line-height: 1.4;        /* odstępy między liniami */
  margin: 0;               /* reset marginesów */
  padding: 0;              /* reset paddingów */
}

.block-contact .block-contact-title {
  font-weight: 600;        /* pogrubienie jak w OUR COMPANY */
  text-transform: uppercase;
  margin-bottom: 10px;     /* odstęp od reszty treści */
}

.block-contact #contact-infos a {
  color: #dddddd !important;
  text-decoration: none;
}

.block-contact #contact-infos a:hover {
  text-decoration: underline;
}
/* Nagłówki H4 w stopce */
.footer-wrapper .h4,
.block-contact .h4 {
  font-family: 'Manrope', sans-serif;		
  font-size: 18px;           /* jak w OUR COMPANY */
  font-weight: 600;          /* mocniejsze pogrubienie */
  text-transform: uppercase; /* duże litery */
  color: #dddddd !important; /* jasny kolor */
  margin: 0 0 8px 0;       /* odstęp od treści poniżej */
}
.total-products p {
  visibility: hidden !important;
}
.user-info {
  visibility: hidden !important; /* element niewidoczny */
}
#menu-icon {
  display: none !important; /* ukrywa ikonę, ale zachowuje przestrzeń */
}
#_mobile_logo {
  text-align: center;         /* wyrównanie poziome */
}

#_mobile_logo img {
  display: block;
  margin-left: 25px;   /* przesunięcie o 15px od lewej */
}


#_mobile_logo .logo {
  display: inline-block;      /* potrzebne, żeby działało centrowanie */
  max-width: 100%;            /* dopasowanie do szerokości kontenera */
  height: auto;               /* proporcje obrazu */
}
a.btn.btn-secondary {
  background-color: #000 !important;  /* czarne tło */
  color: #fff !important;            /* białe litery i ikona */
  border: 1px solid #aaa;            /* biała ramka */
  padding: 8px 16px;                 /* trochę oddechu */
  border-radius: 4px;                /* lekko zaokrąglone rogi */
  display: inline-flex;
  align-items: center;
  gap: 5px;                          /* odstęp między tekstem a ikoną */
}

a.btn.btn-secondary:hover {
  background-color: #222 !important; /* trochę jaśniejsze na hover */
  border-color: #ddd;                /* delikatna zmiana ramki na hover */
}
/* Ukrywa komunikat "No products available yet" */
#js-product-list .page-not-found {
  display: none !important;
}
/* Ustawienie jaśniejszego koloru napisu LUCEO */
h1.h1 {
  color: #dddddd !important; /* albo np. #f5f5f5, w zależności od tła */
}

/* Odwrócone kolory dla dropdowna */
.form-control.form-control-select {
  background-color: #000000 !important; /* czarne tło */
  color: #ffffff !important;           /* biały tekst */
  border: 1px solid #555;              /* ciemna ramka */
}

/* Opcje w dropdownie */
.form-control.form-control-select option {
  background-color: #000000 !important;
  color: #ffffff !important;
}