/* KONCEPT_6 — wspólny system stron kategorii produktowych Atlantis. */

.category-page {
  --category-deep: #15145f;
  --category-navy: #0f174f;
  --category-accent: #00aed9;
  --category-accent-dark: #087eaa;
  --category-mist: #eaf8fc;
  --category-glow: rgba(0, 174, 217, .2);
}

.category-page--turiker {
  --category-mist: #f0f1ff;
  --category-glow: rgba(69, 74, 190, .16);
}

.category-page--turipro {
  --category-mist: #edf7fc;
  --category-glow: rgba(8, 126, 170, .18);
}

.category-page--turigel {
  --category-mist: #eff9fb;
  --category-glow: rgba(0, 174, 217, .14);
}

.category-page--agro {
  --category-deep: #174b34;
  --category-navy: #0b291c;
  --category-accent: #55be7c;
  --category-accent-dark: #247348;
  --category-mist: #edf8f0;
  --category-glow: rgba(85, 190, 124, .18);
}

.category-page--bio {
  --category-deep: #4d522d;
  --category-navy: #292d1c;
  --category-accent: #a5b54d;
  --category-accent-dark: #6d7d1f;
  --category-mist: #f5f7e9;
  --category-glow: rgba(165, 181, 77, .18);
}

.category-page .lsplit {
  box-shadow: 0 22px 70px rgba(13, 22, 72, .1);
}

.category-jump {
  position: sticky;
  top: 119px;
  z-index: 38;
  color: #202243;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(21, 20, 95, .12);
  box-shadow: 0 8px 30px rgba(16, 25, 73, .06);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.category-jump .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 30px;
}

.category-jump strong {
  flex: 0 0 auto;
  color: var(--category-deep);
  font-size: 16px;
  letter-spacing: -.01em;
}

.category-jump__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 42px);
}

.category-jump a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 64px;
  color: #555d72;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.category-jump a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--category-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}

.category-jump a:hover,
.category-jump a:focus-visible {
  color: var(--category-deep);
}

.category-jump a:hover::after,
.category-jump a:focus-visible::after {
  transform: scaleX(1);
}

.category-page [id="o-linii"],
.category-page [id="produkty"],
.category-page [id="korzysci"],
.category-page [id="kontakt-produktowy"] {
  scroll-margin-top: 194px;
}

