/* ==========================================================================
   DOR-JAN — poprawki responsywne (telefony / tablety).
   Ładowany PO main.css, więc może nadpisywać style szablonu.
   Zasada: żadnych stylów inline w HTML — inline "display:flex !important"
   na .tp-header-button bił Bootstrapowe .d-none i rozwalał nagłówek na telefonie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAGŁÓWEK
   Przyciski "Sklep online / Konfigurator" mają w markupie klasy
   "d-none d-lg-block" — czyli mają być widoczne dopiero od 992 px.
   Poniżej tej szerokości chowa je Bootstrap, dzięki czemu logo i przycisk
   menu (hamburger) odzyskują miejsce. Od 992 px ustawiamy je obok siebie.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
   .tp-header-button {
      display: flex !important;
      gap: 10px;
      align-items: center;
   }
}

/* Nagłówek na małych ekranach — logo nie może rozpychać paska */
@media (max-width: 991px) {
   .tp-header-right {
      gap: 10px;
   }
   .tp-header-3-logo img,
   .tp-header-logo img {
      max-width: 150px;
      height: auto;
   }
}

@media (max-width: 400px) {
   .tp-header-3-logo img,
   .tp-header-logo img {
      max-width: 124px;
   }
   .tp-lang-switch {
      margin-right: 8px !important;
      font-size: 14px !important;
   }
}

/* Przełącznik PL/EN — czytelny i wygodny w kliknięciu na dotyku */
@media (max-width: 991px) {
   .tp-lang-switch a {
      padding: 4px 2px;
   }
}

/* Przycisk menu (hamburger) — szablon rysuje go na biało, co działa tylko na
   przezroczystym nagłówku nad ciemnym hero (strona główna). Na podstronach
   (.tp-header-light) oraz po przewinięciu (.header-sticky) nagłówek jest biały
   i biała ikona stawała się NIEWIDOCZNA — nie dało się otworzyć menu.
   Hamburger pokazuje się poniżej 1200 px (klasa d-xl-none), więc tam korygujemy. */
@media (max-width: 1199px) {
   .tp-header-light .tp-header-3-bar button,
   .header-sticky .tp-header-3-bar button {
      border-color: var(--tp-common-black, #261F1F);
   }

   .tp-header-light .tp-header-3-bar button i,
   .header-sticky .tp-header-3-bar button i {
      color: var(--tp-common-black, #261F1F);
   }
}

/* --------------------------------------------------------------------------
   2. MENU BOCZNE (off-canvas)
   Poniżej 992 px przenosimy tu przyciski Sklep/Konfigurator, żeby nie znikły
   z telefonu razem z paskiem nagłówka.
   -------------------------------------------------------------------------- */
.dj-offcanvas-btn {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin: 26px 0 30px;
}

.dj-offcanvas-btn .tp-btn-white,
.dj-offcanvas-btn .tp-btn-orange {
   flex: 1 1 auto;
   text-align: center;
   justify-content: center;
   white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAFIA
   Szablon nie dowiózł rozmiarów mobilnych dla hero (.tp-slider-3-title ma
   regułę tylko dla 1200–1399 px), przez co na telefonie h1 zostawał 56 px
   i zajmował pół ekranu.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
   .tp-slider-3-title {
      font-size: 44px;
      line-height: 1.12;
   }
}

@media (max-width: 767px) {
   .tp-slider-3-title {
      font-size: 34px;
      line-height: 1.15;
   }
   .tp-slider-3-subtitle,
   .tp-slider-3-content span {
      font-size: 14px;
      line-height: 1.4;
   }
}

@media (max-width: 400px) {
   .tp-slider-3-title {
      font-size: 29px;
   }
}

/* Nagłówki sekcji i tytuły podstron */
@media (max-width: 767px) {
   .tp-section-title {
      font-size: 26px;
      line-height: 1.25;
   }
   .breadcrumb__title,
   .tp-breadcrumb-title {
      font-size: 30px;
      line-height: 1.2;
      word-break: break-word;
   }
}

@media (max-width: 400px) {
   .tp-section-title {
      font-size: 23px;
   }
   .breadcrumb__title,
   .tp-breadcrumb-title {
      font-size: 25px;
   }
}

/* --------------------------------------------------------------------------
   4. ZABEZPIECZENIA PRZED POZIOMYM PRZEWIJANIEM
   UWAGA: świadomie NIE ustawiamy tu "overflow-x: hidden" na html/body.
   Taka reguła czyni z nich kontenery przewijania i psuje "position: sticky"
   na .tp-product-details-thumb-wrapper (zdjęcie na stronie produktu).
   Sprawdzono pomiarem: żadna podstrona nie przewija się w poziomie, więc
   ten "bezpiecznik" był zbędny. Zamiast niego pilnujemy samych elementów.
   -------------------------------------------------------------------------- */
/* Animacje wjeżdżające z boku (.tpfadeRight/.tpfadeLeft) startują od
   translateX(±30px). Na wąskim ekranie te 30 px wystaje poza kadr i strona
   daje się przewijać w bok (mierzalne na "O nas" i "FAQ": 390 px przy 360 px
   ekranu). Na telefonie zamieniamy je na samo wygaszanie — efekt zostaje,
   przesunięcie znika. Bez ruszania html/body, więc sticky działa dalej. */
@keyframes djFadeIn {
   from { opacity: 0; }
   to   { opacity: 1; }
}

@media (max-width: 991px) {
   .tpfadeRight,
   .tpfadeLeft {
      animation-name: djFadeIn !important;
   }

   /* Duży gutter Bootstrapa (gx-50 = 50 px) daje ujemne marginesy -25 px,
      a kontener ma tylko 12 px paddingu — wiersz wystawał po 13 px z każdej
      strony (widoczne na "project-modern"). Na telefonie zmniejszamy odstęp. */
   .row.gx-50 {
      --bs-gutter-x: 24px;
   }

   img,
   video,
   iframe {
      max-width: 100%;
      height: auto;
   }
   /* tabele specyfikacji przewijają się same, zamiast rozpychać stronę */
   .table-responsive,
   .tp-product-details-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
   /* długie nazwy/parametry łamią się zamiast rozpychać kolumnę */
   .tp-product-details-title,
   .breadcrumb__title,
   .tp-breadcrumb-title,
   .tp-product-title {
      overflow-wrap: break-word;
   }
}