/*
 * Warstwa doklejana do wiernej kopii strony producenta (data/site/home.html).
 *
 * Zasada: NIE ruszamy ich stylow. Dokladamy wylacznie to, czego kopia sama
 * nie ma - przycisk wejscia do konfiguratora i dyskretny znacznik, ze to
 * makieta. Wszystko z wysokim z-index, bo ich motyw ma wlasne warstwy.
 */

/* ── naprawa tego, co bez ich JavaScriptu nigdy by sie nie skonczylo ──
 *
 * Ich motyw zaklada, ze skrypty dzialaja: obrazy sa ukryte klasa .lazyload,
 * a kontener .rc rysuje krecace sie kolko az do chwili, gdy JS oglosi
 * zaladowanie. Skrypty wycielismy (i slusznie - to makieta), wiec ich prace
 * trzeba dokonczyc stylami.
 */

/* Spinner krecilby sie w nieskonczonosc - u nas obrazy sa juz na miejscu. */
.rc::after { display: none !important; }

/* NIEWIDZIALNA WARSTWA PRZECHWYTUJACA KLIKNIECIA.
   `.overlay-menu` to przyciemnienie tla dla ich menu mobilnego: pozycja
   fixed, rozmiar calego okna, `opacity: 0`. Normalnie wlacza je i wylacza
   JavaScript - bez niego zostaje rozpieta nad strona i lapie KAZDE
   klikniecie. Przez nia nie dalo sie kliknac w "Przejdz do konfiguratora".
   Przycisk w rogu dzialal tylko dlatego, ze ma z-index 99999. */
.overlay-menu { display: none !important; }

/* Podpis baneru rozciaga sie na caly kadr, wiec przykrywalby go w calosci.
   Klikalne maja byc tylko tekst i przycisk, nie cale zdjecie. */
#carousel .slider-caption { pointer-events: none; }
#carousel .slider-caption a,
#carousel .slider-caption .caption-description { pointer-events: auto; }

/* Obrazy odslaniamy niezaleznie od stanu, w jakim zostawil je ich skrypt. */
.lazyload,
.lazyloading,
.lazyloaded,
.slick-slide .lazyload { display: block !important; opacity: 1 !important; }

/* Karuzela bez JS pokazalaby wszystkie slajdy jeden pod drugim. Zostawiamy
   pierwszy - dokladnie to, co widac na ich stronie po wejsciu. */
#carousel > .rc ~ .rc { display: none !important; }

/* ── baner hero: poprawiony wzgledem oryginalu ─────────────────────────
 *
 * W ich wersji podpis stoi na sztywnym `top`, przez co przy 380 px wysokosci
 * baneru wychodzi poza kadr, a bialy tekst lezy wprost na zdjeciu maszyny -
 * czytelnosc zalezy od tego, co akurat jest pod litera. Przycisk ma
 * przezroczyste tlo i padding 27px/107px (miejsce na strzalke w tle).
 *
 * Poprawiamy trzy rzeczy: gradient pod tekstem (kontrast niezalezny od
 * zdjecia), wysrodkowanie podpisu w kadrze i przycisk z prawdziwym tlem.
 * Wszystko w NASZYM arkuszu - ich plikow nie ruszamy.
 */

/* Bez przyciemniania: ich baner to zaprojektowana czerwona kompozycja
   z miejscem na tekst po lewej, a nie zdjecie. Nakladka robilaby z czerwieni
   burgund. Czytelnosc zalatwia delikatny cien pod literami nizej.
   (Uwaga na przyszlosc: `.rc > *` w ICH arkuszu pozycjonuje ELEMENTY, wiec
   pseudo-element ::before nie dostaje od nich ani rozmiaru, ani pozycji -
   trzeba by mu je nadac recznie.) */
/* Baner dostaje PRAWDZIWA wysokosc zamiast sztuczki `height:0 + padding-top`.
   Przy ich ustawieniu kontener bywal nizszy niz podpis, wiec naglowek
   uciekal ponad kadr. Dzieki `object-fit: cover` grafika nadal wypelnia
   caly kadr bez znieksztalcen. */
#carousel > .rc {
  padding-top: 0 !important;
  height: clamp(300px, 30vw, 420px) !important;
}
#carousel > .rc > img {
  object-fit: cover;
  height: 100% !important;
  width: 100% !important;
}

/* Podpis: wysrodkowany w pionie, ograniczony na szerokosc, z marginesem
   oddechu - zamiast sztywnego `top`, ktory wypychal go poza kadr. */