.category-story {
  position: relative;
  padding: clamp(82px, 8vw, 118px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, var(--category-glow), transparent 30%),
    linear-gradient(125deg, #fff 0%, var(--category-mist) 100%);
  border-bottom: 1px solid rgba(21, 20, 95, .08);
}

.category-story::before,
.category-products::before,
.category-benefits::before,
.category-contact::before {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.category-story::before {
  width: 360px;
  height: 360px;
  right: -130px;
  top: -180px;
  border: 1px solid rgba(0, 174, 217, .18);
  box-shadow:
    0 0 0 46px rgba(0, 174, 217, .035),
    0 0 0 92px rgba(0, 174, 217, .025);
}

.category-story::after {
  content: attr(data-line);
  position: absolute;
  right: 3vw;
  bottom: -34px;
  color: var(--category-deep);
  font-size: clamp(78px, 11vw, 164px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.07em;
  opacity: .035;
  pointer-events: none;
  white-space: nowrap;
}

.category-story .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto auto;
  column-gap: clamp(54px, 8vw, 112px);
  row-gap: 12px;
  max-width: 1180px !important;
}

.category-story .eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
}

.category-story h2 {
  grid-column: 1;
  grid-row: 2;
  max-width: 520px;
  margin: 0;
  color: var(--category-deep);
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.category-story .intro {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  max-width: 680px !important;
  margin: 0;
  color: #4f5972;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.72;
}

.category-products {
  position: relative;
  padding: clamp(84px, 8vw, 118px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, var(--category-glow), transparent 30%),
    linear-gradient(180deg, #f7f9fd 0%, #edf2f9 100%) !important;
}

.category-products::before {
  width: 520px;
  height: 520px;
  left: -340px;
  bottom: -280px;
  border: 1px solid rgba(21, 20, 95, .1);
  box-shadow: 0 0 0 72px rgba(21, 20, 95, .025);
}

.category-products .wrap {
  position: relative;
  z-index: 1;
}

.category-products h2,
.category-benefits h2 {
  margin-top: 6px;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.category-products .intro {
  max-width: 680px;
}

.category-products .pgrid {
  gap: 20px;
  margin-top: 38px !important;
}

.category-products .pcard {
  border-color: rgba(21, 20, 95, .1);
  box-shadow: 0 20px 52px rgba(22, 31, 78, .08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.category-products .pcard:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 174, 217, .4);
  box-shadow: 0 28px 64px rgba(22, 31, 78, .13);
}

.category-products .pcard h3 a {
  color: var(--category-deep);
}

/* fix20 / pkt 4.7 — sekcja "Kluczowe korzysci" NIE jest juz ciemnogranatowa.
   Kolorystyke (jasne tlo w tincie rodziny, ciemny tekst, biale karty, ikony w
   kolorze akcentu) ustawia fix12 w concept8.css:4330-4364. Tutaj zostaje samo
   rozmieszczenie — poprzednie deklaracje `color:#fff` i granatowy gradient byly
   martwe (nadpisane !important) i tylko myllily przy czytaniu zrodla. */
.category-benefits {
  position: relative;
  padding: clamp(84px, 8vw, 116px) 0;
  overflow: hidden;
}

.category-benefits::before {
  width: 430px;
  height: 430px;
  right: -220px;
  bottom: -240px;
}

.category-benefits .wrap {
  position: relative;
  z-index: 1;
}

.category-benefits h2 {
  max-width: 650px;
}

.category-benefits .ben-grid {
  gap: 16px;
  margin-top: 38px;
}

.category-benefits .ben-grid {
  align-items: stretch;
}

/* Bez sztywnego floora — karta rosnie z trescia, a rzad i tak jest rowny
   dzieki `align-items:stretch`. Sztywne 118 px zostawialo 34–107 px pustki
   pod krotkim tekstem (ten sam fix co w sekcji „Dlaczego TurEssence"). */
.category-benefits .ben-card {
  align-items: flex-start;
}

.category-benefits .ben-ic {
  flex: 0 0 auto;
}

.category-contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 174, 217, .32), transparent 24%),
    linear-gradient(120deg, #111557 0%, #252f91 100%);
}

.category-contact::before {
  width: 250px;
  height: 250px;
  right: 6vw;
  top: -190px;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 0 0 42px rgba(255, 255, 255, .025);
}

.category-contact .wrap {
  position: relative;
  z-index: 1;
}

.category-contact h2,
.category-contact p,
.category-contact .contact,
.category-contact .contact a {
  color: #fff;
}

.category-contact p,
.category-contact .contact {
  color: rgba(255, 255, 255, .8);
}

.category-contact .btn-primary {
  color: var(--category-deep);
  background: #fff;
  border-color: #fff;
}

.category-contact .btn-primary:hover {
  background: #eaf8fc;
}

@media (max-width: 900px) {
  .category-story .wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 14px;
  }

  .category-story .eyebrow,
  .category-story h2,
  .category-story .intro {
    grid-column: 1;
    grid-row: auto;
  }

  .category-story .intro {
    margin-top: 10px;
  }
}

@media (max-width: 700px) {
  .category-jump .wrap {
    display: block;
    min-height: 0;
    padding: 0;
  }

  .category-jump strong {
    display: none;
  }

  .category-jump__links {
    gap: 25px;
    overflow-x: auto;
    padding: 0 20px;
    scrollbar-width: none;
  }

  .category-jump__links::-webkit-scrollbar {
    display: none;
  }

  .category-jump a {
    min-height: 56px;
    font-size: 13px;
  }

  .category-page [id="o-linii"],
  .category-page [id="produkty"],
  .category-page [id="korzysci"],
  .category-page [id="kontakt-produktowy"] {
    scroll-margin-top: 184px;
  }

  .category-story,
  .category-products,
  .category-benefits {
    padding: 68px 0;
  }

  .category-story::after {
    right: -10px;
    bottom: -15px;
    font-size: 78px;
  }

  .category-story h2,
  .category-products h2,
  .category-benefits h2 {
    font-size: clamp(34px, 10vw, 44px);
  }

  .category-story .intro {
    font-size: 17px;
  }

  .category-products .pcard:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-jump a::after,
  .category-products .pcard {
    transition: none;
  }
}

/* Korekta v3 — mocniejsze hero, prostszy opis linii i czytelniejsze karty. */
.category-page .lsplit__media img,
.category-page .ls-media img {
  opacity: 1 !important;
  animation: none !important;
}

.category-page .lsplit__tag {
  display: none;
}

.category-page .breadcrumb {
  display: none !important;
}

.category-page .category-jump .wrap,
.category-page .category-jump a {
  min-height: 60px;
}

.category-story {
  padding: clamp(72px, 7vw, 100px) 0;
}

.category-story .wrap {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 96px);
  max-width: 1180px !important;
}

