/* =======================================================
   VH.PL REDESIGN — redesign.css
   Ładowany statycznie z priorytetem 999 (po vh.css).
   Inter jest ładowany przez functions.php (Google Fonts, wagi 300-900).
   ======================================================= */

/* --- Font globalny: Inter (1:1 jak strona główna / WZÓR) ---
   !important jest KONIECZNE i celowe — wzorowane na WZORZE, który wymusza
   Inter na html/body/body*. Motyw bazowy używa Tailwind + reguł z ACF/wtyczek
   o wysokiej specyficzności (a legacy @font-face Lato/Source Serif Pro są
   martwe — pliki nie istnieją). Bez !important nadpisania nie złapałyby
   wszystkich elementów. Fallback systemowy dla momentu przed pobraniem webfontu. */
html,
body,
body * {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* --- 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
   ============================================================ */
/* ODSTĘPSTWO OD WZORU (świadome, /pomoc/-specific — nie synchronizować z
   redesign/redesign.css strony sprzedażowej):
   WZÓR ma .contact .container{max-width:1340px;padding:0 32px}, bo tam .container
   to własna klasa. Na /pomoc/ .container to utility Tailwinda (max-width 640/768/
   1024/1280/1536 per breakpoint) i używają jej WSZYSTKIE pozostałe sekcje
   (#header, #category-list-section, last-posts) przez `container mx-auto`.
   Sztywne 1340px + padding 32px robiło sekcję kontaktu ~260px węższą od reszty
   strony. Zdejmujemy max-width i padding z .container → dziedziczy szerokość
   Tailwinda 1:1 jak sąsiednie sekcje; margines poziomy przenosimy na .contact
   (16px = odpowiednik px-4, którego sekcje obok używają na <section>). */
.contact{background:#f7f8fb;padding:72px 16px 84px;}
.contact .container{margin:0 auto;}

.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;}
/* color/hover z !important (odstępstwo od WZORU): tailwind.css ma globalne
   `a:not(<wyjątki>)` i `:hover` dające granat rgb(4 39 76) i pomarańcz #ff6c2c.
   .cc-link nie jest na liście wyjątków, a reguła waży jak ID (`#bottom-box a`
   wewnątrz `:not()`), więc sam `.cc-link{color:...}` (0,1,0) przegrywa. */
.cc-link{font-size:13.5px;font-weight:700;color:#0A56AD !important;display:inline-flex;align-items:center;gap:7px;margin-top:auto;text-decoration:none;}
.contact .contact-card a.cc-link:hover{color:#0A56AD !important;}
.cc-link svg{width:17px;height:auto;fill:currentColor;transition:transform .2s;}
.contact-card:hover .cc-link svg{transform:translateX(4px);}

/* Zdjęcie podkreślenia z linków (/pomoc/-specific, nie ma tego w WZORZE).
   ŹRÓDŁO NIEZDIAGNOZOWANE — reguła defensywna, świadomie. Audyt objął komplet
   tego, co faktycznie ładuje ta strona: tailwind.css, vh.css, redesign.css,
   custom CSS z Customizera (post 23487 — tylko Cookiebot), global-styles,
   classic-theme-styles i contact-form-7. ŻADEN nie podkreśla tych linków,
   a .cc-link ma text-decoration:none od początku (port z WZORU). Mimo to
   podkreślenie jest widoczne — potwierdzone na świeżo dodanym <a> badge'a WHTop.
   Zbijamy więc oba możliwe mechanizmy naraz:
     - text-decoration (+ na przodkach: decoration przodka propaguje na potomków
       i potomek NIE zdejmie jej własnym none),
     - border-bottom — mocna poszlaka, że to właśnie on: vh.css:33 ma
       `border:none!important` na .footer-icons a, a 404.php:162 inline
       `border-bottom:none` na linku. Ktoś już z tym walczył w tym motywie.
   !important, bo sama specyficzność raz już nie wystarczyła.
   UWAGA na zakres: .footer-icons a JEST tu celowo pominięte — te linki mają
   własną ramkę (border:1px solid #edeff4, kafelek 38x38), więc border-bottom:0
   urwałoby im dolną krawędź. */
.contact,
.contact .contact-card,
.contact .contact-card a,
.footer_area.bg-slate-50 .f_widget a,
.footer_area.bg-slate-50 .copy a,
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden a {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* 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){
  /* padding poziomy na .contact (jak wyżej), nie na .container — inaczej
     dublowałby się z 16px z reguły bazowej. 18px = wartość z WZORU. */
  .contact{padding:48px 18px 56px;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-card.discord{grid-column:auto;}
  .contact-card.discord p{max-width:100%;}
}
/* ============================================================================
   STOPKA (/pomoc/ footer.php) — wygląd WZORU na markupie CELU
   ----------------------------------------------------------------------------
   CSS-only: treść i linki bez zmian, lecą z menu WordPressa (footer_nav_1..4,
   te same theme_locations co WZÓR). Zero zmian w HTML.
   Wcześniej stał tu przeportowany 1:1 blok WZORU scope'owany na .site-footer /
   .footer-col / .fs-btn / .footer-bottom / .footer-legal. Był MARTWY — CEL ma
   zupełnie inne klasy (.footer_area / .f_widget / .footer-icons / .copy),
   więc żadna z tych 16 klas nie występowała w HTML (zweryfikowane). Usunięty,
   a jego wygląd odtworzony poniżej na selektorach, które faktycznie trafiają.
   Kotwica: .footer_area. Bez !important — redesign.css ładuje się jako ostatni
   (functions.php:96-98, zależności tailwind-style + mainvh), a każdy selektor
   z prefiksem .footer_area bije utility Tailwinda (0,2,0 > 0,1,0).
   ========================================================================== */

/* Sekcja: tło + górny separator (WZÓR: #f7f8fb / #edeff4). Bije bg-slate-50.
   Szerokość: .container to utility Tailwinda — NIE narzucamy max-width 1340px
   z WZORU, bo stopka byłaby węższa od reszty strony (ta sama pułapka co
   w sekcji kontaktu). Dziedziczy szerokość Tailwinda jak sąsiednie sekcje. */
.footer_area.bg-slate-50 {
  background: #f7f8fb;
  border-top: 1px solid #edeff4;
  padding-top: 56px;
  padding-bottom: 0;
}

/* Górny pasek: logo + social. CEL ma grid-cols-2; WZÓR justify-content:space-between. */
.footer_area.bg-slate-50 .grid.grid-cols-2 {
  margin-bottom: 46px;
}
.footer_area.bg-slate-50 .grid.grid-cols-2 img[alt="VH.PL"] {
  height: 34px;
  width: auto;
  display: block;
}

/* Ikony social = .fs-btn z WZORU. vh.css nakłada na .footer-icons a
   opacity:.5 + filter:saturate(0) — zerujemy, bo WZÓR steruje kolorem.
   KOLOR i BORDER z !important — tailwind.css ma globalną regułę
   `a:not(<lista wyjątków>)` + `:hover`, która każdemu linkowi spoza listy daje
   granatową kreskę `border-bottom:1px dashed` i POMARAŃCZOWY hover (#ff6c2c).
   .footer-icons a NIE jest na tej liście wyjątków. Lista zawiera `#bottom-box a`,
   czyli ID → przez `:not()` cała reguła waży jak ID (1,1,2) i żaden selektor
   oparty na klasach jej nie przebije. Tu !important jest jedynym wyjściem.
   `border: none !important` z vh.css:33 i tak zdejmuje nam ramkę — dlatego
   ramkę też podajemy z !important, inaczej kafelka w ogóle nie widać. */
.footer_area.bg-slate-50 .footer-icons a {
  width: 38px;
  height: 38px;
  border-radius: 10px !important;   /* !important: vh.css ma *{border-radius:0!important} */
  background: #fff;
  border: 1px solid #edeff4 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa0b0 !important;
  opacity: 1;
  filter: none;
  transition: all .15s;
}
.footer_area.bg-slate-50 .footer-icons a:hover {
  color: #0A56AD !important;
  border-color: #0A56AD !important;
  transform: translateY(-2px);
}
.footer_area.bg-slate-50 .footer-icons a svg {
  width: 18px;
  height: 18px;
}

/* Siatka kolumn — proporcje z WZORU (4 menu + logotypy). Bije lg:grid-cols-5. */
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 {
  grid-template-columns: 1.3fr 1fr 1.1fr 1.35fr auto;
  gap: 32px;
  padding-bottom: 48px;
}

/* Nagłówki kolumn (WZÓR: 12px/700/uppercase/#2A304B). Bije text-lg + font-semibold. */
/* font-weight z !important — DRUGI globalny zabójca w vh.css, obok tego od
   border-radius: vh.css:58 ma `.font-semibold,.font-bold{font-weight:500!important}`,
   a nagłówki kolumn mają w HTML class="... font-semibold ...". Bez !important
   nasze 700 przegrywa z tamtym i nazwy renderują się wagą 500. */
.footer_area.bg-slate-50 .f_widget h3 {
  font-size: 12px;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2A304B;
  margin: 0 0 18px;
}

/* Listy linków. Odstęp przez gap zamiast mb-3 na <li>. */
.footer_area.bg-slate-50 .f_widget .link_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer_area.bg-slate-50 .f_widget .link_list li {
  margin: 0;                        /* zeruje mb-3 z li_class */
  color: #6b7180;                   /* bije text-gray-400 z li_class */
  transition: color .15s;
}
/* color z !important — globalna reguła a:not(...) z tailwind.css (waga ID przez
   `#bottom-box a` w :not()) nadaje linkom granat rgb(4 39 76); .link_list a nie
   jest na jej liście wyjątków, więc kolor z <li> by nie zadziałał. */
.footer_area.bg-slate-50 .f_widget .link_list a {
  font-size: 14px;
  line-height: 1.4;
  color: #6b7180 !important;
  text-decoration: none;
}
/* Hover: kolor siedzi na <li> (wp_nav_menu li_class => hover:text-dome-orange),
   a <a> tylko go dziedziczy — dlatego celujemy w li:hover, inaczej pomarańcz
   z Tailwinda by wygrał. Podpinamy też a:hover na wypadek wskazania samego linku. */
.footer_area.bg-slate-50 .f_widget .link_list li:hover,
.footer_area.bg-slate-50 .f_widget .link_list li:hover a,
.footer_area.bg-slate-50 .f_widget .link_list a:hover {
  color: #0A56AD !important;   /* !important: bije a:not(...):hover (waga ID) z tailwind.css */
}

/* Logotypy płatności — WIDOCZNE ZAWSZE (CEL miał hidden xl:flex). */
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden {
  display: flex !important;         /* !important: bije .hidden{display:none} i xl:flex */
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .25s, opacity .25s;
}
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden img:hover {
  filter: grayscale(0);
  opacity: 1;
}
/* Rozmiary logotypów wg WZORU (.fb-payu 92px / .fb-wht 86px). PayU i Blik dzielą
   alt="Logotyp płatności", więc rozróżnia je tylko src. */
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden img[alt="Logotyp płatności"] {
  max-width: 92px;
}
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden img[src*="blik"] {
  max-width: 62px;
}
.footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden img[alt="Listed on WHTop.com"] {
  max-width: 86px;
}

/* Pasek dolny: copyright + linki prawne (WZÓR: .footer-bottom / .footer-legal).
   CEL ma border-gray-400 — zmieniamy na #edeff4 jak w WZORZE. */
.footer_area.bg-slate-50 .container.border-t {
  border-top-color: #edeff4;
  padding-top: 22px;
  padding-bottom: 22px;
  margin-top: 0;
}
.footer_area.bg-slate-50 .copy {
  color: #9aa0b0;
  gap: 14px;
  flex-wrap: wrap;
}
.footer_area.bg-slate-50 .copy p {
  margin: 0;
  font-size: 13px;
  color: #9aa0b0;
}
.footer_area.bg-slate-50 .copy a {
  font-size: 13px;
  color: #9aa0b0;
  text-decoration: none;
  transition: color .15s;
}
.footer_area.bg-slate-50 .copy a:hover {
  color: #0A56AD;                   /* bije hover:text-dome-orange z szablonu */
}

/* responsywność — proporcje z WZORU */
@media (max-width: 1024px) {
  .footer_area.bg-slate-50 .grid.lg\:grid-cols-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
  /* logotypy na pełną szerokość, poziomo — jak .footer-badges w WZORZE */
  .footer_area.bg-slate-50 .grid.lg\:grid-cols-5 > .hidden {
    grid-column: 1 / -1;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .footer_area.bg-slate-50 {
    padding-top: 40px;
  }
  .footer_area.bg-slate-50 .grid.grid-cols-2 {
    margin-bottom: 32px;
  }
  .footer_area.bg-slate-50 .copy {
    justify-content: center;
    text-align: center;
  }
}
/* === STOPKA :: END ======================================================== */
/* ============================================================
   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;
  }
}

/* ── 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;}
/* hover nie może gubić wyśrodkowania (inaczej guzik ucieka poza pole) */
.auth-inline .auth-submit:hover{transform:translateY(calc(-50% - 1px));}

/* 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;}
  .auth-inline .auth-submit:hover{transform:none;}
}
/* ── 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; }






/* === 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;}






/* === KREATOR MIGRACJI :: BEGIN ===========================================
   Landing migracji (Opcja A). Scope: .km-* + drobne dopiski.
   Reużywa klas z redesign.css: .hero, .features, .imgsec, .contact,
   .buy-btn, .pricing-eyebrow. vh.css zeruje radius => radius z !important.
   ========================================================================= */
:root{--km-green:#16a34a;--km-green-l:#7CF0A8;}
.km-trust .container,.km-flow .container,.km-faq .container{max-width:1340px;margin:0 auto;padding:0 32px;}


/* wspólny styl liniowych ikon */
.km-ico svg,.km-cico svg,.km-node svg,.km-cta-link svg,.km-badge svg,.km-panel-safe svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.hero-l .pricing-eyebrow{align-self:flex-start;color:var(--vhr-bordo);background:rgba(191,39,46,.08);}

/* HERO prawa — 3 kafle (2 jasne + 1 ciemny akcent) */
.km-hero-r{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:center;}
.km-tile{position:relative;overflow:hidden;border-radius:var(--vhr-r-xl) !important;padding:24px;min-height:172px;display:flex;flex-direction:column;}
.km-ico{position:relative;z-index:2;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px !important;margin-bottom:18px;}
.km-ico svg{width:23px;height:23px;}
.km-num{position:absolute;z-index:1;right:14px;top:2px;font-weight:800;line-height:1;letter-spacing:-.04em;}
.km-tile h3{position:relative;z-index:2;margin:0 0 6px;font-weight:700;letter-spacing:-.01em;}
.km-tile p{position:relative;z-index:2;margin:0;font-size:13px;line-height:1.5;}
.km-cta-link{position:relative;z-index:2;margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--vhr-blue);text-decoration:none;transition:gap .15s,color .15s;}
.km-cta-link:hover{color:var(--vhr-blue-d);gap:9px;}
.km-cta-link svg{width:13px;height:13px;stroke-width:2.2;}
.km-tile--light{background:#fff;border:1px solid var(--vhr-line);box-shadow:var(--vhr-sh-md);}
.km-tile--light .km-ico{background:rgba(10,86,173,.08);color:var(--vhr-blue);}
.km-tile--light .km-num{color:rgba(42,48,75,.05);font-size:92px;}
.km-tile--light h3{color:var(--vhr-navy);font-size:17px;}
.km-tile--light p{color:var(--vhr-muted);}
.km-tile--dark{grid-column:1 / -1;min-height:196px;color:var(--vhr-navy);background:linear-gradient(150deg,#eff5fe 0%,#e4edfb 100%);border:1px solid #d6e2f6;box-shadow:var(--vhr-sh-md);}
.km-tile--dark::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px 200px at 90% -12%, rgba(255,255,255,.7), transparent 60%);}
.km-tile--dark .km-ico{background:#fff;box-shadow:var(--vhr-sh-sm);color:var(--vhr-blue);}
.km-tile--dark .km-num{color:rgba(10,86,173,.07);font-size:120px;top:-8px;}
.km-tile--dark h3{color:var(--vhr-navy);font-size:20px;}
.km-tile--dark p{color:var(--vhr-muted);font-size:13px;max-width:92%;}
.km-badges{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.km-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--vhr-line);color:var(--vhr-navy);padding:6px 12px;border-radius:999px !important;}
.km-badge svg{width:14px;height:14px;stroke:var(--km-green);}

/* ===== DLACZEGO — jasny klocek ===== */
.km-block{border:1px solid var(--vhr-line2);border-radius:26px !important;overflow:hidden;background:#fff;box-shadow:0 26px 70px rgba(42,48,75,.09);}
.km-block-main{display:grid;grid-template-columns:1.5fr 1fr;}
.km-matrix{display:grid;grid-template-columns:1fr 1fr;}
.km-cell{padding:34px 32px;}
.km-cell:nth-child(1),.km-cell:nth-child(2){border-bottom:1px solid var(--vhr-line);}
.km-cell:nth-child(1),.km-cell:nth-child(3){border-right:1px solid var(--vhr-line);}
.km-cico{width:46px;height:46px;border-radius:13px !important;display:flex;align-items:center;justify-content:center;background:rgba(10,86,173,.07);color:var(--vhr-blue);margin-bottom:16px;}
.km-cico svg{width:23px;height:23px;}
.km-cico--green{background:rgba(22,163,74,.08);color:var(--km-green);}
.km-cell h3{font-size:16.5px;font-weight:700;color:var(--vhr-navy);margin:0 0 7px;}
.km-cell p{font-size:14px;line-height:1.55;color:var(--vhr-muted);margin:0;}

.km-panel{position:relative;overflow:hidden;padding:38px 34px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#eff5fe 0%,#e2ecfb 100%);border-left:1px solid var(--vhr-line);}
.km-panel-safe{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--km-green);background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.18);border-radius:999px !important;padding:6px 13px;margin-bottom:16px;}
.km-panel-safe svg{width:14px;height:14px;}
.km-panel .km-cico{width:52px;height:52px;background:#fff;box-shadow:var(--vhr-sh-sm);color:var(--vhr-blue);margin-bottom:18px;}
.km-panel .km-cico svg{width:25px;height:25px;}
.km-panel h3{font-size:21px;font-weight:700;color:var(--vhr-navy);margin:0 0 10px;letter-spacing:-.01em;}
.km-panel p{font-size:14.5px;line-height:1.6;color:var(--vhr-muted);margin:0 0 18px;}
.km-panel-chips{display:flex;flex-wrap:wrap;gap:8px;}
.km-panel-chips span{font-size:12px;font-weight:600;color:var(--vhr-navy);background:#fff;border:1px solid var(--vhr-line);border-radius:999px !important;padding:6px 13px;}
.km-panel-chips span.green{color:var(--km-green);background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.18);}

/* ===== TIMELINE — wzór „6 kroków" (karty, numery 01, strzałki) ===== */
.km-flow{padding:52px 0;background:var(--vhr-bg2);}
.km-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.km-step-card{position:relative;background:#fff;border:1px solid var(--vhr-line);border-radius:20px !important;padding:28px 26px;box-shadow:var(--vhr-sh-sm);transition:box-shadow .18s,transform .18s;}
.km-step-card:hover{box-shadow:var(--vhr-sh-md);transform:translateY(-2px);}
.km-step-card .num{display:block;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--vhr-blue);margin-bottom:16px;}
.km-step-card .ic{color:var(--vhr-blue);margin-bottom:16px;display:block;}
.km-step-card .ic svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.km-step-card h3{font-size:16px;font-weight:700;color:var(--vhr-navy);margin:0 0 7px;}
.km-step-card p{font-size:13.5px;color:var(--vhr-muted);line-height:1.55;margin:0;}
.km-step-card.accent .num,.km-step-card.accent .ic{color:var(--vhr-bordo);}
.km-step-card:not(:last-child)::after{content:'→';position:absolute;right:-15px;top:50%;transform:translateY(-50%);color:var(--vhr-faint);font-size:16px;z-index:1;}

/* pasek zaufania - delikatny, bez kafelek */
.km-trust{padding:34px 0 6px;}
.km-trust-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:26px 52px;}
.km-trust-item{display:flex;align-items:center;gap:12px;}
.km-trust-ic{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.km-trust-ic svg{width:24px;height:24px;fill:none;stroke:#0A56AD;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.km-trust-ic.ic-blue svg{stroke:#0A56AD !important;}
.km-trust-ic.ic-green svg{stroke:#16a34a !important;}
.km-trust-ic.ic-amber svg{stroke:#f59e0b !important;}
.km-trust-gico{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.km-trust-gico svg{width:20px;height:20px;stroke:none !important;}
.km-trust-gico svg path:nth-child(1){fill:#EA4335 !important;}
.km-trust-gico svg path:nth-child(2){fill:#4285F4 !important;}
.km-trust-gico svg path:nth-child(3){fill:#FBBC05 !important;}
.km-trust-gico svg path:nth-child(4){fill:#34A853 !important;}
.km-trust-num{font-size:17px;font-weight:800;color:var(--vhr-navy);letter-spacing:-.01em;line-height:1.1;}
.km-trust-lbl{font-size:12px;color:var(--vhr-muted);margin-top:2px;}
.km-trust-stars{display:inline-flex;gap:1px;margin-top:3px;}
.km-trust-stars svg{width:12px;height:12px;fill:#C8973B !important;stroke:none !important;}

/* FAQ */
.km-faq{padding:52px 0;background:var(--vhr-bg2);}
.km-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.km-faq-card{background:#fff;border:1px solid var(--vhr-line);border-radius:18px !important;padding:26px 28px;box-shadow:var(--vhr-sh-sm);}
.km-faq-card h3{display:flex;align-items:flex-start;gap:10px;font-size:16px;font-weight:700;color:var(--vhr-navy);margin:0 0 9px;}
.km-faq-card h3 svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;fill:none;stroke:var(--km-green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.km-faq-card p{font-size:14px;line-height:1.6;color:var(--vhr-muted);margin:0;padding-left:29px;}

/* (nametag usunięty - napis Michał Misztal / CEO jest już wypalony na zdjęciu) */

@media(max-width:980px){.km-hero-r{margin-top:6px;}.km-block-main{grid-template-columns:1fr;}.km-cell:nth-child(2){border-right:1px solid var(--vhr-line);}.km-cell:nth-child(3){border-bottom:1px solid var(--vhr-line);}.km-panel{border-left:none;border-top:1px solid var(--vhr-line);}.km-flow-grid{grid-template-columns:1fr 1fr;}.km-step-card::after{display:none;}.km-trust-grid{grid-template-columns:1fr 1fr;}.km-faq-grid{grid-template-columns:1fr;}}
@media(max-width:560px){.km-hero-r{grid-template-columns:1fr;}.km-tile--dark{grid-column:auto;}.km-matrix{grid-template-columns:1fr;}.km-cell{border-right:none !important;}.km-cell:not(:nth-child(4)){border-bottom:1px solid var(--vhr-line);}.km-flow-grid{grid-template-columns:1fr;}.km-trust-grid{grid-template-columns:1fr;}}

@media (max-width:768px){.km-trust .container,.km-flow .container,.km-faq .container{padding:0 18px;}}
/* === KREATOR MIGRACJI :: END ============================================= */


/* ============================================================================
   HEADER LIFTING — CSS-only, zero zmian strukturalnych
   ----------------------------------------------------------------------------
   Delikatny lifting wizualny headera CELU (/pomoc/) w palecie WZORU, wyłącznie
   przez nadpisania CSS na ISTNIEJĄCYCH selektorach. NIE aktywujemy martwych
   klas .nav*/.topbar. Markup, JS burgera i wp_nav_menu pozostają nietknięte.

   Specyficzność: selektory zakotwiczone na #main-nav-section / #navbar-burger
   (ID = 0,1,0,0) biją utility Tailwinda (0,0,1,0) BEZ !important. !important
   użyty WYŁĄCZNIE dla border-radius — w vh.css jest globalny killer
   `* { border-radius: 0 !important }`.

   Dark mode: klasowy (.dark na <html>). Reguły .dark #main-nav-section poniżej.
   ========================================================================== */

/* 1. Pasek nav — jasne tło + subtelny statyczny border (zamiast backdrop-filter).
   Padding/wysokość zostają z Tailwinda (py-2 / lg:py-4). */
#main-nav-section {
  background: #ffffff;
  border-bottom: 1px solid #edeff4;
}

/* 2. Linki menu desktop — kolor ink WZORU + hover w firmowym niebieskim.
   Kolor siedzi na <li> (Tailwind preflight: a{color:inherit}), więc celujemy
   w <a>. Padding istniejący (li: px-2 mb-1) wystarcza — tło hover nie wymaga
   dokładania paddingu; zaokrąglamy róg tła dla schludnego wyglądu. */
#main-nav-section #menu-menu-glowne a {
  color: #1f2438;
  font-size: 14.5px;                 /* P2: rozmiar jak WZÓR (CEL natywnie text-sm=14px) */
  font-weight: 500;                  /* P2: waga jak WZÓR (CEL natywnie font-normal=400) */
  display: inline-block;
  padding: 8px 12px;                 /* "oddech" wokół tekstu jak WZÓR (9px 15px) */
  transition: background-color .15s, color .15s;
  border-radius: 10px !important;
}
#main-nav-section #menu-menu-glowne li:hover a {
  color: #0A56AD;
  background: rgba(31, 36, 56, .05);
  border-radius: 10px !important;    /* kontruje globalny killer *{border-radius:0!important} */
}

/* 3. Przycisk "Kontakt" (.btn-item) — obrys w palecie WZORU + pill.
   Hover: bez pełnego wypełnienia (jak WZÓR), tylko granatowy obrys +
   bardzo subtelne tło, żeby zachować responsywność wizualną. */
#main-nav-section .btn-item {
  border: 0 !important;              /* NIE button — płaski napis z ikoną */
  background: transparent !important;
  color: #1f2438 !important;         /* kolor jak linki menu */
  font-size: 14px;
  font-weight: 600;
  line-height: 1;                    /* równe wyśrodkowanie ikony względem tekstu */
  padding: 6px 0;                    /* płaski link (jak Discord), odstęp daje gap kontenera */
  display: inline-flex;              /* ikona + tekst w jednej linii */
  align-items: center;
  gap: 8px;
}
/* Ikona koperty (kontakt) — jak w headerze WZORU. maska SVG + currentColor,
   więc kolor ikony podąża za kolorem tekstu (light #1f2438 / dark #fff). */
#main-nav-section .btn-item::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
#main-nav-section .btn-item:hover {
  border: 0 !important;
  background: transparent !important;
  color: #0A56AD;                    /* subtelny hover kolorem, jak linki menu */
}

/* 4. Burger — subtelny obrys + zaokrąglenie (rozmiar/pozycja bez zmian). */
#navbar-burger {
  border: 1px solid #e1e4ec;
  border-radius: 12px !important;
}

/* 4b. PROBLEM 1 — naprawa podwójnego/zdeformowanego logo (opcja A).
   Martwy blok z WZORU `.logo img { height:26px; display:block }` (l. ~165)
   łapie logo CELU (`.logo` wrapper istnieje w obu motywach) i:
     - display:block (spec 0,0,1,1) przełamywał Tailwind `.hidden` na ciemnym
       wariancie logo → oba logo widoczne naraz W TRYBIE LIGHT,
     - height:26px deformował wymiar (Tailwind ustawia szerokość w-36/w-52).
   Nie ruszamy starego bloku — przywracamy tu poprawne, ŚWIADOME-TRYBOWO
   przełączanie light/dark + naturalną wysokość. */
#main-nav-section .logo-img { height: 26px !important; width: auto !important; }  /* logo 1:1 jak WZÓR (26px), proporcje zachowane (nadpisuje Tailwind w-36/w-52) */
#main-nav-section .logo-img.hidden { display: none !important; }     /* LIGHT: ukryj ciemny wariant (klasa `hidden`) */
.dark #main-nav-section .logo-img.dark\:hidden { display: none !important; }  /* DARK: ukryj jasny wariant */
.dark #main-nav-section .logo-img.dark\:block { display: block !important; }  /* DARK: pokaż ciemny wariant (wygrywa nad regułą LIGHT wyżej) */

/* 4d. Menu przesunięte w lewo (odpowiednik `.nav-links{flex:1}` na WZORZE).
   `margin-right:auto` na wrapperze menu (.nav-menu-cel) odpycha prawą sekcję
   (Discord + separator + Kontakt) do prawej krawędzi, a menu siada tuż za logo
   (logo ma już margin-right:42px z bloku .logo). Nadpisuje justify-between. */
#main-nav-section .nav-menu-cel { margin-right: auto; }

/* 4e. "/ Pomoc" obok logo — 14px / 500. */
#main-nav-section .logo > span,
#main-nav-section .logo a.font-semibold {
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* 4f. Discord "Porozmawiajmy" — blurple #5865F2, 14px/600, NIE button
   (bez tła i obrysu). !important, bo bazowy .nav-discord jest nadpisywany
   przez style CELU. Ikona (svg) też w #5865F2. */
#main-nav-section .nav-discord {
  color: #5865F2 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1;                    /* równe wyśrodkowanie ikony względem tekstu */
  background: transparent !important;
  border: 0 !important;
}
#main-nav-section .nav-discord svg { fill: #5865F2 !important; }

/* 4g. Prawa sekcja (Discord | separator | Kontakt) — równe odstępy.
   gap kontenera daje spacing; zerujemy asymetryczny margines separatora
   i poziomy padding Discorda, żeby separator miał tyle samo miejsca z obu stron. */
#main-nav-section .nav-right-cel { gap: 12px; }
#main-nav-section .nav-right-cel .nav-discord { padding: 6px 0 !important; }

/* 5. Dark mode — dostrojenie do nowej palety (klasa .dark na <html>).
   Zachowujemy jasny tekst linków; dostrajamy border paska/przycisku/burgera
   i hover linku na cieplejszy kontrast. */
.dark #main-nav-section {
  border-bottom-color: rgba(255, 255, 255, .08);
}
/* Przywróć jasny tekst linków w dark (nasza reguła bazowa ustawia #1f2438
   bezpośrednio na <a>, więc bez tego linki byłyby ciemne na ciemnym tle). */
.dark #main-nav-section #menu-menu-glowne a {
  color: #ffffff;
}
.dark #main-nav-section #menu-menu-glowne li:hover a {
  color: #ffffff;
  background: rgba(255, 255, 255, .06);
  border-radius: 10px !important;
}
.dark #main-nav-section .btn-item {
  color: #ffffff;
}
.dark #main-nav-section .btn-item:hover {
  background: transparent !important;
  color: #6ea8ff;
}
.dark #navbar-burger {
  border-color: rgba(255, 255, 255, .15);
}
/* === HEADER LIFTING :: END ================================================ */


/* ============================================================================
   TOPBAR (promo) — restyle istniejącego banera ACF do wyglądu WZORU
   ----------------------------------------------------------------------------
   CSS-only. Markup `templates/promo/banner-top.php` (#global_banner_top_site)
   NIETKNIĘTY — pasek pokazuje się tylko gdy aktywny w CMS (pole ACF
   `baner_aktywny`), logika bez zmian. Zmieniamy tylko wygląd loud full-width
   (bg-black/bg-dome-blue, biały tekst) na lekki, szary, subtelny — jak
   `.topbar` na stronie sprzedażowej (WZÓR). Tylko promo, bez statystyk.
   ========================================================================== */
#global_banner_top_site {
  background: #f7f8fb !important;
  color: #6b7180 !important;
  border-bottom: 1px solid #edeff4;
  font-size: 12.5px;
}
#global_banner_top_site .container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* promo: kropka + tekst + link w jednej linii (jak .tb-promo WZORU) */
#global_banner_top_site .font-medium {
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
#global_banner_top_site .font-medium::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #BF272E;                /* czerwona kropka jak w topbarze WZORU */
  border-radius: 50% !important;     /* kontruje killer *{border-radius:0!important} */
  flex-shrink: 0;
  display: inline-block;
}
#global_banner_top_site a.custom-link {
  color: #0A56AD !important;         /* link w firmowym niebieskim WZORU */
  font-weight: 700;
  text-decoration: none !important;
}
#global_banner_top_site a.custom-link:hover { text-decoration: underline !important; }
/* przycisk zamknięcia — subtelny, dopasowany do jasnego paska */
#global_banner_top_site button { color: #9aa0b0 !important; }
#global_banner_top_site button:hover { background: transparent !important; color: #6b7180 !important; }
#global_banner_top_site button svg { width: 16px !important; height: 16px !important; }

/* Dark mode — zachowaj lekki, ale ciemniejszy wariant paska */
.dark #global_banner_top_site {
  background: rgba(255, 255, 255, .04) !important;
  color: #b3b9c6 !important;
  border-bottom-color: rgba(255, 255, 255, .08);
}
.dark #global_banner_top_site a.custom-link { color: #6ea8ff !important; }
/* === TOPBAR :: END ======================================================== */


/* ============================================================================
   HERO — WARIANT GRANATOWY (#header, #header-category, #header-page,
   #header-search) — CSS-only
   ----------------------------------------------------------------------------
   REWIZJA 3 (poprzednia iteracja z jasnym tłem + zdjęciem Ani jako
   padding-right się rozjechała: padding-right:340px na granicznych
   szerokościach desktopa zjadał prawie całą dostępną szerokość .w-full,
   ściskając pigułkę wyszukiwania do szerokości placeholdera; jasne ikony
   tła przy opacity .4-.5 były zbyt mocne i nachodziły na tekst). Nowy
   kierunek: ciemny granatowy hero (wzorzec Intercom/Zendesk/Stripe) —
   silny kontrast porządkuje kompozycję, biała pigułka wyszukiwania jest
   naturalnym, jedynym jasnym akcentem. Layout strony głównej naprawiony
   CSS Gridem zamiast padding-right (patrz osobny blok HERO STRONY GŁÓWNEJ
   niżej) — 1fr dla tekstu (elastyczne, nie da się go zjeść na granicznych
   szerokościach tak jak płaskie odjęcie 340px) + stałe 260px na rezerwę
   pod zdjęcie.
   Markup (page-home.php / templates/page-header.php / templates/search.php /
   global_tags) nadal NIETKNIĘTY — tylko CSS.
   Dark mode: granat działa w OBU trybach (kontrastowe tło niezależne od
   reszty strony, jak w Stripe/Intercom) — BRAK osobnych reguł .dark dla
   hero w tym bloku (poprzednio było). Jedyna uwaga: w dark mode reszta
   treści strony (sekcje pod hero) ma tło #111827 (dark:bg-gray-900,
   potwierdzone w dist/css/tailwind.css), a spód gradientu hero to #1d2337
   — bardzo bliskie, ale nie identyczne odcienie, więc przy przewijaniu
   widać BARDZO subtelny stopień między hero a treścią w dark mode. To
   OBSERWACJA, nie naprawiam: zmiana #111827 wpłynęłaby na tło całej reszty
   strony (poza zakresem "hero"), a różnica jest na tyle mała (oba to ciemne
   granaty), że raczej nie zgrzyta — oceń wizualnie, zgłoś jeśli jednak razi. */

/* --- Tło: granatowy gradient + bardzo dyskretna jasna tekstura ikon
   (hero-icons-dark.svg — te same kształty co jasna wersja z poprzedniej
   iteracji, ale stroke #aab6dd + opacity .12 jednolicie na wszystkich 4
   grupach, żeby były ledwo dostrzegalną fakturą, nie elementem graficznym).
   cover (nie stały rozmiar 1400px jak poprzednio) — przy tak niskiej
   opacity ryzyko "najechania na tekst" jest już pomijalne, a cover lepiej
   wypełnia i wąski mobile, i szeroki desktop bez pustych pasów. */
#header,
#header-category,
#header-page,
#header-search {
  background:
    url('img/hero-icons-dark.svg') center / cover no-repeat,
    linear-gradient(135deg, #2A304B 0%, #232941 55%, #1d2337 100%) !important;
}

/* --- Layout: wyśrodkowanie (kategoria/artykuł/wyniki wyszukiwania) --------
   Bez zmian względem poprzedniej iteracji — te 3 warianty nie były
   zgłoszone jako rozjechane, zmienia się tylko kolorystyka niżej.
   #header (strona główna) zostaje tu jako scentrowana BAZA/mobile — nowy
   grid dla desktopu jest w osobnym bloku niżej, w @media (min-width:1024px),
   więc poniżej 1024px strona główna nadal korzysta z tej samej scentrowanej
   reguły co pozostałe warianty (punkt 6 zgłoszenia: mobile ma zostać
   wyśrodkowany, jedna kolumna). */
#header .container > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#header .w-full {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#header-category .container > div,
#header-page .container > div,
#header-search .container > div {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
#header-category .container > div > .flex-1:first-child,
#header-page .container > div > .flex-1:first-child,
#header-search .container > div > .flex-1:first-child {
  padding-right: 0 !important;
  width: 100%;
}
#header-category .container > div > .flex-1:last-child,
#header-page .container > div > .flex-1:last-child,
#header-search .container > div > .flex-1:last-child {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Rytm pionowy hero podstron (POPRAWKA: eyebrow → wyszukiwarka = 20px,
     stały niezależnie od tego, ile marginesu ma sam eyebrow/opis w
     pierwszej kolumnie — patrz .header-tags margin-top niżej dla
     wyszukiwarka → pigułki = 16px). */
  margin-top: 20px !important;
}
#header-category .container > div > .flex-1:last-child > div,
#header-page .container > div > .flex-1:last-child > div,
#header-search .container > div > .flex-1:last-child > div {
  margin-left: auto;
  margin-right: auto;
}

