/* ==========================================================================
   Quantum Fitness — core
   Design tokens, reset, typography, layout primitives.
   Measured 1:1 against www.quantumfitness.pl (Hello/Elementor original).
   ========================================================================== */

/* --- Self-hosted Quantum Sans (the original's only real webfont; the theme
       also named "Nocturne Serif" for inputs but never shipped a @font-face,
       so that fell back to sans-serif and we do the same). ---------------- */
@font-face {
  font-family: 'Quantum';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Quantum-Sans-normal-400-100.woff2') format('woff2'),
       url('../fonts/Quantum-Sans-normal-400-100.woff') format('woff');
}
@font-face {
  font-family: 'Quantum';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Quantum-Sans-Semi-Bold-normal-600-100.woff2') format('woff2'),
       url('../fonts/Quantum-Sans-Semi-Bold-normal-600-100.woff') format('woff');
}

:root {
  /* Elementor kit-7 global palette, verbatim */
  --c-primary: #000000;
  --c-secondary: #333333;
  --c-text: #000000;
  --c-accent: #7a7a7a;
  --c-white: #ffffff;
  --c-menu: #d5d5d5;

  /* Section rhythm. The original used percentage padding, which is why every
     breakpoint lands on 8% of the viewport width. */
  --gutter: 8%;
  --gutter-wide: 12%;

  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-secondary);
  font-family: 'Quantum', Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--c-white);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

/* --- Headings: the kit sized every level in em off the root 16px/13px ----- */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: 'Quantum', Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: inherit;
}

h1 { font-size: 4.5em; text-transform: uppercase; line-height: 1; }
h2 { font-size: 3.5em; line-height: 1.1; }
h3 { font-size: 2.5em; line-height: 1.1; }
h4 { font-size: 1.5em; line-height: 1; }
h5 { font-size: 1.2em; line-height: 1; }
h6 { font-size: 1em; line-height: 1; }

/* Elementor's kit puts 20px under every paragraph; its text-editor widget then
   drops the trailing one, which is why the accordion and the plain lists below
   keep theirs and body copy does not. */
p {
  margin: 0 0 20px;
}

p:last-child {
  margin-bottom: 0;
}

/* Skip link, same copy as the original */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: #000;
  color: #fff;
  z-index: 9999;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.section {
  position: relative;
  padding: var(--gutter);
}

.section--wide-x {
  padding: var(--gutter) var(--gutter-wide) 0;
}

.section--flush-r {
  padding: 0 0 0 var(--gutter);
}

.section--black {
  background: var(--c-primary);
  color: var(--c-white);
}

.section--white {
  background: var(--c-white);
  color: var(--c-primary);
}

/* Full-bleed background image layer + dimming overlay, as Elementor built it */
.section__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.section__bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  will-change: transform;
}

.section__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

.section__overlay--23 { opacity: 0.23; }
.section__overlay--50 { opacity: 0.5; }

/* Elementor's translate effects widen the layer so no edge can show */
.section__bg-layer--wide { left: -10%; right: -10%; }
.section__bg-layer--right { background-position: 100% 50%; }

/* Elementor min-height sections: the height lands on the container, so the
   section ends up min-height + its own padding, exactly as the original. */
.section--minh70 > .container { min-height: 70vh; }
.section--minh75 > .container { min-height: 75vh; }

.container {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
}

.container--top { align-items: flex-start; }
.container--bottom { align-items: flex-end; }

.col { position: relative; display: flex; }
.col-50 { width: 50%; }
.col-33 { width: 33.333%; }
.col-100 { width: 100%; }

.col__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 10px;
}

.col__inner--top { justify-content: flex-start; }
.col__inner--bottom { justify-content: flex-end; }
.col__inner--pad0 { padding: 0; }

/* Widgets stack with the kit's 20px gap; last child never adds trailing space */
.w + .w { margin-top: 20px; }

.spacer { display: block; width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 70px;
  padding: 0 72px;
  background: var(--c-white);
}

.site-header__logo img {
  width: 200px;
  max-width: 200px;
  height: auto;
}

.site-header__right {
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 80%;
  gap: 0;
}

/* Three separate menu groups, divided by hairlines — exactly how the original
   split its nav into Korzyści/Zajęcia/Trening, Klub/Wellness/Krio, and Oferta.
   Items are inline-block inside a text-aligned block, not flex: that is what the
   original did, and the inter-item gaps are the collapsed markup whitespace. */
.nav-group { display: block; }

.nav-group--a { padding-right: 10px; border-right: 1px solid #000; }
.nav-group--b { padding: 0 10px; border-right: 1px solid #333; }
.nav-group--c { padding: 0 20px 0 10px; }

.nav-group ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.nav-group--a ul { text-align: center; }
.nav-group--b ul,
.nav-group--c ul { text-align: right; }

.nav-group li {
  position: relative;
  display: inline-block;
  padding: 0;
}

.nav-group a,
.nav-group .nav-toggle {
  display: block;
  padding: 10px;
  border: 0;
  background: none;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
}

/* menu-hover-style-1: a 1px rule wipes in under the label */
.nav-group > ul > li > a::before,
.nav-group > ul > li > .nav-toggle::before {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 1px;
  background: var(--c-secondary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}

.nav-group > ul > li:hover > a::before,
.nav-group > ul > li:hover > .nav-toggle::before { transform: scaleX(1); }

/* Dropdown (Korzyści → Indywidualny / Firmy) */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 180px;
  margin: 0;
  padding: 0;
  background: var(--c-white);
  box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.12);
  list-style: none;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}

.nav-has-children:hover > .nav-dropdown,
.nav-has-children:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li { display: block; }

.nav-dropdown a {
  padding: 10px 15px;
  color: var(--c-primary);
  text-align: left;
}

.nav-dropdown a::before { display: none; }
.nav-dropdown a:hover { text-decoration: underline; }

/* Burger — two lines, as the original's toggle-style-1 */
.burger {
  display: none;
  width: 26px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 5px 0;
  background: #000;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ==========================================================================
   Buttons — the two tp-button variants the site actually uses
   ========================================================================== */

/* Solid (button-style-8): shadow lifts, press-down on hover */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 50px;
  background: var(--c-white);
  color: var(--c-primary);
  font-size: 1em;
  font-weight: 600;
  line-height: 25px;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.27);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease),
    background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.btn:hover {
  box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.08);
  transform: translateY(3px);
}

.btn--dark {
  background: var(--c-primary);
  color: var(--c-white);
  padding: 8px 20px;
  font-size: 0.9em;
}

.btn-wrap { display: block; }
.btn-wrap--auto { display: inline-block; width: auto; }

/* Underlined text link (button-style-1): the rule sweeps on hover */
.btn-line {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 5px 0;
  color: var(--c-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: 1px;
}

.btn-line::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: left center;
}

.btn-line:hover::after {
  animation: line-sweep 1s var(--ease) 1;
}

@keyframes line-sweep {
  0%   { transform: scaleX(1); transform-origin: right center; }
  49%  { transform: scaleX(0); transform-origin: right center; }
  50%  { transform: scaleX(0); transform-origin: left center; }
  100% { transform: scaleX(1); transform-origin: left center; }
}

.btn-line--light { color: var(--c-white); }

/* Arrow link used inside the animated service boxes (button-style-9) */
.btn-arrowlink {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 15px;
  padding-right: 36px;
  color: var(--c-white);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 1px;
}

.btn-arrowlink .chev {
  flex: 0 0 21px;
  margin-left: 10px;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  transition: transform 0.3s var(--ease);
}

.btn-arrowlink:hover .chev { transform: translateX(5px); }

/* ==========================================================================
   Animated text (Qi "animated by word, appear from bottom")
   ========================================================================== */

/* The heading sits in a masking wrapper whose 8px/16px band matches the
   original's h*.qodef-m-title margins. */
.anitext {
  display: block;
  padding: 8px 0 16px;
}

.anitext > h1,
.anitext > h2,
.anitext > h3,
.anitext > h4,
.anitext > h5,
.anitext > h6 {
  margin: 0;
  overflow: hidden;
}

/* em-based, exactly like the kit: the root drops 16px -> 13px at <=1024, so
   every heading scales with it and matches the original at every breakpoint. */
.anitext--xl > * { font-size: 4.5em; line-height: 1; text-transform: uppercase; }
.anitext--lg > * { font-size: 2.5em; line-height: 1.1; text-transform: uppercase; }
.anitext--md > * { font-size: 1.5em; line-height: 1.2; text-transform: none; }
.anitext--sm > * { font-size: 1.5em; line-height: 1; text-transform: uppercase; }

.anitext .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.anitext .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.8s var(--ease);
  transition-delay: var(--d, 0ms);
}

.anitext.is-in .word > span { transform: translateY(0); }

/* ==========================================================================
   Entrance animations (Elementor fadeInUp / fadeInDown)
   ========================================================================== */

.anim {
  opacity: 0;
  will-change: transform, opacity;
}

.anim.is-in { animation-duration: 1s; animation-fill-mode: both; }
.anim--up.is-in { animation-name: fadeInUp; }
.anim--down.is-in { animation-name: fadeInDown; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; }
  .anim.is-in { animation: none; }
  .anitext .word > span { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Accordion
   ========================================================================== */

.accordion {
  border-top: 1px solid var(--c-accent);
}

.accordion__item + .accordion__item {
  border-top: 1px solid var(--c-accent);
}

.accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0;
  border: 0;
  background: none;
  color: var(--c-white);
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

.accordion__icon {
  flex: 0 0 auto;
  width: 24px;
  text-align: right;
  transition: transform 0.3s var(--ease);
}

.accordion__title[aria-expanded='true'] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.accordion__panel > div { overflow: hidden; }

.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }

.accordion__body {
  padding: 20px 0 40px;
  color: var(--c-accent);
  font-size: 1em;
  line-height: 2.1;
}

.accordion__body p,
.accordion__body p:last-child { margin: 0 0 20px; }

/* Light variant for the pages that put an accordion on white */
.accordion--light .accordion__title { color: var(--c-primary); }

/* ==========================================================================
   Contact form (Orbit Leads)
   ========================================================================== */

/* Measured against the original Elementor form: a 10px-gutter grid inside a
   negative-margin wrapper, so a col-50 field is exactly half the widget. */
.qf-form {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px -30px;
}

/* Honeypot. Bots fill every field they can parse; a person never sees this one.
   Absolutely positioned off to the left so it takes no space in the flex row
   and cannot create a horizontal scrollbar. */
.qf-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qf-form .field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-height: 1px;
  padding: 0 10px;
  margin: 0 0 30px;
}

.qf-form .field--half { width: 50%; }

.qf-form input[type='text'],
.qf-form input[type='email'],
.qf-form input[type='tel'],
.qf-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid var(--c-primary);
  border-radius: 0;
  background: var(--c-white);
  color: var(--c-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  appearance: none;
}

.qf-form select {
  width: 100%;
  min-height: 40px;
  padding: 5px 20px 5px 14px;
  border: 0;
  border-bottom: 2px solid var(--c-primary);
  border-radius: 0;
  background: var(--c-white);
  color: var(--c-primary);
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.5;
  appearance: none;
}

/* The original leaves ::placeholder at the Elementor default, which computes to 0.6. */
.qf-form input::placeholder,
.qf-form textarea::placeholder { color: var(--c-primary); opacity: 0.6; }

.qf-form input:focus,
.qf-form select:focus,
.qf-form textarea:focus {
  outline: none;
  border-bottom-color: var(--c-accent);
}

.qf-form .select-wrap { position: relative; width: 100%; }

.qf-form .select-wrap::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -7px;
  border-right: 2px solid var(--c-primary);
  border-bottom: 2px solid var(--c-primary);
  transform: rotate(45deg);
  pointer-events: none;
}

.qf-form .accept {
  display: block;
  width: 100%;
}

/* The consent row. The original gives the checkbox line a 24px strut and no
   extra padding, so the row is exactly 24px per wrapped line. The earlier
   4px/12px padding version only happened to be right for a two-line label and
   came out 8px short wherever the label wraps to three (korzysci-firmy). */
.qf-form .accept { padding-top: 0; padding-bottom: 0; line-height: 1.5; }

.qf-form .accept input {
  width: 13px;
  height: 13px;
  margin: 0 3px 0 0;
  vertical-align: baseline;
}

.qf-form .accept label {
  color: var(--c-primary);
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
}

.qf-form .disclaimer {
  display: block;
  width: 100%;
  padding: 0 10px;
  margin: 0 0 30px;
  color: var(--c-secondary);
  font-size: 12px;
  line-height: 12px;
}

.qf-form .submit-row { justify-content: flex-end; width: 50%; }

