/* =========================================================
   TUJEANS – custom.css (STABILNIE) ✅
   Wklej w: Wygląd sklepu → Arkusz stylu CSS → custom.css
   ========================================================= */


/* =========================================================
   (1) TUJEANS – POSZERZENIE KONTENERA (desktop)
   ========================================================= */
@media (min-width: 1200px) {
  .container,
  .page-width,
  .main-container {
    max-width: 1440px;
  }
}
.container,
.page-width,
.main-container {
  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   (2) TUJEANS – TYPOGRAFIA (lżejsza, czytelniejsza)
   ========================================================= */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: 0.2px;
}

.product-name,
.products-list .name,
.product__name {
  font-weight: 400;
}

.price,
.product-price {
  font-weight: 600;
}

.filters,
.filters label,
.left-column {
  font-weight: 400;
}


/* =========================================================
   (3) TUJEANS – FILTRY: czytelność i klikalność
   ========================================================= */
.filters .filter__title,
.filters .filter_title,
.filters .f_title,
.filters legend,
.filters .title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  padding: 10px 12px;
  margin: 0;
}

.filters label,
.filters .filter__item,
.filters li {
  font-size: 15px;
  line-height: 1.35;
  padding: 6px 10px;
}

.filters input[type="checkbox"],
.filters input[type="radio"] {
  transform: scale(1.05);
  margin-right: 8px;
}

@media (max-width: 768px) {
  .filters .filter__title,
  .filters .filter_title,
  .filters .f_title,
  .filters legend,
  .filters .title {
    font-size: 17px;
    padding: 12px 14px;
  }

  .filters label,
  .filters .filter__item,
  .filters li {
    font-size: 16px;
    padding: 8px 12px;
  }
}


/* =========================================================
   (4) TUJEANS – “Sprawdź wymiary produktu” (subtelnie, bez ikon)
   ========================================================= */
a.projector_chart__link {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;

  color: #5f7388;
  background-color: #fafbfd;

  border: 1px dashed #d6dee8;
  border-radius: 5px;

  text-decoration: none;
  box-shadow: none;

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

a.projector_chart__link:hover {
  background-color: #f1f4f8;
  color: #334e68;
  border-color: #c3cfdb;
  text-decoration: none;
}

a.projector_chart__link i,
a.projector_chart__link svg,
a.projector_chart__link img { display: none !important; }

a.projector_chart__link span { display: inline !important; }


/* =========================================================
   (5) FILTRY – UKRYJ LICZNIKI (towary: xxx)
   ========================================================= */
.filters span[class*="--quantity"],
#filters span[class*="--quantity"] {
  display: none !important;
}

.filters a span + span,
.filters label span + span,
#filters a span + span,
#filters label span + span {
  display: none !important;
}

.filters a small,
.filters a em,
.filters li small,
.filters li em,
#filters a small,
#filters a em,
#filters li small,
#filters li em {
  display: none !important;
}

.filters [class*="__count"],
.filters [class*="items-count"],
.filters [class*="products-count"],
.filters [class*="filter__count"],
#filters [class*="__count"],
#filters [class*="items-count"],
#filters [class*="products-count"],
#filters [class*="filter__count"] {
  display: none !important;
}


/* =========================================================
   (6) TUJEANS – BANER GŁÓWNY (DESKTOP): niższy
   ========================================================= */
@media (min-width: 1200px) {
  .main-slider img,
  .slider img,
  .rwd-slider img,
  .iai-slider img,
  .banner img,
  .banners img {
    width: 100% !important;
    height: 420px !important;
    object-fit: cover !important;
    display: block;
  }

  .main-slider,
  .slider,
  .rwd-slider,
  .iai-slider,
  .banner,
  .banners {
    max-height: 420px;
    overflow: hidden;
  }
}


/* =========================================================
   (7) TUJEANS – MENU (desktop): TOP-LEVEL (górny pasek)
   - aktywna pozycja: pogrubiona
   - bez podkreśleń
   ========================================================= */
@media (min-width: 1200px){

  /* top-level linki (pasek główny) */
  #menu_navbar .navbar-nav > .nav-item > .nav-link,
  nav > ul > li > a,
  .menu > ul > li > a{
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    padding: 10px 10px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap;
  }

  /* aktywna top-level */
  #menu_navbar .navbar-nav > .nav-item > .nav-link.active,
  #menu_navbar .navbar-nav > .nav-item.active > .nav-link{
    font-weight: 700 !important;
    color: #d32f2f !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
  }
}


/* =========================================================
   (8) TUJEANS – MEGA MENU (desktop):
   POGRUB: Spodnie klasyczne / Dla wysokich / Duże rozmiary / Bojówki…
   Linki mają klasę: nav-link -l2  (drugi poziom)
   ========================================================= */
