/*
=================================================================
VOYOVNIK – WŁASNE STYLE CSS
WERSJA UPORZĄDKOWANA I OPISANA

WAŻNE:
1. Kolejność reguł została zachowana, ponieważ w tym szablonie
   kod bloku dostępności działa poprawnie po umieszczeniu na górze.
2. Nie usunięto działających reguł tylko dlatego, że wyglądają
   na powtarzalne.
3. Naprawiono brakujące zamknięcie desktopowego @media.
4. Komentarze nie wpływają na wygląd ani działanie sklepu.

SPIS SEKCJI:
01. Stopka – Premium Blue Steel i informacja o znaku towarowym
02. Karta produktu – blok dostępności
03. Pozostałe zmiany globalne
04. Etykiety specjalne
05. Etykieta promocji
06. Licznik promocji
07. Menu – efekty hover
08. Ukrywanie elementów strony i stopki
09. Listy zakupowe i elementy konta
10. Logowanie społecznościowe
11. Logo
12. Menu desktopowe
13. Wyszukiwarka desktopowa
=================================================================
*/

/* =========================================================
   01. STOPKA – PREMIUM BLUE STEEL
   Stylizuje blok danych kontaktowych #menu_contact, wyśrodkowuje
   jego zawartość i dodaje informację o znaku towarowym.

   WAŻNE:
   1. Tekst znaku towarowego jest dodawany przez pseudoelement
      #menu_contact::after – nie trzeba edytować kodu HTML stopki.
   2. Układ automatycznie zawija dane kontaktowe na mniejszych
      ekranach, dzięki czemu nie wychodzą poza szerokość strony.
   ========================================================= */

#menu_contact {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  column-gap: 14px !important;
  row-gap: 8px !important;

  width: calc(100% - 30px) !important;
  max-width: 1180px !important;
  box-sizing: border-box !important;

  margin: 30px auto 20px !important;
  padding: 22px 30px 19px !important;

  text-align: center !important;
  color: rgba(235, 241, 247, .88) !important;

  border: 1px solid rgba(151, 170, 194, .22) !important;
  border-radius: 22px !important;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, .028) 34%,
      transparent 56%
    ),
    radial-gradient(
      720px 190px at 8% -35%,
      rgba(0, 144, 246, .22),
      transparent 62%
    ),
    radial-gradient(
      650px 210px at 94% 135%,
      rgba(77, 104, 138, .18),
      transparent 66%
    ),
    linear-gradient(
      135deg,
      #171b22 0%,
      #101319 48%,
      #181c23 100%
    ) !important;

  box-shadow:
    0 18px 42px rgba(15, 20, 29, .18),
    0 4px 12px rgba(15, 20, 29, .10),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .28) !important;
}

/* Górna metaliczna linia panelu. */
#menu_contact::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 8%;
  width: 84%;
  height: 1px;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 144, 246, .70),
    rgba(225, 235, 245, .58),
    rgba(0, 144, 246, .70),
    transparent
  );

  box-shadow: 0 0 14px rgba(0, 144, 246, .34);
}

/* Podstawowy wygląd tekstu i odnośników w bloku kontaktowym. */
#menu_contact,
#menu_contact a {
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
}

#menu_contact a {
  position: relative;
  z-index: 1;

  color: #f1f5f9 !important;
  text-decoration: none !important;

  transition:
    color .22s ease,
    text-shadow .22s ease;
}

#menu_contact a:hover {
  color: #63b8ff !important;
  text-shadow: 0 0 14px rgba(0, 144, 246, .30);
}

/* Informacja o zarejestrowanym znaku towarowym.
   Dzięki width:100% zawsze zajmuje osobny, wyśrodkowany wiersz. */
#menu_contact::after {
  content: "VOYOVNIK® jest zarejestrowanym znakiem towarowym.";
  position: relative;
  z-index: 1;

  display: block;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;

  margin-top: 6px;
  padding-top: 14px;

  border-top: 1px solid rgba(154, 173, 197, .18);

  color: #e6edf5;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
  letter-spacing: .01em;
  text-align: center;
}

/* Stopka – dopasowanie panelu do urządzeń mobilnych. */
@media (max-width: 756px) {

  #menu_contact {
    width: calc(100% - 20px) !important;

    margin: 18px auto 16px !important;
    padding: 18px 16px 16px !important;

    column-gap: 10px !important;
    row-gap: 6px !important;

    border-radius: 18px !important;
  }

  #menu_contact,
  #menu_contact a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Mobile – wymusza rzeczywiste wyśrodkowanie wewnętrznych
     kontenerów danych kontaktowych narzuconych przez szablon. */
  #menu_contact > div,
  #menu_contact > span,
  #menu_contact > p,
  #menu_contact > address {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  #menu_contact > div,
  #menu_contact > span,
  #menu_contact > address {
    justify-content: center !important;
    align-items: center !important;
  }

  #menu_contact address,
  #menu_contact address *,
  #menu_contact .contact_type,
  #menu_contact .contact_type *,
  #menu_contact .contact_address,
  #menu_contact .contact_address * {
    text-align: center !important;
  }

  #menu_contact::after {
    margin-top: 8px;
    padding-top: 13px;

    font-size: 13px;
    line-height: 1.5;
  }
}