.qf-form button[type='submit'] {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 0 24px;
  border: 0;
  background: #cecece;
  color: var(--c-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 15px;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.qf-form button[type='submit']:hover { background: var(--c-primary); color: var(--c-white); }
.qf-form button[type='submit'][disabled] { opacity: 0.6; cursor: default; }

.qf-form .form-msg {
  width: 100%;
  padding: 0 10px;
  color: #b00020;
  font-size: 14px;
  line-height: 1.4;
}

.qf-form .form-msg:empty { display: none; }

.form-thanks { font-size: 16px; line-height: 1.6; }

.qf-form .cf-turnstile { width: 100%; padding: 0 10px; }
.qf-form .cf-turnstile:empty { display: none; }

/* Cross-fading background slideshow layers */
.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  transition: opacity 1.2s var(--ease);
}

/* ==========================================================================
   Mobile menu (Elementor popup 1962 rebuilt as a plain dialog)
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.is-open { visibility: visible; pointer-events: auto; }

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }

.mobile-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 640px;
  max-width: 100vw;
  height: 100vh;
  padding: 50px 20px 20px;
  overflow-y: auto;
  background: var(--c-primary);
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.mobile-menu.is-open .mobile-menu__panel { opacity: 1; transform: none; }

.mobile-menu__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__logo {
  padding: 10px 10px 10px 0;
  margin-bottom: 40px;
}

.mobile-menu__logo img { width: 40%; }

.mobile-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu ul a {
  display: block;
  padding: 6px 11px;
  color: var(--c-menu);
  font-size: 15px;
  font-weight: 600;
  transition: color 0.25s var(--ease);
}

.mobile-menu ul a:hover,
.mobile-menu ul a[aria-current='page'] { color: var(--c-white); }

.mobile-menu__divider {
  width: 100%;
  height: 1px;
  margin: 15px 0;
  background: var(--c-white);
}

.mobile-menu__cta { padding: 30px 0 0 10px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding: 2% var(--gutter) 5%;
  border-top: 1px solid var(--c-accent);
  background: var(--c-white);
  color: var(--c-primary);
}

.site-footer__inner {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.site-footer__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 60%;
  padding: 10px;
}

.site-footer__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  width: 40%;
  padding: 10px;
  text-align: right;
}

.site-footer__logo { display: block; margin-bottom: 30px; }
.site-footer__logo img { width: 250px; max-width: 250px; }

.site-footer__label {
  margin: 20px 0 -10px;
  color: var(--c-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: inherit;
}

.site-footer__links {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__links li:not(:last-child) { padding-bottom: 4px; }
.site-footer__links li:not(:first-child) { margin-top: 4px; }

.site-footer__links a {
  display: block;
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 600;
  line-height: inherit;
  transition: color 0.3s var(--ease);
}

.site-footer__links a:hover { color: var(--c-primary); }

.site-footer__social {
  display: flex;
  gap: 0;
  margin-top: 20px;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--c-white);
  color: var(--c-primary);
  transition: color 0.3s var(--ease);
}

.site-footer__social a:hover { color: var(--c-secondary); }
.site-footer__social svg { width: 18px; height: 18px; fill: currentColor; }

.site-footer__badge img { width: 100%; margin-left: auto; }

.site-legal {
  display: flex;
  align-items: center;
  padding: 2% var(--gutter);
  background: var(--c-white);
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
}

.site-legal__copy {
  width: 33.333%;
  padding-right: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
}

/* inline-block items in a centred block, so a narrow bar wraps the pair the
   way the original's icon list does rather than squeezing each label */
.site-legal__links {
  display: block;
  width: 33.333%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.site-legal__links li { display: inline-block; }
.site-legal__links li:not(:last-child) { padding-inline-end: 8px; }
.site-legal__links li:not(:first-child) { margin-inline-start: 8px; }

.site-legal__links a {
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 600;
  line-height: inherit;
  transition: color 0.3s var(--ease);
}

.site-legal__links a:hover { color: var(--c-primary); }

.site-legal__credit {
  width: 33.333%;
  margin: 0 0 -15px;
  color: var(--c-primary);
  font-size: 12px;
  font-weight: 600;
  line-height: inherit;
  text-align: right;
}

.site-legal__credit a {
  color: #808080;
  transition: color 0.3s var(--ease);
}

.site-legal__credit a:hover { color: var(--c-primary); }

/* ==========================================================================
   Shared content bits
   ========================================================================== */

.eyebrow {
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
}

.lead { font-size: 1em; line-height: 1.5; }

.rte h2,
.rte h3,
.rte h4,
.rte h5,
.rte h6 { margin: 1.4em 0 0.6em; }

.rte h2:first-child,
.rte h3:first-child { margin-top: 0; }

.rte ul,
.rte ol { margin: 0 0 20px; padding-left: 22px; }
.rte li { margin-bottom: 8px; }
.rte a { color: inherit; text-decoration: underline; }
.rte strong { font-weight: 600; }
.rte table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.rte th,
.rte td { padding: 8px 10px; border: 1px solid rgba(0, 0, 0, 0.18); text-align: left; vertical-align: top; }

/* Scroll-down circle icon in the hero */
.scroll-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 3px solid var(--c-white);
  border-radius: 50%;
  color: var(--c-white);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.scroll-dot:hover { background: var(--c-white); color: var(--c-primary); }
.scroll-dot svg { width: 14px; height: 14px; fill: currentColor; }

/* Image carousel / slider (rebuilt from swiper) */
.slider { position: relative; overflow: hidden; }

.slider__track {
  display: flex;
  transition: transform 0.5s var(--ease);
  will-change: transform;
}

.slider__slide { flex: 0 0 auto; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; }

.slider__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}

.slider__nav:hover { background: rgba(0, 0, 0, 0.85); }
.slider__nav--prev { left: 12px; }
.slider__nav--next { right: 12px; }
.slider__nav svg { width: 16px; height: 16px; fill: currentColor; }

.slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.slider__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.slider__dots button[aria-current='true'] { background: var(--c-primary); }

/* Lightbox for the gallery sliders */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}

.lightbox.is-open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 88vh; object-fit: contain; }

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  border: 0;
  background: none;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.lightbox__close { top: 18px; right: 22px; }
.lightbox__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 22px; top: 50%; transform: translateY(-50%); }

/* Animated service boxes: title always visible, body + link reveal on hover */
/* The Plus wrapper has a 235px min-height and centres its single flex line,
   which is where the 20px band above and below the desktop cards comes from. */
.asb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: center;
  width: 100%;
  min-height: 235px;
  margin-left: -10px;
}

.asb__item {
  width: 33.333%;
  padding: 0 15px;
}

