/* ============================================================
   CAREPOD.PL  /  style stref HTML na stronie głównej

   Plik wgrany w panelu IdoSell do CMS, adres publiczny:
     /data/include/cms/0/carepod/carepod.css
   Podpinasz raz, najlepiej w szablonie w sekcji <head>:
     <link rel="stylesheet" href="/data/include/cms/0/carepod/carepod.css">
   Jeśli nie masz dostępu do <head>, wystarczy ten sam <link>
   na początku strefy HTML 1. Strefa 2 korzysta z tego samego pliku.

   Odwzorowuje stronę główną carepodeurope.com sekcja po sekcji.
   Paleta i typografia wspólne z opisami produktów (system .cpd),
   dlatego nie ma tu zielonego akcentu, tylko niebieski #1a6cde
   z oryginału i żółty #f0b43e na przycisku gwarancji.

   KAŻDY selektor zapisany jest jako ".cp .klasa" = siła (0,2,0).
   Powód: szablon IdoSell ma reguły typu ".cm h2, .cm p {color:inherit}"
   o sile (0,1,1), które biją pojedynczą klasę i rozjeżdżają kolory.
   Prefiks jest także w media queries, bo media query nie dodaje
   specyficzności. Nie używamy !important.

   Sliderów ten plik NIE styluje. Fragmenty z Kreatora slidera
   mają własny <style> i zostają niezależne, żeby dało się je
   podmieniać bez ruszania tego pliku.
   ============================================================ */