@media (min-width: 1200px){

  /* 2 poziom (nagłówkowe pozycje w rozwinięciu) */
  #menu_navbar .navbar-subnav .nav-link[class~="-l2"]{
    font-weight: 700 !important;
    letter-spacing: .2px !important;
  }

  /* 3+ poziom (np. L34/L36 itp.) zostaje normalny */
  #menu_navbar .navbar-subnav .nav-link[class~="-l3"],
  #menu_navbar .navbar-subnav .nav-link[class~="-l4"]{
    font-weight: 400 !important;
    letter-spacing: 0 !important;
  }

  /* dla pewności: nic nie podkreślamy w mega-menu */
  #menu_navbar .navbar-subnav a{
    text-decoration: none !important;
  }
}


/* =========================================================
   (9) TUJEANS – QUICKBAR (Napisz do nas | Wysyłka 24h | O nas)
   Cel: lekko, bez ramek “pudełko w pudełku”
   ========================================================= */

/* zdejmujemy wszelkie obramowania/tła z topbara i jego wrapperów */
.bars_top,
.bars_top .bars__item,
.bars_top .bars_wrapper,
.bars_top .bars_content{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
}

/* BAR z quickbarem (na Twoich screenach: #bar22) — USUŃ RAMKĘ i TŁO DEFINITYWNIE */
#bar22,
#bar22.bars__item,
.bars_top #bar22{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;

  /* bardzo ważne: poprawne zmienne (2 minusy) */
  border-color: transparent !important;
background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* wrappery wewnątrz #bar22 też bez “otoczki” */
#bar22 .bars_wrapper,
#bar22 .bars_content{
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* sam quickbar — bez ramki (czytelny, lekki) */
.tujeans-quickbar{
  border: 0 !important;
  background: transparent !important;
  padding: 6px 0 !important;
  margin: 8px 0 !important;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;

  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.tujeans-quickbar__link{
  color: #d32f2f;
  text-decoration: none;
}
.tujeans-quickbar__link:hover{
  text-decoration: underline;
}
.tujeans-quickbar__text{
  color: #d32f2f;
}
.tujeans-quickbar__sep{
  color: #d32f2f;
  opacity: .5;
}

/* Mobile: bez pionowych kresek */
@media (max-width: 768px){
  .tujeans-quickbar{
    font-size: 14px;
    padding: 6px 0 !important;
    margin: 6px 0 !important;
  }
  .tujeans-quickbar__sep{ display: none; }
}
/* =========================================================
   TUJEANS – QUICKBAR #bar22: ZMNIEJSZENIE WYSOKOŚCI (PATCH)
   Wklej NA DOLE custom.css (pod blokiem (9))
   ========================================================= */

/* poprawione selektory z podwójnym __ i wyzerowanie odstępów */
.bars_top,
.bars_top .bars__item,
.bars_top .bars__wrapper,
.bars_top .bars__content{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* docelowo: sama ramka #bar22 bez „nadmuchu” */
#bar22.bars__item,
#bar22 .bars__wrapper,
#bar22 .bars__content{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* klucz: zmniejszamy quickbar (to kontroluje wysokość wizualnie) */
#bar22 .tujeans-quickbar{
  margin: 0 !important;            /* było 8px 0 -> robiło “wysoką ramkę” */
  padding: 8px 14px !important;    /* ustawiona, równa wysokość */
  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
  box-sizing: border-box !important;
}

/* elementy w środku nie mogą podbijać wysokości */
#bar22 .tujeans-quickbar__link,
#bar22 .tujeans-quickbar__text,
#bar22 .tujeans-quickbar__sep{
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px){
  #bar22 .tujeans-quickbar{
    min-height: 40px !important;
    padding: 8px 10px !important;
    gap: 10px !important;
  }
}
/* =========================================================
   TUJEANS – kafelki kategorii (FLEX, 100% bez błędów w IdoSell)
   Wklej w: Wygląd sklepu → Arkusz stylu CSS → custom.css
   ========================================================= */

.tujeans-catgrid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* równo i estetycznie */
  margin: 10px 0 0;
  gap: 28px;                 /* jeśli panel krzyczy na gap -> patrz linia niżej */
  /* column-gap: 28px; row-gap: 28px;  <-- awaryjnie zamiast gap */
}

