/* =======================================================
   VH.PL REDESIGN — redesign.css
   Ładowany statycznie z priorytetem 999 (po vh.css).
   Inter jest już załadowany przez functions.php.
   ======================================================= */

/* --- Tokeny projektowe --- */
:root {
  --vhr-navy:  #2A304B;
  --vhr-blue:  #0A56AD;
  --vhr-blue-d:#094a96;
  --vhr-bordo: #BF272E;
  --vhr-ink:   #1f2438;
  --vhr-muted: #6b7180;
  --vhr-faint: #9aa0b0;
  --vhr-line:  #edeff4;
  --vhr-line2: #e1e4ec;
  --vhr-bg:    #ffffff;
  --vhr-bg2:   #f7f8fb;
  --vhr-gold:  #C8973B;
  --vhr-r-md:  10px;
  --vhr-r-lg:  16px;
  --vhr-r-xl:  22px;
  --vhr-r-pill:999px;
  --vhr-sh-sm: 0 1px 2px rgba(42,48,75,.04), 0 2px 10px rgba(42,48,75,.05);
  --vhr-sh-md: 0 6px 24px rgba(42,48,75,.07);
  --vhr-sh-lg: 0 14px 44px rgba(42,48,75,.09);
}

/* body: ukrywa poziomy scroll wynikający z panelu za Anią */
body { overflow-x: hidden !important; }

/* Globalne reset box-sizing dla nowych sekcji */
.topbar *, .nav *, .nav-drop *, .nav-mobile * { box-sizing: border-box; }

/* Kontruje vh.css `* { border-radius: 0 !important }` dla naszych klas */
.btn-panel,
.btn-panel:hover           { border-radius: var(--vhr-r-pill) !important; }
.burger                    { border-radius: 12px !important; }
.nav-links > a,
.nav-links > .nav-item > a,
.nav-links > .nav-item > button,
.nav-link-sm,
.nav-discord,
.nav-mobile a              { border-radius: 10px !important; }
.nav-drop                  { border-radius: var(--vhr-r-lg) !important; }
.nav-drop a                { border-radius: var(--vhr-r-md) !important; }
.nav-drop-bottom a         { border-radius: 8px !important; }
.nav-drop-ico              { border-radius: 9px !important; }
.tb-promo .dot             { border-radius: 50% !important; }

/* =======================================================
   1. TOPBAR — social proof + promo
   ======================================================= */
.topbar {
  background: var(--vhr-bg2);
  border-bottom: 1px solid var(--vhr-line);
  font-size: 12.5px;
  font-family: 'Inter', sans-serif;
}
.topbar > .container {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.tb-stats {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.tb-period {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--vhr-faint);
  padding-right: 15px;
  white-space: nowrap;
}
.tb-stat {
  padding: 0 15px;
  border-left: 1px solid var(--vhr-line2);
  color: var(--vhr-muted);
  white-space: nowrap;
}
.tb-stat b { color: var(--vhr-ink); font-weight: 700; }
.tb-promo {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  color: var(--vhr-muted);
}
.tb-promo .dot {
  width: 6px;
  height: 6px;
  background: var(--vhr-bordo);
  flex-shrink: 0;
  display: inline-block;
}
.tb-promo a {
  color: var(--vhr-blue);
  font-weight: 700;
  text-decoration: none;
}
.tb-promo a:hover { text-decoration: underline; }

/* =======================================================
   2. NAV — sticky, glassmorphism
   ======================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
  font-family: 'Inter', sans-serif;
}
.nav.scrolled {
  border-bottom-color: var(--vhr-line);
  box-shadow: 0 6px 22px -16px rgba(31, 36, 56, .22);
}
.nav > .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.nav-wrap {
  display: flex;
  align-items: center;
  height: 72px;
  gap: 10px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  margin-right: 42px;
  flex-shrink: 0;
  text-decoration: none;
}
.logo img { height: 26px; display: block; }

/* Główne linki nav */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.nav-links > a,
.nav-links > .nav-item > a,
.nav-links > .nav-item > button {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--vhr-ink);
  padding: 9px 15px;
  transition: background .15s, color .15s;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.nav-links > a:hover,
.nav-links > .nav-item > a:hover,
.nav-links > .nav-item > button:hover {
  background: rgba(31, 36, 56, .05);
  color: var(--vhr-blue);
}
.nav-links .nav-promo       { color: var(--vhr-bordo); }
.nav-links .nav-promo:hover { color: var(--vhr-bordo); background: rgba(191, 39, 46, .06); }

/* Dropdown */
.nav-item { position: relative; }
.nav-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--vhr-line2);
  box-shadow: var(--vhr-sh-md);
  padding: 8px;
  z-index: 200;
}
.nav-item:hover .nav-drop  { display: block; }
.nav-drop a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background .15s;
  color: var(--vhr-ink);
}
.nav-drop a:hover { background: var(--vhr-bg2); }
.nav-drop-ico {
  width: 36px;
  height: 36px;
  background: rgba(10, 86, 173, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav-drop-ico svg { width: 18px; height: 18px; fill: var(--vhr-blue); }
.nav-drop-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--vhr-ink);
  display: block;
  line-height: 1.3;
}
.nav-drop-desc {
  font-size: 12px;
  color: var(--vhr-muted);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}
.nav-drop-bottom {
  border-top: 1px solid var(--vhr-line);
  margin-top: 6px;
  padding-top: 6px;
  display: flex;
  gap: 4px;
}
.nav-drop-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--vhr-muted);
  padding: 7px 10px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-drop-mini:hover { background: var(--vhr-bg2); color: var(--vhr-blue); }
.nav-drop-mini svg { width: 13px; height: 13px; flex-shrink: 0; }
.nav-chev {
  width: 14px;
  height: 14px;
  transition: transform .2s;
  flex-shrink: 0;
}
.nav-item:hover .nav-chev { transform: rotate(180deg); }

/* Prawa strona nav */
.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-link-sm {
  font-size: 14px;
  font-weight: 500;
  color: var(--vhr-muted);
  padding: 8px 12px;
  transition: color .15s, background .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-link-sm:hover { color: var(--vhr-ink); background: rgba(31, 36, 56, .04); }
.nav-link-sm svg { width: 13px; height: 13px; flex-shrink: 0; }
.nav-sep {
  width: 1px;
  height: 20px;
  background: var(--vhr-line2);
  margin: 0 4px;
  display: inline-block;
}
.nav-discord {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: #5865F2;
  padding: 8px 12px;
  transition: opacity .15s;
  text-decoration: none;
}
.nav-discord:hover { opacity: .75; }
.nav-discord svg { width: 17px; height: 17px; fill: #5865F2; }
.btn-panel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vhr-ink);
  background: #fff;
  border: 1.5px solid var(--vhr-line2) !important;
  padding: 10px 18px;
  transition: border-color .15s;
  cursor: pointer;
  text-decoration: none;
}
.btn-panel:hover { border-color: var(--vhr-navy) !important; color: var(--vhr-ink); }
.btn-panel svg { width: 15px; height: 15px; fill: currentColor; }

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vhr-line2) !important;
  background: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.burger svg {
  width: 22px;
  height: 22px;
  stroke: var(--vhr-ink);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

/* Menu mobilne */
.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 10px 0 16px;
  border-top: 1px solid var(--vhr-line);
}
.nav-mobile.open { display: flex !important; }
.nav-mobile a {
  padding: 11px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vhr-ink);
  transition: all .15s;
  text-decoration: none;
  display: block;
}
.nav-mobile a:hover { background: var(--vhr-bg2); color: var(--vhr-blue); }
.nav-mobile a.nm-sub { font-size: 14px; font-weight: 500; color: var(--vhr-muted); }
.nav-mobile a.nm-discord { color: #5865F2; }
.nm-sep { height: 1px; background: var(--vhr-line); margin: 8px 0; }
.nav-mobile .btn-panel {
  display: flex !important;
  margin-top: 12px;
  justify-content: center;
  width: 100%;
}

/* =======================================================
   Responsive
   ======================================================= */
@media (max-width: 980px) {
  .nav-links   { display: none !important; }
  .nav-link-sm { display: none !important; }
  .nav-discord { display: none !important; }
  .btn-panel   { display: none !important; }
  .tb-period   { display: none; }
  .burger      { display: flex !important; }
}
@media (max-width: 820px) {
  .tb-stats { display: none; }
  .topbar > .container { justify-content: center; }
}
@media (max-width: 560px) {
  .topbar { display: none; }
}

/* =======================================================
   3. DOMAIN SEARCH BAND
   ======================================================= */
.dsearch {
  padding: 20px 0 4px;
  font-family: 'Inter', sans-serif;
}
.dsearch > .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Border-radius overrides dla ds-* */
.ds-field           { border-radius: var(--vhr-r-pill) !important; }
.ds-btn             { border-radius: var(--vhr-r-pill) !important; }
.ds-toggle          { border-radius: var(--vhr-r-pill) !important; }
.ds-tab             { border-radius: var(--vhr-r-pill) !important; }
.ds-tab.active      { border-radius: var(--vhr-r-pill) !important; }
.ds-tld             { border-radius: var(--vhr-r-pill) !important; }

/* Przełącznik zakładek */
.ds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--vhr-bg2);
  border: 1px solid var(--vhr-line) !important;
}
.ds-tab {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vhr-muted);
  background: transparent;
  padding: 8px 18px;
  transition: all .15s;
}
.ds-tab:hover:not(.active) { color: var(--vhr-ink); }
.ds-tab.active {
  color: var(--vhr-ink);
  background: #fff;
  box-shadow: var(--vhr-sh-sm);
}

/* Wiersz: pole + ceny */
.ds-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

/* Pole wyszukiwania (też <form>) */
.ds-field {
  flex: 0 0 58%;
  max-width: 58%;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 6px 6px 6px 22px;
  background: #fff;
  border: 1px solid var(--vhr-line2) !important;
  box-shadow: var(--vhr-sh-sm);
  transition: border-color .2s, box-shadow .2s;
}
.ds-field:focus-within {
  border-color: var(--vhr-blue) !important;
  box-shadow: 0 0 0 3px rgba(10, 86, 173, .10);
}
.ds-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--vhr-ink);
  min-width: 0;
  padding-right: 12px;
}
.ds-field input::placeholder { color: var(--vhr-faint); }

/* Przycisk szukaj */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--vhr-blue);
  height: 42px;
  padding: 0 22px;
  transition: background .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-btn:hover { background: var(--vhr-blue-d); }
.ds-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  display: block;
  flex-shrink: 0;
}

/* Panel cen */
.ds-prices {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ds-plabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vhr-faint);
  display: block;
}
.ds-tlds {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.ds-tld {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: opacity .15s;
}
.ds-tld:hover { opacity: .75; }
.ds-tld b {
  font-size: 14px;
  font-weight: 700;
  color: var(--vhr-ink);
}
.ds-tld .ds-tld-price {
  font-size: 12.5px;
  color: var(--vhr-muted);
}

/* Notka masowy transfer */
.ds-note {
  font-size: 13px;
  color: var(--vhr-muted);
  margin-top: 14px;
  margin-bottom: 0;
}
.ds-note a {
  color: var(--vhr-blue);
  font-weight: 600;
  text-decoration: none;
}
.ds-note a:hover { text-decoration: underline; }

/* Spinner w przycisku szukaj */
@keyframes vhr-spin { to { transform: rotate(360deg); } }
.spin-ico { animation: vhr-spin .7s linear infinite; }

@media (max-width: 980px) {
  .ds-row { flex-wrap: wrap; gap: 16px; }
  .ds-field { flex-basis: 100%; max-width: 100%; }
  .ds-prices { width: 100%; }
  .ds-tlds { overflow-x: auto; }
}
@media (max-width: 560px) {
  .ds-prices { display: none; }
}

/* =======================================================
   3. HERO Z ANIĄ
   ======================================================= */

/* Box-sizing */
.hero *, .hero *::before, .hero *::after { box-sizing: border-box; }

/* Border-radius overrides (kontruje * { border-radius:0!important } z vh.css) */
.hero .feat .ck { border-radius: 50% !important; }
.fcard          { border-radius: 14px !important; }
.namecard       { border-radius: 14px !important; }
.fcard .ic      { border-radius: 10px !important; }
.hero-bg        { border-radius: 36px 0 0 36px !important; }
.buy-btn        { border-radius: 12px !important; }

/* Sekcja */
.hero {
  background: var(--vhr-bg);
  font-family: 'Inter', sans-serif;
  padding: 0 !important;
}

/* Grid 2-kolumnowy */
.hero-inner {
  display: grid !important;
  grid-template-columns: 1.04fr .96fr;
  gap: 40px;
  align-items: center;
  padding: 30px 0 50px;
  min-height: 500px;
}

/* ---- LEWA KOLUMNA ---- */
.hero-l {
  display: flex;
  flex-direction: column;
}

h1.title {
  font-size: clamp(29px, 3.4vw, 43px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.022em !important;
  color: var(--vhr-ink) !important;
  font-weight: 600 !important;
  margin: 0 0 18px !important;
}
.hero .title span { display: block; }

.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--vhr-muted);
  max-width: 480px;
  margin: 0 0 26px;
}
.lead b { color: var(--vhr-ink); font-weight: 600; }

/* Feature list (scoped do .hero — unika konfliktu z sekcją features) */
.hero .feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.hero .feat {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--vhr-ink);
  font-weight: 500;
}
.hero .feat .ck {
  width: 22px;
  height: 22px;
  background: rgba(10, 86, 173, .09);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hero .feat .ck svg {
  width: 13px;
  height: 13px;
  fill: var(--vhr-blue);
  display: block;
}
.hero .feat .info {
  width: 15px;
  height: 15px;
  stroke: var(--vhr-faint);
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Blok cenowy */
.buy { margin: 2px 0 18px; }
.buy-label { font-size: 13.5px; color: var(--vhr-muted); font-weight: 500; margin-bottom: 7px; }
.buy-price { display: flex; align-items: baseline; gap: 6px; }
.buy-amt   { font-size: 36px; font-weight: 800; color: var(--vhr-ink); line-height: 1; letter-spacing: -.02em; }
.buy-per   { font-size: 16px; font-weight: 600; color: var(--vhr-muted); }
.buy-note  { font-size: 13px; color: var(--vhr-faint); margin-top: 7px; }
.buy-actions { display: flex; align-items: center; gap: 20px; margin-top: 18px; flex-wrap: wrap; }

.buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
  background: var(--vhr-blue);
  padding: 15px 44px;
  transition: background .15s;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.buy-btn:hover { background: var(--vhr-blue-d); color: #fff !important; }

.buy-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--vhr-blue);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none !important;
}
.buy-alt:hover { text-decoration: underline !important; color: var(--vhr-blue-d); }
.buy-alt svg { width: 13px; height: 13px; fill: currentColor; }

/* Gwarancja */
.guarantee { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--vhr-muted); flex-wrap: wrap; }
.guarantee span { display: flex; align-items: center; gap: 7px; }
.guarantee svg { width: 15px; height: 15px; fill: var(--vhr-blue); flex-shrink: 0; }

/* ---- PRAWA KOLUMNA ---- */
.hero-r {
  position: relative;
  align-self: stretch;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  z-index: 0;
  top: -16px;
  bottom: -16px;
  left: 0;
  right: -1000px;
  background: #eef2f8;
}

.ania {
  position: relative;
  z-index: 2;
  height: 520px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(31, 36, 56, .18));
  display: block;
}

.namecard {
  position: absolute;
  z-index: 3;
  left: 4%;
  bottom: 30px;
  background: var(--vhr-navy);
  color: #fff;
  padding: 11px 16px;
  box-shadow: var(--vhr-sh-md);
}
.namecard .n { font-size: 14px; font-weight: 700; }
.namecard .t { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 1px; }

.fcard {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--vhr-line) !important;
  padding: 12px 15px;
  box-shadow: var(--vhr-sh-md);
}
.fcard.c1 { top: 4%;    right: -2%; }
.fcard.c2 { top: 40%;   right: -5%; }
.fcard.c3 { bottom: 16%; right: 0;  }

.fcard .ic {
  width: 34px;
  height: 34px;
  background: rgba(10, 86, 173, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fcard .ic svg { width: 18px; height: 18px; fill: var(--vhr-blue); display: block; }
.fcard .gic    { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.fcard .big    { font-size: 16px; font-weight: 700; color: var(--vhr-ink); line-height: 1.05; letter-spacing: -.01em; }
.fcard .sm     { font-size: 11px; color: var(--vhr-muted); margin-top: 2px; }
.fcard.c3 .gst { display: inline-flex; gap: 1px; margin-top: 3px; }
.fcard.c3 .star { width: 14px; height: 14px; fill: var(--vhr-gold); flex-shrink: 0; }

/* ---- RESPONSIVE ---- */
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding: 26px 0 36px;
    min-height: auto;
  }
  .hero-r    { order: -1; min-height: 400px; align-items: center; margin-bottom: 8px; }
  .ania      { height: 400px; }
  .hero-bg   { border-radius: 28px 0 0 28px !important; }
}
@media (max-width: 560px) {
  .hero-r    { min-height: 330px; }
  .ania      { height: 330px; }
  .fcard.c2  { display: none; }
  .buy-btn   { width: 100%; justify-content: center; padding: 15px 20px; }
}

/* =======================================================
   5. SOCIAL PROOF BAR
   ======================================================= */
.social {
  border-top: 1px solid var(--vhr-line);
  background: var(--vhr-bg2);
  font-family: 'Inter', sans-serif;
}
.social .container {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 18px 32px;
  flex-wrap: wrap;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.social .sitem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 30px;
  border-right: 1px solid var(--vhr-line2);
  font-size: 14px;
  color: var(--vhr-muted);
}
.social .sitem:last-child { border-right: none; }
.social .sitem b {
  font-weight: 800;
  color: var(--vhr-ink);
}
.social .g {
  height: 19px;
  width: auto;
}
.social .ck {
  fill: var(--vhr-blue);
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .social .container { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .social .sitem { border-right: none; padding: 4px 0; width: 100%; }
}

/* =======================================================
   ALIASY TOKENÓW — mapuje nazwy z plików CMS-CSS na --vhr-*
   (redesign-hero-cms.css używa var(--ink) itd.)
   ======================================================= */
:root {
  --ink:    var(--vhr-ink);
  --muted:  var(--vhr-muted);
  --faint:  var(--vhr-faint);
  --blue:   var(--vhr-blue);
  --blue-d: var(--vhr-blue-d);
  --navy:   var(--vhr-navy);
  --gold:   var(--vhr-gold);
  --line:   var(--vhr-line);
}

/* ============================================================
   HERO — stylowanie treści z CMS (bez przepisywania contentu)
   ------------------------------------------------------------
   Treść lewej kolumny (h1, linia rankingu, lista zalet, przycisk
   koszyka, nota o cenie) jest wpisywana w CMS i renderowana w
   .hero-l. Tu jej NIE zmieniamy — tylko ubieramy generyczny
   markup pod wygląd z preview. Strukturę (.container / .hero-inner
   / .hero-r / Ania / karty / .social) daje szablon PHP.

   Dopasowane do realnego markupu CMS:
     <h1 class="w-full" style="...">…❤️</h1>
     <p>#1 w rankingu jakwybrachosting.pl</p>        (linia rankingu)
     <ul class="mb-12"><li><strong>…</strong> …</li></ul>
     <a class="button-green" data-add-to-cart …>Zamów teraz</a>
     <p style="color:gray"><strong>Tylko 49,0 zł netto</strong> …</p>

   ⚠ JEŚLI treść CMS ląduje w innym wrapperze niż .hero-l,
     podmień prefiks ".hero-l" na właściwy wrapper.
   ============================================================ */

/* --- 1. wyśrodkowanie + grid (gdy motyw narzuca pełną szerokość) --- */
.hero .container{max-width:1200px;margin:0 auto;padding:0 32px;}
.hero-inner{display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;}
body{overflow-x:hidden;}              /* panel Ani bleeduje w prawo */
.hero-l{align-self:center;min-width:0;}  /* min-width:0 = nie rozpycha gridu */

/* --- 2. nagłówek z CMS -> jak .title ---
   ⚠ DOPÓKI w CMS h1 ma inline style="font-size:..!important",
     ta reguła NIE zadziała (inline !important bije arkusz).
     Usuń inline-style z h1 w treści CMS — zostaw samo <h1 class="w-full">. */
.hero-l h1{font-size:clamp(29px,3.4vw,43px);line-height:1.1;letter-spacing:-.022em;
  color:var(--ink);font-weight:600;margin:0 0 14px;padding:0;}

/* --- 3. akapity ogólne (domyślnie: nota / tekst) --- */
.hero-l p{font-size:15px;line-height:1.6;color:var(--muted)!important;max-width:480px;margin:0 0 16px;}
.hero-l p strong{color:var(--ink)!important;font-weight:700;}

/* 3a. pierwszy akapit po h1 = linia rankingu -> mały eyebrow */
.hero-l h1 + p{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--blue)!important;
  margin:-4px 0 18px;}
.hero-l h1 + p strong{color:var(--blue)!important;}

/* 3b. szara nota o cenie (ostatni akapit z inline color:gray) -> mała, faint */
.hero-l p[style*="gray"]{font-size:13px;color:var(--faint)!important;margin:14px 0 0;}
.hero-l p[style*="gray"] strong{color:var(--ink)!important;}

/* --- 4. lista zalet z CMS -> jak .feat-list, z niebieskim ptaszkiem --- */
.hero-l ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:13px;}
.hero-l ul li{position:relative;padding-left:34px;font-size:15px;line-height:1.45;color:var(--ink);}
.hero-l ul li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:rgba(10,86,173,.09)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230A56AD'><path d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>")
    center / 13px 13px no-repeat;}
.hero-l ul li strong{font-weight:700;color:var(--ink);}

/* --- 5. przycisk koszyka (.button-green) -> jak .buy-btn ---
   ZACHOWUJE data-add-to-cart / data-item-id / data-price (to tylko CSS,
   atrybuty zostają nietknięte). Neutralizuje stary zielony styl. */
.hero-l a.button-green{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue)!important;color:#fff!important;border:0!important;box-shadow:none!important;
  font-size:16px;font-weight:700;padding:15px 40px;border-radius:12px!important;
  text-decoration:none;transition:background .15s;}
.hero-l a.button-green:hover{background:var(--blue-d)!important;}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:1024px){
  .hero-inner{gap:28px;}
}
@media (max-width:768px){
  .hero .container{padding:0 18px;}
  .hero-inner{grid-template-columns:1fr;gap:8px;}   /* hero-r pod treścią */
  .hero-l h1{font-size:clamp(27px,7vw,34px);}
  .hero-l p,.hero-l ul{max-width:none;}
  .hero-l a.button-green{width:100%;}
}

/* ============================================================
   POPRAWKI HERO / SOCIAL / DOMAIN SEARCH  (append do redesign.css)
   append-only — nic nie kasujesz
   ============================================================ */

/* --- 1. LEAD pod h1 nie ma być niebieski ---
   Po usunięciu linii „#1 w rankingu" lead stał się pierwszym <p>
   po h1 i złapał styl eyebrow. Neutralizujemy z powrotem na szary. */
.hero-l h1 + p{font-size:15px!important;font-weight:400!important;
  letter-spacing:0!important;color:var(--muted)!important;margin:0 0 18px!important;}
.hero-l h1 + p strong{color:var(--ink)!important;font-weight:700!important;}

/* --- 2. UKRYJ „Masz dużo domen? Wykonaj masowy transfer →" na home --- */
#dssNote{display:none!important;}

/* --- 3. SOCIAL BAR — kompaktowa wysokość + równe dzielniki ---
   Powód „strasznej wysokości": border-right rozciągał się na całą
   wysokość itemu, a motyw dokładał padding do .container. Tu:
   stały, wyśrodkowany dzielnik 16px + twardy, niski padding. */
.social{position:relative;z-index:3;background:var(--bg-2)!important;
  border-top:1px solid var(--line);}
