/* HERO */
.hero--home{
  position:relative;
  min-height:700px;
  display:flex;
  align-items:center;
  background-image:var(--hero-bg);
  background-size:cover;
  background-position:center;
  isolation:isolate
}
.hero--home::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.45),rgba(0,0,0,.45));
  z-index:0
}
.hero--home .hero__content{
  position:relative;
  z-index:1;
  color:#fff;
  max-width:740px
}
.hero--home h1{
  font-size:56px;
  line-height:1.08;
  margin:0 0 14px
}
.hero--home p{
  margin:0 0 18px;
  opacity:.95
}
.hero--home .hero__actions{
  display:flex;
  gap:12px
}
.hero__pager{
  position:absolute;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:1
}
.hero__pager button{
  background:rgba(255,255,255,.92);
  color:#111;
  border:0;
  width:44px;
  height:32px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  opacity:.9
}
.hero__pager .is-active{
  background:#ff2a2a;
  color:#fff
}

/* WHY */
.sec-head{ text-align:center; margin:50px 0 18px }
.why__lead{
  max-width:920px;
  margin:0 auto 18px;
  color:#666;
  text-align:center;
  font-size:15px
}
.why .why__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}
.feat{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 6px 26px rgba(0,0,0,.06);
  padding:24px;
  text-align:center
}
.feat.is-active{outline:2px solid rgba(44,194,74,.25)}
.feat h3{margin:0 0 8px;font-size:16px}
.feat p{margin:0;color:#666}

/* KAFLE */
.categories .cat__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px
}
.cat{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-radius:14px;
  padding:22px;
  min-height:220px;
  text-decoration:none;
  overflow:hidden
}
.cat--green{background:#80c342;color:#111}
.cat--red{background:#ff2a2a;color:#fff}
.cat__content{z-index:1;max-width:58%}
.cat__content h3{margin:0 0 6px;font-size:18px}
.cat__content p{margin:0 0 12px;opacity:.9}

/* >>> POPRAWIONE OBRAZKI <<< */
.cat__img{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  height:86%;
  width:auto;
  max-width:50%;
  object-fit:contain;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.25));
  bottom:auto !important
}
.cat__img--apple{
  height:88%;
  max-width:48%;
  width:auto
}
.cat__img--can{
  height:86%;
  max-width:50%;
  width:auto
}
/* >>> KONIEC POPRAWKI <<< */

/* STORY */
.story{background:#fafafa;margin-top:30px}
.story__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:26px;
  padding:34px 20px 44px
}
.story__media img{
  border-radius:14px;
  box-shadow:0 10px 34px rgba(0,0,0,.12);
  width:100%;
  height:360px;
  object-fit:cover
}

/* OPINIE */
.opinie{background:#f3f5f7;padding:34px 0 58px}
.opinie .opinie__card{
  background:#fff;
  border:1px solid #eee;
  border-radius:14px;
  box-shadow:0 6px 30px rgba(0,0,0,.06);
  padding:26px;
  max-width:880px
}
.opinie blockquote{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.5;
  color:#333
}
.opinie__author{color:#777;font-size:14px}
.opinie__dots{
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:10px
}
.opinie__dots span{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#ddd;
  display:inline-block
}
.opinie__dots .is-active{
  background:#2cc24a
} /* ← tu brakowało klamry */

/* ===== HERO SLIDER ===== */
.hero-slider{
  position:relative;
  min-height:560px;
  overflow:hidden;
}
.hero-slide{
  position:absolute;
  inset:0;
  background-image:var(--bg);
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.02);
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.hero-slide::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25));
}
.hero-slide .hero__content{
  position:relative;
  z-index:2;
  padding:64px 16px;
  color:#fff;
}
.hero-slide.is-active{
  opacity:1;
  transform:none;
  z-index:2;
}

/* Dots po prawej w pionie z numerami 01/02 */
.hero-dots{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
  z-index:3;
}
.hero-dots .dot{
  width:36px;
  height:28px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.9);
  color:#111;
  font:700 12px/1 system-ui,Segoe UI,Roboto,Arial;
  border-radius:6px;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease, background .15s ease;
}
.hero-dots .dot.is-active{
  background:#fff;
  transform:translateX(-2px);
}
.hero__actions .btn{ margin-right:10px; }

/* Responsive */
@media (max-width: 980px){
  .hero-slider{ min-height:480px; }
  .hero-dots{ right:12px; }
}

/* === FIX: ramki + dopasowanie grafik w kartach kategorii === */

/* Karta ma wyraźną ramkę i cień; overflow trzyma wszystko w środku */
.cat{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px;
  min-height:220px;
  text-decoration:none;
  border-radius:14px;
  overflow:hidden;

  /* delikatna ramka + cień (na jasnych tłach) */
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 8px 28px rgba(0,0,0,.09);
}

/* Kolorowe warianty – zamiast szarej ramki dajemy subtelny biały „inset”,
   żeby ramka była widoczna na zielonym/czerwonym tle */
.cat.cat--green,
.cat.cat--red{
  border-color: transparent;                 /* ukryj szary border */
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.35), /* biała „ramka” */
    0 10px 28px rgba(0,0,0,.12);             /* zewnętrzny cień */
}

/* Treść zostaje po lewej, obrazek po prawej w granicach karty */
.cat__content{
  z-index:1;
  max-width:58%;
}

/* Obrazek: zawsze w ramce karty, bez wyciekania ponad border-radius */
.cat__img{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:auto;
  height:auto;                                  /* kluczowa zmiana */
  max-width:50%;
  max-height:calc(100% - 32px);                 /* szanuj padding i wysokość karty */
  object-fit:contain;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.20));
  pointer-events:none;                          /* czystsze kliki w CTA/całą kartę */
}