/* =========================================================
   02. KARTA PRODUKTU – PREMIUMOWY BLOK DOSTĘPNOŚCI
   Dotyczy komunikatu „DOSTĘPNE – ZAMÓW JUŻ TERAZ”
   ========================================================= */

div#projector_status.projector_info__item.--status.projector_status{
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  gap: 16px !important;

  padding: 15px 18px !important;
  margin: 14px 0 !important;

  border-radius: 20px !important;

  background:
    radial-gradient(circle at top left,
      rgba(80,170,255,.22),
      transparent 28%),
    radial-gradient(circle at bottom left,
      rgba(255,255,255,.10),
      transparent 34%),
    linear-gradient(135deg,
      #4b5563 0%,
      #2d3642 38%,
      #1d2430 72%,
      #141922 100%) !important;

  border: 1px solid rgba(140,200,255,.22) !important;

  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    0 0 26px rgba(0,140,255,.12),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -10px 24px rgba(0,0,0,.16) !important;
}

div#projector_status.projector_info__item.--status.projector_status::before{
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.04) 18%,
      transparent 42%
    ) !important;

  pointer-events: none !important;
}

div#projector_status.projector_info__item.--status.projector_status::after{
  content: "" !important;

  position: absolute !important;
  inset: -1px !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      135deg,
      rgba(120,190,255,.34),
      transparent 26%,
      transparent 70%,
      rgba(120,190,255,.12)
    ) !important;

  pointer-events: none !important;
}

#projector_status_gfx_wrapper{
  position: relative !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  z-index: 2 !important;
}

#projector_status_gfx{
  display: block !important;

  width: 44px !important;
  height: 44px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(0 0 10px rgba(80,170,255,.28))
    brightness(1.08) !important;
}

#projector_status_wrapper{
  position: relative !important;
  display: block !important;
  z-index: 2 !important;
}

#projector_status_description{
  display: block !important;

  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;

  letter-spacing: .04em !important;
  text-transform: uppercase !important;

  color: #ffffff !important;
}

#projector_shipping_info{
  display: block !important;

  margin-top: 4px !important;

  font-size: 13px !important;
  line-height: 1.5 !important;

  color: rgba(255,255,255,.82) !important;
}

#projector_delivery_label{
  color: rgba(255,255,255,.82) !important;
}

#projector_delivery_days{
  color: #63b8ff !important;
  font-weight: 800 !important;
}

#projector_amount{
  color: rgba(255,255,255,.74) !important;
  opacity: .74 !important;
}

/* Karta produktu – dopasowanie bloku dostępności do mniejszych ekranów */

@media screen and (max-width: 768px){

  body div#projector_status.projector_info__item.--status.projector_status{
    gap: 13px !important;

    padding: 13px 14px !important;
    margin: 12px 0 !important;

    border-radius: 18px !important;

    background:
      radial-gradient(circle at top left,
        rgba(80,170,255,.24),
        transparent 30%),
      radial-gradient(circle at bottom left,
        rgba(255,255,255,.10),
        transparent 36%),
      linear-gradient(135deg,
        #46515f 0%,
        #2b3440 42%,
        #1c2330 76%,
        #141922 100%) !important;

    border: 1px solid rgba(140,200,255,.24) !important;

    box-shadow:
      0 10px 22px rgba(0,0,0,.20),
      0 0 22px rgba(0,140,255,.12),
      inset 0 1px 0 rgba(255,255,255,.14),
      inset 0 -8px 20px rgba(0,0,0,.14) !important;
  }

  body #projector_status_gfx{
    width: 38px !important;
    height: 38px !important;
  }

  body #projector_status_description{
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  body #projector_shipping_info{
    font-size: 12px !important;
    line-height: 1.45 !important;
  }
}

/* =========================================================
   03. POZOSTAŁE ZMIANY GLOBALNE
   ========================================================= */

/* Ukrywa mapę na stronie kontaktowej. */
#contact_map {
display: none !important;
}

/* Delikatne powiększenie zdjęcia produktu po najechaniu kursorem. */
.product > a img {
transition: all .3s ease-in-out !important;
}

.product:hover > a img {
transform: scale(1.06);
}

/* Ogólny wygląd elementów oznaczonych klasą --distinguished.
   UWAGA: selektor jest szeroki i może obejmować różne komponenty. */
.--distinguished {
    color: #FFFFFF !important;
    background: #FF0000 !important;
}

/* =========================================================
   05. ETYKIETA „PROMOCJA”
   ========================================================= */

span.label.--promo {
    background-color:#FFEBA1 !important;
    color:#000000 !important;
    border-color:#ff0000 !important;
}

/* =========================================================
   06. LICZNIK CZASU PROMOCJI
   ========================================================= */

#CDT{
    display:inline-block !important;
    width:fit-content !important;
    max-width:100% !important;

    background:#f6f8fb !important;
    border:1px solid #e4e9f0 !important;
    border-radius:12px !important;

    padding:6px 16px !important;
    margin:6px 0 18px 0 !important;

    box-sizing:border-box !important;
}

#CDT .projector_label{
    display:block !important;
    margin:0 0 4px 0 !important;

    color:#2b3440 !important;
    font-size:13px !important;
    font-weight:600 !important;
}

#CDT > div{
    display:flex !important;
    gap:16px !important;
}

#CDT .number-wrapper{
    min-width:46px !important;
    text-align:center !important;
    position:relative !important;
}

