/* =============================================
   OFFER PAGE — HOME-STYLE HERO OVERRIDE
   Used on: oferta-okna.html + 5× simple oferta-* pages
   Override: uses .offer-page body class to override hero.css styles
   ============================================= */
.offer-page .hero {
  padding-top: 180px;
  padding-bottom: 80px;
  min-height: auto;
}

.offer-page .hero__image-stack img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.offer-page .show-mobile { display: none; }

@media (min-width: 1025px) {
  .offer-page .hero__container {
    flex-direction: row-reverse;
    gap: 40px;
  }

  .offer-page .hero__image {
    flex: 0 0 624px;
  }

  .offer-page .hero__image-stack {
    height: 691px;
    border-radius: var(--radius-xl);
  }
}

/* =============================================
   RESPONSIVE — OFFER HERO
   ============================================= */
/* === Desktop only (1025–1200px) === */
@media (min-width: 1025px) and (max-width: 1200px) {
  .offer-page .hero {
    padding-top: 150px;
    padding-bottom: 60px;
  }

  .offer-page .hero__container {
    gap: 32px;
  }

  .offer-page .hero__image {
    flex: 0 0 440px;
  }

  .offer-page .hero__image-stack {
    height: 500px;
    border-radius: var(--radius-xl);
  }
}

/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .offer-page .hero {
    padding-top: 120px;
    padding-bottom: 24px;
  }

  .offer-page .hero + .services {
    padding-top: 144px !important;
    background: transparent;
  }

  .offer-page .hide-mobile { display: none; }
  .offer-page .show-mobile { display: inline; }

  .offer-page .hero__heading {
    font-size: 44px;
    margin-bottom: 28px;
  }

  .offer-page .hero__subheading {
    margin-bottom: 28px;
  }

  .offer-page .hero__cta-wrapper {
    margin-bottom: 28px;
  }

  .offer-page .hero__image {
    flex: none;
    width: 86%;
    max-width: 580px;
    margin: 0 auto;
  }

  .offer-page .hero__image-stack {
    height: auto;
    aspect-ratio: 5 / 4;
    border-radius: var(--radius-xl);
  }

  .offer-page .trust-badge {
    order: -1;
    margin-top: 0;
    margin-bottom: 16px;
    padding: 9px 0;
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 14px;
  }

  .offer-page .trust-badge::after {
    content: '';
    display: inline-block;
    width: 17px;
    height: 17px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 6H9.5M6.5 3L9.5 6L6.5 9' stroke='%23999' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .offer-page .trust-badge:hover::after {
    transform: translateX(3px);
  }

  .offer-page .trust-badge svg:first-child {
    width: 20px;
    height: 20px;
  }

  .offer-page .trust-badge__stars {
    font-size: 16px;
  }

  .offer-page .trust-badge__rating {
    font-size: 16px;
  }

  .offer-page .trust-badge__reviews {
    font-size: 15px;
  }

  .offer-page .services__grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    margin: 0 auto;
    gap: 16px;
  }

  .offer-page .services__grid .services__card:first-child {
    grid-column: span 2;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .offer-page .hero {
    padding-top: 94px;
    padding-bottom: 16px;
    /* Deklaracja `background` USUNIETA 2026-08-08 razem z poswiata — powtarzala
       co do wartosci regule bazowa `.hero` z hero.css, wiec po jej splaszczeniu
       do `var(--white)` nie mialaby juz czego nadpisywac. */
  }

  .offer-page .hero + .services.services--product {
    display: block;
  }

  .offer-page .hero__content {
    text-align: left;
    align-items: flex-start;
  }

  .offer-page .hero__heading {
    font-size: 35px;
    line-height: 1.19;
    margin-bottom: 16px;
  }

  .offer-page .hero__subheading {
    font-size: 16px;
    margin-bottom: 16px;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }

  .offer-page .hero__cta-wrapper {
    margin-bottom: 16px;
    width: 100%;
  }

  .offer-page .hero__cta-wrapper .ihb--hero {
    flex: 1;
  }

  .offer-page .trust-badge {
    align-self: flex-start;
    justify-content: flex-start;
  }

  .offer-page .trust-badge__sep,
  .offer-page .trust-badge__clients { display: none; }

  .offer-page .hero__image {
    flex: 0 0 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

}

/* =============================================
   OFFER PAGE — Services grid (1 col on mobile)
   ============================================= */
/* === Small mobile (≤600px) === */
@media (max-width: 600px) {
  #offer-types-grid:not(:has(.services__card--product)) {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 16px;
  }

  #offer-types-grid .services__card {
    grid-column: auto !important;
  }
}

/* =============================================
   PRODUCT DETAIL — Image + Content sections
   ============================================= */
.product-detail {
  background-color: var(--white);
  padding: 88px 24px;
  position: relative;
  overflow: hidden;
}

.product-detail--brands::before {
  display: none;
}

.product-detail__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}

/* Reversed layout — image on the left */
.product-detail--reversed .product-detail__container {
  grid-template-columns: 5fr 6fr;
}

.product-detail--reversed .product-detail__image-wrapper {
  order: -1;
}

/* ---- Image ---- */
.product-detail__image-wrapper {
  position: relative;
  border-radius: 11px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow:
    0 24px 64px rgba(30, 30, 30, 0.10),
    0 8px 24px rgba(var(--orange-rgb), 0.06);
}

.product-detail__image-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 30, 30, 0.25) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 11px;
}

.product-detail__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Plywajaca karta na zdjeciu (uklad wg transigo.framer.website) ----
   Trzyma opis typu produktu, ktory do 2026-07-23 byl akapitem
   `.product-detail__subheading` w lewej kolumnie. NIE dopisuj tu nowej tresci —
   to przeniesiony, istniejacy tekst; w sekcji `--brands` subheading zostal
   na swoim miejscu i tej karty tam nie ma. */
.product-detail__float {
  position: absolute;
  left: 28px;
  bottom: 28px;
  z-index: 2;
  width: min(340px, calc(100% - 56px));
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 22px 48px -16px rgba(21, 21, 21, 0.28);
}

.product-detail__float-icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--orange);
  margin-bottom: 16px;
}

.product-detail__float-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--dark-gray);
  margin-bottom: 10px;
}

.product-detail__float-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-500);
}

/* ---- Content ---- */
.product-detail__content {
  display: flex;
  flex-direction: column;
}

/* Desktop: wysokosc wiersza wyznacza WYZSZY z dwoch elementow — zdjecie ma
   `min-height`, a kolumna tresci rosnie naturalnie; oba sa rozciagane do wspolnej
   wysokosci przez `align-self: stretch`. Zamknieta panele flex-grow rozdzielaja
   nadmiar, wiec 1 otwarty + 2 zamkniete = wysokosc zdjecia.
   DO 2026-07-23 bylo tu sztywne sprzezenie `aspect-ratio` (zdjecie 1/1, tresc 6/5)
   — dawalo sekcje ~610px wysoka i, co gorsza, MOGLO SIE PRZELAC: przy 1025px
   naturalna wysokosc tresci (~400px) miala raptem ~19px zapasu wzgledem
   wyliczonej z proporcji, wiec dluzszy naglowek wychodzil poza swoje pudelko.
   Przy `min-height` przelanie jest niemozliwe (wiersz gridu bierze maksimum),
   a sekcja jest o ~130px nizsza. Nie wracaj do `aspect-ratio`. */
@media (min-width: 1025px) {
  .product-detail:not(.product-detail--brands) .product-detail__content,
  .product-detail__image-wrapper {
    align-self: stretch;
  }
  .product-detail__image-wrapper {
    aspect-ratio: auto;
    min-height: 480px;
  }
  .product-detail__content > .worry-free__accordion--inline {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  /* All panels share one flex layout; open/closed differ ONLY by flex-grow,
     which is animatable — so the header redistribution tweens in sync with the
     body's max-height instead of snapping on the class flip. flex-basis must
     stay auto on both states (auto ↔ 0% cannot interpolate). */
  /* UWAGA: `transition` NIE moze byc tutaj — `.product-detail .worry-free__panel`
     nizej w pliku ma te sama specyficznosc (0,2,0) i wygrywa kolejnoscia w zrodle,
     wiec skasowalby ta liste. Kanoniczna lista przejsc (razem z `flex-grow`)
     siedzi w tamtej regule. */
  .product-detail__content .worry-free__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
  }
  .product-detail__content .worry-free__panel:not(.worry-free__panel--active) {
    flex-grow: 1;
  }
}

.product-detail__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  align-self: flex-start;
}

.product-detail__heading {
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--dark-gray);
  margin-bottom: 20px;
}

.product-detail__subheading {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 8px;
  max-width: 520px;
}

/* ---- Feature list ---- */
.product-detail__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-detail__feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.product-detail__feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.4), rgba(var(--orange-end-rgb), 0.4));
  color: var(--orange);
}

.product-detail__feature-icon svg {
  width: 24px;
  height: 24px;
}

.product-detail__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}

.product-detail__feature-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

.product-detail__feature-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gray-500);
}