.asb__title {
  margin: 0;
  color: var(--c-white);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.asb__reveal {
  transform: translateY(30px);
  transition: transform 0.4s var(--ease);
}

.asb__desc {
  margin-top: 20px;
  color: var(--c-white);
  font-size: 16px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.asb__cta {
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

.asb__item:hover .asb__reveal,
.asb__item:focus-within .asb__reveal,
.asb__item.is-open .asb__reveal { transform: translateY(0); }

.asb__item:hover .asb__desc,
.asb__item:hover .asb__cta,
.asb__item:focus-within .asb__desc,
.asb__item:focus-within .asb__cta,
.asb__item.is-open .asb__desc,
.asb__item.is-open .asb__cta { opacity: 1; }

/* Sticky column used on the home "Nowoczesny obiekt" block */
.sticky-col { position: sticky; top: 40px; align-self: flex-start; }

/* Counters */
.counter { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Breakpoints — Elementor's: mobile <=767, tablet 768-1024, desktop >1024
   ========================================================================== */

@media (max-width: 1024px) {
  body { font-size: 13px; line-height: 1.5em; }

  .site-header { padding: 0 38px; }
  .nav-group { display: none; }
  .burger { display: block; }
  .site-header__right { width: 65%; gap: 20px; }

  .container { flex-wrap: wrap; }
  .asb { padding: 0 20px; }
  .asb__item { padding: 0 15px; }

  .site-footer { padding: 3em 2em; }
  .site-footer__links li:not(:last-child) { padding-bottom: 0; }
  .site-footer__links li:not(:first-child) { margin-top: 0; }
  .site-legal__links li:not(:last-child) { padding-inline-end: 0; }
  .site-legal__links li:not(:first-child) { margin-inline-start: 0; }
  .sticky-col { position: static; }
}

@media (max-width: 767px) {
  h1 { font-size: 3.6em; }
  .anitext--xl > * { font-size: 3.6em; }

  .site-header { height: 50px; padding: 5px 15px; }
  .site-header__right { width: 30%; }
  .btn--dark { display: none; }

  /* Elementor emits its column widths at min-width:768, so everything below
     that is full width. */
  .col-50,
  .col-33 { width: 100%; }

  /* Phones: the row keeps a 10px gutter and each card gets 20px of its own */
  .asb { padding: 0 10px; }
  .asb__item { width: 100%; padding: 20px 0; }

  .site-footer { padding: 1em; }
  .site-footer__inner { flex-wrap: wrap; }
  .site-footer__left { order: 2; width: 100%; }
  .site-footer__right { order: 3; width: 100%; text-align: left; }
  .site-footer__badge img { margin-left: 0; }
  .site-footer__links li:not(:last-child) { padding-bottom: 4px; }
  .site-footer__links li:not(:first-child) { margin-top: 4px; }

  .site-legal { flex-wrap: wrap; gap: 6px; }
  .site-legal__copy,
  .site-legal__links,
  .site-legal__credit { width: 100%; text-align: left; }
  .site-legal__links { margin-top: 5px; }

  .mobile-menu { justify-content: flex-end; }
  .mobile-menu__panel { width: 90vw; }
  .mobile-menu__logo img { width: 85%; }
  .mobile-menu__divider { width: 20%; margin-left: 10px; }

  .qf-form .field--half,
  .qf-form .submit-row { width: 100%; }
}

/* ==========================================================================
   Home page
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's width,
   which is why the original lands on the same proportions at every breakpoint.
   ========================================================================== */

/* --- Hero (section d787575) ---------------------------------------------- */
.home-hero .col__inner > * { margin-bottom: 20px; }
.home-hero .col__inner > *:last-child { margin-bottom: 0; }
.home-hero .anitext > h1 { color: var(--c-white); }
.home-hero .w-auto { align-self: flex-start; width: auto; margin-bottom: 0; }

/* widget-container margin 0% 30% 5% 0% of the 585px column */
.home-hero .col__inner > .home-hero__sub {
  width: 70%;
  margin: 0 30% calc(5% + 20px) 0;
  color: var(--c-white);
  font-size: 1.5em;
  line-height: 1;
  text-transform: uppercase;
}

.home-hero__spacer { height: 100px; flex: 0 0 auto; }
.home-hero__scroll { height: 34px; line-height: 0; }

.home-hero .scroll-dot {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

.home-hero .scroll-dot svg { width: 12px; height: 12px; }

/* --- Personalised services (section e9f1ae9) ----------------------------- */
.home-intro__col { width: 40%; }
.home-intro__spacecol { width: 60%; }

.home-intro__card {
  padding: 20% 12%;
  background: var(--c-white);
  color: var(--c-primary);
}

.home-intro__card > * { margin-bottom: 20px; }
.home-intro__card > *:last-child { margin-bottom: 0; }
.home-intro__card .w-full { width: 100%; }
.home-intro__card .anitext > h4 { color: var(--c-primary); }
.home-intro__body { width: 90%; margin-right: 10%; color: var(--c-secondary); }

/* --- Yoga (section 511f27b) ---------------------------------------------- */
.home-yoga__col-a { width: 35%; }
.home-yoga__col-b { width: 65%; }

.home-yoga__col-a .col__inner > * { margin-bottom: 20px; }
.home-yoga__col-a .col__inner > *:last-child { margin-bottom: 0; }
.home-yoga__col-a .anitext > h3 { color: var(--c-white); }
.home-yoga__col-a .w-auto { align-self: flex-start; width: auto; margin-bottom: 0; }
.home-yoga__col-a .col__inner > .home-yoga__lead { width: 90%; margin: 0 10% calc(10% + 20px) 0; color: var(--c-white); }

.home-yoga__card {
  width: 90%;
  margin-left: 10%;
  padding: 3%;
  background: var(--c-white);
  color: var(--c-primary);
}

.home-yoga__row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 6%;
}

.home-yoga__row-l { width: 25%; padding: 10px; }
.home-yoga__row-r { width: 75%; padding: 10px; }

.home-yoga__row-l h5 {
  margin-top: 15px;
  font-size: 1.2em;
  line-height: 1;
}

.home-yoga__row-r > * + * { margin-top: 20px; }
.home-yoga__row-r .anitext > h4 { color: var(--c-primary); }
.home-yoga__body { width: 90%; margin-right: 10%; color: var(--c-text, #000); }

/* --- Facility (section c7f305f) ------------------------------------------ */
.home-facility .col__inner { padding: 30px; }
/* The Plus sticky column lifts its widgets out of the padded wrap */
@media (min-width: 1025px) {
  /* The Plus sticky column lifts its widgets out of the padded wrap; below
     1025 the sticky is off and the normal 30px column padding applies. */
  .home-facility .col__inner.home-facility__intro { padding: 0; }
}
.home-facility__intro .anitext > h4 { color: var(--c-white); }
.home-facility__intro > .anitext { margin-bottom: 20px; }
.home-facility__body { width: 90%; margin: 0 10% 10% 0; color: var(--c-white); }


.home-facility__card { color: var(--c-white); }
.home-facility__card > * { margin-bottom: 20px; }
.home-facility__card img { width: 100%; transition: transform 0.6s var(--ease); }
.home-facility__card h5 { font-size: 1.2em; line-height: 1; }
.home-facility__card .lead { width: 90%; margin-right: 10%; }
.home-facility__card .btn-line { margin-bottom: 0; }

/* the 50px Elementor spacer that sits between the two cards in each column */
.home-facility__col > .home-facility__card + .home-facility__card { margin-top: 90px; }
.home-facility__col--offset > .home-facility__card:first-child { margin-top: 70px; }

/* --- Service boxes (section b07075a) ------------------------------------- */
.home-services {
  background-size: cover;
  background-position: 50% 50%;
}


.home-services .asb__title { font-size: 24px; line-height: 1.2; }
.home-services .asb__desc { font-size: 1em; line-height: 1.5; }
.home-services .btn-arrowlink { font-size: 16px; line-height: 25px; }

/* --- Location (section d0c73e8) ------------------------------------------ */
.home-location__col-a { width: 35%; }
.home-location__col-b { width: 65%; }

.home-location__col-a .col__inner > * { margin-bottom: 20px; }
.home-location__col-a .col__inner > *:last-child { margin-bottom: 0; }
.home-location__col-a .anitext > h3 { color: var(--c-white); }
.home-location__col-a .col__inner > .home-location__address { width: 90%; margin: 0 10% 10% 0; color: var(--c-white); }
.home-location__address a { color: var(--c-white); }
.home-location__address a:hover { color: var(--c-accent); }

.home-location__panels {
  display: flex;
  width: 90%;
  margin: 0 0 6% 10%;
  padding: 0 3% 3%;
}



.home-location__panel { width: 50%; padding: 20px; }

.home-location__panel-title {
  margin: 15px 0 35px;
  color: var(--c-white);
  font-size: 1em;
  line-height: 1;
}

.home-location__list {
  width: 90%;
  margin-right: 10%;
  color: var(--c-accent);
  font-size: 1em;
  line-height: 2.1;
}

.home-location__list p,
.home-location__list p:last-child { margin: 0 0 20px; }

/* --- Quantum standard (section 2acf53c) ---------------------------------- */
.home-standard__text { padding: 2% 14% 2% 2%; }
.home-standard__text > * { margin-bottom: 20px; }
.home-standard__text > *:last-child { margin-bottom: 0; }
.home-standard__text .anitext > h3 { color: var(--c-white); }
.home-standard__text > .home-standard__body { width: 90%; margin: 0 10% 10% 0; color: var(--c-white); }
.home-standard__media { overflow: hidden; }
.home-standard__spacer { height: 50px; }

/* --- Join / form (section 92149d9) --------------------------------------- */
.home-join__intro { padding: 2% 14% 2% 2%; }
.home-join__formcol { padding: 10px; }
.home-join .anitext > h3 { color: var(--c-primary); }

/* ==========================================================================
   Home — responsive. The original keeps its column split down to 768px and
   only stacks below that (Elementor emits column widths at min-width:768).
   ========================================================================== */

@media (max-width: 1024px) {
  .home-yoga { padding: 8% 0 8% 8%; }
}

@media (max-width: 767px) {
  /* only this button shrinks on phones in the original */
  .home-intro .btn-line { font-size: 12px; }

  .home-intro__col,
  .home-intro__spacecol,
  .home-yoga__col-a,
  .home-yoga__col-b,
  .home-location__col-a,
  .home-location__col-b { width: 100%; }

  .home-yoga { padding: 15px; }
  .home-yoga__card { width: auto; margin: 3%; }
  .home-yoga__row { flex-direction: column; }
  .home-yoga__row-l,
  .home-yoga__row-r { width: 100%; }

  .home-facility .col__inner { padding: 0; }
  /* the original gives the last card's link 40px of breathing room on phones */
  .home-facility__col--offset > .home-facility__card:last-child .btn-line { margin-bottom: 40px; }
  .home-facility__col--offset > .home-facility__card:first-child { margin-top: 70px; }

  .home-location__panels { flex-direction: column; width: 100%; margin: 0 0 6%; padding: 0 3% 3%; }
  .home-location__panel { width: 100%; padding: 0; }

  .home-standard { padding: 0; }
  .home-standard__text { padding: 8%; }
  .home-standard__spacer { height: 350px; }

  .home-join__intro { padding: 0 0 10%; }
  .home-hero__sub { width: 100%; margin-right: 0; }
}

/* ==========================================================================
   Membership pages — SHARED
   oferta.html and korzysci-indywidualny.html are the same Elementor layout
   published twice, so every rule here is scoped to the `.p-packs` body class
   that BOTH templates carry. The only genuine difference between the two
   pages lives in 21-korzysci-indywidualny.css.

   Percentages are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's WIDTH,
   which is why the original keeps the same proportions at every breakpoint.
   ========================================================================== */

/* Elementor min-height 40vh sections (three of them on this layout) */
.p-packs .section--minh40 > .container { min-height: 40vh; }

/* The recurring Elementor column inset: widget-wrap margin-left 10% with
   0% 3% 3% 3% padding, both resolved against the column width. */
.p-packs .pk-shift {
  margin-left: 10%;
  padding: 0 3% 3%;
}

/* --- Hero (section 3403f4a / 74ada3a) ------------------------------------ */
.p-packs .pk-hero__col { width: 50%; }
.p-packs .pk-hero__spacecol { width: 50%; }

.p-packs .pk-hero .col__inner > * { margin-bottom: 20px; }
.p-packs .pk-hero .col__inner > *:last-child { margin-bottom: 0; }
.p-packs .pk-hero .anitext > h1 { color: var(--c-white); }

/* oferta gives the animated heading `width-initial` at 100.155% and therefore
   no widget gap; korzysci-indywidualny keeps the plain full-width widget. */
.p-packs .pk-hero .col__inner > .pk-hero__title {
  width: 100.155%;
  max-width: 100.155%;
  margin-bottom: 0;
}

/* heading widget-container margin 0% 30% 5% 0% of the 585px column */
.p-packs .pk-hero .col__inner > .pk-hero__sub {
  width: 70%;
  margin: 0 30% calc(5% + 20px) 0;
  color: var(--c-white);
  font-size: 1.5em;
  line-height: 1;
  text-transform: uppercase;
}

.p-packs .pk-hero .w-auto { align-self: flex-start; width: auto; margin-bottom: 0; }
.p-packs .pk-hero__spacer { height: 100px; flex: 0 0 auto; }
.p-packs .pk-hero__scroll { height: 34px; line-height: 0; }
.p-packs .pk-hero .scroll-dot { width: 28px; height: 28px; border-width: 2px; }
.p-packs .pk-hero .scroll-dot svg { width: 12px; height: 12px; }

/* --- Memberships (section 093536c / 74ad) -------------------------------- */
.p-packs .pk-tiers { overflow: hidden; }
.p-packs .pk-tiers .anitext > h3 { color: var(--c-white); }
.p-packs .pk-tiers__intro > .anitext { margin-bottom: 20px; }

/* heading widget-container margin 15px 0 15px, plus the kit's 20px widget gap */
.p-packs .pk-tiers__subtitle {
  margin: 15px 0 calc(15px + 20px);
  color: var(--c-white);
  font-size: 1em;
  line-height: 1;
}

/* icon list: 15px item gap split half above / half below, 14px check icon */
.p-packs .pk-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-packs .pk-benefits li {
  display: flex;
  align-items: center;
  padding-bottom: 7.5px;
}

.p-packs .pk-benefits li:last-child { padding-bottom: 0; }
.p-packs .pk-benefits li + li { margin-top: 7.5px; }

/* Elementor sizes the icon box at 1.25em of the 14px icon size */
.p-packs .pk-benefits__icon {
  flex: 0 0 17.5px;
  width: 17.5px;
  height: 14px;
}

.p-packs .pk-benefits__icon svg {
  width: 14px;
  height: 14px;
  fill: var(--c-white);
}

.p-packs .pk-benefits__text {
  flex: 1 1 auto;
  padding-left: 5px;
  color: #b0aeae;
  font-size: 1em;
  line-height: 1.1;
  transition: color 0.3s var(--ease);
}

.p-packs .pk-benefits li:hover .pk-benefits__text { color: var(--c-white); }

/* the 50px Elementor spacer between the two cards in the middle column and the
   150px one that pushes the right-hand card down */
.p-packs .pk-tiers__stack > .pk-plan + .pk-plan { margin-top: 50px; }
.p-packs .pk-tiers__stack--offset > .pk-plan:first-child { margin-top: 150px; }

/* --- Membership card (tp-pricing-table, pricing-style-1) ------------------ */
.p-packs .pk-plan {
  padding: 2em 1em;
  border-radius: 3px;
  background: var(--c-white);
  box-shadow: 0 0 10px rgba(136, 136, 136, 0.25);
  color: var(--c-secondary);
  text-align: center;
}

.p-packs .pk-plan--tall { padding: 3em 1em; }

.p-packs .pk-plan__title {
  margin: 0 0 20px;
  color: var(--c-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: inherit;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.p-packs .pk-plan__price { margin-bottom: 20px; }

.p-packs .pk-plan__amount,
.p-packs .pk-plan__currency {
  color: var(--c-primary);
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1px;
}

.p-packs .pk-plan__period {
  display: block;
  margin-top: 5px;
  color: #888;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0.5px;
}

.p-packs .pk-plan__notes ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-packs .pk-plan__notes li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
  padding: 5px 0;
  border-bottom: 1px solid #d3d3d3;
}

.p-packs .pk-plan__notes li:last-child { border-bottom: 0; }

/* the 8px trailing gutter is what decides where a note wraps on tablet */
.p-packs .pk-plan__notes p {
  margin: 0 8px 0 0;
  font-size: 1em;
  line-height: 1;
}

/* --- Fitness & wellness intro (section 2c7c433) -------------------------- */
.p-packs .pk-intro__col-a { width: 50%; }
.p-packs .pk-intro__col-b { width: 50%; }
.p-packs .pk-intro .anitext > h3 { color: var(--c-primary); }
.p-packs .pk-intro__body { width: 90%; margin: 0 10% 10% 0; color: var(--c-text); }

/* --- Luxury location (section de07405) ----------------------------------- */
.p-packs .pk-luxury__col { width: 60%; }
.p-packs .pk-luxury__media { width: 39.999%; }

.p-packs .pk-luxury__text { padding: 2% 14% 10% 2%; }
.p-packs .pk-luxury__text > * { margin-bottom: 20px; }
.p-packs .pk-luxury__text > *:last-child { margin-bottom: 0; }
.p-packs .pk-luxury__text .anitext > h4 { color: var(--c-white); }
.p-packs .pk-luxury__text > .pk-luxury__body {
  width: 90%;
  margin: 0 10% calc(10% + 20px) 0;
  color: var(--c-white);
}

.p-packs .pk-luxury__media img { width: 100%; margin-bottom: 20px; }
.p-packs .pk-luxury__spacer { height: 50px; flex: 0 0 auto; }

/* --- Equipment (section 66a29a0) ----------------------------------------- */
.p-packs .pk-gear__spacecol { width: 20%; }
.p-packs .pk-gear__col-a { width: 40%; }
.p-packs .pk-gear__col-b { width: 39.664%; }

.p-packs .pk-gear .col__inner > * { margin-bottom: 20px; }
.p-packs .pk-gear .col__inner > *:last-child { margin-bottom: 0; }
.p-packs .pk-gear .anitext > h3 { color: var(--c-white); }
.p-packs .pk-gear .col__inner > .pk-gear__body {
  width: 90%;
  margin: 0 10% 10% 0;
  color: var(--c-white);
}

/* --- Quantum Premium (section 7a806c6) ----------------------------------- */
.p-packs .pk-premium__text { padding: 2% 14% 2% 2%; }
.p-packs .pk-premium__text > * { margin-bottom: 20px; }
.p-packs .pk-premium__text > *:last-child { margin-bottom: 0; }
.p-packs .pk-premium__text .anitext > h3 { color: var(--c-white); }
.p-packs .pk-premium__text > .pk-premium__body {
  width: 90%;
  margin: 0 10% 10% 0;
  color: var(--c-white);
}

.p-packs .pk-premium__media { overflow: hidden; }
.p-packs .pk-premium__spacer { height: 50px; }

/* Elementor widens a translateX layer by speed x 10% and anchors it left */
.p-packs .pk-premium__layer {
  right: -30%;
  background-position: 100% 50%;
}

/* --- Join / form (section 3524876) --------------------------------------- */
.p-packs .pk-join__intro { padding: 2% 14% 2% 2%; }
.p-packs .pk-join__formcol { padding: 10px; }
.p-packs .pk-join .anitext > h3 { color: var(--c-primary); }

/* ==========================================================================
   Membership pages — responsive
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 768px) {
  .p-packs .pk-hero__col { width: 75%; }
  .p-packs .pk-hero__spacecol { width: 25%; }
  .p-packs .pk-intro__col-a { width: 40%; }
  .p-packs .pk-intro__col-b { width: 60%; }
}

@media (max-width: 767px) {
  .p-packs .pk-hero__col,
  .p-packs .pk-hero__spacecol,
  .p-packs .pk-intro__col-a,
  .p-packs .pk-intro__col-b,
  .p-packs .pk-luxury__col,
  .p-packs .pk-luxury__media,
  .p-packs .pk-gear__spacecol,
  .p-packs .pk-gear__col-a,
  .p-packs .pk-gear__col-b { width: 100%; }

  .p-packs .pk-shift { margin-left: 0; }

  /* the icon list gets 80px of air before the cards stack under it */
  .p-packs .pk-benefits { margin-bottom: 80px; }
  .p-packs .pk-tiers__stack--offset > .pk-plan:first-child { margin-top: 40px; }

  .p-packs .pk-luxury { padding: 0; }
  .p-packs .pk-luxury__text { padding: 8%; }
  .p-packs .pk-luxury__media .col__inner { margin-bottom: 50px; }

  .p-packs .pk-luxury__text .btn-line { font-size: 12px; }

  .p-packs .pk-premium { padding: 0; }
  .p-packs .pk-premium__text { padding: 8%; }
  .p-packs .pk-premium__spacer { height: 350px; }

  .p-packs .pk-join__intro { padding: 0 0 10%; }
}

/* ==========================================================================
   Korzyści — Indywidualny
   This page is the same Elementor layout as /oferta/; everything it shares
   with that page lives in 20-oferta.css under the `.p-packs` body class.

   The single genuine difference on the original: the hero's animated heading
   is a plain full-width widget here, where /oferta/ gives the same widget
   Elementor's `width-initial` treatment (100.155% wide, and therefore no
   widget gap under it). That shifts the whole hero stack by 10px.
   ========================================================================== */

body[data-page='korzysci-indywidualny'] .pk-hero .col__inner > .pk-hero__title {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

/* ==========================================================================
   Korzyści — Firmy
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's WIDTH,
   which is why the original lands on the same proportions at every breakpoint.
   ========================================================================== */

/* The section overlay this page uses (Elementor opacity 0.55) */
.section__overlay--55 { opacity: 0.55; }

/* Elementor min-height 40vh, same shape as core's --minh70/--minh75 */
.kf-intro > .container,
.kf-offer > .container,
.kf-packs > .container,
.kf-personal > .container { min-height: 40vh; }

/* --- Hero (section 3403f4a) ---------------------------------------------- */
.kf-hero .col__inner > * { margin-bottom: 20px; }
.kf-hero .col__inner > *:last-child { margin-bottom: 0; }
.kf-hero .anitext > h1 { color: var(--c-white); }
.kf-hero .w-auto { align-self: flex-start; width: auto; margin-bottom: 0; }

/* widget-container margin 0% 30% 5% 0% of the 585px column */
.kf-hero .col__inner > .kf-hero__sub {
  width: 70%;
  margin: 0 30% calc(5% + 20px) 0;
  color: var(--c-white);
  font-size: 1.5em;
  line-height: 1;
  text-transform: uppercase;
}

.kf-hero__spacer { height: 100px; flex: 0 0 auto; }
.kf-hero__scroll { height: 34px; line-height: 0; }

.kf-hero .scroll-dot {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

.kf-hero .scroll-dot svg { width: 12px; height: 12px; }

/* --- Quantum Fitness & Wellness (section 2c7c433) ------------------------ */
.kf-intro .anitext > h3 { color: var(--c-primary); }

/* column margin 0% 0% 0% 10% + populated padding 0% 3% 3% 3% */
.kf-intro__inner {
  width: 90%;
  margin-left: 10%;
  padding: 0 3% 3% 3%;
}

.kf-intro__body { margin: 0 10% 10% 0; color: var(--c-text); }

/* --- Luksusowe miejsce (section de07405) --------------------------------- */
.kf-place__col-a { width: 60%; }
.kf-place__col-b { width: 39.999%; }

.kf-place__text { padding: 2% 14% 10% 2%; }
.kf-place__text > .anitext { margin-bottom: 20px; }
.kf-place__text .anitext > h4 { color: var(--c-white); }
.kf-place__body { margin: 0 10% 10% 0; color: var(--c-white); }

.kf-place__img { flex: 0 0 auto; width: 100%; margin-bottom: 20px; }
.kf-place__spacer { height: 50px; flex: 0 0 auto; }

/* --- Oferta dla Firm (section 66a29a0) ----------------------------------- */
.kf-offer__col-a { width: 20%; }
.kf-offer__col-b { width: 40%; }
.kf-offer__col-c { width: 39.664%; }

.kf-offer__col-b .anitext > h3 { color: var(--c-white); }
.kf-offer__col-b .col__inner > .anitext { margin-bottom: 20px; }
.kf-offer__body { margin: 0 10% 10% 0; color: var(--c-white); }

.kf-offer__inner {
  width: 90%;
  margin-left: 10%;
  padding: 0 3% 3% 3%;
}

.kf-offer__body2 { margin: 0 10% 10% 0; color: var(--c-white); }

/* --- Oferujemy (section 0967af0) ----------------------------------------- */
.kf-includes__col { width: 40%; }
.kf-includes__spacecol { width: 60%; }

.kf-includes__card {
  padding: 20% 12%;
  background: var(--c-white);
  color: var(--c-primary);
}

.kf-includes__card > .anitext { margin-bottom: 20px; }

.kf-includes__card .anitext > h4 {
  color: var(--c-primary);
  text-transform: uppercase;
}

/* Elementor icon list: 14px icon in a 17.5px advance box, 15px item gap split
   half above and half below each row. */
.kf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-list li {
  display: flex;
  align-items: center;
  padding-bottom: 7.5px;
}

.kf-list li:last-child { padding-bottom: 0; }
.kf-list li + li { margin-top: 7.5px; }

.kf-list__icon {
  display: flex;
  flex: 0 0 17.5px;
  align-items: center;
  justify-content: center;
  width: 17.5px;
  height: 14px;
  color: var(--c-primary);
}

.kf-list__icon svg { width: 14px; height: 14px; fill: currentColor; }

.kf-list__text {
  padding-left: 5px;
  color: var(--c-accent);
  font-size: 1em;
  line-height: 1.1;
}

/* --- Członkostwa Quantum + formularz (section 093536c) ------------------- */
.kf-packs {
  overflow: hidden;
  padding: 15% var(--gutter) var(--gutter);
}

.kf-packs .anitext > h3 { color: var(--c-white); }
.kf-packs .col__inner > .anitext { margin-bottom: 20px; }
.kf-packs__body { margin: 0 10% 10% 0; color: var(--c-white); }

.kf-packs__form {
  padding: 10%;
  background: var(--c-white);
  color: var(--c-primary);
}

/* the inner Elementor template section's own column padding */
.kf-packs__formwrap { padding: 10px; }

/* --- Obawa przed kontuzją (section 7a806c6) ------------------------------ */
.kf-injury__text { padding: 2% 14% 2% 2%; }
.kf-injury__text > .anitext { margin-bottom: 20px; }
.kf-injury__text .anitext > h4 { color: var(--c-white); }
.kf-injury__body { margin: 0 10% 10% 0; color: var(--c-white); }

.kf-injury__media { overflow: hidden; }

/* Elementor sizes a translateX background layer to 100% + speed*10% and parks
   it flush left, then slides it left across exactly that overhang. This one is
   speed 3, so the layer is 130% wide, not core's --wide 120% centred. Measured
   on the original: 662px column, 861px layer, translateX 0 to -198.6px. */
.kf-injury__bg {
  left: 0;
  right: -30%;
  background-position: 0% 50%;
}
.kf-injury__spacer { height: 50px; }

/* --- Trening personalny (section 7d7d114) -------------------------------- */
.kf-personal__col-a { width: 40%; }
.kf-personal__col-b { width: 40%; }
.kf-personal__col-c { width: 19.664%; }

.kf-personal__col-a .anitext > h3 { color: var(--c-primary); }
.kf-personal__col-a .col__inner > .anitext { margin-bottom: 20px; }
.kf-personal__body { margin: 0 10% 10% 0; color: var(--c-text); }

.kf-personal__inner {
  width: 90%;
  margin-left: 10%;
  padding: 0 3% 3% 3%;
}

.kf-personal__body2 { margin: 0 10% 10% 0; color: var(--c-text); }

/* ==========================================================================
   Responsive. Elementor emits its column widths at min-width:768, so the
   columns only stack below that; the 767 block mirrors the original's own
   mobile overrides one for one.
   ========================================================================== */

@media (max-width: 767px) {
  .kf-place__col-a,
  .kf-place__col-b,
  .kf-offer__col-a,
  .kf-offer__col-b,
  .kf-offer__col-c,
  .kf-includes__col,
  .kf-includes__spacecol,
  .kf-personal__col-a,
  .kf-personal__col-b,
  .kf-personal__col-c { width: 100%; }

  .kf-intro__inner,
  .kf-offer__inner,
  .kf-personal__inner { width: 100%; margin-left: 0; }

  .kf-place { padding: 0; }
  .kf-place__text { padding: 8%; }
  .kf-place__col-b .col__inner { margin-bottom: 50px; }

  .kf-packs__form { padding: 10px; }

  .kf-injury { padding: 0; }
  .kf-injury__text { padding: 8%; }
  .kf-injury__spacer { height: 350px; }
}

/* ==========================================================================
   Zajęcia (class timetable)
   Percentages below are the original Elementor values; percentage padding
   resolves against the containing block's WIDTH on all four sides, which is
   why the same numbers hold at every breakpoint.
   ========================================================================== */

/* --- Timetable section (section 8d60f0b) --------------------------------- */
/* Elementor: padding 5% 5% 5% 0% on a full-width section, so the table starts
   hard against the left edge and the container is viewport width minus 5%. */
.zaj-timetable {
  padding: 5% 5% 5% 0;
}

/* The Plus Addons wrapped its table in a scroller ("tp-table-mobresswipe");
   below ~600px the table stops fitting and swipes horizontally instead of
   squashing. The white here is the wrapper colour behind the 63% white rows. */
.zaj-table-wrap {
  overflow-x: auto;
  background: var(--c-white);
}

.zaj-table {
  width: 100%;
  border-collapse: collapse;
  /* the plugin's own base step: 0.9 of the root, 14.4px desktop / 11.7px tablet */
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--c-primary);
}

.zaj-table th,
.zaj-table td {
  vertical-align: middle;
  text-align: center;
  border: 1px solid var(--c-primary);
}

/* Column split: 16% for the hour column, 12% for each of the seven days. */
.zaj-table thead th { width: 12%; }
.zaj-table thead th:first-child { width: 16%; }

/* Header row + hour column + any booked slot: black block, white label. */
.zaj-table th {
  padding: 10px 15px;
  background: var(--c-primary);
  color: var(--c-white);
}

/* Free slots: no side borders, so the empty week reads as horizontal rules. */
.zaj-table td {
  padding: 4px 15px;
  border-width: 1px 0;
}

.zaj-table tbody tr {
  background: rgba(255, 255, 255, 0.63);
}

/* A slot with a class in it renders like the header cells. `:has` keys off the
   label being non-empty, so an emptied cell falls straight back to a free slot
   without the editor touching any markup. */
.zaj-table td:has(.zaj-i:not(:empty)) {
  padding: 10px 15px;
  border-width: 1px;
  background: var(--c-primary);
  color: var(--c-white);
}

/* A class that runs across two hour slots carries rowspan="2"; the slot it
   covers is marked 0 in the CMS and drops out of the grid entirely. */
.zaj-table td[data-slot='0'] { display: none; }

/* The label. The original nests the text in two spans inside a body cell and
   three inside a header cell, each one sized 1em (0.9em below 1024) off its
   parent and given a tight 1em line box. That nesting is load-bearing twice
   over: it is why the header text ends up a step smaller than the body text
   on tablets, and why a header row is 14px tall (a block box) while a body
   row is 21px (an inline-block sitting on the cell's own 1.5 line box). */
.zaj-hd,
.zaj-t,
.zaj-i,
.zaj-czas {
  font-size: 1em;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.zaj-hd { display: block; }
.zaj-table thead .zaj-t { display: block; }
.zaj-table tbody .zaj-t { display: inline-block; }
.zaj-i { display: inline-block; }

/* The class's time, shown under its name (the original joined the two with a
   plain <br> inside one text node; a block-level sibling does the same job
   now that the name and the time are separately editable fields). */
.zaj-table tbody .zaj-czas { display: block; }

/* --- Hover info (The Plus Addons' table used Tippy.js, "dark" theme, arrow,
   trigger mouseenter) -------------------------------------------------------
   A cell with a class carries an extra span with the full session name and
   instructor; empty on cells with nothing booked. Kept out of the flow and
   invisible until hover so it never affects the grid's own layout, and
   :empty means a cell with nothing in it never becomes hoverable-looking. */
.zaj-table td { position: relative; }

.zaj-tip {
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 20;
  margin-bottom: 10px;
  padding: 6px 10px;
  transform: translate(-50%, 4px);
  background: #1a1a1a;
  color: var(--c-white);
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.zaj-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1a1a;
}

.zaj-tip:empty { display: none; }

.zaj-table td:hover .zaj-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --- Join / form (section b595b5c) --------------------------------------- */
.zaj-join__intro { padding: 2% 14% 2% 2%; }
.zaj-join__formcol { padding: 10px; }
.zaj-join .anitext > h3 { color: var(--c-primary); }

/* ==========================================================================
   Zajęcia — responsive
   ========================================================================== */

@media (max-width: 1024px) {
  /* One step of 0.9em per span, exactly as the plugin does it: the body label
     lands on 0.81em of the cell and the header label on 0.729em. */
  .zaj-hd,
  .zaj-t,
  .zaj-i,
  .zaj-czas { font-size: 0.9em; }
}

@media (max-width: 767px) {
  .zaj-join__intro { padding: 0 0 10%; }
}

/* ==========================================================================
   Trening personalny
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's WIDTH,
   which is why the original keeps the same proportions at every breakpoint.
   ========================================================================== */

/* Icon sprite holder: markup only, never painted. */
.tp-sprite { display: none; }

/* --- Wstęp (section a30080d) --------------------------------------------- */
/* padding 8% 8% 0% 8% */
.tp-intro { padding-bottom: 0; }

.tp-intro__col-a { width: 35%; }
.tp-intro__col-b { width: 65%; }

/* Column ce14518 has no padding of its own. On desktop The Plus's sticky
   column wraps the widget area and flattens the section's "wider" 30px column
   gap; from 768 to 1024 the sticky is off and the 30px shows; below 768 the
   original sets the padding back to 0. Reproduced as measured. */
.tp-intro__text { padding: 0; }

.tp-intro__text > .anitext { margin-bottom: 20px; }

/* widget-container margin 0% 10% 10% 0% of the 423px column. In the original
   the paragraph's own 20px kit margin collapses into that bottom 10%, so the
   gap is whichever of the two is larger - below 1024px the column narrows far
   enough that the flat 20px wins. */
.tp-intro__body { width: 90%; margin: 0 10% max(10%, 20px) 0; }

/* --- Trenerzy (section 90a185c) ------------------------------------------ */
/* padding 0% 8% 8% 8%, overflow hidden, container min-height 70vh */
.tp-trainers { padding-top: 0; overflow: hidden; }

/* Column 52b79db: no padding, and its widgets are a wrapping row. */
.tp-trainers__wrap {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
}

/* Marquee band ------------------------------------------------------------
   The widget box is only 30px tall: the 110px band hangs 80px below it
   (the original's -80px container margin) and the cards, which sit one
   z-index higher, scroll over the overhang. */
.tp-marquee {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 30px;
  margin-bottom: 20px;
}

.tp-marquee__scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

.tp-marquee__viewport {
  height: 110px;
  overflow: hidden;
}

.tp-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* Outline-only type: transparent fill with a hairline stroke, exactly as the
   original's "text stroke" marquee style. */
.tp-marquee__track span {
  padding: 0 50px;
  color: transparent;
  font-size: 100px;
  font-weight: 600;
  line-height: 110px;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-text-stroke: 1px #333333;
}

/* Trainer cards ----------------------------------------------------------- */
.tp-team {
  position: relative;
  z-index: 2;
  width: 33%;
  max-width: 33%;
}

/* widget-container padding 5% of the widget's own width */
.tp-team__inner { padding: 5%; }

.tp-team__card {
  position: relative;
  overflow: hidden;
  background: var(--c-primary);
  text-align: center;
  transition: transform 0.3s var(--ease);
}

.tp-team__card img { width: 100%; }

/* Dimming scrim, revealed with the caption */
.tp-team__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}

/* Hidden, not just transparent: the original ends its reveal transition on
   visibility:hidden, which keeps the caption out of the accessibility tree
   and out of tab order until the card is hovered or focused. */
.tp-team__hover {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0.1s var(--ease), transform 0.3s 0.1s var(--ease), visibility 0s 0.4s;
}

.tp-team__card:hover { transform: scale(0.9); }
.tp-team__card:hover::before,
.tp-team__card:focus-within::before { opacity: 1; }

.tp-team__card:hover .tp-team__hover,
.tp-team__card:focus-within .tp-team__hover {
  visibility: visible;
  opacity: 1;
  transform: translateY(-40px);
  transition: opacity 0.3s 0.1s var(--ease), transform 0.3s 0.1s var(--ease), visibility 0s;
}

.tp-team__body { padding-bottom: 20px; }

.tp-team__name {
  margin: 0;
  color: var(--c-white);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

/* The name is the modal trigger; strip the control chrome so it reads as the
   original's link. */
.tp-team__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tp-team__desig,
.tp-team__role {
  color: var(--c-white);
  line-height: inherit;
}

.tp-team__desig { margin: 0 0 15px; font-size: 13px; }
.tp-team__role { margin: 0 0 10px; font-size: 1em; }

.tp-team__footer { display: flex; justify-content: center; }

/* The original omits the whole social row for a trainer with no Instagram,
   which makes that card's caption 30px shorter. An empty CMS url leaves an
   empty href, so collapse the row on that. */
.tp-team__footer:has(a[href='']) { display: none; }

.tp-team__social {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tp-team__social a {
  display: block;
  padding: 5px;
  border-radius: 15%;
  background: var(--c-primary);
  color: var(--c-white);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.tp-team__social a:hover { background: var(--c-white); color: var(--c-primary); }
.tp-team__social svg { width: 20px; height: 20px; fill: currentColor; }

/* Biography modal --------------------------------------------------------- */
.tp-bio {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tp-bio.is-open { display: flex; }

.tp-bio__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.tp-bio__box {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 900px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--c-white);
  color: var(--c-secondary);
  text-align: left;
}

.tp-bio__close {
  position: absolute;
  top: 4px;
  right: 10px;
  z-index: 2;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--c-primary);
  font-size: 30px;
  line-height: 1.2;
  cursor: pointer;
}

.tp-bio__media { flex: 0 0 34%; }
.tp-bio__media img { width: 100%; height: 100%; object-fit: cover; }

.tp-bio__info { flex: 1; padding: 40px; }

.tp-bio__name {
  margin: 0 0 4px;
  color: var(--c-primary);
  font-size: 1.5em;
  line-height: 1.2;
  text-transform: uppercase;
}

.tp-bio__role {
  margin: 0 0 20px;
  color: var(--c-secondary);
  font-size: 13px;
  line-height: inherit;
}

.tp-bio__role:empty { display: none; }
.tp-bio__text { color: var(--c-secondary); font-size: 1em; line-height: 1.5; }

/* --- Cennik (section 2db5b1f) -------------------------------------------- */
/* padding 15% 8% 8% 8%, container min-height 40vh */
.tp-pricing { padding-top: 15%; }
.tp-pricing > .container { min-height: 40vh; }

/* Column 062e3f8 keeps the kit's 10px column padding and the 20px widget gap */
.tp-pricing__intro > * { margin-bottom: 20px; }
.tp-pricing__intro > :last-child { margin-bottom: 0; }

/* widget-container margin 15px 0 */
.tp-pricing__subwrap { padding: 15px 0; }
.tp-pricing__sub { color: var(--c-white); }

.tp-checklist { margin: 0; padding: 0; list-style: none; }
.tp-checklist li { display: flex; align-items: center; }
.tp-checklist li:not(:last-child) { padding-bottom: 7.5px; }
.tp-checklist li:not(:first-child) { margin-top: 7.5px; }

/* 14px icon in Font Awesome's 1.25em fixed-width box */
.tp-checklist__icon {
  display: flex;
  flex: 0 0 17.5px;
  align-items: center;
  justify-content: center;
  width: 17.5px;
  height: 14px;
  color: var(--c-white);
}

.tp-checklist__icon svg { width: 12.25px; height: 14px; fill: currentColor; }

.tp-checklist__text {
  flex: 1;
  padding-left: 5px;
  color: #b0aeae;
  font-size: 1em;
  line-height: 1.1;
  transition: color 0.3s var(--ease);
}

.tp-checklist li:hover .tp-checklist__text { color: var(--c-white); }

/* Columns 510749b + a4ddd34: margin-left 10%, padding 0% 3% 3% 3%, and no
   widget gap - the original spaces the tables with spacer widgets instead. */
.tp-pricing__stack {
  width: 90%;
  margin-left: 10%;
  padding: 0 3% 3%;
}

/* spacer 5915be1: 150px above the third column's first table */
.tp-pricing__stack--offset { padding-top: 150px; }

/* spacers f29f132 / a31cf12 */
.tp-plan + .tp-plan { margin-top: 50px; }

.tp-plan { border-radius: 3px; text-align: center; }
.tp-plan--light { padding: 3em 1em; background: var(--c-white); color: var(--c-primary); }

.tp-plan--dark {
  padding: 2em 1em;
  border: 1px solid var(--c-white);
  background: var(--c-primary);
  color: var(--c-white);
  transition: border-color 0.3s var(--ease);
}

.tp-plan--dark:hover { border-color: #252525; }

.tp-plan__title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: inherit;
  text-transform: uppercase;
}

.tp-plan__price { margin-bottom: 20px; }

.tp-plan__was {
  display: inline-block;
  padding-right: 10px;
  color: #aaaaaa;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: line-through;
  vertical-align: top;
}

.tp-plan__amount,
.tp-plan__currency { font-size: 30px; letter-spacing: 1px; line-height: 30px; }

.tp-plan__period {
  display: block;
  margin-top: 5px;
  color: #888888;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 13px;
}

/* A plan with no crossed-out price or no "monthly" line simply leaves those
   CMS fields blank, and the empty box has to disappear, not take up space. */
.tp-plan__was:empty,
.tp-plan__period:empty { display: none; }

.tp-plan__notes { margin: 0; padding: 0; list-style: none; }

.tp-plan__notes li {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  padding: 5px 0;
}

/* A note row only carries its hairline separator when a real note follows it,
   so a plan whose second note is blank ends flush, like the original. */
.tp-plan__notes li:has(+ li span:not(:empty)) { border-bottom: 1px solid #d3d3d3; }
.tp-plan__notes li:has(span:empty) { display: none; }
/* Shrink-to-fit, like the original: a one-line note sits flush left inside
   the row, a note long enough to wrap fills the row and centres. */
.tp-plan__notes span { margin-right: 8px; font-size: 1em; line-height: 1; }
.tp-plan--light .tp-plan__notes span { color: var(--c-secondary); }
.tp-plan--dark .tp-plan__notes span { color: var(--c-white); }

/* --- Dołącz / formularz (section f54b9a0) -------------------------------- */
.tp-join__intro { padding: 2% 14% 2% 2%; }
.tp-join__formcol { padding: 10px; }

/* ==========================================================================
   Trening personalny — responsive. Elementor emits its column widths at
   min-width:768, so everything below that stacks full width.
   ========================================================================== */

@media (max-width: 1024px) {
  .tp-intro__text { padding: 30px; }
  .tp-team { width: 50%; max-width: 50%; }
}

@media (max-width: 767px) {
  .tp-intro__col-a,
  .tp-intro__col-b { width: 100%; }

  .tp-intro__text { padding: 0; }

  .tp-team { width: 100%; max-width: 100%; }

  .tp-pricing__stack { width: 100%; margin-left: 0; }
  .tp-pricing__stack--offset { padding-top: 40px; }

  /* widget-container margin 0 0 80px 0 */
  .tp-pricing__intro > .tp-checklist { margin-bottom: 80px; }

  .tp-join__intro { padding: 0 0 10%; }

  .tp-bio__box { display: block; }
  .tp-bio__media { display: none; }
  .tp-bio__info { padding: 30px 20px; }
}

/* ==========================================================================
   Klub
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's width.
   ========================================================================== */

/* --- Hero (section 0967af0) ---------------------------------------------- */
.klub-hero__col { width: 40%; }
.klub-hero__spacecol { width: 60%; }

/* column 446844b: white card, padding 20% 12% of its own width */
.klub-hero__card {
  padding: 20% 12%;
  background: var(--c-white);
  color: var(--c-primary);
}

.klub-hero__card > .anitext { margin-bottom: 20px; }
.klub-hero__card .anitext > h4 { color: var(--c-primary); }

/* widget-container margin 0% 10% 0% 0% of the 484px column */
.klub-hero__body { width: 90%; margin-right: 10%; color: var(--c-secondary); }

/* --- Training zones (section 1220f97) ------------------------------------ */
/* min-height 100vh on desktop, 75vh from tablet down */
.klub-zones > .container { min-height: 100vh; }

.klub-zones__col-a { width: 35%; }
.klub-zones__col-b { width: 64.999%; }

/* column 10f41a2 */
.klub-zones__text { padding: 2% 14% 2% 2%; }
.klub-zones__text > .anitext { margin-bottom: 20px; }
.klub-zones__text .anitext > h4 { color: var(--c-white); }
.klub-zones__body { width: 90%; margin: 0 10% 10% 0; color: var(--c-white); }

/* column 7d654fc: margin 10% 0% 0% 20%, no padding; the image widget centres
   its 600px photo inside the remaining 80% of the column */
.klub-zones__media { width: 80%; margin: 10% 0 0 20%; }
.klub-zones__media img { margin: 0 auto; }

/* --- Gallery (section d39915d) -------------------------------------------
   The original carries elementor-hidden-desktop + -tablet + -mobile on this
   section, so the carousel never renders on any breakpoint. The content is
   kept in the CMS; drop the display rule to bring the slider back. -------- */
.klub-gallery { display: none; padding: 0; }
.klub-gallery .slider__track { column-gap: 0; }

/* --- Join / form (section 4b5830f) --------------------------------------- */
.klub-join__intro { padding: 2% 14% 2% 2%; }
.klub-join__formcol { padding: 10px; }
.klub-join .anitext > h3 { color: var(--c-primary); }

/* ==========================================================================
   Klub — responsive. Elementor emits its column widths at min-width:768, so
   everything below that stacks full width.
   ========================================================================== */

@media (max-width: 1024px) {
  /* the hero splits 50/50 between 768px and 1024px */
  .klub-hero__col,
  .klub-hero__spacecol { width: 50%; }

  .klub-zones > .container { min-height: 75vh; }
}

@media (max-width: 767px) {
  .klub-hero__col,
  .klub-hero__spacecol,
  .klub-zones__col-a,
  .klub-zones__col-b { width: 100%; }

  .klub-zones { padding: 0; }
  .klub-zones__text { padding: 8%; }
  .klub-join__intro { padding: 0 0 10%; }
}

/* ==========================================================================
   Wellness
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's width,
   which is why the original lands on the same proportions at every breakpoint.
   ========================================================================== */

/* --- Hero (section 1d3aa13) ---------------------------------------------- */
.wel-hero__col { width: 55%; }
.wel-hero__spacecol { width: 45%; }

/* column 6101f1d: white card, populated padding 20% 12% */
.wel-hero__card {
  padding: 20% 12%;
  background: var(--c-white);
}

.wel-hero__head { margin-bottom: 20px; }
.wel-hero__head > h1 { color: var(--c-primary); }

/* widget-container margin 0% 10% 0% 0% of the 506px column. The kit's 20px
   paragraph margin has nothing to collapse into here, so it stays. */
.wel-hero__body {
  width: 90%;
  margin: 0 10% 20px 0;
  color: var(--c-secondary);
}

/* --- Wstęp / Spa (section ab6e91e) --------------------------------------- */
.wel-intro > .container { min-height: 40vh; }
.wel-intro__spacecol { width: 50%; }
.wel-intro__col { width: 50%; }

/* column 3e3d41e: margin 0% 0% 0% 10%, padding 0% 3% 3% 3% */
.wel-intro__inner {
  margin-left: 10%;
  padding: 0 3% 3%;
}

.wel-intro__body { width: 90%; margin: 0 10% 10% 0; }

/* --- Trzy strefy (section 44b49b0) --------------------------------------- */
.wel-zones__mediacol { width: 45%; }
.wel-zones__textcol { width: 54.999%; }

/* column 8354f91: margin 20% 20% 0% 0%, no padding */
.wel-zones__media {
  margin: 20% 20% 0 0;
  padding: 0;
}

.wel-zones__media img { width: 100%; }

/* column d195c6b: padding 20% 20% 2% 2% */
.wel-zones__text { padding: 20% 20% 2% 2%; }

/* 5210b38 keeps sentence case at 1.5em/1 */
.wel-zones__head > h2 { text-transform: none; }

/* --- Łaźnia parowa (section a340b20) ------------------------------------- */
.wel-steam > .container { min-height: 40vh; }
.wel-steam__spacecol { width: 20%; }
.wel-steam__col-a { width: 40%; }
.wel-steam__col-b { width: 39.664%; }

.wel-steam__head { margin-bottom: 20px; }
.wel-steam__head > h2 { text-transform: uppercase; }
.wel-steam__body-a { width: 90%; margin: 0 10% 10% 0; }

/* column 32b3062: margin 0% 0% 0% 10%, padding 0% 3% 3% 3% */
.wel-steam__inner-b {
  margin-left: 10%;
  padding: 0 3% 3%;
}

.wel-steam__body-b { width: 90%; margin: 0 10% 10% 0; }

/* --- Sauna fińska (section 0d94073) -------------------------------------- */
.wel-sauna__textcol { width: 60%; }
.wel-sauna__mediacol { width: 39.999%; }

/* column 99df183: padding 2% 20% 10% 2% */
.wel-sauna__text { padding: 2% 20% 10% 2%; }
.wel-sauna__head { margin-bottom: 20px; }
.wel-sauna__body { width: 90%; margin: 0 10% 10% 0; }

/* column 12d2a4a: its own background image, centre right, plus a 30% scrim */
.wel-sauna__media {
  position: relative;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.wel-sauna__overlay {
  position: absolute;
  inset: 0;
  background: var(--c-primary);
  opacity: 0.3;
}

.wel-sauna__spacer { position: relative; height: 50px; }

/* --- Galeria (section 6332d71) -------------------------------------------
   The original ships this carousel with elementor-hidden-desktop,
   -tablet AND -mobile, so it never renders at any width. Kept 1:1; delete
   the display rule below to switch the gallery on. */
.wel-gallery { padding: 0; display: none; }
.wel-gallery .col__inner { padding: 0; }
.wel-gallery .slider__track { column-gap: 20px; }

/* --- Dołącz / formularz (section d97e386) -------------------------------- */
.wel-join__intro { padding: 2% 14% 2% 2%; }
.wel-join__formcol { padding: 10px; }

/* ==========================================================================
   Wellness — responsive. Elementor emits its column widths at min-width:768,
   so everything below that is full width.
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 768px) {
  .wel-hero__col { width: 60%; }
  .wel-hero__spacecol { width: 40%; }
  .wel-intro__spacecol { width: 40%; }
  .wel-intro__col { width: 60%; }
}

@media (max-width: 767px) {
  .wel-hero__col,
  .wel-hero__spacecol,
  .wel-intro__spacecol,
  .wel-intro__col,
  .wel-zones__mediacol,
  .wel-zones__textcol,
  .wel-steam__spacecol,
  .wel-steam__col-a,
  .wel-steam__col-b,
  .wel-sauna__textcol,
  .wel-sauna__mediacol { width: 100%; }

  .wel-zones,
  .wel-sauna { padding: 0; }

  .wel-intro__inner { margin-left: 0; }
  .wel-zones__text { padding: 8%; }
  .wel-steam__inner-b { margin-left: 0; }
  .wel-sauna__text { padding: 8%; }
  .wel-sauna__media { margin: 0 0 50px; }
  .wel-sauna__spacer { height: 500px; }
  .wel-join__intro { padding: 0 0 10%; }
}

/* ==========================================================================
   Krioterapia
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's width,
   which is why the original lands on the same proportions at every breakpoint.
   ========================================================================== */

/* --- Hero (section fda6483) ----------------------------------------------
   The only boxed section on the page: its container caps at the kit's 1100px
   and centres, everything else below runs full width. ---------------------- */
.krio-hero { color: var(--c-white); }

.krio-hero__container {
  max-width: 1100px;
  margin: 0 auto;
}

/* the hero column is full width except between 768 and 1024, see below */
.krio-hero__col { width: 100%; }

/* Elementor's own background-size for this one is `auto`, not cover: the
   1920x1200 photo is dropped in at natural size and centred. */
.krio-hero__bg {
  background-size: auto;
  background-position: 50% 50%;
}

.krio-hero__scrim { opacity: 0.55; }

.krio-hero__head { margin-bottom: 20px; }

/* heading widget f6a245e: widget-container margin 0% 10% 5% 10%, plus the
   kit's 20px widget gap underneath */
.krio-hero__sub {
  margin: 0 10% calc(5% + 20px);
  color: var(--c-white);
  text-align: center;
  text-transform: uppercase;
}

.krio-hero__btnwrap {
  margin-bottom: 20px;
  text-align: center;
}

.krio-hero__spacer {
  height: 50px;
  margin-bottom: 20px;
}

.krio-hero__scrollwrap { text-align: center; }

/* icon widget 83117ca: framed circle, 12px glyph, 2px ring, 6px padding */
.krio-hero__scroll {
  width: 28px;
  height: 28px;
  border-width: 2px;
}

.krio-hero__scroll svg {
  width: 12px;
  height: 12px;
}

/* --- Co to jest krioterapia (section 7a806c6) ---------------------------- */
.krio-what__textcol { width: 60%; }
.krio-what__mediacol { width: 39.999%; }

/* column 8663336: padding 2% 14% 10% 2% of its own width */
.krio-what__text { padding: 2% 14% 10% 2%; }
.krio-what__head { margin-bottom: 20px; }

/* widget-container margin 0% 10% 10% 0% + the 20px widget gap */
.krio-what__body { margin: 0 10% calc(10% + 20px) 0; }

/* column 246c091: its own photo, a 30% scrim and a spacer that holds it open */
.krio-what__media { position: relative; }
.krio-what__scrim { opacity: 0.3; }

.krio-what__spacer {
  position: relative;
  height: 50px;
}

/* --- Full-bleed photo band (section 73e2461) -----------------------------
   Two 16:10 photos side by side. The original's widget-container pulls 7px
   up and the swiper slide adds a 6px inline descender under the image, which
   is where the odd 449px band height comes from. -------------------------- */
.krio-band { padding: 0; }
.krio-band__inner { margin-bottom: -7px; }
.krio-band__slider { padding-bottom: 6px; }
.krio-band__slider .slider__slide img { height: auto; }

/* --- Pakiety (section 3db3ef8) -------------------------------------------
   Heading + remote arrows sit in the left column, the carousel in the right
   one and runs 300px past it. The whole row is wrapped in .slider so main.js
   can wire the remote arrows to the track; the slide width is pinned in CSS
   because the scrolling viewport is not the .slider box itself. ----------- */
.krio-packs {
  overflow: hidden;
  padding: 15% var(--gutter) var(--gutter);
}

.krio-packs .container { min-height: 40vh; }
.krio-packs .slider { overflow: visible; }

.krio-packs__headcol { width: 35%; }
.krio-packs__listcol { width: 65%; }

.krio-packs__head { margin-bottom: 20px; }

.krio-packs__spacer {
  height: 50px;
  margin-bottom: 20px;
}

/* tp-carousel-remote: two 34x36 pills, 1px white ring, 10px apart */
.krio-packs__nav { display: flex; }

.krio-packs .slider__nav {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--c-white);
  border-radius: 25px;
  background: var(--c-primary);
  color: var(--c-white);
}

.krio-packs .slider__nav:hover { background: var(--c-primary); border-color: #252525; }
.krio-packs .slider__nav--prev { margin-right: 5px; }
.krio-packs .slider__nav--next { margin-left: 5px; }

.krio-packs .slider__nav svg {
  width: 7.41px;
  height: 14px;
}

.krio-packs .slider__nav--prev svg { margin-right: 5px; }
.krio-packs .slider__nav--next svg { margin-left: 5px; }

/* column fbed47b: margin-left 10%, padding 0% 3% 3% 3%, and it keeps its
   full 100% width rather than shrinking, so it overhangs to the right */
.krio-packs__listinner {
  flex-shrink: 0;
  margin-left: 10%;
  padding: 0 3% 3%;
}

.krio-packs__viewport {
  overflow: hidden;
  margin-right: -300px;
  padding-bottom: 6px;
}

/* slick rounds its slide width up to whole pixels; the half-pixel keeps the
   seventh slide from drifting away from the original across the track */
.krio-packs .slider__slide {
  width: calc(100% / 3 + 0.5px) !important;
  padding: 10px;
}

/* the alternating 50px spacer: odd slides carry it under the card, even ones
   above it, which is what staggers the row */
.krio-pack { padding-bottom: 70px; }
.krio-packs .slider__slide:nth-child(even) .krio-pack { padding: 70px 0 0; }

.krio-pack__card {
  position: relative;
  padding: 20px;
  border-radius: 3px;
  background: var(--c-white);
  color: var(--c-secondary);
  box-shadow: 0 0 10px 0 rgba(136, 136, 136, 0.25);
}

.krio-pack__ribbon {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  margin: 0;
  padding: 6px 15px;
  background: #212121;
  color: var(--c-white);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.krio-pack__ribbon:empty { display: none; }

.krio-pack__title {
  margin-bottom: 20px;
  color: var(--c-primary);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

.krio-pack__price {
  margin-bottom: 20px;
  text-align: center;
}

.krio-pack__was {
  display: inline-block;
  padding-right: 10px;
  color: #aaaaaa;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: line-through;
  vertical-align: top;
}

.krio-pack__was:empty { display: none; }

.krio-pack__amount,
.krio-pack__cur {
  color: var(--c-primary);
  font-size: 30px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 1px;
}

.krio-pack__note {
  display: block;
  margin-top: 5px;
  color: #888888;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: 0.5px;
}

.krio-pack__note:empty { display: none; }

.krio-pack__specs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.krio-pack__specs li {
  display: flex;
  align-items: center;
  padding: 5px 0;
  margin-bottom: 5px;
  border-bottom: 1px solid #d3d3d3;
}

.krio-pack__specs li:last-child { border-bottom: 0; }

.krio-pack__ico {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 14px;
  height: 24px;
  margin-right: 5px;
  color: var(--c-secondary);
}

/* the snowflake glyph is 0.875em wide where the other two are 1em */
.krio-pack__ico--snow { width: 12.25px; }

.krio-pack__ico svg {
  width: 100%;
  height: auto;
}

.krio-pack__spec {
  font-size: 16px;
  line-height: 24px;
}

/* --- Krioterapia ogólna (section 5f6c6dc) --------------------------------
   column-gap-wider, so the photo column gets 30px of padding. The text
   column is a ThePlus sticky column, which drops that padding on desktop. -- */
.krio-general__scrim { opacity: 0.5; }
.krio-general__media { padding: 30px; }
.krio-general__media img { width: 100%; }
.krio-general__text { padding: 0; }
.krio-general__head { margin-bottom: 20px; }
.krio-general__body { margin: 0 10% calc(10% + 20px) 0; }

/* --- Krioterapia twarzy (section fc9eee9) -------------------------------- */
.krio-face {
  background: var(--c-white);
  color: var(--c-primary);
}

.krio-face > .container { min-height: 40vh; }

/* column 090c948: sticky on desktop, which is why its 15% right margin and
   its padding only show up from tablet down */
.krio-face__text { padding: 0; }
.krio-face__head { margin-bottom: 20px; }

.krio-face__subhead {
  margin-bottom: 20px;
  text-transform: uppercase;
}

.krio-face__list { margin: 0 10% calc(10% + 20px) 0; }

.krio-face__list ul {
  margin: 0;
  padding-left: 40px;
}

.krio-face__list li { margin: 0; }

/* column b216697: margin-left 10%, padding 0% 3% 3% 3%, drifts on scroll */
.krio-face__media {
  margin-left: 10%;
  padding: 0 3% 3%;
}

.krio-face__media img { width: 100%; }

/* --- Dołącz / formularz (section 49736c4) -------------------------------- */
.krio-join { border-top: 1px solid var(--c-primary); }
.krio-join__intro { padding: 2% 14% 2% 2%; }
.krio-join__head > h3 { color: var(--c-primary); }

/* --- Accordions (9857973 and f27445a) ------------------------------------
   Both drop Elementor's dividers, run the title at 1.4em uppercase and float
   the chevron right so the first line wraps at width - 34px exactly as the
   original does. ---------------------------------------------------------- */
.krio-accordion,
.krio-accordion .accordion__item + .accordion__item { border-top: 0; }

.krio-accordion .accordion__title {
  display: block;
  font-size: 1.4em;
  text-transform: uppercase;
}

.krio-accordion .accordion__icon {
  float: right;
  width: 24px;
  height: 16px;
  margin-left: 10px;
  font-size: 16px;
  line-height: 16px;
}

.krio-accordion .accordion__icon svg {
  width: 14px;
  height: 16px;
  margin-left: auto;
}

.krio-accordion .accordion__body {
  color: var(--c-white);
  line-height: 1.5;
}

.krio-accordion.accordion--light .accordion__body { color: var(--c-primary); }

/* The original renders a closed panel with display:none. Ours animates its
   height instead, so hide the contents outright while it is closed: it keeps
   them out of the accessibility tree and out of any text measurement. */
.krio-accordion .accordion__panel > div {
  visibility: hidden;
  transition: visibility 0s linear 0.35s;
}

.krio-accordion .accordion__item.is-open .accordion__panel > div {
  visibility: visible;
  transition-delay: 0s;
}

.krio-accordion .accordion__body blockquote {
  margin: 0 0 20px;
  padding: 0;
}

/* ==========================================================================
   Krioterapia — responsive. Elementor emits its column widths at min-width:768,
   so everything below that stacks full width.
   ========================================================================== */

@media (max-width: 1024px) and (min-width: 768px) {
  /* column 9e11a9f narrows to 75% only inside the tablet band */
  .krio-hero__col { width: 75%; }
}

@media (max-width: 1024px) {
  /* column 246c091 drops 120px from the top of the black band */
  .krio-what__media { margin-top: 120px; }

  .krio-packs__viewport { margin-right: -150px; }
  .krio-packs .slider__slide { width: calc(100% / 2 + 0.5px) !important; }

  /* the sticky wrappers are desktop-only, so both columns get their real
     Elementor padding back from tablet down */
  .krio-general__media { padding: 0; }
  .krio-general__text { padding: 30px; }

  .krio-face__text {
    margin-right: 15%;
    padding: 10px;
  }
}

@media (max-width: 767px) {
  .krio-hero__col,
  .krio-what__textcol,
  .krio-what__mediacol,
  .krio-packs__headcol,
  .krio-packs__listcol { width: 100%; }

  .krio-what { padding: 0; }
  .krio-what__text { padding: 8%; }

  .krio-what__media {
    margin-top: 0;
    margin-bottom: 50px;
  }

  .krio-what__spacer { height: 350px; }

  /* the underlined link drops to 12px on phones */
  .krio-what__btnwrap .btn-line { font-size: 12px; }

  .krio-packs__viewport { margin-right: -220px; }

  .krio-packs__listinner {
    margin-left: 0;
    padding: 0 3% 3%;
  }

  .krio-general__media,
  .krio-general__text { padding: 15px; }

  .krio-face__text { padding: 15px; }
  .krio-face__media { margin-left: 0; }

  .krio-join__intro { padding: 0 0 10%; }
}

/* ==========================================================================
   Dołącz do nas — Elementor Canvas template (no header, no footer).
   One full-viewport section: photo column on the left, join form on the right.
   Percentages are the original Elementor values and resolve against the
   containing block WIDTH on all four sides, exactly as Elementor did.
   ========================================================================== */

/* --- Section 7a806c6: padding 0, container min-height 100vh --------------- */
.dolacz { padding: 0; }
.dolacz > .container { min-height: 100vh; }

/* --- Left column 246c091: background photo, no padding, 50px spacer -------
   Elementor sizes a translateX motion layer at 100% + speed*10% and centres it,
   so at speed 3 the layer is 130% wide and sits 15% out on each side. Copying
   the raw speed of 3 into main.js would sweep it a flat 150px, far more than
   the ~12px the original actually travels and wider than the overhang, which
   opens a white gap beside the photo on narrow screens. The layer box is the
   original's; the sweep is dialled to speed 1 to stay inside it. */
.dolacz__media { overflow: hidden; }
.dolacz__media .section__bg-layer { left: -15%; right: -15%; }
.dolacz__spacer { height: 50px; }

/* --- Right column 8663336: 10% padding on all four sides ------------------ */
.dolacz__panel > .col__inner { padding: 10%; }
.dolacz__panel > .col__inner > * { margin-bottom: 20px; }
.dolacz__panel > .col__inner > *:last-child { margin-bottom: 0; }

/* --- Heading b21adfc ------------------------------------------------------ */
.dolacz__title { text-align: left; }
.dolacz__title > h3 { color: var(--c-primary); }

/* The form arrives as an Elementor template widget, so it keeps the 10px
   column padding of the section it lives in. */
.dolacz__form { padding: 10px; }

/* --- Back control fa627fc (tp-wp-bodymovin, 93573-close.json at 30px) ------
   Absolutely positioned in the right column: top 40 / right 40, so it lands
   40px in from the top-right corner of the viewport. */
.dolacz__back {
  position: absolute;
  top: 40px;
  right: 40px;
  z-index: 2;
  width: 30px;
  height: 30px;
}

.dolacz__back-anim { display: block; width: 30px; height: 30px; }
.dolacz__back-anim svg { display: block; }

@media (max-width: 1024px) {
  .dolacz__back { top: 20px; right: 20px; }
}

@media (max-width: 767px) {
  /* Both columns go full width, the photo band grows and the panel loses its
     percentage padding; the heading picks up 100px of air and centres. */
  .dolacz__spacer { height: 350px; }
  .dolacz__panel > .col__inner { padding: 0; }
  .dolacz__title { margin-top: 100px; text-align: center; }
}

/* ==========================================================================
   Dziękujemy — form thank-you page, Elementor Canvas template.
   Same shell as dolacz-do-nas: photo column left, message + button right.
   ========================================================================== */

/* --- Section 7a806c6: padding 0, container min-height 100vh --------------- */
.dziekujemy { padding: 0; }
.dziekujemy > .container { min-height: 100vh; }

/* --- Left column 246c091: background photo, no padding, 50px spacer -------
   Same translateX layer as dolacz-do-nas: Elementor's box is 130% wide and
   centred, and the sweep is dialled down so it never leaves the overhang. */
.dziekujemy__media { overflow: hidden; }
.dziekujemy__media .section__bg-layer { left: -15%; right: -15%; }
.dziekujemy__spacer { height: 50px; }

/* --- Right column 8663336: 10% padding on all four sides ------------------ */
.dziekujemy__panel > .col__inner { padding: 10%; }
.dziekujemy__panel > .col__inner > * { margin-bottom: 20px; }
.dziekujemy__panel > .col__inner > *:last-child { margin-bottom: 0; }

/* --- Heading b21adfc ------------------------------------------------------ */
.dziekujemy__title { text-align: left; }
.dziekujemy__title > h3 { color: var(--c-primary); }

/* --- Button 2823f78: tp-button style-8, widget width auto ----------------- */
.dziekujemy__cta { align-self: flex-start; width: auto; }

@media (max-width: 767px) {
  .dziekujemy__spacer { height: 350px; }
  .dziekujemy__panel > .col__inner { padding: 0; }
  .dziekujemy__title { margin-top: 100px; text-align: center; }
  /* the widget carries elementor-hidden-mobile */
  .dziekujemy__cta { display: none; }
}

/* ==========================================================================
   Kontakt
   Percentages below are the original Elementor values: horizontal AND vertical
   percentage padding/margin both resolve against the containing block's width.
   ========================================================================== */

/* --- Napisz do nas: photo band + white form card (section 0967af0) -------- */
.kt-write__col { width: 50%; }
.kt-write__spacecol { width: 50%; }

/* column 446844b: white card, padding 20% 12% 10% 12% of its own width */
.kt-write__card {
  padding: 20% 12% 10%;
  background: var(--c-white);
  color: var(--c-primary);
}

.kt-write__card > * { margin-bottom: 20px; }
.kt-write__card > *:last-child { margin-bottom: 0; }
.kt-write__card .anitext > h3 { color: var(--c-primary); }

/* the form arrives as a nested Elementor template, so it keeps a column's
   own 10px padding inside the card */
.kt-write__formwrap { padding: 10px; }

/* --- Lokalizacja: address, opening hours, amenities (section fc9eee9) ----- */
.kt-location__col-a { width: 35%; }
.kt-location__col-b { width: 65%; }

.kt-location__col-a .col__inner > * { margin-bottom: 20px; }
.kt-location__col-a .col__inner > *:last-child { margin-bottom: 0; }
.kt-location__col-a .anitext > h3 { color: var(--c-white); }

/* widget-container margin 0% 10% 10% 0% of the 403px column */
.kt-location__col-a .col__inner > .kt-location__address {
  width: 90%;
  margin: 0 10% 10% 0;
  color: var(--c-white);
}

.kt-location__address a { color: var(--c-white); transition: color 0.3s var(--ease); }
.kt-location__address a:hover { color: var(--c-accent); }

/* column b216697: margin-left 10%, padding 0% 3%; the inner section then uses
   Elementor's "wide" column gap, which is 20px of padding per column */
.kt-location__panels {
  display: flex;
  width: 90%;
  margin-left: 10%;
  padding: 0 3%;
}

.kt-location__panel { width: 50%; padding: 20px; }

/* heading widget: 15px container margin top and bottom, plus the kit's 20px
   widget gap underneath */
.kt-location__panel-title {
  margin: 15px 0 35px;
  color: var(--c-white);
  font-size: 1em;
  line-height: 1;
}

.kt-location__list {
  width: 90%;
  margin-right: 10%;
  color: var(--c-accent);
  font-size: 1em;
  line-height: 2.1;
}

.kt-location__list p,
.kt-location__list p:last-child { margin: 0 0 20px; }

/* --- Parking podziemny + map (section 7a806c6) ---------------------------- */
.kt-parking__col-a { width: 50%; }
.kt-parking__col-b { width: 50%; }

/* column 8663336 */
.kt-parking__text { padding: 2% 14% 10% 2%; }
.kt-parking__text > * { margin-bottom: 20px; }
.kt-parking__text > *:last-child { margin-bottom: 0; }
.kt-parking__text .anitext > h3 { color: var(--c-white); }

/* the text widget carries its own 10% bottom margin AND the kit's 20px widget
   gap, because it is not the last widget in the column */
.kt-parking__text > .kt-parking__body {
  width: 90%;
  margin: 0 10% calc(10% + 20px) 0;
  color: var(--c-white);
}

/* the original ships no 700 face, so bold here is synthesised, same as there */
.kt-parking__body strong { font-weight: 700; }

/* column 246c091: no padding; the map widget has min-height 650px and the
   column bottom-aligns it */
.kt-parking__map {
  flex: 0 0 650px;
  width: 100%;
  height: 650px;
  min-height: 650px;
  background: #e9e9e9;
}

/* the widget's info window: plain text on white, no Elementor chrome */
.kt-parking__map .gmap_info_content p { margin: 0; color: var(--c-primary); }

/* ==========================================================================
   Kontakt - responsive. Elementor emits its column widths at min-width:768,
   so everything below that stacks full width.
   ========================================================================== */

@media (max-width: 1024px) {
  /* the form card widens to 70% between 768px and 1024px; the empty spacer
     column keeps its 50% and simply wraps below, exactly as the original */
  .kt-write__col { width: 70%; }

  .kt-parking__col-a { width: 35%; }
  .kt-parking__col-b { width: 65%; }
}

@media (max-width: 767px) {
  .kt-write__col,
  .kt-write__spacecol,
  .kt-location__col-a,
  .kt-location__col-b,
  .kt-parking__col-a,
  .kt-parking__col-b { width: 100%; }

  .kt-write__card { padding: 15px; }
  .kt-write__card .anitext > h3 { text-align: center; }

  .kt-location__panels { flex-direction: column; width: 100%; margin-left: 0; padding: 0 3%; }
  .kt-location__panel { width: 100%; padding: 0; }

  .kt-parking { padding: 0; }
  .kt-parking__text { padding: 8%; }
  .kt-parking__text .btn-line { font-size: 12px; }
}

/* ==========================================================================
   Legal pages — regulamin, polityka-prywatnosci, polityka-plikow-cookie
   Measured 1:1 against the originals at 1440 / 768 / 375.

   Two shapes share this file:
   1. regulamin + polityka-prywatnosci: an Elementor boxed section
      (max-width 1100) split 25/75 into a sticky numbered table of contents
      and the statute text, white-on-black.
   2. polityka-plikow-cookie: the same boxed 1100 container at full width,
      black-on-white, holding the generated cookie statement (its own
      14px type scale, service disclosures and per-purpose cookie grids).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared shell (regulamin + polityka prywatności)
   The original section is `padding: 8% 8% 8% 0%`, so the black band runs to
   the left edge of the viewport and the boxed container centres inside it.
   -------------------------------------------------------------------------- */

.legal {
  padding: var(--gutter) var(--gutter) var(--gutter) 0;
}

.legal__container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Elementor emits column widths from min-width:768 up; below that both
   columns are full width and the table of contents stacks above the text. */
.legal__col {
  width: 100%;
}

@media (min-width: 768px) {
  .legal__col--toc { width: 25%; }
  .legal__col--body { width: 75%; }
}

/* --------------------------------------------------------------------------
   Table of contents — a white card that follows the reader down the page.
   The original is a sticky Elementor widget; `position: sticky` inside the
   column does the same job with no script.
   -------------------------------------------------------------------------- */

.legal-toc {
  position: sticky;
  top: 100px;
  width: 100%;
  background: var(--c-white);
  color: var(--c-secondary);
}

.legal-toc__scroll {
  max-height: 100%;
  min-height: 5px;
  padding: 30px 15px 39px;
  overflow: auto;
}

.legal-toc__scroll::-webkit-scrollbar { width: 5px; }
.legal-toc__scroll::-webkit-scrollbar-track { border-radius: 10px; background: #f5f5f5; }
.legal-toc__scroll::-webkit-scrollbar-thumb { border-radius: 10px; background: var(--c-primary); }

/* The numbers are generated, not list markers: that is how the original
   renders them (an inline ::before), so they sit in the text flow and the
   wrapped lines align to the item's left edge. */
.legal-toc__list {
  position: relative;
  margin: 0;
  padding-left: 20px;
  overflow: hidden;
  list-style: none;
  counter-reset: legal-toc;
}

.legal-toc__list li {
  display: block;
  counter-increment: legal-toc;
}

.legal-toc__list li::before {
  content: counter(legal-toc) '. ';
}

.legal-toc__list a {
  color: var(--c-primary);
  font-weight: 400;
  text-transform: capitalize;
  transition: color 0.3s ease-in-out;
}

/* --------------------------------------------------------------------------
   Statute text. The kit sizes h4 in em off the root (24px desktop /
   19.5px tablet+mobile) and leaves paragraphs on a fixed 20px rhythm.
   -------------------------------------------------------------------------- */

.legal-body {
  color: var(--c-white);
}

.legal-body h4 {
  margin: 8px 0 16px;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.2;
}

.legal-body p {
  margin: 0 0 20px;
}

/* The original keeps the trailing 20px (its text-editor widget ends on an
   empty paragraph), so undo the global p:last-child reset here. */
.legal-body p:last-child {
  margin-bottom: 20px;
}

.legal-body ul {
  margin: 0;
  padding-left: 40px;
  list-style: disc;
}

.legal-body li {
  margin: 0;
}

.legal-body strong {
  font-weight: 700;
}

.legal-body a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. Cookie statement (polityka-plikow-cookie)
   Full-width boxed container on white, holding a generated legal document
   with its own 14px type scale, collapsible service disclosures and a
   per-purpose cookie grid. Layout copied 1:1 from the original.
   -------------------------------------------------------------------------- */

.legal--cookie {
  padding: 0;
  background: var(--c-white);
  color: var(--c-primary);
}

.cookie-doc {
  max-width: 800px;
  color: var(--c-primary);
  font-size: 14px;
}

.cookie-doc a {
  text-decoration: underline;
}

/* the original marks every off-site link with a 10x10 glyph */
.cookie-doc a[target='_blank']::after {
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==');
  margin: 0 3px 0 5px;
}

.cookie-doc h2,
.cookie-doc h3 {
  margin: 15px 0 10px;
  padding-bottom: 10px;
  font-size: 22px;
  text-align: left;
  text-transform: none;
}

.cookie-doc h2 { line-height: 1.2; }
.cookie-doc h3 { line-height: 1.1; }

.cookie-doc h4 {
  margin: 15px 0 5px;
  font-size: 18px;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
}

.cookie-doc h5 {
  margin: 10px 0 5px;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
  text-transform: none;
}

.cookie-doc p {
  margin: 0 0 20px;
  font-size: 14px;
}

.cookie-doc li {
  margin: 0;
  font-size: 14px;
}

.cookie-doc ul {
  margin: 0 0 15px 15px;
  padding-left: 40px;
  list-style: disc;
}

/* --- one collapsible disclosure per third-party service ------------------- */

.cookie-service {
  background: rgba(239, 239, 239, 0.25);
}

.cookie-service[open] {
  padding-bottom: 1px;
}

.cookie-service__head {
  display: block;
  margin: 5px 0;
  padding: 5px 10px;
  background: rgba(239, 239, 239, 0.5);
  place-items: center stretch;
  cursor: pointer;
}

.cookie-service__head::marker,
.cookie-service__head::-webkit-details-marker {
  content: '';
  display: none;
}

/* Five columns even though only three are filled: the original reserves a
   zero-width `label` column and an empty `checkbox` column for its consent
   toggle, and the two 15px gaps around them set where the purpose label sits.
   Drop them and the header text shifts 30px right. */
.cookie-service__head > div {
  display: grid;
  grid-template: 'heading paragraph label checkbox chevron' / 2fr auto 0 auto 25px;
  gap: 15px;
  align-items: center;
}

.cookie-service summary h3 {
  grid-area: heading;
  margin: 0;
  padding: 0 5px;
  font-size: 18px;
}

.cookie-service summary p {
  grid-area: paragraph;
  margin: 0;
  padding: 0;
  font-size: 14px;
  text-align: right;
}

.cookie-service__head > div::after {
  content: '';
  grid-area: chevron;
  width: 18px;
  height: 18px;
  margin: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M207.03 381.48 12.69 187.13c-9.37-9.37-9.37-24.57 0-33.94l22.67-22.67c9.36-9.36 24.52-9.37 33.9-.04L224 284.3l154.75-153.8c9.37-9.33 24.53-9.32 33.89.04l22.67 22.67c9.37 9.37 9.37 24.57 0 33.94L240.97 381.48c-9.37 9.37-24.57 9.37-33.94 0z'/%3E%3C/svg%3E") 0 0 / cover no-repeat;
  transform: rotate(0deg);
  transition: transform 0.5s;
  cursor: pointer;
}

.cookie-service[open] .cookie-service__head > div::after {
  transform: rotate(180deg);
}

.cookie-service p,
.cookie-service h4,
.cookie-service ul {
  padding: 0 15px;
}

.cookie-service h4 {
  margin: 5px 0;
  font-size: 15px;
}

.cookie-service h5 {
  margin: 0;
}

.cookie-service__use,
.cookie-service__sharing {
  display: inline-block;
  width: calc(50% - 35px);
  padding: 0 15px 15px;
  vertical-align: top;
}

/* --- the cookie table: a hairline grid, one row per cookie ---------------- */

.cookie-purpose {
  display: grid;
  gap: 1px;
  margin-bottom: 10px;
  border: 1px solid #dadada;
  background: #dadada;
}

.cookie-purpose > div {
  padding: 15px;
  background: var(--c-white);
}

@media only screen and (min-width: 600px) {
  .cookie-purpose {
    grid-template: 'purpose purpose purpose' 'header1 header2 header3';
  }

  .cookie-purpose .purpose { grid-area: purpose; }
  .cookie-purpose .name-header { grid-area: header1; background: #f7f7f7; }
  .cookie-purpose .retention-header { grid-area: header2; background: #f7f7f7; }
  .cookie-purpose .function-header { grid-area: header3; background: #f7f7f7; }
}

@media only screen and (max-width: 600px) {
  .cookie-service__use,
  .cookie-service__sharing { width: 100%; }

  .cookie-purpose { grid-template-columns: 100px 1fr; }
  .cookie-purpose .purpose { grid-column: span 2; }
  .cookie-purpose h5 { line-height: 1.8; }

  .cookie-purpose > div:nth-child(12n + 2),
  .cookie-purpose > div:nth-child(12n + 3),
  .cookie-purpose > div:nth-child(12n + 4),
  .cookie-purpose > div:nth-child(12n + 5),
  .cookie-purpose > div:nth-child(12n + 6),
  .cookie-purpose > div:nth-child(12n + 7) { background: #f7f7f7; }
}

/* ==========================================================================
   404 — mirrors the Hello theme's error page the original serves
   ========================================================================== */

.error-main {
  max-width: 1140px;
  margin: 0 auto;
  padding: 8px 20px 60px;
}

.error-main .entry-title {
  margin: 8px 0 16px;
  color: var(--c-secondary);
  font-size: 4.5em;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.error-main p {
  color: var(--c-secondary);
  font-size: 1em;
  line-height: 1.5;
}

.error-main__back {
  display: inline-block;
  margin-top: 30px;
}

@media (max-width: 767px) {
  .error-main .entry-title { font-size: 3.6em; }
}