.category-story__copy {
  align-self: start;
}

.category-story__copy .eyebrow,
.category-story__copy h2,
.category-story__copy .intro {
  display: block;
  max-width: none !important;
}

.category-story__copy h2 {
  margin: 10px 0 22px;
  color: var(--category-deep);
  font-size: clamp(38px, 4vw, 55px);
  line-height: 1.04;
  letter-spacing: -.045em;
}

.category-story__copy .intro {
  margin: 0;
  color: #4e5871;
  font-size: 18px;
  line-height: 1.68;
}

.category-story__facts {
  display: grid;
  gap: 12px;
}

/* fix20 / pkt 4.9 — klocki nie maja juz numeracji 01/02/03 (usunieta w fix12),
   wiec kolumna 48px na kolko z numerem znika razem z nia. Wczesniej trzymalo
   to nadpisanie z concept8.css:4325; teraz zrodlo jest spojne samo w sobie. */
.category-story__fact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  padding: 22px 24px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(21, 20, 95, .1);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(22, 31, 78, .055);
}

.category-story__fact h3 {
  margin: 1px 0 6px;
  color: var(--category-deep);
  font-size: 19px;
  line-height: 1.25;
}

.category-story__fact p {
  margin: 0;
  color: #5a6379;
  font-size: 15px;
  line-height: 1.55;
}

/* Siatka listingu: patrz blok fix20 na koncu pliku (auto-fit + minmax).
   Historyczne `repeat(2)` oraz per-linia `repeat(6)`/`span 2`/`span 3`
   i jednokolumnowy TuriGel zostaly usuniete — jedna regula obsluguje 1..N. */

.category-products .pcard {
  padding: clamp(20px, 2vw, 24px);
  border-radius: 14px;
}

.category-products .pcard h3 {
  margin: 4px 0 14px;
  font-size: clamp(20px, 1.7vw, 22px);
}

.category-products .pcard table {
  font-size: 14px;
}

.category-products .pcard td {
  padding: 7px 0;
}

.category-products .pcard .acts a {
  min-height: 40px;
  font-size: 12.5px;
}