.social .container{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0;padding:13px 32px!important;min-height:0!important;}
.social .sitem{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:2px 30px;font-size:14px;line-height:1.2;color:var(--muted);border:0!important;}
.social .sitem::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:1px;height:16px;background:var(--line-2);}
.social .sitem:last-child::after{display:none;}
.social .sitem b{font-weight:800;color:var(--ink);}
.social .g{height:19px;width:auto;display:inline-block;}
.social .ck{fill:var(--blue);width:17px;height:17px;flex:none;}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */
@media (max-width:768px){
  .social .container{justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;padding:11px 18px!important;}
  .social .sitem{padding:2px 18px;white-space:nowrap;}
  .social .sitem:first-child{padding-left:0;}
}

/* ============================================================
   POPRAWKI v2 — dopisz na koniec redesign.css (po v1)
   Nadpisuje problematyczne reguły z v1: pigułkę TLD i social bar.
   Używa twardych kolorów (nie zmiennych) — działa nawet gdy
   tokeny --bg-2/--line-2/--blue nie są zdefiniowane na serwerze.
   ============================================================ */

/* --- PIGUŁKA .PL — wracamy na klasę .ds-tld.hl (jak w preview) ---
   W PHP cofnij rename: button ma być class="ds-tld" (a .pl: "ds-tld hl").
   vh.css ma *{border-radius:0!important} -> radius MUSI być !important. */
.ds-tld.hl{background:rgba(10,86,173,.07)!important;
  border-radius:999px!important;padding:4px 13px!important;}