/* ---- Types grid (2×2 cards) ---- */
.product-detail__types-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.product-detail__type-card {
  background: var(--white);
  border: none;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: default;
  will-change: transform;
}

.product-detail__type-card:hover,
.product-detail__type-card.touch-hover {
  border-color: var(--orange);
}

.product-detail__type-heading {
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.product-detail__type-checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.product-detail__type-checks li {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--gray-500);
  padding-left: 34px;
  position: relative;
  min-height: 41px;
}

.product-detail__type-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(var(--orange-rgb), 0.12) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%23EA6E2D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px 14px;
}

.product-detail__types-grid--bento {
  grid-template-columns: 1fr 1fr;
}

.product-detail__types-grid--bento .product-detail__type-card:first-child {
  grid-column: 1 / -1;
}

/* --- Accordion variant inside product-detail (uklad wg transigo.framer.website) ---
   Lista typow produktu to plaskie wiersze rozdzielone hairline'ami, zamkniete
   linia od gory i od dolu. Aktywny wiersz zamienia sie w biala karte z
   pomaranczowym paskiem po lewej i wsuwa sie w prawo — patrz `.product-detail
   .worry-free__panel--active` nizej. */
.worry-free__accordion--inline {
  margin-top: 34px;
  gap: 0;
  border-top: 1px solid rgba(21, 21, 21, 0.10);
  border-bottom: 1px solid rgba(21, 21, 21, 0.10);
}

.worry-free__accordion--inline .worry-free__panel + .worry-free__panel {
  border-top: 1px solid rgba(21, 21, 21, 0.10);
}

/* Karta aktywnego wiersza sama sie oddziela — hairline nad nia i pod nia znika */
.worry-free__accordion--inline .worry-free__panel--active,
.worry-free__accordion--inline .worry-free__panel--active + .worry-free__panel {
  border-top-color: transparent;
}

.worry-free__accordion--inline .worry-free__panel-header {
  padding: 22px 0;
  gap: 20px;
  transition: padding 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.worry-free__accordion--inline .worry-free__panel--active .worry-free__panel-header {
  padding: 24px 26px 12px;
}

/* Referencja nie numeruje pozycji — numer zostaje w HTML (uzywa go glowna
   sekcja „Nie martw sie o nic"), tu jest tylko chowany. */
.worry-free__accordion--inline .worry-free__panel-number {
  display: none;
}

.worry-free__accordion--inline .worry-free__panel-title {
  font-size: 21px;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .worry-free__accordion--inline .worry-free__panel:not(.worry-free__panel--active):hover .worry-free__panel-title {
    color: var(--orange);
  }
}

.product-detail__type-checks--accordion {
  list-style: none;
  padding: 0 26px 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-detail__type-checks--accordion li {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  color: var(--gray-500);
  padding-left: 34px;
  position: relative;
  line-height: 1.5;
}

.product-detail__type-checks--accordion li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(var(--orange-rgb), 0.12) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' stroke='%23EA6E2D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px 14px;
}

/* =============================================
   RESPONSIVE — PRODUCT DETAIL
   ============================================= */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .product-detail {
    padding: 80px 24px;
  }

  .product-detail__container {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .product-detail--reversed .product-detail__container {
    grid-template-columns: 1fr;
  }

  .product-detail__content {
    display: contents;
  }

  .product-detail__label { order: 1; justify-self: start; margin-bottom: 20px; }
  .product-detail__heading { order: 2; margin-bottom: 20px; text-align: left; font-size: 36px; }
  .product-detail__subheading { order: 3; margin-bottom: 32px; text-align: left; max-width: 560px; margin-left: 0; margin-right: auto; font-size: 16px; }
  .product-detail__image-wrapper {
    order: 4;
    max-width: none;
    width: 100%;
    margin: 0 auto 40px;
    aspect-ratio: 5 / 4;
  }
  .worry-free__accordion--inline { order: 5; margin-bottom: 40px; }
  .product-detail__features { order: 6; }
  .product-detail__types-grid { order: 5; }

  .product-detail--reversed .product-detail__image-wrapper {
    order: 4;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  .product-detail {
    padding: 72px 20px;
  }

  .product-detail__heading {
    font-size: 32px;
  }

  .product-detail__subheading {
    font-size: 15px;
    margin-bottom: 32px;
  }

  /* Karta opisu schodzi POD zdjecie i lekko na nie nachodzi — pozycjonowana
     absolutnie zakrylaby na telefonie wiekszosc kadru. Wymaga to zdjecia bez
     `overflow: hidden`, wiec zaokraglenie, cien i przyciemnienie przenosza sie
     z kontenera na sam `<img>`. */
  .product-detail__image-wrapper {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }

  .product-detail__image-wrapper::after {
    display: none;
  }

  .product-detail__image {
    aspect-ratio: 5 / 4;
    height: auto;
    border-radius: 11px;
    box-shadow:
      0 24px 64px rgba(30, 30, 30, 0.10),
      0 8px 24px rgba(var(--orange-rgb), 0.06);
  }

  .product-detail__float {
    position: static;
    width: auto;
    margin: -44px 14px 0;
    padding: 22px 22px 24px;
  }

  .product-detail__float-icon {
    margin-bottom: 12px;
  }

  .product-detail__float-title {
    font-size: 17px;
  }

  .product-detail__float-text {
    font-size: 13.5px;
  }

  .worry-free__accordion--inline .worry-free__panel-title {
    font-size: 19px;
  }

  .worry-free__accordion--inline .worry-free__panel--active .worry-free__panel-header {
    padding: 20px 20px 10px;
  }

  .product-detail__type-checks--accordion {
    padding: 0 20px 20px;
  }

  .product-detail .worry-free__panel-chevron {
    width: 40px;
    height: 40px;
    padding: 11px;
  }

  .product-detail__features {
    gap: 16px;
  }

  .product-detail__feature-icon {
    width: 42px;
    height: 42px;
  }

  .product-detail__feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .product-detail__types-grid {
    gap: 12px;
  }

  .product-detail__type-card {
    padding: 22px 20px;
  }
}

/* === Narrow mobile (≤480px) === */
@media (max-width: 480px) {
  .product-detail__types-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   PRODUCT DETAIL — BRANDS VARIANT
   ============================================= */
.product-detail--brands .product-detail__container {
  grid-template-columns: 5fr 6fr;
  gap: 80px;
  align-items: center;
}

@media (min-width: 1025px) {
  .product-detail--brands .product-detail__content {
    aspect-ratio: auto;
  }
}

.product-detail--brands .product-detail__subheading {
  margin-bottom: 8px;
  font-size: 15px;
  padding-left: 22px;
}

.product-detail--brands .product-detail__desc,
.product-detail--brands .product-detail__names {
  padding-left: 22px;
}

.product-detail__badge {
  display: inline-block;
  font-family: var(--font-family);
  font-size: 20px;
  font-weight: 600;
  color: var(--orange);
  background: rgba(var(--orange-rgb), 0.08);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  margin-bottom: 20px;
  align-self: flex-start;
}

.product-detail__desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
  margin-bottom: 20px;
  max-width: 460px;
}

.product-detail__names {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-500);
  max-width: 460px;
}

.product-detail__names strong {
  font-weight: 600;
  opacity: 1;
  color: var(--dark-gray);
}

/* ---- Brands grid (right side) ---- */
.product-detail__brands-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.brands-grid__group-label {
  display: block;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: 14px;
}

.brands-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.brands-grid__group:first-child .brands-grid__cards {
  grid-template-columns: repeat(2, 1fr);
}

.brands-grid__card {
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.brands-grid__card img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

/* ---- Responsive — Brands variant ---- */
/* === Tablet (≤1024px) === */
@media (max-width: 1024px) {
  .product-detail--brands .product-detail__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-detail--brands .product-detail__content {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: flex-start;
  }

  .product-detail--brands .product-detail__label {
    order: unset;
    align-self: flex-start;
    justify-self: unset;
  }

  .product-detail--brands .product-detail__heading {
    order: unset;
    text-align: left;
  }

  .product-detail--brands .product-detail__subheading {
    order: unset;
    text-align: left;
  }

  .product-detail--brands .product-detail__badge,
  .product-detail--brands .product-detail__desc,
  .product-detail--brands .product-detail__names {
    order: unset;
    margin-left: 0;
    margin-right: auto;
  }

  .brands-grid__group-label {
    text-align: center;
  }

  .brands-grid__cards {
    max-width: none;
    width: 100%;
  }

  .brands-grid__group:first-child .brands-grid__cards {
    max-width: none;
    width: 100%;
  }

  /* Single-brand grid: keep constrained & centered on tablet/mobile */
  .brands-grid__group[style*="max-width"] {
    max-width: 60% !important;
    margin: 0 auto !important;
  }
}

/* === Mobile (≤768px) === */
@media (max-width: 768px) {
  /* The 22px indent lines this copy up with the badge pill's inner text —
     a desktop-only alignment. On mobile it reads as a stray indent next to
     the flush label/heading, so the whole column shares one left edge.
     Must stay after the base rules: same specificity, source order decides. */
  .product-detail--brands .product-detail__subheading,
  .product-detail--brands .product-detail__desc,
  .product-detail--brands .product-detail__names {
    padding-left: 0;
  }
}

/* === Small mobile (≤600px) === */
@media (max-width: 600px) {
  .brands-grid__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .brands-grid__group:first-child .brands-grid__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Single-brand grid: slightly wider on small mobile */
  .brands-grid__group[style*="max-width"] {
    max-width: 75% !important;
  }

  .brands-grid__card {
    padding: 16px;
    aspect-ratio: 3 / 2;
  }

  .brands-grid__card img {
    max-height: 36px;
  }
}


/* =============================================
   WORRY-FREE — Accordion + Image Section
   ============================================= */
.worry-free {
  padding: 100px 24px;
  background: var(--white);
}

.worry-free__container {
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.worry-free__label {
  display: inline-block;
  padding: 0;
  background: transparent;
  color: var(--dark-gray);
  border: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 0;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.worry-free__label::before { content: "// "; }
.worry-free__label { text-transform: capitalize; }

.worry-free__heading {
  font-size: 56px; /* 4px larger than .product-detail__heading (52px) on desktop */
  font-weight: var(--heading-weight);
  color: var(--black);
  margin-bottom: 56px;
  letter-spacing: -0.02em;
}

/* When heading sits inside left column (filter-tabs variant), drop bottom margin
   — spacing is handled by the filter bar's top position instead. */
.worry-free__content .worry-free__heading {
  margin: 0 0 40px;
}

.worry-free__heading span {
  background: var(--orange-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.worry-free__layout {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  align-items: start;
}

/* --- Variant: image on left instead of right (worry-free--image-left) ---
   Used on oferta-okna.html. Keeps source order (content first for SEO/a11y)
   and flips visual order via CSS grid column swap + order on image.
   Also stretches content column to image height so the bento-grid bottom
   edge aligns with the image bottom edge. */
.worry-free--image-left .worry-free__layout {
  grid-template-columns: 5fr 6fr;
  align-items: stretch;
}

.worry-free--image-left .worry-free__image {
  order: -1;
  aspect-ratio: auto;
}

.worry-free--image-left .worry-free__tabs {
  flex: 1;
  min-height: 0;
}


.worry-free--image-left .worry-free__tab {
  height: 100%;
}

/* Bento layout (desktop only): 2 flex columns × 2 flex-basis rows.
   `flex: 2 1 0` vs `flex: 1 1 0` guarantees EXACT 2:1 proportions
   (unlike grid row-spans where the row-gap gets absorbed into the spanning cell). */
.worry-free--image-left .worry-free__tab .worry-free__features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: 100%;
  padding: 0;
}

.worry-free--image-left .worry-free__col {
  display: grid;
  gap: 16px;
  min-height: 0;
  height: 100%;
}

/* Equal 1:1 row proportions — all 4 feature cards the same size. */
.worry-free--image-left .worry-free__col:nth-child(1),
.worry-free--image-left .worry-free__col:nth-child(2) {
  grid-template-rows: 1fr 1fr;
}

/* Card styling (white bg + shadow — matches .brands-grid__card from Uznani Producenci).
   Vertical stack: icon on top, title + desc below.
   Padding proportional to trust-stats card (43/335 vertical, 34/283 horizontal ratios). */
.worry-free--image-left .worry-free__feature {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 37px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  min-height: 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Scoped gap between title and desc */
.worry-free--image-left .worry-free__feature-text {
  gap: 12px;
}

/* --- Accordion Panels --- */
.worry-free__accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.worry-free__panel {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Wiersze listy typow w sekcjach product-detail — plaskie, bez tla i cienia;
   dopiero aktywny staje sie biala karta z pomaranczowym paskiem po lewej.
   To JEST kanoniczna lista `transition` dla tych paneli: regula
   `.product-detail__content .worry-free__panel` w bloku ≥1025px ma te sama
   specyficznosc (0,2,0) i jest WCZESNIEJ w pliku, wiec ta wygrywa — dlatego
   `flex-grow` musi byc na tej liscie, inaczej rozdzielanie wysokosci snapuje. */
.product-detail .worry-free__panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: flex-grow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              border-radius 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.3s ease;
}

/* Pomaranczowy pasek idzie `inset box-shadow`, a nie `border-left` — border
   zwezalby content-box i tekst skakalby w bok przy przelaczaniu. */
.product-detail .worry-free__panel--active {
  background-color: #ffffff;
  border: none;
  border-radius: 14px;
  box-shadow: inset 3px 0 0 var(--orange), 0 14px 34px -14px rgba(21, 21, 21, 0.20);
}

/* Wiersz nie jest juz karta, wiec szare tlo pod kursorem czytaloby sie jak blad
   — afordancje niesie kolor tytulu i obwodka przycisku. */
.product-detail .worry-free__panel:not(.worry-free__panel--active):hover {
  background: transparent;
}

/* ---- Okragly przycisk rozwijania (w referencji strzalka w kolku) ---- */
.product-detail .worry-free__panel-chevron {
  width: 46px;
  height: 46px;
  padding: 13px;
  box-sizing: border-box;
  border: 1.5px solid rgba(21, 21, 21, 0.14);
  border-radius: var(--radius-full);
  color: var(--dark-gray);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
  .product-detail .worry-free__panel:not(.worry-free__panel--active):hover .worry-free__panel-chevron {
    border-color: rgba(21, 21, 21, 0.36);
  }
}

.product-detail .worry-free__panel--active .worry-free__panel-chevron {
  background-color: var(--orange);
  border-color: transparent;
  color: #ffffff;
  transform: rotate(180deg);
}

.worry-free__panel--active {
  border-color: var(--orange);
  box-shadow: 0 4px 24px rgba(var(--orange-rgb), 0.12);
}

.worry-free__panel-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.2s ease;
}

.worry-free__panel:not(.worry-free__panel--active) {
  cursor: pointer;
}

.worry-free__panel:not(.worry-free__panel--active):hover {
  background: rgba(0, 0, 0, 0.02);
}

.worry-free__panel-header:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.worry-free__panel-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.worry-free__panel-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.05em;
}

.worry-free__panel-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--black);
  letter-spacing: -0.01em;
}

.worry-free__panel-chevron {
  width: 20px;
  height: 20px;
  color: var(--gray-500);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
  flex-shrink: 0;
}

.worry-free__panel--active .worry-free__panel-header {
  cursor: default;
}

.worry-free__panel--active .worry-free__panel-chevron {
  transform: rotate(180deg);
  color: var(--orange);
}

/* --- Panel Body (collapsible) --- */
/* max-height is set via JS to actual scrollHeight for synchronized open/close */
.worry-free__panel-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Features Grid (2 columns) --- */
.worry-free__features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 24px 24px 48px;
}

.worry-free__feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.worry-free__feature-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.4), rgba(var(--orange-end-rgb), 0.4));
  color: var(--orange);
}