#CDT .number-wrapper:not(:last-child)::after{
    content:"" !important;
    position:absolute !important;
    top:4px !important;
    right:-8px !important;
    width:1px !important;
    height:28px !important;
    background:#d7dee8 !important;
}

#CDT .number{
    display:block !important;
    margin-bottom:1px !important;

    background:none !important;
    border:0 !important;
    box-shadow:none !important;

    color:#0f172a !important;
    font-size:28px !important;
    font-weight:800 !important;
    line-height:1 !important;
}

#CDT .caption{
    color:#6b7280 !important;
    font-size:11px !important;
    margin-top:0 !important;
    letter-spacing:0.02em !important;
}

#CDT .line{
    display:none !important;
}

@media (max-width:640px){

    #CDT{
        padding:6px 14px !important;
        margin:6px 0 16px 0 !important;
    }

    #CDT > div{
        gap:12px !important;
    }

    #CDT .number{
        font-size:26px !important;
        margin-bottom:1px !important;
    }

    #CDT .number-wrapper:not(:last-child)::after{
        right:-6px !important;
        height:24px !important;
    }

}

/* Koniec sekcji licznika promocji */

/* Ukrywa informację o liczbie sztuk w magazynie.
   Przez tę regułę wcześniejsze ustawienia koloru i opacity dla
   #projector_amount nie są obecnie widoczne. */
#projector_amount {
display: none !important;
}

/* =========================================================
   07. MENU I LINKI – CZARNE TŁO PO NAJECHANIU
   Reguły działają tylko na elementy z dokładnie takim atrybutem title.
   ========================================================= */

[title="KOSZULKI DAMSKIE"]:hover {
color: #fff;
background: #000000
}

[title="KOSZULKI MĘSKIE"]:hover {
color: #fff;
background: #000000
}

[title="BLUZY MĘSKIE"]:hover {
color: #fff;
background: #000000
}

[title="BESTSELLERY"]:hover {
color: #fff;
background: #000000
}

[title="NOWOŚCI"]:hover {
color: #fff;
background: #000000
}

[title="PREZENT"]:hover {
color: #fff;
background: #000000
}

[title="OUTLET"]:hover {
color: #fff;
background: #000000
}

[title="POMOC"]:hover {
color: #fff;
background: #000000
}

[title="KONTAKT"]:hover {
color: #fff;
background: #000000
}

[title="O SKLEPIE"]:hover {
color: #fff;
background: #000000
}

[title="PROMOCJE"]:hover {
color: #ff0000;
background: #000000
}

[title="O NAS"]:hover {
color: #fff;
background: #000000
}

[title="VOYOVNIK"]:hover {
color: #fff;
background: #000000
}

[title="OUTDOOR"]:hover {
color: #fff;
background: #000000
}

[title="ABSTRAKCYJNE"]:hover {
color: #fff;
background: #000000
}

[title="DRAPIEŻNIKI"]:hover {
color: #fff;
background: #000000
}

[title="MYSTIC CIRCUS"]:hover {
color: #fff;
background: #000000
}

[title="MYŚLIWCE"]:hover {
color: #fff;
background: #000000
}

[title="BLUZY Z KAPTUREM"]:hover {
color: #fff;
background: #000000
}

[title="BLUZY BEZ KAPTURA"]:hover {
color: #fff;
background: #000000
}

[title="DLA NIEJ"]:hover {
color: #fff;
background: #000000
}

[title="DLA NIEGO"]:hover {
color: #fff;
background: #000000
}

[title="DLA MAMY"]:hover {
color: #fff;
background: #000000
}

[title="DLA TATY"]:hover {
color: #fff;
background: #000000
}

[title="OUTLET DAMSKIE"]:hover {
color: #fff;
background: #000000
}

[title="OUTLET MĘSKIE"]:hover {
color: #fff;
background: #000000
}

[title="TABELE ROZMIARÓW"]:hover {
color: #fff;
background: #000000
}

[title="PORADNIKI"]:hover {
color: #fff;
background: #000000
}

[title="OPINIE"]:hover {
color: #fff;
background: #000000
}

[title="INFORMACJE"]:hover {
color: #fff;
background: #000000
}

[title="KRÓJ OVERSIZE (LUŹNY)"]:hover {
color: #fff;
background: #000000
}

[title="KRÓJ STANDARD (DOPASOWANY)"]:hover {
color: #fff;
background: #000000
}

[title="VOYOVNIK: URBAN TACTICS"]:hover {
color: #fff;
background: #000000
}

[title="VOYOVNIK: THE DARK ORDER"]:hover {
color: #fff;
background: #000000
}

[title="VOYOVNIK: ELITE FORCE"]:hover {
color: #fff;
background: #000000
}

[title="NOWOŚCI - KOSZULKI DAMSKIE"]:hover {
color: #fff;
background: #000000
}

[title="NOWOŚCI - KOSZULKI MĘSKIE"]:hover {
color: #fff;
background: #000000
}

[title="NOWOŚCI - BLUZY BEZ KAPTURA"]:hover {
color: #fff;
background: #000000
}

[title="NOWOŚCI - BLUZY Z KAPTUREM"]:hover {
color: #fff;
background: #000000
}

[title="WYSYŁKA"]:hover {
color: #fff;
background: #000000
}