/* --- Tytuł: DWA różne traktowania na granacie -----------------------------
   Podstrony (kategoria/artykuł): eyebrow "Centrum pomocy" (::before,
   własna linia) + nazwa kategorii jako właściwy nagłówek pod spodem —
   zamiast dawnego jednolinijkowego "CENTRUM POMOCY · Nazwa" złożonego
   całością wielkimi literami. Kolor eyebrow bez zmian (#8d97b8, czytelny
   na granacie w obu trybach, bez osobnej reguły .dark — jak poprzednio). */
#header-category h1,
#header-page h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: #ffffff !important;
  margin: 4px 0 18px;
}
#header-category h1::before,
#header-page h3::before {
  content: 'Centrum pomocy';
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8d97b8;
  margin-bottom: 6px;
}
/* #header-search: <p>Wyniki wyszukiwania:</p> (bezpośrednie dziecko pierwszej
   kolumny) dostaje eyebrow; <h1>{fraza}</h1> (rodzeństwo, ten sam poziom)
   to realna treść (fraza szukana), nie nawigacja — biały, nie eyebrow,
   zawężone do bezpośrednich dzieci żeby NIE złapać zagnieżdżonego <p> z
   licznikiem wyników (patrz blok „Opis" niżej). */
#header-search .container > div > .flex-1:first-child > p {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8d97b8 !important;
  margin-bottom: 6px;
}
#header-search .container > div > .flex-1:first-child > h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #ffffff !important;
  margin-top: 0;
  margin-bottom: 6px;
}
/* Strona główna: NIE eyebrow — prawdziwy, duży nagłówek powitalny. Na
   jasnym tle z poprzednich iteracji miał sens jako wyciszona etykieta (obok
   wyszukiwarki jako "bohatera"); na granacie to ON jest wizualnym punktem
   startowym, więc wraca do dużej formy zamiast małej uppercase. */