.worry-free__feature-icon svg {
  width: 22px;
  height: 22px;
}

.worry-free__feature-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.worry-free__feature-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

/* Desktop bump on image-left variant (oferta-okna): title +2px, desc +1px */
@media (min-width: 1025px) {
  .worry-free--image-left .worry-free__feature-title {
    font-size: 18px;
  }
  .worry-free--image-left .worry-free__feature-desc {
    font-size: 15px;
  }
}

.worry-free__feature-desc {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-500);
  line-height: 1.5;
}

/* --- Right Image (matches product-detail__image-wrapper) --- */
.worry-free__image {
  position: sticky;
  top: 120px;
  border-radius: 11px;
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  aspect-ratio: 4 / 5;
  background: var(--dark-bg);
  box-shadow:
    0 24px 64px rgba(30, 30, 30, 0.10),
    0 8px 24px rgba(var(--orange-rgb), 0.06);
}

.worry-free__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(30, 30, 30, 0.25) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: 11px;
  z-index: 1;
}

.worry-free__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.worry-free__img--active {
  opacity: 1;
}

/* --- Floating badge on image (mirrors .showroom__badge from showroom.css) --- */
.worry-free__badge {
  position: absolute;
  bottom: 28px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 26px;
  background: linear-gradient(135deg, rgba(var(--orange-rgb), 0.35), rgba(var(--orange-end-rgb), 0.35));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-radius: 10px;
  z-index: 2;
  animation: worry-free-float 3s ease-in-out infinite;
  will-change: transform;
}

.worry-free__badge-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 246, 244, 0.3);
  border-radius: 50%;
  color: var(--white);
}

.worry-free__badge-icon svg {
  width: 26px;
  height: 26px;
}

.worry-free__badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.worry-free__badge-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.3;
}

.worry-free__badge-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

@keyframes worry-free-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* =============================================
   WORRY-FREE — Filter Tabs variant
   Used on oferta-okna.html in place of the accordion.
   Does NOT affect worry-free__accordion--inline (product-detail sections).
   ============================================= */