[title="PŁATNOŚCI"]:hover {
color: #fff;
background: #000000
}

[title="ZWROT / WYMIANA"]:hover {
color: #fff;
background: #000000
}

[title="DOSTĘPNOŚĆ"]:hover {
color: #fff;
background: #000000
}

/* =========================================================
   08. UKRYWANIE ELEMENTÓW STRONY I STOPKI
   ========================================================= */

/* Ukrywa sekcję stanów magazynowych na stronie kontaktowej. */
.contact_stocks {
display: none !important;
}

/* Footer – usuń link do Kontakt */
footer a[href*="contact"],
footer a[href*="kontakt"] {
  display: none !important;
}

/* Footer – usuń link "Moje rabaty" */
footer a[href*="client-rebate.html"] {
  display: none !important;
}

/* Footer – usuń link "Informacje o sklepie" */
footer a[href*="Informacje-o-sklepie-cterms-pol-19.html"] {
  display: none !important;
}

/* Footer – usuń link "Wysyłka" */
footer a[href*="delivery.html"] {
  display: none !important;
}

/* Footer – usuń link "Płatności" */
footer a[href*="payments.html"] {
  display: none !important;
}

/* FOOTER – Newsletter: kolor czcionki */
footer a[href*="newsletter.html"] {
  color:#0090F6 !important;
}

/* GLOBAL – ukryj "Listy zakupowe" (po URL) */
a[href*="/pl/shoppinglist"],
a[href*="voyovnik.pl/pl/shoppinglist"]{
  display:none !important;
}

/* FOOTER – ukryj "Chcę wymienić produkt" (po parametrach URL) */
footer a[href*="client-orders.html"][href*="exchange=true"]{
  display:none !important;
}

/* Footer – usuń link "Koszyk" */
footer a[href*="basketedit.html"] {
  display: none !important;
}

/* =========================================================
   10. LOGOWANIE – UKRYCIE LINKEDIN I POPRAWA SIATKI
   ========================================================= */

#client_new_social a.service_item[data-name="service_LinkedIn"]{
  display: none !important;
}

/* 1) Ukryj CALE <li> z LinkedIn, zeby grid sie zlozyl */
#client_new_social .client_new_social_sub ul li:has(> a.service_item[data-name="service_LinkedIn"]){
  display:none !important;
}

/* 2) Opcjonalnie: gdyby siatka miala sztywne kolumny, ustaw auto-fit,
      wtedy 3 ikony uloza sie bez pustej kolumny */
#client_new_social .client_new_social_sub ul{
  grid-template-columns:repeat(auto-fit, minmax(105px, 1fr)) !important;
}

/* =========================================================
   11. NAGŁÓWEK – OGRANICZENIE WYSOKOŚCI LOGO
   ========================================================= */

#logo img{
  max-height:60px !important;  /* zmien na 50px jesli chcesz mniejsze */
  width:auto !important;
  height:auto !important;
}

/* =========================================================
   12. MENU DESKTOPOWE – BELKA, KOLORY, HOVER I DROPDOWNY
   ========================================================= */