.tujeans-catgrid__item{
  text-decoration: none;
  color: inherit;
  text-align: center;

  /* 4 w rzędzie na desktop */
  width: calc(25% - 28px);
  min-width: 220px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.tujeans-catgrid__img{
  width: 220px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tujeans-catgrid__img img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.tujeans-catgrid__title{
  margin-top: 10px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.15;
  min-height: 2.3em;
}

/* Tablet: 2 w rzędzie */
@media (max-width: 1024px){
  .tujeans-catgrid__item{
    width: calc(50% - 22px);
    min-width: 220px;
  }
  .tujeans-catgrid{
    gap: 22px;
    /* column-gap: 22px; row-gap: 22px; */
  }
  .tujeans-catgrid__img{
    width: 240px;
    height: 240px;
  }
}

/* Mobile: 2 w rzędzie */
@media (max-width: 640px){
  .tujeans-catgrid__item{
    width: calc(50% - 16px);
    min-width: 150px;
  }
  .tujeans-catgrid{
    gap: 16px;
    /* column-gap: 16px; row-gap: 16px; */
  }
  .tujeans-catgrid__img{
    width: 130px;
    height: 140px;
  }
  .tujeans-catgrid__title{
    font-size: 18px;
    min-height: 2.4em;
  }
}
/* =========================================================
   TUJEANS – WYMUSZENIE 2 KOLUMN NA MOBILE (równo jak wcześniej)
   Wklej NA SAM KONIEC custom.css
   ========================================================= */

@media (max-width: 640px){
  .tujeans-catgrid{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    column-gap: 14px !important;
    row-gap: 18px !important;
  }

  .tujeans-catgrid__item{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    /* 2 w rzędzie */
    width: calc(50% - 14px) !important;
    max-width: calc(50% - 14px) !important;
    min-width: 0 !important;
  }

  .tujeans-catgrid__img{
    width: 140px !important;
    height: 150px !important;
  }

  .tujeans-catgrid__title{
    font-size: 16px !important;
    margin-top: 8px !important;
    min-height: 2.2em !important;
  }
}
/* TUJEANS – 4 kafle w rzędzie na mobile (opcjonalnie na przyszłość) */
@media (max-width: 640px){
  .tujeans-catgrid__item{
    width: calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
  }
  .tujeans-catgrid{
    column-gap: 12px !important;
    row-gap: 14px !important;
  }
  .tujeans-catgrid__img{
    width: 88px !important;
    height: 96px !important;
  }
  .tujeans-catgrid__title{
    font-size: 12px !important;
    line-height: 1.1 !important;
    min-height: 2.2em !important;
  }
}
/* TUJEANS – ukryj sekcję BLOG na stronie głównej (żeby się nie dublowało) */

/* Najczęstsze selektory w szablonach IdoSell – ukryj “Blog” jako moduł home */
.main_page .blog,
.main_page .blog__wrapper,
.main_page .blog-list,
.main_page .blog_list,
.main_page #blog,
.main_page [data-section*="blog"],
.main_page [id*="blog"],
.main_page [class*="blog"]{
  display: none !important;
}
/* =========================================================
   TUJEANS – STOPKA: Facebook (Menu4) – FINAL
   Wklej do custom.css
   ========================================================= */

/* 1) Nagłówek Social Media – mniej odstępu pod nim */
[id*="menu4"] h4,
[class*="menu4"] h4{
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* 2) Element listy w Menu4 – bez dużych marginesów */
[id*="menu4"] li,
[class*="menu4"] li{
  margin: 0 !important;
  padding: 4px 0 !important;
  line-height: 1.2 !important;
}

/* =========================================================
   TUJEANS – STOPKA: Facebook (Menu4) – IKONA + TEKST
   Wklej do: Wygląd sklepu → Arkusz stylu CSS → custom.css
   ========================================================= */

/* Zbij odstęp pod nagłówkiem Social Media */
[id*="menu4"] h4,
[class*="menu4"] h4{
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

/* Elementy listy w Menu4 – normalne odstępy */
[id*="menu4"] li,
[class*="menu4"] li{
  margin: 0 !important;
  padding: 4px 0 !important;
  line-height: 1.2 !important;
}

/* =========================================================
   TUJEANS – STOPKA: Facebook (Menu4) – OBRAZEK + TEKST (FINAL)
   Wklej do: Wygląd sklepu → Arkusz stylu CSS → custom.css
   ========================================================= */

/* 1) Menu4 – zbij odstępy (żeby nie było pustej przestrzeni) */
[id*="menu4"] h4,
[class*="menu4"] h4{
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}

[id*="menu4"] li,
[class*="menu4"] li{
  margin: 0 !important;
  padding: 4px 0 !important;
  line-height: 1.2 !important;
}

/* 2) Link do FB – układ: obrazek + tekst w jednej linii */
a[href*="facebook.com/profile.php?id=61587472134697"],
a[href*="facebook.com/profile.php?id=615874"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* 3) Obrazek – delikatnie większy, nadal bez rozpychania */
a[href*="facebook.com/profile.php?id=61587472134697"] img,
a[href*="facebook.com/profile.php?id=615874"] img{
  width: 36px !important;        /* było 32 */
  height: 36px !important;       /* było 32 */
  max-width: 36px !important;
  max-height: 36px !important;
  display: inline-block !important;
  margin: 0 !important;
  vertical-align: middle !important;
}


/* 4) Hover */
a[href*="facebook.com/profile.php?id=61587472134697"]:hover,
a[href*="facebook.com/profile.php?id=615874"]:hover{
  text-decoration: underline !important;
}