/* Dymek wypowiedzi wokół nagłówka: h2 i p nie mają wspólnego wrappera w
   markupie (page-home.php — h2/p to luźne rodzeństwo w .w-full obok reklamy,
   wyszukiwarki i .header-tags), więc dymek CSS-only jest TYLKO na h2 —
   inline-block + tło + ramka, żeby dopasował się do szerokości tekstu jak
   bąbelek. Opis (#header p, niżej) świadomie zostaje BEZ własnego tła, pod
   dymkiem. Ogonek (::after, wskazujący na zdjęcie Ani) jest dodany osobno
   w bloku HERO STRONY GŁÓWNEJ (@media min-width:1024px) — tam, gdzie Ania
   w ogóle się pojawia; dzięki temu na mobile znika automatycznie, bez
   dodatkowej reguły ukrywającej. */
#header h2 {
  position: relative;
  display: inline-block;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.015em;
  text-transform: none;
  color: #ffffff !important;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px 16px 4px 16px !important;
  padding: 18px 22px;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}

/* --- Opis pod tytułem -------------------------------------------------------
   Kategoria/artykuł: nadal ukryty (szum, dostępny w breadcrumb — breadcrumb
   to OSOBNA sekcja .page_breadcrumb poza #header-*, własne jasne tło,
   nieruszona). Home/wyniki wyszukiwania: zostaje, przebarwiony pod granat. */
#header-category .font-extralight,
#header-category .taxonomy-description,
#header-page .font-extralight {
  display: none !important;
}
#header p {
  color: #aab3cf;
  text-align: center;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  font-size: 13.5px;
}
#header p a { color: #8fb8ef !important; }
#header-search .font-extralight {
  color: #aab3cf;
  text-align: center;
  font-size: 13px;
  margin-bottom: 4px;
}

/* --- Wyszukiwarka: bez zmian strukturalnych (nadal biała flex-pigułka na
   .banner_search_form, jedynym wspólnym wrapperze inputa+buttona) — tylko
   mocniejszy cień pod ciemne tło i jaśniejszy focus ring (niebieski z
   poprzedniej iteracji zlewałby się z granatem). */
#header .banner_search_form,
#header-category .banner_search_form,
#header-page .banner_search_form,
#header-search .banner_search_form {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  background: #fff;
  border-radius: 999px !important;
  box-shadow: 0 10px 34px rgba(10, 14, 30, .35);
  padding: 5px 5px 5px 22px !important;
  max-width: 560px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Lupka NIE jest już przed inputem — przeniesiona na button "Szukaj"
   (patrz ::before na button[type="submit"] niżej). Input zaczyna się od
   razu od paddingu wrappera, bez ikony przed sobą. */
#header input#s,
#header-category input#s,
#header-page input#s,
#header-search input#s {
  width: 100% !important;
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  font-size: 15px;
}
#header input#s:focus,
#header-category input#s:focus,
#header-page input#s:focus,
#header-search input#s:focus,
#header input#s:focus-visible,
#header-category input#s:focus-visible,
#header-page input#s:focus-visible,
#header-search input#s:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#header .banner_search_form:focus-within,
#header-category .banner_search_form:focus-within,
#header-page .banner_search_form:focus-within,
#header-search .banner_search_form:focus-within {
  box-shadow: 0 10px 34px rgba(10, 14, 30, .35), 0 0 0 3px rgba(143, 184, 239, .25);
}
#header .banner_search_form button[type="submit"],
#header-category .banner_search_form button[type="submit"],
#header-page .banner_search_form button[type="submit"],
#header-search .banner_search_form button[type="submit"] {
  position: static;
  flex-shrink: 0;
  height: 42px;
  padding: 0 28px !important;
  margin: 0 0 0 8px !important;
  background: #0A56AD !important;
  color: #fff !important;
  font-weight: 500;
  border-radius: 999px !important;
  transform: none;
}
/* Lupka przeniesiona z inputa na button, przed tekstem "Szukaj" —
   biała wersja ikony (search-white.svg) pod granatowe tło buttona. */
#header .banner_search_form button[type="submit"]::before,
#header-category .banner_search_form button[type="submit"]::before,
#header-page .banner_search_form button[type="submit"]::before,
#header-search .banner_search_form button[type="submit"]::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
  background-image: url('img/icons/search-white.svg');
  background-size: contain;
  background-repeat: no-repeat;
}
#header .banner_search_form button[type="submit"]:hover,
#header-category .banner_search_form button[type="submit"]:hover,
#header-page .banner_search_form button[type="submit"]:hover,
#header-search .banner_search_form button[type="submit"]:hover { background: #094a96 !important; }

/* --- Chipsy → linia "Popularne:" na granacie -------------------------------
   Powrót do pigułek (poprzednia iteracja spłaszczyła je do gołego tekstu
   z separatorami · — na granacie to się gubiło). Kontener jako flex+wrap
   zamiast block/text-align, żeby pigułki łamały się do kolejnych wierszy
   zamiast rozjeżdżać się jednym ciągiem tekstu; etykieta "Popularne:"
   (::before na kontenerze) staje się wtedy zwykłym flex-itemem obok pigułek.
   Separatory · usunięte (zbędne przy pigułkach z własnym tłem/ramką). */
#header .header-tags,
#header-category .header-tags,
#header-page .header-tags,
#header-search .header-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  color: #8d97b8;
  margin-top: 16px !important;
}
#header .header-tags::before,
#header-category .header-tags::before,
#header-page .header-tags::before,
#header-search .header-tags::before {
  content: 'Popularne: ';
  color: #8d97b8;
}
#header .header-tags a,
#header-category .header-tags a,
#header-page .header-tags a,
#header-search .header-tags a {
  display: inline-block !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  margin: 0 !important;
  font-size: 12.5px;
  font-weight: 500;
  color: #cdd9f5 !important;
  text-decoration: none;
  white-space: nowrap;
}
#header .header-tags a:hover,
#header-category .header-tags a:hover,
#header-page .header-tags a:hover,
#header-search .header-tags a:hover {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
}
/* Jedna linia na szerokim desktopie: kontener (bazowo flex-wrap:wrap —
   reguła wyżej, obowiązuje domyślnie na całej szerokości <1280px, więc
   mobile/tablet "wraca" do zawijania bez osobnej reguły) dostaje
   nowrap dopiero od 1280px, gdzie kolumna tekstu ma już realnie miejsce
   (patrz zdjęty cap na .w-full w bloku HERO STRONY GŁÓWNEJ). Pigułki
   jednocześnie ścieśnione (mniejszy padding/font), żeby etykieta +
   4 tagi miały większą szansę zmieścić się w jednej linii. Nie mam tu
   podglądu w przeglądarce, więc nie mogę potwierdzić że przy najdłuższych
   etykietach faktycznie się mieszczą — jeśli nadal łamią linię przy
   1280px, do zrobienia zostaje tylko zdjęcie tego bloku (fallback:
   zawijanie, zgodnie z poleceniem). */
@media (min-width: 1280px) {
  #header .header-tags,
  #header-category .header-tags,
  #header-page .header-tags,
  #header-search .header-tags {
    flex-wrap: nowrap;
  }
  #header .header-tags a,
  #header-category .header-tags a,
  #header-page .header-tags a,
  #header-search .header-tags a {
    padding: 5px 12px !important;
    font-size: 12px;
  }
}
/* Duplikat "Jak założyć pocztę e-mail?" (pozycje 5-6 z 7 w ACF) nadal
   wycięty jako efekt uboczny limitu do 4 widocznych linków — bez zmian od
   poprzedniej iteracji, patrz historia zgłoszeń. */
#header .header-tags a:nth-child(n+5),
#header-category .header-tags a:nth-child(n+5),
#header-page .header-tags a:nth-child(n+5),
#header-search .header-tags a:nth-child(n+5) {
  display: none !important;
}

/* Pionowy padding hero na podstronach (kategoria/artykuł/wyniki
   wyszukiwania) — za dużo pustej przestrzeni przy zwartej treści
   (eyebrow + nazwa kategorii + wyszukiwarka + pigułki). Tylko te 3 id —
   strona główna (Ania) ma osobny #header, nietknięty tutaj.
   Zwężone od desktopu (≥1024px, jak reszta bloku HERO STRONY GŁÓWNEJ) —
   na mobile Tailwind `py-4` (16px) już jest zwarty, bez potrzeby zmian. */