@media (min-width: 901px) {
  .category-page .lsplit {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
    height: max(520px, calc(100svh - 181px)) !important;
  }

  .category-page .lsplit__panel,
  .category-page .ls-panel {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: max(34px, calc((100vw - 1280px) / 2)) !important;
    padding-right: 36px !important;
  }

  .category-page--turiker .lsplit__panel,
  .category-page--turiker .ls-panel,
  .category-page--agro .lsplit__panel,
  .category-page--agro .ls-panel,
  .category-page--turigel .lsplit__panel,
  .category-page--turigel .ls-panel {
    padding-left: 36px !important;
    padding-right: max(34px, calc((100vw - 1280px) / 2)) !important;
  }

  .category-page .lsplit__inner {
    max-width: 610px;
    margin: 0;
  }

  .category-page .lsplit__h1 {
    margin-bottom: 15px;
    font-size: clamp(40px, 3.4vw, 56px);
    line-height: 1.02;
    letter-spacing: -.035em;
  }

  .category-page .lsplit__cat {
    margin-bottom: 12px;
  }

  .category-page .lsplit__lede,
  .category-page .lsplit__desc {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.55;
  }

  .category-page .lsplit__facts {
    gap: 8px;
    margin-bottom: 22px;
  }

  .category-page .lsplit__facts span {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .category-page .lsplit__media,
  .category-page .ls-media {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .category-page .lsplit__media img,
  .category-page .ls-media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .category-page--turicoll .lsplit__media img,
  .category-page--turicoll .ls-media img {
    object-position: 70% 50% !important;
  }

  .category-page .lsplit__media::after,
  .category-page .ls-media::after {
    border-radius: 0 !important;
    background: linear-gradient(90deg, rgba(15, 23, 79, .18), transparent 28%) !important;
  }

  .category-page .lsplit__panel::after,
  .category-page .ls-panel::after {
    right: -90px !important;
    width: 90px !important;
    background: linear-gradient(90deg, rgba(235, 240, 251, .98), rgba(235, 240, 251, 0)) !important;
  }

  .category-page .lsplit__chip {
    left: auto !important;
    right: 40px !important;
    top: auto !important;
    bottom: 22px !important;
    max-width: calc(50% - 80px);
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Kompletne strony linii rozwijanych: TuriKer Agro i TuriKer Bio. */
.category-preview-page .lsplit__media img {
  opacity: 1 !important;
  animation: none !important;
}

.category-preview-page .category-jump__links {
  margin-left: auto;
}

.category-preview-applications {
  position: relative;
  padding: clamp(82px, 8vw, 116px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, var(--category-glow), transparent 32%),
    linear-gradient(130deg, #fff 0%, var(--category-mist) 100%) !important;
}

.category-preview-applications::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -230px;
  top: -210px;
  border: 1px solid color-mix(in srgb, var(--category-accent) 24%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 56px color-mix(in srgb, var(--category-accent) 5%, transparent),
    0 0 0 112px color-mix(in srgb, var(--category-accent) 3%, transparent);
}

.category-preview-applications .wrap {
  position: relative;
  z-index: 1;
}

.preview-app-head {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  align-items: end;
  gap: clamp(48px, 7vw, 96px);
  margin-bottom: 38px;
}

.preview-app-head h2 {
  margin: 8px 0 0;
  color: var(--category-deep);
  font-size: clamp(38px, 4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.preview-app-head .intro {
  max-width: 670px !important;
  margin: 0 !important;
  color: #505a70;
  font-size: 18px;
  line-height: 1.68;
}

.category-preview-applications .ben-grid {
  gap: 18px;
}

.category-preview-applications .ben-card {
  align-items: flex-start;
  min-height: 132px;
  padding: 26px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid color-mix(in srgb, var(--category-deep) 12%, transparent);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(24, 45, 38, .07);
}

.category-preview-applications .ben-card p {
  margin: 2px 0 0;
  color: var(--category-deep);
  font-size: 17px;
  line-height: 1.45;
}

.category-preview-applications .ben-ic {
  color: #fff;
  background: var(--category-accent-dark);
}

.category-preview-page .category-contact {
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--category-accent) 34%, transparent), transparent 25%),
    linear-gradient(120deg, var(--category-navy), var(--category-deep));
}

@media (max-width: 900px) {
  .preview-app-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .category-story .wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

}

@media (max-width: 640px) {
  .category-story__copy h2 {
    font-size: 38px;
  }

  .category-story__fact {
    padding: 18px;
  }
}

/* TuriGel: fotografia płynnie przechodzi w panel bez ramki i zaokrąglonej krawędzi. */
@media (min-width: 901px) {
  .category-page--turigel {
    --turigel-hero-blend: 96px;
  }

  .category-page--turigel .lsplit__media,
  .category-page--turigel .ls-media {
    z-index: 2;
    overflow: visible !important;
  }

  .category-page--turigel .lsplit__panel,
  .category-page--turigel .ls-panel {
    padding-left: calc(var(--turigel-hero-blend) + 24px) !important;
  }

  .category-page--turigel .lsplit__media img,
  .category-page--turigel .ls-media img {
    inset: 0 auto 0 0 !important;
    width: calc(100% + var(--turigel-hero-blend)) !important;
    max-width: none !important;
    height: 100% !important;
    border-radius: 0 !important;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--turigel-hero-blend)), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--turigel-hero-blend)), transparent 100%);
  }

  .category-page--turigel .lsplit__media::before,
  .category-page--turigel .lsplit__media::after,
  .category-page--turigel .ls-media::before,
  .category-page--turigel .ls-media::after {
    content: none !important;
    box-shadow: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .category-page--turigel {
    --turigel-hero-blend: 64px;
  }
}