@media (min-width: 992px){

  /* =========================
     BELKA MENU - PREMIUM (bez ruszania układu menu)
  ========================== */

  #menu_navbar.navbar-collapse{
    display:flex !important;
    justify-content:center !important;

    width:100% !important;
    max-width:1200px;
    margin:10px auto 0 !important;

    position:relative;
    z-index:9999;
    box-sizing:border-box;

    /* wyglad premium */
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)) !important;
    border:1px solid rgba(0,0,0,.08) !important;
    border-radius:14px !important;
    padding:8px 12px !important;

    /* lekki "glass" */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);

    /* premium shadow */
    box-shadow:
      0 10px 26px rgba(0,0,0,.10),
      0 1px 0 rgba(255,255,255,.75) inset !important;

    /* Opcjonalnie: separator od tła strony (bardzo subtelny) */
    outline:1px solid rgba(255,255,255,.65);
    outline-offset:-2px;
  }

  /* delikatna tekstura / sheen w tle */
  #menu_navbar.navbar-collapse:before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    pointer-events:none;
    background:
      radial-gradient(1200px 120px at 50% 0%, rgba(0,0,0,.06), transparent 65%),
      radial-gradient(900px 90px at 20% 100%, rgba(0,0,0,.05), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
    opacity:.9;
  }

  /* =========================
     Menu w jednej linii, wycentrowane
  ========================== */

  #menu_navbar .navbar-nav{
    display:flex !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    white-space:nowrap !important;

    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  #menu_navbar .navbar-nav .nav-item{ margin:0 !important; }

  /* =========================
     LINKI - PREMIUM HOVER
  ========================== */

  #menu_navbar .navbar-nav .nav-link{
    font-size:13px !important;
    padding:10px 10px !important;
    letter-spacing:0.2px;

    color:#111 !important;
    border-radius:10px;
    transition: all .18s ease;
  }

  #menu_navbar .navbar-nav .nav-link:hover{
    background:rgba(0,0,0,.06);
    color:#000 !important;
  }

  /* =========================
     AKTYWNA / OTWARTA POZYCJA (ZAMIAST NIEBIESKIEGO) - czarny chip
  ========================== */

  #menu_navbar .navbar-nav .nav-link.active,
  #menu_navbar .navbar-nav .nav-item.nav-open > .nav-link-wrapper > .nav-link{
    background:#111 !important;
    color:#fff !important;
    box-shadow:
      0 4px 14px rgba(0,0,0,.18),
      0 1px 0 rgba(255,255,255,.25) inset;
  }

  /* Usunięcie starego niebieskiego koloru */
  #menu_navbar .navbar-nav .nav-link:visited{
    color:#111 !important;
  }

  /* ===============================
     SUBMENU - aktywna pozycja (bez czarnego "placka")
  ================================ */

  #menu_categories ul.navbar-subnav .nav-link.active,
  #menu_categories ul.navbar-subsubnav .nav-link.active{
    background:rgba(0,0,0,.06) !important;
    color:#000 !important;

    border-left:3px solid #111 !important;
    padding-left:15px !important;

    box-shadow:none !important;
    border-radius:0 !important;
  }

  /* Usuwamy czarny chip z submenu */
  #menu_categories ul.navbar-subnav .nav-link,
  #menu_categories ul.navbar-subsubnav .nav-link{
    border-radius:0 !important;
    box-shadow:none !important;
  }

  /* =========================
     DROPDOWN (stabilizacja, bez ingerencji w uklad IdoSell)
  ========================== */

  /* nic nie ucina dropdownow */
  #menu_categories,
  #menu_categories.wide,
  #menu_navbar.navbar-collapse,
  #menu_navbar .navbar-nav,
  #menu_navbar .nav-link-wrapper{
    overflow:visible !important;
  }

  /* dropdown zawsze nad hero i klikalny */
  #menu_categories{ position:relative; z-index:99999 !important; }

  #menu_categories ul.navbar-subnav,
  #menu_categories ul.navbar-subsubnav{
    z-index:200000 !important;
    pointer-events:auto !important;

    /* NIE ruszamy: display/position/left/top/transform/width/columns */
  }

  /* Desktop: schowaj elementy "powrotu" z wersji mobilnej (te strzalki i naglowki) */
  #menu_categories li.nav-header,
  #menu_categories .nav-header__backLink{
    display:none !important;
  }

  /* Tekst w dropdownach: zawijaj zamiast ucinac */
  #menu_categories ul.navbar-subnav .nav-link,
  #menu_categories ul.navbar-subsubnav .nav-link{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.25 !important;
  }
  

  /* =========================================================
     13. WYSZUKIWARKA – PODPOWIEDZI NAD BELKĄ MENU
     Ta sekcja już znajduje się w @media (min-width: 992px).
     ========================================================= */

  /* kontener wyszukiwarki na gorze warstw */
  #menu_search,
  .menu_search,
  .menu_search_block{
    position:relative !important;
    z-index:300000 !important;
  }

  /* lista podpowiedzi (IdoSell roznie nazywa) */
  .search__results,
  .search_results,
  .autocomplete,
  .autocomplete__results,
  .ui-autocomplete{
    position:relative !important;
    z-index:300001 !important;
  }

  /* na wypadek, gdy lista jest absolutnie pozycjonowana w innym wrapperze */
  .ui-front{
    z-index:300001 !important;
  }
} /* koniec @media (min-width: 992px) */

/* =========================================================
   KARTA PRODUKTU – LINK DO WYMIARÓW - dodane 06.08.2026
   Styl Premium Blue Steel

   Dotyczy linku „Sprawdź wymiary produktu” znajdującego się
   bezpośrednio nad wyborem rozmiaru.

   Kod zmienia wyłącznie wygląd linku. Nie ingeruje w działanie
   tabeli rozmiarów ani mechanizm wyboru wariantu produktu.
========================================================= */


