/* =========================================================
   PXC – GLOBAL (bazowe zasady dla całego embedu)
========================================================= */

/* Sekcje: stały odstęp + brandowy gradient PXC-color */
.pxc-section{
  margin-bottom: 64px;
  --pxc-color-main: linear-gradient(135deg, #0098A1, #96BE0D, #0098A1);
}

.pxc-section--hero{
  margin-top: 40px;
}

/* Kontener  */
.pxc-container{
  max-width: 1152px;
  padding: 0 24px;
  margin: 0 auto;
}

/* Kontener sonepar  */
.pxc-container-sonepar{
  max-width: 1300px;
  padding: 0 24px;
  margin: 0 auto;
}

/* =========================================================
   PXC – IMAGES (ogólne obrazki)F
========================================================= */
.pxc-image{
  width: 100%;
  height: auto;
  display: block;
}

.pxc-image--hero{
  max-height: 280px;
  object-fit: contain;
}

/* =========================================================
   PXC – MEDIA SECTION (image <-> text + video)
========================================================= */
.pxc-mediaPanel{
  background: var(--pxc-color-main);
  padding: 80px 24px;
  border-radius: 16px;
}

.pxc-mediaPanel__grid{
  margin-top: -32px;
  margin-bottom: -32px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  align-items: center;
}

.pxc-mediaItem{
  position: relative;
}

/* VIDEO */
.pxc-mediaItem--video{
  padding: 24px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(6px);
}

.pxc-video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

.pxc-video__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* CTA */
.pxc-cta{
  margin-top: 15px;
  margin-bottom: 10px;
  padding: 10px 10px;
  border-radius: 999px;
  border: 1px solid #00000026;
  background: #ffffff;
  font-weight: 600;
  cursor: pointer;

  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.pxc-cta--more{
  position: absolute;
  left: 45%;
  top: 100%;
  transform: translate(-50%, -50%);
}

/* TOGGLE TEXT */
.pxc-moreText{ 
  color: #ffffff;
  display: none; /* domyślnie ukryty (zamiast hidden w HTML) */
}

.pxc-moreText__title{
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.pxc-moreText__p{
  margin-bottom: 10px;
  line-height: 1.6;
}

/* =========================================================
   PXC – MEDIA TOGGLE 
========================================================= */

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

/* po kliknięciu: schowaj obraz, pokaż tekst */
.pxc-mediaToggle:checked ~ .pxc-mediaImage{
  display: none;
}
.pxc-mediaToggle:checked ~ .pxc-moreText{
  display: block;
}

/* przełączanie napisu na CTA (dwa spany w labelu) */
.pxc-ctaText--back{ display: none; }
.pxc-mediaToggle:checked ~ .pxc-cta--more .pxc-ctaText--more{ display: none; }
.pxc-mediaToggle:checked ~ .pxc-cta--more .pxc-ctaText--back{ display: inline; }

/* =========================================================
   PXC – SECTION: TECH PARAMS
========================================================= */
.pxc-section--tech{
  background: #ffffff;
  padding-bottom: 100px;
}

.pxc-tech__title{
  margin: 0 0 36px 0;
  color: #111827;
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-align: center;
}

/* kontener dwóch bloków – desktop: pozycjonowanie absolutne */
.pxc-tech{
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  min-height: 520px; /* miejsce na overlap */

  /* sterowanie pozycją na DESKTOP */
  --left-x: 10%;
  --left-y: 0%;

  --shift-x: 32%; /* w prawo 35 */
  --shift-y: 55%; /* w dół */
  --overlap: 1%;  /* tylko “róg na róg” */

  padding: 0 0 80px 0;
}

/* karta bazowa */
.pxc-techCard{
  position: absolute;
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 28px;
  box-sizing: border-box;
  width: min(540px, 100%);
  text-align: left;
  font-size: 1.2rem;

  /* ramka PXC-color */
  border: 8px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--pxc-color-main) border-box;
}

.pxc-techCard__title{
  margin: 0 0 16px 0;
  color: #1a1a1a;
  font-size: 1.4rem;
  line-height: 1.25;
  text-align: center;
}

.pxc-techCard--primary{
  z-index: 2;
}

.pxc-techCard--secondary{
  left: calc(var(--left-x) + var(--shift-x) - var(--overlap));
  top:  calc(var(--left-y) + var(--shift-y) - var(--overlap));
  z-index: 1;
}

/* LISTA PARAMETRÓW */
.pxc-paramList{
  list-style: none;
  padding: 0;
  margin: 0;
}

.pxc-paramItem{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 12px 12px;
  border-radius: 12px;
  color: #1a1a1a;
  transition: transform 160ms ease, opacity 160ms ease, font-size 160ms ease, background 160ms ease;
}

.pxc-paramItem__label{ font-weight: 600; }

.pxc-paramItem__value{
  font-weight: 600;
  white-space: normal;
  text-align: right;
}
/* =========================================================
   PXC – HOTPOINTS
========================================================= */
.pxc-section--hotpoints{
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--pxc-color-main) border-box;
  border: 6px solid transparent;
  border-radius: 16px;
  padding: 32px 24px 48px;
  text-align: center;
}

.pxc-hotpoints__title{
  margin: 0 0 18px;
  color: #111827;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-align: center;
}

.pxc-hotpoints{
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 16px;
  overflow: visible;

  /* ===== ZMIENNE (desktop) ===== */
  --hp-bubble-w: 400px;
  --hp-bubble-pad: 20px;
  --hp-gap: 16px;

  --hp-thumb: 150px;
  --hp-title: 20px;
  --hp-text: 18px;
  --hp-line: 1.55;

  /* globalne mikro-offsety (opcjonalnie) */
  --hp-ox: 0px;
  --hp-oy: 0px;
}

.pxc-hotpoints__frame{
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.pxc-hotpoints__img{
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* kropki */
.pxc-hotpoints__dot{
  position: absolute;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 3px solid #fff;
  background:  #0098A1;
  cursor: pointer;
  z-index: 3;
}

.pxc-hotpoints__dot::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:999px;
  border:3px solid rgba(230,0,0,.30);
  animation: pxcHpPulse 1.6s infinite;
}

@keyframes pxcHpPulse{
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* dymek – WYGLĄD */
.pxc-hotpoints__bubble{
  position: absolute;
  z-index: 50;

  width: var(--hp-bubble-w);
  max-width: calc(100vw - 32px);

  background: #ffffff;
  border: 2px solid rgba(230,0,0,.25);
  border-radius: 18px;
  box-shadow: 0 22px 48px rgba(0,0,0,.22);

  padding: var(--hp-bubble-pad);
  display: none;
  gap: var(--hp-gap);
  align-items: flex-start;
  text-align: left;

  /* kotwica w punkcie hotpointa */
  left: 0;
  top: 0;

  /* bezpiecznik – nie używamy już --bx/--by */
  transform: none;
}

.pxc-hotpoints__thumb{
  width: var(--hp-thumb);
  height: var(--hp-thumb);
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  flex-shrink: 0;
}

.pxc-hotpoints__content{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.pxc-hotpoints__bTitle{
  font-weight: 700;
  font-size: var(--hp-title);
  line-height: 1.25;
}

.pxc-hotpoints__bText{
  font-size: var(--hp-text);
  line-height: var(--hp-line);
  color: #222;
}

/* close */
.pxc-hotpoints__close{
  position:absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 22px;
  line-height: 36px;
  cursor: pointer;

  display: grid;
  place-items: center;
  user-select: none;
}

/* =========================================================
   HOTPOINTS 
========================================================= */

/* ukryj radio */
.pxc-hpToggle{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* kotwica dla jednego hotpointa */
.pxc-hp{
  position: absolute;
}

/* kropka jako LABEL: osadzona w punkcie (0,0) hotpointa */
.pxc-hp > .pxc-hotpoints__dot{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border: 3px solid #fff;
  z-index: 3;
}

/* focus dla klawiatury */
.pxc-hp > .pxc-hotpoints__dot:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 3px;
}

/* otwieranie dymka bez JS */
.pxc-hp > .pxc-hpToggle:checked ~ .pxc-hotpoints__bubble{
  display: flex;
}

/* =========================================================
   POZYCJONOWANIE DYMKA
========================================================= */

/* w PRAWO */
.pxc-hp--right > .pxc-hotpoints__bubble{
  transform: translate(
    calc(var(--hp-gap) + var(--hp-ox, 0px)),
    calc(-50% + var(--hp-oy, 0px))
  );
}

/* w LEWO */
.pxc-hp--left > .pxc-hotpoints__bubble{
  transform: translate(
    calc(-1 * (var(--hp-bubble-w) + var(--hp-gap)) + var(--hp-ox, 0px)),
    calc(-50% + var(--hp-oy, 0px))
  );
}

/* do GÓRY */
.pxc-hp--top > .pxc-hotpoints__bubble{
  transform: translate(
    calc(-50% + var(--hp-ox, 0px)),
    calc(-100% - var(--hp-gap) + var(--hp-oy, 0px))
  );
}

/* w DÓŁ */
.pxc-hp--bottom > .pxc-hotpoints__bubble{
  transform: translate(
    calc(-50% + var(--hp-ox, 0px)),
    calc(var(--hp-gap) + var(--hp-oy, 0px))
  );
}

/* =========================================================
   HOTPOINTS – tablet sizing
========================================================= */
@media (min-width: 701px) and (max-width: 1000px){
  .pxc-hotpoints{
    --hp-bubble-w: 300px;
    --hp-bubble-pad: 16px;
    --hp-gap: 12px;

    --hp-thumb: 120px;
    --hp-title: 16px;
    --hp-text: 14px;
    --hp-line: 1.45;

    /* najlepiej zostawić 0 i stroić per-hotpoint */
    --hp-ox: 0px;
    --hp-oy: 0px;
  }

  .pxc-hotpoints__close{
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 28px;
  }
}


/* =========================================================
   PXC – FAQ (accordion + image)
========================================================= */
.pxc-section--faq{
  margin-bottom: 64px;
}

.pxc-faq__title{
  margin: 0 0 28px 0;
  color: #111827;
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
}

.pxc-faq{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: center;
}

/* lewa kolumna */
.pxc-faq__col--list{
  padding-top: 6px;
}

/* element FAQ */
.pxc-faqItem{
  padding: 14px 0;
  border-bottom: 1px solid rgba(17,24,39,0.12);
  position: relative;
}

/* radio/checkbox ukryte */
.pxc-faqInput{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Pytanie (LABEL) */
.pxc-faqQ{
  width: 100%;
  border: 0;
  background: transparent;
  position: relative;

  display: block;               
  text-align: left;
  font-size: clamp(18px, 1.3vw, 22px);
  font-weight: 700;
  color: #111827;
  cursor: pointer;

  border-radius: 10px;
  padding: 12px 16px 12px 44px;
  transition: background 200ms ease, color 200ms ease;
}

/* plus */
.pxc-faqQ::before{
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  color: #111827;
}

/* Odpowiedź – domyślnie zwinięta */
.pxc-faqA{
  max-height: 0;
  overflow: hidden;

  margin-top: 0;
  padding-left: 44px;
  color: #111827;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.6;

  transition: max-height 260ms ease, margin-top 260ms ease;
}

/* HOVER / FOCUS */
.pxc-faqQ:hover,
.pxc-faqQ:focus-visible{
  background: var(--pxc-color-main, linear-gradient(135deg, #0098A1, #96BE0D, #FFFFFF));
  color: #ffffff;
}

.pxc-faqQ:hover::before,
.pxc-faqQ:focus-visible::before{
  color: #ffffff;
}

/* OTWARTE (radio checked) */
.pxc-faqInput:checked + .pxc-faqQ{
  background: var(--pxc-color-main, linear-gradient(135deg, #0098A1, #96BE0D, #FFFFFF));
  color: #ffffff;
}

.pxc-faqInput:checked + .pxc-faqQ::before{
  color: #ffffff;
  content: "";
  font-size: 30px;
  line-height: 1;
}

.pxc-faqInput:checked ~ .pxc-faqA{
  max-height: 420px;
  margin-top: 10px;
}

/* prawa kolumna – obraz */
.pxc-faq__col--image{
  display: flex;
  justify-content: center;
  align-items: center;
}

.pxc-faq__img{
  padding-left: 7%;
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 6px;
  display: block;
  object-fit: cover;
  transform: translateY(45px);
}

/* =========================================================
   PXC – OFFER CARDS 
========================================================= */

.pxc-offer__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* KARTA – perspektywa na rodzicu */
.pxc-card{
  border-radius: 18px;
  perspective: 1200px;
  -webkit-perspective: 1200px;
}

/* Wrapper karty */
.pxc-card__inner{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

/* Ramka */
.pxc-card__inner::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  pointer-events:none;
  z-index:5;
}

/* TO SIĘ OBRACA */
.pxc-card__flipper{
  position: absolute;
  inset: 0;

  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

  transition: transform .7s ease;
  will-change: transform;
}

/* Strony */
.pxc-card__side{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* FRONT */
.pxc-card__front{
  transform: rotateY(0deg);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.pxc-card__img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;

  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* BACK */
.pxc-card__back{
  transform: rotateY(180deg);
  background: var(--pxc-color-main);
  position: relative;
  display: block;
  padding: 0;
}

.pxc-card__backContent{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  text-align: center;
  color: #111;
}

.pxc-card__label{
  margin: 0;
  max-width: 260px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
}

.pxc-offer .pxc-btn{
  padding: 14px 28px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

/* Przycisk (ten blok zostaje wspólny dla projektu) */
.pxc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
  border-radius: 999px;
  padding: 12px 18px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
  user-select: none;
}

.pxc-btn--white{
  background: #fff;
  color: #111;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}

.pxc-btn--white:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
}


.pxc-card__inner.is-flipped .pxc-card__flipper{
  transform: rotateY(180deg);
}

/* Focus */
.pxc-card__inner:focus-visible{
  box-shadow: 0 0 0 4px rgba(0,152,161,.35), 0 14px 34px rgba(0,0,0,.14);
}

/* =========================================================
   PXC – MEDIA QUERIES / RESPONSYWNOŚĆ
========================================================= */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .pxc-card__flipper{ transition: none; }
  .pxc-btn{ transition: none; }
}

/* Hover flip tylko na urządzeniach z hover */
@media (hover:hover) and (pointer:fine){
  .pxc-card__inner:hover .pxc-card__flipper{
    transform: rotateY(180deg);
  }
}

/* TABLET / WĘŻEJ: offer 2 kolumny, tech stack, faq stack */
@media (max-width: 940px){
  /* OFFER: 2 kolumny (3 rzędy po 2) */
  .pxc-offer__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

 

  /* FAQ: 1 kolumna + bez obrazka */
  .pxc-faq{
    grid-template-columns: 1fr;
  }

  .pxc-faq__col--image{
    display: none;
  }
}

@media (max-width: 1050px){

   /* TECH: stack */
  .pxc-tech{
    min-height: unset;
    display: grid;
    gap: 16px;
    padding: 0;
  }

  .pxc-techCard{
    position: static;
    width: 100%;
  }

  .pxc-paramItem{
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .pxc-paramItem__value{
    text-align: left;
  }

}



/* MOBILE: offer 1 kolumna + WYŁĄCZENIE FLIPA */
@media (max-width: 520px){
  .pxc-offer__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* wyłączamy flip na mobile */
  .pxc-card__inner{
    aspect-ratio: 5 / 6;
    cursor: default;
  }

  .pxc-card__flipper{
    transform: none !important;
  }

  .pxc-card__back{
    display: none;
  }

  /* Phoenixowy pasek u góry */
  .pxc-card__front::after{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 14px;
    background: var(--pxc-color-main);
    z-index: 4;
  }

  /* front jako “kafelek” */
  .pxc-card__front{
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .pxc-card__img{
    height: auto;
    flex: 1 1 auto;
    min-height: 220px;
  }
}

/* MEDIA SECTION  */
@media (max-width: 860px){
  .pxc-mediaPanel__grid{
    grid-template-columns: 1fr;
  }

  .pxc-mediaItem--image{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pxc-mediaItem--image img{
    width: min(420px, 90%);
  }

  .pxc-mediaPanel{
    padding: 16px;
  }

  .pxc-cta{
    min-height: 48px;
    font-size: 1rem;
  }

  .pxc-cta--more{
    position: static;
    transform: none;
    margin: 16px auto 0 auto;
  }
}

.pxc-hotpoints__mobileList{ display: none; }

/* HOTPOINTS – wyłącz na mniejszych */
@media (max-width: 700px){
  .pxc-hotpoints__dot{ display: none; }
  .pxc-hotpoints__bubble{ display: none !important; }

  /* ukryj cały blok z obrazem i kropkami */
  .pxc-hotpoints__frame{ display: none; }

  /* pokaż listę */
  .pxc-hotpoints__mobileList{ 
    display: block;
    text-align: left;
  }

  .pxc-bullets{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  .pxc-bullets li{
    position: relative;
    padding-left: 28px;
    font-size: 18px;
    line-height: 1.35;
  }

  /* “myślnik” */
  .pxc-bullets li::before{
    content: "⚡";
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(1px);
  }
}

/* TECH – dodatkowe paddingi (jeśli potrzebujesz) */
@media (max-width: 768px){
  .pxc-section--tech{
    padding: 40px 0;
  }
}

/* =========================================================
   PXC – HOVER ONLY (paramList)
========================================================= */
@media (min-width: 769px) and (hover: hover) and (pointer: fine){
  .pxc-paramList:hover .pxc-paramItem{
    opacity: 0.55;
  }

  .pxc-paramList .pxc-paramItem:hover{
    opacity: 1;
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.75);
  }

  .pxc-paramList .pxc-paramItem:hover .pxc-paramItem__label,
  .pxc-paramList .pxc-paramItem:hover .pxc-paramItem__value{
    font-size: 1.3em;
  }
}

/* =========================================================
   PXC – OFFER: MOBILE
========================================================= */
@media (max-width: 520px){

  /* 1) Całkowicie wyłączamy mechanikę 3D */
  .pxc-card{ perspective: none; -webkit-perspective: none; }

  /* 2) Flipper przestaje być “warstwą” absolute i staje się normalnym kontenerem */
  .pxc-card__flipper{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;

    display: flex !important;
    flex-direction: column !important;
  }

  /* 3) Front/back przestają być absolute i układają się jeden pod drugim */
  .pxc-card__side{
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;

    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  /* 4) Front zostaje jako obrazek */
  .pxc-card__front{
    transform: none !important;
  }

  .pxc-card__img{
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    display: block;
  }

  /* 5) Back pokazujemy jako dolny panel z CTA */
  .pxc-card__back{
    display: block !important;
    transform: none !important;
    background: transparent !important;
    padding: 12px 16px 18px !important;
  }

  /* 6) Zawartość CTA normalnie (nie absolute) */
  .pxc-card__backContent{
    position: static !important;
    inset: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;

    text-align: center !important;
  }

  /* 7) Rozmiary (możesz regulować) */
  .pxc-card__label{
    margin-top: 8px !important;
    margin: 0 !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
  }

  .pxc-offer .pxc-btn{
    font-size: 16px;
    padding: 12px 22px;
    line-height: 1;
    white-space: nowrap;
  }

  .pxc-card__inner{
    aspect-ratio: auto !important;
    height: auto !important;
  }

  .pxc-card__front::after{
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   OFFER – TABLET (2 kolumny) 
========================================================= */
@media (min-width: 521px) and (max-width: 940px){

  .pxc-offer__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .pxc-offer{
    --offer-card-h: 420px;
    --offer-back-h: 140px;
  }

  .pxc-card{ perspective: none; -webkit-perspective: none; }

  .pxc-card__inner{
    aspect-ratio: auto !important;
    height: var(--offer-card-h) !important;
    cursor: default;
  }

  .pxc-card__flipper{
    position: static !important;
    inset: auto !important;
    transform: none !important;
    transition: none !important;

    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  .pxc-card__side{
    position: static !important;
    inset: auto !important;
    width: auto !important;

    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .pxc-card__front{
    transform: none !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: #fff !important;
  }

  .pxc-card__img{
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
  }

  /* BACK PANEL: BIAŁY, bez gradientu */
  .pxc-card__back{
    display: block !important;
    transform: none !important;

    flex: 0 0 var(--offer-back-h) !important;
    height: var(--offer-back-h) !important;

    background: #ffffff !important;          /* <- to usuwa PXC-color */
    padding: 12px 16px 18px !important;
  }

  .pxc-card__backContent{
    position: static !important;
    inset: auto !important;

    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    padding: 0 !important;
    text-align: center !important;
  }

  .pxc-card__label{
    margin: 0 !important;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    color: #111 !important;
  }

  .pxc-card__front::after{
    content: none !important;
    display: none !important;
  }
}