/* ==========================================================================
   fix20 — listing produktow na stronach linii (pkt 4.1, 4.3, 4.4, 4.5)
   ==========================================================================
   Poprzednio szerokosc kart byla ustawiana z gory (`flex: 0 1 340px` w
   concept8.css:1313 + `repeat(2)` / `repeat(6)` + `span 2|3` tutaj), wiec
   liczba kolumn nie zalezala od liczby produktow: 4 karty ukladaly sie 3+1,
   5 kart 3+2, a kazda nowa linia wymagala wlasnej reguly. Ponizej jedna
   siatka `auto-fit + minmax` obsluguje 1..N kart bez zadnego breakpointu —
   liczba kolumn wynika wylacznie z dostepnej szerokosci `.wrap` (1184 px
   przy --maxw:1240px), a `:has()` zwezajacy siatke pilnuje, zeby linia z
   1-3 produktami nie zostawiala poszarpanego rzedu.
   Podwojona klasa (`.pgrid.pgrid`) podnosi specyficznosc ponad
   `.category-page .category-products .pgrid` z concept8.css, ktory laduje
   sie po tym arkuszu. */

.category-page .category-products .pgrid.pgrid {
  --pgrid-gap: clamp(12px, 1.3vw, 20px);
  /* Szerokosc kafla przy 1-3 produktach. MUSI byc zgodna z minimum siatki
     nizej (330px), inaczej linia z 2 produktami dostaje kafle 340px, a linia
     z 4 produktami 382px - ten sam kafel w dwoch szerokosciach i wyzszy tam,
     gdzie wezszy, bo tekst zawija sie na wiecej wierszy. */
  --pgrid-unit: 382px;
  --pgrid-cols: 4;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: stretch;
  gap: var(--pgrid-gap) !important;
  width: 100%;
  max-width: min(
    100%,
    calc(var(--pgrid-cols) * var(--pgrid-unit) + (var(--pgrid-cols) - 1) * var(--pgrid-gap))
  ) !important;
  /* Siatka zwezona przez :has() (linie z 1-3 produktami) ma stac przy LEWEJ
     krawedzi .wrap, czyli w jednej osi z <h2> i akapitem wprowadzajacym.
     Przy `margin-left:auto` byla centrowana w .wrap i pojedynczy kafel
     TuriGel odjezdzal 401 px w prawo od wlasnego naglowka, a dwa kafle
     TuriPro 200,6 px - przez co cztery strony linii wygladaly inaczej.
     Dla linii z 4-5 produktami nic sie nie zmienia: tam `max-width`
     rozwiazuje sie do 100%, wiec obie wartosci daja ten sam wynik. */
  margin-right: auto !important;
  margin-left: 0 !important;
}

.category-page .category-products .pgrid.pgrid:has(> .pcard:nth-child(1):last-child) {
  --pgrid-cols: 1;
}

.category-page .category-products .pgrid.pgrid:has(> .pcard:nth-child(2):last-child) {
  --pgrid-cols: 2;
}

.category-page .category-products .pgrid.pgrid:has(> .pcard:nth-child(3):last-child) {
  --pgrid-cols: 3;
}

/* Karta wypelnia tor siatki; sztywne 340 px z concept8.css:1321-1328 juz nie
   obowiazuje, bo o szerokosci decyduje tor, nie sama karta. Piec klas w
   selektorze bije `.category-page--turiker ... .pcard:nth-last-child(-n+2)`
   (te same 4 punkty specyficznosci, ale concept8.css laduje sie pozniej) —
   bez tego dwie ostatnie karty TuriKer byly wezsze od pozostalych. */