@media (min-width: 1024px) {
  #header-category,
  #header-page,
  #header-search {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
/* === HERO GRANATOWY :: END =================================================== */


/* ============================================================================
   HERO STRONY GŁÓWNEJ — layout gridowy + zdjęcie Ani (body.home #header)
   ----------------------------------------------------------------------------
   REWIZJA (naprawa rozjechania z poprzedniej iteracji): padding-right:340px
   na `.w-full` zastąpiony CSS Gridem na jego RODZICU (`.container > div`) —
   1fr dla tekstu + stałe 260px na rezerwę pod zdjęcie. 1fr nigdy nie
   "zjada" zawartości tak agresywnie jak płaskie odjęcie 340px potrafiło na
   granicznych szerokościach (stąd wcześniej ściśnięta do placeholdera
   pigułka wyszukiwania) — dodatkowo `min-width:0` na `.w-full` (grid
   item) wyłącza domyślne `min-width:auto`, które samo w sobie potrafi
   wymusić przepełnienie kolumny przez nieskracalną zawartość.
   Zdjęcie Ani NIE jest osobnym elementem gridu — w DOM strona główna ma
   tylko JEDNĄ realną kolumnę (.w-full), więc zdjęcie zostaje jako
   PIERWSZA warstwa background na całym #header, pozycjonowane do
   prawego-dolnego rogu; druga kolumna gridu (260px) tylko rezerwuje dla
   niego pustą przestrzeń, żeby tekst w pierwszej kolumnie na nie nie
   nachodził. Lokalna kopia zamiast hotlinka do WZORU — jak poprzednio,
   ale .webp (29KB) zamiast .png (318KB) z tego samego powodu co ostatnio:
   za ciężkie na hero ładowany na każdej wizycie strony głównej, ta sama
   przezroczystość zachowana. Źródło: WZÓR, ACF pole `zdjecie`, layout
   `header_ze_zdjeciem`, strona główna WZORU (post 285) →
   wp-content/uploads/2025/02/aniaheader2.png, 500×635, RGBA.
   NIE sprawdzałem krawędzi wycięcia na granacie (brak przeglądarki) — jeśli
   widać jasne halo wokół sylwetki, ZATRZYMAJ się i pokaż zrzut przed
   kombinowaniem z plikiem, zgodnie z poleceniem.
   overflow NIE jest tu ustawiony na hidden (poprzednia iteracja go miała,
   niepotrzebnie — tła nigdy nie wychodzą poza własny box niezależnie od
   overflow). Teraz brak overflow:hidden jest wręcz wymagany: poświata
   (::after) celowo bleeduje 140px NAD sekcję (top:-140px), więc obcięłaby
   się, gdyby #header miał overflow:hidden.
   Tylko desktop (≥1024px, cały blok w media query) — na mobile zdjęcie
   500×635 przy krótkim hero wyglądałoby źle/dominująco, a grid nie ma sensu
   przy jednej kolumnie: mobile zostaje przy scentrowanym layoutcie z bloku
   HERO GRANATOWY wyżej (bez zdjęcia, bez poświaty — sama reguła stamtąd,
   nienadpisana tutaj, bo ta cała sekcja jest w @media). */
@media (min-width: 1024px) {
  body.home #header {
    position: relative;
    background:
      url('img/hero-ania.webp') calc(100% - 100px) bottom / auto 88% no-repeat,
      url('img/hero-icons-dark.svg') center / cover no-repeat,
      linear-gradient(135deg, #2A304B 0%, #232941 55%, #1d2337 100%) !important;
    min-height: 460px;
  }
  /* Poświata odsunięta razem ze zdjęciem: Ania jest teraz ~100px od prawej
     krawędzi (nie przyklejona do niej), więc `right` liczony od tej samej
     krawędzi też musi urosnąć o mniej więcej tyle, żeby poświata została
     ZA sylwetką, a nie wisiała samotnie po jej prawej stronie. */
  body.home #header::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50% !important;
    right: 100px;
    top: -140px;
    background: radial-gradient(circle, rgba(90, 110, 180, .15) 0%, transparent 70%);
    pointer-events: none;
  }
  /* Dymek nagłówka (h2::after) — ogonek TYLKO tutaj, w tym samym media
     query co zdjęcie Ani: na mobile nie ma na co wskazywać, więc znika
     razem z resztą bloku zamiast przez osobną regułę ukrywającą. */
  body.home #header h2::after {
    content: '';
    position: absolute;
    right: -9px;
    bottom: 14px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 10px solid rgba(255,255,255,.085);
  }
  body.home #header .container > div {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 24px;
    align-items: center;
    text-align: left;
  }
  /* Faktyczny ogranicznik szerokości: markup (page-home.php) ma
     `<div class="w-full lg:max-w-xl">` — Tailwind `.lg\:max-w-xl` to
     max-width:36rem (576px), aktywne właśnie od 1024px w górę. To ONA,
     nie .banner_search_form, ścinała kolumnę tekstu (i wyszukiwarkę w
     środku) do ułamka dostępnej szerokości grida, zanim wyszukiwarka
     w ogóle zdążyła dojść do własnego max-width. Zdejmujemy cap tutaj,
     żeby 1fr z grida (patrz .container > div niżej) mógł się realnie
     wykorzystać. */
  body.home #header .w-full {
    align-items: flex-start;
    text-align: left;
    min-width: 0;
    max-width: none;
  }
  /* Brakujący "mostek" szerokości: .w-full jest flex-column z
     align-items:flex-start (dziedziczone z bazowej reguły #header .w-full,
     display:flex;flex-direction:column — nienadpisane tutaj), więc jej
     dzieci NIE rozciągają się same do pełnej szerokości rodzica, tylko
     dopasowują do treści. .search-master (bezpośredni rodzic formularza,
     templates/search.php) nie miał ŻADNEJ reguły width — stąd realna
     szerokość formularza (mimo Tailwindowego w-full i naszego
     max-width:900px niżej) wynikała z naturalnej szerokości treści
     (input+button), nie z dostępnego miejsca. */
  body.home #header .search-master {
    width: 100%;
  }
  body.home #header .banner_search_form {
    max-width: 750px;
    margin-left: 0;
    margin-right: 0;
  }
  body.home #header p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  body.home #header .header-tags {
    /* kontener jest teraz flex (pigułki) — text-align nic by tu nie zrobił */
    justify-content: flex-start;
  }
}
/* === HERO STRONY GŁÓWNEJ (GRID + ANIA) :: END =============================== */


/* ============================================================================
   IKONY KATEGORII (#category-list-section) — CSS-only, pseudo-elementy ::before
   ----------------------------------------------------------------------------
   Karty nie mają klas per-kategoria → identyfikacja przez :nth-child
   (kolejność POTWIERDZONA przez get_categories(): 1 WordPress, 2 Poczta,
   3 Hosting, 4 Domeny, 5 Zarządzanie, 6 Rozliczenia — NIE alfabetyczna mimo
   orderby=name, więc nie wyprowadzać jej z samego SQL).
   Ikona OBOK nagłówka → ::before na h2, nie na .doc_tag_title: h2 ma Tailwind
   .flex.items-center, więc ::before staje się flex-itemem i sam ląduje w linii
   z tekstem, wyśrodkowany w pionie. (Na .doc_tag_title nie da się tego zrobić —
   ten div zawiera blokowe h2, ikona zostałaby w osobnej linii.)
   Ścieżki względne do redesign.css → _redesign/img/icon-*.svg.
   ========================================================================== */

/* wspólne: ikona-badge obok nagłówka kategorii (flex-item w h2) */
#category-list-section .col-lg-4 .doc_tag_title h2::before {
  content: '';
  flex: 0 0 auto;              /* bez kurczenia przy długich nazwach kategorii */
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 10px;
}
/* per-kategoria (nth-child na kartach .col-lg-4 w .grid) */
#category-list-section .grid > .col-lg-4:nth-child(1) .doc_tag_title h2::before { background-image: url('img/icon-wordpress.svg'); }
#category-list-section .grid > .col-lg-4:nth-child(2) .doc_tag_title h2::before { background-image: url('img/icon-mail.svg'); }
#category-list-section .grid > .col-lg-4:nth-child(3) .doc_tag_title h2::before { background-image: url('img/icon-hosting.svg'); }
#category-list-section .grid > .col-lg-4:nth-child(4) .doc_tag_title h2::before { background-image: url('img/icon-domeny.svg'); }
#category-list-section .grid > .col-lg-4:nth-child(5) .doc_tag_title h2::before { background-image: url('img/icon-zarzadzanie.svg'); }
#category-list-section .grid > .col-lg-4:nth-child(6) .doc_tag_title h2::before { background-image: url('img/icon-rozliczenia.svg'); }

/* Nagłówek kategorii: mniejsza czcionka + zerowanie pl-2.
   font-size bije Tailwind .text-xl (20px) i .lg\:text-3xl (30px) na linku.
   padding-left: Tailwind pl-2 (8px) dołożyłoby się do margin-right ikony (10px)
   → 18px zamiast 10px. Odstęp ikona↔tekst ma dawać wyłącznie ten margin-right.
   Bez gap na h2: pusty <div class="img"> (kategorie nie mają logo_kat) też jest
   flex-itemem, więc gap dodałby odstęp również wokół niego. */
#category-list-section .col-lg-4 .doc_tag_title h2 > a {
  font-size: 18px !important;
  line-height: 1.3 !important;
  padding-left: 0 !important;
}
@media (min-width: 1024px) {
  #category-list-section .col-lg-4 .doc_tag_title h2 > a {
    font-size: 25px !important;
  }
}

/* Odstęp hero → kategorie: zmniejszony o 50%. Bije Tailwind .mt-4 (16px) i
   .lg\:mt-20 (80px) na #category-list-section. Padding-bottom #header
   (py-4 / lg:py-24) celowo nietknięty — decyzja z 2026-07-14. */
#category-list-section {
  margin-top: 8px !important;
}
@media (min-width: 1024px) {
  #category-list-section {
    margin-top: 40px !important;
  }
}

/* Linki artykułów: chowamy istniejącą ikonę dokumentu (SVG absolute) i zerujemy
   jej padding, zamiast niej icon-link jako inline ::before przed tytułem. */
#category-list-section .col-lg-4 ul.list-none li.relative { padding-left: 0 !important; }
#category-list-section .col-lg-4 ul.list-none li.relative > svg { display: none !important; }
#category-list-section .col-lg-4 li a.custom-link::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('img/icon-link.svg');
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 6px;
  vertical-align: middle;
}
/* Podkreślenie tylko pod tekstem, nie pod ikoną. Kreska to nie text-decoration
   (globalnie a{text-decoration:none}), tylko Tailwind border-b + border-dashed
   + border-dome-blue na <a> — a że ikona jest ::before TEGO <a>, kreska biegła
   też pod nią. Tekst jest opakowany w <span>, więc przenosimy kreskę na <span>.
   currentColor: .text-dome-blue i .border-dome-blue to ten sam rgb(4 39 76),
   hover (dome-granat) również → kolor śledzi tekst, bez duplikowania wartości.
   Hover w Tailwind zmienia wyłącznie styl kreski: dashed → solid. */
#category-list-section .col-lg-4 li a.custom-link { border-bottom: 0 !important; }
#category-list-section .col-lg-4 li a.custom-link > span {
  border-bottom: 1px dashed currentColor;
}
#category-list-section .col-lg-4 li a.custom-link:hover > span {
  border-bottom-style: solid;
}

/* Hover linków w sekcji: #0A56AD — ten sam token co hover linków górnego menu
   (.nav-links > a:hover { color: var(--vhr-blue) }, --vhr-blue: #0A56AD).
   Wcześniej nie było tu ŻADNEJ naszej reguły hover — kolory brały się wprost
   z utility Tailwinda w categories-single.php:
     - nagłówek h2 > a : hover:text-dome-orange  → pomarańcz (to było widać)
     - a.custom-link   : hover:text-dome-granat  → rgb(4 39 76), czyli bez zmiany
     - a.learn_btn     : .learn_btn:hover z app.css:3078 → cyjan #10b3d6
   Bez !important: prefiks #category-list-section daje (1,3,2), co bije zarówno
   utility Tailwinda (0,2,0), jak i .learn_btn:hover z app.css (0,1,0). */
#category-list-section .col-lg-4 .doc_tag_title h2 > a:hover,
#category-list-section .col-lg-4 li a.custom-link:hover,
#category-list-section .col-lg-4 a.learn_btn:hover {
  color: #0A56AD;
}
/* === IKONY KATEGORII :: END =============================================== */


/* ============================================================================
   KAFELKI BLOGA (.blog-post — templates/last-posts.php) — CSS-only
   ----------------------------------------------------------------------------
   Ilustracja przez ::before na kafelku (brak <img> w markupie, zero zmian w HTML).
   Kafelek ma Tailwind p-4 / lg:p-8 → ::before renderowałby się WEWNĄTRZ paddingu,
   dlatego marginesy ujemne = -padding, żeby grafika szła na full-bleed do krawędzi;
   overflow:hidden + radius 12px przycinają jej górne rogi.
   lg = 1024px (dist/css/tailwind.css:4095). Ścieżki względne do redesign.css
   → _redesign/blog/illustration-*.svg. SVG mają viewBox 0 0 400 150 = 1:1 z height.
   Rotacja 3 ilustracji przez :nth-of-type — rodzeństwo to same .blog-post (div).
   Dark mode pominięty świadomie: header.php nie dodaje klasy .dark, warianty
   dark:* w tym szablonie nigdy się nie włączają.
   ========================================================================== */

/* 1. Kafelek: ramka zamiast cienia (Tailwind shadow-md / hover:shadow-xl / rounded-md) */
.blog-post {
  border-radius: 12px !important;
  border: 1px solid #e1e4ec !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.blog-post:hover {
  box-shadow: none !important;
}

/* 2. Ilustracja nad treścią — full-bleed przez marginesy ujemne pod p-4.
   background-size: contain, NIE cover. Powód: box ma zmienną proporcję
   (2.20:1 przy 1024px … 5.12:1 na tablecie, bo poniżej lg kafelki przestają
   być w 3 kolumnach i idą na pełną szerokość), a SVG ma sztywne 2.67:1.
   cover skalowałby do wypełnienia → na tablecie zoom 1.92x i obcięcie ~48%
   wysokości artworku. contain zawsze mieści całą ilustrację bez zoomu.
   background-color #eef0fb = dokładnie kolor <rect> tła w każdym z 3 SVG,
   więc letterbox po bokach jest niewidoczny (szew się nie ujawnia). */
.blog-post::before {
  content: '';
  display: block;
  height: 150px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #eef0fb;
  margin: -1rem -1rem 1rem -1rem;
}
@media (min-width: 1024px) {
  /* pod lg:p-8 */
  .blog-post::before {
    margin: -2rem -2rem 1.25rem -2rem;
  }
}

/* 3. Rotacja cykliczna 3 ilustracji (nie przypisane na stałe do artykułu) */
.blog-post:nth-of-type(3n+1)::before { background-image: url('blog/illustration-domain-hosting.svg'); }
.blog-post:nth-of-type(3n+2)::before { background-image: url('blog/illustration-mail.svg'); }
.blog-post:nth-of-type(3n)::before   { background-image: url('blog/illustration-migration.svg'); }

/* 4. Data (.date-text) — drugoplanowa: mniejsza i jaśniejsza od zajawki.
   Bije Tailwind text-sm (14px) i text-black. Marginesy nadpisują my-2 (8px
   góra i dół) — chcemy ciasno pod tytułem, luźniej nad zajawką. */
.blog-post .date-text {
  font-size: 11.5px !important;
  color: #9aa0b0 !important;
  margin-top: 2px !important;
  margin-bottom: 8px !important;
}

/* 5. Tytuł (bije Tailwind text-xl / lg:text-2xl / font-normal / text-black) */
.blog-post .post_title {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #1f2438 !important;
}

/* 6. Opis */
.blog-post > p {
  font-size: 13.5px !important;
  color: #6b7180 !important;
  line-height: 1.5 !important;
}

/* 7. "Więcej" — strzałka SVG ma stroke="currentColor", więc dziedziczy kolor.
   font-weight 600: bije .learn_btn{font-weight:500} z app.css:3061 samą
   specyficznością (0,2,0 > 0,1,0), bez !important. */
.blog-post .learn_btn {
  color: #0A56AD !important;
  font-weight: 600;
  text-decoration: none !important;
}

/* 8. Hovery: Tailwind daje hover:text-dome-orange (pomarańcz), ale po ustawieniu
   kolorów z !important w pkt 5/7 hover i tak by nie zadziałał — musi być tu.
   #0A56AD = ten sam token co hover linków menu (--vhr-blue) — ujednolicone.
   UWAGA: na .learn_btn kolor spoczynkowy to również #0A56AD (pkt 7), więc ten
   hover jest dla niego wizualnie bezczynny — zmiana widoczna tylko na tytule. */
.blog-post .post_title:hover,
.blog-post .learn_btn:hover {
  color: #0A56AD !important;
}
/* === KAFELKI BLOGA :: END ================================================= */