.cp{
  --cp-ink:#1c1d1d;
  --cp-mut:#4a4a4a;
  --cp-line:#e7e7e4;
  --cp-dark:#46474c;
  --cp-soft:#fafafa;
  --cp-blue:#1a6cde;
  --cp-yell:#f0b43e;
  --cp-page:1200px;

  width:100%;
  max-width:var(--cp-page);
  margin:0 auto;
  padding:0 20px;
  color:var(--cp-ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* box-sizing musi obejmowac takze sam kontener .cp, inaczej
   width:100% plus padding 0 20px daje 40 px poziomego scrolla. */
.cp,.cp *,.cp *::before,.cp *::after{box-sizing:border-box}
.cp img{max-width:100%;height:auto;display:block;border:0}
.cp p{margin:0 0 14px}
.cp p:last-child{margin-bottom:0}

/* ---------- sekcja i typografia ---------- */
.cp .cp-s{padding:56px 0}
.cp .cp-s--flush{padding-left:0;padding-right:0}
.cp .cp-s--tight{padding:28px 0}
/* text-wrap:balance rozklada tekst po rowno na wszystkie linie.
   Bez tego polskie tlumaczenie lamie sie tak, ze pierwsza linia jest
   prawie pelna, a druga krotka, i caly akapit wyglada na przesuniety
   w lewo, mimo ze blok jest wysrodkowany co do piksela.
   Przegladarki bez obslugi tej wlasciwosci po prostu ja ignoruja. */
.cp .cp-h2{font-size:38px;font-weight:600;color:#000;line-height:1.25;margin:0 0 .6rem;text-align:center;text-wrap:balance}
.cp .cp-h2 span{color:var(--cp-blue)}
.cp .cp-lead{font-size:16px;color:var(--cp-mut);line-height:1.5;margin:0 auto 2.25rem;max-width:720px;text-align:center;text-wrap:balance}
.cp .cp-note{font-size:12px;color:#888;text-align:center;margin:1.5rem 0 0}
.cp .cp-center{text-align:center}

/* ---------- przyciski ---------- */
.cp .cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:#000;color:#fff;text-decoration:none;padding:.9rem 2rem;border-radius:8px;font-size:16px;font-weight:600;line-height:1.5;letter-spacing:.3px;transition:background .2s}
.cp .cp-btn:hover{background:#333;color:#fff}
.cp .cp-btn svg{flex:0 0 auto}
.cp .cp-btn--blue{background:var(--cp-blue);color:#fff}
.cp .cp-btn--blue:hover{background:#1558b4;color:#fff}
.cp .cp-btn--yell{background:var(--cp-yell);color:#000}
.cp .cp-btn--yell:hover{background:#000;color:#fff}
.cp .cp-btn--ghost{background:transparent;color:var(--cp-ink);border:1px solid var(--cp-ink)}
.cp .cp-btn--ghost:hover{background:var(--cp-ink);color:#fff}
.cp .cp-btn--sm{padding:.6rem 1.4rem;font-size:14px;border-radius:8px}
.cp .cp-guar{font-size:13px;color:#666;margin:0;display:flex;align-items:center;justify-content:center;gap:.35rem}
.cp .cp-cta{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:2.5rem}

/* ---------- tor slidera (sloty na fragmenty z Kreatora) ----------
   Podpowiedz "przesun w bok" zostala usunieta na zyczenie. */
.cp .cp-rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cp .cp-rail::-webkit-scrollbar{display:none}
.cp .cp-rail>*{flex:0 0 100%;scroll-snap-align:center;min-width:0}

/* ---------- 1. KAFLE PRODUKTOW (shop_collection) ---------- */
.cp .cp-shop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cp .cp-shop__card{position:relative;display:block;border-radius:10px;overflow:hidden;background:#e8e8e8;text-decoration:none;color:#fff}
.cp .cp-shop__card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .35s}
.cp .cp-shop__card:hover img{transform:scale(1.03)}
.cp .cp-shop__label{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;font-size:15px;font-weight:600;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%)}
.cp .cp-shop__arrow{flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.85);display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1}
@media screen and (max-width:989px){
  .cp .cp-shop__grid{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:749px){
  .cp .cp-shop__label{padding:11px 12px;font-size:13px}
  .cp .cp-shop__arrow{flex:0 0 22px;width:22px;height:22px;font-size:12px}
}

/* ---------- 2. PLAKIETKI Z NAGRODAMI ---------- */
.cp .cp-badges{text-align:center}
.cp .cp-badges img{max-width:640px;width:100%;margin:0 auto}

/* ---------- 3. POROWNANIE MODELI (product_compare) ---------- */
.cp .cp-cmp__head{display:grid;grid-template-columns:136px repeat(3,1fr);align-items:end;margin-bottom:8px}
.cp .cp-cmp__headspacer{min-width:0}
.cp .cp-cmp__card{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 12px}
.cp .cp-cmp__card img{width:140px;height:120px;object-fit:contain}
.cp .cp-cmp__n{font-size:20px;font-weight:600;color:#2b2b2b;margin:0;line-height:1.35}
.cp .cp-cmp__d{font-size:14px;color:var(--cp-dark);margin:0;line-height:1.5}
.cp .cp-cmp__row{display:grid;grid-template-columns:136px repeat(3,1fr);align-items:center;min-height:64px;padding:10px 16px 10px 0}
.cp .cp-cmp__row:nth-child(odd){background:var(--cp-soft)}
.cp .cp-cmp__row>*{min-width:0}
.cp .cp-cmp__lab{font-size:16px;color:var(--cp-dark);padding-left:16px;line-height:1.35}
.cp .cp-cmp__v{font-size:16px;color:var(--cp-dark);text-align:center;line-height:1.4;padding:0 8px}
.cp .cp-cmp__v svg{margin:0 auto}
.cp .cp-cmp__x{color:#c9c9c9;font-size:18px}
.cp .cp-cmp__buy{display:grid;grid-template-columns:136px repeat(3,1fr);margin-top:1.5rem}
.cp .cp-cmp__buy>div{text-align:center;padding:0 8px}
@media screen and (max-width:989px){
  .cp .cp-cmp__head,.cp .cp-cmp__row,.cp .cp-cmp__buy{grid-template-columns:96px repeat(3,1fr)}
  .cp .cp-cmp__card{padding:0 4px}
  .cp .cp-cmp__card img{width:92px;height:80px}
  .cp .cp-cmp__n{font-size:15px}
  .cp .cp-cmp__d{display:none}
  .cp .cp-cmp__lab{font-size:13px;padding-left:10px}
  .cp .cp-cmp__v{font-size:13px;padding:0 4px}
  .cp .cp-cmp__row{padding-right:10px;min-height:56px}
}
/* przyciski "Kup teraz" stoja w waskich kolumnach, wiec na malych
   ekranach musza sie zwezac razem z nimi, inaczej rozpychaja siatke
   i cala strona scrolluje sie w bok */
@media screen and (max-width:989px){
  .cp .cp-cmp__buy>div{padding:0 3px}
  .cp .cp-cmp__buy .cp-btn{width:100%;padding:.55rem .35rem;font-size:12.5px;letter-spacing:0;white-space:normal;text-align:center;overflow-wrap:anywhere}
}
@media screen and (max-width:479px){
  .cp .cp-cmp__head,.cp .cp-cmp__row,.cp .cp-cmp__buy{grid-template-columns:78px repeat(3,1fr)}
  .cp .cp-cmp__lab{font-size:11.5px;padding-left:8px}
  .cp .cp-cmp__v{font-size:11.5px;padding:0 2px}
  .cp .cp-cmp__card img{width:64px;height:58px}
  .cp .cp-cmp__n{font-size:12.5px}
  .cp .cp-cmp__buy>div{padding:0 2px}
  .cp .cp-cmp__buy .cp-btn{font-size:11px;padding:.5rem .25rem}
}

/* ---------- 4. CAREPOD KONTRA INNE (comparative) ---------- */
.cp .cp-comp__grid{width:100%}
.cp .cp-comp__row{display:grid;grid-template-columns:150px 120px 1fr;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--cp-line)}
.cp .cp-comp__row>*{min-width:0}
.cp .cp-comp__cells{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;align-items:center;min-width:0}
.cp .cp-comp__cells>*{min-width:0}
.cp .cp-comp__fh{font-size:13px;font-weight:600;color:var(--cp-ink);line-height:1.3;text-align:center;overflow-wrap:anywhere}
.cp .cp-comp__brand{font-size:15px;font-weight:700;color:var(--cp-ink);margin:0;text-align:left}
.cp .cp-comp__brand--other{font-weight:400;color:#8a8a8a}
.cp .cp-comp__img{width:100%;max-width:120px;height:auto;margin:0 auto}
.cp .cp-comp__cell{display:flex;align-items:center;justify-content:center}
@media screen and (max-width:749px){
  .cp .cp-comp__row{grid-template-columns:72px 52px 1fr;gap:.4rem}
  .cp .cp-comp__fh{font-size:10px}
  .cp .cp-comp__brand{font-size:12.5px}
  .cp .cp-comp__cells{gap:.2rem}
  .cp .cp-comp__cell svg{width:20px;height:20px}
}

/* ---------- 5. CZYSZCZENIE W TRZECH KROKACH ---------- */
.cp .cp-cln__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.cp .cp-cln__step{display:flex;flex-direction:column;gap:1rem}
.cp .cp-cln__imgwrap{position:relative;display:block;border-radius:12px;overflow:hidden;background:#f5f5f5}
.cp .cp-cln__img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cp .cp-cln__num{position:absolute;left:14px;top:14px;width:34px;height:34px;border-radius:50%;background:#fff;color:#000;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cp .cp-cln__t{font-size:18px;font-weight:600;color:#000;margin:0 0 .35rem}
.cp .cp-cln__x{font-size:15px;color:var(--cp-mut);margin:0;line-height:1.6}
@media screen and (max-width:749px){
  .cp .cp-cln__steps{grid-template-columns:1fr;gap:1.75rem}
}

/* ---------- 6. OPINIE SPECJALISTOW ---------- */
.cp .cp-tst__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.cp .cp-tst__card{background:#fff;border:1px solid var(--cp-line);border-radius:12px;padding:30px;display:flex;flex-direction:column;gap:14px;text-align:center}
.cp .cp-tst__stars{font-size:18px;color:var(--cp-ink);letter-spacing:2px;line-height:1}
.cp .cp-tst__q{font-size:16px;line-height:1.6;color:var(--cp-ink);margin:0;flex:1 1 auto}
.cp .cp-tst__n{font-size:17px;font-weight:700;color:var(--cp-ink);margin:0;line-height:1.5}
.cp .cp-tst__r{font-size:15px;color:var(--cp-mut);margin:0;line-height:1.5}
@media screen and (max-width:989px){
  .cp .cp-tst__grid{grid-template-columns:repeat(2,1fr)}
}
@media screen and (max-width:749px){
  .cp .cp-tst__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:1rem;padding:0 0 1rem;scrollbar-width:none}
  .cp .cp-tst__grid::-webkit-scrollbar{display:none}
  .cp .cp-tst__card{flex:0 0 82vw;scroll-snap-align:center;padding:24px}
}

/* ---------- 7. HISTORIA ZALOZYCIELA ---------- */
.cp .cp-fnd__in{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.cp .cp-fnd__text{min-width:0;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.cp .cp-fnd__h{font-size:32px;font-weight:600;color:var(--cp-ink);margin:0;line-height:1.25;text-align:left}
.cp .cp-fnd__body{font-size:16px;color:var(--cp-mut);margin:0;line-height:1.7}
.cp .cp-fnd__media{min-width:0}
.cp .cp-fnd__media img{width:100%;border-radius:12px}
@media screen and (max-width:749px){
  .cp .cp-fnd__in{grid-template-columns:1fr;gap:1.5rem}
  .cp .cp-fnd__media{order:-1}
  .cp .cp-fnd__h{font-size:24px}
}

/* ---------- 8. BLOG ---------- */
.cp .cp-blg__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.75rem}
.cp .cp-blg__h{font-size:38px;font-weight:600;color:#000;margin:0;line-height:1.2;text-align:left}
.cp .cp-blg__all{font-size:15px;font-weight:600;color:var(--cp-ink);text-decoration:underline;white-space:nowrap}
.cp .cp-blg__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cp .cp-blg__card{display:block;text-decoration:none;color:inherit}
.cp .cp-blg__card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;background:#f0f0f0}
.cp .cp-blg__tag{font-size:12px;font-weight:600;color:var(--cp-blue);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.06em}
.cp .cp-blg__t{font-size:17px;font-weight:600;color:var(--cp-ink);margin:0;line-height:1.4}
@media screen and (max-width:989px){
  .cp .cp-blg__grid{grid-template-columns:1fr}
  .cp .cp-blg__h{font-size:26px}
}

/* ---------- wspolne mobilne ---------- */
@media screen and (max-width:749px){
  .cp{padding:0 16px}
  .cp .cp-s{padding:40px 0}
  .cp .cp-h2{font-size:26px}
  .cp .cp-lead{font-size:15px;margin-bottom:1.75rem}
}

/* ============================================================
   NADPISANIA DLA SZABLONU IdoSell

   Strefy HTML lądują w kontenerach #main_cms (strefa 1)
   i #main_cms2 (strefa 2). Plik main_style.css ma tam reguły
     #main_cms p  { margin; color; line-height }
     #main_cms h2 { margin; color; line-height; font-size }
   o sile (1,0,1). Selektor z ID bije każdy selektor klasowy,
   więc nasze ".cp .klasa" = (0,2,0) przegrywało: szablon zerował
   marginesy (przez co .cp-lead przestawał być wyśrodkowany),
   gasił kolory i nadpisywał interlinię oraz rozmiar nagłówków.

   Poniższe reguły mają siłę (1,2,0), więc wygrywają, a przy tym
   nie używamy !important. Blok jest generowany z reguł powyżej,
   razem z wariantami mobilnymi. Zmieniasz wartość wyżej,
   przegeneruj też ten blok.
   ============================================================ */

#main_cms .cp .cp-lead,#main_cms2 .cp .cp-lead{font-size:16px;color:var(--cp-mut);line-height:1.5;margin:0 auto 2.25rem}
#main_cms .cp .cp-cmp__n,#main_cms2 .cp .cp-cmp__n{font-size:20px;color:#2b2b2b;margin:0;line-height:1.35}
#main_cms .cp .cp-cmp__d,#main_cms2 .cp .cp-cmp__d{font-size:14px;color:var(--cp-dark);margin:0;line-height:1.5}
#main_cms .cp .cp-comp__brand,#main_cms2 .cp .cp-comp__brand{font-size:15px;color:var(--cp-ink);margin:0}
#main_cms .cp .cp-comp__brand--other,#main_cms2 .cp .cp-comp__brand--other{color:#8a8a8a}
#main_cms .cp .cp-note,#main_cms2 .cp .cp-note{font-size:12px;color:#888;margin:1.5rem 0 0}
#main_cms .cp .cp-guar,#main_cms2 .cp .cp-guar{font-size:13px;color:#666;margin:0}
#main_cms .cp .cp-cln__t,#main_cms2 .cp .cp-cln__t{font-size:18px;color:#000;margin:0 0 .35rem}
#main_cms .cp .cp-cln__x,#main_cms2 .cp .cp-cln__x{font-size:15px;color:var(--cp-mut);margin:0;line-height:1.6}
#main_cms .cp .cp-tst__q,#main_cms2 .cp .cp-tst__q{font-size:16px;line-height:1.6;color:var(--cp-ink);margin:0}
#main_cms .cp .cp-tst__n,#main_cms2 .cp .cp-tst__n{font-size:17px;color:var(--cp-ink);margin:0;line-height:1.5}
#main_cms .cp .cp-tst__r,#main_cms2 .cp .cp-tst__r{font-size:15px;color:var(--cp-mut);margin:0;line-height:1.5}
#main_cms .cp .cp-fnd__body,#main_cms2 .cp .cp-fnd__body{font-size:16px;color:var(--cp-mut);margin:0;line-height:1.7}
#main_cms .cp .cp-blg__tag,#main_cms2 .cp .cp-blg__tag{font-size:12px;color:var(--cp-blue);margin:14px 0 6px}
#main_cms .cp .cp-blg__t,#main_cms2 .cp .cp-blg__t{font-size:17px;color:var(--cp-ink);margin:0;line-height:1.4}
#main_cms .cp .cp-h2,#main_cms2 .cp .cp-h2{font-size:38px;color:#000;line-height:1.25;margin:0 0 .6rem}
#main_cms .cp .cp-fnd__h,#main_cms2 .cp .cp-fnd__h{font-size:32px;color:var(--cp-ink);margin:0;line-height:1.25}
#main_cms .cp .cp-blg__h,#main_cms2 .cp .cp-blg__h{font-size:38px;color:#000;margin:0;line-height:1.2}
#main_cms .cp p,#main_cms2 .cp p{margin:0 0 14px}
#main_cms .cp p:last-child,#main_cms2 .cp p:last-child{margin-bottom:0}

@media screen and (max-width:989px){
  #main_cms .cp .cp-cmp__n,#main_cms2 .cp .cp-cmp__n{font-size:15px}
}

@media screen and (max-width:479px){
  #main_cms .cp .cp-cmp__n,#main_cms2 .cp .cp-cmp__n{font-size:12.5px}
}

@media screen and (max-width:749px){
  #main_cms .cp .cp-comp__brand,#main_cms2 .cp .cp-comp__brand{font-size:12.5px}
}

@media screen and (max-width:749px){
  #main_cms .cp .cp-fnd__h,#main_cms2 .cp .cp-fnd__h{font-size:24px}
}

@media screen and (max-width:989px){
  #main_cms .cp .cp-blg__h,#main_cms2 .cp .cp-blg__h{font-size:26px}
}

@media screen and (max-width:749px){
  #main_cms .cp .cp-lead,#main_cms2 .cp .cp-lead{font-size:15px;margin-bottom:1.75rem}
  #main_cms .cp .cp-h2,#main_cms2 .cp .cp-h2{font-size:26px}
}