/* ================= SEKCJA LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: 100% !important;

  margin: 12px 0 10px !important;
  padding: 0 !important;
}


/* ================= GŁÓWNY PRZYCISK ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  position: relative !important;
  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 52px !important;

  padding: 9px 46px 9px 10px !important;

  border: 1px solid rgba(125, 195, 255, .30) !important;
  border-radius: 16px !important;

  background:
    radial-gradient(
      circle at top left,
      rgba(80, 170, 255, .22),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #4b5563 0%,
      #2d3642 38%,
      #1d2430 72%,
      #141922 100%
    ) !important;

  box-shadow:
    0 9px 22px rgba(0, 0, 0, .18),
    0 0 20px rgba(0, 140, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -8px 20px rgba(0, 0, 0, .14) !important;

  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease !important;
}


/* ================= IKONA WYMIARÓW ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "↔" !important;

  position: relative !important;
  z-index: 2 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;

  width: 34px !important;
  height: 34px !important;
  margin-right: 11px !important;

  border: 1px solid rgba(150, 210, 255, .34) !important;
  border-radius: 11px !important;

  background:
    linear-gradient(
      145deg,
      rgba(105, 185, 255, .26),
      rgba(30, 80, 125, .20)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 14px rgba(70, 170, 255, .16) !important;

  color: #72c1ff !important;

  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  transition:
    color .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}


/* ================= STRZAŁKA PO PRAWEJ ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: "›" !important;

  position: absolute !important;
  top: 50% !important;
  right: 18px !important;
  z-index: 2 !important;

  transform: translateY(-52%) !important;

  color: #72c1ff !important;

  font-size: 29px !important;
  line-height: 1 !important;
  font-weight: 300 !important;

  transition:
    transform .22s ease,
    color .22s ease !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    transform: translateY(-2px) !important;

    border-color: rgba(115, 195, 255, .58) !important;

    box-shadow:
      0 13px 28px rgba(0, 0, 0, .22),
      0 0 26px rgba(0, 145, 255, .18),
      inset 0 1px 0 rgba(255, 255, 255, .18),
      inset 0 -8px 20px rgba(0, 0, 0, .12) !important;

    color: #ffffff !important;
    text-decoration: none !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    color: #ffffff !important;

    background:
      linear-gradient(
        145deg,
        rgba(80, 175, 255, .46),
        rgba(25, 95, 155, .30)
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      0 0 18px rgba(70, 175, 255, .28) !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::after {
    transform: translate(3px, -52%) !important;
    color: #ffffff !important;
  }
}


/* ================= KLIKNIĘCIE I KLAWIATURA ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:active {
  transform: translateY(0) scale(.99) !important;
}

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 3px solid rgba(70, 170, 255, .32) !important;
  outline-offset: 3px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    margin: 10px 0 9px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    min-height: 50px !important;

    padding:
      8px 42px
      8px 9px !important;

    border-radius: 14px !important;

    font-size: 13px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 32px !important;

    width: 32px !important;
    height: 32px !important;
    margin-right: 10px !important;

    border-radius: 10px !important;

    font-size: 19px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
    right: 15px !important;
    font-size: 27px !important;
  }
}

/* =========================================================
   KARTA PRODUKTU – LINK „SPRAWDŹ WYMIARY PRODUKTU”

   Czytelniejsza czcionka oraz ikona linijki.
   Bez tła, obramowania i dodatkowego kontenera.

   Kod nie ingeruje w działanie tabeli rozmiarów.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 10px 0 12px !important;
  padding: 0 !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  width: auto !important;
  min-height: 28px !important;
  padding: 2px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: none !important;
  box-shadow: none !important;

  color: #27394c !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    opacity .2s ease !important;
}


/* ================= IKONA LINJKI ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 22px !important;

  width: 22px !important;
  height: 22px !important;

  background-color: #367ead !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 20 20 4l2 2L6 22H4v-2ZM14.5 6.5l3 3M12 9l2 2m-4.5.5 3 3M7 14l2 2'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4 20 20 4l2 2L6 22H4v-2ZM14.5 6.5l3 3M12 9l2 2m-4.5.5 3 3M7 14l2 2'/%3E%3C/svg%3E") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  transition:
    background-color .2s ease,
    transform .2s ease !important;
}


/* Usunięcie strzałki po prawej z poprzedniej wersji */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #126aa5 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    background-color: #126aa5 !important;
    transform: rotate(-3deg) !important;
  }
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 2px solid rgba(35, 126, 187, .35) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    width: auto !important;
    margin: 9px 0 11px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    width: auto !important;
    max-width: 100% !important;

    gap: 7px !important;
    padding: 3px 0 !important;

    font-size: 14px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 21px !important;
    width: 21px !important;
    height: 21px !important;
  }
}

/* =========================================================
   KARTA PRODUKTU – LINK „SPRAWDŹ WYMIARY PRODUKTU”

   Wyraźny tekst oraz czytelna ikona linijki.
   Bez tła, obramowania i poszerzania sekcji na mobile.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 10px 0 13px !important;
  padding: 0 !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 30px !important;

  padding: 2px 0 4px !important;

  border: 0 !important;
  border-bottom: 2px solid rgba(38, 112, 164, .45) !important;
  border-radius: 0 !important;

  background: none !important;
  box-shadow: none !important;

  color: #172c40 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    border-color .2s ease !important;
}


/* ================= IKONA POZIOMEJ LINJKI ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 28px !important;

  width: 28px !important;
  height: 22px !important;

  background-color: #2674a8 !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Crect x='2' y='5' width='28' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 6v6M12 6v4M17 6v6M22 6v4M27 6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Crect x='2' y='5' width='28' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 6v6M12 6v4M17 6v6M22 6v4M27 6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  transition:
    background-color .2s ease,
    transform .2s ease !important;
}


/* Usunięcie elementów z wcześniejszych wersji */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #08699f !important;
    border-bottom-color: #1685c4 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    background-color: #1685c4 !important;
    transform: translateY(-1px) !important;
  }
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 3px solid rgba(35, 126, 187, .25) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    margin: 9px 0 12px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    gap: 8px !important;

    min-height: 31px !important;
    padding: 2px 0 4px !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 22px !important;
  }
}