/* ============================================================================
   SIDEBAR KATEGORII — lewa kolumna (sidebar.php, `.sidebar_cat_nav`)
   ----------------------------------------------------------------------------
   Include współdzielony przez category.php, tag.php, single.php, index.php —
   celowo stylujemy klasami (nie ID), żeby efekt objął od razu wszystkie te
   widoki, tak jak sam markup jest współdzielony.
   Lista jest zawsze płaska: sprawdzone w DB (wp_terms/wp_postmeta menu
   „Menu boczne", term_id 18) — 6 pozycji typu `category`, wszystkie
   parent=0, mimo że wp_nav_menu() woła z depth=2. WordPress i tak doklei
   `.current-menu-item` na pozycji odpowiadającej oglądanej kategorii
   (dopasowanie po _menu_item_object_id) — wykorzystujemy to do podświetlenia
   aktywnej pozycji bez żadnej zmiany w PHP.
   Bazowe kolory („czarny" / pomarańcz hover / granat current) są już zdefinio-
   wane w dist/css/tailwind.css (.nav-sidebar li a). Ta sama specyficzność
   (klasa+tag+tag), redesign.css ładuje się później → wygrywamy bez !important
   na kolorach; !important tylko na border-radius (killer *{border-radius:0
   !important} w vh.css).
   REWIZJA (zgłoszenie: za mało kontrastu na aktywnym elemencie): tint
   #eef2f8 + lewy pasek zamieniony na pełne niebieskie tło #0A56AD + biały
   tekst — !important, bo to świadome przebicie równej specyficzności, nie
   tylko tie-break przez kolejność ładowania. Lewy border na current-menu-item
   zdjęty (przezroczysty) — na pełnym wypełnieniu ten sam kolor co border był
   niewidoczny, więc zbędny. Hover na NIEaktywnych pozycjach celowo NIE jest
   niebieski (inaczej myliłby się z aktywną) — atrament #1f2438 + jasne tło.
   ========================================================================== */
/* REWIZJA (wyciszenie typografii): z 600/1f2438 na eyebrow — mała uppercase
   etykieta nawigacyjna, spójna z „Na skróty" w sidebarze artykułu (patrz
   blok SIDEBAR „Na skróty" niżej — ten sam rejestr dla obu etykiet). */