#carousel .slider-caption {
  top: 0 !important;
  left: 0 !important;
  right: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  /* Ich regula to `top:50%` RAZEM z `translateY(-50%)`. Samo wyzerowanie
     `top` nie wystarcza - transform i tak podnosi podpis o pol wysokosci
     (przy banerze 405 px to 202 px ponad kadr). */
  transform: none !important;
  display: flex;
  align-items: center;
  z-index: 2;
  padding: 0 clamp(20px, 5vw, 64px) !important;
}
#carousel .caption-description {
  max-width: min(52ch, 46%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
#carousel .caption-description > p { margin: 0 !important; }

#carousel .caption-description .title {
  /* Gorna granica 38 px, nie 44: przy 1280 px naglowek lamal sie na dwie
     linie i wypychal przycisk poza kadr baneru. */
  font-size: clamp(24px, 2.9vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.6px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}
/* Ich znak "#" przed naglowkiem - wyciszamy go do roli akcentu, zamiast
   zostawiac jako pelnowymiarowy znak zapytania w tekscie. */
#carousel .caption-description .title strong { color: #fff; }

#carousel .caption-description > p:not(.title) {
  font-size: clamp(14px, 1.25vw, 17px) !important;
  line-height: 1.5;
  color: #e9ecef;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

/* Przycisk: pelne tlo marki zamiast przezroczystego, symetryczne wciecia,
   strzalka jako element typograficzny i delikatne uniesienie przy najechaniu. */
#carousel .caption-description .btn.red-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 14px 28px !important;
  /* BIALY, nie czerwony. Lewa czesc ich baneru jest czerwona, wiec przycisk
     w kolorze marki zlewalby sie z tlem. Odwrocenie kolorow daje maksymalny
     kontrast i wyglada czysciej niz oryginalny przezroczysty z ramka. */
  background: #fff !important;
  color: #c8161b !important;
  border: 0 !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;          /* inaczej "PRZEJDZ DO SKLEPU" lamie sie na dwie linie */
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  transition: background .16s, color .16s, transform .16s, box-shadow .16s;
}
/* Ich strzalka sklada sie z DWOCH pseudo-elementow: kreski (`::after`,
   szerokosc 50px, `right:36px`) i grota rysowanego obramowaniem (`::before`).
   Oba byly pozycjonowane absolutnie w miejscu, ktore robil
   `padding-right: 107px`. Po zwezeniu przycisku nachodzily na napis. */
#carousel .caption-description .btn.red-btn span::after,
#carousel .caption-description .btn.red-btn span::before,
#carousel .caption-description .btn.red-btn::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}
/* position: static jest tu kluczowe. Ich regula pozycjonuje ::after
   ABSOLUTNIE (strzalka w miejscu, ktore robil padding-right: 107px).
   Sama podmiana `content` zostawialaby ja nad napisem. */
#carousel .caption-description .btn.red-btn::after {
  content: "→" !important;
  position: static !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  transform: none;
  font-size: 17px;
  line-height: 1;
  transition: transform .16s;
}
#carousel .caption-description .btn.red-btn:hover {
  background: #212529 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
}
#carousel .caption-description .btn.red-btn:hover::after { transform: translateX(4px); }

@media (max-width: 700px) {
  #carousel .caption-description { max-width: 100%; }
  #carousel > .rc::before {
    background: linear-gradient(180deg, rgba(12,14,16,.55) 0%, rgba(12,14,16,.86) 100%);
  }
}

/* ── pasek "Nowosc" pod banerem ────────────────────────────────────────
 *
 * Stoi miedzy czerwonym banerem a bialą sekcja maszyn, wiec bierze grafit -
 * dzieki temu czyta sie jako osobna zapowiedz, a nie przedluzenie baneru.
 * Czerwien zostaje na plakietce i przycisku.
 */
.am-promo {
  background: #212529;
  color: #fff;
  border-top: 3px solid #ee1d23;
}
.am-promo__in {
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 15px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 4vw, 48px);
  flex-wrap: wrap;
}
.am-promo__txt { flex: 1 1 420px; min-width: 0; }

.am-promo__tag {
  display: inline-block;
  background: #ee1d23;
  color: #fff;
  font: 900 11px/1 "Lato", system-ui, Arial, sans-serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.am-promo h2 {
  margin: 0 0 6px !important;
  font: 900 clamp(21px, 2.4vw, 30px)/1.15 "Lato", system-ui, Arial, sans-serif !important;
  letter-spacing: -.4px;
  color: #fff !important;
  text-transform: none !important;
}
.am-promo p {
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.55;
  color: #b8bec4 !important;
  max-width: 62ch;
}
.am-promo__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  background: #ee1d23;
  color: #fff !important;
  border-radius: 6px;
  font: 900 15px/1 "Lato", system-ui, Arial, sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(238, 29, 35, .34);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.am-promo__btn::after { content: "→"; font-size: 17px; transition: transform .16s; }
.am-promo__btn:hover {
  background: #c8161b;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(238, 29, 35, .44);
}
.am-promo__btn:hover::after { transform: translateX(4px); }

@media (max-width: 640px) {
  .am-promo__in { padding: 20px 15px; }
  .am-promo__btn { width: 100%; justify-content: center; }
}

.am-cfg-cta {
  position: fixed;
  right: clamp(12px, 2.4vw, 28px);
  bottom: clamp(12px, 2.4vw, 28px);
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px 13px 17px;
  border-radius: 10px;
  text-decoration: none;
  background: #ee1d23;
  color: #fff !important;
  font: 400 14px/1.25 "Lato", "Segoe UI", system-ui, Arial, sans-serif;
  box-shadow: 0 6px 24px rgba(238, 29, 35, .42), 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .16s, box-shadow .16s, background .16s;
}
.am-cfg-cta:hover {
  background: #c8161b;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(238, 29, 35, .5), 0 3px 8px rgba(0, 0, 0, .22);
  color: #fff !important;
  text-decoration: none;
}
.am-cfg-cta__ico { font-size: 23px; line-height: 1; }
.am-cfg-cta b {
  display: block; font-size: 15px; font-weight: 900; letter-spacing: .3px;
}
.am-cfg-cta em {
  display: block; font-style: normal; font-size: 11.5px; opacity: .9;
}

/* Znacznik makiety. Celowo dyskretny - nie ma zaslaniac strony, ale ma byc,
   zeby nikt nie wzial kopii za oficjalny serwis producenta. */
.am-cfg-cta::after {
  content: "DEMO";
  position: absolute; top: -9px; left: -9px;
  background: #212529; color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  padding: 2px 7px; border-radius: 4px;
}

@media (max-width: 560px) {
  .am-cfg-cta { left: 12px; right: 12px; justify-content: center; }
}

@media print { .am-cfg-cta { display: none; } }