/* =========================================================
   KARTA PRODUKTU – LINK „SPRAWDŹ WYMIARY PRODUKTU”

   Wyraźny tekst oraz czytelna ikona linijki.
   Bez tła, obramowania i poszerzania sekcji na mobile.

   Linia pod linkiem została odsunięta od tekstu,
   aby efekt był czytelniejszy i bardziej estetyczny.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 10px 0 13px !important;
  padding: 0 !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 33px !important;

  padding: 2px 0 7px !important;

  border: 0 !important;
  border-bottom: 2px solid rgba(38, 112, 164, .45) !important;
  border-radius: 0 !important;

  background: none !important;
  box-shadow: none !important;

  color: #172c40 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-decoration: none !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    border-color .2s ease !important;
}


/* ================= IKONA POZIOMEJ LINJKI ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 28px !important;

  width: 28px !important;
  height: 22px !important;

  background-color: #2674a8 !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Crect x='2' y='5' width='28' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 6v6M12 6v4M17 6v6M22 6v4M27 6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Crect x='2' y='5' width='28' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M7 6v6M12 6v4M17 6v6M22 6v4M27 6v6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  transition:
    background-color .2s ease,
    transform .2s ease !important;
}


/* ================= USUNIĘCIE POPRZEDNIEJ STRZAŁKI ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #08699f !important;
    border-bottom-color: #1685c4 !important;
    text-decoration: none !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    background-color: #1685c4 !important;
    transform: translateY(-1px) !important;
  }
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 3px solid rgba(35, 126, 187, .25) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    width: auto !important;
    margin: 9px 0 12px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    gap: 8px !important;

    width: auto !important;
    max-width: 100% !important;
    min-height: 34px !important;

    padding: 2px 0 7px !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 28px !important;

    width: 28px !important;
    height: 22px !important;
  }
}
/* =========================================================
   KARTA PRODUKTU – LINK DO WYMIARÓW PRODUKTU

   Czytelny link z ikoną produktu i oznaczeniem pomiaru.
   Bez tła, ramek oraz podkreślenia.

   Kod zmienia wyłącznie wygląd linku. Nie ingeruje
   w otwieranie tabeli wymiarów.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 11px 0 14px !important;
  padding: 0 !important;

  text-align: left !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 2px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: none !important;
  box-shadow: none !important;

  color: #24384b !important;

  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;

  text-decoration: none !important;
  text-underline-offset: 0 !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    opacity .2s ease !important;
}


/* ================= IKONA PRODUKTU I WYMIARÓW ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 30px !important;

  width: 30px !important;
  height: 30px !important;

  background-color: #2678ad !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5.5 6.5 7.8 3.5 13l4.2 2.2 1.5-2.5V26h13.6V12.7l1.5 2.5 4.2-2.2-3-5.2L21 5.5c-.8 2-2.5 3.2-5 3.2s-4.2-1.2-5-3.2Z'/%3E%3Cpath d='M11.5 19.5h9M11.5 19.5l2-2M11.5 19.5l2 2M20.5 19.5l-2-2M20.5 19.5l-2 2'/%3E%3C/g%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5.5 6.5 7.8 3.5 13l4.2 2.2 1.5-2.5V26h13.6V12.7l1.5 2.5 4.2-2.2 4.2-2.2-3-5.2L21 5.5c-.8 2-2.5 3.2-5 3.2s-4.2-1.2-5-3.2Z'/%3E%3Cpath d='M11.5 19.5h9M11.5 19.5l2-2M11.5 19.5l2 2M20.5 19.5l-2-2M20.5 19.5l-2 2'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  transition:
    background-color .2s ease,
    transform .2s ease !important;
}


/* ================= USUNIĘCIE DAWNYCH DODATKÓW ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #0878b7 !important;

    border: 0 !important;
    background: none !important;

    text-decoration: none !important;
    text-underline-offset: 0 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    background-color: #0795d2 !important;
    transform: translateX(2px) !important;
  }
}


/* ================= KLIKNIĘCIE ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:active {
  color: #075f91 !important;
  opacity: .82 !important;
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus,
#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  color: #0878b7 !important;

  border: 0 !important;
  background: none !important;

  text-decoration: none !important;
}

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 2px solid rgba(38, 120, 173, .35) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    width: auto !important;
    margin: 10px 0 13px !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    gap: 9px !important;

    width: auto !important;
    max-width: 100% !important;
    min-height: 32px !important;

    padding: 2px 0 !important;

    font-size: 15px !important;
    line-height: 1.35 !important;

    text-decoration: none !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 29px !important;

    width: 29px !important;
    height: 29px !important;
  }
}

/* =========================================================
   KARTA PRODUKTU – LINK „SPRAWDŹ WYMIARY PRODUKTU”

   Minimalistyczna wersja z czytelnym oznaczeniem „CM”.
   Bez szerokiego tła, podkreślenia i ilustracyjnej ikonki.

   Kod zmienia wyłącznie wygląd linku. Nie ingeruje
   w działanie tabeli wymiarów.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 10px 0 14px !important;
  padding: 0 !important;

  text-align: left !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 2px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #1f3448 !important;

  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;

  text-decoration: none !important;
  text-transform: none !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    opacity .2s ease !important;
}


/* ================= OZNACZENIE „CM” ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "CM" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 34px !important;

  width: 34px !important;
  height: 25px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #317eae !important;
  border-radius: 6px !important;

  background:
    linear-gradient(
      145deg,
      #3e8fbe 0%,
      #236d9c 100%
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 5px rgba(25, 83, 121, .15) !important;

  color: #ffffff !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;

  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease !important;
}


/* ================= USUNIĘCIE DAWNYCH DODATKÓW ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #0878b7 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    border-color: #138fc9 !important;

    background:
      linear-gradient(
        145deg,
        #42a0d2 0%,
        #197cae 100%
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .28),
      0 3px 8px rgba(20, 112, 164, .22) !important;
  }
}


/* ================= KLIKNIĘCIE ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:active {
  color: #075f91 !important;
  opacity: .82 !important;
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  text-decoration: none !important;
}

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 2px solid rgba(38, 120, 173, .35) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    display: block !important;
    width: auto !important;

    margin: 9px 0 13px !important;
    padding: 0 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    display: inline-flex !important;

    width: auto !important;
    max-width: 100% !important;
    min-height: 32px !important;

    gap: 9px !important;
    padding: 2px 0 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 34px !important;

    width: 34px !important;
    height: 25px !important;

    font-size: 10px !important;
  }
}

/* =========================================================
   KARTA PRODUKTU – LINK „SPRAWDŹ WYMIARY PRODUKTU”

   Czytelny link z ikoną fragmentu centymetra krawieckiego.
   Bez szerokiego tła, podkreślenia i dodatkowych ramek.

   Kod zmienia wyłącznie wygląd linku. Nie ingeruje
   w działanie tabeli wymiarów.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 10px 0 14px !important;
  padding: 0 !important;

  text-align: left !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 2px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #1f3448 !important;

  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;

  text-decoration: none !important;
  text-transform: none !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    opacity .2s ease !important;
}


/* ================= IKONA CENTYMETRA KRAWIECKIEGO ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 40px !important;

  width: 40px !important;
  height: 25px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background-color: transparent !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 28'%3E%3Cpath d='M3 8.5C13 5.5 28 5.5 41 8.5L39.5 21C27 18.5 15 18.5 4.5 21Z' fill='none' stroke='%232678ad' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M9 7.3l.7 6.1M15 6.3l.8 4.6M21 6l.7 6.2M27 6.2l.4 4.8M33 7l.1 6.2M38.5 8l-.3 4.7' fill='none' stroke='%232678ad' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  box-shadow: none !important;

  transition:
    filter .2s ease,
    transform .2s ease !important;
}


/* ================= USUNIĘCIE DAWNYCH DODATKÓW ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #0878b7 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    filter:
      brightness(1.15)
      saturate(1.15) !important;

    transform: translateY(-1px) !important;
  }
}


/* ================= KLIKNIĘCIE ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:active {
  color: #075f91 !important;
  opacity: .82 !important;
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  text-decoration: none !important;
}

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 2px solid rgba(38, 120, 173, .35) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    display: block !important;
    width: auto !important;

    margin: 9px 0 13px !important;
    padding: 0 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    display: inline-flex !important;

    width: auto !important;
    max-width: 100% !important;
    min-height: 34px !important;

    gap: 9px !important;
    padding: 2px 0 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 38px !important;

    width: 38px !important;
    height: 24px !important;
  }
}

/* =========================================================
   KARTA PRODUKTU – LINK „SPRAWDŹ WYMIARY PRODUKTU”

   Minimalistyczny link z prostym symbolem pomiaru:
   pozioma linia z czytelną podziałką.

   Bez tła, ramki i podkreślenia.
========================================================= */