.sidebar_cat_nav h5 > a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9aa0b0;
}
.sidebar_cat_nav h5 > a:hover { color: #0A56AD; }

.nav-sidebar { display: flex; flex-direction: column; gap: 2px; }
.nav-sidebar li { margin-bottom: 0; }               /* zastępujemy li_class mb-3 spójnym gap */
.nav-sidebar li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px !important;
  color: #6b7180;
  font-size: 14px;
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-sidebar li a:hover { background: #f4f5f8; color: #1f2438; }
.nav-sidebar li.current-menu-item > a {
  background: #0A56AD !important;
  color: #ffffff !important;
  font-weight: 500;
  padding: 9px 12px;
  border-left-color: transparent;
}

.dark .sidebar_cat_nav h5 > a:hover { color: #6ea8ff; }
.dark .nav-sidebar li a { color: #b3b9c6; }
.dark .nav-sidebar li a:hover { background: rgba(255, 255, 255, .04); color: #ffffff; }
.dark .nav-sidebar li.current-menu-item > a {
  background: #0A56AD !important;
  color: #ffffff !important;
  border-left-color: transparent;
}
/* === SIDEBAR KATEGORII :: END ============================================= */


/* ============================================================================
   KARTY ARTYKUŁÓW W LIŚCIE (templates/post-loop.php, wrapper `.category-list-posts`)
   ----------------------------------------------------------------------------
   Ten sam include renderuje listę na category.php / tag.php / index.php —
   scope przez wrapper `.category-list-posts` (wspólny we wszystkich trzech).
   Karta sama nie ma własnej klasy (tylko utility Tailwinda), stąd selektor
   po układzie klas zamiast po jednej unikalnej — `.relative.shadow-md` to
   wystarczająco specyficzna kombinacja w obrębie tego wrappera.
   Powłoka karty (ramka zamiast cienia, radius 12px) = ten sam język co
   .blog-post z last-posts.php — spójność między siatką na home a listą tutaj.
   Chipsy tagów = ten sam wygląd co .header-tags w hero (pigułka, obramowanie
   #e1e4ec, niebieski tekst) — trzeci wariant tego samego komponentu w projekcie,
   celowo powtórzony 1:1 zamiast wymyślać nowy.
   `.tag-item` i `.learn_btn` są na liście wyjątków globalnego
   `a:not(...)` (tailwind.css:2520) — nie dostają podkreślenia/koloru stamtąd,
   więc kolory poniżej to jedyne źródło prawdy dla tych linków.

   NAGŁÓWEK „Artykuły w kategorii: [nazwa]" (h3, dziecko .category-list-posts,
   unikalne dla category.php — index.php/tag.php mają inny nagłówek):
   REWIZJA (zgłoszenie: duplikuje ciężar wizualny z H1 w hero) — z dużego
   czarnego tekstu na eyebrow label (małe uppercase, niebieski). Tekst
   „Artykuły w kategorii: [nazwa]" wstawiany dynamicznie w 2 <span> + <strong>
   (single_cat_title()) — nie do skrócenia bez zmiany PHP, więc cały ciąg
   dostaje ten sam lekki styl. Pomarańczowa „kreska" (.bg-dome-orange, 12×4px
   blok, NIE ikona/svg) kolidowałaby wizualnie z nowym, dużo drobniejszym
   nagłówkiem — ukryta.
   REWIZJA kart: cień przywrócony (subtelny, stały — bez eskalacji na hover,
   stąd :hover z tą samą wartością, żeby zablokować hover:shadow-lg z PHP),
   padding/margin zamienione z responsywnych Tailwindowych (p-4/lg:p-8,
   mb-4/lg:mb-8) na sztywne wartości z zgłoszenia.
   REWIZJA tagów (zgłoszenie: mylą się z chipsami hero) — z niebieskiej
   pigułki na szarą, neutralną; kolor przechodzi w niebieski dopiero na hover
   (odróżnienie stanu spoczynkowego od interaktywnego). */
.category-list-posts h3 {
  align-items: baseline;
}
.category-list-posts h3 span,
.category-list-posts h3 strong {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0A56AD !important;
}
.category-list-posts h3 .bg-dome-orange { display: none !important; }

.category-list-posts > .relative.shadow-md {
  border-radius: 12px !important;
  border: 1px solid #e1e4ec !important;
  box-shadow: 0 1px 3px rgba(31, 36, 56, .06) !important;
  padding: 20px !important;
  margin-bottom: 14px !important;
}
.category-list-posts > .relative.shadow-md:hover { box-shadow: 0 1px 3px rgba(31, 36, 56, .06) !important; }

.category-list-posts h2 > a {
  color: #1f2438 !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}
.category-list-posts h2 > a:hover { color: #0A56AD !important; }

.category-list-posts .flex-1.font-extralight {
  color: #5b6270 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

.category-list-posts img.object-cover { border-radius: 8px !important; }

/* REWIZJA 2 (zgłoszenie: szare na szarym, brak koloru) — z neutralnej
   szarości na stonowany niebieski tint. Jaśniejszy/mniej nasycony niż
   marki #0A56AD używany na chipsach hero (.header-tags), więc nie
   konkuruje z nimi wizualnie, ale wyraźnie odróżnia się od poprzedniej
   szarej wersji. Hover: tylko border ciemnieje do pełnego #0A56AD — tekst
   zostaje #0A56AD bez zmiany (już jest docelowym kolorem hover, spójnie
   z resztą projektu), więc feedback daje wyłącznie obrys. */
/* REWIZJA (ujednolicenie pigułek — patrz też .header-tags a w bloku hero):
   obrys z jaśniejszego #d6e6f7 na pełny #0A56AD (ten sam odcień co tekst,
   1.5px), font-weight z 400 na 600. Tło zostaje jasnym tintem #eaf1fb —
   nadal outline pill, nie płaski przycisk. Hover: ciemniejszy niebieski
   #094a96 na obu (border+tekst), ten sam wzorzec co .header-tags a:hover. */
/* KOREKTA (patrz .header-tags a — ten sam błąd, ta sama poprawka): border
   z powrotem 1px, kolor obwódki = kolor tła (jasny blok, obwódka niewidoczna),
   tekst zostaje jedynym mocnym akcentem. Hover: obwódka ujawnia się w
   nasyconym kolorze, tekst bez zmiany.
   ROZSZERZENIE: selektor poszerzony z `.post_tag_section a.tag-item` na
   `a.tag-item` (bez wymogu wrappera) — post_tags() na single.php ("słowa
   kluczowe:") woła dokładnie tę samą funkcję/klasę, ale BEZ owijającego
   .post_tag_section (ten div istnieje tylko w post-loop.php). Jedna reguła
   pokrywa oba miejsca zamiast kopii — .tag-item to w całym motywie
   wyłącznie wyjście post_tags(), więc bez ryzyka kolizji. */
/* Selektor zdublowany na `li.nav-item > a.tag-item` (post_tags() owija
   każdy link w `<li class="nav-item">`, functions.php:397) — defensywnie,
   gdyby gdzieś w kaskadzie coś łapało po samym `.tag-item` z inną
   specyficznością niż licząc przez rodzica; obie reguły dają identyczny
   wynik, więc nie ma znaczenia która "wygra". Cel: WSZYSTKIE tagi
   (włącznie z pierwszym) identyczny wariant wypełniony, bez wyjątków. */
.category-list-posts a.tag-item,
.category-list-posts li.nav-item > a.tag-item {
  background: #eaf1fb !important;
  border: 1px solid #eaf1fb !important;
  border-radius: 999px !important;
  color: #0A56AD !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 3px 10px !important;
  transition: border-color .15s;
}
.category-list-posts a.tag-item:hover,
.category-list-posts li.nav-item > a.tag-item:hover {
  background: #eaf1fb !important;
  border-color: #0A56AD !important;
}

/* Etykieta „słowa kluczowe:" (single.php, span bez unikalnej klasy —
   `.mb-2.text-sm.mr-2.block.text-black.w-28`, poprzedza post_tags()).
   Zawężone do bezpośredniego rodzica `.flex.items-center` wewnątrz
   `.category-list-posts`, żeby nie złapać niczego z kart listy (h3/h2 tam
   nie mają tej kombinacji klas). Wyciszona do rejestru drugorzędnego tekstu,
   spójnie z resztą etykiet w tym kroku. */
.category-list-posts > .flex.items-center > span.text-sm {
  font-size: 11px !important;
  color: #6b7180 !important;
  font-weight: 400;
  text-transform: none;
}

/* learn_btn: kolor spoczynkowy = kolor hover (jak w .blog-post .learn_btn) —
   świadomie bez wizualnej zmiany na hover, ujednolicone z resztą projektu. */
.category-list-posts .learn_btn,
.category-list-posts .learn_btn:hover {
  color: #0A56AD !important;
  font-weight: 600 !important;
}

.dark .category-list-posts h3 span,
.dark .category-list-posts h3 strong { color: #6ea8ff !important; }
.dark .category-list-posts > .relative.shadow-md {
  border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}
.dark .category-list-posts h2 > a { color: #ffffff !important; }
.dark .category-list-posts h2 > a:hover { color: #6ea8ff !important; }
.dark .category-list-posts .flex-1.font-extralight { color: #cbd2e0 !important; }
.dark .category-list-posts > .flex.items-center > span.text-sm { color: #cbd2e0 !important; }
.dark .category-list-posts a.tag-item {
  background: rgba(10, 86, 173, .25) !important;
  border: 1px solid rgba(10, 86, 173, .25) !important;
  color: #9cc4f2 !important;
  font-weight: 500 !important;
}
.dark .category-list-posts a.tag-item:hover {
  border-color: #6ea8ff !important;
}
.dark .category-list-posts .learn_btn,
.dark .category-list-posts .learn_btn:hover { color: #6ea8ff !important; }
/* === KARTY ARTYKUŁÓW (LISTA) :: END ======================================== */


/* ============================================================================
   PRAWY SIDEBAR „Proponowane wpisy" (templates/sidebar-category-box.php,
   `.article-single__sidebar`) — CSS-only
   ----------------------------------------------------------------------------
   Include współdzielony przez category.php / tag.php / index.php. Domyślna
   gałąź PHP (kategoria — nasz przypadek) renderuje `<ul><li class="relative
   pl-8">` z ikoną svg (absolute, stroke=currentColor) + `a.custom-link`
   (dashed underline, bez owijającego <span>, więc — inaczej niż w
   categories-single.php — kreskę można dać wprost na <a>).
   Wcześniej box nie miał żadnej własnej „skorupy" (tła/obramowania) — dodajemy
   kartę w tonie `.contact`/`.fs-btn` (bg #f7f8fb, border #edeff4), żeby
   sidebar wizualnie odcinał się od listy artykułów obok.
   Gałąź is_search() w tym samym pliku renderuje `.blog-post` (już ostylowane
   globalnie — patrz KAFELKI BLOGA) i dziedziczy tę kartę za darmo. Gałąź
   is_tag() (wp_tag_cloud) świadomie NIE ruszona w tym kroku — poza zakresem
   zgłoszenia (prawy sidebar na podstronie kategorii).
   REWIZJA: border ujednolicony na #e1e4ec (token używany wszędzie indziej
   w projekcie, #edeff4 był jednorazowym odstępstwem), padding zmniejszony
   do 16px, linki przebarwione z atramentu na niebieski — hover zostaje
   tym samym niebieskim (bez wizualnej zmiany koloru, spójnie z resztą
   projektu), widoczny feedback daje wyłącznie kreska dashed→solid.
   Odstęp między pozycjami listy podniesiony do 10px (nadpisuje mb-2 z PHP). */
.article-single__sidebar {
  background: #f7f8fb;
  border: 1px solid #e1e4ec;
  border-radius: 12px !important;
  padding: 16px;
}
.article-single__sidebar h5 {
  color: #1f2438 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
}
.article-single__sidebar li { margin-bottom: 10px; }
/* REWIZJA 2 (zgłoszenie: ikona dokumentu ≠ ikona z kafelków kategorii na
   home) — svg dokumentu (functions.php nie ruszamy, to inline markup w
   sidebar-category-box.php) chowamy i podmieniamy na icon-link.svg jako
   ::before na <li> (ta sama grafika co #category-list-section .custom-link,
   patrz blok IKONY KATEGORII — plik leży w `_redesign/img/icon-link.svg`,
   NIE w `img/icons/`). Rozmiar/pozycja 1:1 z oryginalnym svg (`w-6 h-6
   absolute left-0`, li ma `pl-8` = 32px zarezerwowane) — zmienia się
   wyłącznie grafika. icon-link.svg ma wpisany na sztywno stroke #0A56AD
   (nie currentColor), stąd brak osobnej reguły koloru dla tej ikony. */
.article-single__sidebar li > svg { display: none !important; }
/* REWIZJA 3 (zgłoszenie: strzałka krzywa — siedziała za wysoko względem
   tekstu). Przyczyna: ::before było `position:absolute; top:2.4px` na
   <li>, liczone pod stałe proporcje ikony/linii — nie odporne na
   font-size/line-height <a> (tu 13px/1.4 = 18.2px, ikona 19.2px). Ten sam
   problem co niżej w YARPP i ta sama poprawka co już sprawdzona w Spisie
   treści (`#post-content-area > ul:first-of-type > li > a`, patrz tamten
   blok): ikona przenosi się z <li>::before (absolute) na <a>::before,
   <a> dostaje `display:inline-flex; align-items:center` — ikona centruje
   się automatycznie względem realnej wysokości linii, bez zgadywania `top`.
   `li.relative` traci `pl-8` (32px gutter zarezerwowany pod stary,
   absolutny svg) — ikona żyje teraz w normalnym flow <a>, gutter zbędny.
   Border-bottom (dashed, z PHP) zamieniony na text-decoration — z tego
   samego powodu co w Spisie treści: border pod inline-flex rysowałby się
   pod CAŁYM boksem (ikona+tekst), text-decoration na flex-itemach (::before
   jest blockified jako dziecko inline-flex) rysuje się tylko pod tekstem. */
.article-single__sidebar li.relative { padding-left: 0 !important; }
.article-single__sidebar li a.custom-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0A56AD !important;
  border-bottom: none !important;
  text-decoration-line: underline !important;
  text-decoration-style: dashed !important;
  text-decoration-color: #0A56AD !important;
  text-underline-offset: 3px;
  font-size: 13px;
  line-height: 1.4;
}
.article-single__sidebar li a.custom-link::before {
  content: '';
  flex-shrink: 0;
  width: 19.2px;
  height: 19.2px;
  background-image: url('img/icon-link.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
.article-single__sidebar li a.custom-link:hover {
  color: #0A56AD !important;
  text-decoration-style: solid !important;
}

.dark .article-single__sidebar {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}
.dark .article-single__sidebar h5 { color: #ffffff !important; }
.dark .article-single__sidebar li a.custom-link { color: #6ea8ff !important; text-decoration-color: #6ea8ff !important; }
.dark .article-single__sidebar li a.custom-link:hover { color: #6ea8ff !important; }
/* === PRAWY SIDEBAR „PROPONOWANE WPISY" :: END ============================== */


/* ============================================================================
   „POWIĄZANE ARTYKUŁY" (YARPP, `yarpp-template-list.php`) — CSS-only
   ----------------------------------------------------------------------------
   Wtyczka Yet Another Related Posts Plugin (wp-content/plugins/
   yet-another-related-posts-plugin) jest aktywna i sama, bez wywołania w
   motywie, dokleja się do treści artykułu (YARPP_Core::get_template_content(),
   hook the_content) — dlatego brak get_template_part()/include w single.php.
   Renderuje nasz theme'owy szablon `yarpp-template-list.php` (root motywu,
   YARPP go tam znajduje po nazwie), owinięty przez wtyczkę w
   `<div class="yarpp yarpp-related ...">` — `.yarpp-related` jest jedyną
   stałą klasą tego wrappera (reszta to warianty domain/template), nigdzie
   indziej w motywie nieużywana, więc bezpieczna do scope'owania.
   Markup w środku (yarpp-template-list.php):
     h5.flex.items-center (nagłówek)
       span.w-3.h-1.mt-1.bg-dome-orange  -> mała pomarańczowa kreska-akcent
       span.pl-2 "Powiązane artykuły"     -> tekst nagłówka
     ul.list-none.not-default-list
       li.relative.pl-8
         svg.w-6.h-6.absolute.left-0      -> ikona dokumentu (inline, stroke=currentColor)
         a.custom-link.border-b.border-dashed -> tytuł (podkreślenie stałe w spoczynku)
         p.text-sm                        -> zajawka
   Ten sam wzorzec podmiany ikony co sidebar „Proponowane wpisy" wyżej i
   spis treści niżej: oryginalny <svg> chowamy, icon-link.svg (strzałka,
   stroke #0A56AD na sztywno w pliku) wchodzi jako ::before na <li>. */
.yarpp-related h5 {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 650;
  font-style: normal;
  color: #1f2438 !important;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
/* kreska "–" (span pomarańczowy) — ukryta, zastąpiona akcentem pod całym
   nagłówkiem (::after), spójnym z #post-content-area h2 w treści artykułu. */
.yarpp-related h5 span:first-child { display: none; }
.yarpp-related h5 span:last-child {
  padding-left: 0;
}
.yarpp-related h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #0A56AD;
  border-radius: 999px !important;
}

.yarpp-related ul li { margin-bottom: 16px; }
.yarpp-related ul li:last-child { margin-bottom: 0; }

.yarpp-related li > svg { display: none !important; }
/* REWIZJA (zgłoszenie: strzałka krzywa — ten sam problem i ta sama
   poprawka co w sidebarze „Proponowane wpisy" wyżej i w Spisie treści:
   ::before schodzi z <li>::before (absolute, sztywny `top`, nieodporny na
   font-size/line-height <a>) na <a>::before, <a> dostaje
   `display:inline-flex; align-items:center` — centrowanie automatyczne.
   `li.relative` traci `pl-8` (gutter pod stary absolutny svg, zbędny gdy
   ikona żyje w <a>). border-bottom/text-decoration już wcześniej były na
   text-decoration (nie border), więc flex nic tu nie psuje. */
.yarpp-related li.relative { padding-left: 0 !important; }
.yarpp-related li a.custom-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #0A56AD !important;
  border-bottom: none !important;         /* zdjęte stałe podkreślenie (border-b border-dashed z PHP) */
  text-decoration: none !important;
}
.yarpp-related li a.custom-link::before {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  background-image: url('img/icon-link.svg');
  background-repeat: no-repeat;
  background-size: contain;
}
.yarpp-related li a.custom-link:hover {
  color: #0A56AD !important;
  text-decoration: underline !important;   /* podkreślenie dopiero na hover */
  text-decoration-thickness: 1.5px !important;   /* bez tego "auto" grubieje przy font-weight:500 */
  text-underline-offset: 3px !important;
}

.yarpp-related li p {
  font-size: 13px;
  color: #6b7180 !important;
  line-height: 1.55;
  margin: 4px 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dark .yarpp-related h5 { color: #ffffff !important; }
.dark .yarpp-related li a.custom-link { color: #6ea8ff !important; }
.dark .yarpp-related li a.custom-link:hover { color: #6ea8ff !important; }
.dark .yarpp-related li p { color: #b3b9c6 !important; }
/* === POWIĄZANE ARTYKUŁY (YARPP) :: END ====================================== */


/* ============================================================================
   PAGINACJA (custom_pagination() w functions.php, `.page-numbers`) — CSS-only
   ----------------------------------------------------------------------------
   `.page-numbers` jest na liście wyjątków globalnego `a:not(...)`, więc kolory
   bierze wyłącznie z własnej reguły w tailwind.css:2701 (granat #04274C,
   32x32px, radius 6px) — przemalowujemy na marki niebieski, reszta boksu
   zostaje. Scope przez `.category-list-posts nav`, bo custom_pagination()
   jest wywoływane wewnątrz tego wrappera w category.php / tag.php / index.php.
   PRZY OKAZJI FIX: strzałki prev/next (functions.php) mają `class="w-6 h-6"`
   (24px), a box ma tylko 16px miejsca na treść (32px - 2×8px padding) —
   ikony się przycinały. Zmniejszone do 16px, żeby mieściły się w boksie
   tak samo jak cyfry stron. */
.category-list-posts nav .page-numbers {
  border-radius: 8px !important;
  border-color: #e1e4ec !important;
  color: #1f2438 !important;
  font-weight: 500;
  transition: background .15s, color .15s, border-color .15s;
}
.category-list-posts nav .page-numbers:hover,
.category-list-posts nav .page-numbers.current {
  background: #0A56AD !important;
  border-color: #0A56AD !important;
  color: #fff !important;
}
.category-list-posts nav .page-numbers svg {
  width: 16px !important;
  height: 16px !important;
}

.dark .category-list-posts nav .page-numbers {
  border-color: rgba(255, 255, 255, .15) !important;
  color: #ffffff !important;
}
.dark .category-list-posts nav .page-numbers:hover,
.dark .category-list-posts nav .page-numbers.current {
  background: #0A56AD !important;
  border-color: #0A56AD !important;
  color: #fff !important;
}
/* === PAGINACJA :: END ====================================================== */


/* ============================================================================
   BREADCRUMBS (`templates/page-header.php`, yoast_breadcrumb(), `.breadcrumb`)
   — CSS-only, sitewide (nie tylko category.php — komponent renderuje się
   identycznie na każdym typie strony, więc nadpisania też są sitewide)
   ----------------------------------------------------------------------------
   Diagnoza (potwierdzona w kodzie Yoast SEO,
   wp-content/plugins/wordpress-seo/src/presenters/breadcrumbs-presenter.php):
     <span><a href="...">Pomoc</a></span> / <span class="breadcrumb_last" aria-current="page">Obsługa WordPress</span>
   Separator (domyślnie „/", opcja Yoast breadcrumbs-sep) to GOŁY tekst
   między <span>-ami, nie owinięty w nic — koloruje go wyłącznie reguła na
   samym `.breadcrumb` (kontenerze).
   Jedyne aktywne źródło CSS to dist/css/tailwind.css (dist/css/app.css ma
   swoje `.breadcrumb` style, ale ten plik NIE jest wpięty w functions.php —
   martwy kod, zignorowany).
   Pomarańcz nie siedzi tam, gdzie podejrzewaliście (nie na ostatnim,
   nieklikalnym segmencie) — źródła są dwa:
     1. `.breadcrumb a:hover` — pomarańcz na hover linku „Pomoc".
     2. `.breadcrumb span:not(.breadcrumb_last)` — pomarańcz na <span>
        opakowującym link; dziś niewidoczny (bo <a> w środku ma własny
        kolor i nadpisuje odziedziczony), ale ujawniłby się, gdyby Yoast
        kiedyś wygenerował crumb bez URL-a (wtedy renderuje się jako goły
        <span> BEZ <a>, więc kolor <span> byłby jedynym źródłem prawdy).
        Nadpisujemy defensywnie, żeby ten scenariusz też był zero-pomarańcz.
   ========================================================================== */
.breadcrumb { color: #9aa0b0; }                              /* separator "/" */
.breadcrumb a { color: #0A56AD !important; }
.breadcrumb a:hover { color: #0A56AD !important; }           /* było pomarańcz — bez zmiany na hover */
.breadcrumb span:not(.breadcrumb_last) { color: #9aa0b0 !important; }  /* defensywne, patrz opis wyżej */
.breadcrumb .breadcrumb_last {
  color: #1f2438 !important;                                  /* bieżąca strona — atrament, nie kolor linku */
  text-decoration: none;
}

.dark .breadcrumb { color: rgba(255, 255, 255, .35); }
.dark .breadcrumb a { color: #6ea8ff !important; }
.dark .breadcrumb a:hover { color: #6ea8ff !important; }
.dark .breadcrumb span:not(.breadcrumb_last) { color: rgba(255, 255, 255, .35) !important; }
.dark .breadcrumb .breadcrumb_last { color: #ffffff !important; }
/* === BREADCRUMBS :: END ==================================================== */


/* ============================================================================
   TYTUŁ ARTYKUŁU (single.php, `<h1>` w `.category-list-posts`) — CSS-only
   ----------------------------------------------------------------------------
   REWIZJA (wyciszenie typografii): z dużego H1 (text-xl lg:text-4xl, 700) na
   spokojny nagłówek modułu treściowego — 28px/600, ujemny letter-spacing,
   line-height 1.3. Tailwind preflight resetuje h1 font-weight na `inherit`
   (tailwind.css:80-87) — bez naszej reguły h1 renderowałby się zwykłą wagą,
   mimo że wygląda jak nagłówek.
   Kreska ukryta tak samo jak na liście, dla spójności — dwie kolorowe belki
   nad tekstem (kreska + reszta layoutu) są zbędnym szumem przy H1.
   Scope `.category-list-posts h1` nie koliduje z h2 (karty listy) ani h3
   („Artykuły w kategorii") — różne poziomy nagłówków w tym samym wrapperze. */
.category-list-posts h1 {
  align-items: baseline;
}
.category-list-posts h1 span:last-child {
  color: #1f2438 !important;
  font-weight: 600 !important;
  font-size: 28px !important;
  letter-spacing: -.01em;
  line-height: 1.3 !important;
}
.category-list-posts h1 .bg-dome-orange { display: none !important; }

.dark .category-list-posts h1 span:last-child { color: #ffffff !important; }
/* === TYTUŁ ARTYKUŁU :: END ================================================== */


/* ============================================================================
   NAGŁÓWKI W TREŚCI ARTYKUŁU (H2/H3/H4, `#post-content-area`) — CSS-only
   ----------------------------------------------------------------------------
   Scope na ID (#post-content-area), nie klasę — celowo, żeby mieć pewność,
   że nie ruszamy h2/h3/h4 gdzie indziej na stronie (sidebar, kategorie,
   FAQ itd. używają własnych poziomów nagłówków spoza tego kontenera).
   Obecne stany (dist/css/tailwind.css:2747+): h2 i h3 mają niemal identyczny
   rozmiar (20→30px vs 20→24px) i font-weight:400 (Tailwind resetuje h2-h6 do
   `inherit` — bez jawnej wagi renderują się zwykłym tekstem mimo że wyglądają
   jak nagłówki). h4 nie ma żadnej reguły w ogóle.
   h2 miał dotychczas małą poziomą kreskę po lewej (::before, granat, w
   padding-left:1.5rem), potem zamienioną na border-bottom pod całym
   nagłówkiem. REWIZJA (zgłoszenie: linia pod H2 ma zniknąć całkowicie) —
   border-bottom zdjęty, hierarchia idzie wyłącznie przez wagę/rozmiar/
   kolor/akcent. Nowy akcent to krótka pozioma kreska pod tekstem via
   ::after (patrz niżej).
   Sprawdzone: jedyne źródło border-bottom na h2-h5 to była nasza własna
   wcześniejsza reguła — w motywie nie ma innego (wtyczka .prose z
   tailwind.css nie jest w ogóle podpięta jako klasa na #post-content-area,
   więc jej reguły h2/h3 są martwe, nieistotne).
   ZGŁOSZENIE „górna kreska wraca" — ROOT CAUSE znaleziony: komentarz w
   poprzedniej iteracji twierdził, że oryginalny Tailwindowy pasek
   (`.post-content-area h2::before`, dist/css/tailwind.css:2769-2789 —
   position:absolute, top:50%/translateY(-50%), background granat,
   height:0.25rem/width:0.75rem, bez `padding-left` żeby zrobić dla niego
   miejsce od czasu gdy zdjęliśmy `padding-left`) został „celowo nadpisany
   display:none niżej" — ta reguła nigdy faktycznie nie powstała w tym
   pliku (sprawdzone: przed tą poprawką w całym redesign.css nie było ANI
   JEDNEGO selektora `h2::before` w zasięgu #post-content-area). Tailwind
   używa selektora KLASOWEGO (`.post-content-area`, ten sam element ma i
   id, i class), więc nasz ID-owy `#post-content-area h2` nigdy z nim nie
   kolidował — ::before i ::after to też odrębne pseudo-elementy, więc
   dodanie ::after (akcent pod tekstem) nie miało żadnego wpływu na
   ::before Tailwinda. Efekt: mały granatowy pasek z Tailwinda renderował
   się cały czas, teraz przy left:0 (bo padding-left:0) siadał tuż przy
   pierwszej literze, mniej więcej w połowie wysokości wiersza — to jest
   ta „górna kreska". Naprawa: `content: none !important` na ::before —
   zabija render pseudo-elementu niezależnie od pozostałych właściwości
   (position/background bez znaczenia, gdy content:none). */
#post-content-area h2 {
  font-size: 25px !important;
  font-weight: 700 !important;
  color: #1f2438 !important;
  margin: 36px 0 14px !important;
  border-bottom: none !important;
  padding-bottom: 10px;
  position: relative;
  padding-left: 0;
}
#post-content-area h2::before {
  content: none !important;   /* zabija Tailwindowy pasek (.post-content-area h2::before) — patrz komentarz wyżej */
}
#post-content-area h2::after {
  /* krótki poziomy akcent pod nagłówkiem (40px) zamiast pionowego paska
     z lewej — left/bottom:0 trzyma go przy dolnej krawędzi niezależnie
     od tego, czy h2 ma jedną czy dwie linie tekstu. */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  background: #0A56AD;
  border-radius: 999px !important;
}
#post-content-area h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #1f2438 !important;
  margin: 26px 0 10px !important;
}
#post-content-area h4 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0A56AD !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 22px 0 8px !important;
}
#post-content-area h5 {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-style: normal;
  color: #5b6270 !important;
  margin: 18px 0 6px !important;
}

.dark #post-content-area h2,
.dark #post-content-area h3 { color: #ffffff !important; }
.dark #post-content-area h4 { color: #6ea8ff !important; }
.dark #post-content-area h5 { color: #b3b9c6 !important; }

/* ZGŁOSZENIE „bold ignorowany" — ROOT CAUSE: dist/css/tailwind.css ma
   normalny reset `b, strong { font-weight: bolder }`, ALE dist/css/vh.css
   (handle `mainvh`, ładowany zaraz po tailwind-style, PRZED naszym
   redesign.css — patrz zależności w functions.php: wp_register_style(
   'vh-redesign', ..., array('tailwind-style','mainvh'), ...)) nadpisuje
   to globalnie: `strong, b { font-weight: 500; }` (dist/css/vh.css:73-75).
   Obie reguły to zwykłe selektory elementowe (ta sama specyficzność) —
   wygrywa kolejność w <head>, więc 500 z mainvh bije 700/bolder z
   Tailwinda. Font Inter ma wagę 700 wgrany (enqueue w functions.php:
   `Inter:wght@300;400;500;600;700;800;900` — 700 jest na liście, nie
   trzeba nic dodawać), więc to nie problem z brakiem pliku fontu — samo
   computed font-weight faktycznie wychodziło 500 (widoczne, ale za
   cienkie na "bold"), nie efekt nieprzeciążonej wagi. Ramki alert
   (.message_alert) nie mają własnej reguły font-weight na strong/b —
   dziedziczą ten sam błąd (są w #post-content-area, patrz single.php:19-34,
   ACF `alert` layout renderuje się w tym samym kontenerze co the_content()),
   więc jedna reguła niżej naprawia obie zgłoszone lokalizacje (akapity +
   ramki) oraz tabele/kroki numerowane za darmo (też w #post-content-area,
   też bez własnej reguły strong/b). */
#post-content-area strong,
#post-content-area b {
  font-weight: 700 !important;
}
/* === NAGŁÓWKI W TREŚCI :: END =============================================== */


/* ============================================================================
   KROKI NUMEROWANE W TREŚCI (`#post-content-area ol`) — plakietka w stylu
   ikon kategorii (zaokrąglony kwadrat), BEZ linii łączącej — CSS-only
   ----------------------------------------------------------------------------
   Struktura potwierdzona na żywym artykule (ID 23973, DB): zwykłe <ol><li>,
   BEZ osobnego elementu na numer — cyfrę generuje CSS counter() na ::before
   (dist/css/tailwind.css:2846-2884, .post-content-area ol > li::before).
   REWIZJA (zgłoszenie: usunąć linię timeline, plakietka jak ikony kategorii
   z #category-list-section — zaokrąglony kwadrat #e6f1fb/#0C447C, nie koło) —
   linia (::after) skasowana całkowicie, light i dark.
   Kropka po numerze usunięta w CSS: bazowe `content: counters(section,".",
   decimal) "."` doklejało literalną kropkę jako osobny string w content —
   usunięta (kropka NIE siedziała w HTML, więc nie ma czego zostawiać).
   Pozycja (left/top): gutter <ol> to padding-left:2.5rem (40px), <li> ma
   własny padding-left:1rem (16px) na tekst — więc przy plakietce szerokości
   W i offsecie left:L (liczonym od lewej krawędzi <li>, bo li ma
   position:relative z bazy) odstęp do tekstu = 16 − L − W. Dla W=36px i
   docelowego odstępu ~14px (spójnie z ikona→nagłówek w kartach kategorii,
   tam margin-right:10px — tu nieco więcej, bo plakietka stoi w gutterze,
   nie w linii z tekstem): L = 16 − 36 − 14 = −34px. top: przeliczone tak,
   żeby zachować pionowe wyśrodkowanie względem pierwszej linii tekstu jak
   w bazowej regule (tam 40px/top:-0.35rem) — dla 36px: top:-4px. */
#post-content-area ol > li::before {
  content: counters(section, ".", decimal);
  background: #e6f1fb !important;
  background-image: none !important;
  width: 36px !important;
  height: 36px !important;
  left: -34px !important;
  top: -4px !important;
  border-radius: 10px !important;
  color: #0C447C !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Odstęp między krokami — nadpisuje bazowe margin-bottom:0.25rem. */
#post-content-area ol > li {
  margin-bottom: 20px !important;
}

/* Screenshoty w krokach — bez zmian względem poprzedniej wersji (działało
   dobrze): tylko ramka/cień, NIE ruszamy margin/display/max-width (już
   ustawione sensownie przez img.aligncenter + .single-post img.aligncenter
   w tailwind.css). */
#post-content-area ol img.aligncenter {
  border: 1px solid #e1e4ec;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(31,36,56,.06);
}

.dark #post-content-area ol > li::before {
  background: rgba(10, 86, 173, .25) !important;
  color: #8fb8ef !important;
}
.dark #post-content-area ol img.aligncenter {
  border-color: rgba(255, 255, 255, .15);
}
/* === KROKI NUMEROWANE (PLAKIETKA) :: END ==================================== */


/* ============================================================================
   RAMKI INFORMACYJNE (`.message_alert.alert-*`, shortcode [alert] z
   lib/theme-shortcodes.php:262, NIE blok ACF z audytu — patrz ustalenia
   z analizy) — CSS-only
   ----------------------------------------------------------------------------
   6 realnie użytych klas w treści (sprawdzone w DB na 84 artykułach):
   alert-success, alert-warning, alert-danger (1×), alert-info, alert-default
   (bare [alert]), alert-tip (1×, broken — nieistniejący klucz w $icons w
   nt_alert_shortcode(), dziś pusta ikona). Zmapowane na 3 role kolorystyczne
   za zgodą: success→zielony; warning+danger→bursztyn (ta sama rola, danger
   ma tylko 1 wystąpienie w całej bazie); info+default+tip→niebieski
   (tip defensywnie, żeby ten jeden zepsuty przypadek nie został gołym boxem).
   Ikona: prawdziwe inline SVG z stroke="currentColor" (fill="currentColor"
   dla success) — kolor sterowany przez `color` na .w-12, bez podmiany
   grafiki. .w-12 (Tailwind, 48px) zamieniony w kółko-badge z tłem wariantu;
   SVG w środku zmniejszone i przebarwione na biało. */
.message_alert {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  margin-bottom: 14px !important;
  border-radius: 10px !important;
}
/* COFNIĘTE (regres — ikony przestały się renderować): próbowałem najpierw
   pełnego kółka z tłem, potem podmiany na pliki _redesign/img/icons/*.svg
   przez background-image + display:none na oryginalnym <svg>. Obie wersje
   zdjęte. Wracamy do oryginalnego inline <svg class="w-8 h-8" ...> z
   lib/theme-shortcodes.php — on już tam jest i działa, potrzebuje tylko
   `color` (stroke/fill="currentColor" w źródle), nie podmiany kształtu ani
   dodatkowego requestu HTTP po plik graficzny. Zero własnego stylu na
   .w-12 — zostaje na tym, co daje Tailwind (`w-12 block flex-shrink`). */
.message_alert .flex-1,
.message_alert .flex-1 p {
  line-height: 1.5;
}
#post-content-area .message_alert h4 {
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 0 4px !important;
  border-bottom: none;
  padding-bottom: 0;
}

.message_alert.alert-success {
  background: #eaf6ec !important;
  border-color: #d3ecd6 !important;
}
.message_alert.alert-success svg.w-8.h-8 { color: #3a9950; }
.message_alert.alert-success .flex-1,
#post-content-area .message_alert.alert-success h4 { color: #1f3d26 !important; }

.message_alert.alert-warning,
.message_alert.alert-danger {
  background: #fdf3e7 !important;
  border-color: #f5e1c3 !important;
}
.message_alert.alert-warning svg.w-8.h-8,
.message_alert.alert-danger svg.w-8.h-8 { color: #c9821f; }
.message_alert.alert-warning .flex-1,
.message_alert.alert-danger .flex-1,
#post-content-area .message_alert.alert-warning h4,
#post-content-area .message_alert.alert-danger h4 { color: #6b4415 !important; }

.message_alert.alert-info,
.message_alert.alert-default,
.message_alert.alert-tip {
  background: #eaf1fb !important;
  border-color: #d6e6f7 !important;
}
.message_alert.alert-info svg.w-8.h-8,
.message_alert.alert-default svg.w-8.h-8,
.message_alert.alert-tip svg.w-8.h-8 { color: #0A56AD; }
.message_alert.alert-info .flex-1,
.message_alert.alert-default .flex-1,
.message_alert.alert-tip .flex-1,
#post-content-area .message_alert.alert-info h4,
#post-content-area .message_alert.alert-default h4,
#post-content-area .message_alert.alert-tip h4 { color: #0A56AD !important; }

.dark .message_alert.alert-success {
  background: rgba(58, 153, 80, .15) !important;
  border-color: rgba(58, 153, 80, .4) !important;
}
.dark .message_alert.alert-success .flex-1,
.dark #post-content-area .message_alert.alert-success h4 { color: #b7e3c2 !important; }

.dark .message_alert.alert-warning,
.dark .message_alert.alert-danger {
  background: rgba(201, 130, 31, .15) !important;
  border-color: rgba(201, 130, 31, .4) !important;
}
.dark .message_alert.alert-warning .flex-1,
.dark .message_alert.alert-danger .flex-1,
.dark #post-content-area .message_alert.alert-warning h4,
.dark #post-content-area .message_alert.alert-danger h4 { color: #f0d9b0 !important; }

.dark .message_alert.alert-info,
.dark .message_alert.alert-default,
.dark .message_alert.alert-tip {
  background: rgba(10, 86, 173, .2) !important;
  border-color: rgba(10, 86, 173, .4) !important;
}
.dark .message_alert.alert-info .flex-1,
.dark .message_alert.alert-default .flex-1,
.dark .message_alert.alert-tip .flex-1,
.dark #post-content-area .message_alert.alert-info h4,
.dark #post-content-area .message_alert.alert-default h4,
.dark #post-content-area .message_alert.alert-tip h4 { color: #9cc4f2 !important; }
/* === RAMKI INFORMACYJNE :: END ============================================== */


/* ============================================================================
   SPIS TREŚCI NA POCZĄTKU ARTYKUŁU (`#post-content-area > ul:first-of-type`)
   — CSS-only
   ----------------------------------------------------------------------------
   Lista bez własnej klasy/wrappera w treści — jedyny dostępny selektor to
   pozycyjny, pierwsza <ul> w kolejności DOM wewnątrz #post-content-area.
   Zaakceptowane ryzyko: jeśli redaktor kiedyś wstawi inną listę przed
   spisem treści, złapie niewłaściwy element.
   Zdjęta domyślna kropka z tailwind.css (.post-content-area ul... li::before)
   — inaczej zostałaby obok naszej ikony strzałki.
   Zagnieżdżone <ul> (na wypadek podpunktów w innych artykułach niż testowany
   — w tym konkretnym ich nie ma) stylowane osobno: selektor z `>` na każdym
   poziomie naturalnie odcina zagnieżdżone pozycje od reguł top-level, więc
   nie trzeba nic dodatkowo wyłączać. */
#post-content-area > ul:first-of-type {
  list-style: none !important;
  background: #f7f8fb;
  border: 1px solid #e1e4ec;
  border-radius: 12px !important;
  padding: 16px 20px;
}
#post-content-area > ul:first-of-type li { padding: 6px 0; }
#post-content-area > ul:first-of-type li::before { display: none !important; content: none !important; }
/* KOREKTA (podkreślenie na całą szerokość + pomarańcz na hover — dwa objawy
   tej samej przyczyny): globalne `a:not(...)` z tailwind.css:2520 daje
   KAŻDEMU zwykłemu <a> (nasz TOC-link nie ma żadnej klasy z listy wyjątków)
   `border-bottom: 1px dashed` — to WŁAŚNIE ta linia, nie text-decoration
   (którego tu w ogóle nie ma, `text-decoration:none` było więc bez
   znaczenia dla samej kreski). `display:flex` bez ograniczenia szerokości
   rozciągał <a> (i jego border-bottom) na całą szerokość <li>, stąd linia
   na całym boksie. Naprawa: `inline-flex` (kurczy się do treści) +
   jawny `border-color` (inaczej zostaje granatowy z reguły globalnej,
   a na hover globalne `a:not(...):hover` — bez !important — zmienia go na
   pomarańcz: to jest realne źródło "pomarańczowego hover", nie sam tekst,
   który już był zabezpieczony przez !important). Hover: dashed→solid,
   kolor stały (bez zmiany, spójnie z resztą projektu). */
/* KOREKTA 2: `inline-flex` skrócił SZEROKOŚĆ boksu do treści, ale
   border-bottom to jedna, ciągła krawędź CAŁEGO boksu <a> (ikona+tekst
   razem) — nie da się jej „wyłączyć" tylko pod jednym dzieckiem, bo to
   nie jest właściwość per-fragment tekstu. Rozwiązanie: porzucamy
   border-bottom na rzecz text-decoration. text-decoration-line, w
   odróżnieniu od border, faktycznie NIE rysuje się przez dzieci będące
   elementami flex/inline-block (są „atomic inline" — przeglądarka
   pomija je przy kreśleniu linii dekoracji z przodka). ::before jest tu
   flex-itemem (dziecko inline-flex), więc automatycznie się blokuje
   (spec: flex items są zawsze „blockified") i linia go omija — bez
   dodatkowych sztuczek. Efekt: podkreślenie realnie tylko pod tekstem. */
#post-content-area > ul:first-of-type > li > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #0A56AD !important;
  border-bottom: none !important;              /* zabija border-bottom z globalnej a:not(...) */
  text-decoration-line: underline !important;
  text-decoration-style: dashed !important;
  text-decoration-color: #0A56AD !important;
  text-underline-offset: 3px;
}
#post-content-area > ul:first-of-type > li > a:hover {
  color: #0A56AD !important;
  text-decoration-style: solid !important;      /* przerywana → ciągła, ten sam wzorzec co gdzie indziej */
}
#post-content-area > ul:first-of-type > li > a::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-image: url('img/icon-link.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

/* zagnieżdżone podpunkty — wcięte, przygaszone, bez ikony */
#post-content-area > ul:first-of-type ul {
  list-style: none !important;
  margin: 2px 0 0 0;
  padding: 0;
}
#post-content-area > ul:first-of-type ul li { padding: 4px 0; }
#post-content-area > ul:first-of-type ul li a {
  display: block;
  padding-left: 24px;
  font-size: 12.5px;
  color: #6b7180 !important;
  text-decoration: none;
}

.dark #post-content-area > ul:first-of-type {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}
.dark #post-content-area > ul:first-of-type > li > a {
  color: #6ea8ff !important;
  text-decoration-color: #6ea8ff !important;
}
.dark #post-content-area > ul:first-of-type > li > a:hover {
  color: #6ea8ff !important;
}
.dark #post-content-area > ul:first-of-type ul li a { color: #b3b9c6 !important; }
/* === SPIS TREŚCI :: END ====================================================== */


/* ============================================================================
   SIDEBAR „Na skróty" (`#na-skroty`, wypełniany przez JS —
   src/js/app.js:277 postContentFix(), skompilowane do dist/js/app.js,
   wpięte jako handle 'app-js') — CSS-only
   ----------------------------------------------------------------------------
   PHP renderuje pusty <ul id="na-skroty"></ul> (templates/sidebar-box.php) —
   JS skanuje #post-content-area h2/h3/h4 i dokleja <li> per nagłówek.
   H2 i H3 dostają IDENTYCZNĄ klasę `li.scrollTo.pl-8` — jedyny sygnał
   strukturalny odróżniający je to obecność <svg> (tylko H2, jako pierwszy
   sibling przed <a>). H4+ ma osobną klasę `pl-12`, więc tu odróżnienie
   jest trywialne przez samą klasę. Selektory potwierdzone czytaniem
   źródła JS, nie zgadywane. */
/* Etykieta „Na skróty" — ten sam <h5 class="mb-3 lg:mb-8 text-black
   dark:text-white text-xl lg:text-2xl"> co „Kategorie" w sidebar.php, tu
   wstrzykiwany przez JS (insertAdjacentHTML) zamiast PHP. Ten sam rejestr
   eyebrow co .sidebar_cat_nav h5 > a — spójność etykiet nawigacyjnych w
   obu sidebarach. #9aa0b0 działa w obu trybach, brak reguły .dark. */
#na-skroty h5 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9aa0b0;
}
/* KOREKTA: poprzednia wersja tylko przebarwiała oryginalny <svg> (ikonę
   dokumentu z functions.php/JS) zamiast podmienić kształt na icon-link.svg
   (strzałka, jak wszędzie indziej na stronie). Svg chowamy, strzałka wchodzi
   jako ::before na <a> (svg + a — ten sam sibling-selector co wcześniej,
   teraz celujący w pseudo-element zamiast w kolor).
   Padding-left li (pl-8, Tailwind 2rem) był zarezerwowany pod oryginalny
   <svg> pozycjonowany `absolute left-0` — sam padding NIE zwalnia się przez
   ukrycie dziecka (position:absolute nie wpływa na padding rodzica), więc
   zerujemy go jawnie, inaczej tekst zostałby z martwym 32px pustym
   wcięciem przed nową, mniejszą ikoną. Zerowane jednolicie dla całej klasy
   .pl-8 (obejmuje też H3, który nigdy nie miał svg) — H2 i H3 mają dzięki
   temu wspólną linię startową przy lewej krawędzi, tak jak miały wcześniej
   (kiedy tekst obu zaczynał się po tym samym 32px paddingu). */
#na-skroty li.scrollTo.pl-8 {
  margin-top: 6px;
  padding-left: 0 !important;
}
#na-skroty li.scrollTo.pl-8 svg { display: none !important; }
#na-skroty li.scrollTo.pl-8 svg + a::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url('img/icon-link.svg');
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle;
}
#na-skroty li.scrollTo.pl-8 svg + a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #1f2438 !important;
}
/* REWIZJA 2 (zgłoszenie: nawet po poprzedniej poprawce H3/H4 wciąż za mało
   odróżnione — hierarchia ma iść przez typografię/wcięcie/kolor, BEZ
   podkreślenia w jakimkolwiek stanie, włącznie z hover/focus; podkreślenie
   zarezerwowane wyłącznie dla H2 z ikoną).
   Markery „—"/„·" zamiast ikony strzałki — subtelny sygnał głębokości bez
   dokładania kolejnego wariantu ikony.
   Odkrycie z poprzedniej rewizji nadal aktualne: markup z JS
   (src/js/app.js:289/291/293) daje H2 klasę `not-default` (wyklucza z
   globalnej `a:not(...)`), H3/H4 jej nie mają — stąd jawne zerowanie
   border-bottom i text-decoration w KAŻDYM stanie, nie tylko spoczynku. */
#na-skroty li.scrollTo.pl-8 > a:first-child {
  display: block;
  margin-left: 21px;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1f2438 !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
#na-skroty li.scrollTo.pl-8 > a:first-child::before {
  content: '—';
  color: #9aa0b0;
  margin-right: 6px;
}
#na-skroty li.scrollTo.pl-8 > a:first-child:hover,
#na-skroty li.scrollTo.pl-8 > a:first-child:focus {
  color: #0A56AD !important;
  text-decoration: none !important;
}

#na-skroty li.scrollTo.pl-12 > a {
  display: block;
  margin-left: 34px;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #6b7180 !important;
  border-bottom: none !important;
  text-decoration: none !important;
}
#na-skroty li.scrollTo.pl-12 > a::before {
  content: '·';
  color: #b8bdc9;
  margin-right: 6px;
}
#na-skroty li.scrollTo.pl-12 > a:hover,
#na-skroty li.scrollTo.pl-12 > a:focus {
  color: #0A56AD !important;
  text-decoration: none !important;
}

.dark #na-skroty li.scrollTo.pl-8 svg + a { color: #ffffff !important; }
.dark #na-skroty li.scrollTo.pl-8 > a:first-child { color: #ffffff !important; }
.dark #na-skroty li.scrollTo.pl-8 > a:first-child::before { color: rgba(255, 255, 255, .35); }
.dark #na-skroty li.scrollTo.pl-12 > a { color: #9aa0b0 !important; }
.dark #na-skroty li.scrollTo.pl-12 > a::before { color: rgba(255, 255, 255, .25); }
.dark #na-skroty li.scrollTo.pl-8 > a:first-child:hover,
.dark #na-skroty li.scrollTo.pl-8 > a:first-child:focus,
.dark #na-skroty li.scrollTo.pl-12 > a:hover,
.dark #na-skroty li.scrollTo.pl-12 > a:focus { color: #6ea8ff !important; }
/* === SIDEBAR „NA SKRÓTY" :: END ============================================= */


/* ============================================================================
   LINKI WEWNĄTRZ RAMEK ALERT (ten sam wzorzec problemu co breadcrumbs/TOC:
   globalna `a:not(...)` z tailwind.css daje KAŻDEMU linkowi bez specjalnej
   klasy przerywane podkreślenie na granacie + pomarańcz na hover) —
   CSS-only. Scope na #post-content-area (ID) — wygrywa nad Tailwind
   utility (0 w komponencie ID) niezależnie od kolejności ładowania, więc
   matematycznie pewne, nie tylko „zwykle wygrywa" (nie mam tu jednak
   przeglądarki, żeby potwierdzić computed color w DevTools — poniższe to
   analiza kaskady, nie zrzut z inspektora).
   Objęte wszystkie 6 realnych klas alert-* (patrz analiza wcześniej), nie
   tylko te 4 wymienione we wzorze zgłoszenia — te same linki mogą się
   pojawić w alert-warning/alert-tip w innych artykułach.
   #post-content-area istnieje na KAŻDEJ stronie pojedynczego artykułu na
   /pomoc/, więc to pokrycie całego serwisu, nie jednego wpisu z screena. */
#post-content-area .alert-default a,
#post-content-area .alert-info a,
#post-content-area .alert-success a,
#post-content-area .alert-warning a,
#post-content-area .alert-danger a,
#post-content-area .alert-tip a {
  color: #0A56AD !important;
  border-bottom: none !important;      /* zabija dashed border-bottom z globalnej reguły */
  text-decoration: none;
}
#post-content-area .alert-default a:hover,
#post-content-area .alert-info a:hover,
#post-content-area .alert-success a:hover,
#post-content-area .alert-warning a:hover,
#post-content-area .alert-danger a:hover,
#post-content-area .alert-tip a:hover {
  color: #094a96 !important;
  text-decoration: underline;
}
/* === LINKI W ALERTACH :: END ================================================ */


/* ============================================================================
   LINKI .custom-link W TREŚCI ARTYKUŁU / „POWIĄZANE ARTYKUŁY" — ten sam wzorzec
   problemu co ALERT/TOC/breadcrumbs wyżej: <a class="custom-link ..."> (m.in.
   yarpp-template-list.php, patrz blok POWIĄZANE ARTYKUŁY (YARPP) wyżej) niesie
   Tailwindowe `border-b border-dashed border-dome-blue` (= gruba przerywana
   linia, to border-bottom, NIE text-decoration) + `hover:border-dome-granat`
   + `dark:hover:text-dome-orange`. .yarpp-related li a.custom-link (wyżej) już
   neutralizuje to w zasięgu klasy — ten blok dokłada twardszą gwarancję na ID:
   YARPP dokleja swój markup do the_content(), więc .yarpp-related zawsze ląduje
   jako potomek #post-content-area (single.php:19) — ID bije Tailwind
   niezależnie od kolejności ładowania CSS, bez potrzeby liczenia specyficzności
   każdej utility z osobna.
   Scope na #post-content-area (a nie samo .custom-link): sidebar „Proponowane
   wpisy" (article-single__sidebar), siatka kategorii (#category-list-section)
   i baner górny (#global_banner_top_site) mają .custom-link w INNYCH,
   świadomie odmiennych wariantach (dashed→solid jako feedback, patrz komentarze
   przy tamtych blokach) — nie są tym samym bugiem i celowo zostają nietknięte. */
#post-content-area a.custom-link {
  border-bottom: none !important;      /* zabija border-b + border-dashed */
  text-decoration: none;               /* zdejmij natywne podkreślenie w spoczynku */
  color: #0A56AD;
}
#post-content-area a.custom-link:hover {
  border-bottom: none !important;      /* zabija hover:border-dome-granat */
  color: #0A56AD !important;           /* zabija dark:hover:text-dome-orange */
  text-decoration: underline;          /* jedno, cienkie podkreślenie na hover */
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
.dark #post-content-area a.custom-link:hover {
  color: #8fb8ef !important;
}
/* === LINKI .custom-link W #post-content-area :: END ========================= */


/* ============================================================================
   TABELE W TREŚCI ARTYKUŁU (`#post-content-area table`) — CSS-only
   ----------------------------------------------------------------------------
   Realny markup (sprawdzone w DB na kilku artykułach, np. ID 23624 „Hosting
   WordPress vs Klasyczny hosting"): stary, płaski HTML z WYSIWYG —
   `<table><colgroup>...</colgroup><tbody><tr><th>...</th></tr>
   <tr><td>...</td></tr>...</tbody></table>`. BRAK <thead> — wiersz nagłówka
   to zwyczajnie pierwszy <tr> z komórkami <th> wewnątrz <tbody>. Selektory
   `th`/`td` łapią to niezależnie od tej struktury.
   KOREKTA (zgłoszenie: brak zaokrągleń + widmowa pusta kolumna) — pierwsza
   wersja miała `display:block` na <table>, co realnie psuje dwie rzeczy
   naraz, potwierdzone na żywo:
   1. `border-radius` z `border-collapse:collapse` się wzajemnie wykluczają
      (znany konflikt, niezależny od display) — stąd brak zaokrągleń.
   2. `display:block` wyłącza <table> z algorytmu table layout, więc
      `<colgroup><col/><col/><col/></colgroup>` z realnej treści (np. ID
      23624) przestaje być poprawnie konsumowane — przeglądarka renderuje
      osierocony <col> jako dodatkową, pustą kolumnę.
   Naprawa: `<table>` zostaje przy domyślnym `display:table` (jego OUTER
   display i tak jest już block-level per spec — `overflow-x:auto` działa
   na nim bez blokowania inner table layout, colgroup/col wracają do
   normalnego działania), `border-collapse:separate` + `border-spacing:0`
   zamiast `collapse` (przywraca border-radius; wizualnie bez różnicy przy
   naszym designie, bo th/td mają tylko border-bottom, nie pełne obramowanie
   — nie ma czego "kolapsować").
   REWIZJA (zgłoszenie: tabela wyjeżdża pod sidebar "Na skróty") —
   `white-space:nowrap` był błędem: w table-layout:auto (domyślny, celowo
   zachowany wyżej) szerokość <table> to NIE twardy limit, tylko sugestia —
   przeglądarka i tak poszerzy box ponad `width:100%`, jeśli min-content
   komórek (wymuszony przez nowrap) tego wymaga. `overflow-x:auto` nigdy się
   nie uruchamiał, bo box sam rósł, zamiast przycinać nadmiar WEWNĄTRZ siebie.
   Potwierdzone w markupie (DB, ID 23839 „Jakie porty używane są w
   hostingu?" — realna tabela portów): `<table style="...overflow: hidden;
   width: 100%;">` — inline `overflow:hidden` z edytora WYSIWYG bije naszą
   regułę `overflow-x:auto` (brak !important), więc scroll i tak by nie
   zadziałał nawet po zdjęciu nowrap. Stąd `!important` na `overflow-x`
   oraz `max-width:100% !important` jako twardy limit niezależny od
   ewentualnego inline `width` z edytora. `white-space:normal` (dziedziczy
   się na th/td) zawija długie opisy zamiast rozpychać tabelę — scroll
   zostaje jako fallback tylko dla naprawdę wielu kolumn. */
#post-content-area table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  white-space: normal;
  max-width: 100% !important;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  border: 1px solid #e1e4ec;
  margin: 20px 0;
}
#post-content-area th {
  background: #f7f8fb;
  color: #1f2438;
  font-weight: 600;
  font-size: 13.5px;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid #e1e4ec;
}
#post-content-area td {
  padding: 12px 16px;
  font-size: 13.5px;
  color: #1f2438;
  border-bottom: 1px solid #eef0f4;
}
#post-content-area table tbody tr:nth-child(even) { background: #fafbfc; }