/* Fine-tune dla poszczególnych grafik (opcjonalnie) */
.cat__img--apple{ max-width:48%; }
.cat__img--can  { max-width:50%; }

/* Grid responsywny – na małych ekranach karty jedna pod drugą
   i obrazek trochę mniejszy, żeby nie przytłaczał CTA */
@media (max-width: 860px){
  .categories .cat__grid{
    grid-template-columns: 1fr;
    gap:16px;
  }
  .cat__content{ max-width:62%; }
  .cat__img{
    right:12px;
    max-width:44%;
    max-height:calc(100% - 28px);
  }
}

/* Ultra-small – jeszcze odrobina luzu */
@media (max-width: 520px){
  .cat{ min-height: 200px; padding:18px; }
  .cat__content{ max-width:64%; }
  .cat__img{
    right:10px;
    max-width:42%;
    max-height:calc(100% - 24px);
  }
}

/* === HARD OVERRIDE: grafiki w kartach jabłko / sok mieszczą się w ramkach === */
.categories .cat__grid .cat .cat__img{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:auto !important;
  height:auto !important;
  max-width:50% !important;
  max-height:calc(100% - 32px) !important; /* szanuje padding karty */
  object-fit:contain;
  filter:drop-shadow(0 10px 25px rgba(0,0,0,.20));
  pointer-events:none;
}
.categories .cat__grid .cat .cat__img--apple{
  height:auto !important;
  max-height:calc(100% - 32px) !important;
  max-width:48% !important;
}
.categories .cat__grid .cat .cat__img--can{
  height:auto !important;
  max-height:calc(100% - 32px) !important;
  max-width:50% !important;
}


/* === RWD uzupełnienia (2025-09-23) === */
@media (max-width: 980px){
  .why .why__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .why .why__grid{ grid-template-columns: 1fr; }
  .cat__content{ max-width: 100%; }
  .cat__img{ max-width: 44%; height: auto; }
}

/* === MOBILE FIX: kategorie — tekst nie nachodzi na obrazek === */
@media (max-width: 768px) {
  .categories .cat { position: relative; overflow: hidden; }

  /* Tekst zawsze nad obrazkiem + odstęp po prawej na szerokość obrazka */
  .categories .cat .cat__content {
    position: relative;
    z-index: 2;
    padding-right: clamp(110px, 40vw, 260px); /* zostawia „strefę” na jabłko/puszkę */
  }

  /* Obrazek trzymamy w prawym dolnym rogu pod tekstem */
  .categories .cat .cat__img {
    position: absolute;
    right: 8px;
    bottom: 8px;
    max-width: clamp(120px, 45vw, 260px);
    height: auto;
    z-index: 1;
    pointer-events: none; /* klik nie łapie obrazka */
  }

  /* Ładne zawijanie — bez wchodzenia na obrazek */
  .categories .cat .cat__content h3,
  .categories .cat .cat__content p {
    margin-right: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.35;
  }
}

/* Jeśli któryś kafelek ma obrazek z lewej strony, użyj tej wariacji:
   (u Ciebie zwykle niepotrzebne, ale zostawiam gotowe) */
@media (max-width: 768px) {
  .categories .cat--left .cat__content { 
    padding-left: clamp(110px, 40vw, 260px); 
    padding-right: 16px;
  }
  .categories .cat--left .cat__img { 
    left: 8px; right: auto; 
  }
}

/* --- USPs/benefity: hover zamiast stałego podświetlenia --- */
.benefits .card,
.usps .card,
.feature-cards .card {
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  /* bazowe (neutralne) */
  box-shadow: none;
}

/* Jeśli któraś karta ma klasę .is-active/.active w HTML – wyłącz stałe podświetlenie */
.benefits .card.is-active,
.benefits .card.active,
.usps .card.is-active,
.usps .card.active,
.feature-cards .card.is-active,
.feature-cards .card.active {
  box-shadow: none !important;
  border-color: var(--card-border, rgba(0,0,0,.08)) !important;
}

/* Efekt najechania i fokus klawiaturą */
.benefits .card:hover,
.benefits .card:focus-visible,
.usps .card:hover,
.usps .card:focus-visible,
.feature-cards .card:hover,
.feature-cards .card:focus-visible {
  /* użyj swoich kolorów obramowania/cienia, tu tylko efekt */
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: var(--accent, #4caf50);
  outline: none;
}
/* karty USP – efekt tylko na hover/focus */
.om-hover-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.om-hover-card:hover,
.om-hover-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  outline: none;
}

/* podświetlenie tylko przy najechaniu/klawiaturze */
.feat:hover,
.feat:focus-visible {
  outline: 4px solid rgba(44,194,74,.25);
  outline-offset: 0;      /* opcjonalnie */
  transition: outline .15s ease;
}

/* USP/featy – stabilny hover bez migania (bez przesuwania elementu) */
.why__grid .feat {
  /* delikatna animacja przejścia */
  transition: box-shadow .18s ease, outline-color .18s ease;
}

/* Podświetlenie trzyma się, dopóki kursor jest nad kartą lub fokus jest w środku */
.why__grid .feat:hover,
.why__grid .feat:focus-visible,
.why__grid .feat:focus-within {
  outline: 4px solid rgba(44,194,74,.25);
  outline-offset: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  /* najważniejsze: nie przesuwaj karty na hover, żeby nie tworzyć „luki” pod myszką */
  transform: none !important;
}

/* jeśli gdzieś wcześniej było stałe podświetlenie */
.why__grid .feat.is-active,
.why__grid .feat.active {
  outline: none !important;
  box-shadow: none !important;
}