/* Left column wrapper — heading + filter + tab panels */
.worry-free__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Filter bar — matches navbar__dropdown-filters exactly */
.worry-free__filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 40px;
  background: #ECEBDF;
  border-radius: var(--radius-md);
}

.worry-free__filter {
  flex: 1;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  padding: 10.5px 15px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--dark-gray);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.worry-free__filter:hover {
  background: #E6E0D9;
  color: var(--dark-gray);
}

.worry-free__filter:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}

.worry-free__filter.active {
  background: var(--orange-gradient);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(var(--orange-rgb), 0.25);
}

/* Tab panels — stacked in same grid cell so only the active one is visible */
.worry-free__tabs {
  display: grid;
  position: relative;
}

.worry-free__tab {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

.worry-free__tab.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Reset features-grid padding inside new tab panels
   (was 24px 24px 48px when wrapped in accordion panel-body) */
.worry-free__tab .worry-free__features-grid {
  padding: 0;
}

/* Stagger features on tab switch — replays every time is-active is (re)added.
   Reading order: TL → TR → BL → BR (col1.child1, col2.child1, col1.child2, col2.child2). */
.worry-free__tab.is-active .worry-free__feature {
  animation: worryFeatureIn 0.4s ease both;
}
.worry-free__tab.is-active .worry-free__col:nth-child(1) .worry-free__feature:nth-child(1) { animation-delay: 50ms; }
.worry-free__tab.is-active .worry-free__col:nth-child(2) .worry-free__feature:nth-child(1) { animation-delay: 90ms; }
.worry-free__tab.is-active .worry-free__col:nth-child(1) .worry-free__feature:nth-child(2) { animation-delay: 130ms; }
.worry-free__tab.is-active .worry-free__col:nth-child(2) .worry-free__feature:nth-child(2) { animation-delay: 170ms; }
/* Fallback for flat (no col) structure — still used by other oferta pages */
.worry-free__tab.is-active > .worry-free__features-grid > .worry-free__feature:nth-child(1) { animation-delay: 50ms; }
.worry-free__tab.is-active > .worry-free__features-grid > .worry-free__feature:nth-child(2) { animation-delay: 90ms; }
.worry-free__tab.is-active > .worry-free__features-grid > .worry-free__feature:nth-child(3) { animation-delay: 130ms; }
.worry-free__tab.is-active > .worry-free__features-grid > .worry-free__feature:nth-child(4) { animation-delay: 170ms; }

@keyframes worryFeatureIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .worry-free {
    padding: 80px 24px;
  }

  .worry-free__heading {
    font-size: 36px; /* matches .product-detail__heading at ≤1024px */
    margin-bottom: 40px;
  }

  .worry-free__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .worry-free__image {
    position: relative;
    top: auto;
    aspect-ratio: 4 / 3;
    order: -1;
  }

  .worry-free__features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .worry-free__content .worry-free__heading {
    margin-bottom: 28px;
  }

  /* Tablet/mobile: the filter bar sticks under the navbar while the tab panel
     scrolls past, so switching category never means scrolling back up.
     Sticks within .worry-free__content (its offset parent), i.e. it releases at
     the end of the tab panels. 84px = tablet navbar top (14) + height (58) + 12
     gap; the ≤768px block re-tops it to 80 for the smaller mobile navbar. The
     promo bar is in flow here, so it has scrolled away by this section and
     common.js has released its navbar offset.
     No halo/backdrop around the pill — it is a bare overlay, so the cards pass
     directly under its edges (deliberate; a section-coloured box-shadow spread
     was tried and read as a big band of background around the bar).
     The bar parks flush with the end of the last card — its BOTTOM edge lands on
     the card's bottom edge. That is the natural end of the sticky run, but only
     because the gap under the bar lives on `.worry-free__tabs` margin-TOP rather
     than the bar's own margin-bottom (which is zeroed here): sticky shrinks the
     constraint rect by the element's own margins, so a margin-bottom would stop
     the bar that much higher, leaving it floating above the last card. */
  .worry-free__filters {
    margin-bottom: 0;
    position: sticky;
    top: 84px;
    z-index: 5;
  }

  .worry-free__tabs {
    margin-top: 32px;
  }

  /* Tablet/mobile: no height-matching. Cards get natural sizes.
     These must stay scoped to .worry-free--image-left — the unscoped
     .worry-free__layout / .worry-free__image resets above lose on specificity. */
  .worry-free--image-left .worry-free__layout {
    grid-template-columns: 1fr;
    align-items: start;
  }
  /* .worry-free__img is position:absolute, so the box has no intrinsic height —
     the desktop `aspect-ratio: auto` (stretched to the content column) must be
     replaced by an explicit ratio here or the image collapses to 0px. */
  .worry-free--image-left .worry-free__image {
    aspect-ratio: 4 / 3;
  }
  .worry-free--image-left .worry-free__tab .worry-free__features-grid {
    height: auto;
  }
  .worry-free--image-left .worry-free__col,
  .worry-free--image-left .worry-free__col:nth-child(1),
  .worry-free--image-left .worry-free__col:nth-child(2) {
    height: auto;
    grid-template-rows: auto auto; /* natural heights, no 2:1 ratio */
  }

  .worry-free__badge {
    bottom: 22px;
    right: 18px;
    padding: 14px 20px;
    gap: 13px;
    border-radius: 9px;
  }

  .worry-free__badge-icon {
    width: 42px;
    height: 42px;
  }

  .worry-free__badge-icon svg {
    width: 22px;
    height: 22px;
  }

  .worry-free__badge-label {
    font-size: 14px;
  }

  .worry-free__badge-value {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .worry-free {
    padding: 60px 16px;
  }

  .worry-free__heading {
    font-size: 32px; /* matches .product-detail__heading at ≤768px */
    margin-bottom: 32px;
  }

  .worry-free__panel-header {
    padding: 16px 18px;
  }

  .worry-free__panel-title {
    font-size: 17px;
  }

  .worry-free__features-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 4px 18px 20px;
  }

  .worry-free__feature-icon {
    width: 40px;
    height: 40px;
  }

  .worry-free__feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .worry-free__image {
    aspect-ratio: 4 / 3;
  }

  /* Collapse the bento to a single column. Scoped to --image-left because the
     unscoped .worry-free__features-grid rule above cannot beat
     `.worry-free--image-left .worry-free__tab .worry-free__features-grid`. */
  .worry-free--image-left .worry-free__tab .worry-free__features-grid {
    grid-template-columns: 1fr;
  }

  .worry-free__content .worry-free__heading {
    margin-bottom: 24px;
  }

  .worry-free__filters {
    /* Mobile navbar is top 12 + height 56 = 68, so 12px of clearance. */
    top: 80px;
  }

  .worry-free__tabs {
    margin-top: 28px;
  }

  .worry-free__filter {
    font-size: 14px;
    padding: 9px 10px;
  }

  .worry-free__badge {
    bottom: 18px;
    right: 14px;
    padding: 11px 16px;
    gap: 10px;
    border-radius: 7px;
  }

  .worry-free__badge-icon {
    width: 36px;
    height: 36px;
  }

  .worry-free__badge-icon svg {
    width: 18px;
    height: 18px;
  }

  .worry-free__badge-label {
    font-size: 12px;
  }

  .worry-free__badge-value {
    font-size: 17px;
  }
}


/* =============================================
   WORRY-FREE — wariant STOSU KART (.worry-free--stack)
   Odwzorowanie ukladu z funnex.framer.website (sekcja "Proven Results"),
   przelozone na nasza palete. Zastepuje wariant z paskiem filtrow:
   4 zakladki -> 4 karty, ktore nasuwaja sie na siebie przy przewijaniu.

   MECHANIKA — czysty `position: sticky`, ZERO JS i ZERO GSAP (wzorzec tez
   nie uzywa skryptu; sprawdzone pomiarem na zywej stronie):
   kazda karta przykleja sie o 20px nizej od poprzedniej, wiec nad nia
   zostaje 20px paska. O tym, ze kolejna karta ZAKRYWA poprzednia, decyduje
   wylacznie kolejnosc w DOM — `z-index` jest jednakowy i nie wolno go tu
   dodawac per karta (u wzorca tez go nie ma).

   Wysokosc `.worry-free__stack` = suma kart + odstepy, BEZ spacera na koncu
   — dlatego ostatnia karta dojezdza i od razu odplywa razem z reszta stosu,
   dokladnie jak we wzorcu. Jesli kiedys ma "postac" chwile sama, dodaj
   `::after` z wysokoscia (wzorzec: `.process-stack__cards::after`).

   UWAGA: zaden przodek karty nie moze dostac `transform` — to zabija sticky.
   Z tego powodu karty NIE maja animacji wejscia (wzorzec tez nie ma —
   zmierzone: `transform: none`, `opacity: 1` przez cale przewijanie).
   Wjazd przy przewijaniu maja tylko label i naglowek, przez istniejacy
   modul "Offer Pages Reveal" w common.js.
   ============================================= */