/* Linki w komórkach — ten sam powtarzający się problem (globalna
   a:not(...) daje granatowe przerywane podkreślenie + pomarańcz na hover),
   naprawiony tym samym wzorcem co breadcrumbs/TOC/alerty. */
#post-content-area table a {
  color: #0A56AD !important;
  border-bottom: none !important;
  text-decoration: underline;
  text-decoration-style: dashed;
}
#post-content-area table a:hover {
  color: #094a96 !important;
  text-decoration-style: solid;
}

/* Podpis/zastrzeżenie pod tabelą (np. „*Ceny brutto na podstawie...",
   potwierdzone w treści ID 23984 „Najtańszy hosting w Polsce 2026"): NIE
   stylujemy całego `table + p` (sprawdziłem 6 artykułów z tabelami —
   w 5 z 6 następny akapit to zwykła kontynuacja tekstu, nie podpis;
   ogólny selektor pozycyjny źle trafiłby w większości przypadków).
   Zamiast tego celujemy w akapit, który zaczyna się od <em> — dokładnie
   tak autor już dziś ręcznie oznacza te podpisy (`<em><strong>*Ceny
   brutto...</strong></em>`), więc to bezpieczniejszy, potwierdzony w
   realnej treści sygnał niż sama pozycja. */
#post-content-area table + p > em:first-child {
  display: block;
  font-size: 12px;
  color: #6b7180;
  margin-top: 8px;
}

