/* Start custom CSS for html, class: .elementor-element-3f670d2 *//********  WM80 • WP/Woo – FINAL PATCH (scoped)  ********/

/* ——— 1) GLOBAL: ciemny motyw tylko na tej stronie ——— */
body.page-id-13226,
body.page-id-13226 .site,
body.page-id-13226 .site-content,
body.page-id-13226 .container,
body.page-id-13226 .row.content,
body.page-id-13226 .entry-content,
body.page-id-13226 .col-12,
body.page-id-13226 .p-default {
  background: #0e0e11 !important;
  color: #e9e9ef !important;
}

/* Zero jasnych boxów, ramek i „pudełek” w środku */
body.page-id-13226 .entry-content > *,
body.page-id-13226 .elementor,
body.page-id-13226 .elementor-section,
body.page-id-13226 .elementor-top-section,
body.page-id-13226 .elementor-container,
body.page-id-13226 .elementor-widget-wrap {
  background: transparent !important;
  color: inherit !important;
}

/* Pełna szerokość contentu + brak białych marginesów bocznych */
body.page-id-13226 .container,
body.page-id-13226 .row.content {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Schowaj blogowy sidebar tylko tu */
body.page-id-13226 aside.col-12.col-lg-4.pl-lg-5.float-right.sidebar,
body.page-id-13226 #secondary,
body.page-id-13226 .sidebar { display: none !important; }
body.page-id-13226 main.col-12.col-lg-8.p-0.p-default,
body.page-id-13226 .content .col-12.col-lg-8 { flex:0 0 100% !important; max-width:100% !important; }

/* ——— 2) LANDING WRAPPER ——— */
.landing-wpwoo{
  --bg:#0e0e11; --bg-2:#131318; --card:#17171d;
  --text:#e9e9ef; --muted:#bdbdcc; --accent:#ff3e2f; --accent-2:#ff7a66;
  --radius:12px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1180px; --gap:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,system-ui,"Helvetica Neue",sans-serif;
  color:var(--text);
}
.landing-wpwoo, .landing-wpwoo * { box-sizing:border-box; }
.landing-wpwoo .wm-wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Tło sekcji (ciemne) + spójne odstępy pionowe */
.landing-wpwoo section{ background:var(--bg) !important; padding:56px 0 !important; }
.landing-wpwoo section.section--dark{ background:var(--bg-2) !important; }
.landing-wpwoo section:first-of-type{ padding-top:40px !important; }
.landing-wpwoo section .wm-wrap > *:last-child{ margin-bottom:0 !important; }

/* Zgaszenie „spacerów” i separatorów od Elementora/Bloków */
body.page-id-13226 .elementor-spacer,
body.page-id-13226 .wp-block-spacer { height: clamp(8px,2vw,20px) !important; }
body.page-id-13226 .wp-block-separator{ margin:12px 0 !important; opacity:.3; }

/* Typografia */
.landing-wpwoo h1{font-size:clamp(28px,5.6vw,40px);line-height:1.15;font-weight:800;margin:.25em 0 .45em;color:#fff}
.landing-wpwoo h2{font-size:clamp(22px,4.6vw,30px);line-height:1.18;font-weight:800;margin:.25em 0 .45em;color:#fff}
.landing-wpwoo h3{font-size:clamp(18px,4vw,22px); line-height:1.22; font-weight:800; margin:.25em 0 .45em; color:#fff}
.landing-wpwoo .lead{ color:var(--muted); font-size:clamp(16px,1.5vw,19px) }

/* Siatki i kafle */
.landing-wpwoo .grid{ display:grid; gap:var(--gap); }
.landing-wpwoo .grid, .landing-wpwoo .grid > *{ min-width:0; max-width:100% }
.landing-wpwoo .feature,.landing-wpwoo .step,.landing-wpwoo details,.landing-wpwoo .hero__card{
  background:var(--card); border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); color:#f0f1f5;
}
.landing-wpwoo .feature p,
.landing-wpwoo .step p,
.landing-wpwoo details p,
.landing-wpwoo .hero__card p{ color:#c9cbd6 }

/* HERO */
.landing-wpwoo .hero{
  background:
    radial-gradient(1200px 700px at 70% -20%, rgba(255,62,47,.12), transparent 55%),
    radial-gradient(900px 500px at -10% 10%, rgba(255,122,102,.10), transparent 60%),
    var(--bg) !important;
  padding:56px 0 !important;
}
.landing-wpwoo .hero .hero__inner{ display:grid; align-items:center; gap:30px; grid-template-columns:1.2fr .8fr }
@media (max-width:1050px){ .landing-wpwoo .hero .hero__inner{ grid-template-columns:1fr !important } }
.landing-wpwoo .hero__media{ margin:8px 0 0 !important; }
.landing-wpwoo .hero__media img{ display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.45) }
.landing-wpwoo .hero__media figcaption{ color:#bdbdcc; margin-top:10px; }

/* KPI / Features / Process – równe i gęstsze */
.landing-wpwoo .kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px }
.landing-wpwoo .kpi{ background:var(--bg-2); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:14px }
.landing-wpwoo .kpi strong{ display:block; font-size:22px; color:#fff }

.landing-wpwoo .features{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.landing-wpwoo .process{ grid-template-columns:repeat(4,minmax(0,1fr)) ; align-items:stretch }
.landing-wpwoo .process .step{ height:100% }
.landing-wpwoo .process .step strong{ margin-right:.35em; letter-spacing:.2px }
.landing-wpwoo .process .step strong::after{ content:" " } /* naprawa „INTEGRACJEWoo…” */

/* Listy z „ptaszkami” w kolorze akcentu */
.landing-wpwoo .list{ margin:14px 0 6px; padding:0; list-style:none; display:grid; gap:10px }
.landing-wpwoo .list li{ display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start }
.landing-wpwoo .list .ok{ color:#ff3e2f !important }

/* Przycisk w treści (navbar nie tykamy) */
.landing-wpwoo .btn{ display:inline-block; padding:14px 20px; border-radius:12px; font-weight:700; line-height:1;
  background:#ff3e2f; color:#fff; border:1px solid transparent; transition:.2s }
.landing-wpwoo .btn:hover{ transform:translateY(-1px); filter:saturate(1.1) }
.landing-wpwoo .btn.btn--ghost{ background:transparent; color:#ff3e2f; border-color:#ff3e2f }

/* RESPONSYWNOŚĆ – jedna kolumna na wąskich + kontrola odstępów */
@media (max-width:900px){
  .landing-wpwoo .kpis{ grid-template-columns:repeat(2,1fr) }
  .landing-wpwoo #dlaczego .grid,
  .landing-wpwoo #zakres .grid,
  .landing-wpwoo #seo .grid,
  .landing-wpwoo #proces .grid,
  .landing-wpwoo #pakiety .grid,
  .landing-wpwoo #case .grid,
  .landing-wpwoo #faq .grid,
  .landing-wpwoo #kontakt .grid{ grid-template-columns:1fr !important; gap:14px !important }
}
@media (max-width:768px){
  .landing-wpwoo .wm-wrap{ padding:0 16px }
  .landing-wpwoo .list{ gap:8px }
}
/* Jeśli ten CSS jest zapisany TYLKO na tej stronie, możesz użyć wersji globalnej: */
aside.col-12.col-lg-4.pl-lg-5.float-right.sidebar,
#secondary{ display:none!important; }
main.col-12.col-lg-8.p-0.p-default,
.content .col-12.col-lg-8{ max-width:100%!important;width:100%!important;flex:0 0 100%!important; }
.pl-lg-5{ padding-left:0!important; }
.row.content{ gap:0!important; }
/********  WM80 • MOBILE FIX PATCH (≤ 560px)  ********/

/* 0) zero poziomego scrolla i bezpieczne krawędzie */
html, body { overflow-x: hidden; }
.landing-wpwoo { max-width: 100vw; overflow-x: hidden; }
.landing-wpwoo .wm-wrap{
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
}

/* 1) hero w jedną kolumnę + obraz nie wyjeżdża */
@media (max-width: 560px){
  .landing-wpwoo .hero .hero__inner{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .landing-wpwoo .hero__media{ margin: 0 !important; }
  .landing-wpwoo .hero__media img{
    max-width: 100% !important;
    height: auto !important;
    max-height: 360px;
    object-fit: cover;
    display: block;
  }
}

/* 2) nagłówki zawijają się (długie “WordPress/WooCommerce”) */
.landing-wpwoo h1,
.landing-wpwoo h2{
  overflow-wrap: anywhere;     /* najważniejsze */
  word-break: break-word;
  hyphens: auto;
  text-wrap: balance;          /* gdzie wspierane */
}
/* na małych ekranach trochę mniejszy H1 */
@media (max-width: 420px){
  .landing-wpwoo h1{ font-size: clamp(24px, 8.5vw, 32px) !important; }
}

/* 3) przyciski w hero — w jednej kolumnie na telefonie */
.landing-wpwoo .cta-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 480px){
  .landing-wpwoo .cta-row{ grid-template-columns: 1fr; }
  .landing-wpwoo .cta-row .btn{ width: 100%; text-align: center; }
}

/* 4) kafelki KPI/feature/process — równe i w jedną kolumnę */
@media (max-width: 560px){
  .landing-wpwoo .kpis{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .landing-wpwoo .features,
  .landing-wpwoo .process,
  #dlaczego .grid, #zakres .grid, #seo .grid,
  #proces .grid, #pakiety .grid, #case .grid,
  #faq .grid, #kontakt .grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .landing-wpwoo .grid, .landing-wpwoo .grid > *{ min-width: 0 !important; }
}

/* 5) listy: mniejsze ikony i ciaśniej, by nic nie “pchało” w bok */
@media (max-width: 560px){
  .landing-wpwoo .list{ gap: 8px !important; }
  .landing-wpwoo .list li{ grid-template-columns: 18px 1fr !important; }
}

/* 6) drobna redukcja paddingów sekcji na telu, mniej “pustych dziur” */
@media (max-width: 560px){
  .landing-wpwoo section{ padding: 36px 0 !important; }
  .landing-wpwoo section:first-of-type{ padding-top: 28px !important; }
}

/* 7) na wszelki wypadek: obrazki nigdy nie większe niż kontener */
.landing-wpwoo img, .landing-wpwoo .wp-block-image img{
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* 8) FAQ/karty — brak “rozpychania” */
.landing-wpwoo .feature, .landing-wpwoo .step, .landing-wpwoo details{ width: 100%; }/* End custom CSS */