.category-page .category-products .pgrid .pcard.pcard {
  width: auto;
  min-width: 0;
  max-width: none;
}

/* 4.1 — etykieta rodziny nad nazwa produktu. Kolor rodziny ustawia
   concept8.css:2687 (--category-deep), tutaj tylko skala, waga i swiatlo. */
.category-products .pcard .ln {
  margin-bottom: 3px;
  font-size: clamp(13.5px, .45vw + 11px, 16px);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.2;
}

/* 4.5 — produkt zapowiedziany (TuriColl Native T2): karta zostaje w rejestrze
   na koncu listy, ale nie prowadzi do karty produktu ani do koszyka probek. */
.category-products .pcard--soon h3 {
  color: var(--category-deep);
}

/* Odznaka musi zmiescic sie w tym samym wierszu co etykieta rodziny — inaczej
   karta „w przygotowaniu" ma naglowek nizej niz sasiednie i rzad sie rozjezdza.
   Stad staly 11 px zamiast `em` (etykieta rosnie do 16 px). */
.category-products .pcard__soon {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px 3px;
  color: color-mix(in srgb, var(--category-deep) 74%, #5a6379);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--category-deep) 30%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 2px;
  white-space: nowrap;
}

.category-products .pcard__note {
  margin: 0 0 14px;
  color: #5a6379;
  font-size: 13.5px;
  line-height: 1.5;
}

/* ==========================================================================
   5. PRODUKT NA ZAPYTANIE — TuriPro (hydrolizaty) i TuriGel (zelatyny)
   --------------------------------------------------------------------------
   Obie linie sa dzis produkowane pod konkretne zamowienie, a nie wydawane
   z magazynu. Komunikat ma sie czytac jak nota w karcie technicznej:
   neutralny grafit, wlos 1 px, zero koloru alarmowego, zero animacji.
   Arkusz jest od teraz dolaczany takze do stron produktow (turipro-ns-m,
   turipro-ns-mb, turigel) i do koszyka probek, dlatego ponizsze reguly
   NIE zakladaja kontekstu `.category-page` — musza dzialac samodzielnie.
   Nazwy sa unikalne (prefiks `onreq`), wiec nie kolizjonuja z innymi
   arkuszami serwisu.
   ========================================================================== */

:root {
  --onreq-ink: #2c3247;
  --onreq-muted: #5a6072;
  --onreq-line: #ccd2e0;
  --onreq-bg: #f5f7fa;
}

/* 5.1 — odznaka. Ten sam ksztalt co `.pcard__soon`, ale kolor neutralny:
   „na zapytanie" to informacja o trybie produkcji, nie ostrzezenie. */
.onreq-tag {
  display: inline-block;
  padding: 2px 8px 3px;
  color: var(--onreq-muted);
  background: #fff;
  border: 1px solid var(--onreq-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 2px;
}

/* 5.1b — odznaka „w przygotowaniu". Ta sama geometria co `.onreq-tag`,
   bo to ta sama rodzina komunikatow o dostepnosci; rozni sie tylko trescia.
   Uzywana na karcie listingu (`.pcard__soon`), w naglowku strony produktu
   i w tabelach „Pozostale …", zeby status byl ten sam w kazdym miejscu. */
.soon-tag {
  display: inline-block;
  padding: 2px 8px 3px;
  color: var(--onreq-muted);
  background: #fff;
  border: 1px solid var(--onreq-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.45;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 2px;
}

/* Wariant dla naglowka strony linii — stoi w osobnym wierszu pod <h1>. */
.onreq-tag--hero {
  margin: 12px 0 0;
  vertical-align: baseline;
}

/* 5.2 — panel wyjasniajacy. Lewa krawedz 3 px zamiast tla w kolorze —
   dzieki temu blok jest widoczny, ale nie krzyczy. */
.onreq {
  padding: 22px 24px 24px;
  color: var(--onreq-ink);
  background: var(--onreq-bg);
  border: 1px solid var(--onreq-line);
  border-left: 3px solid var(--onreq-ink);
  border-radius: 10px;
}

.onreq__label {
  margin: 0;
  color: var(--onreq-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Wyzsza specyficznosc niz `.section h2` (styles.css) — na stronie linii
   panel stoi wewnatrz `.section`, ktora narzuca 30 px naglowkom. */
.onreq .onreq__title {
  margin: 7px 0 0;
  color: var(--onreq-ink);
  font-size: clamp(19px, .5vw + 17px, 22px);
  line-height: 1.25;
}

.onreq .onreq__lead {
  max-width: 74ch;
  margin: 11px 0 0;
  color: var(--onreq-muted);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Trzy fakty w rownych torach; przy waskim ekranie schodza do jednej
   kolumny (minmax 220 px), wiec panel nigdy nie rozpycha strony. */
.onreq__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 26px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.onreq__list li {
  position: relative;
  padding-left: 17px;
}

/* Znacznik: krotka kreska, nie ptaszek — to nie jest lista korzysci. */
.onreq__list li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 9px;
  height: 1px;
  background: var(--onreq-ink);
}

.onreq__list b {
  display: block;
  color: var(--onreq-ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.onreq__list span {
  display: block;
  margin-top: 4px;
  color: var(--onreq-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.onreq__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 22px;
}

/* Przycisk celowo nie ma wlasnego koloru — dziedziczy `.btn-primary`
   serwisu (granat na stronie linii, kolor rodziny na stronie produktu
   przez `.pdp .btn-primary`), zeby nie wprowadzac trzeciego stylu CTA. */

.onreq__hint {
  margin: 0;
  color: var(--onreq-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Numer musi wygladac na klikalny — globalne `a{color:inherit}` ze
   styles.css:16 zrownuje go z tekstem obok. */
.onreq__hint a {
  color: var(--onreq-ink);
  font-weight: 700;
}

.onreq__hint a:hover {
  text-decoration: underline;
}

/* 5.3 — pas z panelem na stronie produktu: bialy przedzial miedzy dwiema
   sekcjami na tle `--soft`, dzieki czemu panel odcina sie sam z siebie. */
.onreq-band {
  padding: 34px 0;
  background: #fff;
}

/* 5.4 — panel na stronie linii stoi we wlasnej sekcji przed lista produktow.
   Rytm pionowy przepisany z `.c6-how` (concept6-b2b.css), dzieki czemu
   wszystkie cztery strony linii maja ten sam szkielet sekcji:
   hero > o linii > blok wspolpracy > produkty > korzysci > kontakt. */
.category-onreq {
  padding: clamp(72px, 8vw, 104px) 0;
  background: #fff;
  border-block: 1px solid #e7eaf1;
}

@media (max-width: 640px) {
  .onreq {
    padding: 18px 17px 20px;
  }
  .onreq-band {
    padding: 26px 0;
  }
}

/* 5.5 — karta produktu na stronie linii. Geometria jak `.pcard__soon`
   (staly 11 px, zeby naglowek karty nie rozjechal sie wzgledem sasiadow),
   ale kolor neutralny. */
.category-products .pcard__onreq {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px 3px;
  color: var(--onreq-muted);
  background: #fff;
  border: 1px solid var(--onreq-line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: 2px;
  white-space: nowrap;
}

/* 5.6 — pas kontaktowy na dole strony produktu ma teraz dwa przyciski.
   `.band .r` jest `text-align:right`, wiec potrzebny jest wlasny flex,
   inaczej przyciski sklejaja sie bokami. */
.band .onreq-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .band .onreq-actions {
    justify-content: flex-start;
  }
}

/* 5.7 — koszyk probek. Nazwa i odznaka musza trzymac sie razem, bo
   `#cartlist .ci` to `justify-content:space-between` i trzeci element
   rozjechalby sie na srodek wiersza. */
#cartlist .ci-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  min-width: 0;
}

#cartlist .ci-name b {
  min-width: 0;
  overflow-wrap: anywhere;
}

.koszinfo .onreq-note {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--onreq-line);
}