.dark #post-content-area table { border-color: rgba(255, 255, 255, .12); }
.dark #post-content-area th {
  background: rgba(255, 255, 255, .04);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, .15);
}
.dark #post-content-area td {
  color: #e5e7eb;
  border-bottom-color: rgba(255, 255, 255, .08);
}
.dark #post-content-area table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.dark #post-content-area table a { color: #6ea8ff !important; }
.dark #post-content-area table a:hover { color: #9cc4f2 !important; }
.dark #post-content-area table + p > em:first-child { color: #9aa0b0; }
/* === TABELE :: END =========================================================== */


/* ============================================================================
   BLOKI KODU + przycisk kopiowania (JS zatwierdzony, `_redesign/redesign.js`)
   ----------------------------------------------------------------------------
   DIAGNOZA (zgłoszenie: blok ze zrzutu to goły szary prostokąt): `.highlight`
   (ACF flexible content, layout „code", templates/blocks/code.php) NIE
   występuje w treści żadnego opublikowanego posta (sprawdzone w bazie,
   COUNT=0) — blok ACF istnieje jako typ pola, ale nikt go jeszcze nie użył.
   Realne bloki kodu w treści to gołe `<pre>` wstawiane z edytora, w
   `#post-content-area` (single.php:19, `<div id="post-content-area"
   class="post-content-area">`), w dwóch wariantach potwierdzonych w bazie:
     A) `<pre>tekst</pre>` bez <code> (najczęstszy, np. ID 23694 „Jak
        zalogować się do cPanel?": `<pre>https://mojastrona.pl/cpanel</pre>`)
     B) `<pre><code class="language-xxx">...</code></pre>` (np. ID 23572
        „Co to jest .htaccess?" — fragmenty Apache; Prism.js, sugerowany
        przez klasę `language-*`, NIE jest wpięty w functions.php, więc ta
        klasa jest dziś martwa/nieszkodliwa).
   Szary prostokąt ze zrzutu to already-istniejąca reguła Tailwinda
   (dist/css/tailwind.css:2886, `.post-content-area pre` — KLASA, nie ID:
   bg #f4f4f4, border #9ca3af, radius 0.375rem). Kontener ma i id, i class
   ("post-content-area") — scope tu na ID (`#post-content-area pre`), jak
   wszędzie indziej w tym pliku (patrz H2/tabele), wygrywa specyficznością
   nad regułą Tailwinda bez potrzeby !important (poza border-radius — patrz
   niżej, powód inny: globalny reset).
   `.highlight` zostaje w pliku (na wypadek gdyby ktoś kiedyś użył bloku ACF)
   — nieszkodliwe, bo dziś nic go nie renderuje. JS (redesign.js) selektuje
   OBA: `.highlight, #post-content-area pre`. */
.highlight,
#post-content-area pre {
  position: relative;
  background: #f7f8fb;
  border: 1px solid #e1e4ec;
  border-radius: 10px !important;   /* !important: vh.css ma globalny reset `* { border-radius: 0 !important }` */
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 13.5px;
  color: #1f2438;
  overflow-x: auto;
}
.highlight { padding: 14px 52px 14px 18px; }
#post-content-area pre {
  padding: 44px 18px 14px 18px;      /* górny padding = miejsce na belkę ::before */
  line-height: 1.6;
  margin: 16px 0;
}
/* belka nagłówkowa „okienka kodu" — tylko na gołych <pre> (ACF `.highlight`
   ma już własny przycisk bez belki, zgodnie z poprzednim krokiem). */
#post-content-area pre::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 32px;
  background: #eef0f5 url('img/icons/code.svg') 14px center / 14px no-repeat;
  border-bottom: 1px solid #e1e4ec;
  border-radius: 10px 10px 0 0 !important;
}

.vhr-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 8px !important;
  background: #ffffff;
  border: 1px solid #e1e4ec;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
  transition: opacity .15s, border-color .15s, background .15s;
}
.vhr-copy-btn:hover { opacity: 1; border-color: #0A56AD; }
.vhr-copy-btn.copied { border-color: #3a9950; }
/* w belce <pre> przycisk jest subtelniejszy — bez ramki/tła, tylko hover. */
#post-content-area pre .vhr-copy-btn {
  top: 4px;
  right: 6px;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
}
#post-content-area pre .vhr-copy-btn:hover { background: rgba(31, 36, 56, .06); }

.dark .highlight,
.dark #post-content-area pre {
  background: #252a3d;
  border-color: rgba(255, 255, 255, .1);
  color: #e5e7eb;
}
.dark #post-content-area pre::before {
  background: #1d2233 url('img/icons/code-light.svg') 14px center / 14px no-repeat;
  border-bottom-color: rgba(255, 255, 255, .12);
}
.dark .vhr-copy-btn {
  background: #1b1f2e;
  border-color: rgba(255, 255, 255, .15);
}
.dark .vhr-copy-btn:hover { border-color: #6ea8ff; }
.dark .vhr-copy-btn.copied { border-color: #3a9950; }
.dark #post-content-area pre .vhr-copy-btn { background: transparent; }
.dark #post-content-area pre .vhr-copy-btn:hover { background: rgba(255, 255, 255, .08); }
/* === BLOKI KODU :: END ======================================================= */