/* Naglowek jest PRZYKLEJONY nad stosem i zostaje widoczny przez cala sekcje
   (zyczenie klienta — wczesniej znikal pod pierwsza karta).
   Trzy rzeczy sa tu konieczne, nie kosmetyczne:
   1. `z-index: 2` — karty sa pozniej w DOM i bez tego malowalyby sie NA
      naglowku (maja `z-index: auto`, wiec decyduje kolejnosc w zrodle);
   2. `background` w kolorze sekcji — karta wjezdza POD naglowek, a tekst bez
      tla bylby czytany na przesuwajacej sie bialej karcie;
   3. `padding-bottom` — pas tla, pod ktorym karta znika czysto, zamiast
      dotykac liter. */
.worry-free--stack .worry-free__header {
  position: sticky;
  top: calc(var(--navbar-height) + 28px);
  z-index: 2;
  padding-bottom: 20px;
  margin-bottom: 12px;
  background: var(--white);
  /* Uklad przepisany 1:1 z `.testimonials__container` (sekcja „Opinie") —
     klient wskazal ja jako wzorzec. Stad `1fr 1fr` + `gap: 0 80px`, a nie
     wlasne proporcje: przy `minmax(0, 420px)` kolumna opisu byla za szeroka
     i naglowek z subheadingiem czytaly sie jak dwa niezalezne bloki.
     `align-items: start` — patrz gotcha „Naglowek + opis w gridzie": przy
     `end` nizsza kolumna opada i gorne krawedzie sie rozjezdzaja. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 80px;
  align-items: start;
}

.worry-free--stack .worry-free__label {
  grid-column: 1;
  grid-row: 1;
}

/* Wartosci 1:1 z `.testimonials__subheading` — nie stroj ich osobno,
   sekcja ma czytac sie identycznie jak „Opinie". */
.worry-free--stack .worry-free__subheading {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  max-width: 380px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--gray-500);
}

/* Pasek tla MUSI byc na pelna szerokosc kontenera, a nie na szerokosc tekstu:
   pod koniec sekcji stos zwalnia sie i karty wysuwaja sie w gore POD naglowek.
   Przy `max-width` na samym naglowku karta wystawala obok kremowego paska i
   wygladalo to, jakby ucinala ja niewidoczna linia. Szerokosc ogranicza wiec
   sam naglowek, nie jego tlo. */
.worry-free--stack .worry-free__heading {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  line-height: 1.15; /* jak `.testimonials__heading` — baza nie ustawia line-height */
}

.worry-free__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Krok 20px na karte — ta sama konwencja `top` co `.process-card`
   (process.css), zeby oba stosy na tej samej stronie parkowaly rowno. */
/* Karta dokuje POD przyklejonym naglowkiem, dlatego w `top` jest jego zmierzona
   wysokosc. `--wf-head-h` ustawia modul "Worry-Free Stack Scale" (common.js) —
   naglowek ma zmienna wysokosc (1 albo 2 linie, inne rozmiary na tablecie),
   wiec nie da sie tego zapisac stala. Fallback 150px = typowa wysokosc na
   desktopie, zeby uklad byl poprawny takze zanim JS zdazy zmierzyc. */
.worry-free__card {
  position: sticky;
  top: calc(var(--navbar-height) + 28px + var(--wf-head-h, 150px) + 12px + var(--wf-stack-offset, 0px));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: stretch;
  min-height: 520px;
  padding: 48px;
  background: #ffffff;
  border-radius: 24px;
  /* Powierzchnia karty jest PRZEPISANA 1:1 z `.process-card` (process.css):
     samo biale tlo + jeden czysty spadek cienia w dol, BEZ obrysu.
     Nie dodawaj tu z powrotem ani hairline'u, ani warstwy cienia z ujemnym
     `y` — obie tu byly i obie klient odrzucil (ujemne `y` malowalo szara
     smuge nad zaokraglonym rogiem karty). Linie nachodzenia dwoch bialych
     kart rysuje cien karty zakrywajacej, dokladnie jak w „Procesie". */
  box-shadow: 0 10px 30px -18px rgba(21, 21, 21, 0.18);
  /* Kotwica skalowania (modul "Worry-Free Stack Scale" w common.js) — GORNA
     krawedz, a nie srodek. Przy srodku karta zmniejszona do 0.8 opada o ~47px,
     czyli o wiecej niz 20px kroku stosu, i chowa sie CALKOWICIE za nastepna.
     Przy kotwicy u gory pasek nad kolejna karta zostaje i tylko sie zweza.
     `transform` NIE ma tu przejscia — jest pisany co klatke ze scrolla. */
  transform-origin: 50% 0;
}

.worry-free__card:nth-child(1) { --wf-stack-offset: 0px; }
.worry-free__card:nth-child(2) { --wf-stack-offset: 26px; }
.worry-free__card:nth-child(3) { --wf-stack-offset: 52px; }
.worry-free__card:nth-child(4) { --wf-stack-offset: 78px; }

/* Odstep naglowek+opis -> punkty. Do 2026-07-30 bylo 56px, bo pod spodem stal
   blok dwoch kafli statystyk (osobna „skrzynka"); lista z ptaszkami jest
   czescia tej samej kolumny tekstu, wiec przy 56px robila sie dziura. */
.worry-free__card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 36px;
  min-width: 0;
}

.worry-free__card-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.worry-free__card-title {
  font-size: 36px;
  font-weight: var(--heading-weight);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--dark-gray);
}

/* Opis kart jest CIEMNIEJSZY niz zwykly tekst pomocniczy (`--gray-500`):
   to glowna tresc sekcji, a nie podpis, wiec ma sie czytac jak akapit. */
.worry-free__card-desc {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(21, 21, 21, 0.72);
}

/* Punkty karty — pomaranczowy ptaszek na jasnym, kwadratowym kaflu; punktor
   przepisany 1:1 z sekcji „Proces Wspolpracy" (`.process__value-icon`,
   process.css). TRESC JEST TYMCZASOWA: kazdy punkt ma `data-wf-point`, zeby
   dalo sie je znalezc jednym grepem przy podmianie.

   Klasy sa WLASNE, a nie reuzywane z process.css — tamten arkusz laduje sie tu
   asynchronicznie, wiec podpiecie sie pod jego reguly dawaloby wyscig o styl.
   Skopiowane sa wylacznie wartosci i sam SVG (`polyline`, `stroke-width: 2.5`).
   (Do v163 byla tu BIALA ikona na PELNEJ pomaranczowej rozecie — punktor
   z `.cta-banner--dark`; klient wskazal „Proces" jako nowy wzorzec.)

   (Do 2026-07-30 byly tu DWA kafle statystyk `.worry-free__stat` z duza liczba
   i podpisem — usuniete na zyczenie klienta razem z ich markupem na 19
   stronach.) */
.worry-free__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* 18px jak `.process__values` — przy kaflu 32px ciasniejszy odstep sklejalby
     punktory w jedna pionowa kolumne plam. */
  gap: 18px;
}

.worry-free__point {
  display: flex;
  /* `flex-start`, a NIE `baseline` — linia bazowa elementu zastepowanego (SVG)
     to jego dolna krawedz, wiec przy `baseline` plakietka wystawalaby ponad
     linie tekstu. Pionowe wysrodkowanie wzgledem PIERWSZEJ linii robi
     `margin-top` na samej ikonie (patrz nizej). */
  align-items: flex-start;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dark-gray);
}

.worry-free__check {
  --check-size: 32px;
  flex-shrink: 0;
  width: var(--check-size);
  height: var(--check-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(var(--orange-rgb), 0.12);
  color: var(--orange);
  /* Ikona jest WYZSZA niz linia tekstu (32px vs 1.5em = 25.5px), wiec formula
     daje ujemny margines — i tak ma byc: kafel jest wtedy wysrodkowany
     wzgledem PIERWSZEJ linii, a nie zawieszony pod nia. `1.5em` to
     `line-height` punktu, wiec to samo dziala na obu breakpointach. Rozmiar
     idzie WYLACZNIE przez `--check-size` — nie wpisuj `width`/`height` na
     sztywno, bo rozjedzie sie wyrownanie. */
  margin-top: calc((1.5em - var(--check-size)) / 2);
}

/* Polowa kafla — ta sama proporcja co w „Procesie" (16px w kaflu 32px),
   wiec mniejszy kafel na telefonie skaluje ptaszka sam. */
.worry-free__check svg {
  display: block;
  width: 50%;
  height: 50%;
}

/* Zdjecie WYPELNIA rozciagnieta komorke gridu, ale samo NIE wnosi wysokosci
   — dlatego `<img>` jest `position: absolute`. Przy `height: 100%` w komorce
   o nieokreslonej wysokosci przegladarka schodzi na `auto` i karta rosnie do
   naturalnej wysokosci zdjecia (zmierzone: 856–955px zamiast ~470). */
.worry-free__card-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #DDD6CC;
  min-height: 364px;
}

