/* Oferta: film, wstep z workami na kolach, kategorie produktow (akordeon). Wartosci z PROD. */

.products-photo {
  min-height: 52.315vw;
  background: url("/assets/img/products.webp") 50% 50% / cover;
}

/* --- Wstep --- */
.products-intro { padding: 30px 20px 0; color: var(--color-primary); }
.products-intro__box { --band-width: 59.086vw; margin-bottom: 30px; }
.products-intro__title {
  position: relative;
  margin: 0 0 20px;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.products-intro__text,
.products-outro {
  position: relative;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Worki na niebieskich kolach (kolo za obrazkiem) */
.products-bags { --band-width: 61.343vw; margin-bottom: 106px; }
.products-bags__inner { flex-direction: row; gap: 76px; }
.products-bags__item { position: relative; text-align: center; }
.products-bags__item img { display: inline-block; vertical-align: middle; }
.products-bags__item--wpc,
.products-bags__item--smp { flex: 1 0 auto; padding-top: 30px; }
.products-bags__item--wpc img,
.products-bags__item--smp img { max-width: 16.493vw; }
.products-bags__item::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 105%;
  height: 75%;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.products-bags__item--mpc::after { height: 85%; }

/* EN: tekst pod workami */
.products-outro { align-self: center; width: 59.086vw; max-width: 59.086vw; margin-bottom: 115px; }
/* Na PROD margines ostatniego akapitu zapada sie z marginesem 115 px (tu element flex - bez zapadania). */
@media (min-width: 1025px) {
  .products-outro p:last-child { margin-bottom: 0; }
}

/* --- Kategorie --- */
.products-cats { position: relative; display: flex; flex-direction: column; gap: 23px; }
/* Na PROD pierwszym elementem listy jest pusty widzet ze skryptem - odstep 23 px takze nad pierwsza kategoria. */
.products-cats::before { content: ""; }
.product-cat { position: relative; display: flex; flex-direction: column; }
.product-cat__head,
.product-cat__body { --band-width: 58.449vw; }
.product-cat__head {
  background: url("/assets/img/1.webp") center center no-repeat;
  transition: all .3s ease-out;
}
.product-cat.is-open .product-cat__head { padding-top: 140px; padding-bottom: 130px; }
.product-cat__title {
  position: relative;
  margin: 0;
  padding: 38px 0 32px;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-primary);
}
.page--en .product-cat__title { font-weight: 600; }
.product-cat__toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: inherit;
  text-shadow: inherit; /* przegladarka zeruje cien tekstu na przyciskach */
  color: inherit;
  cursor: pointer;
}
.product-cat--1 .product-cat__title,
.product-cat--2 .product-cat__title,
.product-cat--4 .product-cat__title { color: var(--color-white); }
.product-cat--1 .product-cat__title,
.product-cat--2 .product-cat__title { text-shadow: 0 5px 4px rgba(0, 0, 0, .5); }

.product-cat__body {
  display: none;
  padding: 60px 0 80px;
  background: var(--color-primary) url("/assets/img/Group-5.svg") no-repeat 90% var(--circle-y, -24%);
}
.product-cat.is-open .product-cat__body { display: flex; }
.product-cat__lists { flex-direction: row; justify-content: space-between; gap: 100px; }
.product-cat__list {
  --bullet-offset: 0px;
  width: 50%;
  max-width: 50%;
  color: var(--color-white);
  font-family: var(--font);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: var(--lh-body);
  text-transform: uppercase;
}
.product-cat__list .bullets__icon { top: 0; align-self: center; }
.product-cat__list .bullets__text { padding-left: 0; }

/* Zdjecie naglowka i polozenie grafiki z kolami - dla kazdej kategorii inne (jak na PROD) */
.product-cat--1 { --circle-y: 414%; }
.product-cat--4,
.product-cat--5 { --circle-y: 15em; }
.product-cat--6 { --circle-y: 5em; }
.product-cat--7 { --circle-y: 1em; }
.product-cat--8 { --circle-y: 4em; }
.product-cat--2 .product-cat__head { background-image: url("/assets/img/2.webp"); }
.product-cat--3 .product-cat__head { background-image: url("/assets/img/3.webp"); }
.product-cat--4 .product-cat__head { background-image: url("/assets/img/4.webp"); }
.product-cat--5 .product-cat__head { background-image: url("/assets/img/5.webp"); }
.product-cat--6 .product-cat__head { background-image: url("/assets/img/6.webp"); }
.product-cat--7 .product-cat__head { background-image: url("/assets/img/7.webp"); }
.product-cat--8 .product-cat__head { background-image: url("/assets/img/8.webp"); }

@media (max-width: 1024px) {
  .products-intro { padding: 50px 20px; }
  .products-bags { margin-bottom: 30px; }
  .products-outro { width: 100%; max-width: 100%; margin-bottom: 0; }
  .product-cat__head { padding: 0 20px; }
  .product-cat__body { padding: 50px 20px; background-position: 0 0; }
  .product-cat--3 .product-cat__body { padding: 20px 50px 50px 20px; }
  .product-cat__lists { gap: 20px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .products-intro__box,
  .products-bags,
  .product-cat__head,
  .product-cat__body { --band-width: 100%; }
}

@media (max-width: 767px) {
  .products-intro__box,
  .products-bags,
  .product-cat__head,
  .product-cat__body { --band-width: var(--content-width); }
  .products-photo { min-height: 350px; }
  .products-bags__inner,
  .product-cat__lists { flex-wrap: wrap; }
  .products-bags__inner { gap: 40px; }
  .products-bags__item--wpc,
  .products-bags__item--smp { padding-top: 0; }
  .products-bags__item { width: 100%; }
  .products-bags__item img { max-width: 100%; }
  .product-cat:not(.product-cat--1) .product-cat__body { background-size: 0 auto; }
  .product-cat__list { width: 100%; max-width: 100%; }
  /* Na PROD dlugie tytuly ("BEZPOSREDNIEGO") wystawaly poza ekran - przewijanie w bok. */
  .product-cat__title { font-size: 2rem; }
}