.tfhp4,
.tfhp4 * { box-sizing:border-box; }

.tfhp4 {
  --red:#b23434;
  --blue:#2f4a68;
  --navy:#14263f;
  --slate:#2f3742;
  --text:#5f6874;
  --soft:#f7f8fa;
  --cool:#eef3f7;
  --line:#e3e6ea;
  --white:#fff;
  width:100%;
  overflow:hidden;
  color:var(--text);
  background:var(--white);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  line-height:1.55;
}

/* SZEROKOŚĆ V0.4
   Kolor każdej sekcji wypełnia całe okno.
   Właściwa treść pozostaje w kontenerze 90%.
   Selektory oraz !important celowo wygrywają ze stylami motywu. */
html body .tfhp4 {
  position:relative !important;
  left:50% !important;
  right:50% !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:100vw !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

html body .tfhp4 .wrap {
  width:90% !important;
  max-width:90% !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}

html body .tfhp4 .status-strip,
html body .tfhp4 .perioda,
html body .tfhp4 .entries,
html body .tfhp4 .section,
html body .tfhp4 .final-cta {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  box-sizing:border-box !important;
}

/* Jawne priorytety kolorów pełnoszerokich sekcji. */
html body .tfhp4 .status-strip {
  background:#0d1d32 !important;
  background-color:#0d1d32 !important;
}

html body .tfhp4 .perioda {
  background:linear-gradient(110deg,#14263f,#1e385a) !important;
}

html body .tfhp4 .entries {
  background:transparent !important;
  background-color:transparent !important;
}

html body .tfhp4 .section:not(.soft):not(.cool):not(.dark) {
  background:#ffffff !important;
  background-color:#ffffff !important;
}

html body .tfhp4 .section.soft {
  background:#f7f8fa !important;
  background-color:#f7f8fa !important;
}

html body .tfhp4 .section.cool {
  background:#eef3f7 !important;
  background-color:#eef3f7 !important;
}

html body .tfhp4 .section.dark,
html body .tfhp4 .final-cta {
  background:#14263f !important;
  background-color:#14263f !important;
}

.tfhp4 img { display:block; max-width:100%; }
.tfhp4 a { color:inherit; text-decoration:none !important; }
.tfhp4 button { font:inherit; }

.tfhp4 .wrap {
  width:min(1240px,calc(100% - 48px));
  margin-inline:auto;
}

.tfhp4 .section {
  position:relative;
  padding:104px 0;
}

.tfhp4 .section + .section {
  border-top:0;
}

.tfhp4 .section.soft { background:var(--soft); }
.tfhp4 .section.cool { background:var(--cool); }
.tfhp4 .section.dark {
  color:#dce5ee;
  background:var(--navy);
}
.tfhp4 .section.dark + .section { border-top:0; }

.tfhp4 .eyebrow {
  margin:0 0 14px;
  color:var(--red);
  font-size:12px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.tfhp4 .title {
  margin:0;
  color:var(--blue);
  font-size:clamp(36px,4.25vw,58px);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-.025em;
}

.tfhp4 .title.medium {
  font-size:clamp(33px,3.45vw,49px);
}

.tfhp4 .dark .title { color:#fff; }
.tfhp4 .dark .lead { color:#c4cfda; }

.tfhp4 .lead {
  max-width:700px;
  margin:22px 0 0;
  color:var(--text);
  font-size:18px;
  line-height:1.7;
}

.tfhp4 .grid2 {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:72px;
  align-items:center;
}

.tfhp4 .grid2.reverse {
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
}

.tfhp4 .section-tag,
.tfhp4 .section-overline {
  display:block;
  min-height:0;
  margin:0 0 14px;
  padding:0;
  color:var(--red);
  background:transparent;
  border:0;
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

/* PRZYCISKI — STYL POBRANY Z ORYGINALNEJ STRONY GŁÓWNEJ TF */
html body .tfhp4 .actions {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:15px !important;
  width:min(100%,600px) !important;
  max-width:600px !important;
  margin-top:30px !important;
}

html body .tfhp4 .actions.single {
  grid-template-columns:minmax(0,1fr) !important;
  width:min(100%,300px) !important;
  max-width:300px !important;
}

html body .tfhp4 .btn,
html body .tfhp4 a.btn,
html body .tfhp4 button.btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  min-height:52px !important;
  padding:14px 25px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  font-family:inherit !important;
  font-weight:700 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  text-align:center !important;
  text-decoration:none !important;
  border:none !important;
  border-radius:2px !important;
  position:relative !important;
  overflow:hidden !important;
  cursor:pointer !important;
  transition:.3s !important;
  z-index:1 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  box-shadow:none !important;
}

html body .tfhp4 .btn.red,
html body .tfhp4 a.btn.red,
html body .tfhp4 button.btn.red {
  color:#ffffff !important;
  background:#b23434 !important;
  background-color:#b23434 !important;
}

html body .tfhp4 .btn.blue,
html body .tfhp4 a.btn.blue,
html body .tfhp4 button.btn.blue {
  color:#ffffff !important;
  background:#2f4a68 !important;
  background-color:#2f4a68 !important;
  border:none !important;
}

html body .tfhp4 .btn.red:hover,
html body .tfhp4 .btn.red:focus-visible {
  color:#ffffff !important;
  background:#9e2c2c !important;
  background-color:#9e2c2c !important;
  transform:none !important;
}

html body .tfhp4 .btn.blue:hover,
html body .tfhp4 .btn.blue:focus-visible {
  color:#ffffff !important;
  background:#243447 !important;
  background-color:#243447 !important;
  transform:none !important;
}

html body .tfhp4 .btn::after {
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-100% !important;
  width:50% !important;
  height:100% !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent) !important;
  transform:skewX(-25deg) !important;
  transition:.6s !important;
  z-index:-1 !important;
  pointer-events:none !important;
}

html body .tfhp4 .btn:hover::after {
  left:150% !important;
}

html body .tfhp4 .access-card .card-action .btn {
  width:100% !important;
  max-width:none !important;
}

.tfhp4 .feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 24px;
  margin-top:30px;
}

.tfhp4 .feature {
  position:relative;
  padding-left:23px;
  color:var(--blue);
  font-size:14px;
  font-weight:750;
}

.tfhp4 .feature::before {
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:8px;
  height:8px;
  background:var(--red);
}

.tfhp4 .dark .feature { color:#fff; }

.tfhp4 .media-frame {
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 22px 48px rgba(30,46,63,.14);
}

.tfhp4 .media-label {
  padding:11px 14px;
  color:var(--blue);
  background:#fff;
  border-bottom:1px solid var(--line);
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.tfhp4 .media-label.red {
  color:#fff;
  background:var(--red);
  border-bottom:0;
}

.tfhp4 .media-frame img {
  width:100%;
  height:100%;
  object-fit:cover;
}

/* STATUS / PERIODA */
.tfhp4 .status-strip {
  padding:10px 0;
  color:#fff;
  background:#0d1d32;
  border-bottom:0;
}
.tfhp4 .status-strip .wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-align:center;
  text-transform:uppercase;
}
.tfhp4 .status-dot {
  width:10px;
  height:10px;
  flex:0 0 10px;
  border-radius:50%;
  background:#00c853;
  box-shadow:0 0 0 4px rgba(0,200,83,.13);
}
.tfhp4 .perioda {
  padding:50px 0 150px;
  color:#fff;
  background:linear-gradient(110deg,#14263f,#1e385a);
}
.tfhp4 .perioda-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,460px);
  gap:56px;
  align-items:center;
}
.tfhp4 .perioda .eyebrow { color:#ef7777; }
.tfhp4 .perioda h1 {
  margin:0;
  color:#fff;
  font-size:clamp(38px,4.2vw,57px);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-.025em;
}
.tfhp4 .perioda p {
  max-width:680px;
  margin:20px 0 0;
  color:#c5cfda;
  font-size:16px;
  line-height:1.7;
}
.tfhp4 .perioda-slot { min-height:250px; }
.tfhp4 .perioda-fallback {
  min-height:250px;
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid rgba(255,255,255,.17);
  border-top:4px solid var(--red);
  background:rgba(255,255,255,.06);
}
.tfhp4 .perioda-fallback > div {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px;
}
.tfhp4 .perioda-fallback > div + div {
  border-left:1px solid rgba(255,255,255,.15);
}
.tfhp4 .perioda-big { color:#fff; font-size:29px; font-weight:900; }
.tfhp4 .perioda-small {
  margin-top:6px;
  color:#adbac8;
  font-size:11px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}

/* ENTRY CARDS */
.tfhp4 .entries {
  position:relative;
  z-index:5;
  margin-top:-90px;
  padding-bottom:82px;
  background:transparent;
}
.tfhp4 .entry-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

.tfhp4 .entry {
  display:grid;
  grid-template-rows:168px auto 68px;
  min-width:0;
  min-height:0;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--red);
  box-shadow:0 18px 42px rgba(28,44,61,.10);
}

.tfhp4 .entry-copy {
  min-height:168px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:25px 26px 23px;
}

.tfhp4 .entry-copy .eyebrow {
  min-height:30px;
  display:flex;
  align-items:flex-end;
  margin-bottom:12px;
}

.tfhp4 .entry h3 {
  min-height:64px;
  display:flex;
  align-items:flex-start;
  margin:0;
  color:var(--blue);
  font-size:27px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.025em;
}

.tfhp4 .entry-art {
  width:100%;
  aspect-ratio:1 / 1;
  display:block;
  overflow:hidden;
  margin:0;
  padding:12px;
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-sizing:border-box;
}

.tfhp4 .entry-art img {
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

.tfhp4 .entry-bottom {
  min-height:68px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:14px 24px;
  border-top:0;
}

.tfhp4 .entry-tag,
.tfhp4 .entry-link {
  display:flex;
  align-items:center;
  min-height:34px;
  line-height:1.35;
}

.tfhp4 .entry-tag {
  justify-content:flex-start;
  color:var(--red);
  font-size:10px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}

.tfhp4 .entry-link {
  justify-content:flex-end;
  color:var(--blue);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-align:right;
  text-transform:uppercase;
}

.tfhp4 .entry-link::after {
  content:" →";
  margin-left:3px;
  color:var(--red);
}

/* SYSTEM MOSAIC */
.tfhp4 .system-mosaic {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  grid-template-rows:1fr 1fr;
  gap:18px;
  min-height:600px;
}
.tfhp4 .system-mosaic .large { grid-row:1 / 3; }
.tfhp4 .system-mosaic .media-frame { min-height:0; }
.tfhp4 .system-mosaic .large img { object-fit:cover; object-position:center; }

/* TOOL MEDIA */
.tfhp4 .tool-media {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.tfhp4 .tool-media.two {
  grid-template-columns:1.3fr .7fr;
  align-items:stretch;
}
.tfhp4 .tool-media.two .media-frame { min-height:470px; }
.tfhp4 .tool-media.two .media-frame.small { min-height:0; }
.tfhp4 .tool-media.two .media-frame.small img { object-fit:cover; }

/* Dark structured gallery */
.tfhp4 .dark-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:48px;
}
.tfhp4 .dark-gallery .media-frame {
  box-shadow:none;
  border-color:rgba(255,255,255,.18);
}
.tfhp4 .dark-gallery .media-frame img {
  aspect-ratio:1/1;
  object-fit:cover;
}
.tfhp4 .dark-gallery .media-label {
  min-height:48px;
}

/* Visualizer */
.tfhp4 .visualizer-media {
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:18px;
}
.tfhp4 .visualizer-side {
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:18px;
}


/* V0.5.4 — KWADRATOWY OBRAZ I TEKST NA OSI JEGO ŚRODKA */
.tfhp4 .grid2,
.tfhp4 .grid2.reverse {
  align-items:stretch;
}

.tfhp4 .section-copy,
.tfhp4 .single-media {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.tfhp4 .single-media {
  width:100%;
}

.tfhp4 .single-media .media-frame {
  position:relative;
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.tfhp4 .single-media .media-label {
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  width:auto;
  max-width:calc(100% - 24px);
}

.tfhp4 .single-media .media-frame img {
  width:100%;
  height:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

.tfhp4 .single-media--dark .media-frame {
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
}

@media (max-width:1050px) {
  .tfhp4 .section-copy,
  .tfhp4 .single-media {
    justify-content:flex-start;
  }
}

@media (max-width:720px) {
  .tfhp4 .single-media {
    margin-top:26px;
  }
}

/* Products */
.tfhp4 .product-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  margin-top:48px;
}
.tfhp4 .product-card {
  background:#fff;
  border:1px solid rgba(255,255,255,.2);
}
.tfhp4 .product-card img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.tfhp4 .product-card-copy {
  padding:20px;
}
.tfhp4 .product-card h3 {
  margin:0;
  color:var(--blue);
  font-size:24px;
  line-height:1.08;
}
.tfhp4 .product-card p {
  margin:11px 0 0;
  color:var(--text);
  font-size:14px;
  line-height:1.58;
}

/* Access */
.tfhp4 .access-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:46px;
}
.tfhp4 .access-card {
  display:flex;
  flex-direction:column;
  min-height:430px;
  padding:26px;
  background:#fff;
  border:1px solid var(--line);
  border-top:5px solid var(--red);
}
.tfhp4 .access-card.visual {
  padding:0;
  overflow:hidden;
}
.tfhp4 .access-card.visual img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.tfhp4 .access-card.visual .access-copy { padding:24px; }
.tfhp4 .price {
  color:var(--red);
  font-size:42px;
  line-height:1;
  font-weight:900;
}
.tfhp4 .access-card h3 {
  margin:18px 0 0;
  color:var(--blue);
  font-size:27px;
  line-height:1.08;
}
.tfhp4 .access-card ul {
  margin:18px 0 0;
  padding-left:18px;
  color:var(--text);
}
.tfhp4 .access-card li + li { margin-top:8px; }
.tfhp4 .access-card .card-action {
  margin-top:auto;
  padding-top:24px;
}
.tfhp4 .access-card .btn { max-width:none; }

/* Community */
.tfhp4 .community-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:34px;
  align-items:stretch;
}
.tfhp4 .community-photo img {
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
}
.tfhp4 .community-links {
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:16px;
}
.tfhp4 .community-link {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:25px;
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--red);
}
.tfhp4 .community-link h3 {
  margin:0;
  color:var(--blue);
  font-size:25px;
}
.tfhp4 .community-link p {
  margin:9px 0 0;
  font-size:14px;
  line-height:1.55;
}
.tfhp4 .community-link span {
  margin-top:13px;
  color:var(--red);
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

/* CTA */
.tfhp4 .final-cta {
  padding:92px 0;
  text-align:center;
  color:#fff;
  background:var(--navy);
  border-top:0;
}
.tfhp4 .final-cta .title { color:#fff; }
.tfhp4 .final-cta .lead {
  margin-inline:auto;
  color:#c7d1dc;
}
.tfhp4 .final-cta .actions { margin-inline:auto; }

/* Modal */
.tfhp4 .modal[hidden] { display:none !important; }
.tfhp4 .modal {
  position:fixed;
  z-index:999999;
  inset:0;
  display:grid;
  place-items:center;
  padding:22px;
}
.tfhp4 .backdrop {
  position:absolute;
  inset:0;
  background:rgba(10,22,38,.8);
}
.tfhp4 .dialog {
  position:relative;
  z-index:2;
  width:min(980px,100%);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-top:5px solid var(--red);
  box-shadow:0 34px 90px rgba(0,0,0,.34);
}
.tfhp4 .dialog-head {
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.tfhp4 .dialog-head h3 {
  margin:0;
  color:var(--blue);
  font-size:27px;
}
.tfhp4 .close {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  color:#fff;
  background:var(--red);
  cursor:pointer;
  font-size:31px;
  line-height:1;
}
.tfhp4 .dialog-body { padding:28px; }
.tfhp4 .steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.tfhp4 .step {
  min-height:145px;
  padding:20px;
  background:var(--soft);
  border:1px solid var(--line);
  border-top:3px solid var(--red);
}
.tfhp4 .step b {
  display:block;
  margin-bottom:9px;
  color:var(--blue);
}
.tfhp4 .step span {
  font-size:14px;
  line-height:1.55;
}

@media (max-width:1050px) {
  .tfhp4 .grid2,
  .tfhp4 .grid2.reverse,
  .tfhp4 .perioda-grid,
  .tfhp4 .community-grid { grid-template-columns:1fr; }

  .tfhp4 .entry-grid,
  .tfhp4 .access-grid { grid-template-columns:1fr 1fr; }

  .tfhp4 .entry:last-child,
  .tfhp4 .access-card:last-child { grid-column:1 / -1; }

  .tfhp4 .entry {
    grid-template-rows:168px auto 68px;
  }

  .tfhp4 .system-mosaic,
  .tfhp4 .visualizer-media { min-height:560px; }

  .tfhp4 .product-grid { grid-template-columns:1fr 1fr; }
  .tfhp4 .product-card:last-child { grid-column:auto; }
}

@media (max-width:720px) {
  html body .tfhp4 .wrap { width:90% !important; max-width:90% !important; }
  .tfhp4 .section { padding:72px 0; }

  .tfhp4 .perioda { padding:42px 0 122px; }
  .tfhp4 .perioda-fallback { grid-template-columns:1fr; }
  .tfhp4 .perioda-fallback > div + div {
    border-left:0;
    border-top:1px solid rgba(255,255,255,.15);
  }

  .tfhp4 .entry-grid,
  .tfhp4 .access-grid,
  .tfhp4 .product-grid { grid-template-columns:1fr; }

  .tfhp4 .entry:last-child,
  .tfhp4 .access-card:last-child,
  .tfhp4 .product-card:last-child { grid-column:auto; }

  .tfhp4 .entry {
    grid-template-rows:auto auto auto;
  }

  .tfhp4 .entry-copy,
  .tfhp4 .entry h3 {
    min-height:0;
  }

  .tfhp4 .entry-bottom {
    grid-template-columns:1fr;
    gap:4px;
    text-align:center;
  }

  .tfhp4 .entry-tag,
  .tfhp4 .entry-link {
    justify-content:center;
    text-align:center;
  }

  .tfhp4 .actions {
    grid-template-columns:1fr;
    width:100%;
  }

  .tfhp4 .feature-grid { grid-template-columns:1fr; }

  .tfhp4 .system-mosaic {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    min-height:0;
  }
  .tfhp4 .system-mosaic .large {
    grid-column:1 / -1;
    grid-row:auto;
  }
  .tfhp4 .system-mosaic .media-frame { min-height:260px; }

  .tfhp4 .tool-media.two,
  .tfhp4 .visualizer-media { grid-template-columns:1fr; }
  .tfhp4 .tool-media.two .media-frame { min-height:330px; }

  .tfhp4 .visualizer-side { grid-template-columns:1fr 1fr; grid-template-rows:auto; }

  .tfhp4 .dark-gallery { grid-template-columns:1fr; }
  .tfhp4 .product-grid { grid-template-columns:1fr; }

  .tfhp4 .community-photo img { min-height:340px; }
  .tfhp4 .steps { grid-template-columns:1fr; }

  .tfhp4 .modal { padding:0; }
  .tfhp4 .dialog { width:100%; height:100%; max-height:none; }
}


/* V0.5.4 — BEZ PASÓW I LINII POMIĘDZY SEKCJAMI */
html body .tfhp4 .section + .section,
html body .tfhp4 .section.dark + .section,
html body .tfhp4 .final-cta,
html body .tfhp4 .status-strip {
  border-top:0 !important;
  border-bottom:0 !important;
}

html body .tfhp4 .dark .section-tag,
html body .tfhp4 .dark .section-overline {
  color:#ef7777 !important;
  background:transparent !important;
}

/* V0.5.5 — GŁÓWNE OBRAZY BEZ ETYKIET I NAKŁADEK */
html body .tfhp4 .single-media .media-label {
  display:none !important;
}


/* V0.5.5 — PEŁNOSZEROKI NAGŁÓWEK GŁÓWNEJ SEKCJI SYSTEMOWEJ */
.tfhp4 .system-heading {
  margin-bottom:46px;
}

.tfhp4 .system-title {
  width:100%;
  max-width:none;
  text-transform:uppercase;
}

.tfhp4 .system-layout {
  align-items:center;
}

.tfhp4 .system-subtitle {
  margin:0 0 20px;
  color:var(--slate);
  font-size:clamp(22px,2vw,29px);
  line-height:1.28;
  font-weight:700;
}

.tfhp4 .system-extra {
  margin-top:16px;
}

@media (max-width:1050px) {
  .tfhp4 .system-heading {
    margin-bottom:32px;
  }
}

@media (max-width:720px) {
  .tfhp4 .system-heading {
    margin-bottom:26px;
  }
}


/* V0.5.6 — GRANATOWE TŁO GŁĘBOKO POD TRZEMA GÓRNYMI KAFLAMI */
.tfhp4 .perioda {
  position:relative;
  z-index:0;
}

.tfhp4 .perioda::after {
  content:"";
  position:absolute;
  z-index:0;
  left:0;
  right:0;
  bottom:-340px;
  height:340px;
  background:linear-gradient(110deg,#14263f,#1e385a);
  pointer-events:none;
}

.tfhp4 .perioda-grid {
  position:relative;
  z-index:1;
}

.tfhp4 .entries {
  position:relative;
  z-index:5;
}


/* V0.5.6 — NAPRZEMIENNY UKŁAD SEKCJI */
.tfhp4 .section-layout.image-left {
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
}

.tfhp4 .section-layout.image-right {
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}

@media (max-width:1050px) {
  .tfhp4 .section-layout.image-left,
  .tfhp4 .section-layout.image-right {
    grid-template-columns:1fr;
  }

  .tfhp4 .section-layout .section-copy {
    order:1;
  }

  .tfhp4 .section-layout .single-media {
    order:2;
  }
}


/* V0.5.6 — WYJĄTKOWO MOCNY TYTUŁ GŁÓWNEJ SEKCJI */
html body .tfhp4 .system-title {
  font-size:clamp(50px,6vw,88px) !important;
  line-height:.96 !important;
  font-weight:800 !important;
  letter-spacing:-.04em !important;
}

.tfhp4 .product-card {
  box-shadow:0 16px 38px rgba(28,44,61,.10);
}

.tfhp4 .dark .access-card {
  border-color:rgba(255,255,255,.18);
}


/* V0.5.7 — OBSZERNIEJSZE, CZYTELNE POPUPY */
html body .tfhp4 .dialog {
  width:min(1120px,100%) !important;
  max-height:92vh !important;
}

html body .tfhp4 .dialog-head {
  align-items:flex-start !important;
  padding:23px 28px !important;
}

.tfhp4 .dialog-head > div {
  min-width:0;
}

.tfhp4 .dialog-overline {
  margin:0 0 7px;
  color:var(--red);
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

html body .tfhp4 .dialog-head h3 {
  max-width:850px;
  font-size:clamp(25px,2.6vw,34px) !important;
  line-height:1.12 !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}

html body .tfhp4 .dialog-body {
  padding:34px !important;
}

.tfhp4 .modal-intro {
  max-width:960px;
  margin-bottom:28px;
  padding:0 0 25px;
  border-bottom:1px solid var(--line);
}

.tfhp4 .modal-intro p {
  margin:0;
  color:var(--text);
  font-size:16px;
  line-height:1.72;
}

.tfhp4 .modal-intro p + p {
  margin-top:12px;
}

html body .tfhp4 .steps.steps-detailed {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
}

.tfhp4 .steps-detailed .step {
  position:relative;
  min-height:220px;
  padding:25px 25px 24px;
  background:var(--soft);
  border:1px solid var(--line);
  border-top:3px solid var(--red);
}

.tfhp4 .step-number {
  display:block;
  margin-bottom:16px;
  color:#cfd8e0;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
}

.tfhp4 .steps-detailed .step b {
  margin-bottom:11px;
  color:var(--blue);
  font-size:18px;
  line-height:1.25;
  font-weight:800;
}

.tfhp4 .steps-detailed .step p {
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.68;
}

.tfhp4 .modal-note {
  margin-top:24px;
  padding:21px 23px;
  background:#fff;
  border:1px solid var(--blue);
  border-left:5px solid var(--red);
}

.tfhp4 .modal-note b {
  display:block;
  margin-bottom:6px;
  color:var(--blue);
  font-size:15px;
  line-height:1.3;
}

.tfhp4 .modal-note p {
  margin:0;
  color:var(--text);
  font-size:14px;
  line-height:1.65;
}

@media (max-width:760px) {
  html body .tfhp4 .dialog-head {
    padding:18px 18px !important;
  }

  html body .tfhp4 .dialog-body {
    padding:22px 18px 28px !important;
  }

  html body .tfhp4 .steps.steps-detailed {
    grid-template-columns:1fr !important;
  }

  .tfhp4 .steps-detailed .step {
    min-height:0;
  }

  .tfhp4 .modal-intro p {
    font-size:15px;
  }
}


/* V0.5.8 — ORYGINALNA SEKCJA PERIODY W PALECIE NOWEJ STRONY */
html body .tfhp4 .perioda.perioda-original {
  padding:60px 0 150px !important;
  color:#ffffff !important;
  background:linear-gradient(110deg,#14263f,#1e385a) !important;
  background-color:#14263f !important;
}

html body .tfhp4 .perioda.perioda-original::after {
  display:none !important;
  content:none !important;
}

.tfhp4 .perioda-original .perioda-grid {
  grid-template-columns:minmax(0,1fr) minmax(420px,460px);
  align-items:center;
  gap:56px;
}

.tfhp4 .perioda-story {
  min-width:0;
  padding-right:20px;
}

.tfhp4 .perioda-original .eyebrow {
  margin-bottom:15px;
  color:var(--red);
}

html body .tfhp4 .perioda-original h1 {
  margin:0 0 25px;
  max-width:780px;
  color:#ffffff !important;
  font-size:clamp(42px,4.5vw,62px) !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  letter-spacing:-.025em !important;
}

.tfhp4 .perioda-original-copy {
  max-width:780px;
  margin-bottom:38px;
}

html body .tfhp4 .perioda-original-copy p {
  margin:0;
  color:#aeb9c5 !important;
  font-size:18px !important;
  line-height:1.62 !important;
}

.tfhp4 .perioda-original-copy p + p {
  margin-top:28px !important;
}

html body .tfhp4 .perioda-original-copy strong {
  color:#ffffff !important;
  font-weight:800 !important;
}

html body .tfhp4 .perioda-original-copy .perioda-important {
  color:#25d366 !important;
}

html body .tfhp4 .perioda-actions {
  width:min(100%,600px) !important;
  max-width:600px !important;
}

/* Oryginalne nachodzenie trzech istniejących kafli. */
html body .tfhp4 .entries {
  margin-top:-90px !important;
}

/* Licznik zachowuje oryginalną zawartość, ale dostaje paletę nowej strony. */
.tfhp4 .perioda-slot {
  display:flex;
  justify-content:flex-end;
  width:100%;
}

.tfhp4 .perioda-slot > * {
  width:100%;
  max-width:460px;
}

html body .tfhp4 .perioda-slot .tfhp4-period-card {
  color:#ffffff !important;
  background:#26374c !important;
  background-color:#26374c !important;
  border-color:rgba(255,255,255,.15) !important;
  border-top-color:var(--red) !important;
  box-shadow:0 22px 48px rgba(6,18,32,.24) !important;
}

html body .tfhp4 .perioda-slot .tfhp4-period-unit {
  color:#ffffff !important;
  background:#31465f !important;
  background-color:#31465f !important;
  border-color:#50647a !important;
  box-shadow:none !important;
}

html body .tfhp4 .perioda-slot .tfhp4-period-unit * {
  color:inherit !important;
}

.tfhp4 .modal-story-original {
  max-width:960px;
  margin-bottom:0;
}

.tfhp4 .modal-story-original strong {
  color:var(--blue);
}

@media (max-width:1050px) {
  .tfhp4 .perioda-original .perioda-grid {
    grid-template-columns:1fr;
  }

  .tfhp4 .perioda-story {
    padding-right:0;
  }

  .tfhp4 .perioda-slot {
    justify-content:flex-start;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .perioda.perioda-original {
    padding:44px 0 122px !important;
  }

  html body .tfhp4 .perioda-original h1 {
    font-size:clamp(38px,11vw,52px) !important;
  }

  html body .tfhp4 .perioda-original-copy p {
    font-size:16px !important;
  }
}


/* V0.5.9 — ZWARTA GÓRA TRZECH KAFLI I ETYKIETY NA OBRAZACH */

/* Mniejszy odstęp między trzema kaflami a sekcją TOOLSFORGE. */
html body .tfhp4 .entries {
  padding-bottom:24px !important;
}

html body .tfhp4 .system-section {
  padding-top:56px !important;
}

/* Karta kończy się na obrazie — bez pustego dolnego paska. */
html body .tfhp4 .entry {
  display:grid !important;
  grid-template-rows:132px auto !important;
}

/* Mniejsze i jednakowe oddechy nad oraz pod tytułem. */
html body .tfhp4 .entry-copy {
  min-height:132px !important;
  padding:17px 24px 15px !important;
  justify-content:center !important;
}

html body .tfhp4 .entry-copy .eyebrow {
  min-height:0 !important;
  margin:0 0 7px !important;
  line-height:1.2 !important;
}

/* Cieńszy tytuł górnych kafli. */
html body .tfhp4 .entry h3 {
  min-height:0 !important;
  margin:0 !important;
  font-size:26px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  letter-spacing:-.018em !important;
}

/* Kwadrat obrazu z niewielkim, równym oddechem. */
html body .tfhp4 .entry-art {
  position:relative !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  margin:0 !important;
  padding:10px !important;
  overflow:hidden !important;
  background:var(--soft) !important;
  border-top:1px solid var(--line) !important;
  border-bottom:0 !important;
  box-sizing:border-box !important;
}

html body .tfhp4 .entry-art img {
  display:block !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  object-position:center !important;
  border:1px solid #555e68 !important;
  box-sizing:border-box !important;
}

/* Jednakowa etykieta w prawym dolnym rogu każdego obrazu. */
html body .tfhp4 .entry-image-label {
  position:absolute !important;
  z-index:3 !important;
  right:10px !important;
  bottom:10px !important;
  width:190px !important;
  height:40px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 12px !important;
  color:#ffffff !important;
  background:#b23434 !important;
  border:0 !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:.045em !important;
  text-align:center !important;
  text-transform:uppercase !important;
  box-sizing:border-box !important;
  pointer-events:none !important;
}

/* Stare dolne elementy nie mogą odzyskać miejsca przez style motywu. */
html body .tfhp4 .entry-bottom,
html body .tfhp4 .entry-tag,
html body .tfhp4 .entry-link {
  display:none !important;
}

@media (max-width:1050px) {
  html body .tfhp4 .entry {
    grid-template-rows:132px auto !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .entries {
    padding-bottom:14px !important;
  }

  html body .tfhp4 .system-section {
    padding-top:46px !important;
  }

  html body .tfhp4 .entry {
    grid-template-rows:auto auto !important;
  }

  html body .tfhp4 .entry-copy {
    min-height:0 !important;
    padding:18px 20px 16px !important;
  }

  html body .tfhp4 .entry-image-label {
    right:10px !important;
    bottom:10px !important;
    width:180px !important;
    height:38px !important;
  }
}
\n/* V0.6.0 — MONTSERRAT DLA TYTUŁÓW I DOPASOWANY PANEL PERIODY */

/* Montserrat dotyczy nagłówków, nazw sekcji, kafli i popupów.
   Teksty opisowe zachowują dotychczasową, lżejszą czcionkę. */
html body .tfhp4 h1,
html body .tfhp4 h2,
html body .tfhp4 h3,
html body .tfhp4 .title,
html body .tfhp4 .entry h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .community-link h3,
html body .tfhp4 .dialog-head h3,
html body .tfhp4 .steps-detailed .step b,
html body .tfhp4 .perioda-big,
html body .tfhp4 .section-tag,
html body .tfhp4 .section-overline,
html body .tfhp4 .eyebrow,
html body .tfhp4 .dialog-overline {
  font-family:"Montserrat","Segoe UI",Arial,sans-serif !important;
}

/* Więcej miejsca dla panelu licznika, ale bez rozpychania całej sekcji. */
html body .tfhp4 .perioda-original .perioda-grid {
  grid-template-columns:minmax(0,1fr) minmax(490px,525px) !important;
  gap:48px !important;
}

html body .tfhp4 .perioda-slot > * {
  width:100% !important;
  max-width:525px !important;
}

/* Panel otrzymuje granat z tej samej rodziny co tło sekcji. */
html body .tfhp4 .perioda-slot .tfhp4-period-card {
  color:#ffffff !important;
  background:linear-gradient(145deg,#193453,#203f63) !important;
  background-color:#193453 !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-top:4px solid #b23434 !important;
  box-shadow:0 22px 48px rgba(5,17,31,.26) !important;
}

/* Cztery pola czasu są czytelne, ale nadal należą do tej samej palety. */
html body .tfhp4 .perioda-slot .tfhp4-period-unit {
  color:#ffffff !important;
  background:#294866 !important;
  background-color:#294866 !important;
  border:1px solid #46627d !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

/* Usuwamy ewentualne szare tła zagnieżdżonych elementów panelu,
   które może narzucać oryginalna wtyczka Periody. */
html body .tfhp4 .perioda-slot .tfhp4-period-card > div,
html body .tfhp4 .perioda-slot .tfhp4-period-card > section,
html body .tfhp4 .perioda-slot .tfhp4-period-card > article {
  border-color:rgba(255,255,255,.12) !important;
}

/* Główny tytuł sekcji: trochę mniejszy i wyraźnie cieńszy. */
html body .tfhp4 .perioda-original h1 {
  max-width:760px !important;
  font-family:"Montserrat","Segoe UI",Arial,sans-serif !important;
  font-size:clamp(39px,3.75vw,54px) !important;
  line-height:1.10 !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

/* Pozostałe tytuły sekcji również korzystają z Montserrat,
   ale nie są sztucznie pogrubiane. */
html body .tfhp4 .title {
  font-weight:600 !important;
  letter-spacing:-.022em !important;
}

html body .tfhp4 .system-title {
  font-weight:700 !important;
}

html body .tfhp4 .entry h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .community-link h3 {
  font-weight:600 !important;
}

html body .tfhp4 .dialog-head h3 {
  font-weight:600 !important;
}

@media (max-width:1120px) {
  html body .tfhp4 .perioda-original .perioda-grid {
    grid-template-columns:minmax(0,1fr) minmax(430px,480px) !important;
    gap:38px !important;
  }

  html body .tfhp4 .perioda-slot > * {
    max-width:480px !important;
  }
}

@media (max-width:1050px) {
  html body .tfhp4 .perioda-original .perioda-grid {
    grid-template-columns:1fr !important;
  }

  html body .tfhp4 .perioda-slot > * {
    max-width:525px !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .perioda-original h1 {
    font-size:clamp(35px,9.5vw,47px) !important;
  }
}


/* V0.6.1 — WYRAŹNIE CIEŃSZE TYTUŁY MONTSERRAT */

/* Główny tytuł pierwszej sekcji. */
html body .tfhp4 .perioda-original h1 {
  font-weight:500 !important;
  letter-spacing:-.018em !important;
}

/* Główne tytuły wszystkich sekcji. */
html body .tfhp4 .title,
html body .tfhp4 .title.medium {
  font-weight:500 !important;
  letter-spacing:-.016em !important;
}

/* Ten tytuł pozostaje wyjątkowo mocniejszy, ale nie ciężki. */
html body .tfhp4 .system-title {
  font-weight:600 !important;
  letter-spacing:-.022em !important;
}

/* Tytuły trzech górnych kafli i wszystkich kart. */
html body .tfhp4 .entry h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .community-link h3 {
  font-weight:500 !important;
  letter-spacing:-.012em !important;
}

/* Tytuły popupów. */
html body .tfhp4 .dialog-head h3 {
  font-weight:500 !important;
  letter-spacing:-.012em !important;
}

/* Śródtytuły wewnątrz rozbudowanych popupów. */
html body .tfhp4 .steps-detailed .step b,
html body .tfhp4 .modal-note b,
html body .tfhp4 .system-subtitle {
  font-weight:600 !important;
}

/* Nagłówki wewnątrz panelu Periody — trochę lżejsze,
   ale liczby i główny zielony status pozostają czytelne. */
html body .tfhp4 .perioda-slot h1,
html body .tfhp4 .perioda-slot h2,
html body .tfhp4 .perioda-slot h3 {
  font-family:"Montserrat","Segoe UI",Arial,sans-serif !important;
  font-weight:600 !important;
}

@media (max-width:720px) {
  html body .tfhp4 .perioda-original h1,
  html body .tfhp4 .title,
  html body .tfhp4 .title.medium {
    font-weight:500 !important;
  }
}


/* V0.6.3 — TESTOWA TYPOGRAFIA BARLOW CONDENSED
   Impact usunięty. Punkt powrotu nadal: v0.6.1 — Montserrat. */

/* Główne tytuły strony i sekcji. */
html body .tfhp4 .perioda-original h1,
html body .tfhp4 .title,
html body .tfhp4 .title.medium,
html body .tfhp4 .system-title {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.005em !important;
}

/* Wyjątkowo mocniejszy tytuł głównej sekcji systemowej. */
html body .tfhp4 .system-title {
  font-weight:600 !important;
  letter-spacing:.002em !important;
}

/* Tytuły trzech górnych kafli oraz kart. */
html body .tfhp4 .entry h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .community-link h3 {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.008em !important;
}

/* Tytuły popupów. */
html body .tfhp4 .dialog-head h3 {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.006em !important;
}

/* Większe śródtytuły w popupach i sekcji systemowej. */
html body .tfhp4 .system-subtitle,
html body .tfhp4 .steps-detailed .step b,
html body .tfhp4 .modal-note b {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.008em !important;
}

/* Nagłówki wewnątrz panelu Periody. */
html body .tfhp4 .perioda-slot h1,
html body .tfhp4 .perioda-slot h2,
html body .tfhp4 .perioda-slot h3 {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-weight:600 !important;
  letter-spacing:.012em !important;
}

/* Lekka korekta rozmiaru, ponieważ Barlow Condensed jest węższa od Montserrat. */
html body .tfhp4 .perioda-original h1 {
  font-size:clamp(41px,3.95vw,56px) !important;
  line-height:1.06 !important;
}

html body .tfhp4 .title,
html body .tfhp4 .title.medium {
  line-height:1.03 !important;
}

html body .tfhp4 .system-title {
  font-size:clamp(50px,5.7vw,84px) !important;
  line-height:.98 !important;
}

@media (max-width:720px) {
  html body .tfhp4 .perioda-original h1 {
    font-size:clamp(36px,9.8vw,49px) !important;
  }
}


/* V0.6.4 — SPÓJNY SYSTEM TYPOGRAFICZNY BARLOW
   Barlow Condensed: tytuły.
   Barlow: wszystkie pozostałe teksty. */

/* Podstawowy krój całego prototypu. */
html body .tfhp4,
html body .tfhp4 p,
html body .tfhp4 li,
html body .tfhp4 span,
html body .tfhp4 a,
html body .tfhp4 button,
html body .tfhp4 input,
html body .tfhp4 select,
html body .tfhp4 textarea {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
}

/* Zwykłe teksty opisowe — spokojne i czytelne. */
html body .tfhp4 p,
html body .tfhp4 .lead,
html body .tfhp4 .perioda-original-copy p,
html body .tfhp4 .modal-intro p,
html body .tfhp4 .steps-detailed .step p,
html body .tfhp4 .modal-note p,
html body .tfhp4 .product-card p,
html body .tfhp4 .access-card p,
html body .tfhp4 .community-link p {
  font-weight:400 !important;
}

/* Wyróżnienia w akapitach bez zbyt ciężkiego efektu. */
html body .tfhp4 p strong,
html body .tfhp4 .perioda-original-copy strong,
html body .tfhp4 .lead strong {
  font-weight:600 !important;
}

/* Wszystkie właściwe tytuły. */
html body .tfhp4 .perioda-original h1,
html body .tfhp4 .title,
html body .tfhp4 .title.medium,
html body .tfhp4 .system-title,
html body .tfhp4 .entry h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .community-link h3,
html body .tfhp4 .dialog-head h3,
html body .tfhp4 .system-subtitle,
html body .tfhp4 .steps-detailed .step b,
html body .tfhp4 .modal-note b {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
}

/* Główne tytuły pozostają lekkie. */
html body .tfhp4 .perioda-original h1,
html body .tfhp4 .title,
html body .tfhp4 .title.medium,
html body .tfhp4 .entry h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .community-link h3,
html body .tfhp4 .dialog-head h3 {
  font-weight:500 !important;
}

/* Najważniejszy tytuł systemowy oraz większe śródtytuły. */
html body .tfhp4 .system-title,
html body .tfhp4 .system-subtitle,
html body .tfhp4 .steps-detailed .step b,
html body .tfhp4 .modal-note b {
  font-weight:600 !important;
}

/* Małe czerwone nadtytuły — Barlow regular, wyraźne, ale nie ciężkie. */
html body .tfhp4 .section-tag,
html body .tfhp4 .section-overline,
html body .tfhp4 .eyebrow,
html body .tfhp4 .dialog-overline,
html body .tfhp4 .entry-copy .eyebrow {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
}

/* Listy korzyści i małe elementy informacyjne. */
html body .tfhp4 .feature,
html body .tfhp4 .entry-image-label,
html body .tfhp4 .status-strip,
html body .tfhp4 .entry-tag,
html body .tfhp4 .entry-link {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-weight:600 !important;
}

/* Przyciski pozostają mocne i jednoznaczne. */
html body .tfhp4 .btn,
html body .tfhp4 a.btn,
html body .tfhp4 button.btn {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-weight:700 !important;
}

/* Panel Periody: opisy Barlow, nagłówki i cyfry Barlow Condensed. */
html body .tfhp4 .perioda-slot,
html body .tfhp4 .perioda-slot p,
html body .tfhp4 .perioda-slot span,
html body .tfhp4 .perioda-slot a {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
}

html body .tfhp4 .perioda-slot h1,
html body .tfhp4 .perioda-slot h2,
html body .tfhp4 .perioda-slot h3,
html body .tfhp4 .perioda-slot .tfhp4-period-unit,
html body .tfhp4 .perioda-slot .tfhp4-period-unit * {
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
}

html body .tfhp4 .perioda-slot h1,
html body .tfhp4 .perioda-slot h2,
html body .tfhp4 .perioda-slot h3 {
  font-weight:600 !important;
}

html body .tfhp4 .perioda-slot .tfhp4-period-unit,
html body .tfhp4 .perioda-slot .tfhp4-period-unit * {
  font-weight:700 !important;
}

/* Czytelność tekstów na jasnym tle. */
html body .tfhp4 .section:not(.dark) .lead,
html body .tfhp4 .section:not(.dark) p {
  color:#56616d;
}

/* Zachowanie czerwonych i zielonych wyróżnień Periody. */
html body .tfhp4 .perioda-important {
  font-weight:700 !important;
}

/* Drobna korekta list: mają być wyraźne, ale nie konkurować z tytułem. */
html body .tfhp4 .feature {
  line-height:1.42 !important;
}

/* Popupy: naturalna hierarchia tekstu. */
html body .tfhp4 .steps-detailed .step b {
  font-size:19px !important;
}

html body .tfhp4 .modal-note b {
  font-size:17px !important;
}


/* V0.6.5 — PRZYWRÓCENIE KOLORU TF RED DLA NADTYTUŁÓW */
html body .tfhp4 .section-tag,
html body .tfhp4 .section-overline,
html body .tfhp4 .eyebrow,
html body .tfhp4 .dialog-overline,
html body .tfhp4 .entry-copy .eyebrow,
html body .tfhp4 .perioda-original .eyebrow,
html body .tfhp4 .dark .section-tag,
html body .tfhp4 .dark .section-overline,
html body .tfhp4 .dark .eyebrow {
  color:#b23434 !important;
}

/* Ogólna reguła tekstu na jasnym tle nie może już nadpisywać nadtytułów. */
html body .tfhp4 .section:not(.dark) p.eyebrow,
html body .tfhp4 .section:not(.dark) p.section-overline,
html body .tfhp4 .section:not(.dark) .section-tag,
html body .tfhp4 .section:not(.dark) .entry-copy .eyebrow {
  color:#b23434 !important;
}


/* V0.6.6 — numery kroków w popupach w kolorze TF Red */
html body .tfhp4 .step-number { color:#b23434 !important; }


/* ================================================================
   V0.6.8 — FINALNY HYBRYDOWY PANEL PERIODY
   Kolorystyka z pierwszej propozycji + wnętrze i hierarchia z drugiej.
   ================================================================ */

/* Panel jest wyraźny, ale nadal należy do tej samej granatowej sekcji. */
html body .tfhp4 .perioda-slot .tfhp4-period-card {
  position:relative !important;
  overflow:hidden !important;
  color:#ffffff !important;
  background:linear-gradient(145deg,#24384f 0%,#293e56 54%,#24374d 100%) !important;
  background-color:#263a51 !important;
  border:1px solid rgba(197,213,229,.32) !important;
  border-top:4px solid #b23434 !important;
  box-shadow:
    0 22px 46px rgba(5,17,31,.22),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* Delikatna techniczna poświata, bez efektu szkła. */
html body .tfhp4 .perioda-slot .tfhp4-period-card::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(135deg,rgba(255,255,255,.025),transparent 38%,rgba(4,17,31,.06)) !important;
}

/* Zachowujemy strukturę oryginalnego licznika i usuwamy obce szarości. */
html body .tfhp4 .perioda-slot .tfhp4-period-card > div,
html body .tfhp4 .perioda-slot .tfhp4-period-card > section,
html body .tfhp4 .perioda-slot .tfhp4-period-card > article {
  position:relative !important;
  z-index:1 !important;
  border-color:rgba(208,222,235,.18) !important;
}

/* Cztery liczniki — odrobinę jaśniejsze od panelu, jak w makiecie. */
html body .tfhp4 .perioda-slot .tfhp4-period-unit {
  color:#ffffff !important;
  background:linear-gradient(180deg,#315778,#2b4e6d) !important;
  background-color:#2e5272 !important;
  border:1px solid rgba(190,211,230,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 7px 15px rgba(7,22,38,.10) !important;
}

html body .tfhp4 .perioda-slot .tfhp4-period-unit:hover {
  background:linear-gradient(180deg,#345d80,#2e5474) !important;
}

/* Wewnętrzna hierarchia zgodna z zaakceptowaną drugą propozycją. */
html body .tfhp4 .tfhp4-period-stage-label {
  color:#ffffff !important;
  opacity:.96 !important;
  letter-spacing:.055em !important;
}

html body .tfhp4 .tfhp4-period-stage-value {
  color:#00d45a !important;
  text-shadow:0 0 18px rgba(0,212,90,.10) !important;
}

html body .tfhp4 .tfhp4-period-countdown-label,
html body .tfhp4 .tfhp4-period-occupancy-label,
html body .tfhp4 .tfhp4-period-shipping-label {
  color:#f3f7fb !important;
}

/* Dolne okno wysyłek dostaje własną, czytelną warstwę. */
html body .tfhp4 .tfhp4-period-shipping-card {
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,rgba(20,47,68,.78),rgba(17,42,61,.84)) !important;
  border:1px solid rgba(190,211,230,.22) !important;
  border-left:4px solid #00d45a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html body .tfhp4 .tfhp4-period-shipping-value {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  color:#00d45a !important;
}

/* Ciężarówka jest częścią interfejsu, a nie ozdobnym clipartem. */
html body .tfhp4 .tfhp4-shipping-truck {
  flex:0 0 auto !important;
  width:31px !important;
  height:22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffffff !important;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.12)) !important;
}

html body .tfhp4 .tfhp4-shipping-truck svg {
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
}

html body .tfhp4 .tfhp4-shipping-truck path,
html body .tfhp4 .tfhp4-shipping-truck circle {
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:3 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Panel pozostaje trochę szerszy, ale nie dominuje nad lewą opowieścią. */
html body .tfhp4 .perioda-original .perioda-grid {
  grid-template-columns:minmax(0,1fr) minmax(500px,535px) !important;
  gap:50px !important;
}

html body .tfhp4 .perioda-slot > * {
  width:100% !important;
  max-width:535px !important;
}

@media (max-width:1120px) {
  html body .tfhp4 .perioda-original .perioda-grid {
    grid-template-columns:1fr !important;
  }

  html body .tfhp4 .perioda-slot > * {
    max-width:600px !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .tfhp4-shipping-truck {
    width:27px !important;
    height:20px !important;
  }
}


/* V0.6.9 — WĘŻSZA TREŚĆ NA DUŻYCH MONITORACH I CZTERY WEJŚCIA */

/* Na dużych ekranach treść nie rozciąga się już na 90% szerokości.
   Kolory sekcji nadal wypełniają całe okno. */
@media (min-width:1600px) {
  html body .tfhp4 .wrap {
    width:78% !important;
    max-width:1500px !important;
  }
}

/* Cztery równe, mniejsze kafle zamiast trzech bardzo szerokich. */
html body .tfhp4 .entry-grid {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
}

/* Przy czterech kolumnach nagłówki mogą być trochę bardziej zwarte. */
html body .tfhp4 .entry-copy {
  padding-left:20px !important;
  padding-right:20px !important;
}

html body .tfhp4 .entry h3 {
  font-size:23px !important;
  line-height:1.08 !important;
}

html body .tfhp4 .entry-image-label {
  width:184px !important;
  height:40px !important;
}

/* Średnie ekrany: dwa kafle w rzędzie. */
@media (min-width:721px) and (max-width:1180px) {
  html body .tfhp4 .entry-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Telefon: jeden kafel w rzędzie. */
@media (max-width:720px) {
  html body .tfhp4 .entry-grid {
    grid-template-columns:1fr !important;
  }

  html body .tfhp4 .entry h3 {
    font-size:25px !important;
  }
}


/* ================================================================
   V0.6.10 — JAŚNIEJSZY PANEL PERIODY W PALECIE TF
   Obudowa jest wyraźnie oddzielona od hero, ale nadal należy do tej
   samej granatowej rodziny kolorystycznej.
   ================================================================ */

/* Główna obudowa: TF Deep Blue zamiast ciemnego grafitu. */
html body .tfhp4 .perioda-slot .tfhp4-period-card {
  color:#ffffff !important;
  background:
    linear-gradient(145deg,#355574 0%,#2f4a68 52%,#2b4561 100%) !important;
  background-color:#2f4a68 !important;
  border:1px solid rgba(211,224,236,.58) !important;
  border-top:4px solid #b23434 !important;
  box-shadow:
    0 18px 38px rgba(6,20,36,.19),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Delikatna jasna warstwa techniczna zamiast przyciemniania panelu. */
html body .tfhp4 .perioda-slot .tfhp4-period-card::before {
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),transparent 40%,rgba(10,31,51,.045)) !important;
}

/* Wewnętrzne kontenery nie mogą przywracać ciemnoszarego tła widżetu. */
html body .tfhp4 .perioda-slot .tfhp4-period-card > div,
html body .tfhp4 .perioda-slot .tfhp4-period-card > section,
html body .tfhp4 .perioda-slot .tfhp4-period-card > article {
  background-color:transparent !important;
  border-color:rgba(211,224,236,.22) !important;
}

/* Pola czasu: wyraźnie jaśniejsze, ale nadal granatowe. */
html body .tfhp4 .perioda-slot .tfhp4-period-unit {
  color:#ffffff !important;
  background:linear-gradient(180deg,#416b91 0%,#385f83 100%) !important;
  background-color:#3b6388 !important;
  border:1px solid rgba(220,231,241,.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 6px 14px rgba(7,23,40,.11) !important;
}

html body .tfhp4 .perioda-slot .tfhp4-period-unit:hover {
  background:linear-gradient(180deg,#47749c 0%,#3d688e 100%) !important;
}

/* Dolne okno wysyłek ma własny poziom, lecz nie wraca do grafitu. */
html body .tfhp4 .tfhp4-period-shipping-card {
  background:linear-gradient(180deg,rgba(39,69,96,.94),rgba(34,62,87,.96)) !important;
  border:1px solid rgba(211,224,236,.31) !important;
  border-left:4px solid #00d45a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Ramka ma pozostać czytelna również na bardzo dużych monitorach. */
@media (min-width:1600px) {
  html body .tfhp4 .perioda-slot .tfhp4-period-card {
    border-color:rgba(220,232,242,.64) !important;
  }
}


/* V0.6.11 — TESTOWY MODUŁ OBRAZÓW W PIERWSZEJ SEKCJI
   Górny podgląd + 4 dolne miniatury przełączane po najechaniu. */
.tfhp4 .single-media--system {
  justify-content:flex-start;
}

.tfhp4 .tfhp4-image-module {
  width:100%;
  aspect-ratio:1 / 1;
  display:grid;
  grid-template-rows:minmax(0,1fr) 112px;
  gap:12px;
  padding:12px;
  background:linear-gradient(180deg,#fbfcfd 0%,#f4f7fa 100%);
  border:1px solid var(--line);
  box-shadow:0 22px 48px rgba(30,46,63,.14);
  position:relative;
}

.tfhp4 .tfhp4-image-module::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-top:3px solid var(--red);
}

.tfhp4 .tfhp4-image-module-preview {
  min-height:0;
  height:100%;
  background:#fff;
  border:1px solid #cfd6dd;
  box-shadow:none;
  position:relative;
  overflow:hidden;
}

.tfhp4 .tfhp4-image-module-preview::after {
  content:"PODGLĄD ETAPU";
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  padding:6px 10px;
  color:#ffffff;
  background:rgba(47,74,104,.88);
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.tfhp4 .tfhp4-image-module-preview img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.tfhp4 .tfhp4-image-module-thumbs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  min-height:0;
}

.tfhp4 .tfhp4-image-thumb {
  padding:0;
  margin:0;
  min-width:0;
  border:0;
  background:transparent;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

.tfhp4 .tfhp4-image-thumb-frame {
  display:block;
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#fff;
  border:1px solid #cfd6dd;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.tfhp4 .tfhp4-image-thumb img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.tfhp4 .tfhp4-image-thumb-label {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:6px 8px;
  color:#ffffff;
  background:linear-gradient(180deg,rgba(20,38,63,.18),rgba(20,38,63,.82));
  font-size:10px;
  line-height:1;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.tfhp4 .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
.tfhp4 .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
.tfhp4 .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame {
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px rgba(47,74,104,.25);
}

.tfhp4 .tfhp4-image-thumb:hover,
.tfhp4 .tfhp4-image-thumb:focus-visible,
.tfhp4 .tfhp4-image-thumb.is-active {
  outline:none;
}

.tfhp4 .tfhp4-image-thumb.is-active .tfhp4-image-thumb-label {
  background:linear-gradient(180deg,rgba(178,52,52,.18),rgba(178,52,52,.92));
}

@media (max-width:720px) {
  .tfhp4 .tfhp4-image-module {
    grid-template-rows:minmax(0,1fr) 92px;
    gap:10px;
    padding:10px;
  }

  .tfhp4 .tfhp4-image-module-thumbs {
    gap:10px;
  }

  .tfhp4 .tfhp4-image-thumb-label {
    min-height:24px;
    font-size:9px;
  }
}


/* V0.6.12 — KWADRATOWY MODUŁ OBRAZÓW I GRUBA BELKA PERIODY */

/* Cały moduł, razem z rzędem czterech miniatur, ma proporcję 1:1. */
html body .tfhp4 .tfhp4-image-module {
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  grid-template-rows:minmax(0,1fr) auto !important;
  overflow:hidden !important;
}

/* Główny podgląd nie może zachowywać własnego kwadratu narzuconego
   wcześniej wszystkim ramkom graficznym. */
html body .tfhp4 .single-media--system .tfhp4-image-module-preview,
html body .tfhp4 .single-media--system .tfhp4-image-module-preview.media-frame {
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
}

html body .tfhp4 .single-media--system .tfhp4-image-module-preview img {
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
}

/* Cztery dolne pola pozostają równymi kwadratami i mieszczą się
   w obrębie całego kwadratowego modułu. */
html body .tfhp4 .tfhp4-image-module-thumbs {
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:auto !important;
  min-height:0 !important;
}

html body .tfhp4 .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-thumb-frame {
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
}

/* Usunięcie czerwonej belki z modułu zdjęć. */
html body .tfhp4 .tfhp4-image-module::before {
  display:none !important;
  content:none !important;
}

/* Gruba belka TF Red na górze okna Periody. */
html body .tfhp4 .perioda-slot .tfhp4-period-card {
  border-top:8px solid #b23434 !important;
}

@media (max-width:720px) {
  html body .tfhp4 .tfhp4-image-module {
    grid-template-rows:minmax(0,1fr) auto !important;
  }
}


/* V0.6.13 — pionowy moduł zdjęć w sekcji Konfigurator Stołów */
html body .tfhp4 .tfhp4-image-module--vertical-left {
  grid-template-columns:112px minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  align-items:stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
  grid-column:2;
  grid-row:1;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column:1;
  grid-row:1;
  grid-template-columns:1fr !important;
  grid-template-rows:repeat(4, minmax(0,1fr)) !important;
  height:100%;
  align-content:stretch;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  height:100%;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column:1;
    grid-row:1;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column:1;
    grid-row:2;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:none !important;
    height:auto;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
    aspect-ratio:1 / 1 !important;
    height:auto !important;
  }
}


/* V0.6.14 — kwadratowe miniatury pionowe, ramki sekcyjne i wyrównanie tekstów */

/* 1) W sekcjach standardowych (poza pierwszą systemową) treść tekstowa idzie do góry,
   równo z panelem obrazu. */
html body .tfhp4 .section-layout .section-copy {
  justify-content:flex-start !important;
}

/* Wyjątek: pierwsza sekcja systemowa pozostaje bez zmian. */
html body .tfhp4 .system-layout .section-copy {
  justify-content:center !important;
}

/* 2) Ramki obrazów zależnie od typu sekcji.
   Jasne sekcje: TF Deep Blue. Ciemne sekcje: TF Red. */
html body .tfhp4 .section:not(.dark) .single-media .media-frame,
html body .tfhp4 .section:not(.dark) .tfhp4-image-module,
html body .tfhp4 .section:not(.dark) .tfhp4-image-module-preview,
html body .tfhp4 .section:not(.dark) .tfhp4-image-thumb-frame {
  border-color:#2f4a68 !important;
}

html body .tfhp4 .section.dark .single-media .media-frame,
html body .tfhp4 .section.dark .tfhp4-image-module,
html body .tfhp4 .section.dark .tfhp4-image-module-preview,
html body .tfhp4 .section.dark .tfhp4-image-thumb-frame {
  border-color:#b23434 !important;
}

/* 3) W sekcji Konfigurator Stołów pionowe miniatury są kwadratami. */
html body .tfhp4 .tfhp4-image-module--vertical-left {
  --tfhp4-vertical-thumb-size: 92px;
  grid-template-columns:var(--tfhp4-vertical-thumb-size) minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  align-items:stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column:1;
  grid-row:1;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:var(--tfhp4-vertical-thumb-size) !important;
  gap:12px !important;
  align-content:start !important;
  justify-items:stretch !important;
  height:auto !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
  width:var(--tfhp4-vertical-thumb-size) !important;
  height:var(--tfhp4-vertical-thumb-size) !important;
  min-height:var(--tfhp4-vertical-thumb-size) !important;
  max-width:100% !important;
  aspect-ratio:1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  width:100% !important;
  height:100% !important;
  aspect-ratio:1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
  grid-column:2;
  grid-row:1;
}

@media (max-width: 1100px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    --tfhp4-vertical-thumb-size: 82px;
  }
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column:1;
    grid-row:1;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column:1;
    grid-row:2;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    height:auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }
}


/* V0.6.15 — pionowe kwadraty na pełną wysokość + kolor tła paneli */

/* 1) W pionowym module miniatury są kwadratami i wypełniają całą wysokość modułu,
   tak jak odpowiednik poziomy. */
html body .tfhp4 .tfhp4-image-module--vertical-left {
  --tfhp4-vertical-gap: 12px;
  --tfhp4-vertical-thumb-size: calc((100% - (var(--tfhp4-vertical-gap) * 3)) / 4);
  gap: var(--tfhp4-vertical-gap) !important;
  grid-template-columns: var(--tfhp4-vertical-thumb-size) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-auto-rows: var(--tfhp4-vertical-thumb-size) !important;
  gap: var(--tfhp4-vertical-gap) !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  height: 100% !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* 2) Chodzi o tło paneli / tabel, a nie tylko o sam kolor obramowania.
   Jasne sekcje dostają panel TF Deep Blue, ciemne sekcje panel TF Red. */
html body .tfhp4 .section:not(.dark) .tfhp4-image-module,
html body .tfhp4 .section:not(.dark) .single-media .media-frame {
  background: #2f4a68 !important;
  border-color: #2f4a68 !important;
}

html body .tfhp4 .section.dark .tfhp4-image-module,
html body .tfhp4 .section.dark .single-media .media-frame {
  background: #b23434 !important;
  border-color: #b23434 !important;
}

/* W module wieloobrazowym wnętrza pozostają jasne i czytelne. */
html body .tfhp4 .tfhp4-image-module-preview,
html body .tfhp4 .tfhp4-image-thumb-frame {
  background: #ffffff !important;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    --tfhp4-vertical-gap: 12px;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column: 1;
    grid-row: 1;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    height: auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}


/* V0.6.16 — bardzo jasny szary paneli + duży podgląd zawsze jako kwadrat */

/* 1) Wszystkie panele obrazów przechodzą na bardzo jasny szary. */
html body .tfhp4 .tfhp4-image-module,
html body .tfhp4 .single-media .media-frame {
  background: #eef2f5 !important;
  border-color: #d9e0e7 !important;
}

/* Delikatna techniczna oprawa wewnątrz pozostaje czytelna. */
html body .tfhp4 .tfhp4-image-module-preview,
html body .tfhp4 .tfhp4-image-thumb-frame {
  background: #ffffff !important;
  border-color: #d6dde5 !important;
}

/* 2) Duży obraz ma nadal być kwadratem i dopasować się do jednego z boków. */
html body .tfhp4 .tfhp4-image-module-preview,
html body .tfhp4 .single-media .media-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html body .tfhp4 .tfhp4-image-module-preview img,
html body .tfhp4 .single-media .media-frame img {
  display: block !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 auto !important;
}

/* V0.6.17 — neutralne kolory paneli + poziomy moduł: główny podgląd 4:3 */

/* 1) Cofnięcie kolorów tabel/paneli: bez TF Red i bez TF Deep Blue.
   Wszystkie panele dostają neutralny, bardzo jasny szary. */
html body .tfhp4 .section:not(.dark) .tfhp4-image-module,
html body .tfhp4 .section:not(.dark) .single-media .media-frame,
html body .tfhp4 .section.dark .tfhp4-image-module,
html body .tfhp4 .section.dark .single-media .media-frame,
html body .tfhp4 .tfhp4-image-module,
html body .tfhp4 .single-media .media-frame {
  background: #f2f4f7 !important;
  border-color: #d6dde5 !important;
}

html body .tfhp4 .tfhp4-image-module-preview,
html body .tfhp4 .tfhp4-image-thumb-frame {
  background: #ffffff !important;
  border-color: #d6dde5 !important;
}

/* 2) W module poziomym duży podgląd pokazuje normalny obraz 4:3,
   a na dole pozostają kwadratowe miniatury. */
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-module-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-module-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto !important;
}

/* 3) Miniatury w poziomym module zostają kwadratowe. */
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb-frame {
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* V0.6.18 — pionowy moduł: 3 kwadraty, kwadratowy podgląd, mniejsza całość */

html body .tfhp4 .tfhp4-image-module--vertical-left {
  --tfhp4-vertical-gap: 12px;
  --tfhp4-vertical-thumb-size: calc((100% - (var(--tfhp4-vertical-gap) * 3)) / 4);
  display: grid !important;
  grid-template-columns: var(--tfhp4-vertical-thumb-size) calc((var(--tfhp4-vertical-thumb-size) * 3) + (var(--tfhp4-vertical-gap) * 2)) !important;
  grid-template-rows: auto !important;
  gap: var(--tfhp4-vertical-gap) !important;
  align-items: start !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, var(--tfhp4-vertical-thumb-size)) !important;
  grid-auto-rows: unset !important;
  gap: var(--tfhp4-vertical-gap) !important;
  width: var(--tfhp4-vertical-thumb-size) !important;
  height: calc((var(--tfhp4-vertical-thumb-size) * 3) + (var(--tfhp4-vertical-gap) * 2)) !important;
  align-content: start !important;
  justify-items: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: calc((var(--tfhp4-vertical-thumb-size) * 3) + (var(--tfhp4-vertical-gap) * 2)) !important;
  height: calc((var(--tfhp4-vertical-thumb-size) * 3) + (var(--tfhp4-vertical-gap) * 2)) !important;
  aspect-ratio: 1 / 1 !important;
  justify-self: stretch !important;
  align-self: start !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}


/* V0.6.19 — pionowy moduł: 1 duży kwadrat + 3 kwadratowe miniatury na wysokość podglądu */
html body .tfhp4 .tfhp4-image-module--vertical-left {
  --tfhp4-v19-gap: 12px;
  --tfhp4-v19-thumb-size: calc((100% - (var(--tfhp4-v19-gap) * 3)) / 4);
  --tfhp4-v19-preview-size: calc((var(--tfhp4-v19-thumb-size) * 3) + (var(--tfhp4-v19-gap) * 2));
  display: grid !important;
  grid-template-columns: var(--tfhp4-v19-thumb-size) var(--tfhp4-v19-preview-size) !important;
  grid-template-rows: var(--tfhp4-v19-preview-size) !important;
  gap: var(--tfhp4-v19-gap) !important;
  align-items: start !important;
  justify-content: start !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, var(--tfhp4-v19-thumb-size)) !important;
  gap: var(--tfhp4-v19-gap) !important;
  width: var(--tfhp4-v19-thumb-size) !important;
  height: var(--tfhp4-v19-preview-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: var(--tfhp4-v19-preview-size) !important;
  height: var(--tfhp4-v19-preview-size) !important;
  aspect-ratio: 1 / 1 !important;
  align-self: start !important;
  justify-self: start !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }
}


/* V0.6.20 — właściwy układ pionowego modułu:
   3 kwadratowe miniatury po lewej + 1 duży kwadrat po prawej. */
html body .tfhp4 .tfhp4-image-module--vertical-left {
  --tfhp4-v20-gap: 12px;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template-columns: calc(25% - 9px) calc(75% - 3px) !important;
  grid-template-rows: auto !important;
  gap: var(--tfhp4-v20-gap) !important;
  align-items: start !important;
  justify-content: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: start !important;
  justify-self: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--tfhp4-v20-gap) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    height: auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}


/* V0.6.21 — poprawka faktycznego układu pionowego modułu
   Po lewej: 3 kwadraty. Po prawej: jeden duży kwadrat.
   Cała wysokość modułu wynika z dużego kwadratu, bez pustego pola pod spodem. */
html body .tfhp4 .tfhp4-image-module--vertical-left {
  --tfhp4-v21-gap: 12px;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  display: grid !important;
  grid-template-columns: calc((100% - (var(--tfhp4-v21-gap) * 3)) / 4) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--tfhp4-v21-gap) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  box-sizing: border-box !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--tfhp4-v21-gap) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-left {
    aspect-ratio: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-preview {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-module-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}


/* V0.6.22 — neutralne szare ramki miniatur w układzie poziomym i pionowym */
html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb-frame {
  border-color:#cfd6dd !important;
}

html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame {
  border-color:#9faab6 !important;
  box-shadow:inset 0 0 0 1px rgba(159,170,182,.45) !important;
}


/* V0.6.23 — miniatury zawsze z jasnoszarą ramką jak główne okno */
html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb-frame {
  border-color:#d6dde5 !important;
}

html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module:not(.tfhp4-image-module--vertical-left) .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame {
  border-color:#d6dde5 !important;
  box-shadow:none !important;
}


/* V0.6.24 — pionowy układ miniatur: zawsze jasnoszare cienkie obramowanie */
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame {
  border:1px solid #d6dde5 !important;
  border-color:#d6dde5 !important;
  box-shadow:none !important;
  outline:none !important;
}


/* V0.6.25 — pionowy układ: definitywne usunięcie czerwieni z miniatur */
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame {
  border:1px solid #d6dde5 !important;
  border-top-color:#d6dde5 !important;
  border-right-color:#d6dde5 !important;
  border-bottom-color:#d6dde5 !important;
  border-left-color:#d6dde5 !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Czerwony pasek/poświata aktywnej miniatury w pionowym układzie też znika,
   żeby miniatura w stanie spoczynku nie wyglądała na obramowaną na czerwono. */
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb.is-active .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:hover .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-left .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-label {
  background:linear-gradient(180deg,rgba(20,38,63,.18),rgba(20,38,63,.82)) !important;
}


/* V0.6.28 — kolejne sekcje na wzór sekcji Konfigurator Stołów.
   Nie ruszamy sekcji wzorcowej: .tfhp4-image-module--vertical-left pozostaje bez zmian.
   Tu dodajemy wyłącznie odbicie układu dla modułów z obrazem po prawej stronie. */
html body .tfhp4 .tfhp4-image-module--vertical-right {
  --tfhp4-v21-gap: 12px;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) calc((100% - (var(--tfhp4-v21-gap) * 3)) / 4) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--tfhp4-v21-gap) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  box-sizing: border-box !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-module-preview {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-module-thumbs {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--tfhp4-v21-gap) !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb-frame {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-module-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb.is-active .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb:hover .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb:focus .tfhp4-image-thumb-frame,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-frame {
  border:1px solid #d6dde5 !important;
  border-top-color:#d6dde5 !important;
  border-right-color:#d6dde5 !important;
  border-bottom-color:#d6dde5 !important;
  border-left-color:#d6dde5 !important;
  box-shadow:none !important;
  outline:none !important;
}

html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb.is-active .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb:hover .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb:focus .tfhp4-image-thumb-label,
html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb:focus-visible .tfhp4-image-thumb-label {
  background:linear-gradient(180deg,rgba(20,38,63,.18),rgba(20,38,63,.82)) !important;
}

@media (max-width: 900px) {
  html body .tfhp4 .tfhp4-image-module--vertical-right {
    aspect-ratio: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-module-preview {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-module-thumbs {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb,
  html body .tfhp4 .tfhp4-image-module--vertical-right .tfhp4-image-thumb-frame {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}


/* V0.6.29 — usunięcie etykiety PODGLĄD ETAPU z okien podglądu */
html body .tfhp4 .tfhp4-image-module-preview::after {
  content:none !important;
  display:none !important;
}

/* V0.6.29 — nowa sekcja AKCESORIA TOOLSFORGE */
html body .tfhp4 .accessories-section {
  background:#ffffff;
}

html body .tfhp4 .accessories-showcase {
  display:grid;
  grid-template-columns:1.08fr .92fr;
  grid-template-rows:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-self:start;
}

html body .tfhp4 .accessory-tile {
  min-height:150px;
  display:grid;
  grid-template-columns:150px minmax(0, 1fr);
  gap:18px;
  align-items:center;
  background:#f7f8fa;
  border:1px solid #d6dde5;
  box-shadow:0 18px 42px rgba(30,46,63,.10);
  padding:14px;
}

html body .tfhp4 .accessory-tile--large {
  grid-row:1 / span 3;
  grid-template-columns:1fr;
  align-content:start;
}

html body .tfhp4 .accessory-tile img {
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
  background:#ffffff;
  border:1px solid #d6dde5;
}

html body .tfhp4 .accessory-tile h3 {
  margin:0 0 8px;
  color:var(--blue);
  font-size:22px;
  line-height:1.08;
  font-weight:700;
}

html body .tfhp4 .accessory-tile p {
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.55;
}

html body .tfhp4 .accessory-tile--large h3 {
  font-size:28px;
  margin-top:18px;
}

@media (max-width:1100px) {
  html body .tfhp4 .accessories-showcase {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }

  html body .tfhp4 .accessory-tile--large {
    grid-row:auto;
  }

  html body .tfhp4 .accessory-tile,
  html body .tfhp4 .accessory-tile--large {
    grid-template-columns:1fr;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .accessories-showcase {
    grid-template-columns:1fr;
  }

  html body .tfhp4 .accessory-tile h3,
  html body .tfhp4 .accessory-tile--large h3 {
    font-size:22px;
  }
}


/* V0.6.41 — sekcja ToolsForge: własne obrazy 4,3,2,1 i pełne wypełnienie dużego podglądu */
html body .tfhp4 .single-media--system .tfhp4-image-module-preview {
  overflow: hidden !important;
}

html body .tfhp4 .single-media--system .tfhp4-image-module-preview img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
}

/* V0.6.59 — dopracowanie sekcji „Proste zasady dostępu” */
html body .tfhp4 .access-grid {
  align-items:stretch !important;
}

html body .tfhp4 .access-card {
  height:100% !important;
}

html body .tfhp4 .access-card.visual .access-copy {
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  padding:24px !important;
}

html body .tfhp4 .access-card.visual .access-copy p {
  margin:11px 0 0 !important;
  color:#5f6874 !important;
  opacity:1 !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

html body .tfhp4 .access-card.visual .access-copy .card-action {
  margin-top:auto !important;
  padding-top:24px !important;
}

html body .tfhp4 .access-card-free {
  padding:0 !important;
  overflow:hidden !important;
}

html body .tfhp4 .free-access-graphic {
  position:relative !important;
  display:flex !important;
  aspect-ratio:1 / 1 !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  padding:25px !important;
  overflow:hidden !important;
  color:#ffffff !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),transparent 38%),
    #142f4f !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
}

html body .tfhp4 .free-access-graphic::after {
  content:"TF" !important;
  position:absolute !important;
  right:-20px !important;
  bottom:-45px !important;
  color:rgba(255,255,255,.045) !important;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
  font-size:190px !important;
  font-weight:700 !important;
  line-height:1 !important;
  pointer-events:none !important;
}

html body .tfhp4 .free-access-kicker {
  position:relative !important;
  z-index:1 !important;
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
}

html body .tfhp4 .free-access-price {
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  align-items:flex-end !important;
  align-self:center !important;
  justify-content:center !important;
  min-width:190px !important;
  padding:13px 24px 12px !important;
  color:#142f4f !important;
  background:#ffffff !important;
  border:8px solid #b23434 !important;
  box-shadow:0 14px 28px rgba(0,0,0,.18) !important;
}

html body .tfhp4 .free-access-price span {
  color:#142f4f !important;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
  font-size:86px !important;
  font-weight:700 !important;
  line-height:.78 !important;
}

html body .tfhp4 .free-access-price small {
  margin:0 0 2px 7px !important;
  color:#b23434 !important;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
  font-size:34px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

html body .tfhp4 .free-access-product {
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  max-width:290px !important;
  color:#ffffff !important;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
  font-size:26px !important;
  font-weight:600 !important;
  line-height:1.04 !important;
}

html body .tfhp4 .free-access-ribbon {
  position:relative !important;
  z-index:1 !important;
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  padding:8px 11px !important;
  color:#ffffff !important;
  background:#b23434 !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.07em !important;
}

html body .tfhp4 .access-card-free .access-copy h3 {
  margin-top:0 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits {
  margin:17px 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  color:#2f3742 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits li {
  position:relative !important;
  padding-left:19px !important;
  color:#2f3742 !important;
  font-size:14px !important;
  line-height:1.4 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits li::before {
  content:"" !important;
  position:absolute !important;
  top:.48em !important;
  left:0 !important;
  width:7px !important;
  height:7px !important;
  background:#b23434 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits li + li {
  margin-top:9px !important;
}

@media (max-width:720px) {
  html body .tfhp4 .free-access-price {
    min-width:165px !important;
  }

  html body .tfhp4 .free-access-price span {
    font-size:72px !important;
  }

  html body .tfhp4 .free-access-product {
    font-size:23px !important;
  }
}


/* V0.6.60 — karta bezpłatnego startu obejmuje cały ekosystem ToolsForge */
html body .tfhp4 .free-access-price {
  min-width:0 !important;
  padding:0 !important;
  color:#ffffff !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .free-access-price span {
  color:#ffffff !important;
  font-size:118px !important;
  line-height:.72 !important;
  text-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}

html body .tfhp4 .free-access-price small {
  margin:0 0 1px 8px !important;
  color:#d94747 !important;
  font-size:40px !important;
  line-height:1 !important;
}

html body .tfhp4 .free-access-product {
  max-width:330px !important;
  font-size:28px !important;
  line-height:1.02 !important;
}

html body .tfhp4 .free-access-ribbon {
  width:100% !important;
  padding:9px 11px !important;
  text-align:center !important;
}

html body .tfhp4 .access-card-free .access-copy > p {
  color:#5f6874 !important;
  opacity:1 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits-detailed {
  margin-top:15px !important;
}

html body .tfhp4 .access-card-free .free-access-benefits-detailed li {
  padding-left:18px !important;
  color:#394553 !important;
  font-size:13px !important;
  line-height:1.42 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits-detailed li strong {
  color:#2f4a68 !important;
  font-weight:700 !important;
}

html body .tfhp4 .access-card-free .free-access-benefits-detailed li + li {
  margin-top:10px !important;
}

@media (max-width:720px) {
  html body .tfhp4 .free-access-price span {
    font-size:94px !important;
  }

  html body .tfhp4 .free-access-price small {
    font-size:34px !important;
  }

  html body .tfhp4 .free-access-product {
    font-size:24px !important;
  }
}


/* V0.6.61 — spójny układ kart dostępu i szczegóły bezpłatnego startu w części graficznej */
html body .tfhp4 .access-card.visual .access-copy h3 {
  margin:0 !important;
}

html body .tfhp4 .access-card.visual .access-copy {
  min-height:214px !important;
}

html body .tfhp4 .access-card-free .free-access-graphic {
  width:auto !important;
  margin:0 12px !important;
  padding:20px 20px 16px !important;
  color:#2f3742 !important;
  background:#f3f5f7 !important;
  border-right:1px solid #e3e6ea !important;
  border-bottom:1px solid #e3e6ea !important;
  border-left:1px solid #e3e6ea !important;
}

html body .tfhp4 .access-card-free .free-access-graphic::after {
  right:-12px !important;
  bottom:-34px !important;
  color:rgba(47,74,104,.055) !important;
  font-size:176px !important;
}

html body .tfhp4 .access-card-free .free-access-kicker {
  color:#b23434 !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
}

html body .tfhp4 .access-card-free .free-access-price {
  margin-top:2px !important;
}

html body .tfhp4 .access-card-free .free-access-price span {
  color:#b23434 !important;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
  font-size:92px !important;
  font-weight:700 !important;
  line-height:.75 !important;
  text-shadow:none !important;
}

html body .tfhp4 .access-card-free .free-access-price small {
  margin:0 0 2px 6px !important;
  color:#2f4a68 !important;
  font-size:34px !important;
}

html body .tfhp4 .free-access-graphic-benefits {
  position:relative !important;
  z-index:1 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  margin:2px 0 8px !important;
}

html body .tfhp4 .free-access-graphic-benefits > div {
  min-height:56px !important;
  padding:8px 9px !important;
  background:rgba(255,255,255,.78) !important;
  border-left:3px solid #b23434 !important;
}

html body .tfhp4 .free-access-graphic-benefits strong {
  display:block !important;
  color:#2f4a68 !important;
  font-size:10px !important;
  line-height:1.1 !important;
  letter-spacing:.06em !important;
}

html body .tfhp4 .free-access-graphic-benefits span {
  display:block !important;
  margin-top:4px !important;
  color:#4f5b68 !important;
  font-size:10px !important;
  line-height:1.25 !important;
}

html body .tfhp4 .access-card-free .free-access-product {
  margin-top:auto !important;
  max-width:none !important;
  color:#2f4a68 !important;
  font-size:22px !important;
  line-height:1 !important;
}

html body .tfhp4 .access-card-free .free-access-ribbon {
  margin-top:8px !important;
}

html body .tfhp4 .access-card-free .access-copy > p {
  margin-top:11px !important;
}

@media (max-width:720px) {
  html body .tfhp4 .access-card-free .free-access-graphic {
    margin:0 8px !important;
    padding:18px 16px 14px !important;
  }

  html body .tfhp4 .free-access-graphic-benefits {
    grid-template-columns:1fr !important;
  }

  html body .tfhp4 .access-card-free .free-access-price span {
    font-size:82px !important;
  }
}


/* V0.6.67 — bezpieczne powiększanie aktualnego obrazu z modułów podglądu.
   Przycisk jest nakładką absolutną i nie zmienia geometrii modułów ani miniatur. */
html body .tfhp4 .tfhp4-image-module-preview > .tfhp4-image-enlarge {
  position:absolute;
  top:12px;
  right:12px;
  z-index:8;
  height:32px;
  min-width:32px;
  margin:0;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#2f4a68;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(47,74,104,.38);
  border-radius:0;
  box-shadow:0 4px 14px rgba(20,38,63,.13);
  font:700 10px/1 Barlow,Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}

html body .tfhp4 .tfhp4-image-module-preview > .tfhp4-image-enlarge svg {
  width:14px;
  height:14px;
  flex:0 0 14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:square;
  stroke-linejoin:miter;
}

html body .tfhp4 .tfhp4-image-module-preview > .tfhp4-image-enlarge:hover,
html body .tfhp4 .tfhp4-image-module-preview > .tfhp4-image-enlarge:focus-visible {
  color:#ffffff;
  background:#2f4a68;
  border-color:#2f4a68;
  outline:none;
}

html body .tfhp4-image-lightbox[hidden] {
  display:none !important;
}

html body .tfhp4-image-lightbox {
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(12,24,39,.95);
  box-sizing:border-box;
}

html body .tfhp4-image-lightbox__dialog {
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

html body .tfhp4-image-lightbox__stage {
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

html body .tfhp4-image-lightbox__stage img {
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 72px);
  max-height:calc(100vh - 72px);
  object-fit:contain;
  object-position:center;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 22px 70px rgba(0,0,0,.48);
  image-rendering:auto;
}

html body .tfhp4-image-lightbox__close {
  position:fixed;
  top:18px;
  right:18px;
  z-index:2;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:#b23434;
  border:1px solid #b23434;
  border-radius:0;
  box-shadow:0 6px 22px rgba(0,0,0,.25);
  font:400 28px/1 Arial,sans-serif;
  cursor:pointer;
}

html body .tfhp4-image-lightbox__close:hover,
html body .tfhp4-image-lightbox__close:focus-visible {
  color:#b23434;
  background:#ffffff;
  outline:none;
}

@media (max-width:600px) {
  html body .tfhp4 .tfhp4-image-module-preview > .tfhp4-image-enlarge {
    top:8px;
    right:8px;
    width:34px;
    height:34px;
    padding:0;
  }

  html body .tfhp4 .tfhp4-image-module-preview > .tfhp4-image-enlarge span {
    display:none;
  }

  html body .tfhp4-image-lightbox {
    padding:12px;
  }

  html body .tfhp4-image-lightbox__stage img {
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 24px);
  }

  html body .tfhp4-image-lightbox__close {
    top:10px;
    right:10px;
    width:38px;
    height:38px;
  }
}


/* V0.6.68 — sekcja Newsletter i płatności ze starej strony głównej */
html body .tfhp4 .tfhp4-news-payments {
  background:#f7f8fa !important;
}

html body .tfhp4 .tfhp4-news-payments .wrap {
  text-align:left !important;
}

html body .tfhp4 .tfhp4-news-payments .lead {
  max-width:820px !important;
}

html body .tfhp4 .tfhp4-news-payments-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:28px !important;
  width:100% !important;
  margin-top:46px !important;
}

html body .tfhp4 .tfhp4-news-payment-card {
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  padding:30px !important;
  background:#fff !important;
  border:1px solid #e3e6ea !important;
  box-shadow:0 14px 34px rgba(20,38,63,.06) !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
}

html body .tfhp4 .tfhp4-newsletter-card {
  border-top:3px solid #b23434 !important;
}

html body .tfhp4 .tfhp4-payments-card {
  border-top:3px solid #2f4a68 !important;
}

html body .tfhp4 .tfhp4-news-payment-overline {
  margin:0 0 12px !important;
  color:#b23434 !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
}

html body .tfhp4 .tfhp4-news-payment-card h3 {
  margin:0 !important;
  color:#2f4a68 !important;
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-size:30px !important;
  line-height:1.08 !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
}

html body .tfhp4 .tfhp4-news-payment-copy {
  width:100% !important;
  margin:16px 0 0 !important;
  color:#5f6874 !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:16px !important;
  line-height:1.65 !important;
}

html body .tfhp4 .tfhp4-newsletter-form {
  width:100% !important;
  margin-top:24px !important;
  padding:24px !important;
  background:#f7f8fa !important;
  border:1px solid #e3e6ea !important;
}

html body .tfhp4 .tfhp4-newsletter-form,
html body .tfhp4 .tfhp4-newsletter-form * {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  box-sizing:border-box !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form,
html body .tfhp4 .tfhp4-newsletter-form form {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_columns,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_column,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_paragraph,
html body .tfhp4 .tfhp4-newsletter-form p,
html body .tfhp4 .tfhp4-newsletter-form label {
  display:block !important;
  width:100% !important;
  max-width:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_columns,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_column {
  margin:0 !important;
  padding:0 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_paragraph,
html body .tfhp4 .tfhp4-newsletter-form p {
  margin:0 0 14px !important;
  color:#5f6874 !important;
  font-size:15px !important;
  line-height:1.55 !important;
}

html body .tfhp4 .tfhp4-newsletter-form h1,
html body .tfhp4 .tfhp4-newsletter-form h2,
html body .tfhp4 .tfhp4-newsletter-form h3,
html body .tfhp4 .tfhp4-newsletter-form h4,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet-heading {
  width:100% !important;
  max-width:none !important;
  margin:0 0 14px !important;
  color:#2f4a68 !important;
  font-family:"Barlow Condensed","Arial Narrow","Segoe UI",Arial,sans-serif !important;
  font-size:24px !important;
  line-height:1.15 !important;
  font-weight:700 !important;
  text-align:left !important;
}

html body .tfhp4 .tfhp4-newsletter-form a {
  color:#b23434 !important;
  font-weight:700 !important;
  text-decoration:underline !important;
  text-underline-offset:2px !important;
}

html body .tfhp4 .tfhp4-newsletter-form input[type="email"],
html body .tfhp4 .tfhp4-newsletter-form input[type="text"],
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_text,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_textarea {
  display:block !important;
  width:100% !important;
  max-width:none !important;
  min-height:54px !important;
  margin:0 !important;
  padding:14px 16px !important;
  color:#2f3742 !important;
  background:#fff !important;
  border:1px solid #cfd6de !important;
  border-radius:0 !important;
  outline:none !important;
  box-shadow:none !important;
  font-size:16px !important;
  line-height:1.3 !important;
}

html body .tfhp4 .tfhp4-newsletter-form input[type="email"]:focus,
html body .tfhp4 .tfhp4-newsletter-form input[type="text"]:focus,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_text:focus {
  border-color:#2f4a68 !important;
  box-shadow:0 0 0 2px rgba(47,74,104,.12) !important;
}

html body .tfhp4 .tfhp4-newsletter-form input[type="submit"],
html body .tfhp4 .tfhp4-newsletter-form button[type="submit"],
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_submit {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  max-width:none !important;
  min-height:54px !important;
  margin:0 !important;
  padding:14px 22px !important;
  color:#fff !important;
  background:#b23434 !important;
  border:1px solid #b23434 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}

html body .tfhp4 .tfhp4-newsletter-form input[type="submit"]:hover,
html body .tfhp4 .tfhp4-newsletter-form button[type="submit"]:hover,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_submit:hover {
  color:#b23434 !important;
  background:#fff !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_message,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_success,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_error {
  width:100% !important;
  margin:12px 0 0 !important;
  padding:12px 14px !important;
  border-radius:0 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

html body .tfhp4 .tfhp4-newsletter-unavailable {
  width:100% !important;
  padding:16px !important;
  color:#5f6874 !important;
  background:#fff !important;
  border:1px dashed #b8c1cc !important;
  font-size:15px !important;
}

html body .tfhp4 .tfhp4-news-payment-note {
  width:100% !important;
  margin:18px 0 0 !important;
  color:#7a838e !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

html body .tfhp4 .tfhp4-payment-logos {
  display:grid !important;
  grid-template-columns:1.45fr repeat(5,minmax(58px,.7fr)) !important;
  gap:12px !important;
  align-items:center !important;
  width:100% !important;
  margin-top:28px !important;
  padding:22px !important;
  background:#f7f8fa !important;
  border:1px solid #e3e6ea !important;
}

html body .tfhp4 .tfhp4-pay-logo {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
  min-height:54px !important;
  padding:8px 10px !important;
  color:#14263f !important;
  background:#fff !important;
  border:1px solid #e3e6ea !important;
  border-radius:999px !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

html body .tfhp4 .tfhp4-pay-autopay {
  justify-content:flex-start !important;
  min-width:140px !important;
  padding:10px 18px !important;
  background:#dfff73 !important;
  border-color:#dfff73 !important;
  border-radius:28px 0 28px 0 !important;
}

html body .tfhp4 .tfhp4-pay-autopay i {
  width:9px !important;
  height:22px !important;
  margin-right:7px !important;
  background:#1975e8 !important;
  border-radius:8px 8px 2px 2px !important;
  transform:skew(-8deg) !important;
}

html body .tfhp4 .tfhp4-pay-blik {
  position:relative !important;
  color:#111 !important;
  font-size:28px !important;
  text-transform:lowercase !important;
}

html body .tfhp4 .tfhp4-pay-blik i {
  position:absolute !important;
  top:14px !important;
  right:13px !important;
  width:7px !important;
  height:7px !important;
  background:#ef3340 !important;
  border-radius:50% !important;
}

html body .tfhp4 .tfhp4-pay-visa {
  color:#1a4db1 !important;
  font-style:italic !important;
}

html body .tfhp4 .tfhp4-pay-mastercard {
  gap:0 !important;
}

html body .tfhp4 .tfhp4-pay-mastercard i {
  width:23px !important;
  height:23px !important;
  border-radius:50% !important;
}

html body .tfhp4 .tfhp4-pay-mastercard i:first-child {
  margin-right:-7px !important;
  background:#eb001b !important;
}

html body .tfhp4 .tfhp4-pay-mastercard i:last-child {
  background:#f79e1b !important;
}

html body .tfhp4 .tfhp4-pay-google b {
  margin-right:4px !important;
  color:#4285f4 !important;
  font-size:20px !important;
}

html body .tfhp4 .tfhp4-payment-meta {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
  margin-top:20px !important;
}

html body .tfhp4 .tfhp4-payment-meta > div {
  padding:16px 18px !important;
  background:#f7f8fa !important;
  border-left:3px solid #2f4a68 !important;
}

html body .tfhp4 .tfhp4-payment-meta strong,
html body .tfhp4 .tfhp4-payment-meta span {
  display:block !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
}

html body .tfhp4 .tfhp4-payment-meta strong {
  color:#2f4a68 !important;
  font-size:14px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}

html body .tfhp4 .tfhp4-payment-meta span {
  margin-top:4px !important;
  color:#7a838e !important;
  font-size:12px !important;
  line-height:1.4 !important;
}

@media (max-width:1000px) {
  html body .tfhp4 .tfhp4-news-payments-grid {
    grid-template-columns:1fr !important;
  }
}

@media (max-width:700px) {
  html body .tfhp4 .tfhp4-news-payment-card {
    padding:22px !important;
  }

  html body .tfhp4 .tfhp4-newsletter-form,
  html body .tfhp4 .tfhp4-payment-logos {
    padding:18px !important;
  }

  html body .tfhp4 .tfhp4-payment-logos {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  html body .tfhp4 .tfhp4-pay-autopay {
    grid-column:1 / -1 !important;
  }

  html body .tfhp4 .tfhp4-payment-meta {
    grid-template-columns:1fr !important;
  }
}


/* V0.6.69 — dopracowanie karty Newsletter i większa grafika płatności */
html body .tfhp4 .tfhp4-newsletter-card {
  border-top:1px solid #e3e6ea !important;
}

html body .tfhp4 .tfhp4-newsletter-form {
  margin-top:24px !important;
  padding:24px !important;
  background:#f7f8fa !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form,
html body .tfhp4 .tfhp4-newsletter-form form,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form > div,
html body .tfhp4 .tfhp4-newsletter-form form > div,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_columns,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_column,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_paragraph {
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form hr,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form hr {
  display:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form input,
html body .tfhp4 .tfhp4-newsletter-form textarea,
html body .tfhp4 .tfhp4-newsletter-form select,
html body .tfhp4 .tfhp4-newsletter-form button,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_text,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_textarea,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_submit {
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form a,
html body .tfhp4 .tfhp4-newsletter-form a:visited,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form a,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form a:visited {
  color:#b23434 !important;
  font-weight:700 !important;
  text-decoration:underline !important;
  text-decoration-color:#b23434 !important;
  text-underline-offset:2px !important;
}

html body .tfhp4 .tfhp4-newsletter-form input[type="submit"],
html body .tfhp4 .tfhp4-newsletter-form button[type="submit"],
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_submit {
  color:#fff !important;
  background:#b23434 !important;
  border:1px solid #b23434 !important;
  border-radius:0 !important;
}

html body .tfhp4 .tfhp4-newsletter-form input[type="submit"]:hover,
html body .tfhp4 .tfhp4-newsletter-form button[type="submit"]:hover,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_submit:hover {
  color:#b23434 !important;
  background:#fff !important;
  border-color:#b23434 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_message,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_success,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_error,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_message,
html body .tfhp4 .tfhp4-newsletter-form .parsley-errors-list {
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  margin:12px 0 0 !important;
  padding:0 !important;
  color:#2f4a68 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_error,
html body .tfhp4 .tfhp4-newsletter-form .parsley-errors-list {
  color:#b23434 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_message:empty,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_success:empty,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_error:empty,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_message:empty,
html body .tfhp4 .tfhp4-newsletter-form .parsley-errors-list:empty {
  display:none !important;
  margin:0 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .mailpoet_message p,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_success p,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_validate_error p,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form_message p,
html body .tfhp4 .tfhp4-newsletter-form .parsley-errors-list li {
  margin:0 !important;
  padding:0 !important;
  color:inherit !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font:inherit !important;
}

html body .tfhp4 .tfhp4-payment-logos {
  position:relative !important;
  grid-template-columns:1.55fr repeat(5,minmax(64px,.72fr)) !important;
  gap:14px !important;
  min-height:126px !important;
  margin-top:28px !important;
  padding:28px 34px 28px 28px !important;
  overflow:hidden !important;
}

html body .tfhp4 .tfhp4-payment-logos::after {
  content:"" !important;
  position:absolute !important;
  top:14px !important;
  right:-14px !important;
  width:30px !important;
  height:98px !important;
  background:#1f82ec !important;
  border-radius:24px 0 0 24px !important;
}

html body .tfhp4 .tfhp4-pay-logo {
  min-height:64px !important;
  padding:10px 12px !important;
  font-size:16px !important;
}

html body .tfhp4 .tfhp4-pay-autopay {
  min-width:152px !important;
  padding:12px 20px !important;
}

@media (max-width:700px) {
  html body .tfhp4 .tfhp4-newsletter-form {
    padding:18px !important;
  }

  html body .tfhp4 .tfhp4-payment-logos {
    min-height:0 !important;
    padding:20px 26px 20px 20px !important;
  }

  html body .tfhp4 .tfhp4-payment-logos::after {
    top:12px !important;
    height:calc(100% - 24px) !important;
  }
}

/* V0.6.70 — twarde uporządkowanie formularza MailPoet w karcie Newsletter */
html body .tfhp4 .tfhp4-newsletter-form {
  width:100% !important;
  margin-top:24px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form > * {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel {
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:24px !important;
  background:#fff !important;
  border:1px solid #e3e6ea !important;
  border-top:1px solid #e3e6ea !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel::before,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel::after,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form::before,
html body .tfhp4 .tfhp4-newsletter-form .mailpoet_form::after {
  content:none !important;
  display:none !important;
  border:0 !important;
  background:transparent !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-form,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_form,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel form {
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  border-top:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_form_columns,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_form_column,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_paragraph,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel [class*="mailpoet_form_column"] {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel input[type="submit"],
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel button[type="submit"],
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_submit,
html body .tfhp4 .tfhp4-newsletter-form [data-automation-id="form_submit_button"] {
  color:#fff !important;
  background-color:#b23434 !important;
  background:#b23434 !important;
  border-color:#b23434 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:1 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel input[type="submit"]:hover,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel button[type="submit"]:hover,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_submit:hover,
html body .tfhp4 .tfhp4-newsletter-form [data-automation-id="form_submit_button"]:hover {
  color:#b23434 !important;
  background-color:#fff !important;
  background:#fff !important;
  border-color:#b23434 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel a,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel a:link,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel a:visited,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel a:hover,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel a:focus {
  color:#b23434 !important;
  text-decoration-color:#b23434 !important;
}

@media (max-width:700px) {
  html body .tfhp4 .tfhp4-newsletter-form {
    padding:0 !important;
  }

  html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel {
    padding:18px !important;
  }
}

/* V0.6.72 — komunikaty MailPoet dopiero po akcji i spójna typografia */
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_paragraph,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_paragraph *,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel label,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel label *,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel strong,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel b {
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message {
  display:none !important;
  width:100% !important;
  min-height:0 !important;
  margin:14px 0 0 !important;
  padding:0 !important;
  color:#2f4a68 !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:14px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  text-align:left !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message.is-tfhp4-visible {
  display:block !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message.mailpoet_validate_error,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message.parsley-errors-list {
  color:#b23434 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message p,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message span,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-message strong {
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
}


/* V0.6.73 — lżejsza typografia Newslettera i oryginalna grafika płatności */
html body .tfhp4 .tfhp4-news-payment-card h3 {
  font-weight:600 !important;
}

html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_paragraph strong,
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel .mailpoet_paragraph b {
  color:#2f4a68 !important;
  font-weight:600 !important;
}

html body .tfhp4 .tfhp4-payment-logos {
  display:block !important;
  width:100% !important;
  margin-top:28px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  overflow:hidden !important;
}

html body .tfhp4 .tfhp4-payment-logos img {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  margin:0 !important;
  object-fit:contain !important;
}

/* ================================================================
   V0.6.74 — WIZUALNE ZBLIŻENIE DO „TF POZNAJ SYSTEM”
   Bez zmiany kolejności sekcji, siatek, treści i działania strony.
   Zmiany obejmują wyłącznie kolory pomocnicze, ramki, akcenty,
   sposób wykończenia kart oraz drobne elementy hierarchii.
   ================================================================ */

html body .tfhp4 {
  --navy:#132746;
  --soft:#f3f6f8;
  --cool:#eaf0f5;
  --line:#dfe4e8;
}

/* Spokojniejsza paleta jasnych sekcji znana z TF Poznaj System. */
html body .tfhp4 .section.soft,
html body .tfhp4 .tfhp4-news-payments {
  background:#f3f6f8 !important;
  background-color:#f3f6f8 !important;
}

html body .tfhp4 .section.cool {
  background:#eaf0f5 !important;
  background-color:#eaf0f5 !important;
}

html body .tfhp4 .section.dark,
html body .tfhp4 .final-cta {
  background:#132746 !important;
  background-color:#132746 !important;
}

/* Główna sekcja systemowa otrzymuje subtelne, techniczne tło,
   ale zachowuje istniejący układ i wszystkie wymiary. */
html body .tfhp4 .system-section {
  background:linear-gradient(105deg,#edf2f6 0%,#f7f8fa 56%,#ffffff 100%) !important;
}

/* Nadtytuły jak w TF Poznaj System — odrobinę więcej oddechu i rytmu. */
html body .tfhp4 .section-tag,
html body .tfhp4 .section-overline,
html body .tfhp4 .eyebrow,
html body .tfhp4 .dialog-overline,
html body .tfhp4 .entry-copy .eyebrow {
  letter-spacing:.18em !important;
  line-height:1.35 !important;
}

html body .tfhp4 .section-tag,
html body .tfhp4 .section-overline {
  margin-bottom:16px !important;
}

/* Delikatny czerwony akcent w najważniejszym opisie systemu. */
html body .tfhp4 .system-extra {
  padding-left:18px !important;
  border-left:3px solid #b23434 !important;
}

/* Ramki obrazów: mniej „karty sklepowej”, więcej technicznej planszy. */
html body .tfhp4 .single-media .media-frame,
html body .tfhp4 .tfhp4-image-module,
html body .tfhp4 .tfhp4-image-module-preview,
html body .tfhp4 .community-photo,
html body .tfhp4 .product-card,
html body .tfhp4 .tfhp4-news-payment-card {
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .single-media .media-frame,
html body .tfhp4 .tfhp4-image-module,
html body .tfhp4 .community-photo {
  border:1px solid #dfe4e8 !important;
  border-top:3px solid #b23434 !important;
}

html body .tfhp4 .section.dark .single-media .media-frame,
html body .tfhp4 .section.dark .tfhp4-image-module,
html body .tfhp4 .section.dark .community-photo {
  border-color:rgba(255,255,255,.18) !important;
  border-top-color:#b23434 !important;
}

/* Miniatury pozostają w dotychczasowym układzie, ale są bardziej płaskie. */
html body .tfhp4 .tfhp4-image-thumb-frame {
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Cztery główne wejścia: zachowany układ, dodane tylko numery 01–04. */
html body .tfhp4 .entry {
  position:relative !important;
  box-shadow:none !important;
}

html body .tfhp4 .entry-copy {
  padding-right:58px !important;
}

html body .tfhp4 .entry::before {
  position:absolute !important;
  z-index:4 !important;
  top:0 !important;
  right:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  color:#ffffff !important;
  background:#b23434 !important;
  font-family:"Barlow","Segoe UI",Arial,sans-serif !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.04em !important;
}

html body .tfhp4 .entry:nth-child(1)::before { content:"01" !important; }
html body .tfhp4 .entry:nth-child(2)::before { content:"02" !important; }
html body .tfhp4 .entry:nth-child(3)::before { content:"03" !important; }
html body .tfhp4 .entry:nth-child(4)::before { content:"04" !important; }

/* Karty i listy zachowują wymiary, lecz otrzymują płaskie wykończenie. */
html body .tfhp4 .product-card,
html body .tfhp4 .access-card,
html body .tfhp4 .community-link,
html body .tfhp4 .tfhp4-news-payment-card {
  border-radius:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .product-card,
html body .tfhp4 .tfhp4-news-payment-card {
  border:1px solid #dfe4e8 !important;
  border-top:2px solid #b23434 !important;
}

html body .tfhp4 .community-link {
  border:1px solid #dfe4e8 !important;
  border-left:4px solid #b23434 !important;
}

/* Dostępy już miały czerwony akcent — tylko jego lżejsza wersja. */
html body .tfhp4 .access-card {
  border:1px solid #dfe4e8 !important;
  border-top:3px solid #b23434 !important;
}

html body .tfhp4 .section.dark .access-card,
html body .tfhp4 .section.dark .product-card {
  border-color:rgba(255,255,255,.18) !important;
  border-top-color:#b23434 !important;
}

/* Listy korzyści dostają czytelny rytm linii, bez zmiany siatki. */
html body .tfhp4 .feature-grid {
  border-top:1px solid #dfe4e8 !important;
  border-bottom:1px solid #dfe4e8 !important;
  padding:18px 0 !important;
}

html body .tfhp4 .section.dark .feature-grid {
  border-color:rgba(255,255,255,.16) !important;
}

/* Granatowe zakończenie oddzielone cienką linią TF Red, jak w Poznaj System. */
html body .tfhp4 .final-cta {
  position:relative !important;
}

html body .tfhp4 .final-cta::before {
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:50% !important;
  width:78% !important;
  max-width:1500px !important;
  height:1px !important;
  background:#b23434 !important;
  transform:translateX(-50%) !important;
}

/* Formularz i płatności: ta sama płaska, techniczna linia co reszta strony. */
html body .tfhp4 .tfhp4-newsletter-form .tfhp4-mailpoet-panel {
  border-top:2px solid #b23434 !important;
}

/* Mobile: numer nie może zabierać miejsca tytułowi. */
@media (max-width:720px) {
  html body .tfhp4 .entry-copy {
    padding-right:54px !important;
  }

  html body .tfhp4 .entry::before {
    width:38px !important;
    height:38px !important;
  }

  html body .tfhp4 .final-cta::before {
    width:calc(100% - 48px) !important;
  }
}

/* ================================================================
   V0.6.75 — ODWAŻNIEJSZA STRONA GŁÓWNA W DUCHU „TF POZNAJ SYSTEM”
   Zachowana kolejność, treść, funkcje, galerie, Periody i shortcode.
   Zmiana dotyczy skali, rytmu, kompozycji i pewności wizualnej sekcji.
   ================================================================ */

/* Treść ma własną, kontrolowaną szerokość; kolory nadal wypełniają ekran. */
html body .tfhp4 .wrap {
  width:86% !important;
  max-width:1480px !important;
}

/* Mocniejsza, bardziej „redakcyjna” typografia nagłówków. */
html body .tfhp4 .title,
html body .tfhp4 .perioda h1,
html body .tfhp4 .entry h3,
html body .tfhp4 .access-card h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .tfhp4-news-payment-card h3 {
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
}

html body .tfhp4 .section {
  padding-top:132px !important;
  padding-bottom:132px !important;
}

html body .tfhp4 .section-tag,
html body .tfhp4 .section-overline,
html body .tfhp4 .eyebrow {
  margin-bottom:18px !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.20em !important;
}

html body .tfhp4 .title.medium {
  max-width:900px !important;
  font-size:clamp(52px,5.2vw,82px) !important;
  line-height:.96 !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
}

html body .tfhp4 .lead {
  max-width:780px !important;
  margin-top:28px !important;
  font-size:19px !important;
  line-height:1.68 !important;
}

/* PERIODA — bez zmiany licznika, ale z większą pewnością otwarcia. */
html body .tfhp4 .perioda.perioda-original {
  padding-top:92px !important;
  padding-bottom:170px !important;
}

html body .tfhp4 .perioda-original .perioda-grid {
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr) !important;
  gap:clamp(54px,5vw,96px) !important;
}

html body .tfhp4 .perioda-original h1 {
  max-width:920px !important;
  margin-bottom:30px !important;
  font-size:clamp(58px,6.1vw,96px) !important;
  line-height:.94 !important;
  letter-spacing:-.042em !important;
}

html body .tfhp4 .perioda-original-copy {
  max-width:860px !important;
}

html body .tfhp4 .perioda-original-copy p {
  font-size:18px !important;
}

/* Cztery wejścia — mniej „sklepowe”, bardziej jak wybór drogi. */
html body .tfhp4 .entries {
  padding-bottom:110px !important;
}

html body .tfhp4 .entry-grid {
  gap:18px !important;
}

html body .tfhp4 .entry {
  grid-template-rows:154px auto !important;
  border-top-width:3px !important;
  background:#fff !important;
  transition:transform .24s ease,border-color .24s ease,background .24s ease !important;
}

html body .tfhp4 .entry:hover,
html body .tfhp4 .entry:focus-visible {
  transform:translateY(-5px) !important;
  border-color:#cfd7df !important;
}

html body .tfhp4 .entry-copy {
  min-height:154px !important;
  padding:28px 28px 24px !important;
}

html body .tfhp4 .entry h3 {
  min-height:0 !important;
  font-size:clamp(25px,2vw,34px) !important;
  line-height:1.02 !important;
  font-weight:700 !important;
}

html body .tfhp4 .entry-art {
  padding:0 !important;
  border-bottom:0 !important;
}

html body .tfhp4 .entry-art img {
  transition:transform .42s ease !important;
}

html body .tfhp4 .entry:hover .entry-art img {
  transform:scale(1.025) !important;
}

/* POLSKI SYSTEM — deklaracja marki, a nie zwykły tytuł sekcji. */
html body .tfhp4 .system-section {
  padding-top:154px !important;
  padding-bottom:154px !important;
  background:linear-gradient(112deg,#eaf0f5 0%,#f4f7f9 48%,#ffffff 100%) !important;
}

html body .tfhp4 .system-heading {
  margin-bottom:72px !important;
}

html body .tfhp4 .system-title {
  max-width:1280px !important;
  font-size:clamp(72px,8.4vw,132px) !important;
  line-height:.88 !important;
  font-weight:700 !important;
  letter-spacing:-.055em !important;
}

html body .tfhp4 .system-layout {
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) !important;
  gap:clamp(56px,6vw,110px) !important;
}

html body .tfhp4 .system-subtitle {
  max-width:720px !important;
  margin-bottom:26px !important;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif !important;
  font-size:clamp(31px,3vw,46px) !important;
  line-height:1.02 !important;
  font-weight:700 !important;
  letter-spacing:-.025em !important;
}

html body .tfhp4 .system-extra {
  margin-top:24px !important;
  padding:18px 0 18px 22px !important;
}

/* Główne narzędzia — duże pasy obraz–tekst, bez zmiany kolejności. */
html body .tfhp4 .tool-section {
  min-height:760px !important;
}

html body .tfhp4 .tool-section .section-layout {
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
  gap:clamp(62px,6.6vw,124px) !important;
}

html body .tfhp4 .tool-section .section-layout.image-right {
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
}

html body .tfhp4 .tool-section .section-copy {
  position:relative !important;
  padding-top:24px !important;
  padding-bottom:24px !important;
}

html body .tfhp4 .tool-section .section-copy::before {
  content:"" !important;
  display:block !important;
  width:92px !important;
  height:2px !important;
  margin-bottom:28px !important;
  background:#b23434 !important;
}

html body .tfhp4 .tool-section .title.medium {
  max-width:790px !important;
}

html body .tfhp4 .tool-section .single-media,
html body .tfhp4 .tool-section .tfhp4-image-module {
  align-self:stretch !important;
}

html body .tfhp4 .tool-section--cabinet {
  background:#f3f6f8 !important;
  background-color:#f3f6f8 !important;
}

html body .tfhp4 .tool-section--assistant {
  background:#eef3f7 !important;
  background-color:#eef3f7 !important;
}

html body .tfhp4 .tool-section .feature-grid {
  margin-top:34px !important;
  padding:0 !important;
  border:0 !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 30px !important;
}

html body .tfhp4 .tool-section .feature {
  position:relative !important;
  min-height:58px !important;
  display:flex !important;
  align-items:center !important;
  padding:14px 0 14px 22px !important;
  border-bottom:1px solid rgba(95,104,116,.18) !important;
  font-weight:700 !important;
}

html body .tfhp4 .tool-section .feature::before {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  background:#b23434 !important;
  transform:translateY(-50%) !important;
}

html body .tfhp4 .tool-section.dark .feature {
  border-bottom-color:rgba(255,255,255,.17) !important;
}

/* Obraz staje się równorzędnym bohaterem sekcji. */
html body .tfhp4 .tool-section .tfhp4-image-module,
html body .tfhp4 .tool-section .single-media .media-frame {
  background:#edf2f6 !important;
}

html body .tfhp4 .tool-section.dark .tfhp4-image-module,
html body .tfhp4 .tool-section.dark .single-media .media-frame {
  background:#f4f6f8 !important;
}

/* Akcesoria, dostępy i produkty — duże nagłówki i czytelniejszy rytm. */
html body .tfhp4 .showcase-section,
html body .tfhp4 .products-section,
html body .tfhp4 .support-section {
  padding-top:148px !important;
  padding-bottom:148px !important;
}

html body .tfhp4 .access-section {
  padding-top:148px !important;
  padding-bottom:148px !important;
}

html body .tfhp4 .access-section > .wrap > .title,
html body .tfhp4 .products-section > .wrap > .title,
html body .tfhp4 .support-section > .wrap > .title {
  max-width:1100px !important;
  font-size:clamp(58px,6.1vw,94px) !important;
  line-height:.94 !important;
}

html body .tfhp4 .access-grid,
html body .tfhp4 .product-grid,
html body .tfhp4 .tfhp4-news-payments-grid {
  margin-top:64px !important;
}

html body .tfhp4 .access-card,
html body .tfhp4 .product-card,
html body .tfhp4 .tfhp4-news-payment-card {
  border-top-width:3px !important;
}

html body .tfhp4 .access-card h3,
html body .tfhp4 .product-card h3,
html body .tfhp4 .tfhp4-news-payment-card h3 {
  font-size:clamp(27px,2.3vw,38px) !important;
  line-height:1.02 !important;
}

/* Zakończenie ma być manifestem, nie grzecznym CTA. */
html body .tfhp4 .final-cta {
  padding-top:150px !important;
  padding-bottom:150px !important;
  text-align:left !important;
}

html body .tfhp4 .final-cta .wrap {
  display:grid !important;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr) !important;
  column-gap:clamp(60px,7vw,130px) !important;
  align-items:end !important;
}

html body .tfhp4 .final-cta .eyebrow,
html body .tfhp4 .final-cta .title,
html body .tfhp4 .final-cta .lead {
  grid-column:1 !important;
}

html body .tfhp4 .final-cta .title.medium {
  max-width:980px !important;
  font-size:clamp(64px,7.3vw,112px) !important;
  line-height:.9 !important;
}

html body .tfhp4 .final-cta .lead {
  margin-inline:0 !important;
  max-width:760px !important;
}

html body .tfhp4 .final-cta .actions {
  grid-column:2 !important;
  grid-row:1 / span 3 !important;
  align-self:end !important;
  margin:0 !important;
}

/* Responsywność: śmiałość zostaje, ale bez rozjeżdżania. */
@media (max-width:1180px) {
  html body .tfhp4 .wrap {
    width:calc(100% - 64px) !important;
    max-width:none !important;
  }

  html body .tfhp4 .perioda-original .perioda-grid,
  html body .tfhp4 .system-layout,
  html body .tfhp4 .tool-section .section-layout,
  html body .tfhp4 .tool-section .section-layout.image-right {
    gap:54px !important;
  }

  html body .tfhp4 .system-title {
    font-size:clamp(64px,8.8vw,104px) !important;
  }
}

@media (max-width:1050px) {
  html body .tfhp4 .section {
    padding-top:104px !important;
    padding-bottom:104px !important;
  }

  html body .tfhp4 .perioda-original .perioda-grid,
  html body .tfhp4 .system-layout,
  html body .tfhp4 .tool-section .section-layout,
  html body .tfhp4 .tool-section .section-layout.image-right,
  html body .tfhp4 .final-cta .wrap {
    grid-template-columns:1fr !important;
  }

  html body .tfhp4 .perioda-slot {
    justify-content:flex-start !important;
  }

  html body .tfhp4 .final-cta .actions {
    grid-column:1 !important;
    grid-row:auto !important;
    margin-top:36px !important;
  }

  html body .tfhp4 .tool-section {
    min-height:0 !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .wrap {
    width:calc(100% - 36px) !important;
  }

  html body .tfhp4 .section,
  html body .tfhp4 .system-section,
  html body .tfhp4 .showcase-section,
  html body .tfhp4 .access-section,
  html body .tfhp4 .products-section,
  html body .tfhp4 .support-section,
  html body .tfhp4 .final-cta {
    padding-top:78px !important;
    padding-bottom:78px !important;
  }

  html body .tfhp4 .perioda.perioda-original {
    padding-top:68px !important;
    padding-bottom:138px !important;
  }

  html body .tfhp4 .perioda-original h1 {
    font-size:clamp(48px,15vw,72px) !important;
  }

  html body .tfhp4 .system-title {
    font-size:clamp(54px,15vw,82px) !important;
  }

  html body .tfhp4 .title.medium,
  html body .tfhp4 .access-section > .wrap > .title,
  html body .tfhp4 .products-section > .wrap > .title,
  html body .tfhp4 .support-section > .wrap > .title,
  html body .tfhp4 .final-cta .title.medium {
    font-size:clamp(46px,13vw,68px) !important;
  }

  html body .tfhp4 .tool-section .feature-grid {
    grid-template-columns:1fr !important;
  }

  html body .tfhp4 .final-cta .actions {
    width:100% !important;
  }
}

/* ================================================================
   V0.6.76 — KOREKTY PO PRZEGLĄDZIE WIZUALNYM
   Zachowany układ v0.6.75. Zmiany dotyczą rytmu linii, górnych kafli,
   typografii Periody oraz końcowego CTA z tłem znaku TF.
   ================================================================ */

/* 1. Listy informacyjne: linia otwierająca, wiersze i linia zamykająca. */
html body .tfhp4 .tool-section .feature-grid {
  border-top:1px solid rgba(95,104,116,.20) !important;
}

html body .tfhp4 .tool-section.dark .feature-grid {
  border-top-color:rgba(255,255,255,.18) !important;
}

/* 2. Usunięcie krótkiej czerwonej kreski nad nadtytułami narzędzi. */
html body .tfhp4 .tool-section .section-copy::before {
  content:none !important;
  display:none !important;
}

/* 3. Cztery górne kafle: stała belka, spokojna szara rama i ruch obrazu. */
html body .tfhp4 .entry,
html body .tfhp4 .entry:hover,
html body .tfhp4 .entry:focus-visible {
  border:1px solid #d7dde3 !important;
  border-top:3px solid #b23434 !important;
  box-shadow:none !important;
}

html body .tfhp4 .entry:hover,
html body .tfhp4 .entry:focus-visible {
  transform:none !important;
  background:#ffffff !important;
}

html body .tfhp4 .entry::before {
  top:0 !important;
  right:18px !important;
}

html body .tfhp4 .entry-art img {
  border:1px solid #d7dde3 !important;
  transform:translateY(0) scale(1) !important;
  transition:transform .38s ease !important;
}

html body .tfhp4 .entry:hover .entry-art img,
html body .tfhp4 .entry:focus-visible .entry-art img {
  transform:translateY(-4px) scale(1.02) !important;
}

/* 4. PERIODA: nadal mocna, ale spokojniejsza od reszty sekcji. */
html body .tfhp4 .perioda-original h1 {
  color:#dce4eb !important;
  font-weight:600 !important;
}

/* 5. Końcowy manifest: przyciski pod treścią, szersze i równe. */
html body .tfhp4 .final-cta {
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

html body .tfhp4 .final-cta::after {
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  top:48% !important;
  right:clamp(-240px,-10vw,-100px) !important;
  width:clamp(720px,66vw,1180px) !important;
  aspect-ratio:1 / 1 !important;
  background:var(--tfhp4-watermark-image, url("../images/tf-logo-mark-watermark-v072.png")) center / contain no-repeat !important;
  opacity:.145 !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
}

html body .tfhp4 .final-cta .wrap {
  position:relative !important;
  z-index:1 !important;
  display:block !important;
}

html body .tfhp4 .final-cta .eyebrow,
html body .tfhp4 .final-cta .title,
html body .tfhp4 .final-cta .lead,
html body .tfhp4 .final-cta .actions {
  grid-column:auto !important;
  grid-row:auto !important;
}

html body .tfhp4 .final-cta .actions {
  width:min(100%,900px) !important;
  max-width:900px !important;
  margin:48px 0 0 !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
}

html body .tfhp4 .final-cta .btn {
  min-height:58px !important;
  padding-left:32px !important;
  padding-right:32px !important;
}

@media (max-width:1050px) {
  html body .tfhp4 .final-cta::after {
    right:-150px !important;
    width:min(78vw,650px) !important;
    opacity:.11 !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .entry::before {
    right:16px !important;
  }

  html body .tfhp4 .final-cta::after {
    right:-190px !important;
    width:560px !important;
    opacity:.055 !important;
  }

  html body .tfhp4 .final-cta .actions {
    grid-template-columns:1fr !important;
    width:100% !important;
    max-width:none !important;
    gap:14px !important;
  }
}


/* ================================================================
   V0.6.77 — DOPRACOWANIE RYTMU SEKCJI I HIERARCHII TREŚCI
   - linie list dzielone zgodnie z dwiema kolumnami,
   - prawostronna kompozycja systemu fizycznego,
   - większy znak TF i prawostronne CTA końcowe,
   - krótsze tytuły Planera i Wizualizatora,
   - mniejszy oddech przed główną deklaracją marki,
   - biały tytuł otwierającej sekcji Periody.
   ================================================================ */

/* 1. Optycznie o połowę mniejsza przerwa między czterema wejściami
      a hasłem POLSKI SYSTEM BUDOWY WARSZTATU. */
html body .tfhp4 .entries {
  padding-bottom:56px !important;
}

html body .tfhp4 .system-section {
  padding-top:76px !important;
}

/* 2. Listy w dwóch kolumnach: każda kolumna ma własny rytm
      linia — tekst — linia — tekst — linia zamykająca. */
html body .tfhp4 .feature-grid {
  border-top:0 !important;
  border-bottom:0 !important;
}

html body .tfhp4 .feature-grid > .feature {
  border-top:1px solid rgba(95,104,116,.20) !important;
  border-bottom:0 !important;
}

html body .tfhp4 .feature-grid > .feature:nth-last-child(-n+2) {
  border-bottom:1px solid rgba(95,104,116,.20) !important;
}

html body .tfhp4 .section.dark .feature-grid > .feature {
  border-top-color:rgba(255,255,255,.18) !important;
}

html body .tfhp4 .section.dark .feature-grid > .feature:nth-last-child(-n+2) {
  border-bottom-color:rgba(255,255,255,.18) !important;
}

/* 3. Sekcja fizycznego systemu: nadtytuł, tytuł, opis i CTA
      tworzą świadomie prawostronny blok. */
html body .tfhp4 .products-section > .wrap > .eyebrow,
html body .tfhp4 .products-section > .wrap > .title,
html body .tfhp4 .products-section > .wrap > .lead {
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}

html body .tfhp4 .products-section > .wrap > .title {
  max-width:1120px !important;
}

html body .tfhp4 .products-section > .wrap > .lead {
  max-width:820px !important;
}

html body .tfhp4 .products-section > .wrap > .actions {
  margin-left:auto !important;
  margin-right:0 !important;
}

/* 4. Otwierająca deklaracja Periody wraca do czystej bieli. */
html body .tfhp4 .perioda-original h1 {
  color:#ffffff !important;
}

/* 5. Końcowe CTA: większy oddech, przyciski po prawej,
      ogromny znak TF obejmujący znaczną część sekcji. */
html body .tfhp4 .final-cta::after {
  top:50% !important;
  right:clamp(-300px,-10vw,-120px) !important;
  width:clamp(760px,64vw,1180px) !important;
  opacity:.082 !important;
}

html body .tfhp4 .final-cta .actions {
  width:min(100%,940px) !important;
  max-width:940px !important;
  margin-top:72px !important;
  margin-left:auto !important;
  margin-right:0 !important;
}

@media (max-width:1050px) {
  html body .tfhp4 .entries {
    padding-bottom:48px !important;
  }

  html body .tfhp4 .system-section {
    padding-top:68px !important;
  }

  html body .tfhp4 .final-cta::after {
    right:-260px !important;
    width:min(1000px,92vw) !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .entries {
    padding-bottom:38px !important;
  }

  html body .tfhp4 .system-section {
    padding-top:56px !important;
  }

  /* Po przejściu na jedną kolumnę zachowujemy ten sam rytm linii. */
  html body .tfhp4 .feature-grid > .feature:nth-last-child(-n+2) {
    border-bottom:0 !important;
  }

  html body .tfhp4 .feature-grid > .feature:last-child {
    border-bottom:1px solid rgba(95,104,116,.20) !important;
  }

  html body .tfhp4 .section.dark .feature-grid > .feature:last-child {
    border-bottom-color:rgba(255,255,255,.18) !important;
  }

  html body .tfhp4 .products-section > .wrap > .eyebrow,
  html body .tfhp4 .products-section > .wrap > .title,
  html body .tfhp4 .products-section > .wrap > .lead {
    text-align:left !important;
    margin-left:0 !important;
  }

  html body .tfhp4 .products-section > .wrap > .actions {
    margin-left:0 !important;
    width:100% !important;
    max-width:none !important;
  }

  html body .tfhp4 .final-cta::after {
    right:-330px !important;
    width:760px !important;
    opacity:.06 !important;
  }

  html body .tfhp4 .final-cta .actions {
    margin-top:52px !important;
    margin-left:0 !important;
  }
}


/* =========================================================
   V0.6.78 — STYK Z MOTYWEM: BEZ ODDECHU NAD I POD STRONĄ
   Mechanizm zgodny ze stabilnym rozwiązaniem TF Poznaj System.
   Zerujemy wyłącznie pionowe odstępy kontenerów otaczających
   shortcode. Stopka zachowuje własny układ i wewnętrzny padding.
   ========================================================= */
html body.tfhp4-page .tfhp4-host-shell,
html body.tfhp4-active .tfhp4-host-shell {
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:0 !important;
}

html body.tfhp4-page .tfhp4-host-empty,
html body.tfhp4-active .tfhp4-host-empty {
  display:none !important;
  height:0 !important;
  margin:0 !important;
  min-height:0 !important;
  padding:0 !important;
}

html body.tfhp4-page article.page > .entry-header,
html body.tfhp4-active article.page > .entry-header,
html body.tfhp4-page article.type-page > .entry-header,
html body.tfhp4-active article.type-page > .entry-header {
  display:none !important;
  height:0 !important;
  margin:0 !important;
  min-height:0 !important;
  padding:0 !important;
}

html body.tfhp4-page .tfhp4-host-before,
html body.tfhp4-active .tfhp4-host-before {
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

html body.tfhp4-page .tfhp4-host-after,
html body.tfhp4-active .tfhp4-host-after {
  margin-top:0 !important;
}

html body.tfhp4-page :where(#content,.site-content,.content-area,.site-main,main,article.page,article.type-page,.entry-content,.page-content,.wp-block-post-content),
html body.tfhp4-active :where(#content,.site-content,.content-area,.site-main,main,article.page,article.type-page,.entry-content,.page-content,.wp-block-post-content) {
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

html body.tfhp4-page .entry-content > .tfhp4[data-tfhp4-root]:first-child,
html body.tfhp4-active .entry-content > .tfhp4[data-tfhp4-root]:first-child {
  margin-top:0 !important;
}

html body .tfhp4[data-tfhp4-root] {
  border-bottom:1px solid #d9dee3 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* ================================================================
   V0.6.79 — STAŁY RYTM DWUKOLUMNOWYCH LIST INFORMACYJNYCH
   - każda kolumna ma własne, niezależne linie,
   - usunięcie starej linii łączącej obie kolumny,
   - stała wysokość między liniami odpowiadająca opisowi dwuwersowemu,
   - czerwony znacznik i tekst są wyśrodkowane pionowo.
   ================================================================ */

/* Zerowanie wszystkich wcześniejszych ramek obejmujących całą siatkę.
   Powtórzenie selektorów o większej szczegółowości jest celowe — usuwa
   również starszą linię z .tool-section, która miała !important. */
html body .tfhp4 .feature-grid,
html body .tfhp4 .system-section .feature-grid,
html body .tfhp4 .tool-section .feature-grid,
html body .tfhp4 .showcase-section .feature-grid,
html body .tfhp4 .accessories-section .feature-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-auto-rows:70px !important;
  column-gap:30px !important;
  row-gap:0 !important;
  margin-top:34px !important;
  padding:0 !important;
  border:0 !important;
  border-top:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

html body .tfhp4 .feature-grid::before,
html body .tfhp4 .feature-grid::after,
html body .tfhp4 .tool-section .feature-grid::before,
html body .tfhp4 .tool-section .feature-grid::after {
  content:none !important;
  display:none !important;
}

/* Każdy kafel jest dokładnie przestrzenią pomiędzy dwiema liniami.
   Wszystkie elementy dostają linię górną, a ostatni rząd także dolną. */
html body .tfhp4 .feature-grid > .feature,
html body .tfhp4 .tool-section .feature-grid > .feature,
html body .tfhp4 .showcase-section .feature-grid > .feature {
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  height:70px !important;
  min-height:70px !important;
  margin:0 !important;
  padding:0 10px 0 22px !important;
  border:0 !important;
  border-top:1px solid rgba(95,104,116,.20) !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  line-height:1.38 !important;
  overflow:visible !important;
}

html body .tfhp4 .feature-grid > .feature:nth-last-child(-n+2),
html body .tfhp4 .tool-section .feature-grid > .feature:nth-last-child(-n+2),
html body .tfhp4 .showcase-section .feature-grid > .feature:nth-last-child(-n+2) {
  border-bottom:1px solid rgba(95,104,116,.20) !important;
}

/* Ciemne sekcje korzystają z tego samego rytmu, tylko z jaśniejszą linią. */
html body .tfhp4 .section.dark .feature-grid > .feature,
html body .tfhp4 .tool-section.dark .feature-grid > .feature {
  border-top-color:rgba(255,255,255,.18) !important;
}

html body .tfhp4 .section.dark .feature-grid > .feature:nth-last-child(-n+2),
html body .tfhp4 .tool-section.dark .feature-grid > .feature:nth-last-child(-n+2) {
  border-bottom-color:rgba(255,255,255,.18) !important;
}

/* Punkt znajduje się dokładnie w pionowym środku stałego rzędu. */
html body .tfhp4 .feature-grid > .feature::before,
html body .tfhp4 .tool-section .feature-grid > .feature::before,
html body .tfhp4 .showcase-section .feature-grid > .feature::before {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  margin:0 !important;
  background:#b23434 !important;
  transform:translateY(-50%) !important;
}

/* Po przejściu na jedną kolumnę nadal obowiązuje stała odległość
   pomiędzy liniami; tylko ostatni element otrzymuje linię dolną. */
@media (max-width:720px) {
  html body .tfhp4 .feature-grid,
  html body .tfhp4 .system-section .feature-grid,
  html body .tfhp4 .tool-section .feature-grid,
  html body .tfhp4 .showcase-section .feature-grid,
  html body .tfhp4 .accessories-section .feature-grid {
    grid-template-columns:1fr !important;
    grid-auto-rows:70px !important;
    column-gap:0 !important;
  }

  html body .tfhp4 .feature-grid > .feature:nth-last-child(-n+2),
  html body .tfhp4 .tool-section .feature-grid > .feature:nth-last-child(-n+2),
  html body .tfhp4 .showcase-section .feature-grid > .feature:nth-last-child(-n+2) {
    border-bottom:0 !important;
  }

  html body .tfhp4 .feature-grid > .feature:last-child,
  html body .tfhp4 .tool-section .feature-grid > .feature:last-child,
  html body .tfhp4 .showcase-section .feature-grid > .feature:last-child {
    border-bottom:1px solid rgba(95,104,116,.20) !important;
  }

  html body .tfhp4 .section.dark .feature-grid > .feature:last-child,
  html body .tfhp4 .tool-section.dark .feature-grid > .feature:last-child {
    border-bottom-color:rgba(255,255,255,.18) !important;
  }
}


/* ================================================================
   v0.6.80 — CZTERY GÓRNE KAFLE: JEDNA STAŁA RAMKA, TYLKO ZOOM OBRAZU
   - zewnętrzna rama kafla jest zawsze cienka i nie zmienia się na hover,
   - obraz nie ma własnej ramki, obrysu ani cienia,
   - na hover porusza się wyłącznie obraz przez subtelne powiększenie.
   ================================================================ */
html body .tfhp4 .entry,
html body .tfhp4 .entry:hover,
html body .tfhp4 .entry:focus-visible {
  border:1px solid #d7dde3 !important;
  border-top:3px solid #b23434 !important;
  outline:0 !important;
  box-shadow:none !important;
  transform:none !important;
  background:#ffffff !important;
}

html body .tfhp4 .entry-art {
  overflow:hidden !important;
  border-right:0 !important;
  border-bottom:0 !important;
  border-left:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

html body .tfhp4 .entry-art img,
html body .tfhp4 .entry:hover .entry-art img,
html body .tfhp4 .entry:focus-visible .entry-art img {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

html body .tfhp4 .entry-art img {
  transform:scale(1) !important;
  transform-origin:center center !important;
  transition:transform .38s ease !important;
}

html body .tfhp4 .entry:hover .entry-art img,
html body .tfhp4 .entry:focus-visible .entry-art img {
  transform:scale(1.02) !important;
}

/* ================================================================
   v0.7.1 — SYSTEM FIZYCZNY I PRZYWRÓCENIE ZNAKU TF W ZAKOŃCZENIU
   - tekst sekcji systemu fizycznego pozostaje wyrównany do prawej,
   - para przycisków wraca do lewej krawędzi treści,
   - ogromny znak TF ponownie buduje subtelne tło sekcji końcowej.
   ================================================================ */

/* Sam blok tekstowy pozostaje prawostronny, ale przyciski zaczynają
   się od lewej krawędzi kontenera treści. */
html body .tfhp4 .products-section > .wrap > .actions {
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Znak ma zajmować znaczną część granatowego pola i częściowo
   przechodzić pod tytułem, pozostając spokojnym drugim planem. */
html body .tfhp4 .final-cta::after {
  top:50% !important;
  right:clamp(-260px,-9vw,-110px) !important;
  width:clamp(920px,74vw,1380px) !important;
  opacity:.135 !important;
  filter:saturate(.82) brightness(1.08) !important;
  background-position:center !important;
  background-size:contain !important;
}

@media (max-width:1050px) {
  html body .tfhp4 .final-cta::after {
    right:-310px !important;
    width:min(1120px,112vw) !important;
    opacity:.115 !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .products-section > .wrap > .actions {
    margin-left:0 !important;
    margin-right:0 !important;
  }

  html body .tfhp4 .final-cta::after {
    right:-390px !important;
    width:850px !important;
    opacity:.08 !important;
  }
}


/* ================================================================
   V0.7.3 — PRZYWRÓCENIE TŁA ZNAKU TF I KOREKTA INTERLII MANIFESTU
   - znak TF ponownie wyraźnie widoczny w tle końcowej sekcji,
   - większa skala i lepsze położenie pod tytułem,
   - bezpieczniejsza interlinia dużego nagłówka.
   ================================================================ */
html body .tfhp4 .final-cta {
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

html body .tfhp4 .final-cta::after {
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  top:50% !important;
  right:-36px !important;
  width:min(72vw,1080px) !important;
  min-width:900px !important;
  aspect-ratio:1 / 1 !important;
  background-image:var(--tfhp4-watermark-image, url("../images/tf-logo-mark-watermark-v072.png")) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  opacity:.18 !important;
  mix-blend-mode:screen !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
}

html body .tfhp4 .final-cta .wrap {
  position:relative !important;
  z-index:1 !important;
}

html body .tfhp4 .final-cta .title.medium {
  max-width:980px !important;
  line-height:1.03 !important;
  letter-spacing:-.032em !important;
}

@media (max-width:1050px) {
  html body .tfhp4 .final-cta::after {
    right:-120px !important;
    width:min(92vw,860px) !important;
    min-width:0 !important;
    opacity:.15 !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .final-cta::after {
    top:54% !important;
    right:-230px !important;
    width:620px !important;
    opacity:.11 !important;
  }

  html body .tfhp4 .final-cta .title.medium {
    line-height:1.04 !important;
  }
}

/* ================================================================
   V0.7.4 — PEWNE WYŚWIETLANIE ZNAKU TF W MANIFEŚCIE
   - adres obrazu nie jest już przekazywany jako wartość zmiennej CSS,
   - znak jest zwykłym elementem IMG z bezpiecznie wygenerowanym src,
   - element pozostaje dekoracyjnym tłem pod treścią sekcji.
   ================================================================ */
html body .tfhp4 .final-cta::after {
  content:none !important;
  display:none !important;
  background:none !important;
}

html body .tfhp4 .final-cta .tfhp4-final-watermark {
  position:absolute !important;
  z-index:0 !important;
  top:50% !important;
  right:-36px !important;
  width:min(72vw,1080px) !important;
  min-width:900px !important;
  max-width:none !important;
  height:auto !important;
  opacity:.18 !important;
  filter:saturate(.86) brightness(1.08) !important;
  mix-blend-mode:screen !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
  user-select:none !important;
}

html body .tfhp4 .final-cta .wrap {
  position:relative !important;
  z-index:1 !important;
}

@media (max-width:1050px) {
  html body .tfhp4 .final-cta .tfhp4-final-watermark {
    right:-120px !important;
    width:min(92vw,860px) !important;
    min-width:0 !important;
    opacity:.15 !important;
  }
}

@media (max-width:720px) {
  html body .tfhp4 .final-cta .tfhp4-final-watermark {
    top:54% !important;
    right:-230px !important;
    width:620px !important;
    min-width:620px !important;
    opacity:.11 !important;
  }
}