.worry-free__card-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rowne odstepy w kolumnie tekstu: gora karty -> tytul, opis -> punkty,
   punkty -> dol karty. Zyczenie klienta („rowna przerwa od subheadingu i dolnej
   krawedzi okienka") — przy `justify-content: center` + staly `gap` te odstepy
   byly 107 / 36 / 107px, bo cala tresc byla wysrodkowana jako jeden blok.

   Dwie rzeczy dzialaja tu razem i zadnej nie da sie pominac:
   1. `margin-block: -48px` (= pionowy padding karty) rozciaga kolumne na PELNA
      wysokosc karty, wiec padding wchodzi do puli dzielonego miejsca — bez tego
      odstepy do krawedzi zawsze byly by o te 48px wieksze od srodkowego;
   2. `space-evenly` + `gap: 0` dzieli wolne miejsce na trzy IDENTYCZNE czesci.
      `gap` MUSI byc zerowy — przy niezerowym doliczylby sie tylko do odstepu
      SRODKOWEGO i rownosc znow by sie rozjechala.
   Rownosc utrzymuje sie sama przy roznej dlugosci tekstu (karty maja 2 albo 3
   linie opisu), czego staly `gap` nie potrafi.

   Zakres: tylko wysokie okna desktopowe. Ponizej 831px karta traci
   `min-height`, wiec tresc wypelnia ja co do piksela i odstepy sa juz rowne
   (oba = padding); ponizej 1025px uklad jest jednokolumnowy i statyczny. */
@media (min-width: 1025px) and (min-height: 831px) {
  .worry-free__card-content {
    margin-block: -48px;
    justify-content: space-evenly;
    gap: 0;
  }
}

/* Niskie okna laptopowe (720–820px): przyklejony naglowek zjada ~155px, wiec
   karta 520px nie zmiescilaby sie w kadrze i jej dol bylby stale ucienty.
   Tu wysokosc karty wyznacza sama tresc (~470px), co przywraca zapas. */
@media (min-width: 1025px) and (max-height: 830px) {
  .worry-free--stack .worry-free__header {
    top: calc(var(--navbar-height) + 14px);
    padding-bottom: 12px;
  }

  .worry-free__card {
    min-height: 0;
    padding: 32px;
  }

  /* Tekst kart zostaje w pelnym rozmiarze — zamiast go zmniejszac odzyskujemy
     miejsce na odstepach, zeby dol ostatniej karty byl jak najblizej kadru.
     Ten sam zabieg co w bloku wyzej, tylko z paddingiem 32px. Karta nie ma tu
     `min-height`, ale wysokosc i tak wyznacza zdjecie (`min-height: 364px`),
     wiec wolne miejsce w kolumnie tekstu jest — bez tego odstepy wychodzily
     52 / 32 / 52px. */
  .worry-free__card-content {
    margin-block: -32px;
    justify-content: space-evenly;
    gap: 0;
  }

  .worry-free__points {
    gap: 12px;
  }
}

/* --- Responsive (wariant stosu) ---
   Ponizej 1025px sticky jest WYLACZONE: karta schodzi do jednej kolumny,
   wiec rosnie na tyle, ze stos nie miescilby sie w oknie telefonu.
   Ta sama zasada co w `.process--stack` (tam prog to 1200px). */
@media (max-width: 1024px) {
  /* Ponizej 1025px karty nie sa przyklejone, wiec przyklejony naglowek nie ma
     czego „pilnowac" — zjadalby tylko wysokosc ekranu na telefonie. */
  .worry-free--stack .worry-free__header {
    position: static;
    z-index: auto;
    padding-bottom: 0;
    margin-bottom: 40px;
    background: none;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }

  /* Jedna kolumna — subheading schodzi POD naglowek. Bez wyzerowania
     `grid-column`/`grid-row` siedzialby dalej w nieistniejacej 2. kolumnie. */
  .worry-free--stack .worry-free__subheading {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: none;
    font-size: 17px;
  }

  .worry-free__stack {
    gap: 20px;
  }

  .worry-free__card {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    min-height: 0;
    padding: 32px;
  }

  .worry-free__card-media {
    order: -1;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .worry-free__card-content {
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .worry-free__card {
    padding: 24px;
    border-radius: 18px;
  }

  /* FIX Safari/WebKit: zdjecie karty mialo ZEROWA wysokosc, wiec sekcja
     renderowala sie na telefonie CALKIEM BEZ zdjecia (zgloszenie klienta ze
     zrzutu — karta zaczynala sie od naglowka, a nad nim byla sama przerwa 52px
     = padding 24 + gap 28).

     Przyczyna: `.worry-free__card-media` jest elementem gridu, karta ma
     `align-items: stretch`, a JEDYNA tresc media to `<img position: absolute>`,
     czyli nic w przeplywie. WebKit wyznacza wtedy wysokosc wiersza z tresci
     w przeplywie (0) i rozciaga do niej element, IGNORUJAC `aspect-ratio`.
     Chromium najpierw liczy wysokosc z proporcji i dopiero potem uklada wiersz —
     dlatego bledu NIE widac w testach na Chromium i przeszedl on niezauwazony.
     `align-self: start` wyjmuje media z rozciagania, wiec wysokosc pochodzi
     wylacznie z `aspect-ratio` i wychodzi tak samo w obu silnikach.

     Zmierzone @390px — WebKit: media 0 → 194px, karta 451 → 644px; Chromium bez
     zmian (194 / 644). **UWAGA: ta sama pulapka siedzi w bloku `≤1024px`**
     (tam jest `aspect-ratio` i `min-height: 0`), wiec tablet 769–1024px w Safari
     nadal renderuje sie bez zdjecia — poprawka tam to ta sama jedna linia. */
  .worry-free__card-media {
    align-self: start;
  }

  /* Karta jest tu wysokosci tresci, wiec o odstepie pod punktami decyduje sam
     padding — `gap` musi byc mu rowny, zeby przerwa nad lista i pod nia byly
     takie same. */
  .worry-free__card-content {
    gap: 24px;
  }

  .worry-free__card-title {
    font-size: 28px;
  }

  .worry-free__card-desc {
    font-size: 16px;
  }

  .worry-free__points {
    gap: 12px;
  }

  .worry-free__point {
    font-size: 15px;
    gap: 14px;
  }

  .worry-free__check {
    --check-size: 28px;
  }
}


/* =============================================
   PRODUCT CARD VARIANT — Cross-section overflow
   Used on: oferta-okna.html services section
   ============================================= */
.offer-page .services {
  overflow: visible;
}

.offer-page .services--product .services__grid {
  gap: 24px;
  overflow: visible;
  padding-top: 100px;
  width: 100%;
}

/* Card base */
.offer-page .services__card.services__card--product {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  background: #FFFFFF;
  border: none;
  border-radius: var(--radius-xl);
  padding: 0 24px 34px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: visible;
  min-height: auto;
  /* `opacity` + `translate` obsluguja WEJSCIE karty (blok "WEJSCIA PRZY
     PRZEWIJANIU" na koncu pliku). Musza byc TU, w tej regule: gdyby regula
     revealu podala wlasny `transition`, shorthand skasowalby hover na
     `transform` i `box-shadow`. Z tego samego powodu reveal jedzie na
     `translate`, a nie `transform` — ten drugi nalezy do hover-liftu. */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity var(--eo-reveal-dur, 0.7s) var(--eo-ease, ease-out),
              translate var(--eo-reveal-dur, 0.7s) var(--eo-ease, ease-out);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.offer-page .services__card--product:hover,
.offer-page .services__card--product.touch-hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.offer-page .services__card--product:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* Product cross-section image — overflows upward */
.services__card-product-img {
  flex-shrink: 0;
  width: 88%;
  max-width: 400px;
  aspect-ratio: 300 / 260;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translate(35%, calc(-45% + 8px));
  margin-bottom: -38%;
  pointer-events: none;
}

.services__card-product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.offer-page .services__card--product:hover .services__card-product-img img,
.offer-page .services__card--product.touch-hover .services__card-product-img img {
  transform: translateY(-6px) scale(1.03);
}

/* Text block */
.services__card-product-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 0 34px;
  justify-self: start;
  align-self: end;
}

.services__card-product-category {
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 500;
  color: var(--gray-500);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.services__card-product-name {
  font-family: var(--font-family);
  font-size: 28px;
  font-weight: 600;
  color: var(--dark-gray);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Arrow indicator */
.offer-page .services__card--product::after {
  content: '';
  position: absolute;
  right: 24px;
  bottom: 20px;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e1e1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7'/%3E%3Cpath d='M7 7h10v10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.offer-page .services__card--product:hover::after,
.offer-page .services__card--product.touch-hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Trzecia kolumna na desktopie 1025–1599px: przekroj wystaje w prawo poza
   viewport (body ma overflow-x: clip, wiec jest UCINANY — zmierzono 5–51px
   na kartach standardowych; szerokie ekrany ≥1600px maja margines, ktory
   jut absorbuje). Korekta idzie na WLASNOSC `translate`, nie na `transform`:
   sklada sie z per-stronowymi kalibracjami translate(...) scale(...) w
   inline'owych <style> (drzwi/ogrodzenia-przemyslowe), zamiast je nadpisywac.
   Specyficznosc celowo (0,4,0) — inline'owe bloki stron moga to przebic
   ta sama specyficznoscia + kolejnoscia (strony z wiekszymi obrazami daja
   wieksza korekte u siebie). */
@media (min-width: 1025px) and (max-width: 1599px) {
  .offer-page .services__card--product:nth-child(3) .services__card-product-img {
    translate: -56px 0;
  }
}

/* Landscape product images (gates/bramy) — adjust positioning for wider images */
.services--landscape .services__card-product-img {
  aspect-ratio: 300 / 220;
  transform: translate(25%, calc(-30% + 8px));
  margin-bottom: -25%;
}

/* =============================================
   PRODUCT CARDS — carousel prev/next arrows
   Markup is injected by js/common.js (the carousel is swipeable without JS, so the
   arrows are a pure enhancement). common.js sets [hidden] whenever the grid isn't
   actually scrollable — including desktop, where the grid overflows visually but
   cannot be scrolled.
   ============================================= */
.offer-carousel-nav {
  display: none;
}

@media (max-width: 1024px) {
  .offer-carousel-nav {
    display: flex;
    grid-column: 1 / -1;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
  }
}

/* Attribute selector (0,2,0) beats the display:flex above (0,1,0) at any source order */
.offer-carousel-nav[hidden] {
  display: none;
}

/* Filled dark pill, matching `.montage .marquee-nav__btn` (montage.css) so every
   carousel control on the site reads as the same component. */
.offer-carousel-nav__btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: #151515;
  color: var(--white);
  cursor: pointer;
  /* Kills the browser's default tap rectangle — it paints the element's box on touch
     and reads as "a link is opening". Same fix as `.services__card` (services.css v29). */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.offer-carousel-nav__btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Hover feedback is pointer-only. Touch browsers latch :hover onto the last touched
   element and never clear it, so an ungated :hover left an arrow stuck orange after a
   tap — and it read as if swiping the cards lit the arrows up. On touch the highlight
   comes from .touch-hover instead, which common.js holds only for the press itself. */
@media (hover: hover) {
  .offer-carousel-nav__btn:hover:not(:disabled) {
    background: #2a2a2a;
  }
}

.offer-carousel-nav__btn.touch-hover:not(:disabled) {
  background: #2a2a2a;
}

.offer-carousel-nav__btn:active:not(:disabled) {
  transform: scale(0.94);
}

.offer-carousel-nav__btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

.offer-carousel-nav__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* =============================================
   RESPONSIVE — PRODUCT CARDS
   ============================================= */
@media (max-width: 1024px) {
  .offer-page .services.services--product {
    overflow: visible;
  }

  .offer-page .services.services--product .services__container {
    overflow: visible;
  }

  .offer-page .services.services--product .services__subheading {
    margin-bottom: 0;
  }

  .offer-page .services.services--product .services__grid#offer-types-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: max(100px, 14vw) 0 40px 0;
    margin-left: -24px;
    margin-right: -24px;
    max-width: none;
    scroll-padding-left: 24px;
    scrollbar-width: none;
  }

  .offer-page .services.services--product .services__grid#offer-types-grid::before {
    content: '';
    flex: 0 0 24px;
    height: 1px;
  }

  .offer-page .services.services--product .services__grid#offer-types-grid::after {
    content: '';
    flex: 0 0 24px;
    height: 1px;
  }

  .offer-page .services.services--product .services__grid#offer-types-grid::-webkit-scrollbar {
    display: none;
  }

  .offer-page .services__card.services__card--product {
    display: flex;
    flex: 0 0 44vw;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0 24px 24px;
    scroll-snap-align: start;
    min-width: 0;
    min-height: 132px;
    position: relative;
    overflow: visible;
  }

  .services__card-product-img {
    width: 44%;
    max-width: none;
    aspect-ratio: auto;
    height: auto;
    flex-shrink: 0;
    margin: 0;
    position: absolute;
    right: -4px;
    top: 0;
    transform: translateY(calc(-50% + 16px));
    pointer-events: none;
  }

  .services__card-product-text {
    padding: 0;
    position: relative;
    z-index: 1;
    text-align: left;
    align-self: flex-start;
    justify-self: auto;
  }

  .services__card-product-name {
    font-size: 24px;
  }

  .services__card-product-category {
    font-size: 13px;
  }

  .offer-page .services__card--product::after {
    display: none;
  }

  .services--landscape .services__card-product-img {
    width: 60%;
    max-width: 265px;
    aspect-ratio: auto;
    transform: translateY(calc(-40% + 16px));
  }
}

@media (max-width: 767px) {
  .offer-page .services.services--product .services__subheading {
    margin-bottom: 20px;
  }

  /* The section carries an inline style="padding-bottom:160px" — a desktop rhythm that
     on a phone left ~200px of dead space under the carousel (nothing renders there).
     !important is the only way to beat an inline style. The arrows now occupy part of
     what's left. Top padding is untouched: the gap above the cards is only ~56px, and
     the 80px above that is the overhanging image, i.e. content — not padding. */
  .offer-page .services.services--product {
    padding-bottom: 48px !important;
  }

  .offer-page .services.services--product .services__grid#offer-types-grid {
    padding-bottom: 20px;
  }

  .offer-page .services__card.services__card--product {
    flex: 0 0 80vw;
  }

  .offer-page .services.services--product .services__grid#offer-types-grid::after {
    flex: 0 0 calc(20vw - 16px);
  }

  .services__card-product-name {
    font-size: 20px;
  }

  .services__card-product-category {
    font-size: 12px;
  }

  .services--landscape .services__card-product-img {
    width: 265px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .offer-page .services__card.services__card--product {
    flex: 0 0 80vw;
  }

  .services__card-product-img {
    width: 60%;
  }

  .services--landscape .services__card-product-img {
    width: 265px;
  }

  .services__card-product-name {
    font-size: 20px;
  }

  .services__card-product-category {
    font-size: 12px;
  }
}

/* Section badge prefix "// " */
.product-detail__label::before { content: "// "; }
.product-detail__label { text-transform: capitalize; }

/* =============================================
   WEJSCIA PRZY PRZEWIJANIU — SEKCJE STRON OFERTY

   Ten sam system co na stronie glownej i na /o-nas: element odslania sie
   w chwili, gdy SAM wjedzie w kadr (klasa `.is-revealed` z modulu
   "Offer Pages Reveal" w common.js), a nie po uplywie czasu od wejscia
   sekcji. W CSS nie ma tu ZADNEGO `transition-delay` — rozsuwaniem
   elementow, ktore wpadna w JEDNEJ klatce, zajmuje sie `eoStagger`.

   Ruch przepisany 1:1 z hero: 0.7s `ease-out`, 30px. NIE wracaj tu do
   `--reveal-ease` z base.css — to expo-out, ktory upycha ~90% drogi
   w ~20% czasu i czyta sie jak szarpniecie.
   Zasada klienta: NIC nie wjezdza z gory.

   DLACZEGO WSZYSTKO SIEDZI W TYM PLIKU, a nie w services.css / cta-banner.css
   / showroom.css: kazda z tych piatki sekcji renderuje sie WYLACZNIE na
   stronach oferty (sprawdzone po `pages/`: `.services--product` 13 stron,
   `.product-detail` i `.worry-free` 19, `.cta-banner` w wariancie ze
   statystykami 19, `.showroom` bez `--bento` 8). offer-page.css laduja
   dokladnie te 19 stron, wiec jeden plik = jeden bump `?v=` i zero ryzyka,
   ze cokolwiek wycieknie na hero.html albo /o-nas. Precedens jest w tym pliku
   od dawna — nadpisania `.services__card--product` (klasa z services.css)
   tez tu mieszkaja.

   Bramka `.eo-reveal` (klase dodaje JS na kazda sekcje) — dopoki jej nie ma,
   tresc jest po prostu widoczna. Chroni przed rozjazdem "nowy CSS + stary,
   zbuforowany common.js", ktory potrafi schowac sekcje bez sladu w konsoli
   (zdarzylo sie realnie — montage.css v53).
   ============================================= */
.eo-reveal {
  --eo-reveal-dur: 0.7s;
  --eo-ease: ease-out;
  --eo-shift: 30px;
}

/* `.section-fade` zostaje w HTML tych sekcji WYLACZNIE jako haczyk dla
   wspoldzielonego obserwatora — wlasny fade calego bloku jest wygaszony, bo
   od teraz animuja sie pojedyncze elementy. Nie usuwaj klasy z HTML "bo
   sekcja i tak nie gasnie"; nie przywracaj tez fade calego bloku. */
.services--product.section-fade,
.product-detail.section-fade,
.worry-free.section-fade,
.cta-banner.section-fade:not(.cta-banner--dark):not(.cta-banner--image) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Stary, jednoblokowy fade sekcji "Nasz Salon" na stronach oferty.
   `:not(.showroom--bento)` jest KONIECZNE — hero.html ma wlasna kaskade
   (showroom.css v63/v64) i nie wolno jej tu ruszyc. */
.showroom:not(.showroom--bento) .showroom__container.reveal-showroom {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---- 1. TYPY PRODUKTU (.services--product) ---- */
/* Karty jada na `translate`, nie `transform` — patrz komentarz przy
   `.offer-page .services__card.services__card--product` wyzej. */
.services--product.eo-reveal .services__label,
.services--product.eo-reveal .services__heading,
.services--product.eo-reveal .services__subheading {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease);
}

.services--product.eo-reveal .services__card--product {
  opacity: 0;
  translate: 0 var(--eo-shift);
}

.services--product.eo-reveal .services__label.is-revealed,
.services--product.eo-reveal .services__heading.is-revealed,
.services--product.eo-reveal .services__subheading.is-revealed {
  opacity: 1;
  transform: none;
}

.services--product.eo-reveal .services__card--product.is-revealed {
  opacity: 1;
  translate: none;
}

/* ---- 2. SEKCJE PRODUKTOWE (.product-detail, 4 na stronie) ---- */
.product-detail.eo-reveal .product-detail__label,
.product-detail.eo-reveal .product-detail__heading,
.product-detail.eo-reveal .product-detail__subheading,
.product-detail.eo-reveal .product-detail__badge,
.product-detail.eo-reveal .product-detail__desc,
.product-detail.eo-reveal .product-detail__names,
.product-detail.eo-reveal .worry-free__accordion--inline,
.product-detail.eo-reveal .product-detail__image-wrapper,
.product-detail.eo-reveal .product-detail__brands-grid {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease);
}