/* ================= POŁOŻENIE LINKU ================= */

#projector_chart_section.projector_details__chart.projector_chart {
  display: block !important;
  width: auto !important;

  margin: 10px 0 14px !important;
  padding: 0 !important;

  text-align: left !important;
}


/* ================= WYGLĄD LINKU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 32px !important;

  margin: 0 !important;
  padding: 2px 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: #1f3448 !important;

  font-family: inherit !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;

  text-decoration: none !important;
  text-transform: none !important;

  cursor: pointer !important;

  transition:
    color .2s ease,
    opacity .2s ease !important;
}


/* ================= PROSTA IKONA POMIARU ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 34px !important;

  width: 34px !important;
  height: 18px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background-color: transparent !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Cg fill='none' stroke='%232678ad' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 15.5H34' stroke-width='2.2'/%3E%3Cpath d='M3 6v9.5M9 10v5.5M15 7.5v8M21 10v5.5M27 7.5v8M33 6v9.5' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  box-shadow: none !important;

  transition:
    filter .2s ease,
    transform .2s ease !important;
}


/* ================= USUNIĘCIE DAWNYCH DODATKÓW ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]::after {
  content: none !important;
  display: none !important;
}


/* ================= EFEKT HOVER ================= */

@media (hover: hover) {

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover {
    color: #0878b7 !important;

    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    text-decoration: none !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]:hover::before {
    filter:
      brightness(1.15)
      saturate(1.15) !important;

    transform: translateY(-1px) !important;
  }
}


/* ================= KLIKNIĘCIE ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:active {
  color: #075f91 !important;
  opacity: .82 !important;
}


/* ================= OBSŁUGA KLAWIATURY ================= */

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  text-decoration: none !important;
}

#projector_chart_section a.projector_chart__link[href="#showSizesCms"]:focus-visible {
  outline: 2px solid rgba(38, 120, 173, .35) !important;
  outline-offset: 4px !important;
}


/* ================= WERSJA MOBILNA ================= */

@media screen and (max-width: 768px) {

  #projector_chart_section.projector_details__chart.projector_chart {
    display: block !important;
    width: auto !important;

    margin: 9px 0 13px !important;
    padding: 0 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"] {
    width: auto !important;
    max-width: 100% !important;
    min-height: 32px !important;

    gap: 8px !important;
    padding: 2px 0 !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  #projector_chart_section a.projector_chart__link[href="#showSizesCms"]::before {
    flex-basis: 32px !important;

    width: 32px !important;
    height: 17px !important;
  }
}