.ds-tld.hl b,
.ds-tld.hl span{color:#0A56AD!important;}   /* niebieski tekst pigułki */

/* domknięcie wrapu — żeby .net nie spadał do drugiego rzędu */
.ds-tlds{gap:16px!important;flex-wrap:wrap;}

/* --- SOCIAL BAR — twarde kolory + przywrócone dzielniki --- */
.social{position:relative;z-index:3;
  background:#f7f8fb!important;            /* było białe przez brak --bg-2 */
  border-top:1px solid #edeff4!important;}
.social .container{display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:0;padding:13px 32px!important;min-height:0!important;}
.social .sitem{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:2px 30px;font-size:14px;line-height:1.2;color:#6b7180;border:0!important;}
.social .sitem::after{content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);width:1px;height:16px;
  background:#e1e4ec!important;}           /* dzielnik — wrócił */
.social .sitem:last-child::after{display:none;}
.social .sitem b{font-weight:800;color:#1f2438!important;}
.social .g{height:19px;width:auto;display:inline-block;flex:none;}
.social .ck{fill:#0A56AD!important;width:17px;height:17px;flex:none;}

@media (max-width:768px){
  .social .container{justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;padding:11px 18px!important;}
  .social .sitem{padding:2px 18px;white-space:nowrap;}
  .social .sitem:first-child{padding-left:0;}
}

/* ============================================================
   POPRAWKI v3 — dopisz na koniec redesign.css (po v2)
   a) focus/hover pola wyszukiwarki domen
   b) social bar: rozmiar ikon + wysokość
   ============================================================ */

/* --- a) POLE WYSZUKIWARKI (.dss-bar / #dssInput) ---
   Kasujemy kanciasty outline inputu, dajemy zaokrąglony ring na polu. */
#dssInput,
#dssInput:focus,
#dssInput:focus-visible{
  outline:0!important;box-shadow:none!important;border:0!important;
  background:transparent!important;}
.dss-bar{transition:border-color .18s ease,box-shadow .18s ease;}
.dss-bar:hover{border-color:#c7ccd8!important;}
.dss-bar:focus-within{
  border-color:#0A56AD!important;
  box-shadow:0 0 0 3px rgba(10,86,173,.12)!important;
  border-radius:999px!important;}      /* ring podąża za zaokrągleniem (vh.css zeruje radius) */

/* --- b) SOCIAL BAR — ikony i wysokość ---
   Sztywny rozmiar KAŻDEGO svg w belce: naprawia „biały prostokąt",
   brak ptaszka przy migracji ORAZ rozpychanie wysokości. */
.social svg,
.social .ck,
.social .g{
  width:17px!important;height:17px!important;
  flex:none!important;fill:#0A56AD!important;}
.social .g{height:19px!important;width:auto!important;}   /* logo Google ma proporcje */

/* dobij wysokość i utnij ewentualny obcy element rozpychający belkę */
.social{position:relative;z-index:5!important;}
.social .container{padding:12px 32px!important;min-height:0!important;}
.social .container > *:not(.sitem){display:none!important;}
/* ============================================================
   SZEROKOŚĆ GLOBALNA — ujednolicenie kontenerów na 1340px
   dopisz na koniec redesign/redesign.css
   ============================================================ */
.container,
.nav .container,
.topbar .container,
.dsearch .container,
.hero .container,
.social .container,
.pricing .container{
  max-width:1340px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
 
/* panel Ani w hero bleeduje w prawo — przy szerszym kontenerze
   upewniamy się, że nie powoduje poziomego scrolla */
body{overflow-x:hidden;}
 
@media (max-width:1400px){
  .container,.nav .container,.topbar .container,.dsearch .container,
  .hero .container,.social .container,.pricing .container{
    padding-left:32px!important;padding-right:32px!important;}
}
@media (max-width:768px){
  .container,.nav .container,.topbar .container,.dsearch .container,
  .hero .container,.social .container,.pricing .container{
    padding-left:18px!important;padding-right:18px!important;}
}

/* topbar promo z CMS — krótszy tekst na mobile */
.tb-promo-desktop{display:inline;}
.tb-promo-mobile{display:none;}
@media (max-width:768px){
  .tb-promo-desktop{display:none;}
  .tb-promo-mobile{display:inline;}
}
/* ============================================================
   CENNIK (section-minitable) — komplet CSS
   dopisz na koniec redesign/redesign.css
   Self-contained: zawiera tokeny :root (na wypadek, gdyby nie
   były zdefiniowane wyżej — :root się scala, nic nie psuje).
   ============================================================ */
:root{
  --navy:#2A304B; --blue:#0A56AD; --blue-d:#094a96; --bordo:#BF272E;
  --muted:#6b7180; --faint:#9aa0b0; --line:#edeff4; --line-2:#e1e4ec; --bg-2:#f7f8fb;
  --ink:#1f2438; --gold:#C8973B; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(42,48,75,.04),0 2px 10px rgba(42,48,75,.05);
  --sh-md:0 6px 24px rgba(42,48,75,.07);
  --sh-lg:0 14px 44px rgba(42,48,75,.09);
}

/* szerokość spójna z resztą (1340) */
.pricing .container,
section[id] .plans{max-width:1340px;margin-left:auto;margin-right:auto;}

/* vh.css ma *{border-radius:0!important} — wymuszamy zaokrąglenia */
.plan,.plan-cta,.plan-save,.pricing-eyebrow,.ft-wp,.tg,.tg::after,.ft-check{border-radius:inherit;}

.pricing{background:var(--bg-2);padding:64px 0 86px;}
.pricing-head{text-align:center;max-width:720px;margin:0 auto;}
.pricing-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(10,86,173,.07);padding:7px 15px;border-radius:var(--r-pill);margin-bottom:18px;}
.pricing-head h2{font-size:30px;font-weight:600;letter-spacing:-.3px;color:var(--navy);margin:0 0 12px;line-height:1.2;}
.pricing-head p{font-size:15px;color:var(--muted);line-height:1.6;margin:0;}
.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin:26px 0 0;font-size:13.5px;color:var(--muted);}
.tg{position:relative;width:44px;height:24px;border-radius:var(--r-pill);background:#cbd5e1;border:none;cursor:pointer;transition:background .2s;flex-shrink:0;}
.tg.on{background:var(--blue);}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.tg.on::after{left:23px;}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;align-items:start;}
.plan{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:18px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.plan:hover{box-shadow:var(--sh-md);}
.plan.featured{border:1.5px solid var(--blue);box-shadow:var(--sh-md);}
/* górny pasek (równa wysokość na każdej karcie → ceny w jednej linii) */
.plan-flag{min-height:36px;border-radius:18px 18px 0 0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:transparent;}
.plan.featured .plan-flag{background:var(--navy);color:#fff;}
.plan-body{padding:6px 26px 28px;display:flex;flex-direction:column;flex:1;}
.plan-name{font-size:22px;font-weight:800;color:var(--navy);}
.plan-tag{font-size:13px;color:var(--muted);line-height:1.5;margin-top:6px;min-height:40px;}
.plan-price{display:flex;align-items:baseline;gap:5px;margin-top:18px;}
.plan-amount{font-size:42px;font-weight:800;color:var(--navy);letter-spacing:-1.5px;line-height:1;}
.plan-cur{font-size:18px;font-weight:700;color:var(--navy);}
.plan-per{font-size:13px;color:var(--muted);align-self:flex-end;margin-bottom:5px;}
.plan-renew{font-size:12.5px;color:var(--muted);margin-top:9px;}
.plan-renew b{color:var(--bordo);font-weight:700;}
.plan-cta{display:flex;align-items:center;justify-content:center;width:100%;padding:14px;margin-top:22px;border-radius:10px;font-size:14.5px;font-weight:700;cursor:pointer;transition:all .15s;border:1.5px solid var(--blue);color:var(--blue);background:#fff;}
.plan-cta:hover{background:rgba(10,86,173,.06);}
.plan.featured .plan-cta{background:var(--blue);color:#fff;}
.plan.featured .plan-cta:hover{background:var(--blue-d);}
.plan-note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:11px;}
.plan-feats{list-style:none;padding:22px 0 0;margin:24px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:14px;}
.plan-feats li{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.plan-feats li.ft-title{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:2px;}
.ft-l{display:flex;flex-direction:column;gap:2px;min-width:0;}
.ft-name{font-size:13px;color:var(--muted);font-weight:500;line-height:1.3;}
.ft-sub{font-size:10.5px;color:var(--faint);line-height:1.3;}
.ft-val{font-size:13px;font-weight:700;color:var(--navy);text-align:right;white-space:nowrap;flex-shrink:0;}
.ft-check svg{width:18px;height:18px;fill:var(--blue);display:block;}
/* blok "Swietny pod WordPress" */
.plan-feats li.ft-wp{display:block;background:#eef4fd;border:1px solid #d8e6fa;border-radius:12px;padding:13px 15px;margin:0 0 2px;}
.ft-wp-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:9px;}
.ft-wp-head svg{width:16px;height:16px;fill:var(--navy);flex-shrink:0;}
.ft-wp ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;}
.ft-wp ul li{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--muted);font-weight:500;line-height:1.35;justify-content:flex-start;}
.ft-wp ul li svg{width:14px;height:14px;fill:var(--blue);flex-shrink:0;margin-top:1px;}
.ft-wp ul li b{color:var(--navy);font-weight:700;}
/* tooltipy na terminach technicznych */
.ft-name.has-tip{position:relative;border-bottom:1px dotted var(--line-2);cursor:help;}
.ft-name.has-tip::after{content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 10px);width:max-content;max-width:230px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;text-align:left;padding:9px 11px;border-radius:9px;box-shadow:var(--sh-md);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:60;pointer-events:none;}
.ft-name.has-tip::before{content:'';position:absolute;left:16px;bottom:calc(100% + 5px);border:5px solid transparent;border-top-color:var(--navy);opacity:0;visibility:hidden;transition:opacity .15s;z-index:60;}
.ft-name.has-tip:hover::after,.ft-name.has-tip.tip-open::after,.ft-name.has-tip:hover::before,.ft-name.has-tip.tip-open::before{opacity:1;visibility:visible;transform:translateY(0);}

/* === wizualizacja promocji === */
.plan-promo{display:flex;align-items:center;gap:10px;margin-top:7px;}
.plan-old{font-size:15px;font-weight:600;color:var(--faint);text-decoration:line-through;text-decoration-color:var(--bordo);text-decoration-thickness:1.5px;}
.plan-save{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--bordo);background:rgba(191,39,46,.08);padding:3px 9px;border-radius:var(--r-pill);}


@media (max-width:1024px){ .plans{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ .plans{grid-template-columns:1fr;} .pricing-head h2{font-size:25px;} }

/* twarde zaokrąglenia (przebijają vh.css) */
.plan{border-radius:18px!important;}
.plan-cta{border-radius:12px!important;}
.plan-save{border-radius:999px!important;}
.pricing-eyebrow{border-radius:999px!important;}
.ft-wp{border-radius:12px!important;}
.tg{border-radius:999px!important;} .tg::after{border-radius:50%!important;}
.ft-check{border-radius:50%!important;}

/* przycisk koszyka: <button-component classname="plan-cta"> renderuje element
   z klasą .plan-cta — stylujemy go jak CTA z podglądu */
.plan-cta{display:flex;align-items:center;justify-content:center;width:100%;
  background:var(--blue);color:#fff;border:0;font-size:15px;font-weight:700;
  padding:13px 20px;text-decoration:none;cursor:pointer;transition:background .15s;}
.plan-cta:hover{background:var(--blue-d);color:#fff;}
.plan:not(.featured) .plan-cta{background:#fff;color:var(--blue);border:1.5px solid var(--line-2);}
.plan:not(.featured) .plan-cta:hover{border-color:var(--blue);background:#fff;}

/* elementy spoza podglądu (z CMS): badge dodatkowy_opis / trial, ikony wartości */
.plan-extra,.plan-trial{display:inline-block;font-size:11px;font-weight:700;
  color:var(--bordo);background:rgba(191,39,46,.08);padding:4px 10px;
  border-radius:999px!important;margin:8px 6px 0 0;}
.plan-trial{color:var(--blue);background:rgba(10,86,173,.08);}
.plan-cta-wrap{margin:16px 0 4px;}
.ft-val img,.ft-val svg{width:18px;height:18px;vertical-align:middle;display:inline-block;}
.plan-flag.plan-flag--empty{visibility:hidden;}
/* ============================================================
   CENNIK — POPRAWKI GÓRY (nagłówek + badge)
   dopisz na koniec redesign/redesign.css
   SCOPE: wszystko pod .pricing-redesign (klasa dodana na <section>)
   ============================================================ */
 
/* tło sekcji jak w projekcie (jasnoszare) */
.pricing-redesign{background:#f7f8fb!important;padding-top:56px!important;padding-bottom:72px!important;}
 
/* --- NAGŁÓWEK z CMS --- */
/* eyebrow „Dla CIEBIE, dla FIRMY" (.label-primary) -> niebieska pigułka */
.pricing-redesign .label-primary{
  background:rgba(10,86,173,.07)!important;color:#0A56AD!important;border:0!important;
  font-size:11px!important;font-weight:700!important;letter-spacing:.12em!important;
  text-transform:uppercase!important;padding:7px 15px!important;border-radius:999px!important;}
 
/* tytuł z wysiwyg -> mniejszy, granatowy, wyśrodkowany */
.pricing-redesign .wp-page h1,
.pricing-redesign .wp-page h2{
  font-size:32px!important;line-height:1.2!important;font-weight:600!important;
  color:#2A304B!important;letter-spacing:-.3px!important;text-align:center!important;
  margin:0 auto 14px!important;max-width:780px!important;}
.pricing-redesign .wp-page p{
  color:#6b7180!important;font-size:15px!important;line-height:1.65!important;
  text-align:center!important;max-width:780px!important;margin:0 auto!important;}
/* intro: zdejmij md:text-left, wyśrodkuj */
.pricing-redesign .wp-page .flex-1{text-align:center!important;}
 
/* --- KARTY: trial / dodatkowy_opis = małe pigułki, nie pełne paski --- */
.pricing-redesign .plan-extra,
.pricing-redesign .plan-trial{
  align-self:flex-start!important;width:auto!important;max-width:max-content!important;}
 
/* pewny akcent karty „polecanej" (gdy CMS ustawi polecany==1) */
.pricing-redesign .plan.featured{border:1.5px solid #0A56AD!important;}
 /* ============================================================
   CENNIK — POPRAWKI 2 (gap siatki, przełącznik, pigułki w rzędzie)
   dopisz na koniec redesign/redesign.css. Scope: .pricing-redesign
   ============================================================ */
 
/* --- 1. ODSTĘPY MIĘDZY KARTAMI ---
   Siatka ma Tailwindowe lg:gap-0 i NIE ma klasy .plans — celujemy
   w realny grid po atrybucie klasy (grid-cols-4). */
.pricing-redesign [class*="grid-cols-4"]{
  gap:18px!important;
  column-gap:18px!important;
  row-gap:18px!important;
  align-items:start!important;}
 
/* karta „polecana": wyrównaj górę do pozostałych (bez podbicia) */
.pricing-redesign .plan.featured{margin-top:0!important;}
 
/* --- 2. PRZEŁĄCZNIK „Pokaż ceny brutto" -> wyśrodkowany pod nagłówkiem ---
   Wiersz przełącznika to div zawierający #nettoPrice. */
.pricing-redesign div:has(> #nettoPrice){
  justify-content:center!important;
  margin:6px 0 4px!important;}
 
/* --- 3. DWIE PIGUŁKI W JEDNEJ LINII ---
   wymaga owinięcia obu badge w <div class="plan-badges"> (patrz prompt) */
.pricing-redesign .plan-badges{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px;}
.pricing-redesign .plan-badges .plan-extra,
.pricing-redesign .plan-badges .plan-trial{margin:0!important;align-self:auto!important;}
 
/* dwa kolory pigułek: extra = bordo, trial = niebieski */
.pricing-redesign .plan-extra{color:#BF272E!important;background:rgba(191,39,46,.08)!important;}
.pricing-redesign .plan-trial{color:#0A56AD!important;background:rgba(10,86,173,.08)!important;}
 /* ============================================================
   CENNIK — POPRAWKI 3 (plakietka „polecany" + przełącznik)
   dopisz na koniec redesign/redesign.css. Scope: .pricing-redesign
   Powód: vh.css ma *{border-radius:0!important} -> radius z !important
   ============================================================ */
 
/* --- plakietka „NAJCZĘŚCIEJ WYBIERANY": zaokrąglona góra, granat --- */
.pricing-redesign .plan-flag{
  border-radius:18px 18px 0 0!important;
  min-height:34px!important;
  letter-spacing:.1em!important;}
.pricing-redesign .plan.featured .plan-flag{
  background:#2A304B!important;color:#fff!important;}
/* żeby górne rogi plakietki idealnie kryły się z ramką karty */
.pricing-redesign .plan.featured{overflow:visible!important;}
 
/* --- przełącznik netto/brutto: okrągły pill + okrągła gałka --- */
.pricing-redesign [role="switch"]{border-radius:999px!important;}
.pricing-redesign [role="switch"] > span{border-radius:50%!important;}
 
/* (gdy są też przyciski Basic/Pro) — zaokrąglony kontener przełącznika */
.pricing-redesign .bg-gray-100{border-radius:999px!important;}
.social{display:none!important;}
/* ============================================================
   SEKCJA „DLACZEGO VH.PL" (section-iconBoxes) — komplet CSS
   dopisz na koniec redesign/redesign.css
   Scope: .features  (żeby .feat nie kolidowało z hero)
   vh.css zeruje radius -> zaokrąglenia z !important
   ============================================================ */
.features{background:#fff;padding:72px 0 80px;}
.features .container{max-width:1340px;margin:0 auto;padding:0 32px;}

/* nagłówek */
.features-head{text-align:center;max-width:680px;margin:0 auto 56px;}
.features-head .pricing-eyebrow{margin-bottom:16px;}
.features-head h2{font-size:30px!important;font-weight:600!important;letter-spacing:-.3px;
  color:#2A304B!important;margin:0 0 12px!important;line-height:1.2!important;text-align:center!important;}
.features-head p{font-size:15px!important;color:#6b7180!important;line-height:1.6!important;
  margin:0!important;text-align:center!important;}

/* układ: 6 cech (lewo) + 2 boksy (prawo) */
.features-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:44px;align-items:stretch;}
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 44px;align-content:space-between;}

/* pojedyncza cecha z CMS */
.features .feat{display:flex;gap:18px;align-items:flex-start;}
.features .feat-ico{width:48px;height:48px;border-radius:12px!important;background:#fff;
  border:1px solid #edeff4;box-shadow:0 1px 2px rgba(42,48,75,.04),0 2px 10px rgba(42,48,75,.05);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.features .feat-ico svg{width:24px!important;height:24px!important;fill:#0A56AD;}
.features .feat-body h3{font-size:17px;font-weight:600;color:#2A304B;margin:4px 0 8px;}
.features .feat-body p{font-size:14px;color:#6b7180;line-height:1.6;margin:0;}

/* prawa kolumna — 2 boksy na sztywno */
.features-side{display:flex;flex-direction:column;gap:22px;}
.features .side-card{border-radius:20px!important;padding:28px;display:flex;flex-direction:column;
  justify-content:center;border:1px solid #edeff4;}
.features .side-card.wp{flex:1.7;background:#e1ebfc;border-color:#cfe0f7;}
.features .side-card.dev{flex:1;background:#edeef4;border-color:#e0e3ed;}
.features .side-logo{margin-bottom:16px;}
.features .side-logo svg{width:46px;height:46px;fill:#2A304B;}
.features .side-ico{width:44px;height:44px;border-radius:11px!important;background:#fff;
  border:1px solid #edeff4;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.features .side-ico svg{width:22px;height:22px;fill:none;stroke:#0A56AD;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.features .side-card h3{font-size:19px;font-weight:700;color:#2A304B;margin:0 0 8px;}
.features .side-card p{font-size:13.5px;color:#6b7180;line-height:1.6;margin:0;}
.features .side-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.features .side-chip{font-size:11px;font-weight:600;color:#2A304B;background:#fff;
  border:1px solid #edeff4;border-radius:999px!important;padding:4px 11px;}

/* responsywność */
@media (max-width:1024px){
  .features-layout{grid-template-columns:1fr;gap:32px;}
  .features-side{flex-direction:row;}
  .features .side-card{flex:1;}
}
@media (max-width:768px){
  .features{padding:48px 0 56px;}
  .features .container{padding:0 18px;}
  .features-grid{grid-template-columns:1fr;gap:26px;}
  .features-side{flex-direction:column;}
  .features-head h2{font-size:25px!important;}
}

/* ============================================================
   SEKCJE IMG+TEKST (section-imgLeft / section-imgRight)
   dopisz na koniec redesign/redesign.css. Scope: .imgsec
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.imgsec{padding:56px 0;background:#fff;}
.imgsec .container{max-width:1340px;margin:0 auto;padding:0 32px;}
.imgsec-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;}

/* karta z treścią (nachodzi na grafikę) */
.imgsec-card{position:relative;z-index:2;background:#fff;border:1px solid #edeff4;
  box-shadow:0 14px 44px rgba(42,48,75,.09);border-radius:16px!important;padding:46px;}
.imgsec.img-right .imgsec-card{margin-right:-72px;}
.imgsec.img-left  .imgsec-card{margin-left:-72px;}

/* grafika z CMS */
.imgsec-img{position:relative;z-index:1;}
.imgsec-img svg,.imgsec-img img{display:block;width:100%;height:auto;border-radius:16px!important;}

/* --- TREŚĆ z WYSIWYG (skróty) --- */
/* badge [subtitle] -> bordowa pigułka (jeśli klasa inna, dostroję) */
.imgsec-card .subtitle,
.imgsec-card [class*="subtitle"],
.imgsec-card .label-primary{
  display:inline-block!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  color:#BF272E!important;background:rgba(191,39,46,.08)!important;border:0!important;
  padding:7px 15px!important;border-radius:999px!important;margin-bottom:16px!important;}

/* nagłówek (sformatuj w WYSIWYG jako „Nagłówek 2") */
.imgsec-card h1,.imgsec-card h2,.imgsec-card h3{
  font-size:27px!important;font-weight:600!important;color:#2A304B!important;
  letter-spacing:-.3px!important;line-height:1.2!important;margin:0 0 14px!important;text-align:left!important;}

/* akapity: lead (pogrubiony) granatowy, reszta szara */
.imgsec-card p{font-size:14.5px;color:#6b7180;line-height:1.7;margin:0 0 12px;text-align:left;}
.imgsec-card p strong{color:#2A304B;font-weight:700;}

/* przyciski ze skrótów [a type="second" / "second-outline"] */
.imgsec-card .btn-dome-second,
.imgsec-card .btn-dome-second-outline{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;padding:12px 22px;border-radius:12px!important;
  text-decoration:none;margin-top:10px;transition:all .15s;}
.imgsec-card .btn-dome-second{background:#0A56AD!important;color:#fff!important;border:0!important;}
.imgsec-card .btn-dome-second:hover{background:#094a96!important;}
.imgsec-card .btn-dome-second-outline{background:#fff!important;color:#0A56AD!important;border:1.5px solid #e1e4ec!important;}
.imgsec-card .btn-dome-second-outline:hover{border-color:#0A56AD!important;}

/* responsywność */
@media (max-width:900px){
  .imgsec-inner{grid-template-columns:1fr;gap:0;}
  .imgsec.img-right .imgsec-card,
  .imgsec.img-left .imgsec-card{margin:-48px 16px 0!important;}
  .imgsec-img{order:-1;}
}
@media (max-width:768px){
  .imgsec{padding:36px 0;}
  .imgsec .container{padding:0 18px;}
  .imgsec-card{padding:28px;}
  .imgsec-card h1,.imgsec-card h2,.imgsec-card h3{font-size:23px!important;}
}

/* ============================================================
   FIX: badge [subtitle] w sekcjach img -> bordowa pigułka
   ([subtitle] renderuje <span class="not-wp-page text-gray-500 font-semibold">)
   ============================================================ */
.imgsec-card .not-wp-page{
  display:inline-block!important;
  font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;
  color:#BF272E!important;background:rgba(191,39,46,.08)!important;
  padding:7px 15px!important;border-radius:999px!important;margin-bottom:16px!important;}
/* ============================================================
   SEKCJA LOGOTYPÓW KLIENTÓW (section-logotypy)
   dopisz na koniec redesign/redesign.css. Scope: .clients
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.clients{background:#fff;padding:72px 0 82px;}
.clients.has-gray{background:#f7f8fb;}
.clients .container{max-width:1340px;margin:0 auto;padding:0 32px;}

/* nagłówek z CMS */
.clients-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.clients-head h2{font-size:30px!important;font-weight:600!important;letter-spacing:-.3px;
  color:#2A304B!important;margin:0 0 14px!important;line-height:1.2!important;text-align:center!important;}
.clients-head p{font-size:15px!important;color:#6b7180!important;line-height:1.7!important;
  margin:0!important;text-align:center!important;}
.clients-head p strong,.clients-head p b{color:#2A304B!important;font-weight:700!important;}
.clients-head a{color:#0A56AD!important;font-weight:600;text-decoration:none;}

/* siatka logo z cienkimi liniami */
.clients-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:#e1e4ec;border:1px solid #e1e4ec;border-radius:18px!important;overflow:hidden;}
.client-cell{background:#fff;display:flex;align-items:center;justify-content:center;
  padding:30px 24px;min-height:116px;transition:background .2s;}
.clients.has-gray .client-cell{background:#fff;}
.client-cell:hover{background:#f7f8fb;}
.clients-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;}
.client-cell img{max-height:42px;max-width:150px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.6;transition:filter .25s,opacity .25s,transform .25s;}
.client-cell:hover img{filter:grayscale(0);opacity:1;transform:scale(1.06);}
.client-cap{font-size:12px;color:#6b7180;text-align:center;margin:0;}

/* responsywność */
@media (max-width:1024px){ .clients-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){
  .clients{padding:48px 0 56px;}
  .clients .container{padding:0 18px;}
  .clients-head h2{font-size:25px!important;}
}

/* logo: wymuszona wysokość -> SVG bez własnych wymiarów też się pokaże */
.client-cell img{height:40px!important;width:auto!important;max-width:150px!important;max-height:none!important;object-fit:contain;}
/* ============================================================
   SEKCJA OPINII (section-opinie) — komplet CSS
   dopisz na koniec redesign/redesign.css. Scope: .testi
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.testi{background:#f7f8fb;padding:72px 0 84px;}
.testi .container{max-width:1340px;margin:0 auto;padding:0 32px;}

/* nagłówek + widget Google */
.testi-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  margin-bottom:42px;flex-wrap:wrap;}
.testi-head-l{text-align:left;}
.testi-head-l h2{font-size:30px!important;font-weight:600!important;letter-spacing:-.3px;
  color:#2A304B!important;margin:0!important;line-height:1.2!important;text-align:left!important;}
/* eyebrow z [subtitle] (.not-wp-page) -> niebieska pigułka */
.testi .not-wp-page{display:inline-block!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:#0A56AD!important;
  background:rgba(10,86,173,.07)!important;padding:7px 15px!important;border-radius:999px!important;
  margin-bottom:14px!important;}
.testi-head-r{flex-shrink:0;}

/* siatka kart */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px;}
.testi-card{background:#fff;border:1px solid #edeff4;border-radius:18px!important;padding:28px;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(42,48,75,.04),0 2px 10px rgba(42,48,75,.05);
  transition:box-shadow .2s,transform .2s;}
.testi-card:hover{box-shadow:0 6px 24px rgba(42,48,75,.07);transform:translateY(-3px);}
.testi-stars{color:#fbbc04;font-size:15px;letter-spacing:2px;margin-bottom:14px;}
.testi-quote{font-size:14.5px;color:#475067;line-height:1.7;margin:0;flex:1;}
.testi-foot{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid #edeff4;}
.testi-avatar{width:46px;height:46px;border-radius:50%!important;object-fit:cover;flex-shrink:0;}
.testi-who{min-width:0;}
.testi-name{font-size:14px;font-weight:700;color:#2A304B;line-height:1.25;}
.testi-co{font-size:12px;color:#9aa0b0;}
.testi-logo-link{margin-left:auto;display:flex;align-items:center;}
.testi-logo{max-height:24px;max-width:92px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;}

/* przycisk „Zobacz więcej" / „Ok macie mnie" */
.testi-more{display:flex;justify-content:center;margin-top:36px;}
.testi .bg-gradient-to-t{background:none!important;}   /* usuń stary fade */
.testi .btn-dome-second{display:inline-flex;align-items:center;justify-content:center;
  background:#0A56AD!important;color:#fff!important;border:0!important;
  font-size:15px;font-weight:700;padding:14px 30px;border-radius:12px!important;
  text-decoration:none;cursor:pointer;transition:background .15s;}
.testi .btn-dome-second:hover{background:#094a96!important;}

/* responsywność */
@media (max-width:1024px){ .testi-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){
  .testi{padding:48px 0 56px;}
  .testi .container{padding:0 18px;}
  .testi-grid{grid-template-columns:1fr;}
  .testi-head-l h2{font-size:25px!important;}
}

/* ============================================================
   SEKCJA „BAZA WIEDZY" / fakeblog (section-fakeblog)
   dopisz na koniec redesign/redesign.css. Scope: .posts
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.posts{background:#fff;padding:72px 0 84px;}
.posts .container{max-width:1340px;margin:0 auto;padding:0 32px;}

/* nagłówek (lewo) + opis (prawo) */
.posts-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-bottom:44px;flex-wrap:wrap;}
.posts-head-l{flex:1;min-width:280px;}
.posts-head-l h1,.posts-head-l h2,.posts-head-l h3{
  font-size:32px!important;font-weight:600!important;letter-spacing:-.4px;
  color:#2A304B!important;margin:0!important;line-height:1.15!important;text-align:left!important;}
.posts .not-wp-page{display:inline-block!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:#0A56AD!important;
  background:rgba(10,86,173,.07)!important;padding:7px 15px!important;border-radius:999px!important;
  margin-bottom:14px!important;}
.posts-head-r{font-size:15px!important;color:#6b7180!important;line-height:1.7!important;
  margin:0!important;max-width:440px;text-align:left;}
.posts-head-r p{margin:0;color:#6b7180!important;}

/* siatka kart */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid #edeff4;
  border-radius:18px!important;overflow:hidden;text-decoration:none;
  box-shadow:0 1px 2px rgba(42,48,75,.04),0 2px 10px rgba(42,48,75,.05);
  transition:box-shadow .2s,transform .2s;}
.post-card:hover{box-shadow:0 14px 44px rgba(42,48,75,.09);transform:translateY(-4px);}
.post-img{aspect-ratio:16/10;overflow:hidden;background:#eef3fb;}
.post-img img,.post-img svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s;}
.post-card:hover .post-img img{transform:scale(1.05);}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.post-title{font-size:17px;font-weight:700;color:#2A304B;line-height:1.35;margin:0 0 10px;transition:color .15s;}
.post-card:hover .post-title{color:#0A56AD;}
.post-exc{font-size:13.5px;color:#6b7180;line-height:1.6;margin:0 0 20px;flex:1;}
.post-more{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:#0A56AD;margin-top:auto;}
.post-more svg{width:18px;height:18px;stroke:currentColor;fill:none;transition:transform .2s;}
.post-card:hover .post-more svg{transform:translateX(4px);}

/* przycisk pod sekcją */
.posts-cta{display:flex;justify-content:center;margin-top:40px;}
.posts .btn-dome-second{display:inline-flex;align-items:center;justify-content:center;
  background:#0A56AD!important;color:#fff!important;border:0!important;
  font-size:15px;font-weight:700;padding:14px 30px;border-radius:12px!important;
  text-decoration:none;cursor:pointer;transition:background .15s;}
.posts .btn-dome-second:hover{background:#094a96!important;}

/* responsywność */
@media (max-width:1024px){ .posts-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){
  .posts{padding:48px 0 56px;}
  .posts .container{padding:0 18px;}
  .posts-grid{grid-template-columns:1fr;}
  .posts-head-l h1,.posts-head-l h2,.posts-head-l h3{font-size:26px!important;}
}

/* ============================================================
   SEKCJA KONTAKT (section-discord -> 3 karty) — komplet CSS
   dopisz na koniec redesign/redesign.css. Scope: .contact
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.contact{background:#f7f8fb;padding:72px 0 84px;}
.contact .container{max-width:1340px;margin:0 auto;padding:0 32px;}

.contact-head{text-align:center;max-width:640px;margin:0 auto 44px;}
.contact-head .pricing-eyebrow{margin-bottom:14px;}
.contact-head h2{font-size:30px!important;font-weight:600!important;letter-spacing:-.3px;
  color:#2A304B!important;margin:0 0 12px!important;line-height:1.2!important;text-align:center!important;}
.contact-head p{font-size:15px!important;color:#6b7180!important;line-height:1.6!important;
  margin:0!important;text-align:center!important;}

.contact-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:22px;align-items:stretch;}
.contact-card{background:#fff;border:1px solid #edeff4;border-radius:18px!important;padding:30px;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(42,48,75,.04),0 2px 10px rgba(42,48,75,.05);
  transition:box-shadow .2s,transform .2s;}
.contact-card:hover{box-shadow:0 6px 24px rgba(42,48,75,.07);transform:translateY(-3px);}
.cc-ico{width:48px;height:48px;border-radius:12px!important;background:rgba(10,86,173,.08);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.cc-ico svg{width:23px;height:23px;stroke:#0A56AD;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.contact-card h3{font-size:18px;font-weight:700;color:#2A304B;margin:0 0 8px;}
.contact-card p{font-size:13.5px;color:#6b7180;line-height:1.6;margin:0 0 20px;flex:1;}
.cc-link{font-size:13.5px;font-weight:700;color:#0A56AD;display:inline-flex;align-items:center;gap:7px;margin-top:auto;text-decoration:none;}
.cc-link svg{width:17px;height:auto;fill:currentColor;transition:transform .2s;}
.contact-card:hover .cc-link svg{transform:translateX(4px);}

/* Discord — wyróżniona karta */
.contact-card.discord{position:relative;overflow:hidden;background:#5865F2!important;
  border-color:#5865F2!important;color:#fff;justify-content:center;padding:38px 40px;}
.contact-card.discord:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(42,48,75,.09);}
.contact-card.discord h3{color:#fff;font-size:24px;margin:0 0 10px;}
.contact-card.discord p{color:rgba(255,255,255,.88);font-size:14.5px;line-height:1.6;max-width:62%;margin:0 0 24px;flex:none;}
.dc-logo{position:absolute;right:-12px;bottom:-16px;width:208px;height:auto;fill:rgba(255,255,255,.16);}
.dc-cta{align-self:flex-start;position:relative;z-index:2;background:#fff!important;color:#5865F2!important;
  font-size:14.5px;font-weight:700;padding:14px 26px;border-radius:10px!important;text-decoration:none;transition:transform .15s;}
.dc-cta:hover{transform:translateY(-2px);}

/* responsywność */
@media (max-width:1024px){
  .contact-grid{grid-template-columns:1fr 1fr;}
  .contact-card.discord{grid-column:1 / -1;}
}
@media (max-width:768px){
  .contact{padding:48px 0 56px;}
  .contact .container{padding:0 18px;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-card.discord{grid-column:auto;}
  .contact-card.discord p{max-width:100%;}
}
/* ============================================================
   STOPKA (footer-wordpress) — komplet CSS
   dopisz na koniec redesign/redesign.css. Scope: .site-footer
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.site-footer{background:#f7f8fb;border-top:1px solid #edeff4;}
.site-footer .container{max-width:1340px;margin:0 auto;padding:56px 32px 0;}

.footer-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap;}
.footer-logo img{height:34px;width:auto;display:block;}
.footer-social{display:flex;align-items:center;gap:10px;}
.fs-btn{width:38px;height:38px;border-radius:10px!important;background:#fff;border:1px solid #edeff4;
  display:flex;align-items:center;justify-content:center;color:#9aa0b0;transition:all .15s;}
.fs-btn:hover{color:#0A56AD;border-color:#0A56AD;transform:translateY(-2px);}
.fs-btn svg{width:18px;height:18px;fill:currentColor;}

.footer-cols{display:grid;grid-template-columns:1.3fr 1fr 1.1fr 1.35fr auto;gap:32px;padding-bottom:48px;}
.footer-col h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2A304B;margin:0 0 18px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.footer-col li{margin:0;}
.footer-col a{font-size:14px;color:#6b7180;line-height:1.4;transition:color .15s;text-decoration:none;}
.footer-col a:hover{color:#0A56AD;}

.footer-badges{display:flex;flex-direction:column;align-items:flex-end;gap:16px;}
.fb-cap{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9aa0b0;}
.fb-img{display:block;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s;}
.fb-img:hover{filter:grayscale(0);opacity:1;}
.fb-payu{max-width:92px;} .fb-blik{max-width:62px;} .fb-wht{max-width:86px;}

.footer-bottom{border-top:1px solid #edeff4;padding:22px 0;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;}
.footer-bottom p{margin:0;font-size:13px;color:#9aa0b0;}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal a{font-size:13px;color:#9aa0b0;transition:color .15s;text-decoration:none;}
.footer-legal a:hover{color:#0A56AD;}

/* responsywność */
@media (max-width:1024px){
  .footer-cols{grid-template-columns:repeat(2,1fr);gap:28px;}
  .footer-badges{grid-column:1 / -1;align-items:flex-start;flex-direction:row;flex-wrap:wrap;gap:20px;}
}
@media (max-width:768px){
  .site-footer .container{padding:40px 18px 0;}
  .footer-cols{grid-template-columns:1fr 1fr;gap:24px;}
  .footer-top{margin-bottom:32px;}
  .footer-bottom{justify-content:center;text-align:center;}
}
/* ============================================================
   PRICING HEADER (section-pricingHeader) — komplet CSS
   dopisz na koniec redesign/redesign.css. Scope: .phead
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.phead{background:#f7f8fb;padding:56px 0;}
.phead .container{max-width:1340px;margin:0 auto;padding:0 32px;}
.phead-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}

/* lewa kolumna — treść z CMS (tresc) */
.phead-copy{max-width:560px;}
.phead-copy h2{font-size:36px!important;font-weight:700!important;letter-spacing:-.6px;
  line-height:1.12!important;color:#2A304B!important;margin:0 0 14px!important;text-align:left!important;}
.phead-copy h3{font-size:19px!important;font-weight:600!important;color:#6b7180!important;
  margin:0 0 20px!important;line-height:1.35!important;text-align:left!important;}
.phead-copy b{display:block;font-size:16px;font-weight:700;color:#2A304B;margin:0 0 10px;line-height:1.5;}
.phead-copy p{font-size:15px;color:#6b7180;line-height:1.75;margin:0 0 12px;}
.phead-copy p strong{color:#2A304B;font-weight:700;}
.phead-trust{display:flex;gap:22px;margin-top:28px;flex-wrap:wrap;}
.phead-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#6b7180;}
.phead-trust svg{width:16px;height:16px;color:#0A56AD;}

/* prawa karta — jasna, minimalistyczna */
.pcard{position:relative;background:#fff;border:1px solid #edeff4;border-radius:20px!important;padding:32px;
  box-shadow:0 1px 2px rgba(42,48,75,.04),0 10px 34px rgba(42,48,75,.06);}
.pcard + .pcard{margin-top:22px;}
.pcard-flags{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px;}
.pflag{font-size:11px;font-weight:700;letter-spacing:.04em;padding:6px 13px;border-radius:999px!important;}
.pflag.hot{background:rgba(191,39,46,.08);color:#BF272E;}
.pflag.trial{background:rgba(10,86,173,.07);color:#0A56AD;}

.pcard-title{font-size:13px;font-weight:600;color:#9aa0b0;margin:0;text-transform:uppercase;letter-spacing:.06em;}
.pcard-name{font-size:30px;font-weight:800;letter-spacing:-.4px;color:#2A304B;margin:3px 0 18px;}

.pcard-price{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.pcard-old{font-size:17px;color:#9aa0b0;text-decoration:line-through;}
.pcard-now{display:flex;align-items:flex-end;gap:4px;color:#2A304B;}
.pcard-now .amt{font-size:46px;font-weight:800;line-height:.9;letter-spacing:-1px;}
.pcard-now .cur{font-size:19px;font-weight:700;margin-bottom:4px;}
.pcard-now .per{font-size:15px;font-weight:600;color:#9aa0b0;margin-bottom:6px;}

.pcard-perks{display:flex;gap:20px;flex-wrap:wrap;padding:18px 0;margin-bottom:6px;
  border-top:1px solid #edeff4;border-bottom:1px solid #edeff4;}
.pperk{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:#2A304B;}
.pperk svg{width:18px;height:18px;color:#0A56AD;}

.pcard-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:22px 0 26px;}
.pfeat{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#6b7180;}
.pfeat svg{width:17px;height:17px;color:#0A56AD;flex-shrink:0;}
.pfeat .val{margin-left:auto;font-weight:700;color:#2A304B;}

.pcard-cta{display:grid;grid-template-columns:1fr;gap:11px;}
.phead .btn-buy{display:flex;align-items:center;justify-content:center;background:#0A56AD;color:#fff;
  font-size:15.5px;font-weight:700;padding:16px;border-radius:12px!important;text-decoration:none;
  box-shadow:0 6px 16px rgba(10,86,173,.22);transition:background .15s,transform .15s,box-shadow .15s;}
.phead .btn-buy:hover{background:#094a96;transform:translateY(-2px);box-shadow:0 10px 22px rgba(10,86,173,.28);}
.phead .btn-trial{display:flex;align-items:center;justify-content:center;background:#fff;color:#2A304B;
  font-size:14px;font-weight:600;padding:13px;border-radius:12px!important;text-decoration:none;
  border:1.5px solid #e1e4ec;transition:border-color .15s,color .15s;}
.phead .btn-trial:hover{border-color:#0A56AD;color:#0A56AD;}

/* responsywność */
@media (max-width:1024px){
  .phead-inner{grid-template-columns:1fr;gap:32px;}
  .phead-copy{max-width:none;}
}
@media (max-width:768px){
  .phead{padding:36px 0;}
  .phead .container{padding:0 18px;}
  .phead-copy h2{font-size:28px!important;}
  .pcard{padding:26px 22px;}
  .pcard-feats{grid-template-columns:1fr;}
  .pcard-now .amt{font-size:40px;}
}
/* ============================================================
   PEŁNA TABELA SPECYFIKACJI (section-tabelFull)
   LIFTING górnej części + zaokrąglenia + paleta projektu (CSS-only)
   dopisz na koniec redesign/redesign.css. Scope: .spec-table
   vh.css zeruje radius -> wszędzie !important
   ============================================================ */

/* górny panel planów — jaśniejsze tło + zaokrąglony box */
.spec-table .bg-slate-50{background:#f7f8fb !important;border-radius:18px !important;}
.spec-table .rounded-t-lg{border-radius:18px 18px 0 0 !important;}
.spec-table .border-b-2{border-bottom-color:#e1e4ec !important;}

/* wiersze-nagłówki sekcji ("Parametry podstawowe" itd.) — miękki, jasny pasek */
.spec-table .rounded-lg{border-radius:12px !important;}
.spec-table .text-dome-granat.rounded-lg,
.spec-table .border.border-slate-100.rounded-lg{
  background:#f7f8fb !important;border-color:#edeff4 !important;}

/* ── PALETA PROJEKTU ─────────────────────────────────────── */

/* przyciski "Wybieram" jak w cenniku: niebieski pełny + niebieski outline */
.spec-table .btn-dome-second{
  background:#0A56AD !important;color:#fff !important;border:0 !important;
  font-weight:700 !important;padding:12px 22px !important;border-radius:12px !important;
  transition:background .15s,transform .15s;}
.spec-table .btn-dome-second:hover{background:#094a96 !important;transform:translateY(-1px);}
.spec-table .btn-dome-second-outline{
  background:#fff !important;color:#0A56AD !important;border:1.5px solid #e1e4ec !important;
  font-weight:700 !important;padding:12px 22px !important;border-radius:12px !important;
  transition:border-color .15s,color .15s;}
.spec-table .btn-dome-second-outline:hover{border-color:#0A56AD !important;color:#094a96 !important;}

/* cena w nagłówku planów -> granat zamiast pomarańczu (tylko nagłówek, nie ptaszki w tabeli) */
.spec-table .sticky .text-dome-orange{color:#2A304B !important;}
/* ============================================================
   FAQ (section-faq) — delikatny lifting (CSS-only, scope .faq)
   logika akordeonu (Vue) bez zmian; tylko kolory/spacing/linie
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.faq{background:#fff;}
.faq .container{max-width:1340px;}

/* nagłówek sekcji */
.faq h2{font-size:30px!important;font-weight:600!important;color:#2A304B!important;
  letter-spacing:-.3px;line-height:1.2!important;margin:0 0 12px!important;text-align:left!important;}
.faq .mb-6 p{font-size:15px;color:#6b7180;line-height:1.7;margin:0;}

/* pozycje FAQ — czyste, jasne linie + oddech */
.faq dl{margin:0;}
.faq dl > div{border-bottom:1px solid #edeff4 !important;padding:18px 0 !important;margin:0 !important;}
.faq dl > div:last-child{border-bottom:0 !important;}
.faq .border-slate-100{border-color:#edeff4 !important;}

/* pytanie */
.faq h4{color:#2A304B !important;font-weight:600 !important;font-size:16px;line-height:1.4;margin:0;transition:color .15s;}
.faq button:hover h4{color:#0A56AD !important;}

/* ikony rozwijania: szare -> niebieskie po otwarciu (zamiast pomarańczu) */
.faq button > span{color:#9aa0b0 !important;}
.faq .isOpendItem{color:#0A56AD !important;}

/* odpowiedź */
.faq dd .text-base{font-size:14.5px;color:#6b7180;line-height:1.75;}
.faq dd .text-base a{color:#0A56AD;text-decoration:none;}
.faq dd .text-base a:hover{text-decoration:underline;}

/* responsywność */
@media (max-width:768px){
  .faq h2{font-size:25px!important;}
}
/* ============================================================
   WYSZUKIWARKA DOMEN — nagłówek WYSIWYG (tresc_tekstowa)
   + reużywalny czerwony badge (.vh-badge) do WYSIWYG
   dopisz na koniec redesign/redesign.css
   ============================================================ */

/* nagłówek nad wyszukiwarką (h1 + opis z CMS) */
#wyszukiwarka-domen .wp-page{text-align:center;}
#wyszukiwarka-domen .wp-page .border-slate-200,
#wyszukiwarka-domen .border-slate-200{border-color:#edeff4 !important;}
#wyszukiwarka-domen h1{font-size:44px !important;font-weight:700 !important;color:#2A304B !important;
  letter-spacing:-.8px;line-height:1.1 !important;margin:0 0 16px !important;text-align:center !important;}
#wyszukiwarka-domen .wp-page p{font-size:16px !important;color:#6b7180 !important;line-height:1.7 !important;
  max-width:760px;margin:0 auto !important;text-align:center !important;}
#wyszukiwarka-domen .wp-page p strong{color:#2A304B !important;font-weight:700;}

/* ── REUŻYWALNY BADGE do WYSIWYG (czerwony, na środku) ─────────
   Użycie w treści CMS:
   <p style="text-align:center;"><span class="vh-badge">DOMENY</span></p>
   ------------------------------------------------------------ */
.vh-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#BF272E;background:rgba(191,39,46,.08);
  padding:7px 15px;border-radius:999px !important;margin-bottom:14px;line-height:1;}
/* wariant niebieski, gdyby gdzieś pasował: <span class="vh-badge blue"> */
.vh-badge.blue{color:#0A56AD;background:rgba(10,86,173,.07);}

@media (max-width:768px){
  #wyszukiwarka-domen h1{font-size:30px !important;}
  #wyszukiwarka-domen .wp-page p{font-size:15px !important;}
}

/* === CENNIK v2 (.ck) — przeniesione z inline <style> === */
/* ══ CENNIK v2 — prefiks .ck — REDESIGN (paleta projektu) ════
   border-radius wymaga !important (vh.css zeruje radius)
   Vue (store.netto / store.showAllPrices / .ck-tip) bez zmian
═════════════════════════════════════════════════════════════ */
.ck{display:block;padding:8px 0 24px;}
.ck .container{max-width:1340px;}

/* nagłówek + przełącznik netto/brutto */
.ck .ck-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap;}
.ck .ck-head .wp-page{flex:1;min-width:240px;}
.ck .ck-head h2{font-size:30px!important;font-weight:600!important;color:#2A304B!important;letter-spacing:-.3px;margin:0!important;line-height:1.2!important;text-align:left!important;}
.ck .ck-head .wp-page p{font-size:15px;color:#6b7180;margin:8px 0 0;}
.ck .ck-toggle-wrap{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;}
.ck .ck-toggle-lbl{font-size:13.5px;font-weight:600;color:#6b7180;}
.ck .ck-toggle{position:relative;width:46px;height:26px;border-radius:999px!important;background:#cfd5e2;border:0;cursor:pointer;transition:background .2s;flex-shrink:0;padding:0;}
.ck .ck-toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%!important;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s;}
.ck .ck-toggle[aria-checked="true"]{background:#0A56AD;}
.ck .ck-toggle[aria-checked="true"]::after{left:23px;}

/* blok produktu */
.ck .ck-block{margin-bottom:40px;}
.ck .ck-block-title{font-size:18px;font-weight:700;color:#2A304B;margin:0 0 14px;}

/* nagłówek tabeli */
.ck .ck-thead{display:grid;gap:16px;padding:16px 22px;background:#f7f8fb;border:1px solid #edeff4;border-bottom:0;border-radius:14px 14px 0 0!important;}
.ck .ck-thead-domains{grid-template-columns:1.1fr 1fr 1.5fr 1fr 1.3fr;}
.ck .ck-thead-hosting{grid-template-columns:1.5fr 1fr 1fr;}
.ck .ck-th{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9aa0b0;display:flex;flex-direction:column;gap:3px;}
.ck .ck-th-sub{font-size:10.5px;font-weight:500;letter-spacing:.01em;text-transform:none;color:#b4b9c6;}

/* tabela + wiersze */
.ck .ck-table{border:1px solid #edeff4;border-top:0;border-radius:0 0 14px 14px!important;background:#fff;}
.ck .ck-row{display:grid;gap:16px;padding:16px 22px;align-items:center;border-bottom:1px solid #f0f2f7;transition:background .15s;}
.ck .ck-row:last-child{border-bottom:0;}
.ck .ck-row:hover{background:#fafbfd;}
.ck .ck-row-domains{grid-template-columns:1.1fr 1fr 1.5fr 1fr 1.3fr;}
.ck .ck-row-hosting{grid-template-columns:1.5fr 1fr 1fr;}

/* komórki */
.ck .ck-cell{font-size:14.5px;color:#2A304B;min-width:0;}
.ck .ck-cell-ext{font-weight:700;font-size:15px;color:#2A304B;display:flex;align-items:center;gap:8px;}
.ck .ck-cell-price{font-weight:700;color:#2A304B;}
.ck .ck-cell-renew{font-weight:600;color:#2A304B;}
.ck .ck-cell-muted{color:#6b7180;}
.ck .ck-cell-dash{color:#cbd2df;}

/* promo / reaktywacja */
.ck .ck-promo{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#BF272E;background:rgba(191,39,46,.09);padding:3px 8px;border-radius:999px!important;}
.ck .ck-cell-expired{display:flex;flex-direction:column;gap:2px;}
.ck .ck-cell-expired-price{font-weight:700;color:#2A304B;}
.ck .ck-cell-expired-note{font-size:10.5px;color:#9aa0b0;}

/* pokaż więcej / opis */
.ck .ck-more{display:inline-flex;align-items:center;gap:6px;margin:4px 22px 14px;padding:8px 0;background:none;border:0;font-size:13.5px;font-weight:700;color:#0A56AD;cursor:pointer;transition:color .15s;}
.ck .ck-more:hover{color:#094a96;}
.ck .ck-desc{font-size:13px;color:#9aa0b0;margin:14px 2px 0;line-height:1.6;}

/* tooltip (.ck-tip[data-tip]) */
.ck .ck-tip{position:relative;cursor:help;border-bottom:1px dashed #c4cad6;}
.ck .ck-tip::after,.dsearch .ck-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:260px;background:#2A304B;color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;text-align:left;padding:10px 12px;border-radius:10px!important;box-shadow:0 8px 24px rgba(42,48,75,.22);opacity:0;visibility:hidden;transition:opacity .15s,transform .15s;z-index:60;pointer-events:none;}
.ck .ck-tip::before,.dsearch .ck-tip::before{content:'';position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);border:5px solid transparent;border-top-color:#2A304B;opacity:0;visibility:hidden;transition:opacity .15s;z-index:60;}
.ck .ck-tip:hover::after,.dsearch .ck-tip:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.ck .ck-tip:hover::before,.dsearch .ck-tip:hover::before{opacity:1;visibility:visible;}

/* responsywność — poziomy scroll tabeli na mobile */
@media (max-width:900px){
  .ck .ck-block{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .ck .ck-thead,.ck .ck-table{min-width:780px;}
}
@media (max-width:768px){
  .ck .ck-head h2{font-size:24px!important;}
  .ck .ck-head{margin-bottom:24px;}
}
/* ============================================================
   SEKCJA 2 KOLUMNY (section-2columns) — redesign
   dopisz na koniec redesign/redesign.css. Scope: .twocol
   treść z WYSIWYG (eyebrow .not-wp-page, nagłówek, strong, przyciski)
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1340px;margin:0 auto 8px;padding:0 32px;}

/* karta */
.twocol-card{background:#fff;border:1px solid #edeff4;border-radius:18px!important;padding:38px;
  box-shadow:0 1px 2px rgba(42,48,75,.04),0 10px 34px rgba(42,48,75,.06);}

/* eyebrow [subtitle] -> niebieska pigułka */
.twocol .not-wp-page{display:inline-block!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;color:#0A56AD!important;
  background:rgba(10,86,173,.07)!important;padding:7px 15px!important;border-radius:999px!important;margin-bottom:16px!important;}

/* nagłówek (sformatuj w WYSIWYG jako „Nagłówek 2") */
.twocol h2,.twocol h3{font-size:26px!important;font-weight:600!important;color:#2A304B!important;
  letter-spacing:-.3px;line-height:1.2!important;margin:0 0 14px!important;text-align:left!important;}

/* akapity + pogrubienia */
.twocol p{font-size:14.5px;color:#6b7180;line-height:1.7;margin:0 0 14px;}
.twocol p strong{color:#2A304B;font-weight:700;}

/* przyciski [a type="second" / "second-outline"] -> paleta projektu */
.twocol .btn-dome-second,
.twocol .btn-dome-second-outline{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;padding:13px 22px;border-radius:12px!important;
  text-decoration:none;margin-top:10px;transition:all .15s;}
.twocol .btn-dome-second{background:#0A56AD!important;color:#fff!important;border:0!important;}
.twocol .btn-dome-second:hover{background:#094a96!important;}
.twocol .btn-dome-second-outline{background:#fff!important;color:#0A56AD!important;border:1.5px solid #e1e4ec!important;}
.twocol .btn-dome-second-outline:hover{border-color:#0A56AD!important;color:#094a96!important;}

/* responsywność */
@media (max-width:900px){ .twocol{grid-template-columns:1fr;} }
@media (max-width:768px){
  .twocol{padding:0 18px;gap:16px;}
  .twocol-card{padding:26px;}
  .twocol h2,.twocol h3{font-size:22px!important;}
}

/* ============================================================
   MOBILE RWD — 6 poprawek UI/UX
   ============================================================ */

/* ── T1: Blokowanie poziomego przewijania ─────────────────── *
   body { overflow-x: hidden } już jest (l. 31), ale Safari
   wymaga też ustawienia na <html>, żeby body mogło to wymusić.
   .hero { overflow-x: hidden } izoluje hero-bg (right:-1000px)
   wewnątrz sekcji, nie rujnując layout na desktopie.            */
html           { overflow-x: hidden; }
.hero          { overflow-x: hidden; }

/* ── T2: Ukrycie zdjęcia (hero-r) na mobile < 768 px ───────── */
@media (max-width: 767px) {
  .hero-r { display: none !important; }
  .hero-inner {
    grid-template-columns: 1fr !important;
    padding: 28px 0 40px;
    min-height: auto;
  }
  .buy-btn { width: 100%; justify-content: center; }
}

/* ── T3: Logotypy — czysta siatka 2-kolumnowa na mobile ─────── */
@media (max-width: 767px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }
  .client-cell {
    padding: 20px 16px;
    min-height: 80px;
  }
  .client-cell img {
    height: 34px !important;
    max-width: 110px !important;
    object-fit: contain;
  }
}

/* ── T4: Stopka mobilna — tylko logo + social + płatności ────── */
@media (max-width: 767px) {
  /* ukryj 4 kolumny menu, zostaw wyłącznie .footer-badges */
  .footer-col:not(.footer-badges) { display: none; }

  /* kontener kolumn → flex wyśrodkowany */
  .footer-cols {
    display: flex;
    justify-content: center;
    padding-bottom: 32px;
  }

  /* odznaki płatności — poziomy stack wyśrodkowany */
  .footer-badges {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }
  .fb-cap { width: 100%; text-align: center; font-size: 11px; letter-spacing: .06em; }

  /* logo + social → stack pionowy, wyśrodkowany */
  .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
  }
  .footer-legal { justify-content: center; }
}

/* ── T5: Hamburger — prawy górny róg nawigacji ───────────────── *
   Gdy .nav-links (flex:1) jest ukryty, .nav-right traci oparcie.
   margin-left:auto przesuwa go do prawej krawędzi .nav-wrap.
   .nav-sep chowamy — nie ma roli bez desktop linków.             */
@media (max-width: 980px) {
  .nav-sep   { display: none; }
  .nav-right { margin-left: auto; }
}

/* ── T6: Typografia Apple-style — mobile < 768 px ───────────── *
   clamp(min, fluid, max) — płynne skalowanie między 320 a 767px.
   Wartości inspirowane typografią Apple / Human Interface Guidelines.
   !important potrzebne — motywy WP często nadpisują nagłówki
   inline-style lub klasami Tailwinda z wysoką specyficznością.   */
@media (max-width: 767px) {
  h1 {
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }
  h2 {
    font-size: clamp(19px, 5.5vw, 24px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.015em !important;
  }
  h3 {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.3 !important;
  }
  p { font-size: 15px; line-height: 1.65; }
}
/* ============================================================
   STRONY LOGOWANIA (page-poczta, page-logowanie) — scope .auth
   dopisz na koniec redesign/redesign.css
   vh.css zeruje radius -> radius z !important
   ============================================================ */
.auth{background:#f7f8fb;}
.auth-wrap{max-width:1340px;margin:0 auto;padding:64px 32px;}
.auth-flash{max-width:920px;margin:0 auto 18px;}

/* układ 2-kolumnowy (poczta: treść + obraz) */
.auth-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.auth-split + .auth-split{margin-top:32px;}

/* ikona w kafelku */
.auth-ico{width:52px;height:52px;border-radius:14px!important;background:rgba(10,86,173,.08);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.auth-ico svg{width:24px;height:24px;color:#0A56AD;stroke:#0A56AD;}

/* nagłówki / lead */
.auth h2{font-size:30px!important;font-weight:700!important;color:#2A304B!important;letter-spacing:-.4px;margin:0 0 8px!important;line-height:1.15!important;}
.auth h3{font-size:17px!important;font-weight:600!important;color:#9aa0b0!important;margin:0 0 16px!important;}
.auth-lead{font-size:15px;color:#6b7180;line-height:1.7;margin:0 0 24px;}
.auth-lead a,.auth-head p a{color:#0A56AD;text-decoration:none;}
.auth-lead a:hover,.auth-head p a:hover{text-decoration:underline;}

/* pole z pływającą etykietą */
.auth-field{position:relative;margin-bottom:16px;}
.auth-label{position:absolute;left:14px;top:0;transform:translateY(-50%);background:#fff;padding:0 7px;
  font-size:11.5px;font-weight:600;color:#9aa0b0;z-index:2;}
.auth-label.is-error{color:#dc2626;}
.auth-input{display:block;width:100%;padding:15px 16px;font-size:15px;font-weight:600;color:#2A304B;
  background:#fff;border:1.5px solid #e1e4ec;border-radius:12px!important;transition:border-color .15s,box-shadow .15s;}
.auth-input::placeholder{color:#b4b9c6;font-weight:500;}
.auth-input:focus{outline:none;border-color:#0A56AD;box-shadow:0 0 0 3px rgba(10,86,173,.12);}
.auth-input.is-error{border-color:#dc2626;}
.auth-field-pass .auth-input{padding-right:44px;}

/* pole z przyciskiem w środku (poczta: input + Zaloguj) */
.auth-inline .auth-input{padding-right:130px;}
.auth-inline .auth-submit{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:11px 20px;}

/* przyciski */
.auth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#0A56AD;color:#fff;border:0;
  font-size:15px;font-weight:700;padding:14px 22px;border-radius:10px!important;text-decoration:none;cursor:pointer;
  transition:background .15s,transform .15s;}
.auth-btn:hover{background:#094a96;transform:translateY(-1px);}
.auth-btn-full{width:100%;}
.auth-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#fff;color:#0A56AD;
  border:1.5px solid #e1e4ec;font-size:15px;font-weight:700;padding:14px;border-radius:10px!important;text-decoration:none;
  transition:border-color .15s,color .15s;}
.auth-btn-outline:hover{border-color:#0A56AD;color:#094a96;}
.auth-btn-outline svg{width:20px;height:20px;}

/* obraz */
.auth-img{width:100%;height:auto;border-radius:18px!important;box-shadow:0 20px 50px rgba(42,48,75,.14);display:block;}

/* komunikat błędu */
.auth-err{display:flex;gap:10px;align-items:flex-start;background:#fef2f2;border:1px solid #fecaca;
  border-radius:12px!important;padding:12px 14px;margin:14px 0;}
.auth-err svg{width:18px;height:18px;color:#dc2626;flex-shrink:0;margin-top:1px;}
.auth-err p{margin:0;font-size:13.5px;font-weight:600;color:#b91c1c;}
.auth-input-err-ico{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#dc2626;pointer-events:none;}
.auth-input-err-ico svg{width:18px;height:18px;}

/* pokaż/ukryj hasło */
.auth-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#9aa0b0;background:none;border:0;cursor:pointer;z-index:3;display:flex;padding:0;}
.auth-eye.has-err{right:38px;}
.auth-eye svg{width:20px;height:20px;}

/* wiersz: zapamiętaj mnie + link */
.auth-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:4px 0 18px;}
.auth-check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#6b7180;}
.auth-check input{width:16px;height:16px;accent-color:#0A56AD;}
.auth-link{font-size:13.5px;color:#9aa0b0;text-decoration:none;}
.auth-link:hover{color:#0A56AD;text-decoration:underline;}
.auth-back{display:inline-block;font-size:13.5px;color:#9aa0b0;text-decoration:none;margin:0 auto 16px;}
.auth-back:hover{color:#0A56AD;}

/* nagłówek strony + karta (logowanie) */
.auth-head{text-align:center;max-width:620px;margin:0 auto 28px;}
.auth-head h2{text-align:center;}
.auth-head p{font-size:15px;color:#6b7180;line-height:1.7;margin:8px 0 0;}
.auth-card{display:grid;grid-template-columns:1.4fr 1fr;background:#fff;border:1px solid #edeff4;
  border-radius:20px!important;box-shadow:0 14px 44px rgba(42,48,75,.08);overflow:hidden;max-width:920px;margin:0 auto;}
.auth-col{padding:40px;}
.auth-col-aside{border-left:1px solid #edeff4;background:#fafbfd;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.auth-col h3{font-size:20px;font-weight:700;color:#2A304B;margin:0 0 20px;text-align:left;}
.auth-col-aside h3{text-align:center;}

/* responsywność */
@media (max-width:900px){
  .auth-split{grid-template-columns:1fr;gap:28px;}
  .auth-split.is-rev > div:first-child{order:2;}
  .auth-card{grid-template-columns:1fr;}
  .auth-col-aside{border-left:0;border-top:1px solid #edeff4;}
}
@media (max-width:768px){
  .auth-wrap{padding:40px 18px;}
  .auth h2{font-size:25px!important;}
  .auth-col{padding:28px;}
  .auth-inline .auth-input{padding-right:16px;}
  .auth-inline .auth-submit{position:static;transform:none;width:100%;margin-top:10px;}
}
/* ── wariant wyśrodkowany (section-mailLogin) ───────────────── */
.auth-center{max-width:680px;margin:0 auto;text-align:center;}
.auth-center .auth-ico{margin-left:auto;margin-right:auto;}
.auth-center h2{text-align:center;}
.auth-center h3{text-align:center;}
.auth-center .auth-form{margin-top:24px;text-align:left;}
.auth-center .auth-desc{margin-top:24px;font-size:14.5px;color:#6b7180;line-height:1.7;text-align:center;}
.auth-center .auth-desc a{color:#0A56AD;text-decoration:none;}
.auth-center .auth-desc a:hover{text-decoration:underline;}
/* ============================================================
   NAGŁÓWEK (header-new) — poprawki (CSS-only)
   dopisz na koniec redesign/redesign.css
   1) usunięcie ikon przy Poczta/Pomoc/Kontakt
   2) fix „luki" przy rozwijaniu menu (hover gap)
   ============================================================ */

/* 1) bez ikon przy Poczta / Pomoc / Kontakt (Discord i Panel zostają) */
.nav-right .nav-link-sm svg{display:none !important;}

/* 2) ROZWIJANE MENU — stabilny hover (eliminacja luki) ─────────
   Problem: między przyciskiem a .nav-drop jest pusty odstęp;
   gdy myszka przez niego przejeżdża, .nav-item traci :hover i menu
   znika, zanim dojedziesz. Rozwiązanie: niewidzialny „most" w obrębie
   .nav-item, który wypełnia odstęp i podtrzymuje :hover, plus krótkie
   opóźnienie zamknięcia. */
.nav-item{position:relative;}

/* most: przykrywa odstęp pod przyciskiem (w obrębie .nav-item) */
.nav-item::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:24px;            /* >= odstęp przycisk↔menu */
  background:transparent;
}

/* opóźnione zamknięcie (gdy menu animowane opacity/visibility) */
.nav-drop{
  transition:opacity .18s ease, visibility .18s ease, transform .18s ease;
  transition-delay:.2s;   /* grace period na dojechanie myszką */
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop{
  transition-delay:0s;    /* otwiera się natychmiast */
}

/* ═══════════════════════════════════════════════════
   ZADANIE 1 — FIX FOUC (Vue v-cloak)
   ══════════════════════════════════════════════════ */
[v-cloak]{display:none !important;}

/* ═══════════════════════════════════════════════════
   ZADANIE 3 — STICKY CART (mobile)
   ══════════════════════════════════════════════════ */
.dss-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  background:#fff;border-top:1px solid #e1e4ec;box-shadow:0 -6px 24px rgba(42,48,75,.10);
  padding:12px 16px;}
.dss-sticky-info{font-size:14px;font-weight:700;color:#2A304B;}
.dss-sticky-info small{display:block;font-size:11.5px;font-weight:500;color:#6b7180;}
.dss-sticky-cta{display:inline-flex;align-items:center;gap:8px;background:#0A56AD;color:#fff;
  font-size:15px;font-weight:700;padding:14px 20px;border-radius:12px !important;text-decoration:none;}
.dss-sticky-cta:hover{background:#094a96;}
@media (max-width:768px){ .dss-sticky.is-visible{display:flex;} }

/* ============================================================
   WYNIKI WYSZUKIWARKI DOMEN — odświeżenie wizualne (.dss-*)
   section-listaDomenNew3.php · CSS-only · scope .dss-results
   JEDYNY blok stylujący wyniki — stare reguły .dss-* usuń.
   vh.css zeruje radius -> radius z !important.
   ============================================================ */

/* — SZEROKOŚĆ: wyrównaj do szerokości NAGŁÓWKA (.nav .container).
   >>> Claude Code: zamień 1340px na REALNY max-width nagłówka (HDR) w OBU regułach. <<< */
.dss-results{width:100%;overflow-x:clip;}
.dss-results .container{max-width:1340px !important;margin-left:auto !important;margin-right:auto !important;}
.dsearch .container{max-width:1340px !important;margin-left:auto !important;margin-right:auto !important;}

/* — baner Programu Partnerskiego — */
.dss-pp-banner{display:flex;align-items:center;gap:10px;
  background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.22);
  border-radius:14px !important;padding:13px 18px;margin-bottom:20px;
  font-size:14px;color:#2A304B;line-height:1.4;}
.dss-pp-banner svg{flex-shrink:0;}

/* — pasek nad tabelą — */
.dss-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.dss-query{font-size:14px;color:#6b7180;margin:0;}
.dss-query b,.dss-query strong{color:#2A304B;}
.dss-brutto{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#6b7180;margin-left:auto;}
.dss-toggle{position:relative;width:44px;height:24px;border:0;cursor:pointer;
  background:#cbd5e1;border-radius:999px !important;transition:background .18s;flex-shrink:0;}
.dss-toggle::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  background:#fff;border-radius:50% !important;box-shadow:0 1px 3px rgba(42,48,75,.25);transition:transform .18s;}
.dss-toggle.on{background:#0A56AD;}
.dss-toggle.on::after{transform:translateX(20px);}

/* — KARTA wyników (desktop): nagłówek + wiersze jako jeden zaokrąglony panel — */
.dss-thead{
  display:grid !important;
  grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr) 148px !important;
  align-items:center;gap:16px;padding:14px 22px;background:#fafbfd;
  border:1px solid #e1e4ec;border-bottom:0;border-radius:16px 16px 0 0 !important;}
#dssRows{border:1px solid #e1e4ec;border-top:0;border-radius:0 0 16px 16px !important;background:#fff;}
.dss-th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#9aa0b0;line-height:1.35;}
.dss-th-sub{display:inline-block;font-size:11px;font-weight:500;text-transform:none;letter-spacing:0;color:#b4b9c6;margin-top:2px;}
.dss-th-sub-green{color:var(--green,#16a34a);}

.dss-row{
  display:grid !important;
  grid-template-columns:minmax(0,2.3fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr) 148px !important;
  align-items:center;gap:16px;padding:16px 22px;border-bottom:1px solid #edeff4;transition:background .12s;}
.dss-row:hover{background:#fafbfd;}
#dssRows .dss-row:last-child{border-bottom:0;border-radius:0 0 16px 16px !important;}
.dss-row.taken{opacity:.7;}

/* nazwa domeny */
.dss-dname{display:flex;align-items:center;gap:12px;min-width:0;}
.dss-dot{width:9px;height:9px;border-radius:50% !important;flex-shrink:0;}
.dss-dot.av{background:var(--green-new,#22c55e);box-shadow:0 0 0 4px rgba(34,197,94,.14);}
.dss-dot.tak{background:#cbd5e1;}
.dss-dname-wrap{min-width:0;}
.dss-dname-line{font-size:17px;font-weight:700;color:#2A304B;line-height:1.2;overflow-wrap:anywhere;}
.dss-dn-base{color:#2A304B;}
.dss-dn-ext{color:#0A56AD;}
.dss-dn-base.tk,.dss-dn-ext.tk{color:#9aa0b0;}
.dss-dsub{font-size:12px;color:#9aa0b0;margin-top:3px;}

/* ceny */
.dss-price-buy{font-size:16px;font-weight:800;color:#2A304B;}
.dss-renew-v{font-size:15px;font-weight:600;color:#9aa0b0;}
.dss-price-na{font-size:14px;font-weight:600;color:#9aa0b0;}
.dss-trans-cost{display:flex;flex-direction:column;gap:1px;}
.dss-trans-cost > div{align-items:center !important;}

/* „?” W KÓŁKU obok zielonej ceny PP.
   Wymaga PHP: svg w .ck-tip zamieniony na tekst „?”. Pseudo-elementów .ck-tip NIE ruszamy (dymek). */
.dss-trans-cost .ck-tip{
  width:18px !important;height:18px !important;flex-shrink:0;align-self:center;
  border-radius:50% !important;background:#e2e7f0 !important;color:#64748b !important;
  font-size:11px !important;font-weight:800 !important;line-height:1 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  transition:background .15s,color .15s;}
.dss-trans-cost .ck-tip:hover{background:#0A56AD !important;color:#fff !important;}

/* przyciski */
.btn-add{display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:#0A56AD;color:#fff;border:0;font-size:14px;font-weight:700;padding:11px 16px;
  border-radius:10px !important;cursor:pointer;text-decoration:none;line-height:1.2;
  transition:background .15s,transform .15s,box-shadow .15s;}
.btn-add:hover{background:#094a96;transform:translateY(-1px);box-shadow:0 6px 16px rgba(10,86,173,.22);}
.btn-whois{display:inline-flex;align-items:center;justify-content:center;width:100%;
  background:#fff;color:#6b7180;border:1.5px solid #e1e4ec;font-size:13px;font-weight:700;padding:10px 16px;
  border-radius:10px !important;cursor:pointer;transition:border-color .15s,color .15s;}
.btn-whois:hover{border-color:#0A56AD;color:#0A56AD;}

/* ── TABLET (≤1024px) ── */
@media (max-width:1024px){
  .dss-thead,.dss-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr) 120px !important;gap:12px;padding-left:16px;padding-right:16px;}
  .dss-dname-line{font-size:16px;}
}

/* wersja mobilna .dss-m jest ukryta na desktopie */
.dss-m{display:none;}

/* ════════════════════════════════════════════════════════
   MOBILE (≤768px) — KARTA .dss-m (renderowana w PHP) wg Hostinger
   ════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* na telefonie pokazujemy TYLKO .dss-m (desktopowe komórki chowamy) */
  .dss-thead{display:none !important;}
  #dssRows{border:0 !important;border-radius:0 !important;background:transparent;}
  .dss-row{display:block !important;padding:0 !important;border:0 !important;background:transparent !important;margin:0 0 14px;}
  .dss-row > *:not(.dss-m){display:none !important;}
  .dss-m{display:block;}

  /* odstęp kafelka od krawędzi ekranu: bez nadpisania — te same globalne
     18px co cennik-v2 (reguła .container w @media ≤768px wyżej) */

  /* KARTA na szarym tle */
  .dss-m{background:#f4f5f7;border-radius:22px !important;padding:24px 22px;}

  /* BADGE — tekst wyśrodkowany w pigułce, bez wersalików, lżejsza czcionka */
  .dss-m-badge{display:inline-flex;align-items:center;justify-content:center;text-align:center;
    font-size:12px;font-weight:600;text-transform:none;letter-spacing:.01em;
    color:#fff;background:#1f9d55;padding:7px 16px;border-radius:999px !important;line-height:1;}
  .dss-m-badge.tk{background:#9aa0b0;}

  /* NAZWA — większa (proporcje Hostinger) */
  .dss-m-name{font-size:33px;font-weight:700;color:#2A304B;line-height:1.08;margin-top:16px;letter-spacing:-.5px;overflow-wrap:anywhere;}
  .dss-m-name .dss-dn-ext{color:#0A56AD;}
  .dss-m-name .tk{color:#9aa0b0;}

  /* CENA REJESTRACJI + podpis (podpis tym samym krojem co .dss-m-feat) */
  .dss-m-reg{font-size:30px;font-weight:800;color:#2A304B;margin-top:18px;}
  .dss-m-cap{font-size:14px;line-height:1.5;color:#5b6270;margin-top:4px;font-weight:400;}

  /* PRZYCISK */
  .dss-m .btn-add{width:100%;min-height:54px;font-size:16px;font-weight:800;border-radius:14px !important;margin-top:18px;}
  .dss-m .btn-whois{width:100%;min-height:50px;border-radius:14px !important;margin-top:16px;}

  /* CECHY — czysty szary tekst z zielonym ✓ (jak Hostinger) */
  .dss-m-feats{margin-top:20px;padding-top:18px;border-top:1px solid #e3e6ed;}
  .dss-m-feat{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;
    font-size:14px;line-height:1.5;color:#5b6270;font-weight:400;}
  .dss-m-feat:last-child{margin-bottom:0;}
  .dss-m-feat b{font-weight:700;color:#2A304B;}
  .dss-m-ck{color:#1f9d55;font-weight:800;flex-shrink:0;line-height:1.5;}

  /* zielona belka (baner PP) — ukryta na telefonie */
  .dss-pp-banner{display:none !important;}

  /* toggle „Pokaż ceny brutto" — wyśrodkowany (jak ds-toggle w wyszukiwarce) */
  .dss-topbar{justify-content:center;}
  .dss-query{width:100%;text-align:center;}
  .dss-brutto{margin-left:auto;margin-right:auto;}
}

/* ════════════════════════════════════════════════════════
   WYSZUKIWARKA w topie (section-domainSearchNew) — fixy mobile
   ════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* toggle „Rejestruj / Przenieś” wyśrodkowany na ekranie */
  .dsearch .ds-toggle{display:flex !important;justify-content:center;width:-moz-fit-content;width:fit-content;
    margin-left:auto !important;margin-right:auto !important;}
  /* mniejszy tekst w polu, żeby zmieścił się cały placeholder */
  .dsearch #dssInput{font-size:13.5px !important;}
  .dsearch #dssInput::placeholder{font-size:13.5px !important;}
}

/* ═══════════════════════════════════════════════════
   ZAKŁADKA TRANSFER — poprawka v2: przycisk + cena .pl
   ══════════════════════════════════════════════════ */

/* TRANSFER — przycisk: krótki „Przenieś", bez lupy (label z JS ukryty) */
.ds-row.is-transfer .ds-btn svg{display:none !important;}
.ds-row.is-transfer .ds-btn .ds-btn-label{font-size:0 !important;}
.ds-row.is-transfer .ds-btn .ds-btn-label::after{content:"Przenieś";font-size:15px;font-weight:700;}

/* TRANSFER — kompaktowa cena .pl: zielone promo z toggle + niebieski standard */
.ds-pl-renew{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.1;}
.ds-pl-promo{font-size:14px;font-weight:800;color:var(--green,#0f9d58);cursor:help;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.ds-pl-q{display:inline-flex;width:15px;height:15px;border-radius:999px !important;
  border:1.4px solid currentColor;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;line-height:1;}
.ds-pl-std{font-size:13px;font-weight:700;color:#0A56AD;white-space:nowrap;}
/* ============================================================
   POPRAWKI: mobile (baner + toggle) oraz TRANSFER (2 pille .pl)
   Dopisz na koniec redesign/redesign.css. radius => !important.
   ============================================================ */

/* ── TASK 1: MOBILE (≤768px) ── */
@media (max-width:768px){
  /* ukryj zieloną belkę „Masz od kogoś polecenie…” na telefonie */
  .dss-pp-banner{display:none !important;}
  /* toggle „Pokaż ceny brutto” wyśrodkowany (jak w innych miejscach serwisu) */
  .dss-topbar{justify-content:center !important;}
  .dss-brutto{margin-left:0 !important;}
}

/* ── TASK 2: TRANSFER — dwa niezależne pille dla .pl ──
   .dss-tld-r pokazuje się tylko w trybie transferu (JS), więc chipy też.
   W trybie transferu „rozpinamy” pojedynczy pill .pl (klasa .is-transfer na #dssTldBar). */
.dss-tld-r-split{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.dss-tld-chip{display:inline-flex;align-items:center;gap:6px;
  background:#eef1f6;border:1px solid #e1e4ec;border-radius:999px !important;
  padding:7px 14px;font-size:14px;color:#2A304B;white-space:nowrap;line-height:1;}
.dss-tld-chip b{font-weight:800;color:#2A304B;}
.dss-tld-chip-price{color:#2A304B;font-weight:700;}
/* pill z ceną PP: cena podkreślona (sugeruje tooltip) + kursor help */
.dss-tld-chip-pp{cursor:help;}
.dss-tld-chip-pp .dss-tld-chip-price{color:#0A56AD;text-decoration:underline dotted;text-underline-offset:3px;}

/* tooltip w pasku nie może być ucinany */
.dss-tld-bar{overflow:visible;}

/* w trybie transferu: .pl bez własnego tła pill, żeby chipy były osobnymi pillami */
#dssTldBar.is-transfer .dss-tld--plsplit{background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;}
#dssTldBar.is-transfer .dss-tld--plsplit .dss-tld-e{display:none !important;}

/* ── ADAPTACJA do realnego markupu paska (przyciski .ds-tld, kontener #dssTldBar) ──
   etykieta <b>.pl</b> w przycisku znika w trybie split (chipy mają własne ".pl"),
   a kontenery nie mogą ucinać tooltipa .ck-tip */
#dssTldBar.is-transfer .dss-tld--plsplit > b{display:none !important;}
#dssTldBar, #dssTldBar .ds-tlds{overflow:visible;}
/* ============================================================
   FIXY 2026-06-12 (v2) — dopisać NA KONIEC redesign/redesign.css.
   Zmiana vs v1: USUNIĘTO globalny blok szerokości (wracamy do
   oryginalnych szerokości). Toggle „Pokaż ceny brutto" na mobile
   wyśrodkowany przez kolumnę + bordery wyzerowane.
   vh.css zeruje radius -> każdy border-radius z !important.
   ============================================================ */

/* ── MOBILE (≤768px) — wyniki wyszukiwarki ── */
@media (max-width:768px){

  /* (a) baner PP — twardo ukryty */
  .dss-results .dss-pp-banner{display:none !important;}

  /* (b) toggle „Pokaż ceny brutto" — wyśrodkowany, bez linii nad/pod */
  .dss-results .dss-topbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    margin:0 0 16px !important;
  }
  .dss-results .dss-query{display:none !important;}
  .dss-results .dss-brutto{margin:0 !important;justify-content:center !important;}

  /* (c) nazwa domeny — większa i nieco cieńsza */
  .dss-results .dss-m-name{font-size:45px !important;font-weight:500 !important;letter-spacing:-.6px;}

  /* (d) przycisk „Dodaj" — większy tekst i wyższy przycisk */
  .dss-results .dss-m .btn-add{font-size:18px !important;font-weight:700 !important;min-height:58px !important;}
}

/* ── PILL .pl w zakładce „Przenieś" — JEDEN pill „od 50,97 zł" ──
   (zsynchronizowane z patchem JS renderTldBar w functions.php) */
#dssTldBar.is-transfer .dss-tld--plsplit{
  background:rgba(10,86,173,.07) !important;
  border:0 !important;
  border-radius:999px !important;
  padding:4px 13px !important;
  box-shadow:none !important;
}
#dssTldBar.is-transfer .dss-tld--plsplit > b{display:inline !important;}

.ds-tld-pp{
  font-size:12.5px;font-weight:700;color:#0A56AD;
  text-decoration:underline dotted;text-underline-offset:3px;
  cursor:help;white-space:nowrap;
}

#dssTldBar,#dssTldBar .ds-tlds{overflow:visible;}

/* ============================================================
   STOPKA KOSZYKA (footer-wordpress2) — scope .cart-footer
   Dopisz na koniec redesign/redesign.css. radius => !important.
   ============================================================ */
.cart-footer{background:#fff;border-top:1px solid #edeff4;}
.cart-footer--alt{background:#f7f8fb;}
.cart-footer-inner{max-width:1280px;margin:0 auto;padding:34px 24px;}

.cart-footer-top{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.cart-footer-logo{display:inline-block;width:118px;flex-shrink:0;}
.cart-footer-logo img{width:100%;height:auto;display:block;}

.cart-footer-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}

/* social w zaokrąglonych kafelkach (jak w stopce serwisu) */
.cart-footer-social{display:flex;align-items:center;gap:10px;}
.cart-footer-social a{width:40px;height:40px;border-radius:13px !important;
  background:#fff;border:1px solid #eef0f5;box-shadow:0 2px 8px rgba(42,48,75,.07);
  display:inline-flex;align-items:center;justify-content:center;color:#6b7180;
  transition:color .15s,box-shadow .15s,border-color .15s,transform .15s;}
.cart-footer-social a:hover{color:#0A56AD;border-color:#dbe6f7;box-shadow:0 6px 16px rgba(10,86,173,.14);transform:translateY(-1px);}
.cart-footer-social svg{width:19px;height:19px;}

.cart-footer-divider{width:1px;height:42px;background:#e1e4ec;}

/* płatności: etykieta + większe loga */
.cart-footer-pay-group{display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.cart-footer-pay-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa0b0;}
.cart-footer-pay{display:flex;align-items:center;gap:16px;}
.cart-footer-pay img{height:34px;width:auto;display:block;}

.cart-footer-copy{margin-top:26px;padding-top:20px;border-top:1px solid #f1f3f8;text-align:center;font-size:13px;color:#9aa0b0;}

@media (max-width:768px){
  .cart-footer-inner{padding:28px 18px;}
  .cart-footer-top{flex-direction:column;align-items:center;text-align:center;gap:22px;}
  .cart-footer-meta{flex-direction:column;gap:20px;}
  .cart-footer-divider{width:120px;height:1px;}
  .cart-footer-pay-group{align-items:center;}
}



/* ============================================================
   KOSZYK — cart-component (Vue: cartComponent.vue)
   Dopisz na KONIEC redesign/redesign.css.
   Scope: #cart (sekcja w page-koszyk.php). Tylko warstwa
   wizualna — markup i logika Vue bez zmian. radius => !important
   (vh.css zeruje radius globalnie).
   Tokeny: granat #2A304B, niebieski #0A56AD (hover #094a96),
   linie #edeff4 / #e1e4ec, tło #f7f8fb, akcent zielony CTA.
   ============================================================ */

/* ---- 0. Fundament / typografia / siatka ---- */
#cart, #cart *{ font-family:'Inter',system-ui,-apple-system,sans-serif; }
#cart{ color:#2A304B; }
@media (min-width:1024px){
  #cart .lg\:grid{ column-gap:40px; }
}

/* ============================================================
   1. NAGŁÓWEK: "Twój koszyk (n)" + "Wyczyść koszyk"
   ============================================================ */
#cart section[aria-labelledby="cart-heading"] > div:first-child{ margin-bottom:22px; }
/* nagłówek ~o połowę mniejszy + bez liczby produktów z nawiasu.
   "(n)" to część tekstu w <h1>, więc chowamy oryginał (font-size:0)
   i wstrzykujemy czysty napis przez ::before. */
#cart section[aria-labelledby="cart-heading"] h1{
  font-size:0 !important; line-height:1.2;
}
#cart section[aria-labelledby="cart-heading"] h1::before{
  content:"Twój koszyk"; display:inline;
  color:#2A304B; font-weight:700; letter-spacing:-.01em; font-size:18px; line-height:1.2;
}
@media (min-width:1024px){
  #cart section[aria-labelledby="cart-heading"] h1::before{ font-size:22px; }
}
/* "Wyczyść koszyk" -> 2 pkt mniej, szary, w jednej linii */
#cart section[aria-labelledby="cart-heading"] h1 + button{
  color:#9aa0b0; gap:6px; padding:6px 10px; border-radius:10px !important;
  font-size:10px; letter-spacing:.04em; white-space:nowrap;
  transition:color .15s, background .15s;
}
#cart section[aria-labelledby="cart-heading"] h1 + button:hover{ color:#BF272E; background:#fbeaeb; }
#cart section[aria-labelledby="cart-heading"] h1 + button svg{ width:14px; height:14px; }

/* ============================================================
   2. WIERSZ NAGŁÓWKA TABELI (Produkt / Okres / Cena / Koszt)
   ciężki szary pasek -> lekki, drobny, uppercase divider
   ============================================================ */
#cart #cart-heading + div{
  background:transparent !important; border-radius:0 !important;
  border-bottom:1px solid #edeff4; margin:0 0 10px; padding:0 0 12px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#9aa0b0;
}

/* ============================================================
   3. KARTY POZYCJI (li): radius + ramka + miękki cień + oddech
   ============================================================ */
#cart ul[role="list"]{ display:flex; flex-direction:column; gap:10px; }
#cart ul[role="list"] > li{
  background:#fff; border:1px solid #edeff4; border-radius:16px !important;
  box-shadow:0 1px 2px rgba(42,48,75,.04), 0 8px 24px rgba(42,48,75,.05);
  padding:16px 8px; margin-bottom:0 !important; align-items:center;
  transition:box-shadow .18s, border-color .18s;
}
#cart ul[role="list"] > li:hover{
  border-color:#dbe3f0; box-shadow:0 2px 4px rgba(42,48,75,.05), 0 14px 32px rgba(42,48,75,.08);
}
/* nazwa produktu */
#cart ul[role="list"] li > div:first-child{ color:#2A304B; font-size:15px; }

/* badge "14 dni za darmo" (tylko wewnątrz pozycji) — mniejszy i odsunięty
   od nazwy, żeby nie konkurował z nazwą planu */
#cart ul[role="list"] .bg-orange-100{
  background:#fff4e6 !important; border-color:#ffe0b8 !important; color:#9a6a1f !important;
  border-radius:8px !important; font-weight:600; font-size:10px; letter-spacing:.01em;
  padding:2px 7px !important; margin-left:12px !important;
}

/* przycisk X (usuń) -> stonowany, hover bordo */
#cart ul[role="list"] li button{
  color:#c2c7d2; border-radius:10px !important; transition:color .15s, background .15s;
}
#cart ul[role="list"] li button:hover{ color:#BF272E; background:#fbeaeb; }

/* wiersz "Ukryj dane abonenta" (domeny) */
#cart .dane-abonenta{ margin-top:12px; padding-top:12px; border-top:1px dashed #e9ecf3; }
#cart .dane-abonenta label{ color:#6b7180; }
#cart .dane-abonenta input[type="checkbox"]{ border-radius:5px !important; }

/* ============================================================
   4. SELECT OKRESU + CENY
   ============================================================ */
#cart select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:1px solid #e1e4ec !important; border-radius:8px !important;
  color:#2A304B !important; font-weight:600; font-size:13px; line-height:1.2; background-color:#fff;
  padding:5px 26px 5px 10px; box-shadow:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0b0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:12px;
  transition:border-color .15s, box-shadow .15s;
}
#cart select:focus{
  border-color:#0A56AD !important; box-shadow:0 0 0 3px rgba(10,86,173,.12) !important; outline:none;
}
/* opcje w rozwiniętej liście (1 rok … 5 lat) — czytelny granat zamiast
   wyblakłego szarego. Lista pełna 1–5 lat zostaje z markupu Vue (bez zmian).
   Uwaga: rozwinięty popup <option> jest częściowo natywny — na macOS system
   może nadpisać kolor; na Windows/Linux (Chrome/Firefox) reguła zadziała. */
#cart select option{ color:#2A304B; background:#fff; font-weight:500; }
#cart select option:checked{ color:#fff; }
/* cena bieżąca / promo / przekreślona */
#cart ul[role="list"] li .self-center{ color:#2A304B; font-weight:700; }
#cart ul[role="list"] li .text-green-600{ color:#1f9a47 !important; font-weight:700; }
#cart ul[role="list"] li .line-through{ color:#aeb4c2; font-weight:500; }

/* ============================================================
   5. BANNER INFO (amber) — zmiękczenie + radius + mniejsza ikona
   Widoczny TYLKO gdy w koszyku jest hosting. Hak: pozycja hostingu
   zawsze renderuje badge "14 dni za darmo" (.bg-orange-100 w ul),
   więc :has() wykrywa obecność hostingu. Brak hostingu => ukryty.
   ============================================================ */
/* domyślnie ukryty (np. gdy w koszyku tylko domena/VPS) */
#cart section[aria-labelledby="cart-heading"] > .bg-orange-100{ display:none !important; }
/* pokaż gdy w koszyku jest pozycja hostingu */
#cart section[aria-labelledby="cart-heading"]:has(ul[role="list"] .bg-orange-100) > .bg-orange-100{
  display:flex !important;
}
#cart section[aria-labelledby="cart-heading"] > .bg-orange-100{
  background:#fff8ee !important; border:1px solid #ffe6c2 !important; color:#7a5a23 !important;
  border-radius:14px !important; padding:16px 18px !important; margin-top:18px;
  box-shadow:0 6px 18px rgba(244,156,32,.08); align-items:flex-start !important;
}
#cart section[aria-labelledby="cart-heading"] > .bg-orange-100 strong{ color:#5f4416; }
#cart section[aria-labelledby="cart-heading"] > .bg-orange-100 svg{
  width:30px !important; height:30px !important; margin-right:14px !important; flex-shrink:0;
}

/* ============================================================
   6. KARTA PODSUMOWANIA + TOTALE + RAZEM
   ============================================================ */
#cart section[aria-labelledby="summary-heading"]{
  background:#fff !important; border:1px solid #edeff4; border-radius:20px !important;
  box-shadow:0 2px 4px rgba(42,48,75,.04), 0 18px 48px rgba(42,48,75,.08);
  padding:26px 24px !important;
}
@media (min-width:1024px){
  #cart section[aria-labelledby="summary-heading"]{ top:16px; padding:30px 28px !important; }
}
#cart #summary-heading{ color:#2A304B; font-weight:800; font-size:18px; letter-spacing:-.01em; }

#cart section[aria-labelledby="summary-heading"] dl{ margin-top:22px; }
#cart section[aria-labelledby="summary-heading"] dl dt{ color:#6b7180 !important; font-size:14px; }
#cart section[aria-labelledby="summary-heading"] dl dd{ color:#2A304B !important; font-weight:600; font-size:14px; }
/* RAZEM */
#cart section[aria-labelledby="summary-heading"] dl .border-t{
  border-top:1px solid #edeff4 !important; margin-top:12px; padding-top:18px !important;
}
#cart section[aria-labelledby="summary-heading"] dl .border-t dt,
#cart section[aria-labelledby="summary-heading"] dl .border-t dd{
  color:#2A304B !important; font-weight:800 !important; font-size:22px !important;
}

/* ============================================================
   7. KOD RABATOWY + SEPARATORY
   ============================================================ */
/* "+ Dodaj kod rabatowy" */
#cart section[aria-labelledby="summary-heading"] .my-4 button{
  color:#0A56AD; font-weight:600; border-radius:10px !important; padding:8px 10px; margin-left:-10px;
  transition:background .15s;
}
#cart section[aria-labelledby="summary-heading"] .my-4 button:hover{ background:#eef4fc; }
#cart section[aria-labelledby="summary-heading"] .my-4 button svg{ color:#0A56AD; }
#cart section[aria-labelledby="summary-heading"] hr{ border-color:#edeff4 !important; margin:6px 0; }
/* pole inputa kodu */
#cart #discount-code{
  border:1px solid #e1e4ec !important; border-radius:10px !important; padding:10px 12px;
  color:#2A304B; box-shadow:none !important;
}
#cart #discount-code:focus{
  border-color:#0A56AD !important; box-shadow:0 0 0 3px rgba(10,86,173,.12) !important;
}
/* przycisk "Zastosuj" -> niebieski (btn-dome-primary) */
#cart .btn-dome-primary{
  background:#0A56AD !important; border:0 !important; color:#fff !important; border-radius:10px !important;
  font-weight:700; box-shadow:0 6px 16px rgba(10,86,173,.18); transition:background .15s, box-shadow .15s;
}
#cart .btn-dome-primary:hover{ background:#094a96 !important; box-shadow:0 8px 20px rgba(10,86,173,.26); }

/* ============================================================
   8. CTA "ZAMAWIAM" (zielony, desktop w podsumowaniu + mobile)
   -> aby zmienić na niebieski: zamień #1f9a47/#1c8e41 na #0A56AD/#094a96
      i rgba(31,154,71,...) na rgba(10,86,173,...)
   ============================================================ */
#cart .btn-dome-success{
  background:#1f9a47 !important; border:0 !important; color:#fff !important;
  border-radius:12px !important; font-weight:800; letter-spacing:.03em;
  width:100%; padding:15px 20px !important; font-size:15px;
  box-shadow:0 8px 22px rgba(31,154,71,.30); transition:transform .15s, box-shadow .15s, background .15s;
}
#cart .btn-dome-success:hover{
  background:#1c8e41 !important; transform:translateY(-1px); box-shadow:0 12px 28px rgba(31,154,71,.36);
}
#cart section[aria-labelledby="summary-heading"] .mt-3{ margin-top:22px; }

/* ============================================================
   9. PUSTY KOSZYK — kompaktowo (stopka widoczna bez scrolla)
   ============================================================ */
/* kontener: tnij ogromne py-12 / lg:py-32 */
#cart div.py-12.lg\:py-32{ padding-top:32px !important; padding-bottom:32px !important; }
@media (min-width:1024px){
  #cart div.py-12.lg\:py-32{ padding-top:48px !important; padding-bottom:48px !important; }
}
/* mniejszy odstęp pod ikoną i pod nagłówkiem */
#cart .text-center .mb-4.lg\:mb-8{ margin-bottom:16px !important; }
#cart .text-center > span:first-child{
  display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px;
  background:#f1f5fb; border-radius:50% !important; margin-bottom:16px;
}
#cart .text-center > span:first-child svg{ width:38px; height:38px; color:#9fb6d6; }
#cart .text-center h1{ color:#2A304B !important; font-weight:800; }
#cart a.btn-dome-second{
  background:#0A56AD !important; color:#fff !important; border:0 !important; border-radius:12px !important;
  font-weight:700; padding:13px 28px !important; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(10,86,173,.20); transition:background .15s, transform .15s;
}
#cart a.btn-dome-second:hover{ background:#094a96 !important; transform:translateY(-1px); }

/* spinner ładowania koszyka (duży) -> niebieski; spinnery w przyciskach zostają białe */
#cart .animate-spin.h-16{ color:#0A56AD !important; }

/* ============================================================
   10. MODAL "Wyczyść koszyk" (confirmation-component)
   Jeśli modal jest teleportowany poza #cart i radius nie wejdzie
   — usuń prefiks "#cart " z reguł poniżej.
   ============================================================ */
#cart .bg-slate-500.bg-opacity-75{ background:rgba(42,48,75,.55) !important; }
#cart .bg-white.shadow-xl{ border-radius:18px !important; }
#cart .bg-red-100.rounded-full{ border-radius:50% !important; }
/* "Wyczyść koszyk" -> bordo z palety */
#cart .bg-red-600{ background:#BF272E !important; border-radius:10px !important; font-weight:700; }
#cart .bg-red-600:hover{ background:#a31f25 !important; }
/* "Anuluj" */
#cart .border-slate-300.bg-white{
  border-radius:10px !important; border-color:#e1e4ec !important; color:#2A304B !important;
}

/* ============================================================
   11. RESPONSYWNOŚĆ
   ============================================================ */
/* tablet: podsumowanie pod pozycjami */
@media (max-width:1024px){
  #cart section[aria-labelledby="summary-heading"]{ margin-top:16px; }
}
/* mobile: stackowane karty, ukryty nagłówek tabeli */
@media (max-width:768px){
  #cart section[aria-labelledby="cart-heading"] > div:first-child{ margin-bottom:18px; }
  #cart #cart-heading + div{ display:none !important; }
  #cart ul[role="list"] > li{ padding:14px; row-gap:6px; border-radius:14px !important; }
  #cart section[aria-labelledby="summary-heading"]{ padding:20px 18px !important; border-radius:16px !important; }
  #cart section[aria-labelledby="summary-heading"] dl .border-t dt,
  #cart section[aria-labelledby="summary-heading"] dl .border-t dd{ font-size:20px !important; line-height:1.1 !important; }
  #cart .btn-dome-success{ padding:14px 18px !important; }

  /* ramkę o okresie testowym chowamy ZAWSZE na mobile (oszczędność miejsca).
     Ta sama specyficzność co reguła :has() z sekcji 5, ale później w pliku
     i w media query => wygrywa tutaj, a na desktopie reguła z sekcji 5 stoi. */
  #cart section[aria-labelledby="cart-heading"]:has(ul[role="list"] .bg-orange-100) > .bg-orange-100{
    display:none !important;
  }

  /* redundantny GÓRNY przycisk "Zamawiam" (przed podsumowaniem) — chowamy.
     Jedyne CTA na mobile zostaje w karcie podsumowania, zaraz pod "Razem". */
  #cart .my-5.lg\:hidden{ display:none !important; }

  /* "Zastosuj" w polu kodu — bazowy btn-dome-primary ma na mobile
     margin-bottom:0.75rem (znika dopiero od 640px), przez co w wierszu flex
     był niższy od inputu. Zerujemy => równa wysokość z polem kodu. */
  #cart section[aria-labelledby="summary-heading"] .btn-dome-primary.btn-sm{ margin-bottom:0 !important; }
}

/* ============================================================
   12. KOMPAKTOWE PODSUMOWANIE (wzorzec Hostinger) — TYLKO MOBILE
   Na desktopie pełne podsumowanie (nagłówek, netto, VAT, Razem) jest
   zawsze widoczne. Na mobile zwijamy do samego "Razem" + kod + przycisk;
   po rozwinięciu pola kodu (#discount-code) dosypujemy pełne dane.
   :has() reaguje na żywo na couponShow w Vue — bez builda.
   ============================================================ */
@media (max-width:768px){
  /* --- stan domyślny: zwinięte --- */
  #cart section[aria-labelledby="summary-heading"] > .grid{ display:none !important; }
  #cart section[aria-labelledby="summary-heading"] dl{ margin-top:0 !important; }
  #cart section[aria-labelledby="summary-heading"] dl > div:not(.border-t){ display:none !important; }
  #cart section[aria-labelledby="summary-heading"] dl .border-t{
    border-top:0 !important; margin-top:0 !important; padding-top:0 !important;
  }

  /* --- stan rozwinięty: otwarte pole kodu => pełne podsumowanie --- */
  #cart section[aria-labelledby="summary-heading"]:has(#discount-code) > .grid{ display:grid !important; }
  #cart section[aria-labelledby="summary-heading"]:has(#discount-code) dl{ margin-top:22px !important; }
  #cart section[aria-labelledby="summary-heading"]:has(#discount-code) dl > div:not(.border-t){ display:flex !important; }
  #cart section[aria-labelledby="summary-heading"]:has(#discount-code) dl .border-t{
    border-top:1px solid #edeff4 !important; margin-top:12px !important; padding-top:18px !important;
  }

  /* --- kod ZASTOSOWANY (Vue chowa przełącznik .my-4) -> bez builda nie da się
         zrobić klik-rozwijania, więc pełne rozbicie pokazujemy od razu --- */
  #cart section[aria-labelledby="summary-heading"]:not(:has(.my-4)) > .grid{ display:grid !important; }
  #cart section[aria-labelledby="summary-heading"]:not(:has(.my-4)) dl{ margin-top:22px !important; }
  #cart section[aria-labelledby="summary-heading"]:not(:has(.my-4)) dl > div:not(.border-t){ display:flex !important; }
  #cart section[aria-labelledby="summary-heading"]:not(:has(.my-4)) dl .border-t{
    border-top:1px solid #edeff4 !important; margin-top:12px !important; padding-top:18px !important;
  }
}

/* ============================================================
   12b. "Szczegóły ceny" + strzałka ORAZ kod rabatowy — TYLKO MOBILE
   Jeden klikalny przełącznik (couponShow) = DWA wiersze, oba klikają to
   samo (rozwijają pełne podsumowanie + pole kodu):
   • wiersz 1: "Szczegóły ceny ▾" — szare, subtelne, do lewej (strzałka
     glif ▾/▴ przełączana wg :has(#discount-code)),
   • wiersz 2: oryginalne "+ Dodaj kod rabatowy" (niebieskie) — bez zmian.
   ============================================================ */
@media (max-width:768px){
  /* tuż pod "Razem" — ukryj PUSTY wrapper .my-2 (to on robił odstęp, nie .my-4) */
  #cart section[aria-labelledby="summary-heading"] .my-4{
    margin:4px 0 0 !important; padding:0 !important; text-align:left;
  }
  #cart section[aria-labelledby="summary-heading"] .my-4 > .my-2{ display:none !important; }
  /* przycisk jako dwa wiersze (flex-wrap): ::before bierze całą szerokość */
  #cart section[aria-labelledby="summary-heading"] .my-4 button{
    width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
    column-gap:6px; row-gap:12px; padding:0 !important; margin:0 !important;
  }
  /* bez jasnoniebieskiego tła/podświetlenia po kliknięciu */
  #cart section[aria-labelledby="summary-heading"] .my-4 button,
  #cart section[aria-labelledby="summary-heading"] .my-4 button:hover,
  #cart section[aria-labelledby="summary-heading"] .my-4 button:focus,
  #cart section[aria-labelledby="summary-heading"] .my-4 button:active,
  #cart section[aria-labelledby="summary-heading"] .my-4 button:focus-visible{
    -webkit-tap-highlight-color:transparent;
    background:transparent !important; box-shadow:none !important; outline:none !important; border:0 !important;
  }
  /* WIERSZ 1 — "Szczegóły ceny ▾" (szare, do lewej) */
  #cart section[aria-labelledby="summary-heading"] .my-4 button::before{
    content:"Szczegóły ceny  ▾"; flex-basis:100%; text-align:left;
    color:#6b7180; font-size:13px; font-weight:600; letter-spacing:.01em;
  }
  #cart section[aria-labelledby="summary-heading"]:has(#discount-code) .my-4 button::before{
    content:"Szczegóły ceny  ▴";
  }
  /* WIERSZ 2 — oryginalne "+ Dodaj kod rabatowy" (niebieskie, bez zmian) */
  #cart section[aria-labelledby="summary-heading"] .my-4 button > svg{
    display:inline-block !important; width:18px; height:18px; color:#0A56AD;
  }
  #cart section[aria-labelledby="summary-heading"] .my-4 button > span{
    font-size:14px !important; color:#0A56AD; font-weight:600;
  }
  #cart section[aria-labelledby="summary-heading"] .my-4 button > span::after{ content:none !important; }
}

/* === PŁATNOŚCI :: BEGIN === */
/* ============================================================
   PŁATNOŚCI / potwierdzenie zamówienia (page-platnosci.php)
   Scope: #platnosci  (dodaj id="platnosci" do <main>).
   Tylko warstwa wizualna. Przyciski płatności to Vue
   (blik-component=.btn-dome-second, payment-component=.button-green)
   — stylowane CSS-em, bez builda. radius => !important.
   Tokeny: granat #2A304B, niebieski #0A56AD (hover #094a96),
   linie #edeff4/#e1e4ec, tło #f6f8fc, zielony CTA, Inter.
   ============================================================ */
#platnosci, #platnosci *{ font-family:'Inter',system-ui,-apple-system,sans-serif; }
#platnosci{ color:#2A304B; }

/* --- 1. Nagłówek potwierdzenia (mniejszy, na wzór "Twój koszyk") --- */
#platnosci .max-w-3xl.mb-5 > p:first-child{
  color:#2A304B; font-weight:800; letter-spacing:-.02em; align-items:center; font-size:20px;
}
@media (min-width:1024px){
  #platnosci .max-w-3xl.mb-5 > p:first-child{ font-size:24px; }
}
#platnosci .max-w-3xl.mb-5 > p:first-child > span:first-child{   /* zielony check w kółku */
  color:#1f9a47 !important; border-color:#1f9a47 !important; border-width:2px !important;
  border-radius:50% !important; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
}
#platnosci .max-w-3xl.mb-5 > p:first-child > span:first-child svg{ width:18px; height:18px; }
#platnosci .max-w-3xl.mb-5 p.text-slate-500{ color:#6b7180 !important; }
#platnosci .max-w-3xl.mb-5 p.text-slate-500 strong{ color:#0A56AD; font-weight:700; }

/* --- 2. Karty (białe boksy w obu kolumnach) --- */
#platnosci section > .bg-white{
  background:#fff !important; border:1px solid #edeff4; border-radius:18px !important;
  box-shadow:0 1px 2px rgba(42,48,75,.04), 0 10px 30px rgba(42,48,75,.06);
}
#platnosci h3{ color:#2A304B; font-weight:800; letter-spacing:-.01em; }

/* sub-boksy (Okres próbny / Dane do faktury / Reprezentant) */
#platnosci .bg-slate-50:not(.grid){
  background:#f6f8fc !important; border:1px solid #eef1f7; border-radius:14px !important;
}
#platnosci .bg-slate-50:not(.grid) h4{ color:#2A304B; font-weight:700; }
#platnosci .bg-slate-50:not(.grid) h4 a{ color:#0A56AD; }
#platnosci .bg-slate-50:not(.grid) h4 a:hover{ color:#094a96; }
#platnosci .bg-slate-50:not(.grid) p{ color:#525a6e; }

/* --- 3. Tabela produktów --- */
/* nagłówek tabeli -> lekki divider zamiast szarego paska */
#platnosci .bg-slate-50.grid{
  background:transparent !important; border-radius:0 !important;
  border-bottom:1px solid #edeff4; color:#9aa0b0; font-size:11px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding-top:0; padding-bottom:12px; margin-bottom:8px;
}
/* wiersze produktów */
#platnosci ul[role="list"] > li{
  background:#fff !important; border:1px solid #edeff4 !important; border-radius:14px !important;
  box-shadow:0 1px 2px rgba(42,48,75,.04); align-items:center;
}
#platnosci ul[role="list"] li > div:first-child{ color:#2A304B; font-weight:700; }
#platnosci ul[role="list"] li .self-center{ color:#2A304B; font-weight:700; }
/* status: zielony check + etykieta */
#platnosci ul[role="list"] li .text-dome-green{ color:#1f9a47 !important; }
#platnosci ul[role="list"] li .text-dome-green svg{ width:18px; height:18px; }

/* disabled select okresu -> stonowany, statyczny (bez chevronu, bo nieedytowalny) */
#platnosci select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:1px solid #e1e4ec !important; border-radius:8px !important;
  color:#9aa0b0 !important; font-weight:600; font-size:13px; background:#f6f8fc;
  padding:5px 12px; box-shadow:none !important; cursor:default;
}

/* --- 4. Karta podsumowania + płatność --- */
#platnosci section.lg\:col-span-4 > .bg-white{ padding:26px 24px !important; }
@media (min-width:1024px){
  #platnosci section.lg\:col-span-4 > .bg-white{ padding:30px 28px !important; }
}
#platnosci #summary-heading{ color:#2A304B; font-weight:800; font-size:18px; letter-spacing:-.01em; }
#platnosci dl{ margin-top:20px; }
#platnosci dl dt{ color:#6b7180 !important; font-size:14px; }
#platnosci dl dd{ color:#2A304B !important; font-weight:600; font-size:14px; }
#platnosci dl .border-t{ border-top-color:#edeff4 !important; }
/* Razem (ostatni wiersz dl) */
#platnosci dl > div:last-child dt,
#platnosci dl > div:last-child dd{
  color:#2A304B !important; font-weight:800 !important; font-size:21px !important;
}

/* pole kodu BLIK */
#platnosci input[placeholder="Podaj kod BLIK"]{
  border:1px solid #e1e4ec !important; border-radius:10px !important; padding:11px 12px;
  color:#2A304B; box-shadow:none !important; width:100%;
}
#platnosci input[placeholder="Podaj kod BLIK"]:focus{
  border-color:#0A56AD !important; box-shadow:0 0 0 3px rgba(10,86,173,.12) !important; outline:none;
}

/* przycisk BLIK (.btn-dome-second) -> PRIMARY (zielony), bo 80-90% płaci BLIK-iem */
#platnosci .btn-dome-second{
  background:#1f9a47 !important; color:#fff !important; border:0 !important; border-radius:12px !important;
  font-weight:800; letter-spacing:.02em; width:100%; padding:14px 18px !important;
  box-shadow:0 8px 22px rgba(31,154,71,.28); margin-bottom:0 !important;
  transition:transform .15s, box-shadow .15s, background .15s;
}
#platnosci .btn-dome-second:hover{
  background:#1c8e41 !important; transform:translateY(-1px); box-shadow:0 12px 28px rgba(31,154,71,.34);
}
/* brak kodu -> wyszarzony (jasne, że trzeba najpierw wpisać kod BLIK) */
#platnosci .btn-dome-second:disabled,
#platnosci .btn-dome-second[disabled]{
  background:#cdd3df !important; color:#fff !important; box-shadow:none !important;
  opacity:1; cursor:default; transform:none;
}

/* "Opłać zamówienie" (.button-green) -> SECONDARY (outline) + relabel na "Inne metody płatności".
   Tekst siedzi w komponencie Vue, więc podmiana przez ::after (font-size:0 chowa oryginał).
   Czysty wariant docelowy: zmiana stringa w paymentComponent.vue przy następnym buildzie. */
#platnosci .button-green{
  background:#fff !important; color:#0A56AD !important; border:1px solid #cfd9ea !important;
  border-radius:12px !important; font-weight:700; width:100%; padding:13px 18px !important;
  display:flex; align-items:center; justify-content:center; font-size:0 !important;
  box-shadow:none !important; transition:border-color .15s, background .15s;
}
#platnosci .button-green:hover{
  border-color:#0A56AD !important; background:#f3f8ff !important; transform:none; box-shadow:none !important;
}
#platnosci .button-green::after{
  content:"Inne metody płatności  →"; font-size:14px; font-weight:700; letter-spacing:.01em;
  text-transform:none; color:#0A56AD;
}

/* "Wróć do strony głównej" */
#platnosci .text-center a{ color:#9aa0b0 !important; text-decoration-color:#dfe3ec !important; }
#platnosci .text-center a:hover{ color:#0A56AD !important; }

/* --- 5. Stan błędu (gdy brak pozycji) --- */
#platnosci .bg-red-50{
  background:#fbeaeb !important; border:1px solid #f3c9cc; border-radius:14px !important;
}
#platnosci .bg-red-50 .text-red-800{ color:#9a2329 !important; }
#platnosci .bg-red-50 .text-red-400{ color:#BF272E !important; }

/* --- 6. Responsywność --- */
/* tablet+mobile: płatność WYŻEJ — karta podsumowania nad szczegółami */
@media (max-width:1023px){
  #platnosci .grid.grid-cols-1 > section:last-child{ order:-1; margin-bottom:16px; }
}
@media (max-width:768px){
  #platnosci section > .bg-white{ border-radius:14px !important; }
  #platnosci section.lg\:col-span-4 > .bg-white{ padding:20px 18px !important; }
  #platnosci dl > div:last-child dt,
  #platnosci dl > div:last-child dd{ font-size:20px !important; }
}
/* === PŁATNOŚCI :: END === */
/* === MOJE IP :: BEGIN === */
/* ============================================================
   "Sprawdź swoje IP" (pageMojeIP.php)
   Scope: #moje-ip. Tylko warstwa wizualna.
   Tokeny: granat #2A304B, niebieski #0A56AD (hover #094a96),
   muted #6b7180, faint #9aa0b0, linie #edeff4, tło #f7f8fb, Inter.
   vh.css zeruje border-radius globalnie => radius z !important.
   ============================================================ */
#moje-ip,
#moje-ip * { font-family: 'Inter', system-ui, -apple-system, sans-serif; box-sizing: border-box; }

#moje-ip {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 88px;
  text-align: center;
  color: #2A304B;
}

#moje-ip .mip-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9aa0b0;
  margin: 0 0 18px;
}

/* Karta IP */
#moje-ip .mip-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid #edeff4;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(42, 48, 75, .04), 0 14px 44px rgba(42, 48, 75, .08);
  padding: 44px 32px;
  margin-bottom: 28px;
}
#moje-ip .mip-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(10, 86, 173, .05) 0%, transparent 55%);
}

#moje-ip .mip-ip {
  position: relative;
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', Consolas, monospace;
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: #2A304B;
  word-break: break-all;
}
#moje-ip .mip-ip--empty {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 4vw, 26px);
  font-weight: 600;
  color: #9aa0b0;
  letter-spacing: 0;
}

#moje-ip .mip-badge {
  position: relative;
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #0A56AD;
  background: #eef4fc;
  border: 1px solid #dbe8fa;
  padding: 4px 12px;
  border-radius: 999px !important;
}

/* Przycisk Kopiuj */
#moje-ip .mip-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0A56AD;
  color: #fff;
  border: 0;
  border-radius: 12px !important;
  padding: 13px 26px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(10, 86, 173, .22);
  transition: background .15s, transform .15s, box-shadow .15s;
}
#moje-ip .mip-copy:hover {
  background: #094a96;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(10, 86, 173, .28);
}
#moje-ip .mip-copy.is-copied {
  background: #1f9a47;
  box-shadow: 0 8px 22px rgba(31, 154, 71, .26);
}
#moje-ip .mip-copy svg { width: 16px; height: 16px; flex: 0 0 auto; }

#moje-ip .mip-desc {
  max-width: 420px;
  margin: 22px auto 0;
  font-size: 14px;
  line-height: 1.7;
  color: #6b7180;
}

/* User-agent */
#moje-ip .mip-meta {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #edeff4;
  text-align: left;
}
#moje-ip .mip-meta-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9aa0b0;
  margin-bottom: 10px;
}
#moje-ip .mip-ua {
  display: block;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #525a6e;
  background: #f7f8fb;
  border: 1px solid #edeff4;
  border-radius: 12px !important;
  padding: 14px 16px;
  word-break: break-word;
}

/* Tablet */
@media (max-width: 1024px) {
  #moje-ip { padding: 52px 22px 72px; }
}

/* Mobile */
@media (max-width: 768px) {
  #moje-ip { padding: 40px 18px 64px; }
  #moje-ip .mip-card { padding: 32px 20px; border-radius: 16px !important; }
  #moje-ip .mip-copy { width: 100%; justify-content: center; }
}
/* === MOJE IP :: END === */

/* =======================================================
   HERO — kafelki v2: 4 równe karty, kolumna po prawej
   Nadpisuje stare .fcard.c1/.c2/.c3 (pozycjonowanie absolutne).
   Wrapper .fcards jest dzieckiem .hero-inner (nie .hero-r):
   desktop = absolute po prawej; mobile = static pod treścią.
   ======================================================= */

/* kontekst pozycjonowania dla stosu kart */
.hero .hero-inner { position: relative; }

/* stos kart — absolutnie, prawa strona hero, wyśrodkowany w pionie */
.hero-inner > .fcards {
  position: absolute; z-index: 4;
  top: 50%; right: -2%;
  transform: translateY(-50%);
  width: 230px;
  display: flex; flex-direction: column; gap: 14px;
}

/* karta — równa szerokość (100% kontenera) + równa wysokość (min-height) */
.hero-inner .fcards .fcard {
  position: static !important;          /* kasuje stare .c1/.c2/.c3 absolute */
  inset: auto !important;
  width: 100%;
  min-height: 78px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--vhr-line) !important;
  border-radius: 16px !important;
  padding: 14px 16px;
  box-shadow: var(--vhr-sh-md);
}

/* 4. karta — logo (pieczęć) + „Hosting polecany przez" */
.hero-inner .fcards .fcard.c4 .bic {
  width: auto;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.hero-inner .fcards .fcard.c4 .big {
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--vhr-ink);
}

/* ---- Tablet ≤1024: ciaśniejszy stos ---- */
@media (max-width: 1024px) {
  .hero-inner > .fcards { width: 206px; right: 0; gap: 12px; }
  .hero-inner .fcards .fcard { min-height: 70px; padding: 12px 14px; }
}

/* ---- ≤980: hero w 1 kolumnie → karty wypadają z absolute,
        siatka 2×2 POD treścią (kolejność: zdjęcie → treść → karty) ---- */
@media (max-width: 980px) {
  .hero-inner > .fcards {
    position: static;
    transform: none;
    width: 100%;
    max-width: 560px;
    margin: 22px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ---- Mobile ≤768: jedna karta pod drugą ---- */
@media (max-width: 768px) {
  .hero-inner > .fcards {
    grid-template-columns: 1fr;
    gap: 10px;
    max-width: 460px;
  }
  .hero-inner .fcards .fcard { min-height: 64px; }
  .hero-inner .fcards .fcard.c2 { display: flex !important; } /* przywróć — stary break 560px ukrywał c2 */
}

/* =======================================================
   HERO — kafelki v2.1: większe logo JWH (pieczęć) + równe karty
   Nadpisuje wartości z bloku v2 (logo 44->64, karta 78->94).
   ======================================================= */

.hero-inner .fcards .fcard.c4 .bic { height: 64px; }
.hero-inner .fcards .fcard         { min-height: 94px; }

/* logo wciąż bez tła — gdyby pieczęć ginęła na bieli, odkomentuj „podkładkę":
.hero-inner .fcards .fcard.c4 .bic { padding: 4px; }
*/

@media (max-width: 1024px) {
  .hero-inner .fcards .fcard         { min-height: 84px; }
  .hero-inner .fcards .fcard.c4 .bic { height: 56px; }
}

@media (max-width: 768px) {
  .hero-inner .fcards .fcard         { min-height: 78px; }
  .hero-inner .fcards .fcard.c4 .bic { height: 56px; }
}

/* =======================================================
   HERO — kafelki v2.2: kafelek JWH (c4) jako klikalny link
   ======================================================= */

.hero-inner .fcards a.fcard.c4 {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.hero-inner .fcards a.fcard.c4:hover {
  box-shadow: 0 10px 30px rgba(42, 48, 75, .13);
  transform: translateY(-1px);
}
.hero-inner .fcards a.fcard.c4 .big { color: var(--vhr-ink); }
.hero-inner .fcards a.fcard.c4 .sm  { color: var(--vhr-muted); }

/* FIX#3 tooltip .pl transfer — dymek w GÓRĘ + wysoki z-index (poprzednio go zasłaniała następna sekcja) */
.dsearch .ds-tld-pp.ck-tip{position:relative;display:inline-block;}
.dsearch .ds-tld-pp.ck-tip::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);width:max-content;max-width:280px;
  background:#2A304B;color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;
  text-align:left;padding:10px 12px;border-radius:10px!important;
  box-shadow:0 8px 24px rgba(42,48,75,.22);opacity:0;visibility:hidden;
  transition:opacity .15s,transform .15s;z-index:9999;pointer-events:none;}
.dsearch .ds-tld-pp.ck-tip::before{
  content:'';position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#2A304B;opacity:0;visibility:hidden;
  transition:opacity .15s;z-index:9999;}
.dsearch .ds-tld:hover .ds-tld-pp.ck-tip::after,
.dsearch .ds-tld-pp.ck-tip:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dsearch .ds-tld:hover .ds-tld-pp.ck-tip::before,
.dsearch .ds-tld-pp.ck-tip:hover::before{opacity:1;visibility:visible;}

/* ============================================================
   CENNIK — POPRAWKI 4 (haczyki ✓ na zielono + ikona „szybkość")
   dopisz na koniec redesign/redesign.css. Scope: .pricing-redesign
   Powód: vh.css zeruje radius; tu radius nieużywany, ale trzymamy scope.
   ============================================================ */

/* --- haczyki w wierszach cech: pomarańcz -> zielony ---
   checkIfIsIconText() renderuje ikonę do .ft-val.
   Wariant A (najczęstszy w tym motywie): inline <svg> -> nadpis fill.
   !important bije atrybut fill ORAZ ewentualny inline style. */
.pricing-redesign .ft-val svg,
.pricing-redesign .ft-val svg path{ fill:#16A34A !important; }

/* Wariant B (fallback): gdyby haczyk był <img> (plik .svg/.png),
   fill nie zadziała -> przefarbuj filtrem na ten sam zielony.
   Jeśli ikony to inline-svg, ta reguła jest nieszkodliwa. */
.pricing-redesign .ft-val img{
  filter:invert(46%) sepia(83%) saturate(560%) hue-rotate(96deg) brightness(94%) contrast(89%) !important;
}

/* (spójność) haczyki w boksie „Świetny pod WordPress" też na zielono */
.pricing-redesign .ft-wp ul li svg{ fill:#16A34A !important; }

/* VH iconboxes: ikona szybkosc + przycisk CTA v1 — START */

/* (A) boks WP — błyskawica w białym chipie, spójnie z .side-ico (boks dev).
       Wyższa specyficzność (.side-card.wp .side-logo) niż reguła bazowa.
       Chcesz minimum? Usuń pod-blok (A) — zadziała baza (granat, 46px). */
.features .side-card.wp .side-logo{
  width:44px;height:44px;border-radius:11px !important;
  background:#fff;border:1px solid #edeff4;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.features .side-card.wp .side-logo svg{
  width:22px !important;height:22px !important;fill:#0A56AD !important;
}

/* (B) przycisk CTA z CMS (tresc_tekstowa_dolna -> .relative.wp-page).
       Jeśli przycisk ma wlasna klase (.btn / .wp-block-button__link),
       zamien ponizej selektor `.features .wp-page a` na ten z klasa. */
.features .wp-page{text-align:center;margin-top:52px;}
.features .wp-page a{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#0A56AD;color:#fff !important;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:600;line-height:1;
  text-decoration:none;cursor:pointer;padding:15px 30px;border:0;
  border-radius:12px !important;
  box-shadow:0 8px 22px rgba(10,86,173,.22);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.features .wp-page a:hover{
  background:#094a96;color:#fff !important;
  transform:translateY(-1px);box-shadow:0 12px 28px rgba(10,86,173,.28);
}
@media (max-width:768px){
  .features .wp-page{margin-top:36px;}
  .features .wp-page a{width:100%;max-width:340px;padding:15px 24px;}
}

/* VH iconboxes: ikona szybkosc + przycisk CTA v1 — END */

/* ═══════════════════════════════════════════════════════════════
   Program Partnerski 2026 — scoped .pp-*            /* PP2026 v1 */
   Doklejane do redesign.css (po vh.css, priorytet 999).
   Font: Inter. Paleta: tokeny --vhr-*. Bez ciemnych teł.
   vh.css wymusza `*{border-radius:0!important}` → każdy radius z !important.
   Wszystko scoped pod .pp-page — zero globalnych override'ów.
═══════════════════════════════════════════════════════════════ */

.pp-page { background: var(--vhr-bg); }
.pp-page *,
.pp-page *::before,
.pp-page *::after { box-sizing: border-box; }
.pp-page a { text-decoration: none; color: inherit; }
.pp-page ul { list-style: none; margin: 0; padding: 0; }
.pp-page img { display: block; max-width: 100%; }
.pp-page h1, .pp-page h2, .pp-page h3, .pp-page h4, .pp-page p { margin: 0; }

.pp-wrap {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

/* ── Animacje wejścia ─────────────────────────────────────────── */
@keyframes ppFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.pp-page .a1 { animation: ppFadeUp .55s 0s    ease both; }
.pp-page .a2 { animation: ppFadeUp .55s .10s  ease both; }
.pp-page .a3 { animation: ppFadeUp .55s .18s  ease both; }
@media (prefers-reduced-motion: reduce) {
  .pp-page .a1, .pp-page .a2, .pp-page .a3 { animation: none; }
}

/* ── Przyciski ────────────────────────────────────────────────── */
.pp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  padding: 13px 24px; border: none; cursor: pointer; line-height: 1;
  border-radius: var(--vhr-r-md) !important;
  transition: background .15s, transform .12s, border-color .15s, color .15s;
}
.pp-btn svg { width: 15px; height: 15px; }
.pp-btn-primary { color: #fff !important; background: var(--vhr-blue); box-shadow: 0 4px 14px rgba(10,86,173,.25); }
.pp-btn-primary:hover { background: var(--vhr-blue-d); color: #fff !important; transform: translateY(-1px); }
.pp-btn-primary svg { fill: #fff; }
.pp-btn-bordo { color: #fff !important; background: var(--vhr-bordo); box-shadow: 0 4px 14px rgba(191,39,46,.25); }
.pp-btn-bordo:hover { background: #a31f25; color: #fff !important; transform: translateY(-1px); }
.pp-btn-bordo svg { fill: #fff; }
.pp-btn-ghost {
  color: var(--vhr-navy) !important; background: transparent;
  border: 1.5px solid var(--vhr-line2); padding: 11px 22px;
}
.pp-btn-ghost:hover { border-color: var(--vhr-blue); color: var(--vhr-blue) !important; }

/* ── Nagłówki sekcji ──────────────────────────────────────────── */
.pp-page .section-label {
  display: inline-block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--vhr-blue); margin-bottom: 12px;
}
.pp-page .section-title {
  font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 800;
  color: var(--vhr-navy); line-height: 1.22; letter-spacing: -.5px; margin-bottom: 12px;
}
.pp-page .section-sub { font-size: 16px; color: var(--vhr-muted); font-weight: 400; line-height: 1.65; max-width: 560px; }
.pp-page .section-head { margin-bottom: 44px; }
.pp-page .section-head.center { text-align: center; }
.pp-page .section-head.center .section-sub { margin-left: auto; margin-right: auto; }

/* ═══ HERO ════════════════════════════════════════════════════ */
.pp-hero { position: relative; background: var(--vhr-bg); overflow: hidden; }
.pp-hero::before {
  content: ''; position: absolute; top: 0; right: 0; width: 58%; height: 100%;
  background: linear-gradient(to left, #eef5ff 0%, #f3f8ff 42%, rgba(243,248,255,0) 100%);
  z-index: 0;
}
.pp-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--vhr-line); z-index: 1;
}
.pp-hero .pp-wrap {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 55% 45%; gap: 40px;
  align-items: center; min-height: 540px;
}
.pp-hero-l { padding: 64px 0; }

.pp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(191,39,46,.07); border: 1px solid rgba(191,39,46,.16);
  padding: 6px 15px; margin-bottom: 20px;
  border-radius: var(--vhr-r-pill) !important;
}
.pp-eyebrow span { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--vhr-bordo); }
.pp-eyebrow svg  { width: 12px; height: 12px; fill: var(--vhr-bordo); }

.pp-hero h1 {
  font-family: 'Inter', sans-serif; font-size: 40px; font-weight: 800;
  color: var(--vhr-navy); line-height: 1.14; letter-spacing: -1px; margin-bottom: 16px;
}
.pp-hero h1 em { font-style: normal; color: var(--vhr-bordo); }

.pp-hero-sub { font-size: 16px; color: var(--vhr-muted); line-height: 1.65; margin-bottom: 26px; max-width: 410px; }
.pp-hero-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

.pp-hero-trust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pp-hero-trust-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--vhr-muted); }
.pp-hero-trust-item svg { width: 15px; height: 15px; fill: #18a318; flex-shrink: 0; }
.pp-hero-trust-sep { width: 1px; height: 14px; background: var(--vhr-line2); }

/* Prawa kolumna — Ania + karty */
.pp-hero-r { position: relative; height: 500px; display: flex; align-items: flex-end; justify-content: center; }
.pp-hero-photo { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; }
.pp-hero-photo img { height: 480px; width: auto; object-fit: contain; object-position: bottom; }
.pp-hero-nametag {
  position: absolute; bottom: 0; right: 0; z-index: 2;
  background: var(--vhr-navy); padding: 9px 16px;
  border-radius: var(--vhr-r-md) !important;
}
.pp-hero-nametag strong { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.pp-hero-nametag span  { font-size: 11px; color: rgba(255,255,255,.6); }

.pp-stat-cards {
  position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; width: 184px; z-index: 4;
}
.pp-stat-card {
  background: #fff; border: 1px solid var(--vhr-line); padding: 14px 16px;
  box-shadow: var(--vhr-sh-md); border-radius: var(--vhr-r-lg) !important;
}
.pp-stat-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.pp-stat-ico {
  width: 30px; height: 30px; background: rgba(10,86,173,.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: var(--vhr-r-md) !important;
}
.pp-stat-ico svg { width: 15px; height: 15px; fill: var(--vhr-blue); }
.pp-stat-ico.green { background: rgba(24,163,24,.08); }
.pp-stat-ico.green svg { fill: #18a318; }
.pp-stat-ico.bordo { background: rgba(191,39,46,.08); }
.pp-stat-ico.bordo svg { fill: var(--vhr-bordo); }
.pp-stat-num { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; color: var(--vhr-navy); line-height: 1; }
.pp-stat-label { font-size: 11px; color: var(--vhr-faint); line-height: 1.3; display: block; }

/* ── Pasek pod hero ───────────────────────────────────────────── */
.pp-hero-bottom { background: var(--vhr-bordo); padding: 14px 0; width: 100%; }
.pp-hero-bottom .pp-wrap { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.pp-hb-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; }
.pp-hb-item svg { width: 15px; height: 15px; fill: rgba(255,255,255,.8); }
.pp-hb-sep { width: 4px; height: 4px; background: rgba(255,255,255,.35); transform: rotate(45deg); flex-shrink: 0; }

/* ═══ JAK TO DZIAŁA ═══════════════════════════════════════════ */
.pp-how { padding: 64px 0; background: var(--vhr-bg2); }
.pp-steps-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.pp-step {
  flex: 1; background: #fff; border: 1px solid var(--vhr-line);
  padding: 22px 20px; box-shadow: var(--vhr-sh-sm);
  border-radius: var(--vhr-r-lg) !important;
}
.pp-step-num { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--vhr-blue); margin-bottom: 12px; }
.pp-step.bordo .pp-step-num { color: var(--vhr-bordo); }
.pp-step-ico { margin-bottom: 10px; }
.pp-step-ico svg { width: 26px; height: 26px; display: block; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke: var(--vhr-blue); }
.pp-step.bordo .pp-step-ico svg { stroke: var(--vhr-bordo); }
.pp-step h3 { font-size: 14px; font-weight: 700; color: var(--vhr-navy); margin-bottom: 4px; }
.pp-step p  { font-size: 12.5px; color: var(--vhr-muted); line-height: 1.5; }
.pp-step-arr { display: flex; align-items: center; padding-top: 24px; flex-shrink: 0; color: var(--vhr-line2); }
.pp-step-arr svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ═══ PROWIZJE ════════════════════════════════════════════════ */
.pp-commissions { padding: 64px 0; background: var(--vhr-bg); }
.pp-comm-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--vhr-line2); border: 1px solid var(--vhr-line2);
  border-radius: var(--vhr-r-xl) !important; overflow: hidden;
}
.pp-comm-card { background: #fff; padding: 44px 40px; position: relative; overflow: hidden; }
.pp-comm-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--vhr-blue), #1d6fce);
}
.pp-comm-card.bordo::before { background: linear-gradient(90deg, var(--vhr-bordo), var(--vhr-gold)); }
.pp-comm-percent { font-family: 'Inter', sans-serif; font-size: 72px; font-weight: 800; color: var(--vhr-blue); line-height: 1; letter-spacing: -3px; margin-bottom: 10px; }
.pp-comm-card.bordo .pp-comm-percent { color: var(--vhr-bordo); }
.pp-comm-title { font-size: 19px; font-weight: 700; color: var(--vhr-navy); margin-bottom: 8px; }
.pp-comm-desc  { font-size: 15px; color: var(--vhr-muted); line-height: 1.6; max-width: 340px; }
.pp-comm-desc strong { color: var(--vhr-bordo); }
.pp-comm-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; }
.pp-comm-badge span { font-size: 12.5px; color: var(--vhr-muted); }
.pp-comm-badge svg  { width: 13px; height: 13px; fill: #18a318; flex-shrink: 0; }
.pp-comm-deco { position: absolute; bottom: -24px; right: -16px; font-family: 'Inter', sans-serif; font-size: 158px; font-weight: 800; color: rgba(10,86,173,.04); line-height: 1; pointer-events: none; user-select: none; }
.pp-comm-card.bordo .pp-comm-deco { color: rgba(191,39,46,.045); }

/* ═══ PAKIETY ═════════════════════════════════════════════════ */
.pp-packages { padding: 64px 0; background: var(--vhr-bg2); }
.pp-pkg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--vhr-line2); border: 1px solid var(--vhr-line2);
  border-radius: var(--vhr-r-xl) !important; overflow: hidden;
}
.pp-pkg { background: #fff; padding: 30px 26px; position: relative; transition: background .18s; }
.pp-pkg:hover { background: #fcfdff; }
.pp-pkg-icon {
  width: 42px; height: 42px; background: rgba(10,86,173,.08);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
  border-radius: var(--vhr-r-md) !important;
}
.pp-pkg-icon svg { width: 19px; height: 19px; fill: var(--vhr-blue); }
.pp-pkg-icon.gold { background: rgba(200,151,59,.12); }
.pp-pkg-icon.gold svg { fill: var(--vhr-gold); }
.pp-pkg-type { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--vhr-faint); margin-bottom: 5px; }
.pp-pkg-name { font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 700; color: var(--vhr-navy); margin-bottom: 12px; }
.pp-pkg-earn { font-size: 14px; color: var(--vhr-muted); line-height: 1.6; margin-bottom: 18px; }
.pp-pkg-earn strong { color: var(--vhr-bordo); font-size: 15px; }
.pp-pkg-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--vhr-blue); border-bottom: 2px solid rgba(10,86,173,.15); padding-bottom: 3px; transition: border-color .15s, color .15s; }
.pp-pkg-link:hover { border-color: var(--vhr-blue); color: var(--vhr-blue-d); }
.pp-pkg-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pp-pkg-link:hover svg { transform: translateX(3px); }

/* ═══ TWOJE ŚRODKI (light premium) ════════════════════════════ */
.pp-choice { padding: 64px 0; background: var(--vhr-bg); }
.pp-choice .pp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pp-choice-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.pp-choice-opt {
  background: var(--vhr-bg2); border: 1px solid var(--vhr-line); padding: 22px;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  border-radius: var(--vhr-r-lg) !important;
}
.pp-choice-opt:hover { border-color: rgba(10,86,173,.3); box-shadow: var(--vhr-sh-md); transform: translateY(-2px); }
.pp-choice-opt svg { width: 24px; height: 24px; fill: none; stroke: var(--vhr-blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; display: block; }
.pp-choice-opt h4 { font-size: 14px; font-weight: 700; color: var(--vhr-navy); margin-bottom: 6px; }
.pp-choice-opt p  { font-size: 12.5px; color: var(--vhr-muted); line-height: 1.55; }
.pp-choice-r { position: relative; }
.pp-choice-img-wrap {
  overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--vhr-line2);
  box-shadow: var(--vhr-sh-md); border-radius: var(--vhr-r-xl) !important;
}
.pp-choice-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pp-choice-tag {
  position: absolute; bottom: 18px; left: 18px;
  background: var(--vhr-bordo); padding: 11px 18px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 6px 18px rgba(191,39,46,.3);
  border-radius: var(--vhr-r-md) !important;
}
.pp-choice-tag svg  { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.pp-choice-tag span { font-size: 13px; font-weight: 700; color: #fff; }

/* ═══ PARTNERZY ═══════════════════════════════════════════════ */
.pp-partners { padding: 64px 0; background: var(--vhr-bg); border-top: 1px solid var(--vhr-line); }
.pp-partners-logos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--vhr-line2); border: 1px solid var(--vhr-line2);
  margin-top: 36px; border-radius: var(--vhr-r-xl) !important; overflow: hidden;
}
.pp-partner { background: #fff; padding: 34px 24px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.pp-partner:hover { background: var(--vhr-bg2); }
.pp-partner img { height: 34px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.pp-partner:hover img { filter: grayscale(0); opacity: 1; }

/* ═══ YOUTUBE ═════════════════════════════════════════════════ */
.pp-yt { padding: 64px 0; background: var(--vhr-bg2); }
.pp-yt .pp-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pp-yt-visual {
  background: linear-gradient(135deg, #e23a2e, #b5170d);
  aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  box-shadow: var(--vhr-sh-md); border-radius: var(--vhr-r-xl) !important;
}
.pp-yt-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.14) 0%, transparent 60%); }
.pp-yt-play {
  width: 70px; height: 70px; background: rgba(255,255,255,.94);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
  border-radius: var(--vhr-r-lg) !important;
}
.pp-yt-play svg { width: 26px; height: 26px; fill: #d32d22; margin-left: 4px; }
.pp-yt-label {
  position: absolute; bottom: 14px; left: 14px; right: 14px; z-index: 1;
  background: rgba(0,0,0,.55); padding: 11px 14px; backdrop-filter: blur(2px);
  border-radius: var(--vhr-r-md) !important;
}
.pp-yt-label span  { font-size: 13px; font-weight: 700; color: #fff; }
.pp-yt-label small { display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pp-wrap { padding-left: 28px; padding-right: 28px; }
  .pp-hero .pp-wrap { grid-template-columns: 1fr; min-height: 0; }
  .pp-hero-l { padding: 48px 0; }
  .pp-hero-r { display: none; }
  .pp-choice .pp-wrap { grid-template-columns: 1fr; gap: 36px; }
  .pp-choice-r { display: none; }
  .pp-yt .pp-wrap { grid-template-columns: 1fr; gap: 32px; }
  .pp-comm-grid { grid-template-columns: 1fr; }
  .pp-pkg-grid { grid-template-columns: 1fr 1fr; }
  .pp-partners-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pp-wrap { padding-left: 18px; padding-right: 18px; }
  .pp-how, .pp-commissions, .pp-packages, .pp-choice, .pp-partners, .pp-yt { padding: 44px 0; }
  .pp-hero h1 { font-size: 30px; letter-spacing: -.5px; }
  .pp-hero-ctas { flex-direction: column; align-items: stretch; }
  .pp-hero-ctas .pp-btn { justify-content: center; }
  .pp-hero-trust { gap: 8px; }
  .pp-hero-trust-sep { display: none; }
  .pp-hero-bottom .pp-wrap { gap: 12px 24px; justify-content: flex-start; }
  .pp-steps-row { flex-direction: column; }
  .pp-step-arr { display: none; }
  .pp-pkg-grid { grid-template-columns: 1fr; }
  .pp-partners-logos { grid-template-columns: repeat(2, 1fr); }
  .pp-choice-options { grid-template-columns: 1fr; }
  .pp-comm-card { padding: 36px 28px; }
  .pp-comm-percent { font-size: 60px; }
  .section-title { font-size: 26px; }
}

/* ── PP2026 v1.1 — override: szerokość treści jak reszta serwisu (1340/32) + mniejszy odstęp nad CTA ── */
.pp-wrap { max-width: 1340px; padding-left: 32px; padding-right: 32px; }
.pp-hero-sub { margin-bottom: 18px; }
@media (max-width: 1024px) { .pp-wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 768px)  { .pp-wrap { padding-left: 18px; padding-right: 18px; } }

/* ── PP2026 v1.2 — odstęp nad CTA + czerwony pasek zakrywa ucięcie Ani ── */
.pp-hero-sub  { margin-bottom: 28px; }
.pp-hero-r    { min-height: 500px; height: auto; align-self: stretch; }
.pp-hero-bottom { position: relative; z-index: 3; margin-top: -32px; }
@media (max-width: 1024px) { .pp-hero-bottom { margin-top: 0; } }

/* ── PP2026 v1.3 — wyraźna przerwa nad przyciskami hero ── */
.pp-hero-sub { margin-bottom: 40px; }

/* ── PP2026 v1.4 — przerwa 100px nad CTA + podpis Ani nad czerwonym paskiem ── */
.pp-hero-sub      { margin-bottom: 100px; }
.pp-hero-nametag  { bottom: 40px; z-index: 4; }

/* ── PP2026 v1.5 ───────────────────────────────────────────────
   1) Odstęp nad CTA realnie działa: reset `.pp-page p{margin:0}` (0-1-1)
      bił `.pp-hero-sub` (0-1-0). Podbijamy do `.pp-page .pp-hero-sub` (0-2-0).
   2) `.section-label` jako pigułka — jak `.pricing-eyebrow` / „KONTAKT".
─────────────────────────────────────────────────────────────── */
.pp-page .pp-hero-sub { margin-bottom: 100px; }

.pp-page .section-label {
  letter-spacing: .12em;
  background: rgba(10,86,173,.07);
  padding: 7px 15px;
  border-radius: var(--vhr-r-pill) !important;
}

/* ── PP2026 v1.6 — odstęp nad CTA = odstęp pod CTA (22px, symetrycznie) ── */
.pp-page .pp-hero-sub { margin-bottom: 22px; }


/* === KREATOR MIGRACJI :: BEGIN ===========================================
   Scope: #kreator-migracji, klasy .km-*
   System: Inter; granat #2A304B; niebieski #0A56AD (hover #094a96);
   bordo #BF272E; muted #6b7180; faint #9aa0b0; linie #edeff4/#e1e4ec; tło #f7f8fb.
   vh.css zeruje border-radius globalnie => każdy radius z !important.
   ========================================================================= */
#kreator-migracji,
#kreator-migracji * {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

#kreator-migracji {
  background: #f7f8fb;
  color: #2A304B;
  padding: 64px 0 88px;
}

#kreator-migracji .km-container {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Nagłówek ── */
#kreator-migracji .km-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
#kreator-migracji .km-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #0A56AD; background: rgba(10,86,173,.07);
  padding: 7px 15px; border-radius: 999px !important; margin-bottom: 16px;
}
#kreator-migracji .km-title {
  font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: #2A304B; margin: 0 0 14px;
}
#kreator-migracji .km-lead {
  font-size: 16px; line-height: 1.65; color: #6b7180; margin: 0;
}

/* ── Siatka 2-kolumnowa ── */
#kreator-migracji .km-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

/* ── Lewa kolumna: kroki ── */
#kreator-migracji .km-main { display: block; }
#kreator-migracji .km-step {
  position: relative;
  background: #fff;
  border: 1px solid #edeff4;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(42,48,75,.04), 0 8px 24px rgba(42,48,75,.05);
  padding: 30px 32px 30px 78px;
  margin: 0 0 20px;
}
#kreator-migracji .km-step-num {
  position: absolute; left: 28px; top: 30px;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  background: #2A304B; border-radius: 999px !important;
}
#kreator-migracji .km-step-title {
  display: block; float: none; padding: 0; width: auto;
  font-size: 18px; font-weight: 700; color: #2A304B; line-height: 1.3; margin: 0;
}
#kreator-migracji .km-step-desc {
  font-size: 13.5px; color: #6b7180; margin: 6px 0 18px;
}

/* ── Opcje wyboru (label-karty) ── */
#kreator-migracji .km-options { display: flex; flex-direction: column; gap: 12px; }
#kreator-migracji .km-options--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

#kreator-migracji .km-option {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border: 1px solid #e1e4ec;
  border-radius: 14px !important; padding: 16px 18px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s;
}
#kreator-migracji .km-option:hover { border-color: rgba(10,86,173,.45); }
#kreator-migracji .km-option input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
#kreator-migracji .km-option-mark {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid #cdd3df; background: #fff;
  border-radius: 6px !important; position: relative; transition: border-color .15s, background .15s;
}
#kreator-migracji .km-option input[type="radio"] + .km-option-mark { border-radius: 999px !important; }
/* checkbox zaznaczony: niebieskie wypełnienie + ptaszek */
#kreator-migracji .km-option input[type="checkbox"]:checked + .km-option-mark {
  background: #0A56AD; border-color: #0A56AD;
}
#kreator-migracji .km-option input[type="checkbox"]:checked + .km-option-mark::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* radio zaznaczone: niebieska obwódka + kropka */
#kreator-migracji .km-option input[type="radio"]:checked + .km-option-mark { border-color: #0A56AD; }
#kreator-migracji .km-option input[type="radio"]:checked + .km-option-mark::after {
  content: ''; position: absolute; inset: 4px; background: #0A56AD; border-radius: 999px !important;
}
/* karta zaznaczona */
#kreator-migracji .km-option:has(input:checked) {
  border-color: #0A56AD; background: #fbfcff;
  box-shadow: 0 0 0 3px rgba(10,86,173,.10);
}
#kreator-migracji .km-option-body { display: flex; flex-direction: column; gap: 2px; }
#kreator-migracji .km-option-title { font-size: 15px; font-weight: 600; color: #2A304B; line-height: 1.3; }
#kreator-migracji .km-option-sub   { font-size: 13px; color: #6b7180; line-height: 1.4; }

/* ── Pole domeny ── */
#kreator-migracji .km-field { display: flex; gap: 10px; }
#kreator-migracji .km-input {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; color: #2A304B;
  border: 1px solid #e1e4ec; background: #fff;
  border-radius: 12px !important; padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s;
}
#kreator-migracji .km-input::placeholder { color: #9aa0b0; }
#kreator-migracji .km-input:focus {
  outline: 0; border-color: #0A56AD; box-shadow: 0 0 0 3px rgba(10,86,173,.12);
}
#kreator-migracji .km-check-btn {
  flex: 0 0 auto; border: 0; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: #fff; background: #0A56AD;
  border-radius: 12px !important; padding: 14px 24px;
  transition: background .15s, transform .15s;
}
#kreator-migracji .km-check-btn:hover { background: #094a96; }
#kreator-migracji .km-check-btn:active { transform: translateY(1px); }
#kreator-migracji .km-check-btn[disabled] { opacity: .65; cursor: default; }

#kreator-migracji .km-provider-result {
  margin-top: 14px; font-size: 13.5px; line-height: 1.55;
  padding: 12px 16px; border-radius: 12px !important;
}
#kreator-migracji .km-provider-result.is-ok   { color: #0A56AD; background: #eef4fc; border: 1px solid #dbe8fa; }
#kreator-migracji .km-provider-result.is-warn { color: #8a5b00; background: #fff7e8; border: 1px solid #f3e2bd; }

/* ── CTA ── */
#kreator-migracji .km-cta {
  text-align: center; background: #fff;
  border: 1px solid #edeff4; border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(42,48,75,.04), 0 14px 44px rgba(42,48,75,.07);
  padding: 38px 36px; margin-top: 4px;
}
#kreator-migracji .km-cta-title { font-size: 22px; font-weight: 800; color: #2A304B; margin: 0 0 8px; letter-spacing: -.01em; }
#kreator-migracji .km-cta-text  { font-size: 15px; color: #6b7180; margin: 0 0 22px; line-height: 1.6; }
#kreator-migracji .km-cta-btn {
  border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; color: #fff; background: #0A56AD;
  border-radius: 14px !important; padding: 16px 34px;
  box-shadow: 0 8px 22px rgba(10,86,173,.22);
  transition: background .15s, transform .15s, box-shadow .15s;
}
#kreator-migracji .km-cta-btn:hover  { background: #094a96; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(10,86,173,.28); }
#kreator-migracji .km-cta-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(10,86,173,.2); }
#kreator-migracji .km-cta-btn[disabled] { background: #1f9a47; box-shadow: none; cursor: default; }
#kreator-migracji .km-cta-note { font-size: 12.5px; color: #9aa0b0; margin: 16px 0 0; }

/* ── Prawa kolumna: bezpieczna przystań (sticky) ── */
#kreator-migracji .km-aside { align-self: start; }
#kreator-migracji .km-haven {
  position: sticky; top: 96px;
  background: #fff; border: 1px solid #edeff4;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(42,48,75,.04), 0 14px 44px rgba(42,48,75,.08);
  padding: 28px 26px; overflow: hidden;
}
#kreator-migracji .km-haven-panel { display: none; }
#kreator-migracji .km-haven-panel.is-active { display: block; animation: km-fade .22s ease; }
@keyframes km-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#kreator-migracji .km-haven-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  background: rgba(10,86,173,.08); border-radius: 12px !important;
}
#kreator-migracji .km-haven-ico svg { width: 22px; height: 22px; stroke: #0A56AD; fill: none; }
#kreator-migracji .km-haven-title { font-size: 17px; font-weight: 700; color: #2A304B; margin: 0 0 8px; }
#kreator-migracji .km-haven-text  { font-size: 14px; line-height: 1.65; color: #6b7180; margin: 0 0 16px; }
#kreator-migracji .km-haven-list  { list-style: none; margin: 0; padding: 0; }
#kreator-migracji .km-haven-list li {
  position: relative; padding-left: 28px; margin-bottom: 11px;
  font-size: 13.5px; line-height: 1.5; color: #2A304B;
}
#kreator-migracji .km-haven-list li:last-child { margin-bottom: 0; }
#kreator-migracji .km-haven-list li::before {
  content: ''; position: absolute; left: 4px; top: 4px;
  width: 6px; height: 10px; border: solid #18a318; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  #kreator-migracji .km-container { padding: 0 24px; }
  #kreator-migracji .km-grid { grid-template-columns: 1fr; gap: 22px; }
  #kreator-migracji .km-haven { position: static; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  #kreator-migracji { padding: 44px 0 64px; }
  #kreator-migracji .km-container { padding: 0 18px; }
  #kreator-migracji .km-head { margin-bottom: 28px; }
  #kreator-migracji .km-step { padding: 24px 20px; }
  #kreator-migracji .km-step-num { position: static; margin-bottom: 14px; }
  #kreator-migracji .km-step-title { font-size: 17px; }
  #kreator-migracji .km-options--grid { grid-template-columns: 1fr; }
  #kreator-migracji .km-field { flex-direction: column; }
  #kreator-migracji .km-check-btn { width: 100%; }
  #kreator-migracji .km-cta { padding: 28px 20px; }
  #kreator-migracji .km-cta-btn { width: 100%; }
}
/* === KREATOR MIGRACJI :: END ============================================= */


/* === KREATOR MIGRACJI v1.1 :: BEGIN ======================================
   Dopisek do bloku KREATOR MIGRACJI: lista „co przekazać" + „jak przekazać".
   Append na koniec redesign/redesign.css (po bloku v1).
   ========================================================================= */

/* ── Lista rzeczy do przekazania ── */
#kreator-migracji .km-handover { margin: 0 0 22px; }

#kreator-migracji .km-handover-provider { display: inline-flex; align-items: center; margin-bottom: 14px; }
#kreator-migracji .km-handover-provider .km-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: #eef4fc; border: 1px solid #dbe8fa; color: #0A56AD;
  padding: 5px 11px; border-radius: 999px !important;
}
#kreator-migracji .km-handover-provider.is-universal .km-tag {
  background: #f3f4f8; border-color: #e1e4ec; color: #6b7180;
}

#kreator-migracji .km-handover-list { list-style: none; margin: 0; padding: 0; }
#kreator-migracji .km-handover-list li {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 0 12px 26px; border-bottom: 1px solid #edeff4;
  font-size: 14px; line-height: 1.5; color: #2A304B;
}
#kreator-migracji .km-handover-list li:last-child { border-bottom: 0; }
#kreator-migracji .km-handover-list li::before {
  content: ''; position: absolute; left: 4px; top: 18px;
  width: 6px; height: 6px; background: #0A56AD; border-radius: 999px !important;
}
#kreator-migracji .km-handover-list a {
  font-size: 13px; font-weight: 600; color: #0A56AD; text-decoration: none;
  border-bottom: 1px solid rgba(10,86,173,.25); transition: color .15s, border-color .15s;
}
#kreator-migracji .km-handover-list a:hover { color: #094a96; border-color: #094a96; }

/* ── Jak bezpiecznie przekazać dane ── */
#kreator-migracji .km-howto {
  margin-top: 6px; background: #f7f8fb;
  border: 1px solid #edeff4; border-radius: 16px !important; padding: 22px 24px;
}
#kreator-migracji .km-howto-title { font-size: 15px; font-weight: 700; color: #2A304B; margin: 0 0 16px; }
#kreator-migracji .km-howto-steps { list-style: none; margin: 0; padding: 0; }
#kreator-migracji .km-howto-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: #2A304B; margin-bottom: 12px;
}
#kreator-migracji .km-howto-steps li:last-child { margin-bottom: 0; }
#kreator-migracji .km-howto-n {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; background: #0A56AD;
  border-radius: 999px !important;
}
#kreator-migracji .km-howto a {
  color: #0A56AD; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(10,86,173,.25); transition: color .15s, border-color .15s;
}
#kreator-migracji .km-howto a:hover { color: #094a96; border-color: #094a96; }
#kreator-migracji .km-howto-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #e1e4ec;
  font-size: 12.5px; line-height: 1.55; color: #6b7180;
}
/* === KREATOR MIGRACJI v1.1 :: END ======================================== */


/* === KREATOR MIGRACJI v2 :: BEGIN ========================================
   Wersja pytanie→odpowiedź (stepper). Dokłada się do bloku KREATOR MIGRACJI.
   Reużywa: km-container/head/eyebrow/title/lead/grid/aside/haven*/option*/
   field/input/check-btn/cta-btn. Poniżej tylko NOWE elementy.
   Append na koniec redesign/redesign.css.
   ========================================================================= */

/* ── pasek postępu ── */
#kreator-migracji .km-progress {
  display: flex; gap: 8px; max-width: 720px; margin: 0 auto 32px;
}
#kreator-migracji .km-progress-seg {
  flex: 1; height: 5px; background: #e1e4ec; border-radius: 999px !important;
  transition: background .25s;
}
#kreator-migracji .km-progress-seg.is-done    { background: #0A56AD; }
#kreator-migracji .km-progress-seg.is-current { background: #0A56AD; opacity: .55; }

/* ── ekrany (jeden naraz) ── */
#kreator-migracji .km-screen {
  display: none;
  background: #fff; border: 1px solid #edeff4;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(42,48,75,.04), 0 8px 24px rgba(42,48,75,.05);
  padding: 34px 36px;
}
#kreator-migracji .km-screen.is-active { display: block; animation: km-fade .22s ease; }

#kreator-migracji .km-q {
  font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em;
  color: #2A304B; margin: 0 0 8px;
}
#kreator-migracji .km-q-desc { font-size: 14px; line-height: 1.6; color: #6b7180; margin: 0 0 22px; }
#kreator-migracji .km-greet {
  display: inline-block; font-size: 13px; font-weight: 600; color: #0A56AD;
  background: rgba(10,86,173,.07); padding: 6px 13px; border-radius: 999px !important; margin: 0 0 16px;
}
#kreator-migracji .km-screen .km-options { margin-bottom: 26px; }

/* ── separator „albo" ── */
#kreator-migracji .km-or {
  position: relative; text-align: center; margin: 22px 0 16px;
}
#kreator-migracji .km-or::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #edeff4;
}
#kreator-migracji .km-or span {
  position: relative; background: #fff; padding: 0 14px;
  font-size: 12.5px; color: #9aa0b0;
}

/* ── lista rozwijana ── */
#kreator-migracji .km-select {
  width: 100%; font-size: 15px; color: #2A304B; background: #fff;
  border: 1px solid #e1e4ec; border-radius: 12px !important;
  padding: 13px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7180' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
#kreator-migracji .km-select:focus { outline: 0; border-color: #0A56AD; box-shadow: 0 0 0 3px rgba(10,86,173,.12); }

/* ── pasek nawigacji ── */
#kreator-migracji .km-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 26px;
}
#kreator-migracji .km-next {
  border: 0; cursor: pointer; font-size: 15px; font-weight: 700; color: #fff; background: #0A56AD;
  border-radius: 12px !important; padding: 13px 26px;
  transition: background .15s, transform .15s, opacity .15s;
}
#kreator-migracji .km-next:hover  { background: #094a96; }
#kreator-migracji .km-next:active { transform: translateY(1px); }
#kreator-migracji .km-next[disabled] { opacity: .4; cursor: default; }
#kreator-migracji .km-back {
  border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: #6b7180;
  padding: 8px 4px; transition: color .15s;
}
#kreator-migracji .km-back:hover { color: #2A304B; }

/* ── EKRAN 4: podsumowanie ── */
#kreator-migracji .km-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
#kreator-migracji .km-chip {
  font-size: 13px; font-weight: 600; color: #2A304B;
  background: #f7f8fb; border: 1px solid #e1e4ec; padding: 7px 14px; border-radius: 999px !important;
}
#kreator-migracji .km-buy {
  font-size: 13.5px; color: #6b7180; background: #f7f8fb; border: 1px solid #edeff4;
  border-radius: 12px !important; padding: 12px 16px; margin: 0 0 18px;
}
#kreator-migracji .km-buy a { color: #0A56AD; font-weight: 700; text-decoration: none; }
#kreator-migracji .km-buy a:hover { color: #094a96; }

#kreator-migracji .km-screen .km-cta-btn { width: 100%; }

/* ── instrukcja odsłaniana przyciskiem ── */
#kreator-migracji .km-instruct {
  margin-top: 18px; background: #f7f8fb; border: 1px solid #edeff4;
  border-radius: 16px !important; padding: 22px 24px; animation: km-fade .25s ease;
}
#kreator-migracji .km-instruct-lead { font-size: 14px; font-weight: 700; color: #2A304B; margin: 0 0 16px; }
#kreator-migracji .km-instruct-steps { list-style: none; margin: 0; padding: 0; }
#kreator-migracji .km-instruct-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; line-height: 1.55; color: #2A304B; margin-bottom: 18px;
}
#kreator-migracji .km-instruct-steps li:last-child { margin-bottom: 0; }
#kreator-migracji .km-howto-n {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; background: #0A56AD; border-radius: 999px !important;
}
#kreator-migracji .km-act {
  display: inline-flex; align-items: center; margin-top: 8px;
  font-size: 13px; font-weight: 700; color: #0A56AD; text-decoration: none;
  background: #fff; border: 1px solid #0A56AD; border-radius: 10px !important;
  padding: 8px 14px; transition: background .15s, color .15s;
}
#kreator-migracji .km-act:hover { background: #0A56AD; color: #fff; }
#kreator-migracji .km-instruct-note {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #e1e4ec;
  font-size: 12.5px; line-height: 1.55; color: #6b7180;
}

/* ── responsywność ── */
@media (max-width: 768px) {
  #kreator-migracji .km-screen { padding: 24px 20px; }
  #kreator-migracji .km-q { font-size: 19px; }
  #kreator-migracji .km-progress { margin-bottom: 24px; }
  #kreator-migracji .km-act { width: 100%; justify-content: center; }
}
/* === KREATOR MIGRACJI v2 :: END ========================================== */
/* === TOPBAR MOBILE :: BEGIN === */
/* Mobilny UX gornego paska (social-proof + promo) — TYLKO strona glowna.
   Zakotwiczone na .topbar--mob → koszyk (header-wordpress2.php) NIE jest ruszany. */
@media (max-width: 560px) {

  .topbar.topbar--mob { display: block !important; }

  .topbar--mob > .container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    position: relative;
  }

  .topbar--mob .tb-stats {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 84px);
  }
  .topbar--mob .tb-promo { display: none !important; }

  .topbar--mob.tb-promo-on .tb-stats { display: none !important; }
  .topbar--mob.tb-promo-on .tb-promo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: calc(100vw - 84px);
  }

  .topbar--mob .tb-period { display: none !important; }
  .topbar--mob .tb-stat {
    border-left: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
  }
  .topbar--mob .tb-stat ~ .tb-stat { display: none !important; }

  .topbar--mob .tb-stat::before {
    content: "";
    display: inline-block;
    width: 15px; height: 15px;
    margin-right: 7px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%236b7180%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  }

  .topbar--mob .tb-stat::after {
    content: "";
    display: inline-block;
    width: 15px; height: 15px;
    margin-left: 7px;
    vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2316a34a%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2722%207%2013.5%2015.5%208.5%2010.5%202%2017%27%2F%3E%3Cpolyline%20points%3D%2716%207%2022%207%2022%2013%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  }
  .topbar--mob.tb-zero .tb-stat::after { display: none; }

  .topbar--mob .tb-promo {
    gap: 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
  }
  .topbar--mob .tb-promo,
  .topbar--mob .tb-promo-mobile,
  .topbar--mob .tb-promo-mobile * {
    font-weight: 400 !important;
    color: var(--vhr-muted);
  }
  .topbar--mob .tb-promo a,
  .topbar--mob .tb-promo a * { font-weight: 600 !important; }

  .topbar--mob .tb-nav { display: none; }
  .topbar--mob.tb-init .tb-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
  .topbar--mob .tb-dots { display: inline-flex; gap: 4px; }
  .topbar--mob .tb-dots i {
    width: 5px; height: 5px;
    border-radius: 999px !important;
    background: var(--vhr-line2);
    display: block;
    transition: background .25s ease;
  }
  .topbar--mob:not(.tb-promo-on) .tb-dots i:nth-child(1),
  .topbar--mob.tb-promo-on .tb-dots i:nth-child(2) { background: var(--vhr-blue); }

  .topbar--mob .tb-next {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; line-height: 0;
    background: #fff;
    border: 1px solid var(--vhr-line2);
    border-radius: 999px !important;
    color: var(--vhr-muted);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
  }
  .topbar--mob .tb-next:hover,
  .topbar--mob .tb-next:focus-visible {
    color: var(--vhr-blue);
    border-color: var(--vhr-blue);
    outline: none;
  }
  .topbar--mob .tb-next svg { width: 12px; height: 12px; }

  @media (prefers-reduced-motion: no-preference) {
    .topbar--mob .tb-stats,
    .topbar--mob .tb-promo { animation: tbFade .35s ease; }
  }
}
@keyframes tbFade { from { opacity: 0; } to { opacity: 1; } }
/* === TOPBAR MOBILE :: END === */

/* ============================================================
   FIX#4 — tooltip .pl na mobile nie ucinany (body ma overflow-x:hidden)
   + stop iOS auto-zoom inputa. Dopisane na koniec.
   ============================================================ */
.dsearch .ds-tld-pp.ck-tip::after{max-width:min(280px, calc(100vw - 24px));}

@media (max-width:768px){
  .dsearch .ds-tld-pp.ck-tip::after{
    left:0; right:auto; transform:translateX(0) translateY(4px);
    max-width:calc(100vw - 32px); white-space:normal;}
  .dsearch .ds-tld-pp.ck-tip::before{left:18px; transform:translateX(0);}
  .dsearch .ds-tld:hover .ds-tld-pp.ck-tip::after,
  .dsearch .ds-tld-pp.ck-tip:hover::after{transform:translateX(0) translateY(0);}

  /* iOS zoomuje przy inpucie <16px — wymuszamy 16px tylko na mobile */
  .dsearch #dssInput,
  .dsearch #dssInput::placeholder{font-size:16px !important;}
}

/* ============================================================
   FIX#5 — (A) tooltipy w WYNIKACH (.dss-results .ck-tip — nie były objęte
   żadną regułą, bo .ck-tip działał tylko w .ck i .dsearch)
   (B) przywrócenie tokenów --green/--green-new (zniknęła globalna definicja
   → miejsca z var(--green) bez fallbacku przestały być zielone).
   ============================================================ */
.dss-results{--green:#16a34a;--green-new:#22c55e;}

.dss-results .ck-tip{position:relative;}
.dss-results .ck-tip::after{
  content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);width:max-content;
  max-width:min(260px, calc(100vw - 24px));
  background:#2A304B;color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;
  text-align:left;padding:10px 12px;border-radius:10px!important;white-space:normal;
  box-shadow:0 8px 24px rgba(42,48,75,.22);opacity:0;visibility:hidden;
  transition:opacity .15s,transform .15s;z-index:9999;pointer-events:none;}
.dss-results .ck-tip::before{
  content:'';position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#2A304B;opacity:0;visibility:hidden;
  transition:opacity .15s;z-index:9999;}
.dss-results .ck-tip:hover::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.dss-results .ck-tip:hover::before{opacity:1;visibility:visible;}

/* ============================================================
   FIX#6 — (1) odstęp nad zielonym banerem PP;
   (2) tooltip pigułki .pl (transfer): .ds-tld-pp ma white-space:nowrap,
       a ::after to dziedziczył → tekst nie zawijał się i był ucinany.
       Wymuszamy normal, dzięki czemu zawija do max-width:280px (z FIX#4).
   ============================================================ */
.dss-pp-banner{margin-top:20px;}
.dsearch .ds-tld-pp.ck-tip::after{white-space:normal;}