/* Zdjecie wjezdza z tej strony, po ktorej stoi. `--reversed` przerzuca je
   `order: -1` na LEWO, wiec i kierunek musi sie przerzucic.
   Reguly kierunkowe maja te sama specyficznosc (0,3,0) co stan ukryty wyzej —
   wygrywaja WYLACZNIE kolejnoscia w zrodle, nie przenos ich ponad tamta. */
.product-detail.eo-reveal .product-detail__image-wrapper,
.product-detail.eo-reveal .product-detail__brands-grid {
  transform: translateX(var(--eo-shift));
}

.product-detail--reversed.eo-reveal .product-detail__image-wrapper {
  transform: translateX(calc(-1 * var(--eo-shift)));
}

.product-detail.eo-reveal .product-detail__label.is-revealed,
.product-detail.eo-reveal .product-detail__heading.is-revealed,
.product-detail.eo-reveal .product-detail__subheading.is-revealed,
.product-detail.eo-reveal .product-detail__badge.is-revealed,
.product-detail.eo-reveal .product-detail__desc.is-revealed,
.product-detail.eo-reveal .product-detail__names.is-revealed,
.product-detail.eo-reveal .worry-free__accordion--inline.is-revealed,
.product-detail.eo-reveal .product-detail__image-wrapper.is-revealed,
.product-detail.eo-reveal .product-detail__brands-grid.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 3. "NIE MARTW SIE O NIC" (.worry-free) ---- */
/* `.worry-free__filters` jest ponizej 1024px `position: sticky` — transform NA
   TYM elemencie jest bezpieczny (nakladany po pozycjonowaniu). Nie przenos
   revealu na `.worry-free__content`: transform na PRZODKU zabija sticky. */
.worry-free.eo-reveal .worry-free__label,
.worry-free.eo-reveal .worry-free__heading,
.worry-free.eo-reveal .worry-free__filters,
.worry-free.eo-reveal .worry-free__tabs,
.worry-free.eo-reveal .worry-free__image {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease);
}

/* Zdjecie stoi po LEWEJ (`--image-left`) i stamtad wjezdza. Wysuw w lewo nie
   tworzy poziomego przewijania w ukladzie LTR, wiec `.worry-free` nie
   potrzebuje klipu — ale przy zmianie kierunku na prawy juz by potrzebowal. */
.worry-free.eo-reveal .worry-free__image {
  transform: translateX(calc(-1 * var(--eo-shift)));
}

.worry-free.eo-reveal .worry-free__label.is-revealed,
.worry-free.eo-reveal .worry-free__heading.is-revealed,
.worry-free.eo-reveal .worry-free__filters.is-revealed,
.worry-free.eo-reveal .worry-free__tabs.is-revealed,
.worry-free.eo-reveal .worry-free__image.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 4. CTA ZE STATYSTYKAMI (.cta-banner, wariant bez modyfikatora) ---- */
/* `background-position` MUSI zostac w liscie `transition` przycisku — `.ihb`
   ma na niej przejazd gradientu przy hoverze (navbar.css), a wlasny
   `transition` bez tego skasowalby go. */
.cta-banner.eo-reveal .cta-banner__heading,
.cta-banner.eo-reveal .cta-banner__sub,
.cta-banner.eo-reveal .cta-banner__stats,
.cta-banner.eo-reveal .cta-banner__container > .ihb {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease),
              background-position 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-banner.eo-reveal .cta-banner__heading.is-revealed,
.cta-banner.eo-reveal .cta-banner__sub.is-revealed,
.cta-banner.eo-reveal .cta-banner__stats.is-revealed,
.cta-banner.eo-reveal .cta-banner__container > .ihb.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 5. NASZ SALON (.showroom, wariant stron oferty) ---- */
/* `.showroom` ma w regule bazowej `overflow: hidden`, wiec wysuwy z bokow nie
   robia poziomego przewijania. Notatka na zdjeciu (`.showroom__badge`) NIE ma
   wlasnego wyzwalacza — lezy wewnatrz `__image-wrapper` i wchodzi razem z nim.
   To swiadome: jej animacja `showroom-float` jedzie na `transform`, a animacja
   zawsze wygrywa z przejsciem na tej samej wlasciwosci (patrz why-us v59). */
.showroom.eo-reveal .showroom__label,
.showroom.eo-reveal .showroom__heading,
.showroom.eo-reveal .showroom__subheading,
.showroom.eo-reveal .showroom__feature,
.showroom.eo-reveal .showroom__image-wrapper {
  opacity: 0;
  transform: translateY(var(--eo-shift));
  transition: opacity var(--eo-reveal-dur) var(--eo-ease),
              transform var(--eo-reveal-dur) var(--eo-ease);
}

.showroom.eo-reveal .showroom__feature {
  transform: translateX(calc(-1 * var(--eo-shift)));
}

.showroom.eo-reveal .showroom__image-wrapper {
  transform: translateX(var(--eo-shift));
}

.showroom.eo-reveal .showroom__label.is-revealed,
.showroom.eo-reveal .showroom__heading.is-revealed,
.showroom.eo-reveal .showroom__subheading.is-revealed,
.showroom.eo-reveal .showroom__feature.is-revealed,
.showroom.eo-reveal .showroom__image-wrapper.is-revealed {
  opacity: 1;
  transform: none;
}

/* Reduced motion: zerujemy dystans (zostaje sam fade) i skracamy czas —
   jedna regula, bo caly blok stoi na tych dwoch zmiennych. */
@media (prefers-reduced-motion: reduce) {
  .eo-reveal {
    --eo-reveal-dur: 0.2s;
    --eo-shift: 0px;
  }
}

/* ---- TELEFON: etykiety + naglowki sekcji wjezdzaja Z LEWEJ ----
   Wspolna regula calego serwisu (2026-08-03, base.css v142): naglowek sekcji
   wchodzi Z BOKU, a tresc (karty, siatki, zdjecia) Z DOLU — klient poprosil,
   zeby ruch byl „i lewo/prawo, i z dolu". Obejmuje trzy sekcje stron oferty,
   ktore byly w calosci pionowe: typy produktu, „Uznani Producenci" i „Nie
   martw sie o nic".

   **`overflow-x: clip` na dwoch pierwszych jest WYMOGIEM, nie kosmetyka** —
   zmierzone: obie mialy `overflow-x: visible`, wiec wysuw naglowka o 44px w
   lewo zrobilby realne poziome przewijanie strony. `clip`, a NIE `hidden`:
   `hidden` zrobilby z sekcji kontener przewijania, co w „Nie martw sie o nic"
   zabiloby `position: sticky` stosu kart (ten sam powod co w `.faq`).
   Blok jest ograniczony do ≤768px, gdzie sticky i tak jest wylaczone, ale
   `clip` jest tu bezpieczne takze dlatego, ze nie tworzy scrollportu.

   Selektory sa kopiami stanow ukrytych, wiec maja te sama specyficznosc i
   wygrywaja kolejnoscia w zrodle; reguly `.is-revealed` maja o klase wiecej.
   `no-preference` jest konieczne — blok reduced-motion lezy wyzej w pliku. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .services--product,
  .worry-free {
    overflow-x: clip;
  }

  .services--product.eo-reveal .services__label,
  .services--product.eo-reveal .services__heading,
  .product-detail.eo-reveal .product-detail__label,
  .product-detail.eo-reveal .product-detail__heading,
  .worry-free.eo-reveal .worry-free__label,
  .worry-free.eo-reveal .worry-free__heading {
    transform: translateX(calc(-1 * var(--eo-shift)));
  }
}